@mui/internal-bundle-size-checker 1.0.9-canary.4 → 1.0.9-canary.40

package/README.md

@@ -19,9 +19,12 @@ bundle-size-checker [options]
 
 Options:
 
-- `--analyze`: Creates a webpack-bundle-analyzer report for each bundle
-- `--accurateBundles`: Displays used bundles accurately at the cost of more CPU cycles
+- `--analyze`: Creates a report for each bundle (using rollup-plugin-visualizer)
+- `--debug`: Build with readable output (no name mangling or whitespace collapse, but still tree-shake)
+- `--verbose`: Show more detailed information during compilation
 - `--output`, `-o`: Path to output the size snapshot JSON file
+- `--filter`, `-F`: Filter entry points by glob pattern(s) applied to their IDs
+- `--concurrency`, `-c`: Number of workers to use for parallel processing
 
 ### Configuration
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/internal-bundle-size-checker",
-  "version": "1.0.9-canary.4",
+  "version": "1.0.9-canary.40",
   "description": "Bundle size checker for MUI packages.",
   "type": "module",
   "main": "./src/index.js",
@@ -19,38 +19,25 @@
     "./browser": "./src/browser.js"
   },
   "dependencies": {
-    "@aws-sdk/client-s3": "^3.515.0",
-    "@aws-sdk/credential-providers": "^3.787.0",
-    "@babel/core": "^7.27.4",
+    "@aws-sdk/client-s3": "^3.883.0",
+    "@aws-sdk/credential-providers": "^3.883.0",
     "@octokit/rest": "^22.0.0",
-    "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.27.1",
-    "babel-loader": "^10.0.0",
-    "chalk": "^5.4.1",
-    "compression-webpack-plugin": "^10.0.0",
-    "css-loader": "^7.1.2",
-    "env-ci": "^11.1.0",
-    "execa": "^7.2.0",
-    "fast-glob": "^3.3.2",
-    "file-loader": "^6.2.0",
+    "chalk": "^5.6.0",
+    "env-ci": "^11.2.0",
+    "execa": "^9.6.0",
     "git-url-parse": "^16.1.0",
     "micromatch": "^4.0.8",
-    "piscina": "^4.2.1",
-    "rollup-plugin-visualizer": "^6.0.1",
-    "terser-webpack-plugin": "^5.3.10",
-    "vite": "^6.3.5",
-    "webpack": "^5.90.3",
-    "webpack-bundle-analyzer": "^4.10.1",
-    "yargs": "^17.7.2"
+    "piscina": "^5.1.3",
+    "rollup-plugin-visualizer": "^6.0.3",
+    "vite": "^7.1.4",
+    "yargs": "^18.0.0"
   },
   "devDependencies": {
     "@types/env-ci": "^3.1.4",
     "@types/micromatch": "^4.0.9",
-    "@types/webpack": "^5.28.5",
-    "@types/webpack-bundle-analyzer": "^4.7.0",
     "@types/yargs": "^17.0.33"
   },
-  "gitSha": "e8405929964e683cd126735235fa15d68c4c33f4",
+  "gitSha": "f9fb2233d5f6d847f6205b345bb829a712eea199",
   "scripts": {
     "typescript": "tsc -p tsconfig.json",
     "test": "pnpm -w test --project @mui/internal-bundle-size-checker"

package/src/{viteBuilder.js → builder.js}

@@ -1,7 +1,7 @@
-import path from 'path';
-import fs from 'fs/promises';
-import * as zlib from 'zlib';
-import { promisify } from 'util';
+import path from 'node:path';
+import fs from 'node:fs/promises';
+import * as zlib from 'node:zlib';
+import { promisify } from 'node:util';
 import { build, transformWithEsbuild } from 'vite';
 import { visualizer } from 'rollup-plugin-visualizer';
 
@@ -29,7 +29,7 @@ const rootDir = process.cwd();
  * Creates vite configuration for bundle size checking
  * @param {ObjectEntry} entry - Entry point (string or object)
  * @param {CommandLineArgs} args
- * @returns {Promise<{configuration: import('vite').InlineConfig, externalsArray: string[]}>}
+ * @returns {Promise<import('vite').InlineConfig>}
  */
 async function createViteConfig(entry, args) {
   const entryName = entry.id;
@@ -70,12 +70,12 @@ async function createViteConfig(entry, args) {
 
     build: {
       write: true,
-      minify: true,
+      minify: args.debug ? 'esbuild' : true,
       outDir,
       emptyOutDir: true,
       rollupOptions: {
         input: '/index.tsx',
-        external: externalsArray,
+        external: (id) => externalsArray.some((ext) => id === ext || id.startsWith(`${ext}/`)),
         plugins: [
           ...(args.analyze
             ? [
@@ -100,10 +100,15 @@ async function createViteConfig(entry, args) {
 
     esbuild: {
       legalComments: 'none',
+      ...(args.debug && {
+        minifyIdentifiers: false,
+        minifyWhitespace: false,
+        minifySyntax: true, // This enables tree-shaking and other safe optimizations
+      }),
     },
 
     define: {
-      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production'),
+      'process.env.NODE_ENV': JSON.stringify('production'),
     },
     logLevel: args.verbose ? 'info' : 'silent',
     // Add plugins to handle virtual entry points
@@ -132,7 +137,7 @@ async function createViteConfig(entry, args) {
     ],
   };
 
-  return { configuration, externalsArray };
+  return configuration;
 }
 
 /**
@@ -173,61 +178,81 @@ function walkDependencyTree(chunkKey, manifest, visited = new Set()) {
 
 /**
  * Process vite output to extract bundle sizes
- * @param {string} outDir - The output directory
+ * @param {import('vite').Rollup.RollupOutput['output']} output - The Vite output
  * @param {string} entryName - The entry name
- * @returns {Promise<Map<string, { parsed: number, gzip: number }>>} - Map of bundle names to size information
+ * @returns {Promise<Map<string, SizeSnapshotEntry>>} - Map of bundle names to size information
  */
-async function processBundleSizes(outDir, entryName) {
+async function processBundleSizes(output, entryName) {
+  const chunksByFileName = new Map(output.map((chunk) => [chunk.fileName, chunk]));
+
   // Read the manifest file to find the generated chunks
-  const manifestPath = path.join(outDir, '.vite/manifest.json');
-  const manifestContent = await fs.readFile(manifestPath, 'utf8');
+  const manifestChunk = chunksByFileName.get('.vite/manifest.json');
+  if (manifestChunk?.type !== 'asset') {
+    throw new Error(`Manifest file not found in output for entry: ${entryName}`);
+  }
+
+  const manifestContent =
+    typeof manifestChunk.source === 'string'
+      ? manifestChunk.source
+      : new TextDecoder().decode(manifestChunk.source);
+
   /** @type {Manifest} */
   const manifest = JSON.parse(manifestContent);
 
   // Find the main entry point JS file in the manifest
-  const mainEntry = manifest['virtual:entry.tsx'];
+  const mainEntry = Object.entries(manifest).find(([_, entry]) => entry.name === '_virtual_entry');
 
   if (!mainEntry) {
     throw new Error(`No main entry found in manifest for ${entryName}`);
   }
 
   // Walk the dependency tree to get all chunks that are part of this entry
-  const allChunks = walkDependencyTree('virtual:entry.tsx', manifest);
+  const allChunks = walkDependencyTree(mainEntry[0], manifest);
 
   // Process each chunk in the dependency tree in parallel
   const chunkPromises = Array.from(allChunks, async (chunkKey) => {
     const chunk = manifest[chunkKey];
-    const filePath = path.join(outDir, chunk.file);
-    const fileContent = await fs.readFile(filePath, 'utf8');
+    const outputChunk = chunksByFileName.get(chunk.file);
+    if (outputChunk?.type !== 'chunk') {
+      throw new Error(`Output chunk not found for ${chunk.file}`);
+    }
+    const fileContent = outputChunk.code;
 
     // Calculate sizes
     const parsed = Buffer.byteLength(fileContent);
     const gzipBuffer = await gzipAsync(fileContent, { level: zlib.constants.Z_BEST_COMPRESSION });
     const gzipSize = Buffer.byteLength(gzipBuffer);
 
+    if (chunk.isEntry) {
+      return null;
+    }
+
     // Use chunk key as the name, or fallback to entry name for main chunk
-    const chunkName = chunkKey === 'virtual:entry.tsx' ? entryName : chunkKey;
+    const chunkName = chunk.name === '_virtual_entry' ? entryName : chunk.name || chunkKey;
     return /** @type {const} */ ([chunkName, { parsed, gzip: gzipSize }]);
   });
 
   const chunkEntries = await Promise.all(chunkPromises);
-  return new Map(chunkEntries);
+  return new Map(/** @type {[string, SizeSnapshotEntry][]} */ (chunkEntries.filter(Boolean)));
 }
 
 /**
  * Get sizes for a vite bundle
  * @param {ObjectEntry} entry - The entry configuration
  * @param {CommandLineArgs} args - Command line arguments
- * @returns {Promise<Map<string, { parsed: number, gzip: number }>>}
+ * @returns {Promise<Map<string, SizeSnapshotEntry>>}
  */
-export async function getViteSizes(entry, args) {
+export async function getBundleSizes(entry, args) {
   // Create vite configuration
-  const { configuration } = await createViteConfig(entry, args);
-  const outDir = path.join(rootDir, 'build', entry.id);
+  const configuration = await createViteConfig(entry, args);
 
   // Run vite build
-  await build(configuration);
+  const { output } = /** @type {import('vite').Rollup.RollupOutput} */ (await build(configuration));
+  const manifestChunk = output.find((chunk) => chunk.fileName === '.vite/manifest.json');
+  if (!manifestChunk) {
+    throw new Error(`Manifest file not found in output for entry: ${entry.id}`);
+  }
 
   // Process the output to get bundle sizes
-  return processBundleSizes(outDir, entry.id);
+  return processBundleSizes(output, entry.id);
 }

package/src/cli.js

@@ -1,17 +1,33 @@
 // @ts-check
 
-import path from 'path';
-import os from 'os';
-import fs from 'fs/promises';
+import path from 'node:path';
+import os from 'node:os';
+import fs from 'node:fs/promises';
 import yargs from 'yargs';
 import { Piscina } from 'piscina';
 import micromatch from 'micromatch';
-import { execa } from 'execa';
-import gitUrlParse from 'git-url-parse';
+import envCi from 'env-ci';
 import { loadConfig } from './configLoader.js';
 import { uploadSnapshot } from './uploadSnapshot.js';
 import { renderMarkdownReport } from './renderMarkdownReport.js';
 import { octokit } from './github.js';
+import { getCurrentRepoInfo } from './git.js';
+import { notifyPr } from './notifyPr.js';
+
+/**
+ */
+function getCiInfo() {
+  const ciInfo = envCi();
+  if (!ciInfo.isCi) {
+    return null;
+  }
+  switch (ciInfo.name) {
+    case 'CircleCI':
+      return ciInfo;
+    default:
+      throw new Error(`Unsupported CI environment: ${ciInfo.name}`);
+  }
+}
 
 /**
  * @typedef {import('./sizeDiff.js').SizeSnapshot} SizeSnapshot
@@ -23,32 +39,12 @@ const DEFAULT_CONCURRENCY = os.availableParallelism();
 const rootDir = process.cwd();
 
 /**
- * Gets the current repository owner and name from git remote
- * @returns {Promise<{owner: string | null, repo: string | null}>}
- */
-async function getCurrentRepoInfo() {
-  try {
-    const { stdout } = await execa('git', ['remote', 'get-url', 'origin']);
-    const parsed = gitUrlParse(stdout.trim());
-    return {
-      owner: parsed.owner,
-      repo: parsed.name,
-    };
-  } catch (error) {
-    return {
-      owner: null,
-      repo: null,
-    };
-  }
-}
-
-/**
- * creates size snapshot for every bundle that built with webpack
+ * creates size snapshot for every bundle
  * @param {CommandLineArgs} args
  * @param {NormalizedBundleSizeCheckerConfig} config - The loaded configuration
- * @returns {Promise<Array<[string, { parsed: number, gzip: number }]>>}
+ * @returns {Promise<Array<[string, SizeSnapshotEntry]>>}
  */
-async function getWebpackSizes(args, config) {
+async function getBundleSizes(args, config) {
   const worker = new Piscina({
     filename: new URL('./worker.js', import.meta.url).href,
     maxThreads: args.concurrency || DEFAULT_CONCURRENCY,
@@ -96,6 +92,51 @@ async function getWebpackSizes(args, config) {
   return sizeArrays.flat();
 }
 
+/**
+ * Posts initial "in progress" PR comment with CircleCI build information
+ * @returns {Promise<void>}
+ */
+async function postInitialPrComment() {
+  // /** @type {envCi.CircleCiEnv} */
+  const ciInfo = getCiInfo();
+
+  if (!ciInfo || !ciInfo.isPr) {
+    return;
+  }
+
+  // In CI PR builds, all required info must be present
+  if (!ciInfo.slug || !ciInfo.pr) {
+    throw new Error('PR commenting enabled but repository information missing in CI PR build');
+  }
+
+  const prNumber = Number(ciInfo.pr);
+  const circleBuildNum = process.env.CIRCLE_BUILD_NUM;
+  const circleBuildUrl = process.env.CIRCLE_BUILD_URL;
+
+  if (!circleBuildNum || !circleBuildUrl) {
+    throw new Error(
+      'PR commenting enabled but CircleCI environment variables missing in CI PR build',
+    );
+  }
+
+  try {
+    // eslint-disable-next-line no-console
+    console.log('Posting initial PR comment...');
+
+    const initialComment = `## Bundle size report
+
+Bundle size will be reported once [CircleCI build #${circleBuildNum}](${circleBuildUrl}) finishes.`;
+
+    await notifyPr(ciInfo.slug, prNumber, 'bundle-size-report', initialComment);
+
+    // eslint-disable-next-line no-console
+    console.log(`Initial PR comment posted for PR #${prNumber}`);
+  } catch (/** @type {any} */ error) {
+    console.error('Failed to post initial PR comment:', error.message);
+    // Don't fail the build for comment failures
+  }
+}
+
 /**
  * Report command handler
  * @param {ReportCommandArgs} argv - Command line arguments
@@ -106,7 +147,7 @@ async function reportCommand(argv) {
   // Get current repo info and coerce with provided arguments
   const currentRepo = await getCurrentRepoInfo();
   const owner = argOwner ?? currentRepo.owner;
-  const repo = argRepo ?? currentRepo.repo;
+  const repo = argRepo ?? currentRepo.name;
 
   if (typeof pr !== 'number') {
     throw new Error('Invalid pull request number. Please provide a valid --pr option.');
@@ -126,8 +167,18 @@ async function reportCommand(argv) {
     pull_number: pr,
   });
 
+  const getMergeBaseFromGithubApi = async (
+    /** @type {string} */ base,
+    /** @type {string} */ head,
+  ) => {
+    const { data } = await octokit.repos.compareCommits({ owner, repo, base, head });
+    return data.merge_base_commit.sha;
+  };
+
   // Generate and print the markdown report
-  const report = await renderMarkdownReport(prInfo);
+  const report = await renderMarkdownReport(prInfo, {
+    getMergeBase: getMergeBaseFromGithubApi,
+  });
   // eslint-disable-next-line no-console
   console.log(report);
 }
@@ -143,15 +194,22 @@ async function run(argv) {
 
   const config = await loadConfig(rootDir);
 
+  // Post initial PR comment if enabled and in CI environment
+  if (config && config.comment) {
+    await postInitialPrComment();
+  }
+
   // eslint-disable-next-line no-console
   console.log(`Starting bundle size snapshot creation with ${concurrency} workers...`);
 
-  const webpackSizes = await getWebpackSizes(argv, config);
-  const bundleSizes = Object.fromEntries(webpackSizes.sort((a, b) => a[0].localeCompare(b[0])));
+  const bundleSizes = await getBundleSizes(argv, config);
+  const sortedBundleSizes = Object.fromEntries(
+    bundleSizes.sort((a, b) => a[0].localeCompare(b[0])),
+  );
 
   // Ensure output directory exists
   await fs.mkdir(path.dirname(snapshotDestPath), { recursive: true });
-  await fs.writeFile(snapshotDestPath, JSON.stringify(bundleSizes, null, 2));
+  await fs.writeFile(snapshotDestPath, JSON.stringify(sortedBundleSizes, null, 2));
 
   // eslint-disable-next-line no-console
   console.log(`Bundle size snapshot written to ${snapshotDestPath}`);
@@ -169,6 +227,57 @@ async function run(argv) {
       // Exit with error code to indicate failure
       process.exit(1);
     }
+  } else {
+    // eslint-disable-next-line no-console
+    console.log('No upload configuration provided, skipping upload.');
+  }
+
+  // Post PR comment if enabled and in CI environment
+  if (config && config.comment) {
+    const ciInfo = getCiInfo();
+
+    // Skip silently if not in CI or not a PR
+    if (!ciInfo || !ciInfo.isPr) {
+      return;
+    }
+
+    // In CI PR builds, all required info must be present
+    if (!ciInfo.slug || !ciInfo.pr) {
+      throw new Error('PR commenting enabled but repository information missing in CI PR build');
+    }
+
+    const prNumber = Number(ciInfo.pr);
+
+    // eslint-disable-next-line no-console
+    console.log('Generating PR comment with bundle size changes...');
+
+    // Get tracked bundles from config
+    const trackedBundles = config.entrypoints
+      .filter((entry) => entry.track === true)
+      .map((entry) => entry.id);
+
+    // Get PR info for renderMarkdownReport
+    const { data: prInfo } = await octokit.pulls.get({
+      owner: ciInfo.slug.split('/')[0],
+      repo: ciInfo.slug.split('/')[1],
+      pull_number: prNumber,
+    });
+
+    // Generate markdown report
+    const report = await renderMarkdownReport(prInfo, {
+      track: trackedBundles.length > 0 ? trackedBundles : undefined,
+    });
+
+    // Post or update PR comment
+    await notifyPr(
+      ciInfo.slug,
+      prNumber,
+      'bundle-size-report',
+      `## Bundle size report\n\n${report}`,
+    );
+
+    // eslint-disable-next-line no-console
+    console.log(`PR comment posted/updated for PR #${prNumber}`);
   }
 }
 
@@ -181,12 +290,7 @@ yargs(process.argv.slice(2))
         return cmdYargs
           .option('analyze', {
             default: false,
-            describe: 'Creates a webpack-bundle-analyzer report for each bundle.',
-            type: 'boolean',
-          })
-          .option('accurateBundles', {
-            default: false,
-            describe: 'Displays used bundles accurately at the cost of more CPU cycles.',
+            describe: 'Creates a report for each bundle.',
             type: 'boolean',
           })
           .option('verbose', {
@@ -194,9 +298,10 @@ yargs(process.argv.slice(2))
             describe: 'Show more detailed information during compilation.',
             type: 'boolean',
           })
-          .option('vite', {
+          .option('debug', {
             default: false,
-            describe: 'Use Vite instead of webpack for bundling.',
+            describe:
+              'Build with readable output (no name mangling or whitespace collapse, but still tree-shake).',
             type: 'boolean',
           })
           .option('output', {