[code-infra] Update package layout for ESM

.codesandbox/ci.json

@@ -16,7 +16,7 @@
     "@toolpad/studio": "packages/toolpad-studio",
     "@toolpad/studio-components": "packages/toolpad-studio-components",
     "@toolpad/studio-runtime": "packages/toolpad-studio-runtime",
-    "@toolpad/utils": "packages/toolpad-utils"
+    "@toolpad/utils": "packages/toolpad-utils/build"
   },
   "silent": true
 }

.eslintrc.js

@@ -101,9 +101,18 @@ module.exports = {
     ],
     'material-ui/no-hardcoded-labels': 'off', // We are not really translating the docs/website anymore
     'react-compiler/react-compiler': 'error',
+    'material-ui/disallow-react-api-in-server-components': 'off',
   },
   overrides: [
-    ...baseline.overrides,
+    ...baseline.overrides.map((override) => {
+      if (override.rules['material-ui/disallow-react-api-in-server-components']) {
+        return {
+          ...override,
+          files: ['packages/toolpad-core/src/*/*.?(c|m)[jt]s?(x)'],
+        };
+      }
+      return override;
+    }),
     {
       files: ['**/*.test.js', '**/*.test.ts', '**/*.test.tsx'],
       extends: ['plugin:testing-library/react'],

babel.config.js

@@ -16,7 +16,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',
       },
@@ -30,7 +30,9 @@ module.exports = function getBabelConfig(api) {
     '@babel/preset-typescript',
   ];
 
-  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 = [

docs/config.ts

@@ -0,0 +1 @@
+export * from '@mui/monorepo/docs/config';

docs/next.config.mjs → docs/next.config.ts

@@ -1,16 +1,16 @@
 // @ts-check
+import * as fs from 'fs';
 import * as path from 'path';
 import * as url from 'url';
 import { createRequire } from 'module';
-import { LANGUAGES, LANGUAGES_IGNORE_PAGES, LANGUAGES_IN_PROGRESS } from './config.js';
+import { LANGUAGES, LANGUAGES_IGNORE_PAGES, LANGUAGES_IN_PROGRESS } from './config';
 
 const currentDirectory = url.fileURLToPath(new URL('.', import.meta.url));
 
 const require = createRequire(import.meta.url);
 
 const withDocsInfra = require('@mui/monorepo/docs/nextConfigDocsInfra');
 
-const pkg = require('../package.json');
 const { findPages } = require('./src/modules/utils/find');
 
 const WORKSPACE_ROOT = path.resolve(currentDirectory, '../');
@@ -19,8 +19,13 @@ const MONOREPO_PACKAGES = {
   '@mui/docs': path.resolve(MONOREPO_PATH, './packages/mui-docs/src'),
 };
 
-const toolpadCorePkg = require('../packages/toolpad-core/package.json');
-const toolpadStudioPkg = require('../packages/toolpad-studio/package.json');
+function loadPkg(pkgPath: string): { version: string } {
+  const pkgContent = fs.readFileSync(path.resolve(WORKSPACE_ROOT, pkgPath, 'package.json'), 'utf8');
+  return JSON.parse(pkgContent);
+}
+
+const toolpadCorePkg = loadPkg('./packages/toolpad-core');
+const toolpadStudioPkg = loadPkg('./packages/toolpad-studio');
 
 export default withDocsInfra({
   transpilePackages: [
@@ -47,17 +52,6 @@ export default withDocsInfra({
   webpack: (config, options) => {
     return {
       ...config,
-      // TODO, this shouldn't be needed in the first place
-      // Migrate everything from @mui/monorepo to @mui/docs and embed @mui/internal-markdown in @mui/docs
-      resolveLoader: {
-        ...config.resolveLoader,
-        alias: {
-          ...config.resolveLoader.alias,
-          '@mui/internal-markdown/loader': require.resolve(
-            '@mui/monorepo/packages/markdown/loader',
-          ),
-        },
-      },
       resolve: {
         ...config.resolve,
         alias: {

docs/package.json

@@ -25,16 +25,16 @@
     "@emotion/server": "11.11.0",
     "@emotion/styled": "11.14.0",
     "@mui/base": "5.0.0-beta.68",
-    "@mui/docs": "6.3.1",
-    "@mui/icons-material": "6.3.1",
+    "@mui/docs": "6.4.5",
+    "@mui/icons-material": "6.4.5",
     "@mui/internal-markdown": "1.0.24",
     "@mui/joy": "5.0.0-beta.51",
     "@mui/lab": "6.0.0-beta.22",
-    "@mui/material": "6.3.1",
-    "@mui/material-nextjs": "6.3.1",
-    "@mui/styles": "6.3.1",
-    "@mui/system": "6.3.1",
-    "@mui/utils": "6.3.1",
+    "@mui/material": "6.4.5",
+    "@mui/material-nextjs": "6.4.3",
+    "@mui/styles": "6.4.5",
+    "@mui/system": "6.4.3",
+    "@mui/utils": "6.4.3",
     "@mui/x-date-pickers": "7.27.0",
     "@mui/x-date-pickers-pro": "7.27.0",
     "@mui/x-license": "7.26.0",

docs/pages/_app.js

@@ -22,7 +22,7 @@ import { DocsProvider } from '@mui/docs/DocsProvider';
 import { mapTranslations } from '@mui/docs/i18n';
 import toolpadStudioPages from '../data/toolpad/studio/pages';
 import toolpadCorePages from '../data/toolpad/core/pages';
-import config from '../config';
+import * as config from '../config';
 
 // Remove the license warning from demonstration purposes
 LicenseInfo.setLicenseKey(process.env.NEXT_PUBLIC_MUI_LICENSE);

docs/pages/toolpad/core/api/sign-in-button.json

@@ -178,6 +178,48 @@
       "isGlobal": false,
       "isDeprecated": true
     },
+    {
+      "key": "loading",
+      "className": "",
+      "description": "Styles applied to the root element if `loading={true}`.",
+      "isGlobal": false
+    },
+    {
+      "key": "loadingIconPlaceholder",
+      "className": "",
+      "description": "Styles applied to the loadingIconPlaceholder element.",
+      "isGlobal": false
+    },
+    {
+      "key": "loadingIndicator",
+      "className": "",
+      "description": "Styles applied to the loadingIndicator element.",
+      "isGlobal": false
+    },
+    {
+      "key": "loadingPositionCenter",
+      "className": "",
+      "description": "Styles applied to the root element if `loadingPosition=\"center\"`.",
+      "isGlobal": false
+    },
+    {
+      "key": "loadingPositionEnd",
+      "className": "",
+      "description": "Styles applied to the root element if `loadingPosition=\"end\"`.",
+      "isGlobal": false
+    },
+    {
+      "key": "loadingPositionStart",
+      "className": "",
+      "description": "Styles applied to the root element if `loadingPosition=\"start\"`.",
+      "isGlobal": false
+    },
+    {
+      "key": "loadingWrapper",
+      "className": "",
+      "description": "Styles applied to the loadingWrapper element.",
+      "isGlobal": false
+    },
     {
       "key": "outlined",
       "className": "",

docs/pages/toolpad/core/api/sign-in-page.json

@@ -57,7 +57,7 @@
     {
       "name": "submitButton",
       "description": "The custom submit button component used in the credentials form.",
-      "default": "LoadingButton",
+      "default": "Button",
       "class": null
     },
     {

docs/pages/toolpad/core/api/sign-out-button.json

@@ -178,6 +178,48 @@
       "isGlobal": false,
       "isDeprecated": true
     },
+    {
+      "key": "loading",
+      "className": "",
+      "description": "Styles applied to the root element if `loading={true}`.",
+      "isGlobal": false
+    },
+    {
+      "key": "loadingIconPlaceholder",
+      "className": "",
+      "description": "Styles applied to the loadingIconPlaceholder element.",
+      "isGlobal": false
+    },
+    {
+      "key": "loadingIndicator",
+      "className": "",
+      "description": "Styles applied to the loadingIndicator element.",
+      "isGlobal": false
+    },
+    {
+      "key": "loadingPositionCenter",
+      "className": "",
+      "description": "Styles applied to the root element if `loadingPosition=\"center\"`.",
+      "isGlobal": false
+    },
+    {
+      "key": "loadingPositionEnd",
+      "className": "",
+      "description": "Styles applied to the root element if `loadingPosition=\"end\"`.",
+      "isGlobal": false
+    },
+    {
+      "key": "loadingPositionStart",
+      "className": "",
+      "description": "Styles applied to the root element if `loadingPosition=\"start\"`.",
+      "isGlobal": false
+    },
+    {
+      "key": "loadingWrapper",
+      "className": "",
+      "description": "Styles applied to the loadingWrapper element.",
+      "isGlobal": false
+    },
     {
       "key": "outlined",
       "className": "",

docs/translations/api-docs/sign-in-button/sign-in-button.json

@@ -146,6 +146,38 @@
       "conditions": "supplied and <code>size=\"small\"</code>",
       "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-icon\">.MuiButton-icon</a> and <a href=\"/material-ui/api/button/#button-classes-sizeSmall\">.MuiButtonSizeSmall</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
     },
+    "loading": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>loading={true}</code>"
+    },
+    "loadingIconPlaceholder": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the loadingIconPlaceholder element"
+    },
+    "loadingIndicator": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the loadingIndicator element"
+    },
+    "loadingPositionCenter": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>loadingPosition=\"center\"</code>"
+    },
+    "loadingPositionEnd": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>loadingPosition=\"end\"</code>"
+    },
+    "loadingPositionStart": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>loadingPosition=\"start\"</code>"
+    },
+    "loadingWrapper": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the loadingWrapper element"
+    },
     "outlined": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",

docs/translations/api-docs/sign-out-button/sign-out-button.json

@@ -146,6 +146,38 @@
       "conditions": "supplied and <code>size=\"small\"</code>",
       "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-icon\">.MuiButton-icon</a> and <a href=\"/material-ui/api/button/#button-classes-sizeSmall\">.MuiButtonSizeSmall</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
     },
+    "loading": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>loading={true}</code>"
+    },
+    "loadingIconPlaceholder": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the loadingIconPlaceholder element"
+    },
+    "loadingIndicator": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the loadingIndicator element"
+    },
+    "loadingPositionCenter": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>loadingPosition=\"center\"</code>"
+    },
+    "loadingPositionEnd": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>loadingPosition=\"end\"</code>"
+    },
+    "loadingPositionStart": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>loadingPosition=\"start\"</code>"
+    },
+    "loadingWrapper": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the loadingWrapper element"
+    },
     "outlined": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",

eslint/config-airbnb-typescript.js

@@ -0,0 +1 @@
+module.exports = require('@mui/monorepo/eslint/config-airbnb-typescript');

package.json

@@ -56,7 +56,7 @@
     "@mui/internal-docs-utils": "1.0.16",
     "@mui/internal-markdown": "1.0.24",
     "@mui/internal-scripts": "1.0.32",
-    "@mui/monorepo": "github:mui/material-ui#dd69cf07e7aace1efad91e5b8e733c7efcf6c02c",
+    "@mui/monorepo": "github:mui/material-ui#f273fa539871f6ed744bc60ff9fad0c6230b5c1f",
     "@mui/x-charts": "7.27.0",
     "@next/eslint-plugin-next": "14.2.24",
     "@playwright/test": "1.47.2",
@@ -69,8 +69,8 @@
     "@types/invariant": "2.2.37",
     "@types/node": "^20.17.19",
     "@types/yargs": "17.0.33",
-    "@typescript-eslint/eslint-plugin": "7.18.0",
-    "@typescript-eslint/parser": "7.18.0",
+    "@typescript-eslint/eslint-plugin": "^8.24.0",
+    "@typescript-eslint/parser": "^8.24.0",
     "@vitest/coverage-v8": "2.1.9",
     "babel-plugin-react-remove-properties": "0.3.0",
     "babel-plugin-transform-react-remove-prop-types": "0.4.24",
@@ -80,7 +80,7 @@
     "danger": "^12.3.3",
     "eslint": "8.57.1",
     "eslint-config-airbnb": "19.0.4",
-    "eslint-config-airbnb-typescript": "18.0.0",
+    "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-import-resolver-webpack": "0.13.10",
     "eslint-plugin-filenames": "1.3.2",