bugfix(react-jsx-runtime): static children problem on render function

change/@fluentui-react-jsx-runtime-6b5ad738-3061-4164-9bd3-1433b8b6a54e.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: static children problem on render function",
+  "packageName": "@fluentui/react-jsx-runtime",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-jsx-runtime/src/jsx-dev-runtime.ts

@@ -1,6 +1,7 @@
-import { DevRuntime } from './utils/DevRuntime';
 import { createJSX } from './jsx/createJSX';
+import { jsxDEVSlot } from './jsx/jsxDEVSlot';
+import { DevRuntime } from './utils/DevRuntime';
 
 export { Fragment } from 'react';
 
-export const jsxDEV = createJSX(DevRuntime.jsxDEV);
+export const jsxDEV = createJSX(DevRuntime.jsxDEV, jsxDEVSlot);

packages/react-components/react-jsx-runtime/src/jsx-runtime.test.tsx

@@ -266,20 +266,29 @@ describe('createElement with assertSlots', () => {
     });
 
     it('keeps children from a render template in a render callback', () => {
-      type TestComponentSlots = { outer: NonNullable<Slot<'div'>>; inner: NonNullable<Slot<'div'>> };
+      const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {
+        /* noop */
+      });
+      type TestComponentSlots = {
+        outer: NonNullable<Slot<'div'>>;
+        inner1: NonNullable<Slot<'div'>>;
+        inner2: NonNullable<Slot<'div'>>;
+      };
       type TestComponentState = ComponentState<TestComponentSlots>;
       type TestComponentProps = ComponentProps<Partial<TestComponentSlots>>;
 
       const TestComponent = (props: TestComponentProps) => {
         const state: TestComponentState = {
-          components: { outer: 'div', inner: 'div' },
-          inner: slot.always(props.inner, { defaultProps: { id: 'inner' }, elementType: 'div' }),
+          components: { outer: 'div', inner1: 'div', inner2: 'div' },
+          inner1: slot.always(props.inner1, { defaultProps: { id: 'inner-1' }, elementType: 'div' }),
+          inner2: slot.always(props.inner2, { defaultProps: { id: 'inner-2' }, elementType: 'div' }),
           outer: slot.always(props.outer, { defaultProps: { id: 'outer' }, elementType: 'div' }),
         };
         assertSlots<TestComponentSlots>(state);
         return (
           <state.outer>
-            <state.inner />
+            <state.inner1 />
+            <state.inner2 />
           </state.outer>
         );
       };
@@ -289,17 +298,33 @@ describe('createElement with assertSlots', () => {
           <Component {...props} />
         </div>
       ));
-      const result = render(<TestComponent outer={{ children }} inner={{ children: 'Inner children' }} />);
+      const result = render(
+        <TestComponent
+          outer={{ children }}
+          inner1={{ children: 'Inner children 1' }}
+          inner2={{ children: 'Inner children 2' }}
+        />,
+      );
 
+      // your test code here
+      expect(errorSpy).not.toHaveBeenCalled();
+      errorSpy.mockRestore();
       expect(children).toHaveBeenCalledTimes(1);
       expect(children.mock.calls[0][0]).toBe('div');
       expect(children.mock.calls[0][1].id).toBe('outer');
       expect(children.mock.calls[0][1].children).toMatchInlineSnapshot(`
-        <div
-          id="inner"
-        >
-          Inner children
-        </div>
+        <React.Fragment>
+          <div
+            id="inner-1"
+          >
+            Inner children 1
+          </div>
+          <div
+            id="inner-2"
+          >
+            Inner children 2
+          </div>
+        </React.Fragment>
       `);
 
       expect(result.container.firstChild).toMatchInlineSnapshot(`
@@ -310,9 +335,14 @@ describe('createElement with assertSlots', () => {
             id="outer"
           >
             <div
-              id="inner"
+              id="inner-1"
             >
-              Inner children
+              Inner children 1
+            </div>
+            <div
+              id="inner-2"
+            >
+              Inner children 2
             </div>
           </div>
         </div>

packages/react-components/react-jsx-runtime/src/jsx-runtime.ts

@@ -1,7 +1,9 @@
-import { Runtime } from './utils/Runtime';
 import { createJSX } from './jsx/createJSX';
+import { jsxSlot } from './jsx/jsxSlot';
+import { jsxsSlot } from './jsx/jsxsSlot';
+import { Runtime } from './utils/Runtime';
 
 export { Fragment } from 'react';
 
-export const jsx = createJSX(Runtime.jsx);
-export const jsxs = createJSX(Runtime.jsxs);
+export const jsx = createJSX(Runtime.jsx, jsxSlot);
+export const jsxs = createJSX(Runtime.jsxs, jsxsSlot);

packages/react-components/react-jsx-runtime/src/jsx/createJSX.ts

@@ -1,39 +1,11 @@
+import { isSlot } from '@fluentui/react-utilities';
 import * as React from 'react';
-import { isSlot, type SlotComponentType, type UnknownSlotProps } from '@fluentui/react-utilities';
-import { getMetadataFromSlotComponent } from '../utils/getMetadataFromSlotComponent';
-import type { JSXRuntime } from '../utils/types';
 import { createCompatSlotComponent } from '../utils/createCompatSlotComponent';
+import { JSXRuntime, JSXSlotRuntime } from '../utils/types';
 
-/**
- * @internal
- */
-export const createJSX = (runtime: JSXRuntime) => {
-  const jsxFromSlotComponent = <Props extends UnknownSlotProps>(
-    type: SlotComponentType<Props>,
-    overrideProps: Props | null,
-    key?: React.Key,
-    source?: unknown,
-    self?: unknown,
-  ): React.ReactElement<Props> => {
-    const { elementType, renderFunction, props: slotProps } = getMetadataFromSlotComponent(type);
-
-    const props: Props = { ...slotProps, ...overrideProps };
-
-    if (renderFunction) {
-      return runtime(
-        React.Fragment,
-        {
-          children: renderFunction(elementType, props),
-        },
-        key,
-        source,
-        self,
-      ) as React.ReactElement<Props>;
-    }
-    return runtime(elementType, props, key, source, self);
-  };
-
-  return <Props extends {}>(
+export const createJSX =
+  (runtime: JSXRuntime, slotRuntime: JSXSlotRuntime) =>
+  <Props extends {}>(
     type: React.ElementType<Props>,
     overrideProps: Props | null,
     key?: React.Key,
@@ -44,11 +16,10 @@ export const createJSX = (runtime: JSXRuntime) => {
     // this is for backwards compatibility with getSlotsNext
     // it should be removed once getSlotsNext is obsolete
     if (isSlot<Props>(overrideProps)) {
-      return jsxFromSlotComponent(createCompatSlotComponent(type, overrideProps), null, key, source, self);
+      return slotRuntime<Props>(createCompatSlotComponent(type, overrideProps), null, key, source, self);
     }
     if (isSlot<Props>(type)) {
-      return jsxFromSlotComponent(type, overrideProps, key, source, self);
+      return slotRuntime(type, overrideProps, key, source, self);
     }
-    return runtime(type, overrideProps, key, source, self);
+    return runtime(type, overrideProps, key);
   };
-};

packages/react-components/react-jsx-runtime/src/jsx/jsxDEVSlot.ts

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { SlotComponentType, UnknownSlotProps } from '@fluentui/react-utilities';
+import { getMetadataFromSlotComponent } from '../utils/getMetadataFromSlotComponent';
+import { DevRuntime } from '../utils/DevRuntime';
+
+export const jsxDEVSlot = <Props extends UnknownSlotProps>(
+  type: SlotComponentType<Props>,
+  overrideProps: Props | null,
+  key?: React.Key,
+  source?: unknown,
+  self?: unknown,
+): React.ReactElement<Props> => {
+  const { elementType, renderFunction, props: slotProps } = getMetadataFromSlotComponent(type);
+
+  const props: Props = { ...slotProps, ...overrideProps };
+
+  if (renderFunction) {
+    // if runtime is static
+    if (source === true) {
+      return DevRuntime.jsxDEV(
+        React.Fragment,
+        {
+          children: renderFunction(elementType, {
+            ...props,
+            /**
+             * If the runtime is static then children is an array and this array won't be keyed.
+             * Then we should wrap children by a static fragment
+             * as there's no way to know if renderFunction will render statically or dynamically
+             */
+            children: DevRuntime.jsxDEV(React.Fragment, { children: props.children }, undefined, true, self),
+          }),
+        },
+        key,
+        false, // by marking source as false we're declaring that this render is dynamic
+        self,
+      ) as React.ReactElement<Props>;
+    }
+    // if runtime is dynamic (source = false) things are simpler
+    return DevRuntime.jsxDEV(
+      React.Fragment,
+      { children: renderFunction(elementType, props) },
+      key,
+      source,
+      self,
+    ) as React.ReactElement<Props>;
+  }
+  return DevRuntime.jsxDEV(elementType, props, key, source, self);
+};

packages/react-components/react-jsx-runtime/src/jsx/jsxSlot.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { SlotComponentType, UnknownSlotProps } from '@fluentui/react-utilities';
+import { getMetadataFromSlotComponent } from '../utils/getMetadataFromSlotComponent';
+import { Runtime } from '../utils/Runtime';
+
+export const jsxSlot = <Props extends UnknownSlotProps>(
+  type: SlotComponentType<Props>,
+  overrideProps: Props | null,
+  key?: React.Key,
+): React.ReactElement<Props> => {
+  const { elementType, renderFunction, props: slotProps } = getMetadataFromSlotComponent(type);
+
+  const props: Props = { ...slotProps, ...overrideProps };
+
+  if (renderFunction) {
+    return Runtime.jsx(
+      React.Fragment,
+      { children: renderFunction(elementType, props) },
+      key,
+    ) as React.ReactElement<Props>;
+  }
+  return Runtime.jsx(elementType, props, key);
+};

packages/react-components/react-jsx-runtime/src/jsx/jsxsSlot.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { SlotComponentType, UnknownSlotProps } from '@fluentui/react-utilities';
+import { getMetadataFromSlotComponent } from '../utils/getMetadataFromSlotComponent';
+import { Runtime } from '../utils/Runtime';
+
+export const jsxsSlot = <Props extends UnknownSlotProps>(
+  type: SlotComponentType<Props>,
+  overrideProps: Props | null,
+  key?: React.Key,
+): React.ReactElement<Props> => {
+  const { elementType, renderFunction, props: slotProps } = getMetadataFromSlotComponent(type);
+
+  const props: Props = { ...slotProps, ...overrideProps };
+
+  if (renderFunction) {
+    /**
+     * In static runtime then children is an array and this array won't be keyed.
+     * We should wrap children by a static fragment
+     * as there's no way to know if renderFunction will render statically or dynamically
+     */
+    return Runtime.jsx(
+      React.Fragment,
+      {
+        children: renderFunction(elementType, {
+          ...props,
+          children: Runtime.jsxs(React.Fragment, { children: props.children }, undefined),
+        }),
+      },
+      key,
+    ) as React.ReactElement<Props>;
+  }
+  return Runtime.jsxs(elementType, props, key);
+};

packages/react-components/react-jsx-runtime/src/utils/types.ts

@@ -1,4 +1,5 @@
 import type * as React from 'react';
+import type { SlotComponentType, UnknownSlotProps } from '@fluentui/react-utilities';
 
 export type JSXRuntime = <P extends {}>(
   type: React.ElementType<P>,
@@ -7,3 +8,11 @@ export type JSXRuntime = <P extends {}>(
   source?: unknown,
   self?: unknown,
 ) => React.ReactElement<P>;
+
+export type JSXSlotRuntime = <Props extends UnknownSlotProps>(
+  type: SlotComponentType<Props>,
+  overrideProps: Props | null,
+  key?: React.Key,
+  source?: unknown,
+  self?: unknown,
+) => React.ReactElement<Props>;