[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

@@ -49,5 +49,10 @@
     "@types/react": {
       "optional": true
     }
+  },
+  "exports": {
+    ".": {
+      "types": "./index.d.ts"
+    }
   }
 }

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,35 @@ export async function createPackageFile() {
     newPackageData.types = './index.d.ts';
   }
 
+  if (!skipExportsField) {
+    const addedExports = {};
+
+    const hasIndexMjs = fse.existsSync(path.resolve(buildPath, './index.mjs'));
+    if (hasIndexMjs) {
+      // Asumes the types file and node build are set up correctly
+      addedExports['.'] = {
+        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
+      addedExports['./*'] = {
+        types: './*/index.d.ts',
+        import: './*/index.mjs',
+        default: './node/*/index.js',
+      };
+    }
+
+    newPackageData.exports = {
+      ...packageDataOther.exports,
+      ...addedExports,
+    };
+  }
+
   const targetPath = path.resolve(buildPath, './package.json');
 
   await fse.writeFile(targetPath, JSON.stringify(newPackageData, null, 2), 'utf8');