feat: add computed breakpoints

Author: reegodev

Diff for: .github/workflows/node.js.yml

@@ -21,12 +21,19 @@ jobs:
 
     steps:
     - uses: actions/checkout@v2
+
     - name: Use Node.js ${{ matrix.node-version }}
       uses: actions/setup-node@v1
       with:
         node-version: ${{ matrix.node-version }}
+
     - run: npm install -g lerna start-server-and-test
     - run: lerna bootstrap
     - run: lerna run --scope vue-screen build --stream
     - run: lerna run --scope vue-screen test --stream
     - run: start-server-and-test "lerna run --scope vue-screen-examples serve --stream" http://localhost:8081 "lerna run --scope vue-screen-e2e cy:run  --stream"
+
+    - name: Coverage
+      uses: codecov/codecov-action@v1
+      with:
+        token: ${{ secrets.CODECOV_TOKEN }}

Diff for: .gitignore

@@ -3,4 +3,5 @@ dist
 !packages/docs/src/.vitepress/dist
 .nuxt
 packages/e2e/cypress/screenshots
-.DS_Store
+.DS_Store
+coverage

Diff for: README.md

@@ -2,6 +2,7 @@
 [![Build Status](https://github.com/reegodev/vue-screen/workflows/Node.js%20CI/badge.svg)](https://github.com/reegodev/vue-screen/actions)
 [![npm version](https://img.shields.io/npm/v/vue-screen/next)](https://www.npmjs.com/package/vue-screen)
 [![npm downloads](https://img.shields.io/npm/dm/vue-screen)](https://www.npmjs.com/package/vue-screen)
+[![codecov](https://codecov.io/gh/reegodev/vue-screen/branch/master/graph/badge.svg?token=KTHOOUSHFJ)](https://codecov.io/gh/reegodev/vue-screen)
 
 <br>
 

Diff for: packages/docs/src/.vitepress/config.js

@@ -16,7 +16,7 @@ if (process.env.NODE_ENV === 'production') {
 }
 
 module.exports = {
-  base: '/vue-screen/',
+  // base: '/vue-screen/',
   lang: 'en-US',
   title: 'Vue-Screen',
   description: '"Reactive screen size and media query states for Vue components. Integrates with most UI frameworks out of the box.',

Diff for: packages/docs/src/guide/configuration/composition-api.md

@@ -57,16 +57,50 @@ The value can either be a string literal, with one of the supported UI framework
 or an object that specifies a custom grid:
 
 ```ts
-Record<string, number | string>
+Record<string, number | string | ComputedBreakpoint>
 ```
 
 For example:
 ```js
+import { useGrid } from 'vue-screen'
+
 useGrid({
   phone: '340px',
   tablet: 768,
   desktop: '32em',
 })
 ```
+<br>
+
+#### Computed breakpoints
+
+Aside from using direct breakpoint values, you can also specify breakpoints that depend on other breakpoints, for example:
+
+```js
+import { useGrid } from 'vue-screen'
 
+useGrid({
+  phone: '340px',
+  tablet: 768,
+  desktop: '32em',
+  tabletAndDown: grid => !grid.desktop,
+})
+```
+
+In this example, the breakpoint `tabletAndDown` will be recalculated everytime `desktop` breakpoint changes.
+
+<br>
+
+#### Extending default UI frameworks breakpoints
+
+Sometimes it's useful to add new breakpoints to the default configuration of one of the supported UI frameworks.<br>
+You can do that by using the `extendGrid` helper:
+
+```js
+import { useGrid, extendGrid } from 'vue-screen'
+
+useGrid(extendGrid('tailwind', {
+  mdAndDown: grid => !grid.lg
+}))
+```
 

Diff for: packages/docs/src/guide/upgrading.md

@@ -6,8 +6,7 @@ editLink: true
 
 ## Configuration
 v2 has brought a few breaking changes on the configuration.
-To see how to configure the libary please refer to the [configuration section](/vue-screen/guide/configuration/composition-api).<br>
-Callbacks have been removed and there is no plan on adding them back at the moment.
+To see how to configure the library please refer to the [configuration section](/vue-screen/guide/configuration/composition-api).<br>
 
 ## API
 

Diff for: packages/docs/src/index.md

@@ -3,7 +3,7 @@ editLink: true
 title: Reactive screen size and media query states for VueJs
 ---
 ::: warning
-Version 2.0 only supports Vue 3 and is in early alpha version. There might still be API changes before final release.<br> v1 docs are available [here](https://github.com/reegodev/vue-screen/tree/v1.5.3#vuescreen)
+Version 2.0 only supports Vue 3 and is still in alpha.<br> v1 docs are available [here](https://github.com/reegodev/vue-screen/tree/v1.5.3#vuescreen)
 :::
 <br>
 <div style="text-align: center">

Diff for: packages/lib/__tests__/useGrid.ts

@@ -1,7 +1,9 @@
 import {
   createGridObject,
   createConfigFromLiteral,
-  useGrid
+  useGrid,
+  extendGrid,
+  getCurrentBreakpoint
 } from '../src/useGrid'
 
 import { GridDefinitionLiteral } from '../src/types/grid'
@@ -38,7 +40,7 @@ describe('useGrid', () => {
     expect(Object.values(gridObject).every(value => value === false)).toBe(true)
   })
 
-  it('creates a reactive grid object', async () => {
+  it('creates a reactive grid object from a literal', async () => {
     const grid = useGrid('bulma')
 
     expect(grid.tablet).toBe(false)
@@ -51,4 +53,62 @@ describe('useGrid', () => {
     expect(grid.tablet).toBe(true)
   })
 
+  it('creates a reactive grid object from a custom config', async () => {
+    const grid = useGrid({
+      a: 0,
+      b: 1,
+      c: 2,
+    })
+
+    expect(grid.a).toBe(false)
+
+    await new Promise((resolve) => {
+      grid.a = true
+      watchEffect(() => resolve(grid))
+    })
+
+    expect(grid.a).toBe(true)
+  })
+
+  it('extends a grid literal config', async () => {
+    const grid = useGrid(extendGrid('bulma', {
+      tabletAndBelow: grid => !grid.desktop
+    }))
+
+    const allBreakpoints = Object.keys(grids['bulma']).concat(['breakpoint', 'tabletAndBelow'])
+    expect(Object.keys(grid).every(key => allBreakpoints.includes(key))).toBe(true)
+  })
+
+})
+
+describe('getCurrentBreakpoint', () => {
+  it('returns an empty value if no breakpoint is active', () => {
+    const config = {
+      a: 0,
+      b: 1,
+      c: 2
+    }
+    const gridObject = {
+      a: false,
+      b: false,
+      c: false,
+    }
+
+    expect(getCurrentBreakpoint(config, gridObject)).toBe('')
+  })
+
+  it('returns the currently active breakpoint', () => {
+    const config = {
+      a: 0,
+      b: 1,
+      c: 2
+    }
+    const gridObject = {
+      a: false,
+      b: true,
+      c: true,
+    }
+
+    expect(getCurrentBreakpoint(config, gridObject)).toBe('c')
+  })
 })

Diff for: packages/lib/__tests__/useScreen.ts

@@ -33,7 +33,7 @@ describe('useScreen', () => {
       touch: false,
     } as ScreenConfig
 
-    const screen = useScreen(config)
+    const screen = useScreen(config, 300)
 
     expect(screen).toStrictEqual({
       resolution: `${config.width}x${config.height}`,

Diff for: packages/lib/jest.config.js

@@ -10,4 +10,7 @@ module.exports = {
     "^.+\\.(ts|tsx)$": "ts-jest"
   },
   "testEnvironment": "node",
+  collectCoverage: true,
+  coveragePathIgnorePatterns: ['src/utils.ts', 'src/grids'],
+  coverageReporters: ['lcov', 'html', 'text'],
 }

Diff for: packages/lib/src/index.ts

@@ -1,11 +1,12 @@
 import { useScreen } from './useScreen'
-import { useGrid } from './useGrid'
+import { useGrid, extendGrid } from './useGrid'
 import { plugin } from './plugin'
 import grids from './grids'
 
 export {
   useScreen,
   useGrid,
+  extendGrid,
   grids,
 }
 

Diff for: packages/lib/src/types/grid.ts

@@ -13,7 +13,9 @@ import {
   SemanticUi,
 } from '../grids'
 
-export type Custom = Record<string, number | string>
+export type ComputedBreakpoint = (grid: GridObject<Custom>) => boolean
+
+export type Custom = Record<string, number | string | ComputedBreakpoint>
 export type CustomObject = Record<string, boolean>
 
 export type SupportedGridType =

Diff for: packages/lib/src/useGrid.ts

@@ -8,11 +8,12 @@ import {
   GridDefinitionCustomObject,
   GridObjectLiteral,
   SupportedGridType,
-  CustomObject
+  CustomObject,
+  ComputedBreakpoint
 } from './types/grid'
 import grids from './grids'
 import { reactive, onUnmounted, getCurrentInstance } from 'vue'
-import { inBrowser } from './utils'
+import { inBrowser, debounce } from './utils'
 
 export const DEFAULT_GRID_FRAMEWORK = 'tailwind'
 
@@ -33,54 +34,81 @@ export const createConfigFromLiteral = (literal: GridDefinitionLiteral): GridTyp
   return grids[literal]
 }
 
-export const getCurrentBreakpoint = (object: CustomObject): string => {
-  const current = Object.keys(object).filter(key => !['breakpoint'].includes(key)).reverse().find(key => object[key])
+export const getCurrentBreakpoint = (config: Custom, object: CustomObject): string => {
+  const current = Object.keys(object)
+    .filter(key => {
+      return !['breakpoint'].includes(key) && typeof config[key] !== 'function'
+    })
+    .reverse()
+    .find(key => object[key])
   return current || ''
 }
 
+/* istanbul ignore next  */
+export const updateComputedProperties = (config: Custom, object: CustomObject): void => {
+  Object.keys(config)
+    .filter((breakpoint) => {
+      return typeof config[breakpoint] === 'function'
+    })
+    .forEach((breakpoint) => {
+      const fn = config[breakpoint] as ComputedBreakpoint
+      object[breakpoint] = fn.call(null, object)
+    })
+}
+
+const debouncedUpdateComputedProperties = debounce(updateComputedProperties, 100)
+
+/* istanbul ignore next  */
 export const createMediaQueries = (config: Custom, object: CustomObject & { breakpoint: keyof CustomObject }): void => {
-  Object.keys(config).forEach((breakpoint) => {
-    let width = config[breakpoint]
-
-    if (typeof width === 'number') {
-      width = `${width}px`
-    } else {
-      width = width.toString()
-    }
-
-    const onChange = (event: MediaQueryListEvent) => {
-      object[breakpoint] = event.matches
-      object.breakpoint = getCurrentBreakpoint(object)
-    }
-
-    const query = window.matchMedia(`(min-width: ${width})`)
-    if ('addEventListener' in query) {
-      query.addEventListener('change', onChange);
-    } else {
-      // https://github.com/reegodev/vue-screen/issues/30
-      // query.addListener is not deprecated for iOS 12
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (query as any).addListener(onChange)
-    }
-    object[breakpoint] = query.matches
-    object.breakpoint = getCurrentBreakpoint(object)
-
-    // Do not leak memory by keeping event listeners active.
-    // This appears to work as expected, using useGrid() inside components
-    // triggers this hook when they are destroyed.
-    if (getCurrentInstance()) {
-      onUnmounted(() => {
-        if ('removeEventListener' in query) {
-          query.removeEventListener('change', onChange);
-        } else {
-          // https://github.com/reegodev/vue-screen/issues/30
-          // query.removeListener is not deprecated for iOS 12
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          (query as any).removeListener(onChange)
-        }
-      })
-    }
-  })
+  Object.keys(config)
+    .filter((breakpoint) => {
+      return typeof config[breakpoint] !== 'function'
+    })
+    .forEach((breakpoint) => {
+      let width = config[breakpoint]
+
+      if (typeof width === 'number') {
+        width = `${width}px`
+      } else {
+        width = width.toString()
+      }
+
+      const onChange = (event: MediaQueryListEvent) => {
+        object[breakpoint] = event.matches
+        object.breakpoint = getCurrentBreakpoint(config, object)
+        debouncedUpdateComputedProperties(config, object)
+      }
+
+      const query = window.matchMedia(`(min-width: ${width})`)
+      if ('addEventListener' in query) {
+        query.addEventListener('change', onChange);
+      } else {
+        // https://github.com/reegodev/vue-screen/issues/30
+        // query.addListener is not deprecated for iOS 12
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (query as any).addListener(onChange)
+      }
+      object[breakpoint] = query.matches
+      object.breakpoint = getCurrentBreakpoint(config, object)
+
+      // Do not leak memory by keeping event listeners active.
+      // This appears to work as expected, using useGrid() inside components
+      // triggers this hook when they are destroyed.
+      if (getCurrentInstance()) {
+        onUnmounted(() => {
+          if ('removeEventListener' in query) {
+            query.removeEventListener('change', onChange);
+          } else {
+            // https://github.com/reegodev/vue-screen/issues/30
+            // query.removeListener is not deprecated for iOS 12
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            (query as any).removeListener(onChange)
+          }
+        })
+      }
+    })
+
+  updateComputedProperties(config, object)
 }
 
 export function useGrid<T extends GridDefinitionLiteral> (gridConfig: T): GridObjectLiteral<T>
@@ -98,9 +126,14 @@ export function useGrid (
 
   const gridObject = reactive(createGridObject(config))
 
+  /* istanbul ignore if  */
   if (inBrowser) {
     createMediaQueries(config as Custom, gridObject)
   }
 
   return gridObject
 }
+
+export const extendGrid = <T extends GridDefinitionLiteral>(literalConfig: T, extraProperties: GridDefinitionCustomObject): GridDefinitionCustomObject => {
+  return Object.assign({}, createConfigFromLiteral(literalConfig), extraProperties)
+}