chore(react-jsx-runtime): decrease bundle size

change/@fluentui-react-jsx-runtime-abd74045-0eb2-4e91-ba62-6a5c8bb5f7cd.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: decrease bundle size & adds fixtures",
+  "packageName": "@fluentui/react-jsx-runtime",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-jsx-runtime/bundle-size/Classic.fixture.js

@@ -0,0 +1,7 @@
+import * as Runtime from '@fluentui/react-jsx-runtime';
+
+console.log(Runtime);
+
+export default {
+  name: 'Classic Pragma',
+};

packages/react-components/react-jsx-runtime/bundle-size/DevRuntime.fixture.js

@@ -0,0 +1,7 @@
+import * as DevRuntime from '@fluentui/react-jsx-runtime/jsx-dev-runtime';
+
+console.log(DevRuntime);
+
+export default {
+  name: 'JSX Dev Runtime',
+};

packages/react-components/react-jsx-runtime/bundle-size/Runtime.fixture.js

@@ -0,0 +1,7 @@
+import * as Runtime from '@fluentui/react-jsx-runtime/jsx-runtime';
+
+console.log(Runtime);
+
+export default {
+  name: 'JSX Runtime',
+};

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

@@ -20,7 +20,8 @@
     "test": "jest --passWithNoTests",
     "type-check": "tsc -b tsconfig.json",
     "generate-api": "just-scripts generate-api",
-    "test-ssr": "test-ssr \"./stories/**/*.stories.tsx\""
+    "test-ssr": "test-ssr \"./stories/**/*.stories.tsx\"",
+    "bundle-size": "monosize measure"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",

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

@@ -1,26 +1,6 @@
-import type * as React from 'react';
-import { isSlot } from '@fluentui/react-utilities';
-import { jsxDEVFromSlotComponent } from './jsx/jsxDEVFromSlotComponent';
-import { createCompatSlotComponent } from './utils/createCompatSlotComponent';
 import { DevRuntime } from './utils/DevRuntime';
+import { createJSX } from './jsx/createJSX';
 
 export { Fragment } from 'react';
 
-export function jsxDEV<P extends {}>(
-  type: React.ElementType<P>,
-  props: P,
-  key?: React.Key,
-  source?: boolean,
-  self?: unknown,
-): React.ReactElement<P> {
-  // TODO:
-  // this is for backwards compatibility with getSlotsNext
-  // it should be removed once getSlotsNext is obsolete
-  if (isSlot<P>(props)) {
-    return jsxDEVFromSlotComponent(createCompatSlotComponent(type, props), null, key, source, self);
-  }
-  if (isSlot<P>(type)) {
-    return jsxDEVFromSlotComponent(type, props, key, source, self);
-  }
-  return DevRuntime.jsxDEV(type, props, key, source, self);
-}
+export const jsxDEV = createJSX(DevRuntime.jsxDEV);

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

@@ -1,34 +1,7 @@
-import type * as React from 'react';
-import { isSlot } from '@fluentui/react-utilities';
-import { jsxDynamicFromSlotComponent } from './jsx/jsxDynamicFromSlotComponent';
-import { jsxStaticFromSlotComponent } from './jsx/jsxStaticFromSlotComponent';
-import { createCompatSlotComponent } from './utils/createCompatSlotComponent';
 import { Runtime } from './utils/Runtime';
+import { createJSX } from './jsx/createJSX';
 
 export { Fragment } from 'react';
 
-export function jsx<P extends {}>(type: React.ElementType<P>, props: P, key?: React.Key): React.ReactElement<P> {
-  // TODO:
-  // this is for backwards compatibility with getSlotsNext
-  // it should be removed once getSlotsNext is obsolete
-  if (isSlot<P>(props)) {
-    return jsxDynamicFromSlotComponent(createCompatSlotComponent(type, props), null, key);
-  }
-  if (isSlot<P>(type)) {
-    return jsxDynamicFromSlotComponent(type, props, key);
-  }
-  return Runtime.jsx(type, props, key);
-}
-
-export function jsxs<P extends {}>(type: React.ElementType<P>, props: P, key?: React.Key): React.ReactElement<P> {
-  // TODO:
-  // this is for backwards compatibility with getSlotsNext
-  // it should be removed once getSlotsNext is obsolete
-  if (isSlot<P>(props)) {
-    return jsxStaticFromSlotComponent(createCompatSlotComponent(type, props), null, key);
-  }
-  if (isSlot<P>(type)) {
-    return jsxStaticFromSlotComponent(type, props, key);
-  }
-  return Runtime.jsxs(type, props, key);
-}
+export const jsx = createJSX(Runtime.jsx);
+export const jsxs = createJSX(Runtime.jsxs);

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

@@ -0,0 +1,54 @@
+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';
+
+/**
+ * @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 {}>(
+    type: React.ElementType<Props>,
+    overrideProps: Props | null,
+    key?: React.Key,
+    source?: unknown,
+    self?: unknown,
+  ): React.ReactElement<Props> => {
+    // TODO:
+    // 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);
+    }
+    if (isSlot<Props>(type)) {
+      return jsxFromSlotComponent(type, overrideProps, key, source, self);
+    }
+    return runtime(type, overrideProps, key, source, self);
+  };
+};