[code-infra] Create new Error() minification infrastructure

[oliviertassinari]

Steps to reproduce

Today, the components throw errors in plain strings:

https://github.com/mui/mui-x/blob/dd4447c5d26e578def9a560df8b2bbda2a3ca317/packages/x-tree-view/src/internals/plugins/useTreeViewItems/useTreeViewItems.tsx#L36-L43

those add bundle size to end-users

Context

We should be able to encode them with a key and only bundle this. See mui/material-ui#21214 for prior art on Material UI.

• [core] Compress throw new Error() to save bundle size  mui-x#14618

[Janpot]

The method used in core has the best DX, but fully locks us into babel. If we're going to propagate this, can we think of alternatives that still have acceptable DX, but keep the code portable across build tools and runtimes?

For example, would it be an acceptable DX to just write it manually

throw createMinifiedError(process.env.NODE_ENV === 'production' ? 123 : 'non minified error message', foo, bar)

// createMinifiedError

export function createMinifiedError(msg, ...args) {
  if (process.env.NODE_ENV === 'production') {
    return new Error(format(`minified error #${msg}`, ...args))
  }
  return new Error(format(msg, ...args))
}

(assuming we pair this with a lint rule and an extraction script)

[oliviertassinari]

Maybe a SWC plugin could do this?

On the simpler version, I wonder if people will be able to use it reliably. Mistakes potential:

• removing old message keys, no, it's only incremental
• updating error message without updating key, no they should aways be in sync
• not adding new key when arguments changes, no this would show wrong messages

Maybe it's fine.

[Janpot]

Maybe a SWC plugin could do this?

It definitely could, but that would:
a. now lock us into babel + swc. What about esbuild? (vite, tsup), or oxc (rolldown).
b. require us to maintain multiple plugins in multiple languages

On the simpler version, I wonder if people will be able to use it reliably. Mistakes potential:

The idea would be that we still have a script, that uses a babel plugin to extract the messages and update a json file. This script can fail on the cases you mention. We run it locally before pushing and in CI to check for changes.

[Janpot]

I'm changing my mind about this. The problem is the fact that we use babel-plugin-macros. That's what makes us import code that can't run untranspiled. Instead, we could turn this into valid javascript and write a babel plugin that extracts error codes and replaces them with minified version.

Improved DX:

• Unlike the current implementation, the plugin would be entirely optional. If in the future we want to switch compilers, we can keep the plugin and run babel as a post-processing step.
• The infra is easier to share, we don't need both a code import and a babel plugin, we only need a plugin
• We can just detect every new Error pattern automatically and minify it, maintainers don't need to know about the infra to be notified their error needs to be minified.
• We can automatically extract interpolations, the maintainer doesn't need to know about message formatting

input:

throw new Error(`Invalid ${foo} in ${bar}`);

Output

import formatProdError from '@mui/utils/formatProdError'
// ...
throw new Error(process.env.NODE_ENV !== 'production' ? `Invalid ${foo} in ${bar}` : formatProdError(123, foo, bar));

and

./error-codes.json
{
  "123": "Invalid % in %"
}

• We can error on unminifyable patterns, e.g.

  throw new Error(someObject['error'])

• We can keep the checks on duplicates and interpolation
• We can add an ignore comment for errors we don't want to minify