feat(react-modifier): add support for children as a prop

Author: jvidalv

react-migration-toolkit/src/components/react-bridge.gts

@@ -12,9 +12,7 @@ type ExtraProps = Partial<{
   [ariaAttrs: `aria-${string}`]: string;
 }>;
 
-type PropsOf<T> = T extends ComponentType<infer P>
-  ? Omit<P, 'children'> & ExtraProps
-  : never;
+type PropsOf<T> = T extends ComponentType<infer P> ? P & ExtraProps : never;
 
 interface ReactBridgeArgs<T extends keyof HTMLElementTagNameMap, R> {
   Element: ElementFromTagName<T>;

react-migration-toolkit/src/modifiers/react-modifier.ts

@@ -3,9 +3,14 @@ import { getOwner } from '@ember/application';
 
 import { isTesting, macroCondition } from '@embroider/macros';
 import Modifier from 'ember-modifier';
-import { createElement, type ReactElement, type ComponentType } from 'react';
+import {
+  act,
+  type ComponentType,
+  createElement,
+  type PropsWithChildren,
+  type ReactNode,
+} from 'react';
 import { createRoot, type Root } from 'react-dom/client';
-import { act } from 'react';
 import type ApplicationInstance from '@ember/application/instance';
 import { App } from '../react/app/app';
 import type { CustomProviderOptions } from '../../types';
@@ -27,7 +32,7 @@ function cleanup(instance: ReactModifier) {
 
 type ReactModifierOptions = {
   reactComponent: ComponentType;
-  props: object;
+  props: PropsWithChildren;
   providerOptions: CustomProviderOptions | undefined;
   hasBlock: boolean;
 };
@@ -48,14 +53,19 @@ declare global {
 
 export default class ReactModifier extends Modifier<ReactModifierSignature> {
   root: Root | null = null;
-  children: ReactElement[] | null = null;
+  children: ReactNode;
   isInitialRender = true;
   owner = getOwner(this) as ApplicationInstance;
 
   modify(
     element: Element,
     _: null,
-    { reactComponent, props, providerOptions, hasBlock }: ReactModifierOptions,
+    {
+      reactComponent,
+      props = {},
+      providerOptions,
+      hasBlock,
+    }: ReactModifierOptions,
   ) {
     if (!this.root) {
       this.root = createRoot(element);
@@ -71,20 +81,27 @@ export default class ReactModifier extends Modifier<ReactModifierSignature> {
       },
     );
     if (this.isInitialRender && filteredChildNodes.length > 0 && hasBlock) {
-      const children = [
+      this.children = [
         createElement<YieldWrapperProps>(YieldWrapper, {
           key: crypto.randomUUID(),
           nodes: Array.from(filteredChildNodes),
         }),
       ];
-      this.children = children;
       this.isInitialRender = false;
     }
 
+    const { children, ...restOfProps } = props;
+    const childrenFromProps =
+      typeof children === 'function' ? createElement(children) : children;
+
     const wrappedComponent = createElement(
       App,
       { owner: this.owner, providerOptions },
-      createElement(reactComponent, props, this.children),
+      createElement(
+        reactComponent,
+        restOfProps,
+        childrenFromProps || this.children,
+      ),
     );
 
     if (macroCondition(isTesting())) {

test-app/app/components/example.hbs

@@ -11,4 +11,14 @@
   {{! @glint-expect-error: the SafeString transformation is not properly typed }}
   @props={{hash text=this.safeText data-test-example="true"}}
   class="class-from-bridge"
+/>
+
+<ReactBridge
+  @reactComponent={{this.reactExample}}
+  @props={{hash children=this.reactExample}}
+/>
+
+<ReactBridge
+  @reactComponent={{this.reactExample}}
+  @props={{hash children="Children as Props"}}
 />

test-app/app/react/example.tsx

@@ -20,6 +20,7 @@ export function Example({ text, children, ...props }: ExampleProps): ReactNode {
     <div
       data-test-has-owner={owner instanceof ApplicationInstance}
       data-test-theme={theme?.current}
+      style={{ border: "1px solid gray", padding: 16, margin: 16 }}
       {...props}
     >
       <h1>Hi there 👋</h1>
@@ -45,7 +46,7 @@ export function Example({ text, children, ...props }: ExampleProps): ReactNode {
         <div data-test-children>
           <hr />
           <h3>Children values:</h3>
-          {children}
+          <div data-test-children-content>{children}</div>
         </div>
       )}
     </div>

test-app/tests/integration/components/react-bridge-test.js

@@ -272,4 +272,41 @@ module('Integration | Component | react-bridge', function (hooks) {
       .hasAttribute('href', 'https://www.google.com')
       .hasText('world');
   });
+
+  module('when children prop is passed directly', function () {
+    test('it correctly renders strings', async function (assert) {
+      let text = `Test text as children`;
+
+      this.setProperties({
+        reactExample: Example,
+        props: {
+          children: text,
+        },
+      });
+
+      await render(hbs`
+        <ReactBridge
+          @reactComponent={{this.reactExample}}
+          @props={{hash children=this.props.children}}
+        />
+    `);
+
+      assert.dom('[data-test-children-content]').hasText(text);
+    });
+
+    test('it correctly renders ReactNode', async function (assert) {
+      this.setProperties({
+        reactExample: Example,
+      });
+
+      await render(hbs`
+        <ReactBridge
+          @reactComponent={{this.reactExample}}
+          @props={{hash children=this.reactExample}}
+        />
+    `);
+
+      assert.dom('h1').exists({ count: 2 });
+    });
+  });
 });