@fluentui-react-native/framework-base 0.1.3 → 0.2.0

package/lib-commonjs/component-patterns/render.types.d.ts

@@ -0,0 +1,98 @@
+import type React from 'react';
+import type ReactJSX from 'react/jsx-runtime';
+/**
+ * Base types for rendering components in a react application, extracted from react types
+ */
+export type RenderResult = ReturnType<typeof ReactJSX.jsx>;
+export type RenderType = Parameters<typeof ReactJSX.jsx>[0] | string;
+/**
+ * The standard element type inputs for react and react-native. This might be View or Button, or it might be 'div' in web. Effectively
+ * it is what react accepts for React.createElement
+ */
+export type NativeReactType = RenderType;
+/**
+ * DIRECT RENDERING
+ *
+ * This is a pattern where a function can by called directly to render a component, bypassing creating additional layers of the
+ * rendering tree. This is useful for higher order components that mainly need to do simple prop manipulation but want to
+ * compartmentalize the logic.
+ *
+ * Note that for this to be safe, hooks cannot be used in the function. This is the reason why function component is redefined,
+ * to help linting tools catch bad usage.
+ *
+ * The newer DirectComponent type should be used, as it will handle children consistently.
+ */
+/**
+ * type of the render function, not a FunctionComponent to help prevent hook usage
+ */
+export type DirectComponentFunction<TProps> = (props: TProps) => RenderResult;
+/**
+ * The full component definition that has the attached properties to allow the jsx handlers to render it directly.
+ */
+export type DirectComponent<TProps> = DirectComponentFunction<TProps> & {
+    displayName?: string;
+    _callDirect?: boolean;
+};
+/**
+ * Legacy slot function type, this allows the rendering handlers to bypass the normal JSX rendering and call the function
+ * directly. This expects the function to have children as the last argument of the call which isn't consistent with standard
+ * react usage, where children are passed as a prop. If writing new components use the DirectComponent type instead.
+ * @deprecated use DirectComponent instead
+ */
+export type LegacyDirectComponent<TProps> = React.FunctionComponent<TProps> & {
+    _canCompose?: boolean;
+};
+/**
+ * Legacy type name used for consistency with old rendering patterns.
+ */
+export type SlotFn<TProps> = LegacyDirectComponent<TProps>;
+/**
+ * MULTI-STAGE RENDERING
+ *
+ * The above direct rendering pattern is useful for simple components, but it does not allow for hooks or complex logic. The staged render pattern allows
+ * for a component to be rendered in two stages, allowing for hooks to be used in the first stage and then the second stage to be a simple render function that can
+ * be called directly.
+ *
+ * In code that respects the pattern the first stage will be called with props (though children will not be present) and will return a function that will be called
+ * with additional props, this time with children present. This allows for the first stage to handle all the logic and hooks, while the second stage can be a simple render function
+ * that can leverage direct rendering if supported.
+ *
+ * The component itself will be a FunctionComponent, but it will have an attached property that is the staged render function. This allows the component to be used in two
+ * parts via the useSlot hook, or to be used directly in JSX/TSX as a normal component.
+ */
+/**
+ * This is an updated version of the staged render that handles children and types more consistently. Generally children
+ * will be passed as part of the props for component rendering, it is inconsistent to have them as a variable argument.
+ *
+ * The `children` prop will be automatically inferred and typed correctly by the prop type. Hooks are still expected
+ */
+export type TwoStageRender<TProps> = (props: TProps) => React.ComponentType<React.PropsWithChildren<TProps>>;
+/**
+ * Component type for a component that can be rendered in two stages, with the attached render function.
+ */
+export type StagedComponent<TProps> = React.FunctionComponent<TProps> & {
+    _twoStageRender?: TwoStageRender<TProps>;
+};
+/**
+ * The final rendering of the props in a staged render. This is the function component signature that matches that of
+ * React.createElement, children (if present) will be part of the variable args at the end.
+ */
+export type FinalRender<TProps> = (props: TProps, ...children: React.ReactNode[]) => JSX.Element | null;
+/**
+ * Signature for a staged render function.
+ * @deprecated Use TwoStageRender instead
+ */
+export type StagedRender<TProps> = (props: TProps, ...args: any[]) => FinalRender<TProps>;
+/**
+ * Signature for a component that uses the staged render pattern.
+ * @deprecated Use TwoStageRender instead
+ */
+export type ComposableFunction<TProps> = React.FunctionComponent<TProps> & {
+    _staged?: StagedRender<TProps>;
+};
+/**
+ * A type aggregating all the custom types that can be used in the render process.
+ * @internal only used in this package, should not be exported
+ */
+export type AnyCustomType<TProps> = React.FunctionComponent<TProps> | DirectComponent<TProps> | StagedComponent<TProps> | ComposableFunction<TProps> | LegacyDirectComponent<TProps>;
+//# sourceMappingURL=render.types.d.ts.map

package/lib-commonjs/component-patterns/render.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"render.types.d.ts","sourceRoot":"","sources":["../../src/component-patterns/render.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,QAAQ,MAAM,mBAAmB,CAAC;AAE9C;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,GAAG,CAAC,CAAC;AAC3D,MAAM,MAAM,UAAU,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC;AAErE;;;GAGG;AACH,MAAM,MAAM,eAAe,GAAG,UAAU,CAAC;AAEzC;;;;;;;;;;;GAWG;AAEH;;GAEG;AACH,MAAM,MAAM,uBAAuB,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,MAAM,KAAK,YAAY,CAAC;AAE9E;;GAEG;AACH,MAAM,MAAM,eAAe,CAAC,MAAM,IAAI,uBAAuB,CAAC,MAAM,CAAC,GAAG;IACtE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF;;;;;GAKG;AACH,MAAM,MAAM,qBAAqB,CAAC,MAAM,IAAI,KAAK,CAAC,iBAAiB,CAAC,MAAM,CAAC,GAAG;IAC5E,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,MAAM,CAAC,MAAM,IAAI,qBAAqB,CAAC,MAAM,CAAC,CAAC;AAE3D;;;;;;;;;;;;;GAaG;AAEH;;;;;GAKG;AACH,MAAM,MAAM,cAAc,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,CAAC;AAE7G;;GAEG;AACH,MAAM,MAAM,eAAe,CAAC,MAAM,IAAI,KAAK,CAAC,iBAAiB,CAAC,MAAM,CAAC,GAAG;IACtE,eAAe,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;CAC1C,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,WAAW,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,KAAK,CAAC,SAAS,EAAE,KAAK,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC;AAExG;;;GAGG;AACH,MAAM,MAAM,YAAY,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,WAAW,CAAC,MAAM,CAAC,CAAC;AAE1F;;;GAGG;AACH,MAAM,MAAM,kBAAkB,CAAC,MAAM,IAAI,KAAK,CAAC,iBAAiB,CAAC,MAAM,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAA;CAAE,CAAC;AAE9G;;;GAGG;AACH,MAAM,MAAM,aAAa,CAAC,MAAM,IAC5B,KAAK,CAAC,iBAAiB,CAAC,MAAM,CAAC,GAC/B,eAAe,CAAC,MAAM,CAAC,GACvB,eAAe,CAAC,MAAM,CAAC,GACvB,kBAAkB,CAAC,MAAM,CAAC,GAC1B,qBAAqB,CAAC,MAAM,CAAC,CAAC"}

package/lib-commonjs/component-patterns/render.types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=render.types.js.map

package/lib-commonjs/component-patterns/render.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"render.types.js","sourceRoot":"","sources":["../../src/component-patterns/render.types.ts"],"names":[],"mappings":""}

package/lib-commonjs/component-patterns/stagedComponent.d.ts

@@ -1,34 +1,4 @@
-import * as React from 'react';
-/**
- * The final rendering of the props in a staged render. This is the function component signature that matches that of
- * React.createElement, children (if present) will be part of the variable args at the end.
- */
-export type FinalRender<TProps> = (props: TProps, ...children: React.ReactNode[]) => JSX.Element | null;
-/**
- * This is a pattern of rendering where a functional component can be executed in two stages rather than in a single pass.
- *
- * The pattern looks like:
- * (props) => {
- *   // handle props
- *   // call hooks, remember these can't be conditional
- *   // build styles and props to pass to child components
- *
- *   return (additionalProps, ...children) => {
- *     // return the actual element tree, this includes conditional branching or rendering
- *     // mixin additional props, props which require logic should be required in phase 1.
- *
- *     // NOTE: This is where children will show up
- *   };
- * }
- */
-export type StagedRender<TProps> = (props: TProps, ...args: any[]) => FinalRender<TProps>;
-/**
- * A composable function may have a two stage render function as an attached property. This allows the function to work
- * in all the standard react flows, but allows for pulling out the staged render when components understand it.
- */
-export type ComposableFunction<TProps> = React.FunctionComponent<TProps> & {
-    _staged?: StagedRender<TProps>;
-};
+import type { StagedComponent, TwoStageRender, StagedRender, ComposableFunction } from './render.types';
 /**
  * Take a staged render function and make a real component out of it
  *
@@ -36,4 +6,10 @@ export type ComposableFunction<TProps> = React.FunctionComponent<TProps> & {
  * @param memo - optional flag to enable wrapping the created component in a React.memo HOC
  */
 export declare function stagedComponent<TProps>(staged: StagedRender<TProps>, memo?: boolean): ComposableFunction<TProps>;
+/**
+ * Take a two stage render function and make a real component out of it, attaching the staged render function
+ * so it can be split if used in that manner.
+ * @param staged - two stage render function to wrap into a staged component
+ */
+export declare function twoStageComponent<TProps>(staged: TwoStageRender<TProps>): StagedComponent<TProps>;
 //# sourceMappingURL=stagedComponent.d.ts.map

package/lib-commonjs/component-patterns/stagedComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stagedComponent.d.ts","sourceRoot":"","sources":["../../src/component-patterns/stagedComponent.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;GAGG;AACH,MAAM,MAAM,WAAW,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,KAAK,CAAC,SAAS,EAAE,KAAK,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC;AAExG;;;;;;;;;;;;;;;;GAgBG;AAEH,MAAM,MAAM,YAAY,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,WAAW,CAAC,MAAM,CAAC,CAAC;AAE1F;;;GAGG;AACH,MAAM,MAAM,kBAAkB,CAAC,MAAM,IAAI,KAAK,CAAC,iBAAiB,CAAC,MAAM,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAA;CAAE,CAAC;AAM9G;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,MAAM,EAAE,MAAM,EAAE,YAAY,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,kBAAkB,CAAC,MAAM,CAAC,CAQhH"}
+{"version":3,"file":"stagedComponent.d.ts","sourceRoot":"","sources":["../../src/component-patterns/stagedComponent.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,eAAe,EAAE,cAAc,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAMxG;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,MAAM,EAAE,MAAM,EAAE,YAAY,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,kBAAkB,CAAC,MAAM,CAAC,CAQhH;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,MAAM,EAAE,cAAc,CAAC,MAAM,CAAC,GAAG,eAAe,CAAC,MAAM,CAAC,CAUjG"}

package/lib-commonjs/component-patterns/stagedComponent.js

@@ -1,8 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.stagedComponent = void 0;
+exports.twoStageComponent = exports.stagedComponent = void 0;
 const tslib_1 = require("tslib");
+/**
+ * @jsxRuntime classic
+ * @jsx withSlots
+ */
 const React = tslib_1.__importStar(require("react"));
+const withSlots_1 = require("./withSlots");
 function asArray(val) {
     return Array.isArray(val) ? val : [val];
 }
@@ -22,4 +27,18 @@ function stagedComponent(staged, memo) {
     return stagedComponent;
 }
 exports.stagedComponent = stagedComponent;
+/**
+ * Take a two stage render function and make a real component out of it, attaching the staged render function
+ * so it can be split if used in that manner.
+ * @param staged - two stage render function to wrap into a staged component
+ */
+function twoStageComponent(staged) {
+    return Object.assign((props) => {
+        const { children, ...outerProps } = props;
+        const innerProps = { children };
+        const Inner = staged(outerProps);
+        return (0, withSlots_1.withSlots)(Inner, { ...innerProps });
+    }, { _twoStageRender: staged });
+}
+exports.twoStageComponent = twoStageComponent;
 //# sourceMappingURL=stagedComponent.js.map

package/lib-commonjs/component-patterns/stagedComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"stagedComponent.js","sourceRoot":"","sources":["../../src/component-patterns/stagedComponent.ts"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAkC/B,SAAS,OAAO,CAAI,GAAY;IAC9B,OAAO,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;AAC1C,CAAC;AAED;;;;;GAKG;AACH,SAAgB,eAAe,CAAS,MAA4B,EAAE,IAAc;IAClF,MAAM,SAAS,GAAG,CAAC,KAAsC,EAAE,EAAE;QAC3D,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;QACpC,OAAO,MAAM,CAAC,IAAc,CAAC,CAAC,EAAqC,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC1F,CAAC,CAAC;IACF,MAAM,eAAe,GAAG,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IACjE,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,CAAC;IACpD,OAAO,eAA6C,CAAC;AACvD,CAAC;AARD,0CAQC"}
+{"version":3,"file":"stagedComponent.js","sourceRoot":"","sources":["../../src/component-patterns/stagedComponent.tsx"],"names":[],"mappings":";;;;AAAA;;;GAGG;AACH,qDAA+B;AAC/B,2CAAwC;AAIxC,SAAS,OAAO,CAAI,GAAY;IAC9B,OAAO,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;AAC1C,CAAC;AAED;;;;;GAKG;AACH,SAAgB,eAAe,CAAS,MAA4B,EAAE,IAAc;IAClF,MAAM,SAAS,GAAG,CAAC,KAAsC,EAAE,EAAE;QAC3D,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;QACpC,OAAO,MAAM,CAAC,IAAc,CAAC,CAAC,EAAqC,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC1F,CAAC,CAAC;IACF,MAAM,eAAe,GAAG,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IACjE,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,CAAC;IACpD,OAAO,eAA6C,CAAC;AACvD,CAAC;AARD,0CAQC;AAED;;;;GAIG;AACH,SAAgB,iBAAiB,CAAS,MAA8B;IACtE,OAAO,MAAM,CAAC,MAAM,CAClB,CAAC,KAAsC,EAAE,EAAE;QACzC,MAAM,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;QAC1C,MAAM,UAAU,GAAG,EAAE,QAAQ,EAAqC,CAAC;QACnE,MAAM,KAAK,GAAG,MAAM,CAAC,UAAoB,CAAC,CAAC;QAC3C,OAAO,2BAAC,KAAK,OAAK,UAAU,GAAI,CAAC;IACnC,CAAC,EACD,EAAE,eAAe,EAAE,MAAM,EAAE,CAC5B,CAAC;AACJ,CAAC;AAVD,8CAUC"}

package/lib-commonjs/component-patterns/withSlots.d.ts

@@ -1,4 +1,4 @@
-import type { NativeReactType } from './renderSlot';
+import type React from 'react';
 /**
  * This function is required for any module that uses slots.
  *
@@ -11,5 +11,5 @@ import type { NativeReactType } from './renderSlot';
  *
  * See React.createElement
  */
-export declare function withSlots<P>(reactType: NativeReactType, props?: (React.Attributes & P) | null, ...children: React.ReactNode[]): ReturnType<React.FunctionComponent<P>>;
+export declare function withSlots(reactType: Parameters<typeof React.createElement>[0], props?: unknown, ...children: React.ReactNode[]): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 //# sourceMappingURL=withSlots.d.ts.map

package/lib-commonjs/component-patterns/withSlots.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"withSlots.d.ts","sourceRoot":"","sources":["../../src/component-patterns/withSlots.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAGpD;;;;;;;;;;;GAWG;AAGH,wBAAgB,SAAS,CAAC,CAAC,EACzB,SAAS,EAAE,eAAe,EAC1B,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,UAAU,GAAG,CAAC,CAAC,GAAG,IAAI,EACrC,GAAG,QAAQ,EAAE,KAAK,CAAC,SAAS,EAAE,GAC7B,UAAU,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAGxC"}
+{"version":3,"file":"withSlots.d.ts","sourceRoot":"","sources":["../../src/component-patterns/withSlots.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;;;;;;;;;;GAWG;AAGH,wBAAgB,SAAS,CAAC,SAAS,EAAE,UAAU,CAAC,OAAO,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,GAAG,QAAQ,EAAE,KAAK,CAAC,SAAS,EAAE,sEAG9H"}

package/lib-commonjs/component-patterns/withSlots.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.withSlots = void 0;
-const renderSlot_1 = require("./renderSlot");
+const render_1 = require("./render");
 /**
  * This function is required for any module that uses slots.
  *
@@ -17,7 +17,7 @@ const renderSlot_1 = require("./renderSlot");
 // Can't use typeof on React.createElement since it's overloaded. Approximate createElement's signature for now and widen as needed.
 function withSlots(reactType, props, ...children) {
     // if it is a non-string type with _canCompose set just call the function directly, otherwise call createElement as normal
-    return (0, renderSlot_1.renderSlot)(reactType, props, ...children);
+    return (0, render_1.renderForClassicRuntime)(reactType, props, ...children);
 }
 exports.withSlots = withSlots;
 //# sourceMappingURL=withSlots.js.map

package/lib-commonjs/component-patterns/withSlots.js.map

@@ -1 +1 @@
-{"version":3,"file":"withSlots.js","sourceRoot":"","sources":["../../src/component-patterns/withSlots.tsx"],"names":[],"mappings":";;;AACA,6CAA0C;AAE1C;;;;;;;;;;;GAWG;AAEH,oIAAoI;AACpI,SAAgB,SAAS,CACvB,SAA0B,EAC1B,KAAqC,EACrC,GAAG,QAA2B;IAE9B,0HAA0H;IAC1H,OAAO,IAAA,uBAAU,EAAI,SAAS,EAAE,KAAK,EAAE,GAAG,QAAQ,CAAC,CAAC;AACtD,CAAC;AAPD,8BAOC"}
+{"version":3,"file":"withSlots.js","sourceRoot":"","sources":["../../src/component-patterns/withSlots.tsx"],"names":[],"mappings":";;;AACA,qCAAmD;AAEnD;;;;;;;;;;;GAWG;AAEH,oIAAoI;AACpI,SAAgB,SAAS,CAAC,SAAoD,EAAE,KAAe,EAAE,GAAG,QAA2B;IAC7H,0HAA0H;IAC1H,OAAO,IAAA,gCAAuB,EAAC,SAAS,EAAE,KAAK,EAAE,GAAG,QAAQ,CAAC,CAAC;AAChE,CAAC;AAHD,8BAGC"}

package/lib-commonjs/index.d.ts

@@ -6,9 +6,9 @@ export { memoize } from './memo-cache/memoize';
 export type { StyleProp } from './merge-props/mergeStyles.types';
 export { mergeStyles } from './merge-props/mergeStyles';
 export { mergeProps } from './merge-props/mergeProps';
-export { renderSlot } from './component-patterns/renderSlot';
-export type { SlotFn, NativeReactType } from './component-patterns/renderSlot';
+export { renderForClassicRuntime, renderForJsxRuntime, renderSlot } from './component-patterns/render';
+export type { DirectComponent, DirectComponentFunction, LegacyDirectComponent, StagedComponent, StagedRender, TwoStageRender, RenderType, RenderResult, ComposableFunction, FinalRender, SlotFn, NativeReactType, } from './component-patterns/render.types';
 export { withSlots } from './component-patterns/withSlots';
-export { stagedComponent } from './component-patterns/stagedComponent';
-export type { FinalRender, StagedRender, ComposableFunction } from './component-patterns/stagedComponent';
+export { stagedComponent, twoStageComponent } from './component-patterns/stagedComponent';
+export { jsx, jsxs } from './jsx-runtime';
 //# sourceMappingURL=index.d.ts.map

package/lib-commonjs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAChH,YAAY,EACV,wBAAwB,EACxB,sBAAsB,EACtB,YAAY,EACZ,UAAU,EACV,gBAAgB,EAChB,eAAe,GAChB,MAAM,yBAAyB,CAAC;AAGjC,YAAY,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AACjF,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC5E,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAG/C,YAAY,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAGtD,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAC7D,YAAY,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAC/E,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAC;AACvE,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAChH,YAAY,EACV,wBAAwB,EACxB,sBAAsB,EACtB,YAAY,EACZ,UAAU,EACV,gBAAgB,EAChB,eAAe,GAChB,MAAM,yBAAyB,CAAC;AAGjC,YAAY,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AACjF,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC5E,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAG/C,YAAY,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAGtD,OAAO,EAAE,uBAAuB,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACvG,YAAY,EACV,eAAe,EACf,uBAAuB,EACvB,qBAAqB,EACrB,eAAe,EACf,YAAY,EACZ,cAAc,EACd,UAAU,EACV,YAAY,EACZ,kBAAkB,EAClB,WAAW,EACX,MAAM,EACN,eAAe,GAChB,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AAC1F,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC"}

package/lib-commonjs/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.stagedComponent = exports.withSlots = exports.renderSlot = exports.mergeProps = exports.mergeStyles = exports.memoize = exports.getTypedMemoCache = exports.getMemoCache = exports.filterToObjects = exports.processImmutable = exports.immutableMergeCore = exports.immutableMerge = void 0;
+exports.jsxs = exports.jsx = exports.twoStageComponent = exports.stagedComponent = exports.withSlots = exports.renderSlot = exports.renderForJsxRuntime = exports.renderForClassicRuntime = exports.mergeProps = exports.mergeStyles = exports.memoize = exports.getTypedMemoCache = exports.getMemoCache = exports.filterToObjects = exports.processImmutable = exports.immutableMergeCore = exports.immutableMerge = void 0;
 // immutable-merge exports
 var Merge_1 = require("./immutable-merge/Merge");
 Object.defineProperty(exports, "immutableMerge", { enumerable: true, get: function () { return Merge_1.immutableMerge; } });
@@ -17,10 +17,16 @@ Object.defineProperty(exports, "mergeStyles", { enumerable: true, get: function
 var mergeProps_1 = require("./merge-props/mergeProps");
 Object.defineProperty(exports, "mergeProps", { enumerable: true, get: function () { return mergeProps_1.mergeProps; } });
 // component pattern exports
-var renderSlot_1 = require("./component-patterns/renderSlot");
-Object.defineProperty(exports, "renderSlot", { enumerable: true, get: function () { return renderSlot_1.renderSlot; } });
+var render_1 = require("./component-patterns/render");
+Object.defineProperty(exports, "renderForClassicRuntime", { enumerable: true, get: function () { return render_1.renderForClassicRuntime; } });
+Object.defineProperty(exports, "renderForJsxRuntime", { enumerable: true, get: function () { return render_1.renderForJsxRuntime; } });
+Object.defineProperty(exports, "renderSlot", { enumerable: true, get: function () { return render_1.renderSlot; } });
 var withSlots_1 = require("./component-patterns/withSlots");
 Object.defineProperty(exports, "withSlots", { enumerable: true, get: function () { return withSlots_1.withSlots; } });
 var stagedComponent_1 = require("./component-patterns/stagedComponent");
 Object.defineProperty(exports, "stagedComponent", { enumerable: true, get: function () { return stagedComponent_1.stagedComponent; } });
+Object.defineProperty(exports, "twoStageComponent", { enumerable: true, get: function () { return stagedComponent_1.twoStageComponent; } });
+var jsx_runtime_1 = require("./jsx-runtime");
+Object.defineProperty(exports, "jsx", { enumerable: true, get: function () { return jsx_runtime_1.jsx; } });
+Object.defineProperty(exports, "jsxs", { enumerable: true, get: function () { return jsx_runtime_1.jsxs; } });
 //# sourceMappingURL=index.js.map

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAAA,0BAA0B;AAC1B,iDAAgH;AAAvG,uGAAA,cAAc,OAAA;AAAE,2GAAA,kBAAkB,OAAA;AAAE,yGAAA,gBAAgB,OAAA;AAAE,wGAAA,eAAe,OAAA;AAY9E,0DAA4E;AAAnE,4GAAA,YAAY,OAAA;AAAE,iHAAA,iBAAiB,OAAA;AACxC,gDAA+C;AAAtC,kGAAA,OAAO,OAAA;AAIhB,yDAAwD;AAA/C,0GAAA,WAAW,OAAA;AACpB,uDAAsD;AAA7C,wGAAA,UAAU,OAAA;AAEnB,4BAA4B;AAC5B,8DAA6D;AAApD,wGAAA,UAAU,OAAA;AAEnB,4DAA2D;AAAlD,sGAAA,SAAS,OAAA;AAClB,wEAAuE;AAA9D,kHAAA,eAAe,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAAA,0BAA0B;AAC1B,iDAAgH;AAAvG,uGAAA,cAAc,OAAA;AAAE,2GAAA,kBAAkB,OAAA;AAAE,yGAAA,gBAAgB,OAAA;AAAE,wGAAA,eAAe,OAAA;AAY9E,0DAA4E;AAAnE,4GAAA,YAAY,OAAA;AAAE,iHAAA,iBAAiB,OAAA;AACxC,gDAA+C;AAAtC,kGAAA,OAAO,OAAA;AAIhB,yDAAwD;AAA/C,0GAAA,WAAW,OAAA;AACpB,uDAAsD;AAA7C,wGAAA,UAAU,OAAA;AAEnB,4BAA4B;AAC5B,sDAAuG;AAA9F,iHAAA,uBAAuB,OAAA;AAAE,6GAAA,mBAAmB,OAAA;AAAE,oGAAA,UAAU,OAAA;AAejE,4DAA2D;AAAlD,sGAAA,SAAS,OAAA;AAClB,wEAA0F;AAAjF,kHAAA,eAAe,OAAA;AAAE,oHAAA,iBAAiB,OAAA;AAC3C,6CAA0C;AAAjC,kGAAA,GAAG,OAAA;AAAE,mGAAA,IAAI,OAAA"}

package/lib-commonjs/jsx-runtime.d.ts

@@ -0,0 +1,4 @@
+import type React from 'react';
+export declare function jsx(type: React.ElementType, props: React.PropsWithChildren<unknown>, key?: React.Key): React.ReactElement;
+export declare function jsxs(type: React.ElementType, props: React.PropsWithChildren<unknown>, key?: React.Key): React.ReactElement;
+//# sourceMappingURL=jsx-runtime.d.ts.map

package/lib-commonjs/jsx-runtime.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"jsx-runtime.d.ts","sourceRoot":"","sources":["../src/jsx-runtime.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,wBAAgB,GAAG,CAAC,IAAI,EAAE,KAAK,CAAC,WAAW,EAAE,KAAK,EAAE,KAAK,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,GAAG,KAAK,CAAC,YAAY,CAEzH;AAED,wBAAgB,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,WAAW,EAAE,KAAK,EAAE,KAAK,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,GAAG,KAAK,CAAC,YAAY,CAE1H"}

package/lib-commonjs/jsx-runtime.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.jsxs = exports.jsx = void 0;
+const tslib_1 = require("tslib");
+const ReactJSX = tslib_1.__importStar(require("react/jsx-runtime"));
+const render_1 = require("./component-patterns/render");
+function jsx(type, props, key) {
+    return (0, render_1.renderForJsxRuntime)(type, props, key, ReactJSX.jsx);
+}
+exports.jsx = jsx;
+function jsxs(type, props, key) {
+    return (0, render_1.renderForJsxRuntime)(type, props, key, ReactJSX.jsxs);
+}
+exports.jsxs = jsxs;
+//# sourceMappingURL=jsx-runtime.js.map

package/lib-commonjs/jsx-runtime.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jsx-runtime.js","sourceRoot":"","sources":["../src/jsx-runtime.ts"],"names":[],"mappings":";;;;AACA,oEAA8C;AAC9C,wDAAkE;AAElE,SAAgB,GAAG,CAAC,IAAuB,EAAE,KAAuC,EAAE,GAAe;IACnG,OAAO,IAAA,4BAAmB,EAAC,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;AAC7D,CAAC;AAFD,kBAEC;AAED,SAAgB,IAAI,CAAC,IAAuB,EAAE,KAAuC,EAAE,GAAe;IACpG,OAAO,IAAA,4BAAmB,EAAC,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;AAC9D,CAAC;AAFD,oBAEC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/framework-base",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "Base types and utilities fluentui-react-native frameworks",
   "repository": {
     "type": "git",
@@ -16,6 +16,11 @@
       "import": "./lib/index.js",
       "require": "./lib-commonjs/index.js",
       "types": "./lib/index.d.ts"
+    },
+    "./jsx-runtime": {
+      "import": "./lib/jsx-runtime.js",
+      "require": "./lib-commonjs/jsx-runtime.js",
+      "types": "./lib/jsx-runtime.d.ts"
     }
   },
   "scripts": {
@@ -38,6 +43,6 @@
     "@fluentui-react-native/eslint-config-rules": "0.1.1",
     "@fluentui-react-native/scripts": "0.1.1",
     "@types/jest": "^29.0.0",
-    "@types/node": "^10.3.5"
+    "@types/node": "^22.0.0"
   }
 }

package/src/component-patterns/README.md

@@ -0,0 +1,39 @@
+# `fluentui-react-native` - Common component patterns
+
+These are the base component patterns shared across the deprecated or v0 framework (found under packages/deprecated), and the newer framework (found under packages/framework). This also includes the custom JSX handlers required to render them properly.
+
+There are two main patterns exposed here: direct rendering and staged rendering.
+
+## Direct Rendering
+
+The direct rendering pattern allows a component to be called directly, rather than creating a new entry in the DOM.
+
+As an example, if you want to create a wrapper around a component called `MyText` that has `italicize` as one of its props, that always wants to set that value to true. You could define:
+
+```ts
+const MyNewText: React.FunctionComponent<MyTextProps> = (props) => {
+  return <MyText {...props, italicize: true} />;
+}
+```
+
+When this is rendered, there is an entry for `MyNewText` which contains a `MyText` (another entry), which might contains `Text` (for react-native usage). The direct rendering pattern is one where a component can denote that it is safe to be called directly as a function, instead operating as a prop transform that gets applied to the underlying component.
+
+- For the above to be safe, `MyNewText` should NOT use hooks. In the case of any conditional rendering logic this will break the rule of hooks.
+
+There are two types of implementations in this folder:
+
+- `DirectComponent` - a functional component that marks itself as direct with a `_callDirect: true` attached property. This will then be called as a normal function component, with children included as part of props.
+- `LegacyDirectComponent` - the pattern currently used in this library that should be moved away from. In this case `_canCompose: true` is set as an attached property, and the function component will be called with children split from props.
+
+The internal logic of the JSX rendering helpers will handle both patterns. In the case of the newer `DirectComponent` pattern, the component will still work, even without any jsx hooks, whereas the `LegacyDirectComponent` pattern will have a somewhat undefined behavior with regards to children.
+
+## Staged Rendering
+
+The issue with the direct component pattern above, is that hooks are integral to writing functional components. The staged rendering pattern is designed to help with this. In this case a component is implemented in two stages, the prep stage where hooks are called, and the rendering stage where the tree is emitted.
+
+As above there is a newer and older version of the pattern.
+
+- `StagedComponent` - the newer version of the pattern, where the returned component function expects children as part of props.
+- `StagedRender` - the older version, where children are split out and JSX hooks are required to render correctly.
+
+Note that while the newer patterns work without any JSX hooks, the hooks will enable the element flattening.

package/src/component-patterns/render.ts

@@ -0,0 +1,54 @@
+import React from 'react';
+import * as ReactJSX from 'react/jsx-runtime';
+import type { RenderType, RenderResult, DirectComponent, LegacyDirectComponent } from './render.types';
+
+export type CustomRender = () => RenderResult;
+
+function asDirectComponent<TProps>(type: RenderType): DirectComponent<TProps> | undefined {
+  if (typeof type === 'function' && (type as DirectComponent<TProps>)._callDirect) {
+    return type as DirectComponent<TProps>;
+  }
+  return undefined;
+}
+
+function asLegacyDirectComponent<TProps>(type: RenderType): LegacyDirectComponent<TProps> | undefined {
+  if (typeof type === 'function' && (type as LegacyDirectComponent<TProps>)._canCompose) {
+    return type as LegacyDirectComponent<TProps>;
+  }
+  return undefined;
+}
+
+export function renderForJsxRuntime<TProps>(
+  type: React.ElementType,
+  props: React.PropsWithChildren<TProps>,
+  key?: React.Key,
+  jsxFn: typeof ReactJSX.jsx = ReactJSX.jsx,
+): RenderResult {
+  const legacyDirect = asLegacyDirectComponent(type);
+  if (legacyDirect) {
+    const { children, ...rest } = props;
+    const newProps = { ...rest, key };
+    return legacyDirect(newProps, ...React.Children.toArray(children)) as RenderResult;
+  }
+  const directComponent = asDirectComponent<TProps>(type);
+  if (directComponent) {
+    const newProps = { ...props, key };
+    return directComponent(newProps);
+  }
+  return jsxFn(type, props, key);
+}
+
+export function renderForClassicRuntime<TProps>(type: RenderType, props: TProps, ...children: React.ReactNode[]): RenderResult {
+  const legacyDirect = asLegacyDirectComponent(type);
+  if (legacyDirect) {
+    return legacyDirect(props, ...children) as RenderResult;
+  }
+  const directComponent = asDirectComponent(type);
+  if (directComponent) {
+    const newProps = { ...props, children };
+    return directComponent(newProps);
+  }
+  return React.createElement(type, props, ...children);
+}
+
+export const renderSlot = renderForClassicRuntime;

package/src/component-patterns/render.types.ts

@@ -0,0 +1,114 @@
+import type React from 'react';
+import type ReactJSX from 'react/jsx-runtime';
+
+/**
+ * Base types for rendering components in a react application, extracted from react types
+ */
+export type RenderResult = ReturnType<typeof ReactJSX.jsx>;
+export type RenderType = Parameters<typeof ReactJSX.jsx>[0] | string;
+
+/**
+ * The standard element type inputs for react and react-native. This might be View or Button, or it might be 'div' in web. Effectively
+ * it is what react accepts for React.createElement
+ */
+export type NativeReactType = RenderType;
+
+/**
+ * DIRECT RENDERING
+ *
+ * This is a pattern where a function can by called directly to render a component, bypassing creating additional layers of the
+ * rendering tree. This is useful for higher order components that mainly need to do simple prop manipulation but want to
+ * compartmentalize the logic.
+ *
+ * Note that for this to be safe, hooks cannot be used in the function. This is the reason why function component is redefined,
+ * to help linting tools catch bad usage.
+ *
+ * The newer DirectComponent type should be used, as it will handle children consistently.
+ */
+
+/**
+ * type of the render function, not a FunctionComponent to help prevent hook usage
+ */
+export type DirectComponentFunction<TProps> = (props: TProps) => RenderResult;
+
+/**
+ * The full component definition that has the attached properties to allow the jsx handlers to render it directly.
+ */
+export type DirectComponent<TProps> = DirectComponentFunction<TProps> & {
+  displayName?: string;
+  _callDirect?: boolean;
+};
+
+/**
+ * Legacy slot function type, this allows the rendering handlers to bypass the normal JSX rendering and call the function
+ * directly. This expects the function to have children as the last argument of the call which isn't consistent with standard
+ * react usage, where children are passed as a prop. If writing new components use the DirectComponent type instead.
+ * @deprecated use DirectComponent instead
+ */
+export type LegacyDirectComponent<TProps> = React.FunctionComponent<TProps> & {
+  _canCompose?: boolean;
+};
+
+/**
+ * Legacy type name used for consistency with old rendering patterns.
+ */
+export type SlotFn<TProps> = LegacyDirectComponent<TProps>;
+
+/**
+ * MULTI-STAGE RENDERING
+ *
+ * The above direct rendering pattern is useful for simple components, but it does not allow for hooks or complex logic. The staged render pattern allows
+ * for a component to be rendered in two stages, allowing for hooks to be used in the first stage and then the second stage to be a simple render function that can
+ * be called directly.
+ *
+ * In code that respects the pattern the first stage will be called with props (though children will not be present) and will return a function that will be called
+ * with additional props, this time with children present. This allows for the first stage to handle all the logic and hooks, while the second stage can be a simple render function
+ * that can leverage direct rendering if supported.
+ *
+ * The component itself will be a FunctionComponent, but it will have an attached property that is the staged render function. This allows the component to be used in two
+ * parts via the useSlot hook, or to be used directly in JSX/TSX as a normal component.
+ */
+
+/**
+ * This is an updated version of the staged render that handles children and types more consistently. Generally children
+ * will be passed as part of the props for component rendering, it is inconsistent to have them as a variable argument.
+ *
+ * The `children` prop will be automatically inferred and typed correctly by the prop type. Hooks are still expected
+ */
+export type TwoStageRender<TProps> = (props: TProps) => React.ComponentType<React.PropsWithChildren<TProps>>;
+
+/**
+ * Component type for a component that can be rendered in two stages, with the attached render function.
+ */
+export type StagedComponent<TProps> = React.FunctionComponent<TProps> & {
+  _twoStageRender?: TwoStageRender<TProps>;
+};
+
+/**
+ * The final rendering of the props in a staged render. This is the function component signature that matches that of
+ * React.createElement, children (if present) will be part of the variable args at the end.
+ */
+export type FinalRender<TProps> = (props: TProps, ...children: React.ReactNode[]) => JSX.Element | null;
+
+/**
+ * Signature for a staged render function.
+ * @deprecated Use TwoStageRender instead
+ */
+export type StagedRender<TProps> = (props: TProps, ...args: any[]) => FinalRender<TProps>;
+
+/**
+ * Signature for a component that uses the staged render pattern.
+ * @deprecated Use TwoStageRender instead
+ */
+export type ComposableFunction<TProps> = React.FunctionComponent<TProps> & { _staged?: StagedRender<TProps> };
+
+/**
+ * A type aggregating all the custom types that can be used in the render process.
+ * @internal only used in this package, should not be exported
+ */
+export type AnyCustomType<TProps> =
+  | React.FunctionComponent<TProps>
+  | DirectComponent<TProps>
+  | StagedComponent<TProps>
+  | ComposableFunction<TProps>
+  | LegacyDirectComponent<TProps>;

package/src/component-patterns/stagedComponent.tsx

@@ -0,0 +1,45 @@
+/**
+ * @jsxRuntime classic
+ * @jsx withSlots
+ */
+import * as React from 'react';
+import { withSlots } from './withSlots';
+
+import type { StagedComponent, TwoStageRender, StagedRender, ComposableFunction } from './render.types';
+
+function asArray<T>(val: T | T[]): T[] {
+  return Array.isArray(val) ? val : [val];
+}
+
+/**
+ * Take a staged render function and make a real component out of it
+ *
+ * @param staged - staged render function to wrap into a staged component
+ * @param memo - optional flag to enable wrapping the created component in a React.memo HOC
+ */
+export function stagedComponent<TProps>(staged: StagedRender<TProps>, memo?: boolean): ComposableFunction<TProps> {
+  const component = (props: React.PropsWithChildren<TProps>) => {
+    const { children, ...rest } = props;
+    return staged(rest as TProps)({} as React.PropsWithChildren<TProps>, asArray(children));
+  };
+  const stagedComponent = memo ? React.memo(component) : component;
+  Object.assign(stagedComponent, { _staged: staged });
+  return stagedComponent as ComposableFunction<TProps>;
+}
+
+/**
+ * Take a two stage render function and make a real component out of it, attaching the staged render function
+ * so it can be split if used in that manner.
+ * @param staged - two stage render function to wrap into a staged component
+ */
+export function twoStageComponent<TProps>(staged: TwoStageRender<TProps>): StagedComponent<TProps> {
+  return Object.assign(
+    (props: React.PropsWithChildren<TProps>) => {
+      const { children, ...outerProps } = props;
+      const innerProps = { children } as React.PropsWithChildren<TProps>;
+      const Inner = staged(outerProps as TProps);
+      return <Inner {...innerProps} />;
+    },
+    { _twoStageRender: staged },
+  );
+}