[code-infra] Move MuiError babel macro to babel plugin

.circleci/config.yml

@@ -42,6 +42,7 @@ default-job: &default-job
     TEST_GATE: << parameters.test-gate >>
     AWS_REGION_ARTIFACTS: eu-central-1
     COREPACK_ENABLE_DOWNLOAD_PROMPT: '0'
+    DANGER_DISABLE_TRANSPILATION: 'true'
   working_directory: /tmp/material-ui
   docker:
     - image: cimg/node:20.17

.codesandbox/ci.json

@@ -4,7 +4,6 @@
   "node": "20",
   "packages": [
     "packages/markdown",
-    "packages/mui-babel-macros",
     "packages/mui-base",
     "packages/mui-codemod",
     "packages/mui-core-downloads-tracker",
@@ -33,7 +32,6 @@
     "@mui/docs": "packages/mui-docs/build",
     "@mui/icons-material": "packages/mui-icons-material/build",
     "@mui/internal-test-utils": "packages-internal/test-utils",
-    "@mui/internal-babel-macros": "packages/mui-babel-macros",
     "@mui/internal-docs-utils": "packages-internal/docs-utils",
     "@mui/internal-markdown": "packages/markdown",
     "@mui/internal-scripts": "packages-internal/scripts",

babel.config.js

@@ -78,15 +78,6 @@ module.exports = function getBabelConfig(api) {
 
   /** @type {babel.PluginItem[]} */
   const plugins = [
-    [
-      'babel-plugin-macros',
-      {
-        muiError: {
-          errorCodesPath,
-          missingError,
-        },
-      },
-    ],
     'babel-plugin-optimize-clsx',
     [
       '@babel/plugin-transform-runtime',
@@ -114,6 +105,13 @@ module.exports = function getBabelConfig(api) {
         ],
       },
     ],
+    [
+      '@mui/internal-babel-plugin-minify-errors',
+      {
+        missingError,
+        errorCodesPath,
+      },
+    ],
     ...(useESModules
       ? [
           [

dangerfile.ts → dangerFileContent.ts

@@ -1,9 +1,11 @@
-// danger has to be the first thing required!
-import { danger, markdown } from 'danger';
 import { exec } from 'child_process';
+import type * as dangerModule from 'danger';
 import { loadComparison } from './scripts/sizeSnapshot';
 import replaceUrl from './packages/api-docs-builder/utils/replaceUrl';
 
+declare const danger: (typeof dangerModule)['danger'];
+declare const markdown: (typeof dangerModule)['markdown'];
+
 const circleCIBuildNumber = process.env.CIRCLE_BUILD_NUM;
 const circleCIBuildUrl = `https://app.circleci.com/pipelines/github/mui/material-ui/jobs/${circleCIBuildNumber}`;
 const dangerCommand = process.env.DANGER_COMMAND;

dangerfile.js

@@ -0,0 +1,7 @@
+// danger uses babelify under the hood. The implementation is buggy and fails on our
+// custom plugins in our codebase. We'll just disable it and do our own compilation.
+// Danger must always be run with envirnonent variable `DANGER_DISABLE_TRANSPILATION="true"`.
+require('@babel/register')({
+  extensions: ['.js', '.ts', '.tsx'],
+});
+require('./dangerFileContent');

docs/public/static/error-codes.json

@@ -19,5 +19,6 @@
   "18": "MUI: The provided shorthand %s is invalid. The format should be `@<breakpoint | number>` or `@<breakpoint | number>/<container>`.\nFor example, `@sm` or `@600` or `@40rem/sidebar`.",
   "19": "MUI: The `experimental_sx` has been moved to `theme.unstable_sx`.For more details, see https://github.com/mui/material-ui/pull/35150.",
   "20": "MUI: `vars` is a private field used for CSS variables support.\nPlease use another name.",
-  "21": "MUI: The `colorSchemes.%s` option is either missing or invalid."
+  "21": "Invalid %s `%s` supplied to `%s`. Expected an HTMLElement.",
+  "22": "MUI: The `colorSchemes.%s` option is either missing or invalid."
 }

package.json

@@ -37,7 +37,7 @@
     "docs:typescript:formatted": "tsx ./docs/scripts/formattedTSDemos",
     "docs:mdicons:synonyms": "cross-env BABEL_ENV=development babel-node --extensions \".tsx,.ts,.js,.mjs\" ./docs/scripts/updateIconSynonyms && pnpm prettier",
     "docs:zipRules": "cd docs && rm mui-vale.zip && zip -r mui-vale.zip mui-vale && cd ../ && vale sync",
-    "extract-error-codes": "cross-env MUI_EXTRACT_ERROR_CODES=true lerna run --concurrency 8 build:modern",
+    "extract-error-codes": "cross-env MUI_EXTRACT_ERROR_CODES=true lerna run --concurrency 1 build:modern",
     "rsc:build": "tsx ./packages/rsc-builder/buildRsc.ts",
     "template:screenshot": "cross-env BABEL_ENV=development babel-node --extensions \".tsx,.ts,.js\" ./docs/scripts/generateTemplateScreenshots",
     "template:update-theme": "cross-env BABEL_ENV=development babel-node --extensions \".tsx,.ts,.js\" ./docs/scripts/updateTemplatesTheme",
@@ -139,7 +139,6 @@
     "@typescript-eslint/parser": "^7.18.0",
     "babel-loader": "^9.2.1",
     "babel-plugin-istanbul": "^7.0.0",
-    "babel-plugin-macros": "^3.1.0",
     "babel-plugin-module-resolver": "^5.0.2",
     "babel-plugin-optimize-clsx": "^2.6.2",
     "babel-plugin-react-remove-properties": "^0.3.0",

packages-internal/babel-plugin-minify-errors/__fixtures__/error-code-extraction/input.js

@@ -0,0 +1,2 @@
+throw /* minify-error */ new Error('exists');
+throw /* minify-error */ new Error('will be created');

packages/mui-babel-macros/__fixtures__/error-code-extraction/output.js → packages-internal/babel-plugin-minify-errors/__fixtures__/error-code-extraction/output.js

@@ -1,5 +1,5 @@
 import _formatMuiErrorMessage from '@mui/utils/formatMuiErrorMessage';
-throw new Error(process.env.NODE_ENV !== 'production' ? `exists` : _formatMuiErrorMessage(1));
+throw new Error(process.env.NODE_ENV !== 'production' ? 'exists' : _formatMuiErrorMessage(1));
 throw new Error(
-  process.env.NODE_ENV !== 'production' ? `will be created` : _formatMuiErrorMessage(2),
+  process.env.NODE_ENV !== 'production' ? 'will be created' : _formatMuiErrorMessage(2),
 );

packages-internal/babel-plugin-minify-errors/__fixtures__/interpolation/error-codes.json

@@ -0,0 +1,3 @@
+{
+  "1": "MUI: %s, %s"
+}

packages-internal/babel-plugin-minify-errors/__fixtures__/interpolation/input.js

@@ -0,0 +1,5 @@
+const foo = 'foo';
+const bar = 'bar';
+throw /* minify-error */ new Error(`MUI: ${foo}, ${bar}`);
+throw /* minify-error */ new Error(`MUI: ${foo}` + `, ${bar}`);
+throw /* minify-error */ new Error('MUI: ' + `${foo}, ${bar}`);

packages-internal/babel-plugin-minify-errors/__fixtures__/interpolation/output.js

@@ -0,0 +1,18 @@
+import _formatMuiErrorMessage from '@mui/utils/formatMuiErrorMessage';
+const foo = 'foo';
+const bar = 'bar';
+throw new Error(
+  process.env.NODE_ENV !== 'production'
+    ? `MUI: ${foo}, ${bar}`
+    : _formatMuiErrorMessage(1, foo, bar),
+);
+throw new Error(
+  process.env.NODE_ENV !== 'production'
+    ? `MUI: ${foo}` + `, ${bar}`
+    : _formatMuiErrorMessage(1, foo, bar),
+);
+throw new Error(
+  process.env.NODE_ENV !== 'production'
+    ? 'MUI: ' + `${foo}, ${bar}`
+    : _formatMuiErrorMessage(1, foo, bar),
+);

packages-internal/babel-plugin-minify-errors/__fixtures__/literal/input.js

@@ -0,0 +1,6 @@
+throw /* minify-error */ new Error(
+  'MUI: Expected valid input target.\n' + 'Did you use `inputComponent`',
+);
+throw /* minify-error */ new Error(
+  `MUI: Expected valid input target.\n` + `Did you use \`inputComponent\``,
+);

packages-internal/babel-plugin-minify-errors/__fixtures__/literal/output.js

@@ -0,0 +1,11 @@
+import _formatMuiErrorMessage from '@mui/utils/formatMuiErrorMessage';
+throw new Error(
+  process.env.NODE_ENV !== 'production'
+    ? 'MUI: Expected valid input target.\n' + 'Did you use `inputComponent`'
+    : _formatMuiErrorMessage(1),
+);
+throw new Error(
+  process.env.NODE_ENV !== 'production'
+    ? `MUI: Expected valid input target.\n` + `Did you use \`inputComponent\``
+    : _formatMuiErrorMessage(1),
+);

packages-internal/babel-plugin-minify-errors/__fixtures__/no-error-code-annotation/input.js

@@ -0,0 +1,3 @@
+throw /* minify-error */ new Error(
+  'MUI: Expected valid input target.\n' + 'Did you use inputComponent',
+);

packages-internal/babel-plugin-minify-errors/__fixtures__/no-error-code-annotation/output.js

@@ -0,0 +1,3 @@
+throw /* FIXME (minify-errors-in-prod): Unminified error message in production build! */ new Error(
+  'MUI: Expected valid input target.\n' + 'Did you use inputComponent',
+);

packages-internal/babel-plugin-minify-errors/__fixtures__/no-error-code-throw/input.js

@@ -0,0 +1 @@
+throw /* minify-error */ new Error('missing');

packages-internal/babel-plugin-minify-errors/__fixtures__/unminifyable-annotation/input.js

@@ -0,0 +1,4 @@
+const foo = 'foo';
+const bar = ['bar'];
+throw /* minify-error */ new Error(foo);
+throw /* minify-error */ new Error(...bar);

packages-internal/babel-plugin-minify-errors/__fixtures__/unminifyable-annotation/output.js

@@ -0,0 +1,4 @@
+const foo = 'foo';
+const bar = ['bar'];
+throw /* FIXME (minify-errors-in-prod): Unminifyable error in production! */ new Error(foo);
+throw /* FIXME (minify-errors-in-prod): Unminifyable error in production! */ new Error(...bar);

packages-internal/babel-plugin-minify-errors/__fixtures__/unminifyable-throw/error-codes.json

@@ -0,0 +1 @@
+{}

packages-internal/babel-plugin-minify-errors/__fixtures__/unminifyable-throw/input.js

@@ -0,0 +1,4 @@
+const foo = 'foo';
+const bar = ['bar'];
+throw /* minify-error */ new Error(foo);
+throw /* minify-error */ new Error(...bar);