Centralize the jsx functions in framework-base to share implementations between frameworks (#3940)

JasonVMo · web-flow · commit 21e536f6875c · 2025-07-22T11:27:55.000-07:00
diff --git a/change/@fluentui-react-native-composition-fe268f66-fb91-4e60-9ac9-5c76cefa0018.json b/change/@fluentui-react-native-composition-fe268f66-fb91-4e60-9ac9-5c76cefa0018.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "centralize jsx rendering functionality in framework-base",
+  "packageName": "@fluentui-react-native/composition",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-native-framework-b7a2a939-c6ed-4bd6-b57c-ad742e40ba0e.json b/change/@fluentui-react-native-framework-b7a2a939-c6ed-4bd6-b57c-ad742e40ba0e.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "centralize jsx rendering functionality in framework-base",
+  "packageName": "@fluentui-react-native/framework",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-native-framework-base-e54a7c73-51ca-4d28-8c47-8db88bb114d7.json b/change/@fluentui-react-native-framework-base-e54a7c73-51ca-4d28-8c47-8db88bb114d7.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "centralize jsx rendering functionality in framework-base",
+  "packageName": "@fluentui-react-native/framework-base",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-native-use-slot-6914e2cb-219f-4e17-95f2-17cc1abc1d9c.json b/change/@fluentui-react-native-use-slot-6914e2cb-219f-4e17-95f2-17cc1abc1d9c.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "centralize jsx rendering functionality in framework-base",
+  "packageName": "@fluentui-react-native/use-slot",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-native-use-slots-784bbe5b-aa5b-429c-8d1a-7c23e8132286.json b/change/@fluentui-react-native-use-slots-784bbe5b-aa5b-429c-8d1a-7c23e8132286.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "centralize jsx rendering functionality in framework-base",
+  "packageName": "@fluentui-react-native/use-slots",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@uifabricshared-foundation-composable-7a006476-ed73-4c25-85c1-2b4c9d703512.json b/change/@uifabricshared-foundation-composable-7a006476-ed73-4c25-85c1-2b4c9d703512.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "centralize jsx rendering functionality in framework-base",
+  "packageName": "@uifabricshared/foundation-composable",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/deprecated/foundation-composable/src/Composable.ts b/packages/deprecated/foundation-composable/src/Composable.ts
@@ -17,7 +17,7 @@ import {
   ISlotWithFilter,
 } from './Composable.types';
 import { useCompoundPrepare } from './Composable.slots';
-import { renderSlot } from './slots';
+import { renderSlot } from '@fluentui-react-native/framework-base';
 import { ISlotProps, mergeSettings } from '@uifabricshared/foundation-settings';
 
 export function atomicRender<TProps extends object, TState = object>(
diff --git a/packages/deprecated/foundation-composable/src/index.ts b/packages/deprecated/foundation-composable/src/index.ts
@@ -22,4 +22,4 @@ export type {
   RequireObject,
 } from './Composable.types';
 export { atomic, atomicRender, atomicUsePrepareProps, composable } from './Composable';
-export { renderSlot, withSlots } from './slots';
+export { renderSlot, withSlots } from '@fluentui-react-native/framework-base';
diff --git a/packages/deprecated/foundation-composable/src/slots.tsx b/packages/deprecated/foundation-composable/src/slots.tsx
diff --git a/packages/framework-base/src/component-patterns/renderSlot.ts b/packages/framework-base/src/component-patterns/renderSlot.ts
diff --git a/packages/framework-base/src/component-patterns/stagedComponent.ts b/packages/framework-base/src/component-patterns/stagedComponent.ts
diff --git a/packages/framework-base/src/component-patterns/withSlots.tsx b/packages/framework-base/src/component-patterns/withSlots.tsx
diff --git a/packages/framework-base/src/index.ts b/packages/framework-base/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';
diff --git a/packages/framework/composition/package.json b/packages/framework/composition/package.json
@@ -36,7 +36,6 @@
   "license": "MIT",
   "dependencies": {
     "@fluentui-react-native/framework-base": "workspace:*",
-    "@fluentui-react-native/use-slot": "workspace:*",
     "@fluentui-react-native/use-slots": "workspace:*",
     "@fluentui-react-native/use-styling": "workspace:*"
   },
diff --git a/packages/framework/composition/src/composeFactory.test.tsx b/packages/framework/composition/src/composeFactory.test.tsx
@@ -3,7 +3,7 @@
 import type { ViewProps, TextProps, ColorValue } from 'react-native';
 import { View, Text } from 'react-native';
 
-import { withSlots } from '@fluentui-react-native/use-slot';
+import { withSlots } from '@fluentui-react-native/framework-base';
 import type { ThemeHelper } from '@fluentui-react-native/use-styling';
 import * as renderer from 'react-test-renderer';
 
diff --git a/packages/framework/composition/src/composeFactory.ts b/packages/framework/composition/src/composeFactory.ts
@@ -1,7 +1,7 @@
 import type { MergeOptions } from '@fluentui-react-native/framework-base';
 import { immutableMergeCore } from '@fluentui-react-native/framework-base';
-import type { ComposableFunction } from '@fluentui-react-native/use-slot';
-import { stagedComponent } from '@fluentui-react-native/use-slot';
+import type { ComposableFunction } from '@fluentui-react-native/framework-base';
+import { stagedComponent } from '@fluentui-react-native/framework-base';
 import type { UseSlotOptions, Slots } from '@fluentui-react-native/use-slots';
 import { buildUseSlots } from '@fluentui-react-native/use-slots';
 import { buildUseStyling } from '@fluentui-react-native/use-styling';
diff --git a/packages/framework/framework/src/compressible.test.tsx b/packages/framework/framework/src/compressible.test.tsx
@@ -6,7 +6,8 @@ import { Text, View } from 'react-native';
 
 import { mergeStyles } from '@fluentui-react-native/framework-base';
 import type { Theme } from '@fluentui-react-native/theme-types';
-import { useSlot, withSlots } from '@fluentui-react-native/use-slot';
+import { useSlot } from '@fluentui-react-native/use-slot';
+import { withSlots } from '@fluentui-react-native/framework-base';
 import { applyTokenLayers } from '@fluentui-react-native/use-tokens';
 import * as renderer from 'react-test-renderer';
 
diff --git a/packages/framework/framework/src/compressible.ts b/packages/framework/framework/src/compressible.ts
@@ -1,6 +1,6 @@
 import type { Theme } from '@fluentui-react-native/theme-types';
-import type { StagedRender } from '@fluentui-react-native/use-slot';
-import { stagedComponent } from '@fluentui-react-native/use-slot';
+import type { StagedRender } from '@fluentui-react-native/framework-base';
+import { stagedComponent } from '@fluentui-react-native/framework-base';
 import type { CustomizableComponent } from '@fluentui-react-native/use-tokens';
 
 import type { TokenSettings } from './useStyling';
diff --git a/packages/framework/framework/src/index.ts b/packages/framework/framework/src/index.ts
@@ -32,8 +32,9 @@ export type {
   TokenBuilder,
 } from '@fluentui-react-native/tokens';
 
-export { renderSlot, stagedComponent, useSlot, withSlots } from '@fluentui-react-native/use-slot';
-export type { ComposableFunction, FinalRender, NativeReactType, SlotFn, StagedRender } from '@fluentui-react-native/use-slot';
+export { useSlot } from '@fluentui-react-native/use-slot';
+export { renderSlot, stagedComponent, withSlots } from '@fluentui-react-native/framework-base';
+export type { ComposableFunction, FinalRender, NativeReactType, SlotFn, StagedRender } from '@fluentui-react-native/framework-base';
 
 export { buildUseSlots } from '@fluentui-react-native/use-slots';
 export type { GetSlotProps, Slots, UseSlotOptions, UseSlotsBase } from '@fluentui-react-native/use-slots';
diff --git a/packages/framework/use-slot/src/index.ts b/packages/framework/use-slot/src/index.ts
@@ -1,6 +1,5 @@
-export { renderSlot } from './renderSlot';
-export type { NativeReactType, SlotFn } from './renderSlot';
-export { stagedComponent } from './stagedComponent';
-export type { ComposableFunction, FinalRender, StagedRender } from './stagedComponent';
 export { useSlot } from './useSlot';
-export { withSlots } from './withSlots';
+
+// re-export functions and types from framework-base that used to be here to not break existing imports
+export { renderSlot, stagedComponent, withSlots } from '@fluentui-react-native/framework-base';
+export type { ComposableFunction, FinalRender, NativeReactType, SlotFn, StagedRender } from '@fluentui-react-native/framework-base';
diff --git a/packages/framework/use-slot/src/useSlot.test.tsx b/packages/framework/use-slot/src/useSlot.test.tsx
@@ -7,10 +7,10 @@ import { Text, View } from 'react-native';
 import { mergeStyles } from '@fluentui-react-native/framework-base';
 import * as renderer from 'react-test-renderer';
 
-import type { NativeReactType } from './renderSlot';
-import { stagedComponent } from './stagedComponent';
+import type { NativeReactType } from '@fluentui-react-native/framework-base';
+import { stagedComponent } from '@fluentui-react-native/framework-base';
 import { useSlot } from './useSlot';
-import { withSlots } from './withSlots';
+import { withSlots } from '@fluentui-react-native/framework-base';
 
 type PluggableTextProps = React.PropsWithChildren<TextProps> & { inner?: NativeReactType | React.FunctionComponent<TextProps> };
 
diff --git a/packages/framework/use-slot/src/useSlot.ts b/packages/framework/use-slot/src/useSlot.ts
@@ -2,8 +2,8 @@ import * as React from 'react';
 
 import { mergeProps } from '@fluentui-react-native/framework-base';
 
-import type { SlotFn, NativeReactType } from './renderSlot';
-import type { ComposableFunction, StagedRender } from './stagedComponent';
+import type { SlotFn, NativeReactType } from '@fluentui-react-native/framework-base';
+import type { ComposableFunction, StagedRender } from '@fluentui-react-native/framework-base';
 
 /**
  *
diff --git a/packages/framework/use-slots/package.json b/packages/framework/use-slots/package.json
@@ -35,11 +35,11 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
+    "@fluentui-react-native/framework-base": "workspace:*",
     "@fluentui-react-native/use-slot": "workspace:*"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
-    "@fluentui-react-native/framework-base": "workspace:*",
     "@fluentui-react-native/scripts": "workspace:*",
     "@react-native/babel-preset": "^0.74.0",
     "@react-native/metro-config": "^0.74.0",
diff --git a/packages/framework/use-slots/src/buildUseSlots.test.tsx b/packages/framework/use-slots/src/buildUseSlots.test.tsx
@@ -3,7 +3,7 @@
 import type { ViewProps, TextProps } from 'react-native';
 import { View, Text } from 'react-native';
 
-import { withSlots, stagedComponent } from '@fluentui-react-native/use-slot';
+import { withSlots, stagedComponent } from '@fluentui-react-native/framework-base';
 import * as renderer from 'react-test-renderer';
 
 import { buildUseSlots } from './buildUseSlots';
diff --git a/packages/framework/use-slots/src/buildUseSlots.ts b/packages/framework/use-slots/src/buildUseSlots.ts
@@ -1,4 +1,4 @@
-import type { ComposableFunction, SlotFn, NativeReactType } from '@fluentui-react-native/use-slot';
+import type { ComposableFunction, SlotFn, NativeReactType } from '@fluentui-react-native/framework-base';
 import { useSlot } from '@fluentui-react-native/use-slot';
 
 // type AsObject<T> = T extends object ? T : never
diff --git a/packages/framework/use-slots/src/useSlots.samples.test.tsx b/packages/framework/use-slots/src/useSlots.samples.test.tsx
@@ -3,7 +3,7 @@
 import type { CSSProperties } from 'react';
 
 import { mergeProps } from '@fluentui-react-native/framework-base';
-import { withSlots, stagedComponent } from '@fluentui-react-native/use-slot';
+import { withSlots, stagedComponent } from '@fluentui-react-native/framework-base';
 import * as renderer from 'react-test-renderer';
 
 import { buildUseSlots } from './buildUseSlots';
diff --git a/yarn.lock b/yarn.lock
@@ -2841,7 +2841,6 @@ __metadata:
     "@babel/core": "npm:^7.20.0"
     "@fluentui-react-native/framework-base": "workspace:*"
     "@fluentui-react-native/scripts": "workspace:*"
-    "@fluentui-react-native/use-slot": "workspace:*"
     "@fluentui-react-native/use-slots": "workspace:*"
     "@fluentui-react-native/use-styling": "workspace:*"
     "@react-native/babel-preset": "npm:^0.74.0"
