diff --git a/change/@fluentui-react-jsx-runtime-abd74045-0eb2-4e91-ba62-6a5c8bb5f7cd.json b/change/@fluentui-react-jsx-runtime-abd74045-0eb2-4e91-ba62-6a5c8bb5f7cd.json new file mode 100644 index 0000000000000..451c24e7879c3 --- /dev/null +++ b/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" +} diff --git a/packages/react-components/react-jsx-runtime/bundle-size/Classic.fixture.js b/packages/react-components/react-jsx-runtime/bundle-size/Classic.fixture.js new file mode 100644 index 0000000000000..5408d3253651e --- /dev/null +++ b/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', +}; diff --git a/packages/react-components/react-jsx-runtime/bundle-size/DevRuntime.fixture.js b/packages/react-components/react-jsx-runtime/bundle-size/DevRuntime.fixture.js new file mode 100644 index 0000000000000..307a223c0a217 --- /dev/null +++ b/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', +}; diff --git a/packages/react-components/react-jsx-runtime/bundle-size/Runtime.fixture.js b/packages/react-components/react-jsx-runtime/bundle-size/Runtime.fixture.js new file mode 100644 index 0000000000000..2095c329abd13 --- /dev/null +++ b/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', +}; diff --git a/packages/react-components/react-jsx-runtime/package.json b/packages/react-components/react-jsx-runtime/package.json index d1ec8ea958efc..31e5ff303ae86 100644 --- a/packages/react-components/react-jsx-runtime/package.json +++ b/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": "*", diff --git a/packages/react-components/react-jsx-runtime/src/jsx-dev-runtime.ts b/packages/react-components/react-jsx-runtime/src/jsx-dev-runtime.ts index 06a103f49ba47..187fec98d24e1 100644 --- a/packages/react-components/react-jsx-runtime/src/jsx-dev-runtime.ts +++ b/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
( - type: React.ElementType
, - props: P, - key?: React.Key, - source?: boolean, - self?: unknown, -): React.ReactElement
{ - // TODO: - // this is for backwards compatibility with getSlotsNext - // it should be removed once getSlotsNext is obsolete - if (isSlot
(props)) { - return jsxDEVFromSlotComponent(createCompatSlotComponent(type, props), null, key, source, self); - } - if (isSlot
(type)) { - return jsxDEVFromSlotComponent(type, props, key, source, self); - } - return DevRuntime.jsxDEV(type, props, key, source, self); -} +export const jsxDEV = createJSX(DevRuntime.jsxDEV); diff --git a/packages/react-components/react-jsx-runtime/src/jsx-runtime.ts b/packages/react-components/react-jsx-runtime/src/jsx-runtime.ts index 6c5bb260dc56a..7bc354d9158ae 100644 --- a/packages/react-components/react-jsx-runtime/src/jsx-runtime.ts +++ b/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
(type: React.ElementType
, props: P, key?: React.Key): React.ReactElement
{ - // TODO: - // this is for backwards compatibility with getSlotsNext - // it should be removed once getSlotsNext is obsolete - if (isSlot
(props)) { - return jsxDynamicFromSlotComponent(createCompatSlotComponent(type, props), null, key); - } - if (isSlot
(type)) { - return jsxDynamicFromSlotComponent(type, props, key); - } - return Runtime.jsx(type, props, key); -} - -export function jsxs
(type: React.ElementType
, props: P, key?: React.Key): React.ReactElement
{ - // TODO: - // this is for backwards compatibility with getSlotsNext - // it should be removed once getSlotsNext is obsolete - if (isSlot
(props)) { - return jsxStaticFromSlotComponent(createCompatSlotComponent(type, props), null, key); - } - if (isSlot
(type)) {
- return jsxStaticFromSlotComponent(type, props, key);
- }
- return Runtime.jsxs(type, props, key);
-}
+export const jsx = createJSX(Runtime.jsx);
+export const jsxs = createJSX(Runtime.jsxs);
diff --git a/packages/react-components/react-jsx-runtime/src/jsx/createJSX.ts b/packages/react-components/react-jsx-runtime/src/jsx/createJSX.ts
new file mode 100644
index 0000000000000..3b334ea722e09
--- /dev/null
+++ b/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 =