@fluentui-react-native/framework-base - npm Package Compare versions

Comparing version 0.1.4 to 0.2.0

CHANGELOG.json

@@ -5,3 +5,18 @@ {
     {
-      "date": "Fri, 25 Jul 2025 21:32:26 GMT",
+      "date": "Tue, 29 Jul 2025 06:31:24 GMT",
+      "version": "0.2.0",
+      "tag": "@fluentui-react-native/framework-base_v0.2.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui-react-native/framework-base",
+            "commit": "78329a2222622ac8d90345d3aa908355e70f5d1a",
+            "comment": "implement both new and old render patterns for classic and jsx-runtimes"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 25 Jul 2025 21:36:33 GMT",
       "version": "0.1.4",
@@ -8,0 +23,0 @@ "tag": "@fluentui-react-native/framework-base_v0.1.4",

CHANGELOG.md

 # Change Log - @fluentui-react-native/framework-base
 
-<!-- This log was last generated on Fri, 25 Jul 2025 21:32:26 GMT and should not be manually modified. -->
+<!-- This log was last generated on Tue, 29 Jul 2025 06:31:24 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
+## 0.2.0
+
+Tue, 29 Jul 2025 06:31:24 GMT
+
+### Minor changes
+
+- implement both new and old render patterns for classic and jsx-runtimes ([e-mail])
+
 ## 0.1.4
 
-Fri, 25 Jul 2025 21:32:26 GMT
+Fri, 25 Jul 2025 21:36:33 GMT
 
@@ -11,0 +19,0 @@ ### Patches

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

@@ -1,33 +0,3 @@
-import * as React from 'react';
+import type { StagedComponent, TwoStageRender, StagedRender, ComposableFunction } from './render.types';
 /**
- * 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
@@ -39,2 +9,8 @@ *
 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

lib-commonjs/component-patterns/stagedComponent.js

 "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) {
@@ -25,2 +30,16 @@ return Array.isArray(val) ? val : [val];
 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

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

@@ -1,2 +0,2 @@
-import type { NativeReactType } from './renderSlot';
+import type React from 'react';
 /**
@@ -14,3 +14,3 @@ * This function is required for any module that uses slots.
  */
-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

lib-commonjs/component-patterns/withSlots.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.withSlots = void 0;
-const renderSlot_1 = require("./renderSlot");
+const render_1 = require("./render");
 /**
@@ -20,5 +20,5 @@ * This function is required for any module that uses slots.
     // 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

lib-commonjs/index.d.ts

@@ -9,7 +9,7 @@ export { immutableMerge, immutableMergeCore, processImmutable, filterToObjects } from './immutable-merge/Merge';
 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

lib-commonjs/index.js

 "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
@@ -20,4 +20,6 @@ var Merge_1 = require("./immutable-merge/Merge");
 // 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");
@@ -27,2 +29,6 @@ Object.defineProperty(exports, "withSlots", { enumerable: true, get: function () { return withSlots_1.withSlots; } });
 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

lib/component-patterns/stagedComponent.d.ts

@@ -1,33 +0,3 @@
-import * as React from 'react';
+import type { StagedComponent, TwoStageRender, StagedRender, ComposableFunction } from './render.types';
 /**
- * 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
@@ -39,2 +9,8 @@ *
 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

lib/component-patterns/stagedComponent.js

@@ -0,2 +1,7 @@
+/**
+ * @jsxRuntime classic
+ * @jsx withSlots
+ */
 import * as React from 'react';
+import { withSlots } from './withSlots';
 function asArray(val) {
@@ -20,2 +25,15 @@ return Array.isArray(val) ? val : [val];
 }
+/**
+ * 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(staged) {
+    return Object.assign((props) => {
+        const { children, ...outerProps } = props;
+        const innerProps = { children };
+        const Inner = staged(outerProps);
+        return withSlots(Inner, { ...innerProps });
+    }, { _twoStageRender: staged });
+}
 //# sourceMappingURL=stagedComponent.js.map

lib/component-patterns/withSlots.d.ts

@@ -1,2 +0,2 @@
-import type { NativeReactType } from './renderSlot';
+import type React from 'react';
 /**
@@ -14,3 +14,3 @@ * This function is required for any module that uses slots.
  */
-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

lib/component-patterns/withSlots.js

@@ -1,2 +0,2 @@
-import { renderSlot } from './renderSlot';
+import { renderForClassicRuntime } from './render';
 /**
@@ -17,4 +17,4 @@ * This function is required for any module that uses slots.
     // 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);
+    return renderForClassicRuntime(reactType, props, ...children);
 }
 //# sourceMappingURL=withSlots.js.map

lib/index.d.ts

@@ -9,7 +9,7 @@ export { immutableMerge, immutableMergeCore, processImmutable, filterToObjects } from './immutable-merge/Merge';
 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

lib/index.js

@@ -8,5 +8,6 @@ // immutable-merge exports
 // component pattern exports
-export { renderSlot } from './component-patterns/renderSlot';
+export { renderForClassicRuntime, renderForJsxRuntime, renderSlot } from './component-patterns/render';
 export { withSlots } from './component-patterns/withSlots';
-export { stagedComponent } from './component-patterns/stagedComponent';
+export { stagedComponent, twoStageComponent } from './component-patterns/stagedComponent';
+export { jsx, jsxs } from './jsx-runtime';
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@fluentui-react-native/framework-base",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "description": "Base types and utilities fluentui-react-native frameworks",
@@ -19,2 +19,7 @@ "repository": {
       "types": "./lib/index.d.ts"
+    },
+    "./jsx-runtime": {
+      "import": "./lib/jsx-runtime.js",
+      "require": "./lib-commonjs/jsx-runtime.js",
+      "types": "./lib/jsx-runtime.d.ts"
     }
@@ -21,0 +26,0 @@ },

README.md

@@ -1,20 +0,19 @@
-# Framework Base package
+# `@fluentui-react-native/framework-base`
 
-This package provides core types and helpers used by both the old and new versions of the framework.
+This package provides core implementations and types to support both the legacy and current frameworks.
 
 Several previously standalone packages have had their implementations moved into this package. This allows them to share certain typings and helpers without having to work around circular dependency issues. The moved packages are:
 
-- `@fluentui-react-native/immutable-merge`
-- `@fluentui-react-native/memo-cache`
-- `@fluentui-react-native/merge-props`
+- [`@fluentui-react-native/immutable-merge`](./src/immutable-merge/README.md)
+- [`@fluentui-react-native/memo-cache`](./src/memo-cache/README.md)
+- [`@fluentui-react-native/merge-props`](./src/merge-props/README.md)
 
-The functionality in these packages can be imported either by the base entry point for the package, or by using dedicated exports. The previous packages will continue to exist for the time being but are now just references to their individual exports. Note that export maps require special handling for metro bundling (with the exception of the jsx-runtime export) so the export maps are primarily for use
-in JS/web projects.
+The functionality in these packages is now exposed as part of this package.
 
+## Component Patterns
+
+The shared patterns for rendering components, as well as the JSX handlers have been centralized in this package. More information can be found [here](./src/component-patterns/README.md).
+
 ## Type Helpers
 
 - TODO: There are a number of issues with the way types are handled in the larger fluentui-react-native project, helpers and core types will be added here to help solve inference issues, avoid hard typecasts, and help the project eventually move to typescript 5.x.
-
-## JSX Helpers
-
-- TODO: Both classic and the new jsx-runtime helpers will eventually come out of this package and be shared between old and new frameworks. This will be necessary to improve typing across the board.

src/index.ts

@@ -23,6 +23,19 @@ // immutable-merge exports
 // component pattern exports
-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';

No alert changes

Improved metrics

Total package byte prevSize

289840

21.15%

Number of package files

181

13.84%

Lines of code

4089

10.93%

Worsened metrics

Number of lines in readme file

20

-4.76%

No dependency changes