useResponsiveProps: Fixes default breakpoint prop value assignment

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

@@ -31,7 +31,11 @@ export {
   PropAliases,
   PropAliasDeclaration,
 } from './const/propAliases'
-export { default as parsePropName } from './utils/strings/parsePropName'
+export {
+  default as parsePropName,
+  ParsedProp,
+  ParsedBreakpoint,
+} from './utils/strings/parsePropName'
 export { default as parseTemplates } from './utils/templates/parseTemplates'
 export {
   default as generateComponents,

packages/atomic-layout/package.json

@@ -28,6 +28,7 @@
     "bundlesize:esm": "bundlesize -f lib/esm/index.js",
     "cypress": "cypress open --env envName=dev",
     "cypress:cli": "cypress run --spec=./examples/all.test.js --browser=chrome --env envName=ci",
+    "jest": "jest",
     "test": "yarn test:unit && yarn test:e2e",
     "test:unit": "cross-env BABEL_ENV=test jest --runInBand",
     "test:e2e": "yarn cypress:cli",

packages/atomic-layout/src/hooks/useResponsiveComponent.spec.tsx

@@ -0,0 +1,34 @@
+/**
+ * @jest-environment node
+ */
+import React from 'react'
+import { renderToString } from 'react-dom/server'
+import useResponsiveComponent from './useResponsiveComponent'
+
+const Component = useResponsiveComponent((props) => {
+  return <img {...props} />
+})
+
+describe('useResponsiveComponent', () => {
+  describe('given rendered on a server', () => {
+    let html: ReturnType<typeof renderToString>
+
+    beforeAll(() => {
+      html = renderToString(
+        <Component src="image.png" altMd="Image" titleLgDown="Title" />,
+      )
+    })
+
+    it('should have responsive prop with default breakpoint', () => {
+      expect(html).toContain('src="image.png"')
+    })
+
+    it.skip('should have responsive prop with "down" behavior', () => {
+      expect(html).toContain('title="Title"')
+    })
+
+    it('should not have any responsive prop with other breakpoints', () => {
+      expect(html).not.toContain('alt')
+    })
+  })
+})

packages/atomic-layout/src/hooks/useResponsiveProps.ts

@@ -3,41 +3,75 @@ import {
   Numeric,
   Layout,
   createMediaQuery,
+  ParsedProp,
   parsePropName,
 } from '@atomic-layout/core'
 import useBreakpointChange from './useBreakpointChange'
 
+type MatcherFunction = (parsedProp: ParsedProp) => boolean
+
+/**
+ * Default responsive props matcher.
+ * Creates a media query based on the given prop's breakpoint
+ * and uses native "window.matchMedia" to assert the match.
+ */
+const defaultMatcher: MatcherFunction = (parsedProp) => {
+  const { breakpoint, behavior } = parsedProp
+  const mediaQuery = createMediaQuery(
+    Layout.breakpoints[breakpoint.name],
+    behavior,
+  )
+
+  return matchMedia(mediaQuery).matches
+}
+
+/**
+ * Server-side responsive props matcher.
+ * Apply props with the default breakpoint on the server.
+ * Server assumes the default breakpoint is currently present.
+ *
+ * @TODO Resolve for non-default breakpoints.
+ * @see https://github.com/kettanaito/atomic-layout/issues/284
+ */
+const serverMatcher: MatcherFunction = (parsedProp) => {
+  const { breakpoint } = parsedProp
+  return breakpoint.isDefault && typeof window === 'undefined'
+}
+
+/**
+ * Filters given responsive props against the browser state.
+ * Accepts an optional matcher function to operate on a server.
+ */
+const filterProps = <R>(
+  props: Record<string, any>,
+  matcher: MatcherFunction = defaultMatcher,
+) => {
+  return Object.keys(props)
+    .map(parsePropName)
+    .filter(matcher)
+    .reduce<R>(
+      (acc, { originPropName, purePropName }) => ({
+        ...acc,
+        [purePropName]: props[originPropName],
+      }),
+      {} as R,
+    )
+}
+
 /**
  * Accepts an object of responsive props and returns
  * an object of props relative to the current viewport.
  */
 const useResponsiveProps = <ResponsiveProps extends Record<string, Numeric>>(
   responsiveProps: ResponsiveProps,
 ): Partial<ResponsiveProps> => {
-  const [props, setProps] = useState<ResponsiveProps>()
+  const [props, setProps] = useState<ResponsiveProps>(
+    filterProps(responsiveProps, serverMatcher),
+  )
   const [breakpointName, setBreakpointName] = useState<string>()
 
   const resolveProps = (inputProps: ResponsiveProps) => {
-    const nextProps = Object.keys(inputProps)
-      .map(parsePropName)
-      .filter(({ breakpoint, behavior }) => {
-        const mediaQuery = createMediaQuery(
-          Layout.breakpoints[breakpoint.name],
-          behavior,
-        )
-        const { matches } = matchMedia(mediaQuery)
-
-        return matches
-      })
-      .reduce<ResponsiveProps>(
-        (acc, { originPropName, purePropName }) => ({
-          ...acc,
-          [purePropName]: inputProps[originPropName],
-        }),
-        {} as ResponsiveProps,
-      )
-
-    return nextProps
+    return filterProps<ResponsiveProps>(inputProps)
   }
 
   // Store the current breakpoint name in the state.

packages/atomic-layout/tslint.json

@@ -2,6 +2,7 @@
   "extends": ["tslint-react", "../../tslint.json"],
   "rules": {
     "no-console": true,
+    "no-submodule-imports": false,
     "jsx-boolean-value": ["never"],
     "jsx-no-multiline-js": false,
     "jsx-wrap-multiline": false