@mui/internal-bundle-size-checker 1.0.0

package/src/types.d.ts

@@ -0,0 +1,106 @@
+// WebpackEntry type
+interface WebpackEntry {
+  import: string;
+  importName?: string;
+}
+
+// Webpack stats types
+interface StatsAsset {
+  name: string;
+  size: number;
+  related?: {
+    find: (predicate: (asset: any) => boolean) => { size: number; type: string };
+  };
+}
+
+interface StatsChunkGroup {
+  name: string;
+  assets: Array<{ name: string; size: number }>;
+}
+
+interface WebpackStats {
+  hasErrors(): boolean;
+  toJson(options: any): {
+    assets?: StatsAsset[];
+    entrypoints?: Record<string, StatsChunkGroup>;
+    errors?: any[];
+  };
+}
+
+// Upload configuration with optional properties
+interface UploadConfig {
+  repo?: string; // The repository name (e.g., "mui/material-ui")
+  branch?: string; // Optional branch name (defaults to current Git branch)
+  isPullRequest?: boolean; // Whether this is a pull request build (defaults to CI detection)
+}
+
+// Normalized upload configuration where all properties are defined
+interface NormalizedUploadConfig {
+  repo: string; // The repository name (e.g., "mui/material-ui")
+  branch: string; // Branch name
+  isPullRequest: boolean; // Whether this is a pull request build
+}
+
+// EntryPoint types
+type StringEntry = string;
+
+interface ObjectEntry {
+  id: string; // Unique identifier for the entry (renamed from 'name')
+  code?: string; // Code to be executed in the virtual module (now optional)
+  import?: string; // Optional package name to import
+  importedNames?: string[]; // Optional array of named imports
+  externals?: string[]; // Optional array of packages to exclude from the bundle
+}
+
+type EntryPoint = StringEntry | ObjectEntry;
+
+// Bundle size checker config with optional upload config
+interface BundleSizeCheckerConfig {
+  entrypoints: EntryPoint[];
+  upload?: UploadConfig | boolean | null;
+}
+
+// Normalized bundle size checker config with all properties defined
+interface NormalizedBundleSizeCheckerConfig {
+  entrypoints: ObjectEntry[];
+  upload: NormalizedUploadConfig | null; // null means upload is disabled
+}
+
+// Command line argument types
+interface CommandLineArgs {
+  analyze?: boolean;
+  accurateBundles?: boolean;
+  output?: string;
+  verbose?: boolean;
+  filter?: string[];
+}
+
+// Diff command argument types
+interface DiffCommandArgs {
+  base: string;
+  head?: string;
+  output?: 'json' | 'markdown';
+  reportUrl?: string;
+}
+
+// PR command argument types
+interface PrCommandArgs {
+  prNumber: number;
+  output?: 'json' | 'markdown';
+  circleci?: string;
+}
+
+interface PrInfo {
+  number: number;
+  base: {
+    ref: string;
+    sha: string;
+    repo: {
+      full_name: string;
+    };
+  };
+  head: {
+    ref: string;
+    sha: string;
+  };
+}

package/src/uploadSnapshot.js

@@ -0,0 +1,72 @@
+import fs from 'fs';
+import { S3Client, PutObjectCommand, PutObjectTaggingCommand } from '@aws-sdk/client-s3';
+import { execa } from 'execa';
+import { fromEnv } from '@aws-sdk/credential-providers';
+
+/**
+ * Gets the current Git commit SHA
+ * @returns {Promise<string>} The current commit SHA
+ */
+async function getCurrentCommitSHA() {
+  const { stdout } = await execa('git', ['rev-parse', 'HEAD']);
+  return stdout.trim();
+}
+
+/**
+ * Uploads the size snapshot to S3
+ * @param {string} snapshotPath - The path to the size snapshot JSON file
+ * @param {NormalizedUploadConfig} uploadConfig - The normalized upload configuration
+ * @param {string} [commitSha] - Optional commit SHA (defaults to current Git HEAD)
+ * @returns {Promise<{key:string}>}
+ */
+export async function uploadSnapshot(snapshotPath, uploadConfig, commitSha) {
+  // By the time this function is called, the config should be fully normalized
+  // No need to check for repo existence as it's required in the normalized config
+
+  // Run git operations and file reading in parallel
+  const [sha, fileContent] = await Promise.all([
+    // Get the current commit SHA if not provided
+    commitSha || getCurrentCommitSHA(),
+    // Read the snapshot file
+    fs.promises.readFile(snapshotPath),
+  ]);
+
+  // Use values from normalized config
+  const { branch, isPullRequest } = uploadConfig;
+
+  // Create S3 client (uses AWS credentials from environment)
+  const client = new S3Client({
+    region: process.env.AWS_REGION_ARTIFACTS || process.env.AWS_REGION || 'eu-central-1',
+    credentials: fromEnv(),
+  });
+
+  // S3 bucket and key
+  const bucket = 'mui-org-ci';
+  const key = `artifacts/${uploadConfig.repo}/${sha}/size-snapshot.json`;
+
+  // Upload the file first
+  await client.send(
+    new PutObjectCommand({
+      Bucket: bucket,
+      Key: key,
+      Body: fileContent,
+      ContentType: 'application/json',
+    }),
+  );
+
+  // Then add tags to the uploaded object
+  await client.send(
+    new PutObjectTaggingCommand({
+      Bucket: bucket,
+      Key: key,
+      Tagging: {
+        TagSet: [
+          { Key: 'isPullRequest', Value: isPullRequest ? 'yes' : 'no' },
+          { Key: 'branch', Value: branch },
+        ],
+      },
+    }),
+  );
+
+  return { key };
+}

package/src/worker.js

@@ -0,0 +1,332 @@
+import { promisify } from 'util';
+import path from 'path';
+import fs from 'fs/promises';
+import { pathToFileURL } from 'url';
+import webpackCallbackBased from 'webpack';
+import CompressionPlugin from 'compression-webpack-plugin';
+import TerserPlugin from 'terser-webpack-plugin';
+import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
+import { createRequire } from 'node:module';
+import chalk from 'chalk';
+import { byteSizeFormatter } from './formatUtils.js';
+
+/**
+ * @type {(options: webpackCallbackBased.Configuration) => Promise<webpackCallbackBased.Stats>}
+ */
+// @ts-expect-error Can't select the right overload
+const webpack = promisify(webpackCallbackBased);
+const rootDir = process.cwd();
+const require = createRequire(import.meta.url);
+
+// Type declarations are now in types.d.ts
+
+/**
+ * Attempts to extract peer dependencies from a package's package.json
+ * @param {string} packageName - Package to extract peer dependencies from
+ * @returns {Promise<string[]|null>} - Array of peer dependency package names or null if not found
+ */
+async function getPeerDependencies(packageName) {
+  try {
+    // Try to resolve packageName/package.json
+    const packageJsonPath = require.resolve(`${packageName}/package.json`, {
+      paths: [rootDir],
+    });
+
+    // Read and parse the package.json
+    const packageJsonContent = await fs.readFile(packageJsonPath, 'utf8');
+    const packageJson = JSON.parse(packageJsonContent);
+
+    // Extract peer dependencies
+    if (packageJson.peerDependencies) {
+      return Object.keys(packageJson.peerDependencies);
+    }
+
+    return null;
+  } catch (/** @type {any} */ error) {
+    console.warn(
+      chalk.yellow(
+        `Could not resolve peer dependencies for ${chalk.bold(packageName)}: ${error.message}`,
+      ),
+    );
+    return null;
+  }
+}
+
+/**
+ * Creates webpack configuration for bundle size checking
+ * @param {ObjectEntry} entry - Entry point (string or object)
+ * @param {CommandLineArgs} args
+ * @returns {Promise<{configuration: import('webpack').Configuration, externalsArray: string[]}>}
+ */
+async function createWebpackConfig(entry, args) {
+  const analyzerMode = args.analyze ? 'static' : 'disabled';
+  const concatenateModules = !args.accurateBundles;
+
+  const entryName = entry.id;
+  let entryContent;
+  let packageExternals = null;
+
+  // Process peer dependencies if externals aren't specified but import is
+  if (entry.import && !entry.externals) {
+    const packageRoot = entry.import
+      .split('/')
+      .slice(0, entry.import.startsWith('@') ? 2 : 1)
+      .join('/');
+    packageExternals = await getPeerDependencies(packageRoot);
+  }
+
+  if (entry.code && (entry.import || entry.importedNames)) {
+    console.warn(
+      chalk.yellow(
+        `Warning: Both code and import/importedNames are defined for entry "${chalk.bold(entry.id)}". Using code property.`,
+      ),
+    );
+    entryContent = entry.code;
+  } else if (entry.code) {
+    entryContent = entry.code;
+  } else if (entry.import) {
+    if (entry.importedNames && entry.importedNames.length > 0) {
+      // Generate named imports for each name in the importedNames array
+      const imports = entry.importedNames
+        .map((name) => `import { ${name} } from '${entry.import}';`)
+        .join('\n');
+      const logs = entry.importedNames.map((name) => `console.log(${name});`).join('\n');
+      entryContent = `${imports}\n${logs}`;
+    } else {
+      // Default to import * as if importedNames is not defined
+      entryContent = `import * as _ from '${entry.import}';\nconsole.log(_);`;
+    }
+  } else {
+    throw new Error(`Entry "${entry.id}" must have either code or import property defined`);
+  }
+
+  /**
+   * Generate externals function from an array of package names
+   * @param {string[]} packages - Array of package names to exclude (defaults to react and react-dom)
+   * @returns {function} - Function to determine if a request should be treated as external
+   */
+  function createExternalsFunction(packages = ['react', 'react-dom']) {
+    /**
+     * Check if a request should be treated as external
+     * Uses the new recommended format to avoid deprecation warnings
+     * @param {{ context: string, request: string }} params - Object containing context and request
+     * @param {Function} callback - Callback to handle the result
+     */
+    return ({ request }, callback) => {
+      // Iterate through all packages and check if request is equal to or starts with package + '/'
+      for (const pkg of packages) {
+        if (request === pkg || request.startsWith(`${pkg}/`)) {
+          return callback(null, `commonjs ${request}`);
+        }
+      }
+
+      return callback();
+    };
+  }
+
+  // Generate externals based on priorities:
+  // 1. Explicitly defined externals in the entry object
+  // 2. Peer dependencies from package.json if available
+  // 3. Default externals (react, react-dom)
+  const externalsArray =
+    typeof entry === 'object' && entry.externals
+      ? entry.externals
+      : (packageExternals ?? ['react', 'react-dom']);
+
+  /**
+   * @type {import('webpack').Configuration}
+   */
+  const configuration = {
+    externals: [
+      // @ts-expect-error -- webpack types are not compatible with the current version
+      createExternalsFunction(externalsArray),
+    ],
+    mode: 'production',
+    optimization: {
+      concatenateModules,
+      minimizer: [
+        new TerserPlugin({
+          test: /\.m?js(\?.*)?$/i,
+          // Avoid creating LICENSE.txt files for each module
+          // See https://github.com/webpack-contrib/terser-webpack-plugin#remove-comments
+          terserOptions: {
+            format: {
+              comments: false,
+            },
+          },
+          extractComments: false,
+        }),
+      ],
+    },
+    module: {
+      rules: [
+        {
+          test: /\.css$/,
+          use: [require.resolve('css-loader')],
+        },
+        {
+          test: /\.(png|svg|jpg|gif)$/,
+          use: [require.resolve('file-loader')],
+        },
+      ],
+    },
+    output: {
+      filename: '[name].js',
+      library: {
+        // TODO: Use `type: 'module'` once it is supported (currently incompatible with `externals`)
+        name: 'M',
+        type: 'var',
+        // type: 'module',
+      },
+      path: path.join(rootDir, 'build'),
+    },
+    plugins: [
+      new CompressionPlugin({
+        filename: '[path][base][fragment].gz',
+      }),
+      new BundleAnalyzerPlugin({
+        analyzerMode,
+        // We create a report for each bundle so around 120 reports.
+        // Opening them all is spam.
+        // If opened with `webpack --config . --analyze` it'll still open one new tab though.
+        openAnalyzer: false,
+        // '[name].html' not supported: https://github.com/webpack-contrib/webpack-bundle-analyzer/issues/12
+        reportFilename: `${entryName}.html`,
+        logLevel: 'warn',
+      }),
+    ],
+    // A context to the current dir, which has a node_modules folder with workspace dependencies
+    context: rootDir,
+    entry: {
+      // This format is a data: url combined with inline matchResource to obtain a virtual entry.
+      // See https://github.com/webpack/webpack/issues/6437#issuecomment-874466638
+      // See https://webpack.js.org/api/module-methods/#import
+      // See https://webpack.js.org/api/loaders/#inline-matchresource
+      [entryName]: `./index.js!=!data:text/javascript;charset=utf-8;base64,${Buffer.from(entryContent.trim()).toString('base64')}`,
+    },
+    // TODO: 'browserslist:modern'
+    // See https://github.com/webpack/webpack/issues/14203
+    target: 'web',
+  };
+
+  // Return both the configuration and the externals array
+  return { configuration, externalsArray };
+}
+
+/**
+ * Get sizes for a bundle
+ * @param {{ entry: ObjectEntry, args: CommandLineArgs, index: number, total: number }} options
+ * @returns {Promise<Array<[string, { parsed: number, gzip: number }]>>}
+ */
+export default async function getSizes({ entry, args, index, total }) {
+  /** @type {Map<string, { parsed: number, gzip: number }>} */
+  const sizeMap = new Map();
+
+  // Create webpack configuration (now async to handle peer dependency resolution)
+  const { configuration, externalsArray } = await createWebpackConfig(entry, args);
+
+  // eslint-disable-next-line no-console -- process monitoring
+  console.log(chalk.blue(`Compiling ${index + 1}/${total}: ${chalk.bold(`[${entry.id}]`)}`));
+
+  const webpackStats = await webpack(configuration);
+
+  if (!webpackStats) {
+    throw new Error('No webpack stats were returned');
+  }
+
+  if (webpackStats.hasErrors()) {
+    const statsJson = webpackStats.toJson({
+      all: false,
+      entrypoints: true,
+      errors: true,
+    });
+
+    const entrypointKeys = statsJson.entrypoints ? Object.keys(statsJson.entrypoints) : [];
+
+    throw new Error(
+      `${chalk.red.bold('ERROR:')} The following errors occurred during bundling of ${chalk.yellow(entrypointKeys.join(', '))} with webpack: \n${(
+        statsJson.errors || []
+      )
+        .map((error) => {
+          return `${JSON.stringify(error, null, 2)}`;
+        })
+        .join('\n')}`,
+    );
+  }
+
+  const stats = webpackStats.toJson({
+    all: false,
+    assets: true,
+    entrypoints: true,
+    relatedAssets: true,
+  });
+
+  if (!stats.assets) {
+    return Array.from(sizeMap.entries());
+  }
+
+  const assets = new Map(stats.assets.map((asset) => [asset.name, asset]));
+
+  if (stats.entrypoints) {
+    Object.values(stats.entrypoints).forEach((entrypoint) => {
+      let parsedSize = 0;
+      let gzipSize = 0;
+
+      if (entrypoint.assets) {
+        entrypoint.assets.forEach(({ name, size }) => {
+          const asset = assets.get(name);
+          if (asset && asset.related) {
+            const gzippedAsset = asset.related.find((relatedAsset) => {
+              return relatedAsset.type === 'gzipped';
+            });
+
+            if (size !== undefined) {
+              parsedSize += size;
+            }
+
+            if (gzippedAsset && gzippedAsset.size !== undefined) {
+              gzipSize += gzippedAsset.size;
+            }
+          }
+        });
+      }
+
+      if (!entrypoint.name) {
+        throw new Error('Entrypoint name is undefined');
+      }
+
+      sizeMap.set(entrypoint.name, { parsed: parsedSize, gzip: gzipSize });
+    });
+  }
+
+  // Create a concise log message showing import details
+  let entryDetails = '';
+  if (entry.code) {
+    entryDetails = 'code import';
+  } else if (entry.import) {
+    entryDetails = `${entry.import}`;
+    if (entry.importedNames && entry.importedNames.length > 0) {
+      entryDetails += ` [${entry.importedNames.join(', ')}]`;
+    } else {
+      entryDetails += ' [*]';
+    }
+  }
+
+  // Print a summary with all the requested information
+  // Get the size entry for this entry.id from the map
+  const entrySize = sizeMap.get(entry.id) || { parsed: 0, gzip: 0 };
+
+  // eslint-disable-next-line no-console -- process monitoring
+  console.log(
+    `
+${chalk.green('✓')} ${chalk.green.bold(`Completed ${index + 1}/${total}: [${entry.id}]`)}
+  ${chalk.cyan('Import:')}    ${entryDetails}
+  ${chalk.cyan('Externals:')} ${externalsArray.join(', ')}
+  ${chalk.cyan('Sizes:')}     ${chalk.yellow(byteSizeFormatter.format(entrySize.parsed))} (${chalk.yellow(byteSizeFormatter.format(entrySize.gzip))} gzipped)
+${args.analyze ? `  ${chalk.cyan('Analysis:')}  ${chalk.underline(pathToFileURL(path.join(rootDir, 'build', `${entry.id}.html`)).href)}` : ''}
+`.trim(),
+  );
+
+  // Convert the Map to an array of entries for the return value
+  return Array.from(sizeMap.entries());
+}

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "allowJs": true,
+    "checkJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "outDir": "./build",
+    "noEmit": true
+  },
+  "include": ["**/*.js", "**/*.mjs", "**/*.ts"],
+  "exclude": ["node_modules", "build"]
+}