microsoft · Hotell · Feb 21, 2024 · Feb 21, 2024 · Feb 26, 2024 · Feb 26, 2024
@@ -83,12 +83,28 @@ module.exports = /** @type {Omit<StorybookConfig,'typescript'|'babel'>} */ ({
       },
     }),
   ],
+  managerWebpack: (/** @type {import('webpack').Configuration}*/ config) => {
+    config.resolve ??= {};
+    config.resolve.extensionAlias = {
+      '.js': ['.js', '.ts'],
+      '.mjs': ['.mjs', '.mts'],
+    };
+    return config;
+  },
   webpackFinal: config => {
+    config.resolve ??= {};
+    config.resolve.extensionAlias = {
+      '.js': ['.js', '.ts'],
+      '.mjs': ['.mjs', '.mts'],
+    };
     registerTsPaths({ config, configFile: tsConfigPath });
 
     if ((process.env.CI || process.env.TF_BUILD || process.env.LAGE_PACKAGE_NAME) && config.plugins) {
       // Disable ProgressPlugin in PR/CI builds to reduce log verbosity (warnings and errors are still logged)
-      config.plugins = config.plugins.filter(({ constructor }) => constructor.name !== 'ProgressPlugin');
+      config.plugins =
+        /** @type {Array<((this: import('webpack').Compiler, compiler: import('webpack').Compiler) => void)>} */ (
+          config.plugins
+        ).filter(({ constructor }) => constructor.name !== 'ProgressPlugin');
     }
 
     return config;

@@ -0,0 +1,12 @@
+{
+  "name": "@fluentui/esm-integration-test",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "bundle": "webpack",
+    "start": "webpack-dev-server"
+  },
+  "devDependencies": {
+    "@fluentui/react-theme": "*"
+  }
+}
@@ -0,0 +1,6 @@
+{
+  "name": "@fluentui/esm-integration-test",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
+  "implicitDependencies": []
+}
@@ -0,0 +1,43 @@
+import { tokens, webLightTheme } from '@fluentui/react-theme';
+import { makeStyles, shorthands } from '@griffel/react';
+
+const vars = Object.entries(tokens)
+  .map(([key, value]) => {
+    return `${value.replace('var(', '').replace(')', '')}: ${webLightTheme[key as keyof typeof webLightTheme]};`;
+  })
+  .join('\n');
+
+const style = makeStyles({
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    width: '80%',
+    height: '80%',
+    overflowY: 'scroll',
+    ...shorthands.margin('auto'),
+  },
+  item: {
+    ...shorthands.padding('10px'),
+  },
+});
+
+export const App = () => {
+  const classes = style();
+  return (
+    <main>
+      <style>{`:root {
+        ${vars}
+      }`}</style>
+      <h1>Hello</h1>
+      <section className={classes.root}>
+        {Object.entries(tokens).map(([key, value]) => {
+          return (
+            <div className={classes.item} style={{ backgroundColor: value }}>
+              {key}
+            </div>
+          );
+        })}
+      </section>
+    </main>
+  );
+};
@@ -0,0 +1,11 @@
+import { render } from 'react-dom';
+import { createElement } from 'react';
+import { App } from './app';
+
+main();
+
+function main() {
+  const root = document.getElementById('root');
+
+  render(createElement(App), root);
+}
@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "moduleResolution": "Node",
+    "pretty": true,
+    "module": "ESNext",
+    "target": "ES2020",
+    "noEmit": true,
+    "lib": ["ES2020", "dom"],
+    "outDir": "dist",
+    "isolatedModules": true,
+    "skipLibCheck": true,
+    "jsx": "react-jsx",
+    "strict": true
+  },
+  "include": ["src"]
+}
@@ -0,0 +1,71 @@
+// @ts-check
+
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+/**
+ *
+ * @type {import("webpack").RuleSetRule}
+ */
+const griffelRule = {
+  test: /\.tsx?$/,
+  exclude: [/node_modules/],
+  enforce: 'post',
+  use: [
+    {
+      loader: '@griffel/webpack-loader',
+    },
+  ],
+};
+
+/**
+ *
+ * @type {import("webpack").RuleSetRule}
+ */
+const swcRule = {
+  test: /\.tsx?$/,
+  exclude: /node_modules/,
+  use: {
+    loader: 'swc-loader',
+    options: {
+      jsc: {
+        target: 'es2019',
+        parser: {
+          syntax: 'typescript',
+          tsx: true,
+          decorators: true,
+          dynamicImport: true,
+        },
+        transform: {
+          decoratorMetadata: true,
+          legacyDecorator: true,
+          react: {
+            runtime: 'automatic',
+          },
+        },
+        keepClassNames: true,
+        externalHelpers: true,
+        loose: true,
+      },
+    },
+  },
+};
+
+module.exports = /** @type {import('webpack').Configuration} */ ({
+  mode: 'development',
+  entry: './src/main.ts',
+  output: {
+    filename: 'bundle.js',
+    path: __dirname + '/dist',
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js'],
+  },
+  module: {
+    rules: [griffelRule, swcRule],
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      templateContent: '<div id="root"></div>',
+    }),
+  ],
+});
@@ -12,7 +12,7 @@ const tsConfigPath = path.resolve(__dirname, '../../tsconfig.base.json');
 // TODO: Should root cause why this only works as a serve config.
 const config = /** @type {import('webpack').Configuration}*/ ({
   mode: 'production',
-  target: ['web', 'es5'],
+  target: ['web' /* , 'es5' */],
   entry: './src/app.tsx',
   output: {
     filename: 'perf-test.js',
@@ -21,6 +21,10 @@ const config = /** @type {import('webpack').Configuration}*/ ({
   },
   resolve: {
     extensions: ['.ts', '.tsx', '.js'],
+    extensionAlias: {
+      '.js': ['.js', '.ts'],
+      '.mjs': ['.mjs', '.mts'],
+    },
   },
   devtool: 'eval',
   module: {

@@ -43,7 +43,20 @@ module.exports = /** @type {import('../../../.storybook/main').StorybookBaseConf
     // disable react-docgen-typescript (totally not needed here, slows things down a lot)
     reactDocgen: false,
   },
+  managerWebpack: (/** @type {import('webpack').Configuration}*/ config) => {
+    config.resolve ??= {};
+    config.resolve.extensionAlias = {
+      '.js': ['.js', '.ts'],
+      '.mjs': ['.mjs', '.mts'],
+    };
+    return config;
+  },
   webpackFinal: config => {
+    config.resolve ??= {};
+    config.resolve.extensionAlias = {
+      '.js': ['.js', '.ts'],
+      '.mjs': ['.mjs', '.mts'],
+    };
     registerTsPaths({ config, configFile: tsConfigPath });
     registerRules({ config, rules: [rules.griffelRule] });
 

@@ -42,7 +42,20 @@ module.exports = /** @type {import('../../../.storybook/main').StorybookBaseConf
     // disable react-docgen-typescript (totally not needed here, slows things down a lot)
     reactDocgen: false,
   },
+  managerWebpack: (/** @type {import('webpack').Configuration}*/ config) => {
+    config.resolve ??= {};
+    config.resolve.extensionAlias = {
+      '.js': ['.js', '.ts'],
+      '.mjs': ['.mjs', '.mts'],
+    };
+    return config;
+  },
   webpackFinal: config => {
+    config.resolve ??= {};
+    config.resolve.extensionAlias = {
+      '.js': ['.js', '.ts'],
+      '.mjs': ['.mjs', '.mts'],
+    };
     registerTsPaths({ config, configFile: tsConfigPath });
     registerRules({ config, rules: [rules.scssRule] });
 

diff --git a/change/@fluentui-react-dialog-70565202-f312-4e39-aa2c-b77b74347a77.json b/change/@fluentui-react-dialog-70565202-f312-4e39-aa2c-b77b74347a77.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: add esm integration test",
+  "packageName": "@fluentui/react-dialog",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}
diff --git a/change/@fluentui-react-jsx-runtime-b2d7b92c-54f8-4e81-8efa-40a555466fb5.json b/change/@fluentui-react-jsx-runtime-b2d7b92c-54f8-4e81-8efa-40a555466fb5.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: add esm integration test",
+  "packageName": "@fluentui/react-jsx-runtime",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}
diff --git a/change/@fluentui-react-tree-72dc0e26-ccfa-401b-abc5-dc7b6c38b0f2.json b/change/@fluentui-react-tree-72dc0e26-ccfa-401b-abc5-dc7b6c38b0f2.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: add esm integration test",
+  "packageName": "@fluentui/react-tree",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}
diff --git a/change/@fluentui-react-utilities-ba34d141-88bc-41f4-9a18-9b8b61772282.json b/change/@fluentui-react-utilities-ba34d141-88bc-41f4-9a18-9b8b61772282.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: add esm integration test",
+  "packageName": "@fluentui/react-utilities",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}
diff --git a/change/@fluentui-tokens-7507bf1e-16de-4efa-87d1-c90f87e3ce4d.json b/change/@fluentui-tokens-7507bf1e-16de-4efa-87d1-c90f87e3ce4d.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "feat: make module native ESM",
+  "packageName": "@fluentui/tokens",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
@@ -34,7 +34,7 @@
     "generate-version-files": "node -r ./scripts/ts-node/register ./scripts/generators/generate-version-files",
     "lint": "lage lint --verbose",
     "lint:log": "FORCE_COLOR=0 yarn lint > lint.log 2>&1",
-    "postinstall": "node ./scripts/package-manager/postinstall.js",
+    "postinstall": "node ./scripts/package-manager/postinstall.js && patch-package",
     "preinstall": "node ./scripts/package-manager/use-yarn-please.js",
     "publish:beachball": "beachball publish -b origin/master --access public -y",
     "rebuild": "node ./scripts/executors/invalidate-just-cache.js && yarn build --reset-cache",
@@ -56,6 +56,7 @@
     "@actions/core": "1.9.1",
     "@actions/github": "5.0.3",
     "@babel/core": "7.23.7",
+    "@babel/cli": "7.23.9",
     "@babel/generator": "7.23.6",
     "@babel/parser": "7.23.6",
     "@babel/plugin-proposal-class-properties": "7.18.6",
@@ -119,9 +120,10 @@
     "@storybook/manager-webpack5": "6.5.15",
     "@storybook/react": "6.5.15",
     "@storybook/theming": "6.5.15",
-    "@swc/cli": "0.1.62",
-    "@swc/core": "1.3.87",
+    "@swc/cli": "0.3.9",
+    "@swc/core": "1.4.2",
     "@swc/helpers": "0.5.1",
+    "@swc/plugin-transform-imports": "1.5.119",
     "@testing-library/dom": "8.11.3",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "12.1.2",
@@ -277,6 +279,7 @@
     "p-queue": "6.6.2",
     "parallel-webpack": "2.6.0",
     "parse-diff": "0.7.1",
+    "patch-package": "8.0.0",
     "path-browserify": "1.0.1",
     "plop": "2.6.0",
     "portfinder": "1.0.28",
@@ -321,10 +324,10 @@
     "strip-ansi": "6.0.0",
     "style-loader": "2.0.0",
     "swc-loader": "0.2.3",
-    "swc-plugin-de-indent-template-literal": "1.0.0",
+    "swc-plugin-de-indent-template-literal": "1.4.0",
     "syncpack": "10.6.1",
     "tachometer": "0.7.0",
-    "terser": "5.27.2",
+    "terser": "5.28.1",
     "terser-webpack-plugin": "5.3.10",
     "through2": "4.0.2",
     "tmp": "0.2.1",
@@ -337,7 +340,7 @@
     "typescript": "4.7.4",
     "vinyl": "2.2.0",
     "vrscreenshotdiff": "0.0.17",
-    "webpack": "5.83.1",
+    "webpack": "5.90.3",
     "webpack-bundle-analyzer": "4.4.2",
     "webpack-cli": "4.10.0",
     "webpack-dev-middleware": "4.2.0",

@@ -23,6 +23,14 @@
         "useSpread": true
       }
     },
+    "experimental": {
+      "plugins": [
+        [
+          "@swc/plugin-transform-imports",
+          { "^(.*?)(\\.js)?$": { "skipDefaultConversion": true, "transform": "{{matches.[1]}}.mjs" } }
+        ]
+      ]
+    },
     "target": "es2019"
   },
   "minify": false,

@@ -6,13 +6,14 @@
   "module": "lib/index.js",
   "typings": "./dist/index.d.ts",
   "sideEffects": false,
+  "type": "commonjs",
   "repository": {
     "type": "git",
     "url": "https://github.com/microsoft/fluentui"
   },
   "license": "MIT",
   "scripts": {
-    "build": "just-scripts build",
+    "build": "just-scripts build && node ./scripts/transform-to-esm.mjs",
     "clean": "just-scripts clean",
     "code-style": "just-scripts code-style",
     "just": "just-scripts",
@@ -41,7 +42,7 @@
     ".": {
       "types": "./dist/index.d.ts",
       "node": "./lib-commonjs/index.js",
-      "import": "./lib/index.js",
+      "import": "./lib/index.mjs",
       "require": "./lib-commonjs/index.js"
     },
     "./package.json": "./package.json"