[code-infra] Update package layout for better ESM support

.circleci/config.yml

@@ -41,6 +41,7 @@ default-job: &default-job
     REACT_VERSION: << parameters.react-version >>
     TEST_GATE: << parameters.test-gate >>
     AWS_REGION_ARTIFACTS: eu-central-1
+    MUI_USE_PACKAGE_EXPORTS: 'true'
     COREPACK_ENABLE_DOWNLOAD_PROMPT: '0'
   working_directory: /tmp/material-ui
   docker:

.github/workflows/ci.yml

@@ -13,6 +13,9 @@ on:
 
 permissions: {}
 
+env:
+  MUI_USE_PACKAGE_EXPORTS: 'true'
+
 jobs:
   # Tests dev-only scripts across all supported dev environments
   test-dev:

babel.config.js

@@ -52,7 +52,7 @@ module.exports = function getBabelConfig(api) {
       '@babel/preset-env',
       {
         bugfixes: true,
-        browserslistEnv: process.env.BABEL_ENV || process.env.NODE_ENV,
+        browserslistEnv: api.env() || process.env.NODE_ENV,
         debug: process.env.MUI_BUILD_VERBOSE === 'true',
         modules: useESModules ? false : 'commonjs',
         shippedProposals: api.env('modern'),
@@ -67,14 +67,9 @@ module.exports = function getBabelConfig(api) {
     '@babel/preset-typescript',
   ];
 
-  const usesAliases =
-    // in this config:
-    api.env(['coverage', 'development', 'test', 'benchmark']) ||
-    process.env.NODE_ENV === 'test' ||
-    // in webpack config:
-    api.env(['regressions']);
-
-  const outFileExtension = '.js';
+  // Essentially only replace in production builds.
+  // When aliasing we want to keep the original extension
+  const outFileExtension = process.env.MUI_OUT_FILE_EXTENSION || null;
 
   /** @type {babel.PluginItem[]} */
   const plugins = [
@@ -119,9 +114,7 @@ module.exports = function getBabelConfig(api) {
           [
             '@mui/internal-babel-plugin-resolve-imports',
             {
-              // Don't replace the extension when we're using aliases.
-              // Essentially only replace in production builds.
-              outExtension: usesAliases ? null : outFileExtension,
+              outExtension: outFileExtension,
             },
           ],
         ]

package.json

@@ -11,7 +11,7 @@
     "build:ci": "lerna run build --ignore docs --concurrency 8 --skip-nx-cache",
     "build:public": "lerna run --no-private build",
     "build:public:ci": "lerna run --no-private build --concurrency 8 --skip-nx-cache",
-    "build:codesandbox": "NODE_OPTIONS=\"--max_old_space_size=4096\" lerna run --concurrency 8 --scope \"@mui/*\" --scope \"@mui-internal/*\" --no-private build",
+    "build:codesandbox": "MUI_USE_PACKAGE_EXPORTS=true NODE_OPTIONS=\"--max_old_space_size=4096\" lerna run --concurrency 8 --scope \"@mui/*\" --scope \"@mui-internal/*\" --no-private build",
     "release:version": "lerna version --no-changelog --no-push --no-git-tag-version --no-private --force-publish=@mui/core-downloads-tracker",
     "release:build": "lerna run --concurrency 8 --no-private build --skip-nx-cache",
     "release:changelog": "node scripts/releaseChangelog.mjs",
@@ -96,7 +96,8 @@
     "nx_test_karma": "cross-env NODE_ENV=test karma start test/karma.conf.js",
     "nx_test_regressions_run": "mocha --config test/regressions/.mocharc.js --delay 'test/regressions/**/*.test.js'",
     "nx_test_regressions_pigment_css_run": "mocha --config apps/pigment-css-vite-app/.mocharc.cjs --delay 'apps/pigment-css-vite-app/**/*.test.js'",
-    "nx_test_unit": "cross-env NODE_ENV=test mocha 'packages/**/*.test.{js,ts,tsx}' 'packages-internal/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}'"
+    "nx_test_unit": "cross-env NODE_ENV=test mocha 'packages/**/*.test.{js,ts,tsx}' 'packages-internal/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}'",
+    "clean": "pnpm -r exec rm -rf build"
   },
   "dependencies": {
     "@googleapis/sheets": "^9.3.1",
@@ -127,6 +128,9 @@
     "@next/eslint-plugin-next": "^14.2.13",
     "@octokit/rest": "^21.0.2",
     "@pigment-css/react": "0.0.23",
+    "@rollup/plugin-alias": "^5.1.0",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-node-resolve": "^15.2.3",
     "@playwright/test": "1.47.2",
     "@types/babel__core": "^7.20.5",
     "@types/fs-extra": "^11.0.4",
@@ -188,6 +192,8 @@
     "pretty-quick": "^4.0.0",
     "process": "^0.11.10",
     "rimraf": "^6.0.1",
+    "rollup": "^4.20.0",
+    "rollup-plugin-preserve-directives": "^0.4.0",
     "serve": "^14.2.3",
     "stylelint": "^15.11.0",
     "stylelint-config-standard": "^34.0.0",

packages/mui-icons-material/package.json

@@ -29,12 +29,12 @@
   },
   "scripts": {
     "build": "shx cp -r lib/ build/ && pnpm build:typings && pnpm build:copy-files",
-    "build:lib": "pnpm build:node && pnpm build:stable",
+    "build:lib": "cross-env MUI_USE_PACKAGE_EXPORTS=false pnpm build:node && cross-env MUI_USE_PACKAGE_EXPORTS=false pnpm build:stable",
     "build:lib:clean": "rimraf lib/ && pnpm build:lib",
     "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": "cross-env MUI_USE_PACKAGE_EXPORTS=false node ../../scripts/copyFiles.mjs",
     "build:typings": "node ./scripts/create-typings.mjs",
     "prebuild": "rimraf build",
     "release": "pnpm build && pnpm publish",

packages/mui-material-nextjs/src/v13-pagesRouter/nextDocument.cjs

@@ -0,0 +1 @@
+module.exports = require('next/document');

packages/mui-material-nextjs/src/v13-pagesRouter/pagesRouterV13Document.tsx

@@ -2,10 +2,13 @@ import * as React from 'react';
 import { AppType } from 'next/app';
 import { EmotionCache } from '@emotion/react';
 import createEmotionServer from '@emotion/server/create-instance';
-import Document, { DocumentContext, DocumentInitialProps } from 'next/document';
+import type { DocumentContext, DocumentInitialProps } from 'next/document';
+import nextDocument from './nextDocument.cjs';
 import { EmotionCacheProviderProps } from './pagesRouterV13App';
 import createEmotionCache from './createCache';
 
+const Document = nextDocument.default || nextDocument;
+
 interface Plugin {
   enhanceApp: (
     App: React.ComponentType<React.ComponentProps<AppType>>,

packages/mui-material-nextjs/tsconfig.build.json

@@ -10,6 +10,6 @@
     "outDir": "build",
     "rootDir": "./src"
   },
-  "include": ["./src/**/*.ts*"],
-  "exclude": ["src/**/*.spec.ts*", "src/**/*.test.ts*"]
+  "include": ["./src/**/*"],
+  "exclude": ["src/**/*.spec.*", "src/**/*.test.*"]
 }

packages/mui-material-pigment-css/package.json

@@ -61,6 +61,10 @@
       "useTheme": "@pigment-css/react/exports/useTheme"
     }
   },
+  "exports": {
+    "./styles.css": "./styles.css",
+    "./modern/styles.css": "./styles.css"
+  },
   "engines": {
     "node": ">=14.0.0"
   }

packages/mui-material/package.json

@@ -104,6 +104,14 @@
   "engines": {
     "node": ">=14.0.0"
   },
+  "exports": {
+    "./ButtonBase/TouchRipple": {
+      "types": "./ButtonBase/TouchRipple.d.ts",
+      "import": "./ButtonBase/TouchRipple.mjs",
+      "mui-modern": "./ButtonBase/TouchRipple.modern.mjs",
+      "require": "./ButtonBase/TouchRipple.js"
+    }
+  },
   "pigment-css": {
     "vite": {
       "include": [

packages/mui-material/src/PigmentGrid/PigmentGrid.tsx

@@ -8,10 +8,10 @@ import Grid from '@mui/material-pigment-css/Grid';
 import composeClasses from '@mui/utils/composeClasses';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import {
-  generateDirectionClasses,
-  generateSizeClassNames,
-  generateSpacingClassNames,
-} from '@mui/system/Grid/gridGenerator';
+  unstable_generateDirectionClasses as generateDirectionClasses,
+  unstable_generateSizeClassNames as generateSizeClassNames,
+  unstable_generateSpacingClassNames as generateSpacingClassNames,
+} from '@mui/system/Grid';
 import { Breakpoint, Theme } from '../styles';
 
 type ResponsiveStyleValue<T> = T | Array<T | null> | { [key in Breakpoint]?: T | null };

packages/mui-system/src/Grid/index.ts

@@ -4,3 +4,8 @@ export * from './GridProps';
 export { default as gridClasses } from './gridClasses';
 export * from './gridClasses';
 export { traverseBreakpoints as unstable_traverseBreakpoints } from './traverseBreakpoints';
+export {
+  generateDirectionClasses as unstable_generateDirectionClasses,
+  generateSizeClassNames as unstable_generateSizeClassNames,
+  generateSpacingClassNames as unstable_generateSpacingClassNames,
+} from './gridGenerator';