@mui/internal-bundle-size-checker 1.0.9-canary.5 → 1.0.9-canary.51

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

@@ -1,9 +1,10 @@
-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';
+import { escapeFilename } from './strings.js';
 
 const gzipAsync = promisify(zlib.gzip);
 
@@ -25,13 +26,32 @@ const rootDir = process.cwd();
  * @typedef {Record<string, ManifestChunk>} Manifest
  */
 
+/**
+ * Creates a simple string replacement plugin
+ * @param {Record<string, string>} replacements - Object with string replacements
+ * @returns {import('vite').Plugin}
+ */
+function createReplacePlugin(replacements) {
+  return {
+    name: 'string-replace',
+    transform(code) {
+      let transformedCode = code;
+      for (const [search, replace] of Object.entries(replacements)) {
+        transformedCode = transformedCode.replaceAll(search, replace);
+      }
+      return transformedCode !== code ? transformedCode : null;
+    },
+  };
+}
+
 /**
  * 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[]}>}
+ * @param {Record<string, string>} [replacements] - String replacements to apply
+ * @returns {Promise<{ config:import('vite').InlineConfig, treemapPath: string }>}
  */
-async function createViteConfig(entry, args) {
+async function createViteConfig(entry, args, replacements = {}) {
   const entryName = entry.id;
   let entryContent;
 
@@ -59,29 +79,43 @@ async function createViteConfig(entry, args) {
   const externalsArray = entry.externals || ['react', 'react-dom'];
 
   // Ensure build directory exists
-  const outDir = path.join(rootDir, 'build', entryName);
+  const outDir = path.join(rootDir, 'build', escapeFilename(entryName));
   await fs.mkdir(outDir, { recursive: true });
+
+  const treemapPath = path.join(outDir, 'treemap.html');
+
   /**
    * @type {import('vite').InlineConfig}
    */
-  const configuration = {
+  const config = {
     configFile: false,
     root: rootDir,
 
     build: {
       write: true,
-      minify: true,
+      minify: args.debug ? 'esbuild' : true,
       outDir,
       emptyOutDir: true,
+      modulePreload: false,
       rollupOptions: {
-        input: '/index.tsx',
-        external: externalsArray,
+        input: {
+          ignore: '/ignore.ts',
+          bundle: '/entry.tsx',
+        },
+        output: {
+          // The output is for debugging purposes only. Remove all hashes to make it easier to compare two folders
+          // of build output.
+          entryFileNames: `assets/[name].js`,
+          chunkFileNames: `assets/[name].js`,
+          assetFileNames: `assets/[name].[ext]`,
+        },
+        external: (id) => externalsArray.some((ext) => id === ext || id.startsWith(`${ext}/`)),
         plugins: [
           ...(args.analyze
             ? [
                 // File sizes are not accurate, use it only for relative comparison
                 visualizer({
-                  filename: `${outDir}.html`,
+                  filename: treemapPath,
                   title: `Bundle Size Analysis: ${entryName}`,
                   projectRoot: rootDir,
                   open: false,
@@ -100,19 +134,25 @@ 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
     plugins: [
+      createReplacePlugin(replacements),
       {
         name: 'virtual-entry',
         resolveId(id) {
-          if (id === '/index.tsx') {
-            return `\0virtual:index.tsx`;
+          if (id === '/ignore.ts') {
+            return `\0virtual:ignore.ts`;
           }
           if (id === '/entry.tsx') {
             return `\0virtual:entry.tsx`;
@@ -120,7 +160,9 @@ async function createViteConfig(entry, args) {
           return null;
         },
         load(id) {
-          if (id === `\0virtual:index.tsx`) {
+          if (id === `\0virtual:ignore.ts`) {
+            // ignore chunk will contain the vite preload code, we can ignore this chunk in the output
+            // See https://github.com/vitejs/vite/issues/18551
             return transformWithEsbuild(`import('/entry.tsx').then(console.log)`, id);
           }
           if (id === `\0virtual:entry.tsx`) {
@@ -132,7 +174,7 @@ async function createViteConfig(entry, args) {
     ],
   };
 
-  return { configuration, externalsArray };
+  return { config, treemapPath };
 }
 
 /**
@@ -173,32 +215,49 @@ 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 === 'bundle');
 
   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;
+    if (chunk.name === 'preload-helper') {
+      // Skip the preload-helper chunk as it is not relevant for bundle size
+      return null;
+    }
 
     // Calculate sizes
     const parsed = Buffer.byteLength(fileContent);
@@ -206,28 +265,34 @@ async function processBundleSizes(outDir, entryName) {
     const gzipSize = Buffer.byteLength(gzipBuffer);
 
     // 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 === 'bundle' ? 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 }>>}
+ * @param {Record<string, string>} [replacements] - String replacements to apply
+ * @returns {Promise<{ sizes: Map<string, SizeSnapshotEntry>, treemapPath: string }>}
  */
-export async function getViteSizes(entry, args) {
+export async function getBundleSizes(entry, args, replacements) {
   // Create vite configuration
-  const { configuration } = await createViteConfig(entry, args);
-  const outDir = path.join(rootDir, 'build', entry.id);
+  const { config, treemapPath } = await createViteConfig(entry, args, replacements);
 
   // Run vite build
-  await build(configuration);
+  const { output } = /** @type {import('vite').Rollup.RollupOutput} */ (await build(config));
+  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);
+  const sizes = await processBundleSizes(output, entry.id);
+
+  return { sizes, treemapPath };
 }

package/src/cli.js

@@ -1,17 +1,50 @@
 // @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 { pathToFileURL } from 'node:url';
+import chalk from 'chalk';
 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';
+import { DASHBOARD_ORIGIN } from './constants.js';
+
+/**
+ * @param {string} repo
+ * @param {number} prNumber
+ * @param {string} bundleSizeInfo
+ */
+function formatComment(repo, prNumber, bundleSizeInfo) {
+  return [
+    '## Bundle size report',
+    bundleSizeInfo,
+    '<hr>',
+    `Check out the [code infra dashboard](${DASHBOARD_ORIGIN}/repository/${repo}/prs/${prNumber}) for more information about this PR.`,
+  ].join('\n\n');
+}
+
+/**
+ */
+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 +56,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,
@@ -89,13 +102,60 @@ async function getWebpackSizes(args, config) {
 
   const sizeArrays = await Promise.all(
     validEntries.map((entry, index) =>
-      worker.run({ entry, args, index, total: validEntries.length }),
+      worker.run({ entry, args, index, total: validEntries.length, replace: config.replace }),
     ),
   );
 
   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 = formatComment(
+      ciInfo.slug,
+      prNumber,
+      `Bundle size will be reported once [CircleCI build #${circleBuildNum}](${circleBuildUrl}) finishes.\n\nStatus: 🟠 Processing...`,
+    );
+
+    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 +166,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 +186,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,18 +213,27 @@ 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}`);
+  console.log(
+    `Bundle size snapshot written to ${chalk.underline(pathToFileURL(snapshotDestPath))}`,
+  );
 
   // Upload the snapshot if upload configuration is provided and not null
   if (config && config.upload) {
@@ -169,6 +248,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',
+      formatComment(ciInfo.slug, prNumber, report),
+    );
+
+    // eslint-disable-next-line no-console
+    console.log(`PR comment posted/updated for PR #${prNumber}`);
   }
 }
 
@@ -181,12 +311,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 +319,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', {