[core] Add exports field to packages

apps/pigment-css-vite-app/src/Slider/ZeroSlider.tsx

@@ -10,7 +10,7 @@ import {
 import { isHostComponent, useSlotProps } from '@mui/base/utils';
 import { styled } from '@pigment-css/react';
 import { capitalize } from '@mui/material/utils';
-import SliderValueLabel from '@mui/material/Slider/SliderValueLabel';
+import { SliderValueLabel } from '@mui/material/Slider';
 import { useSlider, valueToPercent } from '@mui/base/useSlider';
 import { alpha, lighten, darken } from '@mui/system/colorManipulator';
 import type { Theme } from '@mui/material/styles';

babel.config.js

@@ -103,6 +103,10 @@ module.exports = function getBabelConfig(api) {
     ]);
   }
 
+  if (process.env.MUI_ADD_IMPORT_EXTENSIONS === 'true') {
+    plugins.push(['babel-plugin-add-import-extension', { extension: useESModules ? 'mjs' : 'js' }]);
+  }
+
   return {
     assumptions: {
       noDocumentAll: true,

docs/data/material/customization/typography/ResponsiveFontSizesChart.js

@@ -1,9 +1,9 @@
 import * as React from 'react';
-// import of a small, pure module in a private demo
-// bundle size and module duplication is negligible
-/* eslint-disable-next-line no-restricted-imports */
-import { convertLength } from '@mui/material/styles/cssUtils';
-import { createTheme, responsiveFontSizes } from '@mui/material/styles';
+import {
+  createTheme,
+  responsiveFontSizes,
+  unstable_convertLength as convertLength,
+} from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import { LineChart } from '@mui/x-charts';
 

package.json

@@ -84,8 +84,9 @@
   },
   "dependencies": {
     "@googleapis/sheets": "^5.0.5",
-    "@slack/bolt": "^3.17.1",
     "@netlify/functions": "^2.6.0",
+    "@slack/bolt": "^3.17.1",
+    "babel-plugin-add-import-extension": "^1.6.0",
     "execa": "^8.0.1",
     "google-auth-library": "^9.7.0"
   },
@@ -106,17 +107,17 @@
     "@babel/preset-typescript": "^7.23.3",
     "@babel/register": "^7.23.7",
     "@mnajdova/enzyme-adapter-react-18": "^0.2.0",
-    "@mui/internal-docs-utils": "workspace:^",
-    "@mui/internal-scripts": "workspace:^",
     "@mui-internal/api-docs-builder": "workspace:^",
     "@mui-internal/api-docs-builder-core": "workspace:^",
     "@mui-internal/test-utils": "workspace:^",
+    "@mui/internal-docs-utils": "workspace:^",
+    "@mui/internal-scripts": "workspace:^",
     "@mui/joy": "workspace:*",
     "@mui/material": "workspace:^",
     "@mui/utils": "workspace:^",
-    "@pigment-css/react": "workspace:^",
     "@next/eslint-plugin-next": "^14.1.3",
     "@octokit/rest": "^20.0.2",
+    "@pigment-css/react": "workspace:^",
     "@playwright/test": "1.42.1",
     "@types/enzyme": "^3.10.18",
     "@types/fs-extra": "^11.0.4",

packages/mui-core-downloads-tracker/package.json

@@ -21,7 +21,7 @@
   },
   "scripts": {
     "build": "mkdir build && pnpm build:copy-files",
-    "build:copy-files": "node ../../scripts/copyFiles.mjs",
+    "build:copy-files": "node ../../scripts/copyFiles.mjs --skipExportsField",
     "prebuild": "rimraf build",
     "release": "pnpm build && pnpm publish"
   },

packages/mui-icons-material/package.json

@@ -35,7 +35,7 @@
     "build:modern": "echo 'Skip modern build'",
     "build:node": "node ../../scripts/build.mjs node --largeFiles --outDir lib",
     "build:stable": "node ../../scripts/build.mjs stable --largeFiles --outDir lib",
-    "build:copy-files": "node ../../scripts/copyFiles.mjs",
+    "build:copy-files": "node ../../scripts/copyFiles.mjs --skipExportsField",
     "build:typings": "node ./scripts/create-typings.mjs",
     "prebuild": "rimraf build",
     "release": "pnpm build && pnpm publish",

packages/mui-material/src/styles/index.d.ts

@@ -82,7 +82,11 @@ export { ComponentsProps, ComponentsPropsList } from './props';
 export { ComponentsVariants } from './variants';
 export { ComponentsOverrides, ComponentNameToClassKey } from './overrides';
 export { Components } from './components';
-export { getUnit as unstable_getUnit, toUnitless as unstable_toUnitless } from './cssUtils';
+export {
+  getUnit as unstable_getUnit,
+  toUnitless as unstable_toUnitless,
+  convertLength as unstable_convertLength,
+} from './cssUtils';
 
 export type ClassNameMap<ClassKey extends string = string> = Record<ClassKey, string>;
 
@@ -97,7 +101,11 @@ export { default as makeStyles } from './makeStyles';
 export { default as withStyles } from './withStyles';
 export { default as withTheme } from './withTheme';
 
-export * from './CssVarsProvider';
+export {
+  useColorScheme,
+  getInitColorSchemeScript,
+  Experimental_CssVarsProvider,
+} from './CssVarsProvider';
 
 export { default as experimental_extendTheme } from './experimental_extendTheme';
 export type {

packages/mui-material/src/styles/index.js

@@ -29,7 +29,11 @@ export function experimental_sx() {
 export { default as createTheme, createMuiTheme } from './createTheme';
 export { default as unstable_createMuiStrictModeTheme } from './createMuiStrictModeTheme';
 export { default as createStyles } from './createStyles';
-export { getUnit as unstable_getUnit, toUnitless as unstable_toUnitless } from './cssUtils';
+export {
+  getUnit as unstable_getUnit,
+  toUnitless as unstable_toUnitless,
+  convertLength as unstable_convertLength,
+} from './cssUtils';
 export { default as responsiveFontSizes } from './responsiveFontSizes';
 export { duration, easing } from './createTransitions';
 export { default as useTheme } from './useTheme';
@@ -44,7 +48,11 @@ export { default as makeStyles } from './makeStyles';
 export { default as withStyles } from './withStyles';
 export { default as withTheme } from './withTheme';
 
-export * from './CssVarsProvider';
+export {
+  useColorScheme,
+  getInitColorSchemeScript,
+  Experimental_CssVarsProvider,
+} from './CssVarsProvider';
 export { default as experimental_extendTheme } from './experimental_extendTheme';
 export { default as getOverlayAlpha } from './getOverlayAlpha';
 export { default as shouldSkipGeneratingVar } from './shouldSkipGeneratingVar';

packages/mui-types/package.json

@@ -27,7 +27,7 @@
   "homepage": "https://github.com/mui/material-ui/tree/master/packages/mui-types",
   "scripts": {
     "build": "mkdir build && cpy index.d.ts build/ && cpy OverridableComponentAugmentation.ts build/ && pnpm build:copy-files",
-    "build:copy-files": "node ../../scripts/copyFiles.mjs",
+    "build:copy-files": "node ../../scripts/copyFiles.mjs --skipExportsField",
     "prebuild": "rimraf build",
     "release": "pnpm build && pnpm publish",
     "test": "echo 'No runtime test. Type tests are run with the `typescript` script.'",

scripts/build.mjs

@@ -31,6 +31,7 @@ async function run(argv) {
     NODE_ENV: 'production',
     BABEL_ENV: bundle,
     MUI_BUILD_VERBOSE: verbose,
+    MUI_ADD_IMPORT_EXTENSIONS: true,
   };
   const babelConfigPath = path.resolve(getWorkspaceRoot(), 'babel.config.js');
   const srcDir = path.resolve('./src');
@@ -69,6 +70,8 @@ async function run(argv) {
     }[bundle],
   );
 
+  const outExtension = bundle === 'node' ? '.js' : '.mjs';
+
   const babelArgs = [
     '--config-file',
     babelConfigPath,
@@ -77,6 +80,8 @@ async function run(argv) {
     srcDir,
     '--out-dir',
     outDir,
+    '--out-file-extension',
+    outExtension,
     '--ignore',
     // Need to put these patterns in quotes otherwise they might be evaluated by the used terminal.
     `"${ignore.join('","')}"`,

scripts/copyFiles.mjs

@@ -1,5 +1,6 @@
 /* eslint-disable no-console */
 import path from 'path';
+import yargs from 'yargs';
 import {
   createModulePackages,
   createPackageFile,
@@ -23,9 +24,9 @@ async function addLicense(packageData) {
 `;
   await Promise.all(
     [
-      './index.js',
-      './legacy/index.js',
-      './modern/index.js',
+      './index.mjs',
+      './legacy/index.mjs',
+      './modern/index.mjs',
       './node/index.js',
       './umd/material-ui.development.js',
       './umd/material-ui.production.min.js',
@@ -43,13 +44,14 @@ async function addLicense(packageData) {
   );
 }
 
-async function run() {
-  const extraFiles = process.argv.slice(2);
+async function run(argv) {
+  const { extraFiles, skipExportsField } = argv;
+
   try {
     // TypeScript
     await typescriptCopy({ from: srcPath, to: buildPath });
 
-    const packageData = await createPackageFile();
+    const packageData = await createPackageFile(skipExportsField);
 
     await Promise.all(
       ['./README.md', '../../CHANGELOG.md', '../../LICENSE', ...extraFiles].map(async (file) => {
@@ -67,4 +69,26 @@ async function run() {
   }
 }
 
-run();
+yargs(process.argv.slice(2))
+  .command({
+    command: '$0 [extraFiles..]',
+    description: 'copy files',
+    builder: (command) => {
+      return command
+        .positional('extraFiles', {
+          type: 'array',
+          default: [],
+        })
+        .option('skipExportsField', {
+          type: 'boolean',
+          default: false,
+          describe:
+            'Set to `true` if you wish to skip adding the exports field. Adding the exports field is only supported for top level ESM packages.',
+        });
+    },
+    handler: run,
+  })
+  .help()
+  .strict(true)
+  .version(false)
+  .parse();

scripts/copyFilesUtils.mjs

@@ -45,8 +45,8 @@ export async function createModulePackages({ from, to }) {
       const packageJson = {
         sideEffects: false,
         module: topLevelPathImportsAreCommonJSModules
-          ? path.posix.join('../esm', directoryPackage, 'index.js')
-          : './index.js',
+          ? path.posix.join('../esm', directoryPackage, 'index.mjs')
+          : './index.mjs',
         main: topLevelPathImportsAreCommonJSModules
           ? './index.js'
           : path.posix.join('../node', directoryPackage, 'index.js'),
@@ -91,7 +91,12 @@ export async function typescriptCopy({ from, to }) {
   return Promise.all(cmds);
 }
 
-export async function createPackageFile() {
+/**
+ * Creates a package.json in the build directory.
+ * @param {boolean} skipExportsField Whether to skip the exports field in the package.json. Only top level ESM packages are supported.
+ * @returns {Promise<object>}
+ */
+export async function createPackageFile(skipExportsField = false) {
   const packageData = await fse.readFile(path.resolve(packagePath, './package.json'), 'utf8');
   const { nyc, scripts, devDependencies, workspaces, ...packageDataOther } =
     JSON.parse(packageData);
@@ -104,9 +109,9 @@ export async function createPackageFile() {
           main: fse.existsSync(path.resolve(buildPath, './node/index.js'))
             ? './node/index.js'
             : './index.js',
-          module: fse.existsSync(path.resolve(buildPath, './esm/index.js'))
-            ? './esm/index.js'
-            : './index.js',
+          module: fse.existsSync(path.resolve(buildPath, './esm/index.mjs'))
+            ? './esm/index.mjs'
+            : './index.mjs',
         }
       : {}),
   };
@@ -116,6 +121,38 @@ export async function createPackageFile() {
     newPackageData.types = './index.d.ts';
   }
 
+  if (!skipExportsField) {
+    newPackageData.exports = {};
+
+    const hasIndexMjs = fse.existsSync(path.resolve(buildPath, './index.mjs'));
+    if (hasIndexMjs) {
+      // Asumes the types file and node build are set up correctly
+      newPackageData.exports['.'] = {
+        types: './index.d.ts',
+        import: './index.mjs',
+        default: './node/index.js',
+      };
+    }
+
+    const hasNestedIndexFiles = glob.sync('*/index.mjs', { cwd: buildPath }).length > 0;
+    if (hasNestedIndexFiles) {
+      // Asumes the types files and node build are set up correctly
+      newPackageData.exports['./*'] = {
+        types: './*/index.d.ts',
+        import: './*/index.mjs',
+        default: './node/*/index.js',
+      };
+    }
+
+    if (!hasIndexMjs && !hasNestedIndexFiles) {
+      // Ensure that the packages we expect to have an exports field are set up correctly
+      // It avoids, for example, a top level non index file breaking the configuration
+      throw new Error(
+        'Attempted to add exports field but no index.mjs files found. Adding the exports field is only supported for top level ESM packages, please check your build setup. If you want to skip adding the exports field, pass `--skipExportsField` to the script.',
+      );
+    }
+  }
+
   const targetPath = path.resolve(buildPath, './package.json');
 
   await fse.writeFile(targetPath, JSON.stringify(newPackageData, null, 2), 'utf8');