[POC][Do not merge] ESM module distribution improvements

[DiegoAndai]

POC for improving the ESM module distribution of the packages.

• Add exports key pointing to import and require files
• Add file extensions with babel-plugin-add-import-extension

Missing:

• Types
• UMD build broke, have to figure out why, removed it for the POC

[mui-bot]

Netlify deploy preview

https://deploy-preview-41102--material-ui.netlify.app/

@material-ui/core: parsed: -3.37% :heart_eyes:, gzip: -2.61% :heart_eyes: @material-ui/lab: parsed: -4.09% :heart_eyes:, gzip: -3.18% :heart_eyes: @material-ui/system: parsed: +0.62% , gzip: +0.57% @material-ui/unstyled: parsed: +0.40% , gzip: +0.42% @material-ui/utils: parsed: +3.44% , gzip: +3.24% @mui/material-next: parsed: -4.26% :heart_eyes:, gzip: -2.70% :heart_eyes: @mui/joy: parsed: +0.10% , gzip: +0.17%

Bundle size report

Details of bundle changes (Toolpad) Details of bundle changes

Generated by :no_entry_sign: dangerJS against ea4973c27bcc1c426a91a72db6cfa464b01336ee

[DiegoAndai]

The first test is working as expected ✅

The next step is to sort out the CI test suite.

[Janpot]

All of this looks reasonable to me 👍

[Janpot]

Regarding the CI issues. It looks like the snapshot size test is looking for the umd build. Which was removed in this PR. We can also get rid of it in snapshot collection.

diff --git a/scripts/sizeSnapshot/create.js b/scripts/sizeSnapshot/create.js
index b8b68e60b4..1ed2f343e1 100644
--- a/scripts/sizeSnapshot/create.js
+++ b/scripts/sizeSnapshot/create.js
@@ -56,11 +56,7 @@ async function getWebpackSizes(webpackEnvironment) {
 async function run(argv) {
   const { analyze, accurateBundles } = argv;
 
-  const rollupBundles = [path.join(workspaceRoot, 'packages/mui-material/size-snapshot.json')];
-  const bundleSizes = lodash.fromPairs([
-    ...(await getWebpackSizes({ analyze, accurateBundles })),
-    ...lodash.flatten(await Promise.all(rollupBundles.map(getRollupSize))),
-  ]);
+  const bundleSizes = lodash.fromPairs(await getWebpackSizes({ analyze, accurateBundles }));
 
   await fse.writeJSON(snapshotDestPath, bundleSizes, { spaces: 2 });
 }