@atomic-layout/core: Adds "staticMatchMedia" utility

Author: kettanaito

packages/atomic-layout-core/src/index.ts

@@ -18,6 +18,7 @@ export {
   joinQueryList,
 } from './utils/styles/createMediaQuery'
 export { default as normalizeQuery } from './utils/styles/normalizeQuery'
+export { staticMatchMedia } from './utils/styles/staticMatchMedia'
 
 /* Breakpoints */
 export { default as withBreakpoints } from './utils/breakpoints/withBreakpoints'

packages/atomic-layout-core/src/utils/styles/staticMatchMedia/index.ts

@@ -0,0 +1 @@
+export * from './staticMatchMedia'

packages/atomic-layout-core/src/utils/styles/staticMatchMedia/staticMatchMedia.spec.ts

@@ -0,0 +1,145 @@
+/**
+ * @jest-environment node
+ */
+import { staticMatchMedia } from './staticMatchMedia'
+
+describe('staticMatchMedia', () => {
+  describe('given "up" behavior', () => {
+    describe('and actual breakpoint matches', () => {
+      it('should return true', () => {
+        const result = staticMatchMedia(
+          {
+            behavior: 'up',
+            breakpoint: {
+              minWidth: 500,
+              maxWidth: 750,
+            },
+          },
+          {
+            width: 600,
+          },
+        )
+
+        expect(result).toHaveProperty('matches', true)
+      })
+    })
+
+    describe('and actual breakpoint does not match', () => {
+      it('should return false', () => {
+        const result = staticMatchMedia(
+          {
+            behavior: 'up',
+            breakpoint: {
+              minWidth: 500,
+              maxWidth: 750,
+            },
+          },
+          {
+            width: 499,
+          },
+        )
+
+        expect(result).toHaveProperty('matches', false)
+      })
+    })
+  })
+
+  describe('given "down" behavior', () => {
+    describe('and actual breakpoint matches', () => {
+      it('should return true', () => {
+        const result = staticMatchMedia(
+          {
+            behavior: 'down',
+            breakpoint: {
+              minWidth: 500,
+              maxWidth: 750,
+            },
+          },
+          {
+            width: 499,
+          },
+        )
+
+        expect(result).toHaveProperty('matches', true)
+      })
+    })
+
+    describe('and actual breakpoint does not match', () => {
+      it('should return false', () => {
+        const result = staticMatchMedia(
+          {
+            behavior: 'down',
+            breakpoint: {
+              minWidth: 500,
+              maxWidth: 750,
+            },
+          },
+          {
+            width: 751,
+          },
+        )
+
+        expect(result).toHaveProperty('matches', false)
+      })
+    })
+  })
+
+  describe('given "only" behavior', () => {
+    describe('and actual breakpoint matches', () => {
+      it('should return true', () => {
+        const result = staticMatchMedia(
+          {
+            behavior: 'only',
+            breakpoint: {
+              minWidth: 500,
+              maxWidth: 750,
+            },
+          },
+          {
+            width: 625,
+          },
+        )
+
+        expect(result).toHaveProperty('matches', true)
+      })
+    })
+
+    describe('and actual breakpoint is below expected', () => {
+      it('should return false', () => {
+        const result = staticMatchMedia(
+          {
+            behavior: 'only',
+            breakpoint: {
+              minWidth: 500,
+              maxWidth: 750,
+            },
+          },
+          {
+            width: 499,
+          },
+        )
+
+        expect(result).toHaveProperty('matches', false)
+      })
+    })
+
+    describe('and actual breakpoint is above expected', () => {
+      it('should return false', () => {
+        const result = staticMatchMedia(
+          {
+            behavior: 'only',
+            breakpoint: {
+              minWidth: 500,
+              maxWidth: 750,
+            },
+          },
+          {
+            width: 751,
+          },
+        )
+
+        expect(result).toHaveProperty('matches', false)
+      })
+    })
+  })
+})

packages/atomic-layout-core/src/utils/styles/staticMatchMedia/staticMatchMedia.ts

@@ -0,0 +1,103 @@
+import { AreaRecord } from '../../breakpoints/getAreaRecords'
+import { Breakpoint, BreakpointBehavior } from '../../../const/defaultOptions'
+import createMediaQuery, { createQueryList } from '../createMediaQuery'
+import openBreakpoint from '../../breakpoints/openBreakpoint'
+import closeBreakpoint from '../../breakpoints/closeBreakpoint'
+
+type MatchMediaReturnType = ReturnType<typeof matchMedia>
+type DimensionalComparator = (expected: number, actual: number) => boolean
+
+/**
+ * Returns a comparator function by given prefix (min/max).
+ */
+const getComparator = (propertyPrefix: string): DimensionalComparator => {
+  if (propertyPrefix === 'min') {
+    return (expected, actual) => actual >= expected
+  }
+
+  return (expected, actual) => actual <= expected
+}
+
+const transformBreakpoint = (
+  breakpoint: Breakpoint,
+  behavior: BreakpointBehavior,
+): Breakpoint => {
+  if (behavior === 'up') {
+    return openBreakpoint(breakpoint)
+  }
+
+  if (behavior === 'down') {
+    return closeBreakpoint(breakpoint)
+  }
+
+  return breakpoint
+}
+
+export const staticMatchMedia = (
+  record: AreaRecord,
+  clientOverride?: Breakpoint,
+): MatchMediaReturnType => {
+  const { breakpoint, behavior } = record
+
+  if (typeof window !== 'undefined') {
+    // Convert object-like breakpoint to an actual media query string.
+    const mediaQueryString = createMediaQuery(breakpoint, behavior)
+
+    // Use native "matchMedia" on the client-side.
+    // This resolves all types of media queries: dimensional and non-dimensional.
+    return matchMedia(mediaQueryString)
+  }
+
+  // Compose a client state by merging sensible defaults
+  // with the given explicit overrides.
+  const clientState: Breakpoint = {
+    orientation: 'landscape',
+    ...clientOverride,
+  }
+
+  const resolvedBreakpoint = transformBreakpoint(breakpoint, behavior)
+  const queryParams = createQueryList(resolvedBreakpoint, behavior)
+
+  // Each media query parameter must match
+  const matches = queryParams.every(({ prefix, name, value }) => {
+    // Skip breakpoint property values with "undefined" value.
+    // This accounts for opened/closed breakpoints, where
+    // certain properties are set to explicit "undefined".
+    if (value === undefined) {
+      return true
+    }
+
+    /**
+     * @todo Skip string values for now.
+     * Ideally, use custom comparator for different query params
+     * (aspect ratio, resolution, etc.).
+     */
+    if (typeof value === 'string') {
+      return true
+    }
+
+    const actualValue = clientState[name]
+    const compare = getComparator(prefix)
+
+    /**
+     * @todo Support comparison of Numeriv values with measurement unit.
+     * For example, "576px" and "768px". Currently considered a string and
+     * always results to true in the upper closure.
+     */
+    return compare(value, actualValue)
+  })
+
+  return {
+    matches,
+    media: null /** @todo Stub the value of "media" */,
+
+    // Stub MatchMedia methods to be callable, but do nothing
+    // on the server-side.
+    addEventListener: (): void => null,
+    addListener: () => null,
+    removeListener: () => null,
+    removeEventListener: (): void => null,
+    dispatchEvent: () => null,
+    onchange: () => null,
+  }
+}