@mui/internal-babel-plugin-minify-errors 1.0.10

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 Call-Em-All
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/__fixtures__/.eslintrc.js

@@ -0,0 +1,12 @@
+module.exports = {
+  rules: {
+    // keeps test simple
+    'no-unreachable': 'off',
+    // keeps test simple
+    'no-useless-concat': 'off',
+
+    // Babel import helpers do not add one.
+    // Since this is auto generated code we don't care about code style.
+    'import/newline-after-import': 'off',
+  },
+};

package/__fixtures__/error-code-extraction/error-codes.after.json

@@ -0,0 +1,4 @@
+{
+  "1": "exists",
+  "2": "will be created"
+}

package/__fixtures__/error-code-extraction/error-codes.before.json

@@ -0,0 +1,3 @@
+{
+  "1": "exists"
+}

package/__fixtures__/error-code-extraction/input.js

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

package/__fixtures__/error-code-extraction/output.js

@@ -0,0 +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' ? 'will be created' : _formatMuiErrorMessage(2),
+);

package/__fixtures__/interpolation/error-codes.json

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

package/__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}`);

package/__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),
+);

package/__fixtures__/literal/error-codes.json

@@ -0,0 +1,3 @@
+{
+  "1": "MUI: Expected valid input target.\nDid you use `inputComponent`"
+}

package/__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\``,
+);

package/__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),
+);

package/__fixtures__/no-error-code-annotation/error-codes.json

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

package/__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',
+);

package/__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',
+);

package/__fixtures__/no-error-code-throw/error-codes.json

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

package/__fixtures__/no-error-code-throw/input.js

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

package/__fixtures__/unminifyable-annotation/error-codes.json

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

package/__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);

package/__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);

package/__fixtures__/unminifyable-throw/error-codes.json

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

package/__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);

package/index.js

@@ -0,0 +1,225 @@
+// @ts-check
+
+const helperModuleImports = require('@babel/helper-module-imports');
+const fs = require('fs');
+
+const COMMENT_MARKER = 'minify-error';
+
+/**
+ * @typedef {import('@babel/core')} babel
+ */
+
+/**
+ * @typedef {{updatedErrorCodes?: boolean, formatMuiErrorMessageIdentifier?: babel.types.Identifier}} PluginState
+ * @typedef {'annotate' | 'throw' | 'write'} MissingError
+ * @typedef {{ errorCodesPath: string, missingError: MissingError }} Options
+ */
+
+/**
+ *
+ * @param {babel.types} t
+ * @param {babel.types.Node} node
+ * @returns {{ message: string, expressions: babel.types.Expression[] } | null}
+ */
+function extractMessageFromExpression(t, node) {
+  if (t.isTemplateLiteral(node)) {
+    return {
+      message: node.quasis.map((quasi) => quasi.value.cooked).join('%s'),
+      expressions: node.expressions.map((expression) => {
+        if (t.isExpression(expression)) {
+          return expression;
+        }
+        throw new Error('Can only evaluate javascript template literals.');
+      }),
+    };
+  }
+  if (t.isStringLiteral(node)) {
+    return { message: node.value, expressions: [] };
+  }
+  if (t.isBinaryExpression(node) && node.operator === '+') {
+    if (t.isPrivateName(node.left)) {
+      // This is only psossible with `in` expressions, e.g. `#foo in {}`
+      throw new Error('Unreachable');
+    }
+    const left = extractMessageFromExpression(t, node.left);
+    const right = extractMessageFromExpression(t, node.right);
+    if (!left || !right) {
+      return null;
+    }
+    return {
+      message: left.message + right.message,
+      expressions: [...left.expressions, ...right.expressions],
+    };
+  }
+  return null;
+}
+
+/**
+ *
+ * @param {MissingError} missingError
+ * @param {babel.NodePath} path
+ * @returns
+ */
+function handleUnminifyable(missingError, path) {
+  switch (missingError) {
+    case 'annotate': {
+      // Outputs:
+      // /* FIXME (minify-errors-in-prod): Unminified error message in production build! */
+      // throw new Error(foo)
+      path.addComment(
+        'leading',
+        ' FIXME (minify-errors-in-prod): Unminifyable error in production! ',
+      );
+      return;
+    }
+    case 'throw': {
+      throw new Error(
+        `Unminifyable error. You can only use literal strings and template strings as error messages.`,
+      );
+    }
+    case 'write': {
+      return;
+    }
+    default: {
+      throw new Error(`Unknown missingError option: ${missingError}`);
+    }
+  }
+}
+
+/**
+ * @param {babel} file
+ * @param {Options} options
+ * @returns {babel.PluginObj<PluginState>}
+ */
+module.exports = function plugin({ types: t }, { errorCodesPath, missingError = 'annotate' }) {
+  if (!errorCodesPath) {
+    throw new Error('errorCodesPath is required.');
+  }
+
+  const errorCodesContent = fs.readFileSync(errorCodesPath, 'utf8');
+  const errorCodes = JSON.parse(errorCodesContent);
+
+  const errorCodesLookup = new Map(
+    Object.entries(errorCodes).map(([key, value]) => [value, Number(key)]),
+  );
+
+  return {
+    visitor: {
+      NewExpression(newExpressionPath, state) {
+        if (!newExpressionPath.get('callee').isIdentifier({ name: 'Error' })) {
+          return;
+        }
+
+        if (
+          !newExpressionPath.node.leadingComments?.some((comment) =>
+            comment.value.includes(COMMENT_MARKER),
+          )
+        ) {
+          return;
+        }
+
+        newExpressionPath.node.leadingComments = newExpressionPath.node.leadingComments.filter(
+          (comment) => !comment.value.includes(COMMENT_MARKER),
+        );
+
+        const messagePath = newExpressionPath.get('arguments')[0];
+        if (!messagePath) {
+          return;
+        }
+
+        const messageNode = messagePath.node;
+        if (t.isSpreadElement(messageNode) || t.isArgumentPlaceholder(messageNode)) {
+          handleUnminifyable(missingError, newExpressionPath);
+          return;
+        }
+
+        const message = extractMessageFromExpression(t, messageNode);
+
+        if (!message) {
+          handleUnminifyable(missingError, newExpressionPath);
+          return;
+        }
+
+        let errorCode = errorCodesLookup.get(message.message);
+        if (errorCode === undefined) {
+          switch (missingError) {
+            case 'annotate': {
+              // Outputs:
+              // /* FIXME (minify-errors-in-prod): Unminified error message in production build! */
+              // throw new Error(`A message with ${interpolation}`)
+              newExpressionPath.addComment(
+                'leading',
+                ' FIXME (minify-errors-in-prod): Unminified error message in production build! ',
+              );
+              return;
+            }
+            case 'throw': {
+              throw new Error(
+                `Missing error code for message '${message.message}'. Did you forget to run \`pnpm extract-error-codes\` first?`,
+              );
+            }
+            case 'write': {
+              errorCode = errorCodesLookup.size + 1;
+              errorCodesLookup.set(message.message, errorCode);
+              state.updatedErrorCodes = true;
+              break;
+            }
+            default: {
+              throw new Error(`Unknown missingError option: ${missingError}`);
+            }
+          }
+        }
+
+        if (!state.formatMuiErrorMessageIdentifier) {
+          // Outputs:
+          // import { formatMuiErrorMessage } from '@mui/utils';
+          state.formatMuiErrorMessageIdentifier = helperModuleImports.addDefault(
+            newExpressionPath,
+            '@mui/utils/formatMuiErrorMessage',
+            { nameHint: '_formatMuiErrorMessage' },
+          );
+        }
+
+        // Outputs:
+        //   `A ${adj} message that contains ${noun}`;
+        const devMessage = messageNode;
+
+        // Outputs:
+        // formatMuiErrorMessage(ERROR_CODE, adj, noun)
+        const prodMessage = t.callExpression(
+          t.cloneNode(state.formatMuiErrorMessageIdentifier, true),
+          [t.numericLiteral(errorCode), ...message.expressions],
+        );
+
+        // Outputs:
+        // new Error(
+        //   process.env.NODE_ENV !== "production"
+        //     ? `A message with ${interpolation}`
+        //     : formatProdError('A message with %s', interpolation)
+        // )
+        messagePath.replaceWith(
+          t.conditionalExpression(
+            t.binaryExpression(
+              '!==',
+              t.memberExpression(
+                t.memberExpression(t.identifier('process'), t.identifier('env')),
+                t.identifier('NODE_ENV'),
+              ),
+              t.stringLiteral('production'),
+            ),
+            devMessage,
+            prodMessage,
+          ),
+        );
+      },
+    },
+    post() {
+      if (missingError === 'write' && this.updatedErrorCodes) {
+        const invertedErrorCodes = Object.fromEntries(
+          Array.from(errorCodesLookup, ([key, value]) => [value, key]),
+        );
+        fs.writeFileSync(errorCodesPath, `${JSON.stringify(invertedErrorCodes, null, 2)}\n`);
+      }
+    },
+  };
+};

package/index.test.js

@@ -0,0 +1,112 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import * as os from 'os';
+import { pluginTester } from 'babel-plugin-tester';
+import { expect } from 'chai';
+import plugin from './index';
+
+const temporaryErrorCodesPath = path.join(os.tmpdir(), 'error-codes.json');
+const fixturePath = path.resolve(__dirname, './__fixtures__');
+
+function readOutputFixtureSync(fixture, file) {
+  // babel hardcodes the linefeed to \n
+  return fs
+    .readFileSync(path.join(fixturePath, fixture, file), { encoding: 'utf8' })
+    .replace(/\r?\n/g, '\n');
+}
+
+pluginTester({
+  plugin,
+  filepath: __filename,
+  tests: [
+    {
+      title: 'literal',
+      pluginOptions: {
+        errorCodesPath: path.join(fixturePath, 'literal', 'error-codes.json'),
+      },
+      fixture: path.join(fixturePath, 'literal', 'input.js'),
+      output: readOutputFixtureSync('literal', 'output.js'),
+    },
+    {
+      title: 'interpolation',
+      pluginOptions: {
+        errorCodesPath: path.join(fixturePath, 'interpolation', 'error-codes.json'),
+      },
+      fixture: path.join(fixturePath, 'interpolation', 'input.js'),
+      output: readOutputFixtureSync('interpolation', 'output.js'),
+    },
+    {
+      title: 'annotates missing error codes',
+      pluginOptions: {
+        errorCodesPath: path.join(fixturePath, 'no-error-code-annotation', 'error-codes.json'),
+      },
+      fixture: path.join(fixturePath, 'no-error-code-annotation', 'input.js'),
+      output: readOutputFixtureSync('no-error-code-annotation', 'output.js'),
+    },
+    {
+      title: 'can throw on missing error codes',
+      // babel prefixes with filename.
+      // We're only interested in the message.
+      error:
+        /: Missing error code for message 'missing'. Did you forget to run `pnpm extract-error-codes` first?/,
+      fixture: path.join(fixturePath, 'no-error-code-throw', 'input.js'),
+      pluginOptions: {
+        errorCodesPath: path.join(fixturePath, 'no-error-code-throw', 'error-codes.json'),
+        missingError: 'throw',
+      },
+    },
+    {
+      title: 'annotates unminifyable errors',
+      pluginOptions: {
+        errorCodesPath: path.join(fixturePath, 'unminifyable-annotation', 'error-codes.json'),
+      },
+      fixture: path.join(fixturePath, 'unminifyable-annotation', 'input.js'),
+      output: readOutputFixtureSync('unminifyable-annotation', 'output.js'),
+    },
+    {
+      title: 'can throw on unminifyable errors',
+      // babel prefixes with filename.
+      // We're only interested in the message.
+      error:
+        /: Unminifyable error. You can only use literal strings and template strings as error messages.?/,
+      fixture: path.join(fixturePath, 'unminifyable-throw', 'input.js'),
+      pluginOptions: {
+        errorCodesPath: path.join(fixturePath, 'unminifyable-throw', 'error-codes.json'),
+        missingError: 'throw',
+      },
+    },
+    {
+      title: 'can extract errors',
+
+      fixture: path.join(fixturePath, 'error-code-extraction', 'input.js'),
+      pluginOptions: {
+        errorCodesPath: temporaryErrorCodesPath,
+        missingError: 'write',
+      },
+      output: readOutputFixtureSync('error-code-extraction', 'output.js'),
+      setup() {
+        fs.copyFileSync(
+          path.join(fixturePath, 'error-code-extraction', 'error-codes.before.json'),
+          temporaryErrorCodesPath,
+        );
+
+        return function teardown() {
+          try {
+            const actualErrorCodes = JSON.parse(
+              fs.readFileSync(temporaryErrorCodesPath, { encoding: 'utf8' }),
+            );
+            const expectedErrorCodes = JSON.parse(
+              fs.readFileSync(
+                path.join(fixturePath, 'error-code-extraction', 'error-codes.after.json'),
+              ),
+            );
+
+            expect(actualErrorCodes).to.deep.equal(expectedErrorCodes);
+          } finally {
+            fs.unlinkSync(temporaryErrorCodesPath);
+          }
+        };
+      },
+    },
+  ],
+});

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@mui/internal-babel-plugin-minify-errors",
+  "version": "1.0.10",
+  "author": "MUI Team",
+  "description": "This is an internal package not meant for general use.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mui/material-ui.git",
+    "directory": "packages/mui-babel-plugin-minify-errors"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/mui/material-ui/issues"
+  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/mui-org"
+  },
+  "dependencies": {
+    "@babel/helper-module-imports": "^7.24.7"
+  },
+  "devDependencies": {
+    "@types/babel__helper-module-imports": "^7.18.3",
+    "babel-plugin-tester": "^11.0.4",
+    "chai": "^4.5.0"
+  },
+  "sideEffects": false,
+  "type": "commonjs",
+  "exports": {
+    ".": "./index.js"
+  },
+  "engines": {
+    "node": ">=14.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages-internal/babel-plugin-minify-errors/**/*.test.{js,ts,tsx}'"
+  }
+}