Convert framework-base and framework/* packages to modules

packages/framework-base/package.json

@@ -10,27 +10,27 @@
     "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",
       "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",
       "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,21 +10,21 @@
     "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",
       "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';

packages/framework/framework/package.json

@@ -9,21 +9,21 @@
     "url": "https://github.com/microsoft/fluentui-react-native.git",
     "directory": "packages/framework/framework"
   },
-  "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",
       "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/framework/src/compose.ts

@@ -3,7 +3,7 @@ import { composeFactory } from '@fluentui-react-native/composition';
 import type { Theme } from '@fluentui-react-native/theme-types';
 import type { ObjectBase } from '@fluentui-react-native/framework-base';
 
-import { themeHelper } from './themeHelper';
+import { themeHelper } from './themeHelper.ts';
 
 /**
  * This is an object used purely for configuring the typings on composable.  It is not necessary to define

packages/framework/framework/src/compressible.test.tsx

@@ -10,9 +10,9 @@ import { useSlot } from '@fluentui-react-native/use-slot';
 import { applyTokenLayers } from '@fluentui-react-native/use-tokens';
 import * as renderer from 'react-test-renderer';
 
-import { compressible } from './compressible';
-import { buildUseTokens } from './useTokens';
-import type { UseTokens } from './useTokens';
+import { compressible } from './compressible.ts';
+import { buildUseTokens } from './useTokens.ts';
+import type { UseTokens } from './useTokens.ts';
 
 type Variant = 'normal' | 'header' | 'caption';
 interface VariantTextTokens {

packages/framework/framework/src/compressible.ts

@@ -3,8 +3,8 @@ 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';
-import type { UseTokens } from './useTokens';
+import type { TokenSettings } from './useStyling.ts';
+import type { UseTokens } from './useTokens.ts';
 
 /**
  * Utility function which can create function components that can be tree compressed (using the stagedRender pattern),

packages/framework/framework/src/index.ts

@@ -81,7 +81,7 @@ export type {
   Variants,
 } from '@fluentui-react-native/theme-types';
 
-export { compose } from './compose';
+export { compose } from './compose.ts';
 export type {
   ComposableComponent,
   ComposeOptions,
@@ -91,11 +91,11 @@ export type {
   ExtractStatics,
   ExtractTokens,
   UseSlots,
-} from './compose';
-export { compressible } from './compressible';
-export { useFluentTheme } from './useFluentTheme';
-export type { HasLayer, TokensThatAreAlsoProps, UseStyling } from './useStyling';
-export { buildProps, buildUseStyling } from './useStyling';
-export type { BuildProps, TokenSettings, TokensFromTheme, UseStylingOptions } from './useStyling';
-export { applyPropsToTokens, applyTokenLayers, buildUseTokens, customizable, patchTokens } from './useTokens';
-export type { UseTokens, CustomizableComponent } from './useTokens';
+} from './compose.ts';
+export { compressible } from './compressible.ts';
+export { useFluentTheme } from './useFluentTheme.ts';
+export type { HasLayer, TokensThatAreAlsoProps, UseStyling } from './useStyling.ts';
+export { buildProps, buildUseStyling } from './useStyling.ts';
+export type { BuildProps, TokenSettings, TokensFromTheme, UseStylingOptions } from './useStyling.ts';
+export { applyPropsToTokens, applyTokenLayers, buildUseTokens, customizable, patchTokens } from './useTokens.ts';
+export type { UseTokens, CustomizableComponent } from './useTokens.ts';

packages/framework/framework/src/themeHelper.ts

@@ -1,7 +1,7 @@
 import type { Theme } from '@fluentui-react-native/theme-types';
 import type { ThemeHelper } from '@fluentui-react-native/use-styling';
 
-import { useFluentTheme } from './useFluentTheme';
+import { useFluentTheme } from './useFluentTheme.ts';
 
 export const themeHelper: ThemeHelper<Theme> = {
   useTheme: () => useFluentTheme(),

packages/framework/framework/src/useStyling.ts

@@ -13,7 +13,7 @@ import type {
 } from '@fluentui-react-native/use-styling';
 import { buildUseStyling as buildUseStylingBase, buildProps as buildPropsBase } from '@fluentui-react-native/use-styling';
 
-import { themeHelper } from './themeHelper';
+import { themeHelper } from './themeHelper.ts';
 
 export type BuildProps<TProps, TTokens> = BuildPropsBase<TProps, TTokens, Theme>;