fix: do not forward data-layout-page-key

Author: satazor

.babelrc.json

@@ -0,0 +1,12 @@
+'use strict';
+
+module.exports = (api) => {
+    api.cache(true);
+
+    return {
+        ignore: process.env.BABEL_ENV ? ['**/*.test.js', '**/__snapshots__', '**/__mocks__', '**/__fixtures__'] : [],
+        presets: [
+            ['@moxy/babel-preset/lib', { react: true }],
+        ],
+    };
+};

babel.config.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import memoizeOne from 'memoize-one';
 import LayoutContext from './util/context';
 import createFullTree from './util/full-tree';
-import { getInitialLayoutTree } from './with-layout';
+import { getInitialLayoutTree, isComponentWrapped } from './with-layout';
 
 const LayoutProvider = LayoutContext.Provider;
 
@@ -48,10 +48,12 @@ export default class LayoutTree extends PureComponent {
         const { defaultLayout, Component, pageProps, pageKey, children: render } = this.props;
         const { layoutTree } = this.state;
 
-        // Note that we use a data attribute to propagate the page key because Component might not be wrapped in WithLayout HOC.
-        // If we passed a regular `pageKey` property, and if the component spreaded the props, it would throw:
-        // "React does not recognize the `pageKey` prop on a DOM element"
-        const page = <Component { ...pageProps } key={ pageKey } data-layout-page-key={ pageKey } />;
+        // Do not forward pageKey if the component is not wrapped, otherwise it would cause
+        // an error if props were spreaded into a DOM element:
+        // "React does not recognize the `pageKey` prop on a DOM element".
+        const isWrapped = isComponentWrapped(Component);
+        const page = <Component { ...pageProps } { ...(isWrapped && { pageKey }) } key={ pageKey } />;
+
         const fullTree = createFullTree(layoutTree ?? defaultLayout, page);
         const providerValue = this.getProviderValue(Component, pageKey);
 

src/LayoutTree.js

@@ -16,7 +16,7 @@ const withLayout = (mapLayoutStateToLayoutTree, mapPropsToInitialLayoutState) =>
     return (Component) => {
         const WithLayout = forwardRef((_props, ref) => {
             const { pageKey, props } = useMemo(() => {
-                const { 'data-layout-page-key': pageKey, ...props } = _props;
+                const { pageKey, ...props } = _props;
 
                 return { pageKey, props };
             }, [_props]);
@@ -71,4 +71,6 @@ const withLayout = (mapLayoutStateToLayoutTree, mapPropsToInitialLayoutState) =>
 
 export const getInitialLayoutTree = (Component, pageProps) => Component[getInitialLayoutTreeSymbol]?.(pageProps);
 
+export const isComponentWrapped = (Component) => !!Component[getInitialLayoutTreeSymbol];
+
 export default withLayout;

src/with-layout.js

@@ -57,8 +57,8 @@ exports[`should ignore setLayoutState calls if Component's pageKey is not the ac
   >
     <main>
       <WithLayout(Foo)
-        data-layout-page-key="foo"
         key="foo"
+        pageKey="foo"
       >
         <Foo
           setLayoutState={[Function]}
@@ -122,6 +122,27 @@ exports[`should ignore setLayoutState calls if page is not the active Component
 </LayoutTree>
 `;
 
+exports[`should not forward pageKey if component in not wrapped with HOC 1`] = `
+<LayoutTree
+  Component={[Function]}
+  pageKey="foo"
+  pageProps={
+    Object {
+      "foo": "bar",
+    }
+  }
+>
+  <Home
+    foo="bar"
+    key="foo"
+  >
+    <h1>
+      Home
+    </h1>
+  </Home>
+</LayoutTree>
+`;
+
 exports[`should render a layout tree correctly based the initial layout state (function) 1`] = `
 <LayoutTree
   Component={
@@ -367,8 +388,8 @@ exports[`should update the layout tree correctly if pageKey changes 1`] = `
   >
     <main>
       <WithLayout(Home)
-        data-layout-page-key="foo"
         key="foo"
+        pageKey="foo"
       >
         <Home
           setLayoutState={[Function]}
@@ -399,8 +420,8 @@ exports[`should update the layout tree correctly if pageKey changes 2`] = `
   >
     <main>
       <WithLayout(Home)
-        data-layout-page-key="bar"
         key="bar"
+        pageKey="bar"
       >
         <Home
           setLayoutState={[Function]}

test/__snapshots__/index.test.js.snap

@@ -206,7 +206,7 @@ it('should not inject setLayoutState to pages if it is not needed', () => {
     expect(HomeMock).toHaveBeenCalledWith({}, {});
 });
 
-it('should fail if layout tree is not unary', () => {
+it('should throw if layout tree is not unary', () => {
     jest.spyOn(console, 'error').mockImplementation(() => {});
 
     const NewsletterForm = () => <form />;
@@ -242,7 +242,7 @@ it('should allow passing a custom render prop to LayoutTree', () => {
     expect(render.mock.results[0].value).toMatchSnapshot();
 });
 
-it('should fail if LayoutTree was not rendered', () => {
+it('should throw if LayoutTree was not rendered', () => {
     jest.spyOn(console, 'error').mockImplementation(() => {});
 
     const EnhancedHome = withLayout(<PrimaryLayout />)(Home);
@@ -316,3 +316,14 @@ it('should ignore setLayoutState calls if Component\'s pageKey is not the active
     expect(wrapper).toMatchSnapshot();
     expect(mapLayoutStateToLayoutTree).toHaveBeenCalledTimes(1);
 });
+
+it('should not forward pageKey if component in not wrapped with HOC', () => {
+    const wrapper = mount(
+        <LayoutTree
+            Component={ Home }
+            pageProps={ { foo: 'bar' } }
+            pageKey="foo" />,
+    );
+
+    expect(wrapper).toMatchSnapshot();
+});