[test] Fix size snapshot including peer dependencies (mui#14636)

* [ci] Fix size snapshot including peer dependencies

* [ci] Add margin between size diff and emoji

* [ci] Use wildcard import instead of named import

Just creates diff noise if additional imports are used. There
are little to no benefits for named imports in node

.circleci/config.yml

@@ -187,7 +187,7 @@ jobs:
           command: tar cfvz builds.tar.gz packages/*/build
       - persist_to_workspace:
           root: .
-          paths: 
+          paths:
             - builds.tar.gz
             # rollup snapshot
             - packages/material-ui/size-snapshot.json
@@ -256,12 +256,6 @@ jobs:
       - run:
           name: Can we build the docs?
           command: yarn docs:build
-      # temporary workaround, proposing to size-limit to make webpack alias configureable
-      - run:
-          name: Prepare size snapshot
-          command: |
-            cd packages/material-ui/build && yarn link && cd ../../../ 
-            yarn link @material-ui/core
       - run:
           name: Create a size snapshot
           command: yarn size:snapshot
@@ -270,6 +264,9 @@ jobs:
       # that allow write access to s3
       - store_artifacts:
           path: size-snapshot.json
+      # for debugging purposes, this is created by webpack called from size:snapshot
+      - store_artifacts:
+          path: scripts/sizeSnapshot/build/stats.json
       - run:
           name: Possibly persist size snapshot
           command: |

dangerfile.js

@@ -71,9 +71,9 @@ function isPackageComparison(comparisonEntry) {
 function addPercent(change, goodEmoji = '', badEmooji = ':small_red_triangle:') {
   const formatted = (change * 100).toFixed(2);
   if (/^-|^0(?:\.0+)$/.test(formatted)) {
-    return `${formatted}%${goodEmoji}`;
+    return `${formatted}% ${goodEmoji}`;
   }
-  return `+${formatted}%${badEmooji}`;
+  return `+${formatted}% ${badEmooji}`;
 }
 
 /**

package.json

@@ -40,7 +40,7 @@
     "lint:fix": "eslint . --cache --fix && echo \"eslint: no lint errors\"",
     "prettier": "yarn babel-node ./scripts/prettier.js",
     "prettier:all": "yarn babel-node ./scripts/prettier.js write",
-    "size:snapshot": "node scripts/createSizeSnapshot",
+    "size:snapshot": "node scripts/sizeSnapshot/create",
     "size:why": "size-limit --why packages/material-ui/build/index.js",
     "start": "yarn docs:dev",
     "test": "yarn lint && yarn typescript && yarn test:coverage",

scripts/sizeSnapshot/.gitignore

@@ -0,0 +1 @@
+build/

scripts/sizeSnapshot/create.js

@@ -0,0 +1,65 @@
+/* eslint-disable no-console */
+const childProcess = require('child_process');
+const fse = require('fs-extra');
+const lodash = require('lodash');
+const path = require('path');
+const { promisify } = require('util');
+
+const exec = promisify(childProcess.exec);
+
+const workspaceRoot = path.join(__dirname, '../../');
+const snapshotDestPath = path.join(workspaceRoot, 'size-snapshot.json');
+
+/**
+ * @param {object} snapshot snaphot generated by rollup-plugin-size-snapshot
+ * @returns {object} size snapshot with the same format as a snapshot from size-limit
+ */
+function normalizeRollupSnapshot(snapshot) {
+  return { parsed: snapshot.minified, gzip: snapshot.gzipped };
+}
+
+async function getRollupSize(snapshotPath) {
+  const rollupSnapshot = await fse.readJSON(snapshotPath);
+
+  return Object.entries(rollupSnapshot).map(([bundlePath, snapshot]) => [
+    // path in the snapshot is relative the snapshot itself
+    path.relative(workspaceRoot, path.join(path.dirname(snapshotPath), bundlePath)),
+    normalizeRollupSnapshot(snapshot),
+  ]);
+}
+
+/**
+ * creates size snapshot for every bundle that built with webpack
+ */
+async function getWebpackSizes() {
+  await fse.mkdirp(path.join(__dirname, 'build'));
+
+  const configPath = path.join(__dirname, 'webpack.config.js');
+  const statsPath = path.join(__dirname, 'build', 'stats.json');
+  await exec(`webpack --config ${configPath} --json > ${statsPath}`);
+
+  const stats = await fse.readJSON(statsPath);
+  const assets = new Map(stats.assets.map(asset => [asset.name, asset]));
+
+  return Object.entries(stats.assetsByChunkName).map(([chunkName, assetName]) => {
+    const parsedSize = assets.get(assetName).size;
+    const gzipSize = assets.get(`${assetName}.gz`).size;
+    return [chunkName, { parsed: parsedSize, gzip: gzipSize }];
+  });
+}
+
+async function run() {
+  const rollupBundles = [path.join(workspaceRoot, 'packages/material-ui/size-snapshot.json')];
+
+  const bundleSizes = lodash.fromPairs([
+    ...(await getWebpackSizes()),
+    ...lodash.flatten(await Promise.all(rollupBundles.map(getRollupSize))),
+  ]);
+
+  await fse.writeJSON(snapshotDestPath, bundleSizes, { spaces: 2 });
+}
+
+run().catch(err => {
+  console.error(err);
+  process.exit(1);
+});

scripts/sizeSnapshot/loadComparison.js

@@ -4,7 +4,7 @@
 const fse = require('fs-extra');
 const path = require('path');
 const fetch = require('node-fetch');
-const { fromPairs } = require('lodash');
+const lodash = require('lodash');
 
 const artifactServer = 'https://s3.eu-central-1.amazonaws.com/eps1lon-material-ui';
 
@@ -32,7 +32,7 @@ module.exports = async function loadComparison(parrentId, ref) {
 
   const bundleKeys = Object.keys({ ...currentSnapshot, ...previousSnapshot });
 
-  const bundles = fromPairs(
+  const bundles = lodash.fromPairs(
     bundleKeys.map(bundle => {
       // if a bundle was added the change should be +inf
       // if a bundle was removed the change should be -100%

scripts/createSizeSnapshot.js → scripts/sizeSnapshot/webpack.config.js

@@ -1,40 +1,8 @@
-/* eslint-disable no-console */
 const fse = require('fs-extra');
 const path = require('path');
-const getSize = require('size-limit');
-const { flatten, fromPairs } = require('lodash');
+const CompressionPlugin = require('compression-webpack-plugin');
 
-const workspaceRoot = path.join(__dirname, '../');
-const snapshotDestPath = path.join(workspaceRoot, 'size-snapshot.json');
-
-/**
- * @param {object} snapshot snaphot generated by rollup-plugin-size-snapshot
- * @returns {object} size snapshot with the same format as a snapshot from size-limit
- */
-function normalizeRollupSnapshot(snapshot) {
-  return { parsed: snapshot.minified, gzip: snapshot.gzipped };
-}
-
-async function getRollupSize(snapshotPath) {
-  const rollupSnapshot = await fse.readJSON(snapshotPath);
-
-  return Object.entries(rollupSnapshot).map(([bundlePath, snapshot]) => [
-    // path in the snapshot is relative the snapshot itself
-    path.relative(workspaceRoot, path.join(path.dirname(snapshotPath), bundlePath)),
-    normalizeRollupSnapshot(snapshot),
-  ]);
-}
-
-/**
- * creates size snapshot for every bundle that is analyzed by `size-limit`
- * @param {object} bundles
- */
-function getSizeLimitSizes(bundles) {
-  return bundles.map(async bundle => [
-    bundle.name,
-    await getSize(path.join(workspaceRoot, bundle.path)),
-  ]);
-}
+const workspaceRoot = path.join(__dirname, '..', '..');
 
 async function getSizeLimitBundles() {
   const buildId = await fse.readFile('.next/BUILD_ID', 'utf8');
@@ -127,21 +95,34 @@ async function getSizeLimitBundles() {
   ];
 }
 
-async function run() {
-  const rollupBundles = [path.join(workspaceRoot, 'packages/material-ui/size-snapshot.json')];
-  const sizeLimitBundles = await getSizeLimitBundles();
+module.exports = getSizeLimitBundles;
 
-  const bundleSizes = fromPairs(
-    await Promise.all([
-      ...getSizeLimitSizes(sizeLimitBundles),
-      ...flatten(await Promise.all(rollupBundles.map(getRollupSize))),
-    ]),
-  );
+module.exports = new Promise(async resolve => {
+  const entry = (await getSizeLimitBundles()).reduce((acc, bundle) => {
+    acc[bundle.name] = path.join(workspaceRoot, bundle.path);
+    return acc;
+  }, {});
 
-  await fse.writeJSON(snapshotDestPath, bundleSizes, { spaces: 2 });
-}
+  const config = {
+    entry,
+    // ideally this would be computed from the bundles peer dependencies
+    externals: /^(react|react-dom)$/,
+    mode: 'production',
+    output: {
+      filename: '[name].js',
+      path: path.join(__dirname, 'build'),
+    },
+    plugins: [new CompressionPlugin()],
+    resolve: {
+      alias: {
+        '@material-ui/core': path.join(workspaceRoot, 'packages/material-ui/build'),
+        '@material-ui/lab': path.join(workspaceRoot, 'packages/material-ui-lab/build'),
+        '@material-ui/styles': path.join(workspaceRoot, 'packages/material-ui-styles/build'),
+        '@material-ui/system': path.join(workspaceRoot, 'packages/material-ui-system/build'),
+        '@material-ui/utils': path.join(workspaceRoot, 'packages/material-ui-utils/build'),
+      },
+    },
+  };
 
-run().catch(err => {
-  console.error(err);
-  process.exit(1);
+  resolve(config);
 });