Convert sizeComparison to ESM

dangerfile.js

@@ -2,7 +2,6 @@
 // danger has to be the first thing required!
 const { danger, markdown, message } = require('danger');
 const { exec } = require('child_process');
-const { loadComparison } = require('./scripts/sizeSnapshot');
 
 const circleCIBuildNumber = process.env.CIRCLE_BUILD_NUM;
 const circleCIBuildUrl = `https://app.circleci.com/pipelines/github/mui/material-ui/jobs/${circleCIBuildNumber}`;
@@ -118,6 +117,7 @@ function prepareBundleSizeReport() {
 async function loadLastComparison(upstreamRef, n = 0) {
   const mergeBaseCommit = await git(`merge-base HEAD~${n} ${UPSTREAM_REMOTE}/${upstreamRef}`);
   try {
+    const loadComparison = await import('./scripts/sizeSnapshot/loadComparison.mjs');
     return await loadComparison(mergeBaseCommit, upstreamRef);
   } catch (err) {
     if (n >= 5) {

package.json

@@ -41,7 +41,7 @@
     "markdownlint": "markdownlint-cli2 \"**/*.md\"",
     "prettier": "node ./scripts/prettier.mjs",
     "prettier:all": "node ./scripts/prettier.mjs write",
-    "size:snapshot": "node --max-old-space-size=4096 ./scripts/sizeSnapshot/create",
+    "size:snapshot": "node --max-old-space-size=4096 ./scripts/sizeSnapshot/create.mjs",
     "size:why": "yarn size:snapshot --analyze",
     "start": "yarn && yarn docs:dev",
     "t": "node test/cli.js",

scripts/sizeSnapshot/create.js → scripts/sizeSnapshot/create.mjs

@@ -1,14 +1,16 @@
-const fse = require('fs-extra');
-const lodash = require('lodash');
-const path = require('path');
-const yargs = require('yargs');
-const Piscina = require('piscina');
-const os = require('os');
-const { getWebpackEntries } = require('./webpack.config');
+import fse from 'fs-extra';
+import lodash from 'lodash';
+import path from 'path';
+import url from 'url';
+import yargs from 'yargs';
+import Piscina from 'piscina';
+import os from 'os';
+import { getWebpackEntries } from './webpack.config.mjs';
+import { getWorkspaceRoot } from '../utils.mjs';
 
 const MAX_CONCURRENCY = Math.min(8, os.cpus().length);
 
-const workspaceRoot = path.join(__dirname, '../../');
+const workspaceRoot = getWorkspaceRoot();
 const snapshotDestPath = path.join(workspaceRoot, 'size-snapshot.json');
 
 /**
@@ -36,11 +38,14 @@ async function getRollupSize(snapshotPath) {
  * creates size snapshot for every bundle that built with webpack
  */
 async function getWebpackSizes(webpackEnvironment) {
+  const currentDirectory = url.fileURLToPath(new URL('.', import.meta.url));
+
   const worker = new Piscina({
-    filename: require.resolve('./worker'),
+    filename: path.resolve(currentDirectory, 'worker.js'),
     maxThreads: MAX_CONCURRENCY,
   });
-  await fse.mkdirp(path.join(__dirname, 'build'));
+
+  await fse.mkdirp(path.join(currentDirectory, 'build'));
 
   const entries = await getWebpackEntries();
 
@@ -65,7 +70,7 @@ async function run(argv) {
   await fse.writeJSON(snapshotDestPath, bundleSizes, { spaces: 2 });
 }
 
-yargs
+yargs(process.argv.slice(2))
   .command({
     command: '$0',
     description: 'Saves a size snapshot in size-snapshot.json',

scripts/sizeSnapshot/index.mjs

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as loadComparison } from './loadComparison.mjs';

scripts/sizeSnapshot/loadComparison.js → scripts/sizeSnapshot/loadComparison.mjs

@@ -1,15 +1,16 @@
 /**
  * `snapshots` always refer to size snapshots in this file
  */
-const fse = require('fs-extra');
-const path = require('path');
-const fetch = require('node-fetch');
-const lodash = require('lodash');
+import fse from 'fs-extra';
+import path from 'path';
+import fetch from 'node-fetch';
+import lodash from 'lodash';
+import { getWorkspaceRoot } from '../utils.mjs';
 
 const ARTIFACT_SERVER = 'https://s3.eu-central-1.amazonaws.com/mui-org-ci';
 
 async function loadCurrentSnapshot() {
-  return fse.readJSON(path.join(__dirname, '../../size-snapshot.json'));
+  return fse.readJSON(path.join(getWorkspaceRoot(), 'size-snapshot.json'));
 }
 
 /**
@@ -32,7 +33,7 @@ async function loadSnapshot(commitId, ref) {
 
 const nullSnapshot = { parsed: 0, gzip: 0 };
 
-module.exports = async function loadComparison(parentId, ref) {
+export default async function loadComparison(parentId, ref) {
   const [currentSnapshot, previousSnapshot] = await Promise.all([
     loadCurrentSnapshot(),
     // continue non existing snapshots
@@ -76,4 +77,4 @@ module.exports = async function loadComparison(parentId, ref) {
     current: 'HEAD',
     bundles,
   };
-};
+}

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

@@ -1,10 +1,12 @@
-const path = require('path');
-const CompressionPlugin = require('compression-webpack-plugin');
-const glob = require('fast-glob');
-const TerserPlugin = require('terser-webpack-plugin');
-const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+import path from 'path';
+import glob from 'fast-glob';
+import url from 'url';
+import CompressionPlugin from 'compression-webpack-plugin';
+import TerserPlugin from 'terser-webpack-plugin';
+import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
+import { getWorkspaceRoot } from '../utils.mjs';
 
-const workspaceRoot = path.join(__dirname, '..', '..');
+const workspaceRoot = getWorkspaceRoot();
 
 async function getWebpackEntries() {
   const materialPackagePath = path.join(workspaceRoot, 'packages/mui-material/build');
@@ -169,6 +171,8 @@ function createWebpackConfig(entry, environment) {
   const analyzerMode = environment.analyze ? 'static' : 'disabled';
   const concatenateModules = !environment.accurateBundles;
 
+  const currentDirectory = url.fileURLToPath(new URL('.', import.meta.url));
+
   /**
    * @type {import('webpack').Configuration}
    */
@@ -193,7 +197,7 @@ function createWebpackConfig(entry, environment) {
         type: 'var',
         // type: 'module',
       },
-      path: path.join(__dirname, 'build'),
+      path: path.join(currentDirectory, 'build'),
     },
     plugins: [
       new CompressionPlugin(),
@@ -231,5 +235,4 @@ function createWebpackConfig(entry, environment) {
   return configuration;
 }
 
-exports.getWebpackEntries = getWebpackEntries;
-exports.createWebpackConfig = createWebpackConfig;
+export { getWebpackEntries, createWebpackConfig };

scripts/sizeSnapshot/worker.js → scripts/sizeSnapshot/worker.mjs

@@ -1,6 +1,6 @@
-const { promisify } = require('util');
-const webpackCallbackBased = require('webpack');
-const { createWebpackConfig } = require('./webpack.config');
+import { promisify } from 'util';
+import webpackCallbackBased from 'webpack';
+import { createWebpackConfig } from './webpack.config.mjs';
 
 const webpack = promisify(webpackCallbackBased);
 
@@ -59,4 +59,4 @@ async function getSizes({ entry, webpackEnvironment, index, total }) {
   return sizes;
 }
 
-module.exports = getSizes;
+export default getSizes;