From b9ab9364d9859ace17f450619e588de57cfa4df2 Mon Sep 17 00:00:00 2001 From: Bernardo Sunderhus Date: Wed, 23 Aug 2023 14:43:04 +0000 Subject: [PATCH] chore: decrease bundle size & adds fixtures --- ...-abd74045-0eb2-4e91-ba62-6a5c8bb5f7cd.json | 7 +++ .../bundle-size/Classic.fixture.js | 7 +++ .../bundle-size/DevRuntime.fixture.js | 7 +++ .../bundle-size/Runtime.fixture.js | 7 +++ .../react-jsx-runtime/package.json | 3 +- .../react-jsx-runtime/src/jsx-dev-runtime.ts | 24 +-------- .../react-jsx-runtime/src/jsx-runtime.ts | 33 ++---------- .../react-jsx-runtime/src/jsx/createJSX.ts | 54 +++++++++++++++++++ .../src/jsx/jsxDEVFromSlotComponent.ts | 30 ----------- .../src/jsx/jsxDynamicFromSlotComponent.ts | 29 ---------- .../src/jsx/jsxStaticFromSlotComponent.ts | 29 ---------- 11 files changed, 89 insertions(+), 141 deletions(-) create mode 100644 change/@fluentui-react-jsx-runtime-abd74045-0eb2-4e91-ba62-6a5c8bb5f7cd.json create mode 100644 packages/react-components/react-jsx-runtime/bundle-size/Classic.fixture.js create mode 100644 packages/react-components/react-jsx-runtime/bundle-size/DevRuntime.fixture.js create mode 100644 packages/react-components/react-jsx-runtime/bundle-size/Runtime.fixture.js create mode 100644 packages/react-components/react-jsx-runtime/src/jsx/createJSX.ts delete mode 100644 packages/react-components/react-jsx-runtime/src/jsx/jsxDEVFromSlotComponent.ts delete mode 100644 packages/react-components/react-jsx-runtime/src/jsx/jsxDynamicFromSlotComponent.ts delete mode 100644 packages/react-components/react-jsx-runtime/src/jsx/jsxStaticFromSlotComponent.ts 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 = ( + type: SlotComponentType, + overrideProps: Props | null, + key?: React.Key, + source?: unknown, + self?: unknown, + ): React.ReactElement => { + 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; + } + return runtime(elementType, props, key, source, self); + }; + + return ( + type: React.ElementType, + overrideProps: Props | null, + key?: React.Key, + source?: unknown, + self?: unknown, + ): React.ReactElement => { + // TODO: + // this is for backwards compatibility with getSlotsNext + // it should be removed once getSlotsNext is obsolete + if (isSlot(overrideProps)) { + return jsxFromSlotComponent(createCompatSlotComponent(type, overrideProps), null, key, source, self); + } + if (isSlot(type)) { + return jsxFromSlotComponent(type, overrideProps, key, source, self); + } + return runtime(type, overrideProps, key, source, self); + }; +}; diff --git a/packages/react-components/react-jsx-runtime/src/jsx/jsxDEVFromSlotComponent.ts b/packages/react-components/react-jsx-runtime/src/jsx/jsxDEVFromSlotComponent.ts deleted file mode 100644 index dd9f5a47b69f7..0000000000000 --- a/packages/react-components/react-jsx-runtime/src/jsx/jsxDEVFromSlotComponent.ts +++ /dev/null @@ -1,30 +0,0 @@ -import * as React from 'react'; -import type { SlotComponentType, UnknownSlotProps } from '@fluentui/react-utilities'; -import { getMetadataFromSlotComponent } from '../utils/getMetadataFromSlotComponent'; -import { DevRuntime } from '../utils/DevRuntime'; - -export function jsxDEVFromSlotComponent( - type: SlotComponentType, - overrideProps: Props | null, - key?: React.Key, - source?: unknown, - self?: unknown, -): React.ReactElement { - const { elementType, renderFunction, props: slotProps } = getMetadataFromSlotComponent(type); - - const props: Props = { ...slotProps, ...overrideProps }; - - if (renderFunction) { - return DevRuntime.jsxDEV( - React.Fragment, - { - children: renderFunction(elementType, props), - }, - key, - source, - self, - ) as React.ReactElement; - } - - return DevRuntime.jsxDEV(elementType, props, key, source, self); -} diff --git a/packages/react-components/react-jsx-runtime/src/jsx/jsxDynamicFromSlotComponent.ts b/packages/react-components/react-jsx-runtime/src/jsx/jsxDynamicFromSlotComponent.ts deleted file mode 100644 index 1898acb4cf0df..0000000000000 --- a/packages/react-components/react-jsx-runtime/src/jsx/jsxDynamicFromSlotComponent.ts +++ /dev/null @@ -1,29 +0,0 @@ -import * as React from 'react'; -import type { SlotComponentType, UnknownSlotProps } from '@fluentui/react-utilities'; -import { getMetadataFromSlotComponent } from '../utils/getMetadataFromSlotComponent'; -import { Runtime } from '../utils/Runtime'; - -/** - * @internal - */ -export function jsxDynamicFromSlotComponent( - type: SlotComponentType, - overrideProps: Props | null, - key?: React.Key, -): React.ReactElement { - 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; - } - - return Runtime.jsx(elementType, props, key); -} diff --git a/packages/react-components/react-jsx-runtime/src/jsx/jsxStaticFromSlotComponent.ts b/packages/react-components/react-jsx-runtime/src/jsx/jsxStaticFromSlotComponent.ts deleted file mode 100644 index 4409294991bae..0000000000000 --- a/packages/react-components/react-jsx-runtime/src/jsx/jsxStaticFromSlotComponent.ts +++ /dev/null @@ -1,29 +0,0 @@ -import * as React from 'react'; -import type { SlotComponentType, UnknownSlotProps } from '@fluentui/react-utilities'; -import { getMetadataFromSlotComponent } from '../utils/getMetadataFromSlotComponent'; -import { Runtime } from '../utils/Runtime'; - -/** - * @internal - */ -export function jsxStaticFromSlotComponent( - type: SlotComponentType, - overrideProps: Props | null, - key?: React.Key, -): React.ReactElement { - const { elementType, renderFunction, props: slotProps } = getMetadataFromSlotComponent(type); - - const props: Props = { ...slotProps, ...overrideProps }; - - if (renderFunction) { - return Runtime.jsxs( - React.Fragment, - { - children: renderFunction(elementType, props), - }, - key, - ) as React.ReactElement; - } - - return Runtime.jsxs(elementType, props, key); -}