Convert framework-base and framework/* packages to modules

.changeset/config.json

@@ -9,5 +9,8 @@
   "privatePackages": {
     "tag": false,
     "version": false
+  },
+  "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
+    "onlyUpdatePeerDependentsWhenOutOfRange": true
   }
 }

.changeset/easy-bags-argue.md

@@ -0,0 +1,14 @@
+---
+"@fluentui-react-native/themed-stylesheet": minor
+"@fluentui-react-native/composition": minor
+"@fluentui-react-native/use-styling": minor
+"@fluentui-react-native/use-tokens": minor
+"@fluentui-react-native/framework": minor
+"@fluentui-react-native/use-slots": minor
+"@fluentui-react-native/use-slot": minor
+"@fluentui-react-native/theme": minor
+"@fluentui-react-native/framework-base": minor
+"@fluentui-react-native/dependency-profiles": minor
+---
+
+Switch packages to type module

apps/fluent-tester/macos/Podfile.lock

@@ -3,10 +3,10 @@ PODS:
   - DoubleConversion (1.1.6)
   - FBLazyVector (0.74.37)
   - fmt (9.1.0)
-  - FRNAvatar (0.21.19):
+  - FRNAvatar (0.22.3):
     - MicrosoftFluentUI (= 0.13.1)
     - React
-  - FRNCallout (0.27.17):
+  - FRNCallout (0.28.3):
     - DoubleConversion
     - glog
     - RCT-Folly (= 2024.01.01.00)
@@ -28,13 +28,13 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
-  - FRNCheckbox (0.17.24):
+  - FRNCheckbox (0.18.3):
     - React
-  - FRNMenuButton (0.13.37):
+  - FRNMenuButton (0.14.3):
     - React
-  - FRNRadioButton (0.21.31):
+  - FRNRadioButton (0.22.3):
     - React
-  - FRNVibrancyView (0.3.5):
+  - FRNVibrancyView (0.4.3):
     - React
   - glog (0.3.5)
   - MicrosoftFluentUI (0.13.1):
@@ -123,7 +123,7 @@ PODS:
     - fmt (= 9.1.0)
     - glog
   - RCTDeprecation (0.74.37)
-  - RCTFocusZone (0.21.15):
+  - RCTFocusZone (0.22.3):
     - React
   - RCTRequired (0.74.37)
   - RCTTypeSafety (0.74.37):
@@ -1461,17 +1461,17 @@ SPEC CHECKSUMS:
   DoubleConversion: 5b92c4507c560bb62e7aa1acdf2785ea3ff08b3b
   FBLazyVector: 5f17e32a39da9146ff32e90cff4e9ebd8b5c3b54
   fmt: 03574da4b7ba40de39da59677ca66610ce8c4a02
-  FRNAvatar: 52551ea22dbc7be5ecd21abf2baa8b2e3035fc34
-  FRNCallout: cc743e926cdb77dfbfb6af71dd955badb32fcd1a
-  FRNCheckbox: d19d484a1cfdeba6d3f4aacd6084c2ca4c48f92e
-  FRNMenuButton: c8aef02c683585a9e5a5f5cf34f70e9cf63c0b79
-  FRNRadioButton: a40075f901604d571e1ef57c6d062327430aefe2
-  FRNVibrancyView: be46aaf2b9fe6ec914ea9c55a3ff7fa7e0e7537d
+  FRNAvatar: ffa0facb219806b0e5083d2388bc61e590f5df19
+  FRNCallout: 3ad7415d175db51479a46ccf41509850db61cc2f
+  FRNCheckbox: 1cba85c9c8c75257970f8ffcc4a5e2602c22be7c
+  FRNMenuButton: 709f3218ce9a421c154ea0570acbeb3f535629d3
+  FRNRadioButton: a0e58ac8a7be290778a30add5bdf41dc245e3483
+  FRNVibrancyView: 96debdb9a1d2d9315c25748450a33fe2cb8b6321
   glog: ba31c1afa7dcf1915a109861bccdb4421be6175b
   MicrosoftFluentUI: dde98d8ed3fc306d9ddd0a6f0bc0c1f24fe5275e
   RCT-Folly: f47da9a444aae485a0528b3bccf0336156009d60
   RCTDeprecation: 88f29fc8fbe38e5bff2e65223eac24450ade59ab
-  RCTFocusZone: 07730c51b3fc190dba495b849c9b4d9b1919268c
+  RCTFocusZone: 1b8ab01688bbb8ef6357bd8789e5c6f38ddac4d9
   RCTRequired: 2736889bc024f33cd9157e06e092ee59848e7f45
   RCTTypeSafety: c6f4b53a571b819ef18b3d8c5fa7f57d588102c6
   React: 9ddfaba3bb7d30eb3c23b043443543b3b9db8b04

packages/dependency-profiles/src/index.js

@@ -106,10 +106,6 @@ module.exports = {
       "name": "@fluentui-react-native/text",
       "version": "0.25.3"
     },
-    "@fluentui-react-native/lint-config-rules": {
-      "name": "@fluentui-react-native/lint-config-rules",
-      "version": "0.1.3"
-    },
     "@uifabricshared/foundation-composable": {
       "name": "@uifabricshared/foundation-composable",
       "version": "0.14.3"

packages/framework-base/jsx-runtime.js

@@ -1 +1 @@
-module.exports = require('./lib-commonjs/jsx-runtime.js');
+module.exports = require('./lib/jsx-runtime.js');

packages/framework-base/package.json

@@ -10,29 +10,29 @@
     "url": "https://github.com/microsoft/fluentui-react-native",
     "directory": "packages/framework-base"
   },
-  "main": "lib-commonjs/index.js",
-  "module": "lib/index.js",
+  "type": "module",
+  "main": "./lib/index.js",
+  "module": "./lib/index.js",
   "types": "lib/index.d.ts",
   "exports": {
     ".": {
       "types": "./lib/index.d.ts",
       "react-native": "./src/index.ts",
       "import": "./lib/index.js",
-      "require": "./lib-commonjs/index.js",
+      "require": "./lib/index.js",
       "default": "./src/index.ts"
     },
     "./jsx-runtime": {
       "types": "./lib/jsx-runtime.d.ts",
       "react-native": "./src/jsx-runtime.ts",
       "import": "./lib/jsx-runtime.js",
-      "require": "./lib-commonjs/jsx-runtime.js",
+      "require": "./lib/jsx-runtime.js",
       "default": "./src/jsx-runtime.ts"
     }
   },
   "scripts": {
-    "build": "fluentui-scripts build",
-    "build-cjs": "tsgo --outDir lib-commonjs",
-    "build-core": "tsgo --outDir lib --module esnext --moduleResolution bundler",
+    "build": "tsgo",
+    "build-core": "tsgo",
     "clean": "fluentui-scripts clean",
     "depcheck": "fluentui-scripts depcheck",
     "format": "fluentui-scripts format",

packages/framework-base/src/component-patterns/directComponent.ts

@@ -1,4 +1,4 @@
-import type { FunctionComponent } from './render.types';
+import type { FunctionComponent } from './render.types.ts';
 
 /**
  * @param component functional component, usually a closure, to make into a direct component

packages/framework-base/src/component-patterns/phasedComponent.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import type { ComposableFunction, PhasedComponent, PhasedRender, FunctionComponent } from './render.types';
-import { renderForJsxRuntime } from './render';
-import type { LegacyDirectComponent } from './render.types';
+import type { ComposableFunction, PhasedComponent, PhasedRender, FunctionComponent } from './render.types.ts';
+import { renderForJsxRuntime } from './render.ts';
+import type { LegacyDirectComponent } from './render.types.ts';
 
 /**
  * Extract the phased render function from a component, if it has one.

packages/framework-base/src/component-patterns/render.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import * as ReactJSX from 'react/jsx-runtime';
-import type { RenderType, RenderResult, DirectComponent, LegacyDirectComponent } from './render.types';
+import type { RenderType, RenderResult, DirectComponent, LegacyDirectComponent } from './render.types.ts';
 
 export type CustomRender = () => RenderResult;
 

packages/framework-base/src/component-patterns/render.types.ts

@@ -1,6 +1,6 @@
 import type React from 'react';
 //import type ReactJSX from 'react/jsx-runtime';
-import type { FurnJSX } from '../jsx-namespace';
+import type { FurnJSX } from '../jsx-namespace.ts';
 
 /**
  * Base types for rendering components in a react application, extracted from react types

packages/framework-base/src/component-patterns/stagedComponent.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import type { StagedRender, ComposableFunction } from './render.types';
+import type { StagedRender, ComposableFunction } from './render.types.ts';
 
 function asArray<T>(val: T | T[]): T[] {
   return Array.isArray(val) ? val : [val];

packages/framework-base/src/component-patterns/withSlots.tsx

@@ -1,5 +1,5 @@
 import type React from 'react';
-import { renderForClassicRuntime } from './render';
+import { renderForClassicRuntime } from './render.ts';
 
 /**
  * This function is required for any module that uses slots.

packages/framework-base/src/immutable-merge/Merge.test.ts

@@ -1,5 +1,5 @@
-import type { MergeOptions } from './Merge';
-import { immutableMerge, immutableMergeCore, processImmutable } from './Merge';
+import type { MergeOptions } from './Merge.ts';
+import { immutableMerge, immutableMergeCore, processImmutable } from './Merge.ts';
 
 interface IFakeStyle {
   s1?: string;

packages/framework-base/src/index.ts

@@ -1,29 +1,29 @@
 // immutable-merge exports
-export { immutableMerge, immutableMergeCore, processImmutable, filterToObjects } from './immutable-merge/Merge';
+export { immutableMerge, immutableMergeCore, processImmutable, filterToObjects } from './immutable-merge/Merge.ts';
 export type {
   BuiltinRecursionHandlers,
   CustomRecursionHandler,
   MergeOptions,
   ObjectBase,
   RecursionHandler,
   RecursionOption,
-} from './immutable-merge/Merge';
+} from './immutable-merge/Merge.ts';
 
 // memo-cache exports
-export type { GetMemoValue, GetTypedMemoValue } from './memo-cache/getMemoCache';
-export { getMemoCache, getTypedMemoCache } from './memo-cache/getMemoCache';
-export { memoize } from './memo-cache/memoize';
+export type { GetMemoValue, GetTypedMemoValue } from './memo-cache/getMemoCache.ts';
+export { getMemoCache, getTypedMemoCache } from './memo-cache/getMemoCache.ts';
+export { memoize } from './memo-cache/memoize.ts';
 
 // merge-props exports
-export type { StyleProp } from './merge-props/mergeStyles.types';
-export { mergeStyles } from './merge-props/mergeStyles';
-export { mergeProps } from './merge-props/mergeProps';
+export type { StyleProp } from './merge-props/mergeStyles.types.ts';
+export { mergeStyles } from './merge-props/mergeStyles.ts';
+export { mergeProps } from './merge-props/mergeProps.ts';
 
 // component pattern exports - extracting from elements
-export { extractChildren, extractProps, extractStyle } from './component-patterns/extract';
+export { extractChildren, extractProps, extractStyle } from './component-patterns/extract.ts';
 
 // component pattern exports - rendering utilities
-export { renderForJsxRuntime, renderSlot, asDirectComponent } from './component-patterns/render';
+export { renderForJsxRuntime, renderSlot, asDirectComponent } from './component-patterns/render.ts';
 
 // component pattern exports - core types
 export type {
@@ -41,20 +41,20 @@ export type {
   FinalRender,
   SlotFn,
   NativeReactType,
-} from './component-patterns/render.types';
+} from './component-patterns/render.types.ts';
 
 // component pattern exports - component builders
-export { directComponent } from './component-patterns/directComponent';
-export { getPhasedRender, phasedComponent } from './component-patterns/phasedComponent';
-export { stagedComponent } from './component-patterns/stagedComponent';
+export { directComponent } from './component-patterns/directComponent.ts';
+export { getPhasedRender, phasedComponent } from './component-patterns/phasedComponent.ts';
+export { stagedComponent } from './component-patterns/stagedComponent.ts';
 
 // component pattern exports - legacy JSX handlers
-export { withSlots } from './component-patterns/withSlots';
+export { withSlots } from './component-patterns/withSlots.tsx';
 
 // jsx runtime exports
-export { jsx, jsxs } from './jsx-runtime';
-export type { FurnJSX } from './jsx-namespace';
+export { jsx, jsxs } from './jsx-runtime.ts';
+export type { FurnJSX } from './jsx-namespace.ts';
 
 // general utilities
-export { filterProps } from './utilities/filterProps';
-export type { PropsFilter } from './utilities/filterProps';
+export { filterProps } from './utilities/filterProps.ts';
+export type { PropsFilter } from './utilities/filterProps.ts';

packages/framework-base/src/jsx-runtime.ts

@@ -1,7 +1,7 @@
 import type React from 'react';
 import * as ReactJSX from 'react/jsx-runtime';
-import { renderForJsxRuntime } from './component-patterns/render';
-export type { FurnJSX as JSX } from './jsx-namespace';
+import { renderForJsxRuntime } from './component-patterns/render.ts';
+export type { FurnJSX as JSX } from './jsx-namespace.ts';
 
 export const jsx: typeof ReactJSX.jsx = (type, props, key?: React.Key) => {
   return renderForJsxRuntime(type, props, key, ReactJSX.jsx);

packages/framework-base/src/memo-cache/getCacheEntry.test.ts

@@ -1,5 +1,5 @@
-import type { CacheEntry } from './getCacheEntry';
-import { getCacheEntry } from './getCacheEntry';
+import type { CacheEntry } from './getCacheEntry.ts';
+import { getCacheEntry } from './getCacheEntry.ts';
 
 interface TestObj {
   id: number;

packages/framework-base/src/memo-cache/getMemoCache.test.ts

@@ -1,4 +1,4 @@
-import { getMemoCache, getTypedMemoCache } from './getMemoCache';
+import { getMemoCache, getTypedMemoCache } from './getMemoCache.ts';
 
 interface TestObj {
   id: number;

packages/framework-base/src/memo-cache/getMemoCache.ts

@@ -1,5 +1,5 @@
-import type { CacheEntry } from './getCacheEntry';
-import { getCacheEntry } from './getCacheEntry';
+import type { CacheEntry } from './getCacheEntry.ts';
+import { getCacheEntry } from './getCacheEntry.ts';
 
 export type ValueFactory<T> = () => T;
 

packages/framework-base/src/memo-cache/memoize.test.ts

@@ -1,4 +1,4 @@
-import { memoize } from './memoize';
+import { memoize } from './memoize.ts';
 
 let _globalCalls = 0;
 

packages/framework-base/src/memo-cache/memoize.ts

@@ -1,4 +1,4 @@
-import { getMemoCache } from './getMemoCache';
+import { getMemoCache } from './getMemoCache.ts';
 
 /**
  * This wraps a function to memoize the results using the standard javascript memoization pattern

packages/framework-base/src/merge-props/index.ts

@@ -1,3 +1,3 @@
-export type { StyleProp } from './mergeStyles.types';
-export { mergeStyles } from './mergeStyles';
-export { mergeProps } from './mergeProps';
+export type { StyleProp } from './mergeStyles.types.ts';
+export { mergeStyles } from './mergeStyles.ts';
+export { mergeProps } from './mergeProps.ts';

packages/framework-base/src/merge-props/mergeProps.ts

@@ -1,7 +1,7 @@
-import type { MergeOptions } from '../immutable-merge/Merge';
-import { immutableMergeCore, filterToObjects } from '../immutable-merge/Merge';
+import type { MergeOptions } from '../immutable-merge/Merge.ts';
+import { immutableMergeCore, filterToObjects } from '../immutable-merge/Merge.ts';
 
-import { mergeStyles } from './mergeStyles';
+import { mergeStyles } from './mergeStyles.ts';
 
 /**
  * Props will not deeply merge with the exception of a style property.  Also className needs to be handled specially.

packages/framework-base/src/merge-props/mergeStyles.test.ts

@@ -1,5 +1,5 @@
-import { flattenStyle, mergeAndFlattenStyles, mergeStyles } from './mergeStyles';
-import type { StyleProp } from './mergeStyles.types';
+import { flattenStyle, mergeAndFlattenStyles, mergeStyles } from './mergeStyles.ts';
+import type { StyleProp } from './mergeStyles.types.ts';
 
 type OpaqueColorValue = symbol & { __TYPE__: 'Color' };
 type ColorValue = string | OpaqueColorValue;

packages/framework-base/src/merge-props/mergeStyles.ts

@@ -1,7 +1,7 @@
-import { immutableMerge } from '../immutable-merge/Merge';
-import { getMemoCache } from '../memo-cache/getMemoCache';
+import { immutableMerge } from '../immutable-merge/Merge.ts';
+import { getMemoCache } from '../memo-cache/getMemoCache.ts';
 
-import type { StyleProp } from './mergeStyles.types';
+import type { StyleProp } from './mergeStyles.types.ts';
 
 /**
  * Take a react-native style, which may be a recursive array, and return as a flattened

packages/framework-base/src/utilities/filterProps.ts

@@ -1,4 +1,4 @@
-import { mergeProps } from '../merge-props/mergeProps';
+import { mergeProps } from '../merge-props/mergeProps.ts';
 
 export type PropsFilter = (propName: string) => boolean;
 

packages/framework/composition/package.json

@@ -10,22 +10,22 @@
     "url": "https://github.com/microsoft/fluentui-react-native",
     "directory": "packages/framework/composition"
   },
-  "main": "lib-commonjs/index.js",
-  "module": "lib/index.js",
+  "type": "module",
+  "main": "./lib/index.js",
+  "module": "./lib/index.js",
   "types": "lib/index.d.ts",
   "exports": {
     ".": {
       "types": "./lib/index.d.ts",
       "react-native": "./src/index.ts",
       "import": "./lib/index.js",
-      "require": "./lib-commonjs/index.js",
+      "require": "./lib/index.js",
       "default": "./src/index.ts"
     }
   },
   "scripts": {
-    "build": "fluentui-scripts build",
-    "build-cjs": "tsgo --outDir lib-commonjs",
-    "build-core": "tsgo --outDir lib --module esnext --moduleResolution bundler",
+    "build": "tsgo",
+    "build-core": "tsgo",
     "clean": "fluentui-scripts clean",
     "depcheck": "fluentui-scripts depcheck",
     "format": "fluentui-scripts format",

packages/framework/composition/src/composeFactory.test.tsx

@@ -6,8 +6,8 @@ import { View, Text } from 'react-native';
 import type { ThemeHelper } from '@fluentui-react-native/use-styling';
 import * as renderer from 'react-test-renderer';
 
-import type { UseStyledSlots } from './composeFactory';
-import { composeFactory } from './composeFactory';
+import type { UseStyledSlots } from './composeFactory.ts';
+import { composeFactory } from './composeFactory.ts';
 
 type Theme = {
   values: {

packages/framework/composition/src/index.ts

@@ -1,2 +1,2 @@
-export { composeFactory } from './composeFactory';
-export type { ComposeFactoryComponent, ComposeFactoryOptions, UseStyledSlots } from './composeFactory';
+export { composeFactory } from './composeFactory.ts';
+export type { ComposeFactoryComponent, ComposeFactoryOptions, UseStyledSlots } from './composeFactory.ts';