@fluentui-react-native/framework-base 0.1.1 → 0.1.2

package/CHANGELOG.json

@@ -2,7 +2,22 @@
   "name": "@fluentui-react-native/framework-base",
   "entries": [
     {
-      "date": "Wed, 16 Jul 2025 20:02:37 GMT",
+      "date": "Tue, 22 Jul 2025 19:02:21 GMT",
+      "version": "0.1.2",
+      "tag": "@fluentui-react-native/framework-base_v0.1.2",
+      "comments": {
+        "patch": [
+          {
+            "author": "jasonmo@microsoft.com",
+            "package": "@fluentui-react-native/framework-base",
+            "commit": "21e536f6875cb6fb9c33b439f0eafe1d4debc7a4",
+            "comment": "centralize jsx rendering functionality in framework-base"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 16 Jul 2025 20:06:45 GMT",
       "version": "0.1.1",
       "tag": "@fluentui-react-native/framework-base_v0.1.1",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,20 @@
 # Change Log - @fluentui-react-native/framework-base
 
-<!-- This log was last generated on Wed, 16 Jul 2025 20:02:37 GMT and should not be manually modified. -->
+<!-- This log was last generated on Tue, 22 Jul 2025 19:02:21 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
+## 0.1.2
+
+Tue, 22 Jul 2025 19:02:21 GMT
+
+### Patches
+
+- centralize jsx rendering functionality in framework-base (jasonmo@microsoft.com)
+
 ## 0.1.1
 
-Wed, 16 Jul 2025 20:02:37 GMT
+Wed, 16 Jul 2025 20:06:45 GMT
 
 ### Patches
 

package/lib/component-patterns/renderSlot.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+/**
+ * Component slots have a marker which allows the slot render handler to know which ones are safe to call as a function.
+ */
+export type SlotFn<TProps> = React.FunctionComponent<TProps> & {
+    _canCompose?: boolean;
+};
+/**
+ * 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 = React.ElementType<any> | string;
+/**
+ * Renders a slot
+ *
+ * @param slot - native react type or slot function to render
+ * @param extraProps - additional props to mixin
+ * @param children - the children to pass down to the slot
+ */
+export declare function renderSlot<TProps>(slot: NativeReactType | SlotFn<TProps>, extraProps: TProps, ...children: React.ReactNode[]): React.ReactElement<any, any>;
+//# sourceMappingURL=renderSlot.d.ts.map

package/lib/component-patterns/renderSlot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderSlot.d.ts","sourceRoot":"","sources":["../../src/component-patterns/renderSlot.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;GAEG;AACH,MAAM,MAAM,MAAM,CAAC,MAAM,IAAI,KAAK,CAAC,iBAAiB,CAAC,MAAM,CAAC,GAAG;IAC7D,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC;AAE9D;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,MAAM,EAAE,IAAI,EAAE,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,KAAK,CAAC,SAAS,EAAE,gCAI5H"}

package/lib/component-patterns/renderSlot.js

@@ -0,0 +1,14 @@
+import * as React from 'react';
+/**
+ * Renders a slot
+ *
+ * @param slot - native react type or slot function to render
+ * @param extraProps - additional props to mixin
+ * @param children - the children to pass down to the slot
+ */
+export function renderSlot(slot, extraProps, ...children) {
+    return typeof slot === 'function' && slot._canCompose
+        ? slot(extraProps, ...children)
+        : React.createElement(slot, extraProps, ...children);
+}
+//# sourceMappingURL=renderSlot.js.map

package/lib/component-patterns/renderSlot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderSlot.js","sourceRoot":"","sources":["../../src/component-patterns/renderSlot.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B;;;;;;GAMG;AACH,MAAM,UAAU,UAAU,CAAS,IAAsC,EAAE,UAAkB,EAAE,GAAG,QAA2B;IAC3H,OAAO,OAAO,IAAI,KAAK,UAAU,IAAK,IAAuB,CAAC,WAAW;QACvE,CAAC,CAAE,IAAuB,CAAC,UAAU,EAAE,GAAG,QAAQ,CAAC;QACnD,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI,EAAE,UAAU,EAAE,GAAG,QAAQ,CAAC,CAAC;AACzD,CAAC"}

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

@@ -0,0 +1,39 @@
+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>;
+};
+/**
+ * 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 declare function stagedComponent<TProps>(staged: StagedRender<TProps>, memo?: boolean): ComposableFunction<TProps>;
+//# sourceMappingURL=stagedComponent.d.ts.map

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

@@ -0,0 +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"}

package/lib/component-patterns/stagedComponent.js

@@ -0,0 +1,20 @@
+import * as React from 'react';
+function asArray(val) {
+    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(staged, memo) {
+    const component = (props) => {
+        const { children, ...rest } = props;
+        return staged(rest)({}, asArray(children));
+    };
+    const stagedComponent = memo ? React.memo(component) : component;
+    Object.assign(stagedComponent, { _staged: staged });
+    return stagedComponent;
+}
+//# sourceMappingURL=stagedComponent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stagedComponent.js","sourceRoot":"","sources":["../../src/component-patterns/stagedComponent.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;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,MAAM,UAAU,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"}

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

@@ -0,0 +1,15 @@
+import type { NativeReactType } from './renderSlot';
+/**
+ * This function is required for any module that uses slots.
+ *
+ * This function is a slot resolver that automatically evaluates slot functions to generate React elements.
+ * A byproduct of this resolver is that it removes slots from the React hierarchy by bypassing React.createElement.
+ *
+ * To use this function on a per-file basis, use the jsx directive targeting withSlots.
+ * This directive must be the FIRST LINE in the file to work correctly.
+ * Usage of this pragma also requires withSlots import statement.
+ *
+ * See React.createElement
+ */
+export declare function withSlots<P>(reactType: NativeReactType, props?: (React.Attributes & P) | null, ...children: React.ReactNode[]): ReturnType<React.FunctionComponent<P>>;
+//# sourceMappingURL=withSlots.d.ts.map

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

@@ -0,0 +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"}

package/lib/component-patterns/withSlots.js

@@ -0,0 +1,19 @@
+import { renderSlot } from './renderSlot';
+/**
+ * This function is required for any module that uses slots.
+ *
+ * This function is a slot resolver that automatically evaluates slot functions to generate React elements.
+ * A byproduct of this resolver is that it removes slots from the React hierarchy by bypassing React.createElement.
+ *
+ * To use this function on a per-file basis, use the jsx directive targeting withSlots.
+ * This directive must be the FIRST LINE in the file to work correctly.
+ * Usage of this pragma also requires withSlots import statement.
+ *
+ * See React.createElement
+ */
+// Can't use typeof on React.createElement since it's overloaded. Approximate createElement's signature for now and widen as needed.
+export 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 renderSlot(reactType, props, ...children);
+}
+//# sourceMappingURL=withSlots.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"withSlots.js","sourceRoot":"","sources":["../../src/component-patterns/withSlots.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C;;;;;;;;;;;GAWG;AAEH,oIAAoI;AACpI,MAAM,UAAU,SAAS,CACvB,SAA0B,EAC1B,KAAqC,EACrC,GAAG,QAA2B;IAE9B,0HAA0H;IAC1H,OAAO,UAAU,CAAI,SAAS,EAAE,KAAK,EAAE,GAAG,QAAQ,CAAC,CAAC;AACtD,CAAC"}

package/lib/index.d.ts

@@ -6,4 +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 { withSlots } from './component-patterns/withSlots';
+export { stagedComponent } from './component-patterns/stagedComponent';
+export type { FinalRender, StagedRender, ComposableFunction } from './component-patterns/stagedComponent';
 //# sourceMappingURL=index.d.ts.map

package/lib/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,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,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"}
+{"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,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,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"}

package/lib/index.js

@@ -4,4 +4,8 @@ export { getMemoCache } from './memo-cache/getMemoCache';
 export { memoize } from './memo-cache/memoize';
 export { mergeStyles } from './merge-props/mergeStyles';
 export { mergeProps } from './merge-props/mergeProps';
+// component pattern exports
+export { renderSlot } from './component-patterns/renderSlot';
+export { withSlots } from './component-patterns/withSlots';
+export { stagedComponent } from './component-patterns/stagedComponent';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,0BAA0B;AAC1B,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAYhH,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAI/C,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,0BAA0B;AAC1B,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAYhH,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAI/C,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,4BAA4B;AAC5B,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAE7D,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAC"}

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

@@ -0,0 +1,21 @@
+import * as React from 'react';
+/**
+ * Component slots have a marker which allows the slot render handler to know which ones are safe to call as a function.
+ */
+export type SlotFn<TProps> = React.FunctionComponent<TProps> & {
+    _canCompose?: boolean;
+};
+/**
+ * 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 = React.ElementType<any> | string;
+/**
+ * Renders a slot
+ *
+ * @param slot - native react type or slot function to render
+ * @param extraProps - additional props to mixin
+ * @param children - the children to pass down to the slot
+ */
+export declare function renderSlot<TProps>(slot: NativeReactType | SlotFn<TProps>, extraProps: TProps, ...children: React.ReactNode[]): React.ReactElement<any, any>;
+//# sourceMappingURL=renderSlot.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"renderSlot.d.ts","sourceRoot":"","sources":["../../src/component-patterns/renderSlot.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;GAEG;AACH,MAAM,MAAM,MAAM,CAAC,MAAM,IAAI,KAAK,CAAC,iBAAiB,CAAC,MAAM,CAAC,GAAG;IAC7D,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC;AAE9D;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,MAAM,EAAE,IAAI,EAAE,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,KAAK,CAAC,SAAS,EAAE,gCAI5H"}

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

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderSlot = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+/**
+ * Renders a slot
+ *
+ * @param slot - native react type or slot function to render
+ * @param extraProps - additional props to mixin
+ * @param children - the children to pass down to the slot
+ */
+function renderSlot(slot, extraProps, ...children) {
+    return typeof slot === 'function' && slot._canCompose
+        ? slot(extraProps, ...children)
+        : React.createElement(slot, extraProps, ...children);
+}
+exports.renderSlot = renderSlot;
+//# sourceMappingURL=renderSlot.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"renderSlot.js","sourceRoot":"","sources":["../../src/component-patterns/renderSlot.ts"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAe/B;;;;;;GAMG;AACH,SAAgB,UAAU,CAAS,IAAsC,EAAE,UAAkB,EAAE,GAAG,QAA2B;IAC3H,OAAO,OAAO,IAAI,KAAK,UAAU,IAAK,IAAuB,CAAC,WAAW;QACvE,CAAC,CAAE,IAAuB,CAAC,UAAU,EAAE,GAAG,QAAQ,CAAC;QACnD,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI,EAAE,UAAU,EAAE,GAAG,QAAQ,CAAC,CAAC;AACzD,CAAC;AAJD,gCAIC"}

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

@@ -0,0 +1,39 @@
+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>;
+};
+/**
+ * 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 declare function stagedComponent<TProps>(staged: StagedRender<TProps>, memo?: boolean): ComposableFunction<TProps>;
+//# sourceMappingURL=stagedComponent.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stagedComponent = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+function asArray(val) {
+    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
+ */
+function stagedComponent(staged, memo) {
+    const component = (props) => {
+        const { children, ...rest } = props;
+        return staged(rest)({}, asArray(children));
+    };
+    const stagedComponent = memo ? React.memo(component) : component;
+    Object.assign(stagedComponent, { _staged: staged });
+    return stagedComponent;
+}
+exports.stagedComponent = stagedComponent;
+//# sourceMappingURL=stagedComponent.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,15 @@
+import type { NativeReactType } from './renderSlot';
+/**
+ * This function is required for any module that uses slots.
+ *
+ * This function is a slot resolver that automatically evaluates slot functions to generate React elements.
+ * A byproduct of this resolver is that it removes slots from the React hierarchy by bypassing React.createElement.
+ *
+ * To use this function on a per-file basis, use the jsx directive targeting withSlots.
+ * This directive must be the FIRST LINE in the file to work correctly.
+ * Usage of this pragma also requires withSlots import statement.
+ *
+ * See React.createElement
+ */
+export declare function withSlots<P>(reactType: NativeReactType, props?: (React.Attributes & P) | null, ...children: React.ReactNode[]): ReturnType<React.FunctionComponent<P>>;
+//# sourceMappingURL=withSlots.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withSlots = void 0;
+const renderSlot_1 = require("./renderSlot");
+/**
+ * This function is required for any module that uses slots.
+ *
+ * This function is a slot resolver that automatically evaluates slot functions to generate React elements.
+ * A byproduct of this resolver is that it removes slots from the React hierarchy by bypassing React.createElement.
+ *
+ * To use this function on a per-file basis, use the jsx directive targeting withSlots.
+ * This directive must be the FIRST LINE in the file to work correctly.
+ * Usage of this pragma also requires withSlots import statement.
+ *
+ * See React.createElement
+ */
+// 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);
+}
+exports.withSlots = withSlots;
+//# sourceMappingURL=withSlots.js.map

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

@@ -0,0 +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"}

package/lib-commonjs/index.d.ts

@@ -6,4 +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 { withSlots } from './component-patterns/withSlots';
+export { stagedComponent } from './component-patterns/stagedComponent';
+export type { FinalRender, StagedRender, ComposableFunction } from './component-patterns/stagedComponent';
 //# 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,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,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"}
+{"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,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,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"}

package/lib-commonjs/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.mergeProps = exports.mergeStyles = exports.memoize = exports.getMemoCache = exports.filterToObjects = exports.processImmutable = exports.immutableMergeCore = exports.immutableMerge = void 0;
+exports.stagedComponent = exports.withSlots = exports.renderSlot = exports.mergeProps = exports.mergeStyles = exports.memoize = 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; } });
@@ -15,4 +15,11 @@ var mergeStyles_1 = require("./merge-props/mergeStyles");
 Object.defineProperty(exports, "mergeStyles", { enumerable: true, get: function () { return mergeStyles_1.mergeStyles; } });
 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 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; } });
 //# 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,0DAAyD;AAAhD,4GAAA,YAAY,OAAA;AACrB,gDAA+C;AAAtC,kGAAA,OAAO,OAAA;AAIhB,yDAAwD;AAA/C,0GAAA,WAAW,OAAA;AACpB,uDAAsD;AAA7C,wGAAA,UAAU,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,0DAAyD;AAAhD,4GAAA,YAAY,OAAA;AACrB,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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/framework-base",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Base types and utilities fluentui-react-native frameworks",
   "repository": {
     "type": "git",

package/src/component-patterns/renderSlot.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+
+/**
+ * Component slots have a marker which allows the slot render handler to know which ones are safe to call as a function.
+ */
+export type SlotFn<TProps> = React.FunctionComponent<TProps> & {
+  _canCompose?: boolean;
+};
+
+/**
+ * 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 = React.ElementType<any> | string;
+
+/**
+ * Renders a slot
+ *
+ * @param slot - native react type or slot function to render
+ * @param extraProps - additional props to mixin
+ * @param children - the children to pass down to the slot
+ */
+export function renderSlot<TProps>(slot: NativeReactType | SlotFn<TProps>, extraProps: TProps, ...children: React.ReactNode[]) {
+  return typeof slot === 'function' && (slot as SlotFn<TProps>)._canCompose
+    ? (slot as SlotFn<TProps>)(extraProps, ...children)
+    : React.createElement(slot, extraProps, ...children);
+}

package/src/component-patterns/stagedComponent.ts

@@ -0,0 +1,53 @@
+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> };
+
+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>;
+}

package/src/component-patterns/withSlots.tsx

@@ -0,0 +1,25 @@
+import type { NativeReactType } from './renderSlot';
+import { renderSlot } from './renderSlot';
+
+/**
+ * This function is required for any module that uses slots.
+ *
+ * This function is a slot resolver that automatically evaluates slot functions to generate React elements.
+ * A byproduct of this resolver is that it removes slots from the React hierarchy by bypassing React.createElement.
+ *
+ * To use this function on a per-file basis, use the jsx directive targeting withSlots.
+ * This directive must be the FIRST LINE in the file to work correctly.
+ * Usage of this pragma also requires withSlots import statement.
+ *
+ * See React.createElement
+ */
+
+// Can't use typeof on React.createElement since it's overloaded. Approximate createElement's signature for now and widen as needed.
+export function withSlots<P>(
+  reactType: NativeReactType,
+  props?: (React.Attributes & P) | null,
+  ...children: React.ReactNode[]
+): ReturnType<React.FunctionComponent<P>> {
+  // if it is a non-string type with _canCompose set just call the function directly, otherwise call createElement as normal
+  return renderSlot<P>(reactType, props, ...children);
+}

package/src/index.ts

@@ -18,3 +18,10 @@ 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';
+
+// component pattern exports
+export { renderSlot } from './component-patterns/renderSlot';
+export type { SlotFn, NativeReactType } from './component-patterns/renderSlot';
+export { withSlots } from './component-patterns/withSlots';
+export { stagedComponent } from './component-patterns/stagedComponent';
+export type { FinalRender, StagedRender, ComposableFunction } from './component-patterns/stagedComponent';