diff --git a/change/@fluentui-react-jsx-runtime-e321b00b-0fc8-427c-bb82-36948756d961.json b/change/@fluentui-react-jsx-runtime-e321b00b-0fc8-427c-bb82-36948756d961.json new file mode 100644 index 00000000000000..19520bca0aa681 --- /dev/null +++ b/change/@fluentui-react-jsx-runtime-e321b00b-0fc8-427c-bb82-36948756d961.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "chore: simplify createElement method", + "packageName": "@fluentui/react-jsx-runtime", + "email": "bernardo.sunderhus@gmail.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-jsx-runtime/src/createElement.ts b/packages/react-components/react-jsx-runtime/src/createElement.ts index a891075365f04c..368920c38b5645 100644 --- a/packages/react-components/react-jsx-runtime/src/createElement.ts +++ b/packages/react-components/react-jsx-runtime/src/createElement.ts @@ -10,40 +10,29 @@ export function createElement

( props?: P | null, ...children: React.ReactNode[] ): React.ReactElement

| null { - if (!isSlotComponent(props)) { - return React.createElement(type, props, ...children); + return hasRenderFunction(props) + ? createElementFromRenderFunction(type, props, children) + : React.createElement(type, props, ...children); +} + +function createElementFromRenderFunction

( + type: React.ElementType

, + props: WithMetadata

, + overrideChildren: React.ReactNode[], +): React.ReactElement

| null { + const { [SLOT_RENDER_FUNCTION_SYMBOL]: renderFunction, ...renderProps } = props; + + if (overrideChildren.length > 0) { + renderProps.children = React.createElement(React.Fragment, {}, ...overrideChildren); } - const result = normalizeRenderFunction(props, children); return React.createElement( React.Fragment, {}, - result.renderFunction(type, { ...result.props, children: result.children }), + renderFunction(type, renderProps as UnknownSlotProps as P), ) as React.ReactElement

; } -function normalizeRenderFunction( - propsWithMetadata: WithMetadata, - overrideChildren?: React.ReactNode[], -): { - props: Props; - children: React.ReactNode; - renderFunction: SlotRenderFunction; -} { - 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?: Props | null): props is WithMetadata { +export function hasRenderFunction(props?: Props | null): props is WithMetadata { return Boolean(props?.hasOwnProperty(SLOT_RENDER_FUNCTION_SYMBOL)); }