[code-infra] Prepare babel macros package for publishing to npm (#41178)

Author: michaldudak

.codesandbox/ci.json

@@ -3,6 +3,8 @@
   "installCommand": "install:codesandbox",
   "node": "18",
   "packages": [
+    "packages/docs-utils",
+    "packages/mui-babel-macros",
     "packages/mui-base",
     "packages/mui-codemod",
     "packages/mui-core-downloads-tracker",
@@ -19,28 +21,28 @@
     "packages/mui-system",
     "packages/mui-types",
     "packages/mui-utils",
-    "packages/docs-utils",
     "packages-internal/scripts"
   ],
   "publishDirectory": {
     "@mui/base": "packages/mui-base/build",
     "@mui/codemod": "packages/mui-codemod/build",
     "@mui/core-downloads-tracker": "packages/mui-core-downloads-tracker/build",
     "@mui/icons-material": "packages/mui-icons-material/build",
+    "@mui/internal-babel-macros": "packages/mui-babel-macros",
+    "@mui/internal-scripts": "packages-internal/scripts",
     "@mui/joy": "packages/mui-joy/build",
     "@mui/lab": "packages/mui-lab/build",
     "@mui/material-next": "packages/mui-material-next/build",
     "@mui/material-nextjs": "packages/mui-material-nextjs/build",
     "@mui/material": "packages/mui-material/build",
     "@mui/private-theming": "packages/mui-private-theming/build",
-    "@mui/styled-engine-sc": "packages/mui-styled-engine-sc/build",
     "@mui/styled-engine": "packages/mui-styled-engine/build",
+    "@mui/styled-engine-sc": "packages/mui-styled-engine-sc/build",
     "@mui/styles": "packages/mui-styles/build",
     "@mui/system": "packages/mui-system/build",
     "@mui/types": "packages/mui-types/build",
     "@mui/utils": "packages/mui-utils/build",
-    "@mui-internal/docs-utils": "packages/docs-utils",
-    "@mui/internal-scripts": "packages-internal/scripts"
+    "@mui-internal/docs-utils": "packages/docs-utils"
   },
   "sandboxes": [
     "/examples/material-ui-cra-ts",

packages/mui-babel-macros/CHANGELOG.md

@@ -0,0 +1,5 @@
+# Changelog
+
+## 1.0.0
+
+Initial release as an npm package.

packages/mui-babel-macros/MuiError.macro.js

@@ -12,7 +12,7 @@ function invertObject(object) {
 
 /**
  * Supported imports:
- * 1. bare specifier e.g. `'@mui-internal/babel-macros/MuiError.macro'`
+ * 1. bare specifier e.g. `'@mui/internal-babel-macros/MuiError.macro'`
  * 2. relative import from `packages/mui-utils/src` e.g. `'../macros/MuiError.macro'`
  * @param {import('babel-plugin-macros').MacroParams} param0
  */
@@ -128,9 +128,9 @@ function muiError({ references, babel, config, source }) {
     errorCode = parseInt(errorCode, 10);
 
     if (formatMuiErrorMessageIdentifier === null) {
-      const isBareImportSourceIdentifier = source.startsWith('@mui-internal/babel-macros');
+      const isBareImportSourceIdentifier = source.startsWith('@mui/internal-babel-macros');
       if (isBareImportSourceIdentifier) {
-        // Input: import MuiError from '@mui-internal/babel-macros/MuiError.macro'
+        // Input: import MuiError from '@mui/internal-babel-macros/MuiError.macro'
         // Outputs:
         // import { formatMuiErrorMessage } from '@mui/utils';
         formatMuiErrorMessageIdentifier = helperModuleImports.addDefault(
@@ -139,7 +139,7 @@ function muiError({ references, babel, config, source }) {
           { nameHint: '_formatMuiErrorMessage' },
         );
       } else {
-        throw new Error('Only package imports from @mui-internal/babel-macros are supported');
+        throw new Error('Only package imports from @mui/internal-babel-macros are supported');
       }
     }
 

packages/mui-babel-macros/README.md

@@ -0,0 +1,9 @@
+# @mui/internal-babel-macros
+
+This package contains the error macro used in MUI projects.
+This is an internal package not meant for general use.
+
+## Release
+
+There is no build step.
+To publish the package to npm, run: `pnpm release:publish`

packages/mui-babel-macros/__fixtures__/error-code-extraction/input.js

@@ -1,4 +1,4 @@
-import MuiError from '@mui-internal/babel-macros/MuiError.macro';
+import MuiError from '@mui/internal-babel-macros/MuiError.macro';
 
 throw new MuiError('exists');
 throw new MuiError('will be created');

packages/mui-babel-macros/__fixtures__/factory-call/input.js

@@ -1,4 +1,4 @@
-import MuiError from '@mui-internal/babel-macros/MuiError.macro';
+import MuiError from '@mui/internal-babel-macros/MuiError.macro';
 
 // `throw Error(message)` is valid JS but we limit error construction to a single syntax.
 throw MuiError('my message');

packages/mui-babel-macros/__fixtures__/literal/input.js

@@ -1,3 +1,3 @@
-import MuiError from '@mui-internal/babel-macros/MuiError.macro';
+import MuiError from '@mui/internal-babel-macros/MuiError.macro';
 
 throw new MuiError('MUI: Expected valid input target.\n' + 'Did you use `inputComponent`');

packages/mui-babel-macros/__fixtures__/no-error-code-annotation/input.js

@@ -1,3 +1,3 @@
-import MuiError from '@mui-internal/babel-macros/MuiError.macro';
+import MuiError from '@mui/internal-babel-macros/MuiError.macro';
 
 throw new MuiError('MUI: Expected valid input target.\n' + 'Did you use inputComponent');

packages/mui-babel-macros/__fixtures__/no-error-code-throw/input.js

@@ -1,3 +1,3 @@
-import MuiError from '@mui-internal/babel-macros/MuiError.macro';
+import MuiError from '@mui/internal-babel-macros/MuiError.macro';
 
 throw new MuiError('missing');

packages/mui-babel-macros/package.json

@@ -1,8 +1,9 @@
 {
-  "name": "@mui-internal/babel-macros",
+  "name": "@mui/internal-babel-macros",
   "version": "1.0.0",
-  "private": true,
   "author": "MUI Team",
+  "description": "MUI Babel macros. This is an internal package not meant for general use.",
+  "main": "./MuiError.macro.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/mui/material-ui.git",
@@ -12,12 +13,13 @@
   "bugs": {
     "url": "https://github.com/mui/material-ui/issues"
   },
-  "homepage": "private package",
   "funding": {
     "type": "opencollective",
     "url": "https://opencollective.com/mui-org"
   },
   "scripts": {
+    "release:publish": "pnpm publish --tag latest",
+    "release:publish:dry-run": "pnpm publish --tag latest --registry=\"http://localhost:4873/\"",
     "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-babel-macros/**/*.test.{js,ts,tsx}'"
   },
   "dependencies": {
@@ -26,7 +28,7 @@
     "babel-plugin-macros": "^3.1.0"
   },
   "devDependencies": {
-    "@mui-internal/babel-macros": "workspace:*",
+    "@mui/internal-babel-macros": "workspace:*",
     "@types/babel-plugin-macros": "^3.1.3",
     "@types/chai": "^4.3.11",
     "@types/mocha": "^10.0.6",
@@ -35,10 +37,13 @@
     "chai": "^4.4.1"
   },
   "peerDependencies": {
-    "@mui/utils": "workspace:^"
+    "@mui/utils": "^5.0.0"
   },
   "sideEffects": false,
   "engines": {
     "node": ">=12.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }

packages/mui-base/package.json

@@ -50,7 +50,7 @@
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@mui-internal/babel-macros": "workspace:^",
+    "@mui/internal-babel-macros": "workspace:^",
     "@mui-internal/test-utils": "workspace:^",
     "@mui/types": "workspace:^",
     "@testing-library/react": "^14.2.1",

packages/mui-base/src/unstable_useNumberInput/useNumberInput.ts

@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import MuiError from '@mui-internal/babel-macros/MuiError.macro';
+import MuiError from '@mui/internal-babel-macros/MuiError.macro';
 import { unstable_useForkRef as useForkRef, unstable_useId as useId } from '@mui/utils';
 import { extractEventHandlers } from '../utils/extractEventHandlers';
 import { MuiCancellableEvent } from '../utils/MuiCancellableEvent';

packages/mui-base/src/useInput/useInput.ts

@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import MuiError from '@mui-internal/babel-macros/MuiError.macro';
+import MuiError from '@mui/internal-babel-macros/MuiError.macro';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
 import { FormControlState, useFormControlContext } from '../FormControl';
 import { extractEventHandlers } from '../utils/extractEventHandlers';

packages/mui-material-next/package.json

@@ -54,7 +54,7 @@
   },
   "devDependencies": {
     "@emotion/react": "^11.11.3",
-    "@mui-internal/babel-macros": "workspace:^",
+    "@mui/internal-babel-macros": "workspace:^",
     "@mui-internal/test-utils": "workspace:^",
     "@testing-library/user-event": "^14.5.2",
     "@types/chai": "^4.3.11",

packages/mui-material-next/src/Select/SelectInput.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import MuiError from '@mui-internal/babel-macros/MuiError.macro';
+import MuiError from '@mui/internal-babel-macros/MuiError.macro';
 import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
 import {
   refType,

packages/mui-material/package.json

@@ -56,7 +56,7 @@
     "react-transition-group": "^4.4.5"
   },
   "devDependencies": {
-    "@mui-internal/babel-macros": "workspace:^",
+    "@mui/internal-babel-macros": "workspace:^",
     "@mui-internal/test-utils": "workspace:^",
     "@mui/lab": "workspace:*",
     "@popperjs/core": "^2.11.8",

packages/mui-material/src/InputBase/InputBase.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef';
 import refType from '@mui/utils/refType';
-import MuiError from '@mui-internal/babel-macros/MuiError.macro';
+import MuiError from '@mui/internal-babel-macros/MuiError.macro';
 import { TextareaAutosize } from '@mui/base';
 import { isHostComponent } from '@mui/base/utils';
 import composeClasses from '@mui/utils/composeClasses';

packages/mui-material/src/Select/SelectInput.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import MuiError from '@mui-internal/babel-macros/MuiError.macro';
+import MuiError from '@mui/internal-babel-macros/MuiError.macro';
 import composeClasses from '@mui/utils/composeClasses';
 import useId from '@mui/utils/useId';
 import refType from '@mui/utils/refType';

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

@@ -1,5 +1,5 @@
 import deepmerge from '@mui/utils/deepmerge';
-import MuiError from '@mui-internal/babel-macros/MuiError.macro';
+import MuiError from '@mui/internal-babel-macros/MuiError.macro';
 import { darken, getContrastRatio, lighten } from '@mui/system/colorManipulator';
 import common from '../colors/common';
 import grey from '../colors/grey';

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

@@ -3,7 +3,7 @@ import styleFunctionSx, {
   unstable_defaultSxConfig as defaultSxConfig,
 } from '@mui/system/styleFunctionSx';
 import systemCreateTheme from '@mui/system/createTheme';
-import MuiError from '@mui-internal/babel-macros/MuiError.macro';
+import MuiError from '@mui/internal-babel-macros/MuiError.macro';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import createMixins from './createMixins';
 import createPalette from './createPalette';

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

@@ -1,5 +1,5 @@
 'use client';
-import MuiError from '@mui-internal/babel-macros/MuiError.macro';
+import MuiError from '@mui/internal-babel-macros/MuiError.macro';
 
 export { default as THEME_ID } from './identifier';
 export { default as adaptV4Theme } from './adaptV4Theme';

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

@@ -1,4 +1,4 @@
-import MuiError from '@mui-internal/babel-macros/MuiError.macro';
+import MuiError from '@mui/internal-babel-macros/MuiError.macro';
 
 export default function makeStyles() {
   throw new MuiError(

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

@@ -1,4 +1,4 @@
-import MuiError from '@mui-internal/babel-macros/MuiError.macro';
+import MuiError from '@mui/internal-babel-macros/MuiError.macro';
 import { isUnitless, convertLength, responsiveProperty, alignProperty, fontGrid } from './cssUtils';
 
 export default function responsiveFontSizes(themeInput, options = {}) {

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

@@ -1,4 +1,4 @@
-import MuiError from '@mui-internal/babel-macros/MuiError.macro';
+import MuiError from '@mui/internal-babel-macros/MuiError.macro';
 
 export default function withStyles() {
   throw new MuiError(

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

@@ -1,4 +1,4 @@
-import MuiError from '@mui-internal/babel-macros/MuiError.macro';
+import MuiError from '@mui/internal-babel-macros/MuiError.macro';
 
 export default function withTheme() {
   throw new MuiError(

packages/mui-system/package.json

@@ -52,7 +52,7 @@
   "devDependencies": {
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
-    "@mui-internal/babel-macros": "workspace:^",
+    "@mui/internal-babel-macros": "workspace:^",
     "@mui-internal/test-utils": "workspace:^",
     "@mui/system": "workspace:*",
     "@types/chai": "^4.3.11",

packages/mui-system/src/colorManipulator.js

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import clamp from '@mui/utils/clamp';
-import MuiError from '@mui-internal/babel-macros/MuiError.macro';
+import MuiError from '@mui/internal-babel-macros/MuiError.macro';
 
 /**
  * Returns a number whose value is limited to the given range.

packages/mui-system/src/cssVars/createCssVarsProvider.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import MuiError from '@mui-internal/babel-macros/MuiError.macro';
+import MuiError from '@mui/internal-babel-macros/MuiError.macro';
 import deepmerge from '@mui/utils/deepmerge';
 import { GlobalStyles } from '@mui/styled-engine';
 import { useTheme as muiUseTheme } from '@mui/private-theming';

packages/mui-system/src/index.js

@@ -1,4 +1,4 @@
-import MuiError from '@mui-internal/babel-macros/MuiError.macro';
+import MuiError from '@mui/internal-babel-macros/MuiError.macro';
 
 export { css, keyframes, StyledEngineProvider } from '@mui/styled-engine';
 export { default as GlobalStyles } from './GlobalStyles';

packages/mui-utils/package.json

@@ -45,7 +45,7 @@
     "react-is": "^18.2.0"
   },
   "devDependencies": {
-    "@mui-internal/babel-macros": "workspace:^",
+    "@mui/internal-babel-macros": "workspace:^",
     "@mui-internal/test-utils": "workspace:^",
     "@mui/types": "workspace:^",
     "@types/chai": "^4.3.11",

packages/mui-utils/src/capitalize/capitalize.ts

@@ -1,4 +1,4 @@
-import MuiError from '@mui-internal/babel-macros/MuiError.macro';
+import MuiError from '@mui/internal-babel-macros/MuiError.macro';
 
 // It should to be noted that this function isn't equivalent to `text-transform: capitalize`.
 //

packages/mui-utils/src/formatMuiErrorMessage/formatMuiErrorMessage.ts

@@ -1,6 +1,6 @@
 /**
  * WARNING: Don't import this directly.
- * Use `MuiError` from `@mui-internal/babel-macros/MuiError.macro` instead.
+ * Use `MuiError` from `@mui/internal-babel-macros/MuiError.macro` instead.
  * @param {number} code
  */
 export default function formatMuiErrorMessage(code: number): string {