feat(react-jsx-runtime): implements custom JSX pragma

change/@fluentui-react-jsx-runtime-92a3c6b2-e767-4128-8320-7e237ef69eaa.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "feat: implements custom JSX pragma",
+  "packageName": "@fluentui/react-jsx-runtime",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-utilities-6ec7d77e-2bd1-4bcc-a0fb-0f71642d43bd.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: ensure compatibility with custom JSX pragma",
+  "packageName": "@fluentui/react-utilities",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-jsx-runtime/etc/react-jsx-runtime.api.md

@@ -4,6 +4,14 @@
 
 ```ts
 
+import { Fragment } from 'react';
+import * as React_2 from 'react';
+
+// @public (undocumented)
+export function createElement<P extends {}>(type: React_2.ElementType<P>, props?: P | null, ...children: React_2.ReactNode[]): React_2.ReactElement<P> | null;
+
+export { Fragment }
+
 // (No @packageDocumentation comment for this package)
 
 ```

packages/react-components/react-jsx-runtime/package.json

@@ -1,7 +1,6 @@
 {
   "name": "@fluentui/react-jsx-runtime",
   "version": "9.0.0-alpha.0",
-  "private": true,
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -30,6 +29,7 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
+    "@fluentui/react-utilities": "^9.7.4",
     "@swc/helpers": "^0.4.14"
   },
   "peerDependencies": {

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

@@ -0,0 +1,168 @@
+/* eslint-disable jsdoc/check-tag-names */
+/** @jsxRuntime classic */
+/** @jsxFrag Fragment */
+/** @jsx createElement */
+/* eslint-enable jsdoc/check-tag-names */
+
+import { render } from '@testing-library/react';
+import { ComponentProps, ComponentState, Slot, getSlotsNext, resolveShorthand } from '@fluentui/react-utilities';
+import { createElement } from './createElement';
+
+describe('createElement', () => {
+  describe('general behavior tests', () => {
+    it('handles a string', () => {
+      const result = render(<div>Hello world</div>);
+
+      expect(result.container.firstChild).toMatchInlineSnapshot(`
+        <div>
+          Hello world
+        </div>
+      `);
+    });
+
+    it('handles an array', () => {
+      const result = render(
+        <div>
+          {Array.from({ length: 3 }, (_, i) => (
+            <div key={i}>{i}</div>
+          ))}
+        </div>,
+      );
+
+      expect(result.container.firstChild).toMatchInlineSnapshot(`
+        <div>
+          <div>
+            0
+          </div>
+          <div>
+            1
+          </div>
+          <div>
+            2
+          </div>
+        </div>
+      `);
+    });
+
+    it('handles an array of children', () => {
+      const result = render(
+        <div>
+          <div>1</div>
+          <div>2</div>
+        </div>,
+      );
+
+      expect(result.container.firstChild).toMatchInlineSnapshot(`
+        <div>
+          <div>
+            1
+          </div>
+          <div>
+            2
+          </div>
+        </div>
+      `);
+    });
+  });
+
+  describe('custom behavior tests', () => {
+    it('keeps children from "defaultProps" in a render callback', () => {
+      type TestComponentSlots = { slot: Slot<'div'> };
+      type TestComponentState = ComponentState<TestComponentSlots>;
+      type TestComponentProps = ComponentProps<Partial<TestComponentSlots>>;
+
+      const TestComponent = (props: TestComponentProps) => {
+        const state: TestComponentState = {
+          components: { slot: 'div' },
+
+          slot: resolveShorthand(props.slot, {
+            defaultProps: { children: 'Default Children', id: 'slot' },
+          }),
+        };
+        const { slots, slotProps } = getSlotsNext<TestComponentSlots>(state);
+
+        return <slots.slot {...slotProps.slot} />;
+      };
+
+      const children = jest.fn().mockImplementation((Component, props) => (
+        <div id="render-fn">
+          <Component {...props} />
+        </div>
+      ));
+      const result = render(<TestComponent slot={{ children }} />);
+
+      expect(children).toHaveBeenCalledTimes(1);
+      expect(children).toHaveBeenCalledWith('div', { children: 'Default Children', id: 'slot' });
+
+      expect(result.container.firstChild).toMatchInlineSnapshot(`
+        <div
+          id="render-fn"
+        >
+          <div
+            id="slot"
+          >
+            Default Children
+          </div>
+        </div>
+      `);
+    });
+
+    it('keeps children from a render template in a render callback', () => {
+      type TestComponentSlots = { outer: Slot<'div'>; inner: Slot<'div'> };
+      type TestComponentState = ComponentState<TestComponentSlots>;
+      type TestComponentProps = ComponentProps<Partial<TestComponentSlots>>;
+
+      const TestComponent = (props: TestComponentProps) => {
+        const state: TestComponentState = {
+          components: { inner: 'div', outer: 'div' },
+
+          inner: resolveShorthand(props.inner, { defaultProps: { id: 'inner' } }),
+          outer: resolveShorthand(props.outer, { defaultProps: { id: 'outer' } }),
+        };
+        const { slots, slotProps } = getSlotsNext<TestComponentSlots>(state);
+
+        return (
+          <slots.outer {...slotProps.outer}>
+            <slots.inner {...slotProps.inner} />
+          </slots.outer>
+        );
+      };
+
+      const children = jest.fn().mockImplementation((Component, props) => (
+        <div id="render-fn">
+          <Component {...props} />
+        </div>
+      ));
+      const result = render(<TestComponent outer={{ children }} inner={{ children: 'Inner children' }} />);
+
+      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(`
+        <React.Fragment>
+          <div
+            id="inner"
+          >
+            Inner children
+          </div>
+        </React.Fragment>
+      `);
+
+      expect(result.container.firstChild).toMatchInlineSnapshot(`
+        <div
+          id="render-fn"
+        >
+          <div
+            id="outer"
+          >
+            <div
+              id="inner"
+            >
+              Inner children
+            </div>
+          </div>
+        </div>
+      `);
+    });
+  });
+});

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

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { SlotRenderFunction, UnknownSlotProps, SLOT_RENDER_FUNCTION_SYMBOL } from '@fluentui/react-utilities';
+
+type WithMetadata<Props extends {}> = Props & {
+  [SLOT_RENDER_FUNCTION_SYMBOL]: SlotRenderFunction<Props>;
+};
+
+export function createElement<P extends {}>(
+  type: React.ElementType<P>,
+  props?: P | null,
+  ...children: React.ReactNode[]
+): React.ReactElement<P> | null {
+  if (!isSlotComponent(props)) {
+    return React.createElement(type, props, ...children);
+  }
+
+  const result = normalizeRenderFunction(props, children);
+  return React.createElement(
+    React.Fragment,
+    {},
+    result.renderFunction(type, { ...result.props, children: result.children }),
+  ) as React.ReactElement<P>;
+}
+
+function normalizeRenderFunction<Props extends UnknownSlotProps>(
+  propsWithMetadata: WithMetadata<Props>,
+  overrideChildren?: React.ReactNode[],
+): {
+  props: Props;
+  children: React.ReactNode;
+  renderFunction: SlotRenderFunction<Props>;
+} {
+  const { [SLOT_RENDER_FUNCTION_SYMBOL]: renderFunction, children: externalChildren, ...props } = propsWithMetadata;
+
+  const children: React.ReactNode =
+    Array.isArray(overrideChildren) && overrideChildren.length > 0
+      ? React.createElement(React.Fragment, {}, ...overrideChildren)
+      : externalChildren;
+
+  return {
+    children,
+    renderFunction,
+    props: props as UnknownSlotProps as Props,
+  };
+}
+
+export function isSlotComponent<Props extends {}>(props?: Props | null): props is WithMetadata<Props> {
+  return Boolean(props?.hasOwnProperty(SLOT_RENDER_FUNCTION_SYMBOL));
+}

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

@@ -1,2 +1,2 @@
-// TODO: replace with real exports
-export {};
+export { createElement } from './createElement';
+export { Fragment } from 'react';

packages/react-components/react-utilities/etc/react-utilities.api.md

@@ -70,6 +70,12 @@ export function getSlots<R extends SlotPropsRecord>(state: ComponentState<R>): {
     slotProps: ObjectSlotProps<R>;
 };
 
+// @public
+export function getSlotsNext<R extends SlotPropsRecord>(state: ComponentState<R>): {
+    slots: Slots<R>;
+    slotProps: ObjectSlotProps<R>;
+};
+
 // @internal
 export function getTriggerChild<TriggerChildProps>(children: TriggerProps<TriggerChildProps>['children']): (React_2.ReactElement<Partial<TriggerChildProps>> & {
     ref?: React_2.Ref<any>;
@@ -143,6 +149,9 @@ export type Slot<Type extends keyof JSX.IntrinsicElements | React_2.ComponentTyp
     } & WithSlotRenderFunction<IntrinsicElementProps<As>>;
 }[AlternateAs] | null : 'Error: First parameter to Slot must not be not a union of types. See documentation of Slot type.';
 
+// @internal
+export const SLOT_RENDER_FUNCTION_SYMBOL: unique symbol;
+
 // @public
 export type SlotClassNames<Slots> = {
     [SlotName in keyof Slots]-?: string;
@@ -175,6 +184,11 @@ export type TriggerProps<TriggerChildProps = unknown> = {
     children?: React_2.ReactElement | ((props: TriggerChildProps) => React_2.ReactElement | null) | null;
 };
 
+// @public
+export type UnknownSlotProps = Pick<React_2.HTMLAttributes<HTMLElement>, 'children' | 'className' | 'style'> & {
+    as?: keyof JSX.IntrinsicElements;
+};
+
 // @internal
 export const useControllableState: <State>(options: UseControllableStateOptions<State>) => [State, React_2.Dispatch<React_2.SetStateAction<State>>];
 

packages/react-components/react-utilities/src/compose/constants.ts

@@ -0,0 +1,5 @@
+/**
+ * @internal
+ * Internal reference for the render function
+ */
+export const SLOT_RENDER_FUNCTION_SYMBOL = Symbol('fui.slotRenderFunction');

packages/react-components/react-utilities/src/compose/getSlots.ts

@@ -8,6 +8,7 @@ import type {
   SlotPropsRecord,
   SlotRenderFunction,
   UnionToIntersection,
+  UnknownSlotProps,
 } from './types';
 
 export type Slots<S extends SlotPropsRecord> = {
@@ -19,7 +20,7 @@ export type Slots<S extends SlotPropsRecord> = {
     : React.ElementType<ExtractSlotProps<S[K]>>;
 };
 
-type ObjectSlotProps<S extends SlotPropsRecord> = {
+export type ObjectSlotProps<S extends SlotPropsRecord> = {
   [K in keyof S]-?: ExtractSlotProps<S[K]> extends AsIntrinsicElement<infer As>
     ? // For intrinsic element types, return the intersection of all possible
       // element's props, to be compatible with the As type returned by Slots<>
@@ -68,10 +69,13 @@ function getSlot<R extends SlotPropsRecord, K extends keyof R>(
   state: ComponentState<R>,
   slotName: K,
 ): readonly [React.ElementType<R[K]> | null, R[K]] {
-  if (state[slotName] === undefined) {
+  const props = state[slotName];
+
+  if (props === undefined) {
     return [null, undefined as R[K]];
   }
-  const { children, as: asProp, ...rest } = state[slotName]!;
+
+  const { children, as: asProp, ...rest } = props;
 
   const slot = (
     state.components?.[slotName] === undefined || typeof state.components[slotName] === 'string'
@@ -89,8 +93,7 @@ function getSlot<R extends SlotPropsRecord, K extends keyof R>(
     ];
   }
 
-  const shouldOmitAsProp = typeof slot === 'string' && state[slotName]?.as;
-  const slotProps = (shouldOmitAsProp ? omit(state[slotName]!, ['as']) : state[slotName]) as R[K];
-
+  const shouldOmitAsProp = typeof slot === 'string' && asProp;
+  const slotProps = (shouldOmitAsProp ? omit(props, ['as']) : (props as UnknownSlotProps)) as R[K];
   return [slot, slotProps];
 }