[labs/ssr-react] Handle children passed in via props (#3861)

lit · May 3, 2023 · 8deca6e · 8deca6e
1 parent dc5f964
commit 8deca6e
Show file tree

Hide file tree

Showing 4 changed files with 154 additions and 4 deletions.
diff --git a/.changeset/funny-peas-try.md b/.changeset/funny-peas-try.md
@@ -0,0 +1,5 @@
+---
+'@lit-labs/ssr-react': patch
+---
+
+Handle children passed in via props
diff --git a/packages/labs/ssr-react/src/lib/node/wrap-create-element.ts b/packages/labs/ssr-react/src/lib/node/wrap-create-element.ts
@@ -10,6 +10,7 @@ import {renderCustomElement} from './render-custom-element.js';
 import type {
   createElement as ReactCreateElement,
   ElementType,
+  PropsWithChildren,
   ReactElement,
   ReactNode,
 } from 'react';
@@ -23,9 +24,9 @@ export function wrapCreateElement(
   // non-React alternatives like preact?
   originalCreateElement: typeof ReactCreateElement
 ) {
-  return function createElement<P extends {}>(
+  return function createElement<P>(
     type: ElementType<P>,
-    props: P,
+    props: PropsWithChildren<P> | null,
     ...children: ReactNode[]
   ): ReactElement {
     if (isCustomElement(type)) {
@@ -40,11 +41,21 @@ export function wrapCreateElement(
           },
         });
 
+        const newChildren: ReactNode[] = [templateShadowRoot];
+        // React.createElement prefers children arguments over props.children
+        // https://github.com/facebook/react/blob/v18.2.0/packages/react/src/ReactElement.js#L401-L417
+        if (children.length > 0) {
+          newChildren.push(...children);
+        } else if (Array.isArray(props?.children)) {
+          newChildren.push(...props!.children);
+        } else if (props?.children !== undefined) {
+          newChildren.push(props.children);
+        }
+
         return originalCreateElement(
           type,
           {...props, ...elementAttributes},
-          templateShadowRoot,
-          ...children
+          ...newChildren
         );
       }
     }

diff --git a/packages/labs/ssr-react/src/test/integration/enable-lit-ssr_test.tsx b/packages/labs/ssr-react/src/test/integration/enable-lit-ssr_test.tsx
@@ -122,6 +122,73 @@ test('single element with dynamic children', () => {
   );
 });
 
+test('single element with string child via props', () => {
+  assert.equal(
+    ReactDOMServer.renderToString(
+      <test-element children="some string child"></test-element>
+    ),
+    `<test-element><template shadowroot="open" shadowrootmode="open"><style>
+    p {
+      color: blue;
+    }
+  </style><!--lit-part aHUgh01By8I=--><p>Hello, <!--lit-part-->Somebody<!--/lit-part-->!</p>
+      <slot></slot><!--/lit-part--></template>some string child</test-element>`
+  );
+});
+
+test('single element with element child via props', () => {
+  assert.equal(
+    ReactDOMServer.renderToString(
+      <test-element children={<span>span child</span>}></test-element>
+    ),
+    `<test-element><template shadowroot="open" shadowrootmode="open"><style>
+    p {
+      color: blue;
+    }
+  </style><!--lit-part aHUgh01By8I=--><p>Hello, <!--lit-part-->Somebody<!--/lit-part-->!</p>
+      <slot></slot><!--/lit-part--></template><span>span child</span></test-element>`
+  );
+});
+
+test('single element with multiple children via props', () => {
+  assert.equal(
+    ReactDOMServer.renderToString(
+      <test-element
+        children={
+          <>
+            <span>span</span>
+            <p>p</p>
+          </>
+        }
+      ></test-element>
+    ),
+    `<test-element><template shadowroot="open" shadowrootmode="open"><style>
+    p {
+      color: blue;
+    }
+  </style><!--lit-part aHUgh01By8I=--><p>Hello, <!--lit-part-->Somebody<!--/lit-part-->!</p>
+      <slot></slot><!--/lit-part--></template><span>span</span><p>p</p></test-element>`
+  );
+});
+
+test('single element with dynamic children via props', () => {
+  assert.equal(
+    ReactDOMServer.renderToString(
+      <test-element
+        children={[1, 2, 3].map((i) => (
+          <span key={i}>{i}</span>
+        ))}
+      ></test-element>
+    ),
+    `<test-element><template shadowroot="open" shadowrootmode="open"><style>
+    p {
+      color: blue;
+    }
+  </style><!--lit-part aHUgh01By8I=--><p>Hello, <!--lit-part-->Somebody<!--/lit-part-->!</p>
+      <slot></slot><!--/lit-part--></template><span>1</span><span>2</span><span>3</span></test-element>`
+  );
+});
+
 test('nested element', () => {
   assert.equal(
     ReactDOMServer.renderToString(

diff --git a/packages/labs/ssr-react/src/test/integration/runtime-jsx_test.tsx b/packages/labs/ssr-react/src/test/integration/runtime-jsx_test.tsx
@@ -120,6 +120,73 @@ test('single element with dynamic children', () => {
   );
 });
 
+test('single element with string child via props', () => {
+  assert.equal(
+    ReactDOMServer.renderToString(
+      <test-element children="some string child"></test-element>
+    ),
+    `<test-element><template shadowroot="open" shadowrootmode="open"><style>
+    p {
+      color: blue;
+    }
+  </style><!--lit-part aHUgh01By8I=--><p>Hello, <!--lit-part-->Somebody<!--/lit-part-->!</p>
+      <slot></slot><!--/lit-part--></template>some string child</test-element>`
+  );
+});
+
+test('single element with element child via props', () => {
+  assert.equal(
+    ReactDOMServer.renderToString(
+      <test-element children={<span>span child</span>}></test-element>
+    ),
+    `<test-element><template shadowroot="open" shadowrootmode="open"><style>
+    p {
+      color: blue;
+    }
+  </style><!--lit-part aHUgh01By8I=--><p>Hello, <!--lit-part-->Somebody<!--/lit-part-->!</p>
+      <slot></slot><!--/lit-part--></template><span>span child</span></test-element>`
+  );
+});
+
+test('single element with multiple children via props', () => {
+  assert.equal(
+    ReactDOMServer.renderToString(
+      <test-element
+        children={
+          <>
+            <span>span</span>
+            <p>p</p>
+          </>
+        }
+      ></test-element>
+    ),
+    `<test-element><template shadowroot="open" shadowrootmode="open"><style>
+    p {
+      color: blue;
+    }
+  </style><!--lit-part aHUgh01By8I=--><p>Hello, <!--lit-part-->Somebody<!--/lit-part-->!</p>
+      <slot></slot><!--/lit-part--></template><span>span</span><p>p</p></test-element>`
+  );
+});
+
+test('single element with dynamic children via props', () => {
+  assert.equal(
+    ReactDOMServer.renderToString(
+      <test-element
+        children={[1, 2, 3].map((i) => (
+          <span key={i}>{i}</span>
+        ))}
+      ></test-element>
+    ),
+    `<test-element><template shadowroot="open" shadowrootmode="open"><style>
+    p {
+      color: blue;
+    }
+  </style><!--lit-part aHUgh01By8I=--><p>Hello, <!--lit-part-->Somebody<!--/lit-part-->!</p>
+      <slot></slot><!--/lit-part--></template><span>1</span><span>2</span><span>3</span></test-element>`
+  );
+});
+
 test('nested element', () => {
   assert.equal(
     ReactDOMServer.renderToString(