@mui/internal-bundle-size-checker 1.0.9-canary.3 → 1.0.9-canary.31

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.3",
+  "version": "1.0.9-canary.31",
   "description": "Bundle size checker for MUI packages.",
   "type": "module",
   "main": "./src/index.js",
@@ -19,36 +19,26 @@
     "./browser": "./src/browser.js"
   },
   "dependencies": {
-    "@aws-sdk/client-s3": "^3.515.0",
-    "@aws-sdk/credential-providers": "^3.787.0",
-    "@babel/core": "^7.27.4",
-    "@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",
+    "@aws-sdk/client-s3": "^3.864.0",
+    "@aws-sdk/credential-providers": "^3.864.0",
+    "@octokit/auth-action": "^6.0.1",
+    "@octokit/rest": "^22.0.0",
+    "chalk": "^5.5.0",
+    "env-ci": "^11.1.1",
+    "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.2",
+    "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": "d07b12b0d9e2420d77cb9b7212b836e588b03e1d",
+  "gitSha": "2f3a57356b8d7dac3a6970285fa99d43fd6125d2",
   "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,7 +70,7 @@ async function createViteConfig(entry, args) {
 
     build: {
       write: true,
-      minify: true,
+      minify: args.debug ? 'esbuild' : true,
       outDir,
       emptyOutDir: true,
       rollupOptions: {
@@ -100,6 +100,11 @@ 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: {
@@ -132,7 +137,7 @@ async function createViteConfig(entry, args) {
     ],
   };
 
-  return { configuration, externalsArray };
+  return configuration;
 }
 
 /**
@@ -173,32 +178,45 @@ 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
  */
-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);
@@ -206,7 +224,7 @@ 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 === '_virtual_entry' ? entryName : chunkKey;
     return /** @type {const} */ ([chunkName, { parsed, gzip: gzipSize }]);
   });
 
@@ -220,14 +238,17 @@ async function processBundleSizes(outDir, entryName) {
  * @param {CommandLineArgs} args - Command line arguments
  * @returns {Promise<Map<string, { parsed: number, gzip: number }>>}
  */
-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,13 +1,16 @@
 // @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 { loadConfig } from './configLoader.js';
 import { uploadSnapshot } from './uploadSnapshot.js';
+import { renderMarkdownReport } from './renderMarkdownReport.js';
+import { octokit } from './github.js';
+import { getCurrentRepoInfo } from './git.js';
 
 /**
  * @typedef {import('./sizeDiff.js').SizeSnapshot} SizeSnapshot
@@ -19,12 +22,12 @@ const DEFAULT_CONCURRENCY = os.availableParallelism();
 const rootDir = process.cwd();
 
 /**
- * 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 }]>>}
  */
-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,
@@ -72,6 +75,42 @@ async function getWebpackSizes(args, config) {
   return sizeArrays.flat();
 }
 
+/**
+ * Report command handler
+ * @param {ReportCommandArgs} argv - Command line arguments
+ */
+async function reportCommand(argv) {
+  const { pr, owner: argOwner, repo: argRepo } = argv;
+
+  // Get current repo info and coerce with provided arguments
+  const currentRepo = await getCurrentRepoInfo();
+  const owner = argOwner ?? currentRepo.owner;
+  const repo = argRepo ?? currentRepo.repo;
+
+  if (typeof pr !== 'number') {
+    throw new Error('Invalid pull request number. Please provide a valid --pr option.');
+  }
+
+  // Validate that both owner and repo are available
+  if (!owner || !repo) {
+    throw new Error(
+      'Repository owner and name are required. Please provide --owner and --repo options, or run this command from within a git repository.',
+    );
+  }
+
+  // Fetch PR information
+  const { data: prInfo } = await octokit.pulls.get({
+    owner,
+    repo,
+    pull_number: pr,
+  });
+
+  // Generate and print the markdown report
+  const report = await renderMarkdownReport(prInfo);
+  // eslint-disable-next-line no-console
+  console.log(report);
+}
+
 /**
  * Main runner function
  * @param {CommandLineArgs} argv - Command line arguments
@@ -86,12 +125,14 @@ async function run(argv) {
   // 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}`);
@@ -109,56 +150,79 @@ 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.');
   }
 }
 
 yargs(process.argv.slice(2))
-  // @ts-expect-error
-  .command({
-    command: '$0',
-    describe: 'Saves a size snapshot in size-snapshot.json',
-    builder: (cmdYargs) => {
-      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.',
-          type: 'boolean',
-        })
-        .option('verbose', {
-          default: false,
-          describe: 'Show more detailed information during compilation.',
-          type: 'boolean',
-        })
-        .option('vite', {
-          default: false,
-          describe: 'Use Vite instead of webpack for bundling.',
-          type: 'boolean',
-        })
-        .option('output', {
-          alias: 'o',
-          describe:
-            'Path to output the size snapshot JSON file (defaults to size-snapshot.json in current directory).',
-          type: 'string',
-        })
-        .option('filter', {
-          alias: 'F',
-          describe: 'Filter entry points by glob pattern(s) applied to their IDs',
-          type: 'array',
-        })
-        .option('concurrency', {
-          alias: 'c',
-          describe: 'Number of workers to use for parallel processing',
-          type: 'number',
-          default: DEFAULT_CONCURRENCY,
-        });
-    },
-    handler: run,
-  })
+  .command(
+    /** @type {import('yargs').CommandModule<{}, CommandLineArgs>} */ ({
+      command: '$0',
+      describe: 'Saves a size snapshot in size-snapshot.json',
+      builder: (cmdYargs) => {
+        return cmdYargs
+          .option('analyze', {
+            default: false,
+            describe: 'Creates a report for each bundle.',
+            type: 'boolean',
+          })
+          .option('verbose', {
+            default: false,
+            describe: 'Show more detailed information during compilation.',
+            type: 'boolean',
+          })
+          .option('debug', {
+            default: false,
+            describe:
+              'Build with readable output (no name mangling or whitespace collapse, but still tree-shake).',
+            type: 'boolean',
+          })
+          .option('output', {
+            alias: 'o',
+            describe:
+              'Path to output the size snapshot JSON file (defaults to size-snapshot.json in current directory).',
+            type: 'string',
+          })
+          .option('filter', {
+            alias: 'F',
+            describe: 'Filter entry points by glob pattern(s) applied to their IDs',
+            type: 'array',
+          })
+          .option('concurrency', {
+            alias: 'c',
+            describe: 'Number of workers to use for parallel processing',
+            type: 'number',
+            default: DEFAULT_CONCURRENCY,
+          });
+      },
+      handler: run,
+    }),
+  )
+  .command(
+    /** @type {import('yargs').CommandModule<{}, ReportCommandArgs>} */ ({
+      command: 'report',
+      describe: 'Generate a markdown report for a pull request',
+      builder: (cmdYargs) => {
+        return cmdYargs
+          .option('pr', {
+            describe: 'Pull request number',
+            type: 'number',
+            demandOption: true,
+          })
+          .option('owner', {
+            describe: 'Repository owner (defaults to current git repo owner)',
+            type: 'string',
+          })
+          .option('repo', {
+            describe: 'Repository name (defaults to current git repo name)',
+            type: 'string',
+          });
+      },
+      handler: reportCommand,
+    }),
+  )
   .help()
   .strict(true)
   .version(false)

package/src/configLoader.js

@@ -2,8 +2,8 @@
  * Utility to load the bundle-size-checker configuration
  */
 
-import fs from 'fs';
-import path from 'path';
+import fs from 'node:fs';
+import path from 'node:path';
 import envCi from 'env-ci';
 
 /**
@@ -29,6 +29,9 @@ async function loadConfigFile(configPath) {
       resolvedConfig = await config;
     } else if (typeof config === 'function') {
       resolvedConfig = await config();
+    } else {
+      // Handle plain config objects
+      resolvedConfig = config;
     }
 
     return resolvedConfig;

package/src/fetchSnapshot.js

@@ -1,8 +1,10 @@
+// This file must be importable in the browser
+
 /**
  *
  * @param {string} repo - The name of the repository e.g. 'mui/material-ui'
  * @param {string} sha - The commit SHA
- * @returns {Promise<import('./sizeDiff').SizeSnapshot>} - The size snapshot data
+ * @returns {Promise<import('./sizeDiff.js').SizeSnapshot>} - The size snapshot data
  */
 export async function fetchSnapshot(repo, sha) {
   const urlsToTry = [
@@ -25,7 +27,7 @@ export async function fetchSnapshot(repo, sha) {
         continue;
       }
 
-      return response.json();
+      return /** @type {Promise<any>} */ (response.json());
     } catch (error) {
       lastError = error;
       continue;
@@ -34,61 +36,3 @@ export async function fetchSnapshot(repo, sha) {
 
   throw new Error(`Failed to fetch snapshot`, { cause: lastError });
 }
-
-/**
- * Gets parent commits for a given commit SHA using GitHub API
- * @param {string} repo - Repository name (e.g., 'mui/material-ui')
- * @param {string} commit - The commit SHA to start from
- * @param {number} depth - How many commits to retrieve (including the starting commit)
- * @returns {Promise<string[]>} Array of commit SHAs in chronological order (excluding the starting commit)
- */
-async function getParentCommits(repo, commit, depth = 4) {
-  try {
-    const response = await fetch(
-      `https://api.github.com/repos/${repo}/commits?sha=${commit}&per_page=${depth}`,
-    );
-    if (!response.ok) {
-      throw new Error(`GitHub API request failed: ${response.status}`);
-    }
-
-    /** @type {{ sha: string }[]} */
-    const commits = await response.json();
-    // Skip the first commit (which is the starting commit) and return the rest
-    return commits.slice(1).map((commitDetails) => commitDetails.sha);
-  } catch (/** @type {any} */ error) {
-    console.warn(`Failed to get parent commits for ${commit}: ${error.message}`);
-    return [];
-  }
-}
-
-/**
- * Attempts to fetch a snapshot with fallback to parent commits
- * @param {string} repo - Repository name
- * @param {string} commit - The commit SHA to start from
- * @param {number} [fallbackDepth=3] - How many parent commits to try as fallback
- * @returns {Promise<{snapshot: import('./sizeDiff').SizeSnapshot | null, actualCommit: string | null}>}
- */
-export async function fetchSnapshotWithFallback(repo, commit, fallbackDepth = 3) {
-  // Try the original commit first
-  try {
-    const snapshot = await fetchSnapshot(repo, commit);
-    return { snapshot, actualCommit: commit };
-  } catch (/** @type {any} */ error) {
-    // fallthrough to parent commits if the snapshot for the original commit fails
-  }
-
-  // Get parent commits and try each one
-  const parentCommits = await getParentCommits(repo, commit, fallbackDepth + 1);
-
-  for (const parentCommit of parentCommits) {
-    try {
-      // eslint-disable-next-line no-await-in-loop
-      const snapshot = await fetchSnapshot(repo, parentCommit);
-      return { snapshot, actualCommit: parentCommit };
-    } catch {
-      // fallthrough to the next parent commit if fetching fails
-    }
-  }
-
-  return { snapshot: null, actualCommit: null };
-}

package/src/fetchSnapshotWithFallback.js

@@ -0,0 +1,34 @@
+import { fetchSnapshot } from './fetchSnapshot.js';
+import { getParentCommits } from './git.js';
+
+/**
+ * Attempts to fetch a snapshot with fallback to parent commits
+ * @param {string} repo - Repository name
+ * @param {string} commit - The commit SHA to start from
+ * @param {number} [fallbackDepth=3] - How many parent commits to try as fallback
+ * @returns {Promise<{snapshot: import('./sizeDiff.js').SizeSnapshot | null, actualCommit: string | null}>}
+ */
+export async function fetchSnapshotWithFallback(repo, commit, fallbackDepth = 3) {
+  // Try the original commit first
+  try {
+    const snapshot = await fetchSnapshot(repo, commit);
+    return { snapshot, actualCommit: commit };
+  } catch (/** @type {any} */ error) {
+    // fallthrough to parent commits if the snapshot for the original commit fails
+  }
+
+  // Get parent commits and try each one
+  const parentCommits = await getParentCommits(repo, commit, fallbackDepth);
+
+  for (const parentCommit of parentCommits) {
+    try {
+      // eslint-disable-next-line no-await-in-loop
+      const snapshot = await fetchSnapshot(repo, parentCommit);
+      return { snapshot, actualCommit: parentCommit };
+    } catch {
+      // fallthrough to the next parent commit if fetching fails
+    }
+  }
+
+  return { snapshot: null, actualCommit: null };
+}

package/src/git.js

@@ -0,0 +1,45 @@
+import { execa } from 'execa';
+import gitUrlParse from 'git-url-parse';
+
+/**
+ * Gets parent commits for a given commit SHA using git CLI
+ * @param {string} repo - Repository name (e.g., 'mui/material-ui') - ignored for git CLI
+ * @param {string} commit - The commit SHA to start from
+ * @param {number} depth - How many commits to retrieve (including the starting commit)
+ * @returns {Promise<string[]>} Array of commit SHAs in chronological order (excluding the starting commit)
+ */
+export async function getParentCommits(repo, commit, depth = 3) {
+  const { stdout } = await execa('git', ['rev-list', `--max-count=${depth}`, '--skip=1', commit]);
+  return stdout.trim().split('\n').filter(Boolean);
+}
+
+/**
+ * Compares two commits and returns merge base information using git CLI
+ * @param {string} base - Base commit SHA
+ * @param {string} head - Head commit SHA
+ * @returns {Promise<string>} Object with merge base commit info
+ */
+export async function getMergeBase(base, head) {
+  const { stdout } = await execa('git', ['merge-base', base, head]);
+  return stdout.trim();
+}
+
+/**
+ * Gets the current repository owner and name from git remote
+ * @returns {Promise<{owner: string | null, repo: string | null}>}
+ */
+export 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,
+    };
+  }
+}

package/src/github.js

@@ -0,0 +1,11 @@
+// @ts-check
+
+import { Octokit } from '@octokit/rest';
+import { createActionAuth } from '@octokit/auth-action';
+
+// Create and export Octokit instance
+/** @type {import('@octokit/rest').Octokit} */
+export const octokit = new Octokit({
+  authStrategy: process.env.GITHUB_TOKEN ? createActionAuth : undefined,
+  userAgent: 'bundle-size-checker',
+});

package/src/index.js

@@ -1,3 +1,5 @@
+/// <reference types="./types.d.ts" />
+
 import defineConfig from './defineConfig.js';
 import { loadConfig } from './configLoader.js';
 import { calculateSizeDiff } from './sizeDiff.js';

package/src/renderMarkdownReport.js

@@ -5,8 +5,11 @@
  */
 
 import { calculateSizeDiff } from './sizeDiff.js';
-import { fetchSnapshot, fetchSnapshotWithFallback } from './fetchSnapshot.js';
+import { fetchSnapshot } from './fetchSnapshot.js';
 import { displayPercentFormatter, byteSizeChangeFormatter } from './formatUtils.js';
+import { octokit } from './github.js';
+import { getCurrentRepoInfo, getMergeBase } from './git.js';
+import { fetchSnapshotWithFallback } from './fetchSnapshotWithFallback.js';
 
 /**
  * Generates a symbol based on the relative change value.
@@ -96,11 +99,13 @@ function formatMarkdownTable(columns, data) {
   const separators = alignments.map((align) => {
     switch (align) {
       case 'center':
-        return ':----------:';
+        return ':---------:';
       case 'right':
         return '----------:';
+      case 'left':
+        return ':----------';
       default:
-        return '----------';
+        return '-----------';
     }
   });
   table += `|${separators.join('|')}|\n`;
@@ -140,9 +145,9 @@ export function renderMarkdownReportContent(
 
     markdownContent += formatMarkdownTable(
       [
-        { field: 'id', header: 'Bundle' },
-        { field: 'parsed', header: 'Parsed Size', align: 'right' },
-        { field: 'gzip', header: 'Gzip Size', align: 'right' },
+        { field: 'id', header: 'Bundle', align: 'left' },
+        { field: 'parsed', header: 'Parsed size', align: 'right' },
+        { field: 'gzip', header: 'Gzip size', align: 'right' },
       ],
       trackedEntries.map(({ id, parsed, gzip }) => ({
         id,
@@ -224,11 +229,27 @@ function getDetailsUrl(prInfo, options = {}) {
 export async function renderMarkdownReport(prInfo, circleciBuildNumber, options = {}) {
   let markdownContent = '';
 
-  const baseCommit = prInfo.base.sha;
   const prCommit = prInfo.head.sha;
   const repo = prInfo.base.repo.full_name;
   const { fallbackDepth = 3 } = options;
 
+  const [owner, repoName] = repo.split('/');
+
+  const currentRepo = await getCurrentRepoInfo();
+
+  let baseCommit;
+  if (owner === currentRepo.owner && repoName === currentRepo.repo) {
+    baseCommit = await getMergeBase(prInfo.base.sha, prCommit);
+  } else {
+    const { data } = await octokit.repos.compareCommits({
+      owner,
+      repo: repoName,
+      base: prInfo.base.sha,
+      head: prCommit,
+    });
+    baseCommit = data.merge_base_commit.sha;
+  }
+
   const [baseResult, prSnapshot] = await Promise.all([
     fetchSnapshotWithFallback(repo, baseCommit, fallbackDepth),
     fetchSnapshot(repo, prCommit),
@@ -237,9 +258,9 @@ export async function renderMarkdownReport(prInfo, circleciBuildNumber, options
   const { snapshot: baseSnapshot, actualCommit: actualBaseCommit } = baseResult;
 
   if (!baseSnapshot) {
-    markdownContent += `_:no_entry_sign: No bundle size snapshot found for base commit ${baseCommit} or any of its ${fallbackDepth} parent commits._\n\n`;
+    markdownContent += `_:no_entry_sign: No bundle size snapshot found for merge base ${baseCommit} or any of its ${fallbackDepth} parent commits._\n\n`;
   } else if (actualBaseCommit !== baseCommit) {
-    markdownContent += `_:information_source: Using snapshot from parent commit ${actualBaseCommit} (fallback from ${baseCommit})._\n\n`;
+    markdownContent += `_:information_source: Using snapshot from parent commit ${actualBaseCommit} (fallback from merge base ${baseCommit})._\n\n`;
   }
 
   const sizeDiff = calculateSizeDiff(baseSnapshot ?? {}, prSnapshot);

package/src/renderMarkdownReport.test.js

@@ -2,13 +2,30 @@
 import { vi, describe, it, expect, beforeEach } from 'vitest';
 import { renderMarkdownReport } from './renderMarkdownReport.js';
 import * as fetchSnapshotModule from './fetchSnapshot.js';
+import * as fetchSnapshotWithFallbackModule from './fetchSnapshotWithFallback.js';
 
 // Mock the fetchSnapshot module
 vi.mock('./fetchSnapshot.js');
+// Mock the fetchSnapshotWithFallback module
+vi.mock('./fetchSnapshotWithFallback.js');
+// Mock the @octokit/rest module
+vi.mock('@octokit/rest', () => ({
+  Octokit: vi.fn(() => ({
+    repos: {
+      compareCommits: vi.fn(),
+      listCommits: vi.fn(),
+    },
+    pulls: {
+      get: vi.fn(),
+    },
+  })),
+}));
 
 describe('renderMarkdownReport', () => {
   const mockFetchSnapshot = vi.mocked(fetchSnapshotModule.fetchSnapshot);
-  const mockFetchSnapshotWithFallback = vi.mocked(fetchSnapshotModule.fetchSnapshotWithFallback);
+  const mockFetchSnapshotWithFallback = vi.mocked(
+    fetchSnapshotWithFallbackModule.fetchSnapshotWithFallback,
+  );
 
   /** @type {PrInfo} */
   const mockPrInfo = {
@@ -24,9 +41,26 @@ describe('renderMarkdownReport', () => {
     },
   };
 
-  beforeEach(() => {
+  beforeEach(async () => {
     mockFetchSnapshot.mockClear();
     mockFetchSnapshotWithFallback.mockClear();
+
+    // Import and mock the octokit instance after mocking the module
+    const { octokit } = await import('./github.js');
+
+    // Set up default mock for compareCommits to return the base commit SHA
+    vi.mocked(octokit.repos.compareCommits).mockResolvedValue(
+      /** @type {any} */ ({
+        data: {
+          merge_base_commit: {
+            sha: mockPrInfo.base.sha,
+          },
+        },
+      }),
+    );
+
+    // Clear any previous mock calls
+    vi.mocked(octokit.repos.compareCommits).mockClear();
   });
 
   it('should generate markdown report with size increases', async () => {
@@ -109,7 +143,7 @@ describe('renderMarkdownReport', () => {
     const result = await renderMarkdownReport(mockPrInfo);
 
     expect(result).toContain(
-      'No bundle size snapshot found for base commit abc123 or any of its 3 parent commits.',
+      'No bundle size snapshot found for merge base abc123 or any of its 3 parent commits.',
     );
   });
 
@@ -324,8 +358,8 @@ describe('renderMarkdownReport', () => {
     });
 
     expect(result).toMatchInlineSnapshot(`
-      "| Bundle | Parsed Size | Gzip Size |
-      |----------|----------:|----------:|
+      "| Bundle | Parsed size | Gzip size |
+      |:----------|----------:|----------:|
       | @mui/material/Button/index.js | 🔺+400B<sup>(+2.67%)</sup> | 🔺+100B<sup>(+2.22%)</sup> |
       | @mui/material/TextField/index.js | 🔺+200B<sup>(+0.91%)</sup> | 🔺+100B<sup>(+1.54%)</sup> |
 
@@ -359,8 +393,8 @@ describe('renderMarkdownReport', () => {
     });
 
     expect(result).toMatchInlineSnapshot(`
-      "| Bundle | Parsed Size | Gzip Size |
-      |----------|----------:|----------:|
+      "| Bundle | Parsed size | Gzip size |
+      |:----------|----------:|----------:|
       | @mui/material/Button/index.js | 🔺+500B<sup>(+3.33%)</sup> | 🔺+150B<sup>(+3.33%)</sup> |
       | @mui/material/TextField/index.js | 🔺+300B<sup>(+1.36%)</sup> | 🔺+150B<sup>(+2.31%)</sup> |
 
@@ -394,8 +428,8 @@ describe('renderMarkdownReport', () => {
     });
 
     expect(result).toMatchInlineSnapshot(`
-      "| Bundle | Parsed Size | Gzip Size |
-      |----------|----------:|----------:|
+      "| Bundle | Parsed size | Gzip size |
+      |:----------|----------:|----------:|
       | @mui/material/Button/index.js | 🔺+400B<sup>(+2.67%)</sup> | 🔺+100B<sup>(+2.22%)</sup> |
 
 
@@ -428,8 +462,8 @@ describe('renderMarkdownReport', () => {
     });
 
     expect(result).toMatchInlineSnapshot(`
-      "| Bundle | Parsed Size | Gzip Size |
-      |----------|----------:|----------:|
+      "| Bundle | Parsed size | Gzip size |
+      |:----------|----------:|----------:|
       | @mui/material/Button/index.js |  0B<sup>(0.00%)</sup> |  0B<sup>(0.00%)</sup> |
       | @mui/material/TextField/index.js |  0B<sup>(0.00%)</sup> |  0B<sup>(0.00%)</sup> |
 
@@ -461,8 +495,8 @@ describe('renderMarkdownReport', () => {
     });
 
     expect(result).toMatchInlineSnapshot(`
-      "| Bundle | Parsed Size | Gzip Size |
-      |----------|----------:|----------:|
+      "| Bundle | Parsed size | Gzip size |
+      |:----------|----------:|----------:|
       | @mui/material/Button/index.js | 🔺+400B<sup>(+2.67%)</sup> | 🔺+100B<sup>(+2.22%)</sup> |
 
 
@@ -512,7 +546,9 @@ describe('renderMarkdownReport', () => {
 
     const result = await renderMarkdownReport(mockPrInfo);
 
-    expect(result).toContain('Using snapshot from parent commit parent1 (fallback from abc123)');
+    expect(result).toContain(
+      'Using snapshot from parent commit parent1 (fallback from merge base abc123)',
+    );
     expect(result).toContain('baseCommit=parent1');
   });
 
@@ -527,7 +563,7 @@ describe('renderMarkdownReport', () => {
     const result = await renderMarkdownReport(mockPrInfo);
 
     expect(result).toContain(
-      'No bundle size snapshot found for base commit abc123 or any of its 3 parent commits.',
+      'No bundle size snapshot found for merge base abc123 or any of its 3 parent commits.',
     );
   });
 
@@ -548,7 +584,9 @@ describe('renderMarkdownReport', () => {
 
     const result = await renderMarkdownReport(mockPrInfo, undefined, { fallbackDepth: 1 });
 
-    expect(result).toContain('Using snapshot from parent commit parent1 (fallback from abc123)');
+    expect(result).toContain(
+      'Using snapshot from parent commit parent1 (fallback from merge base abc123)',
+    );
     expect(mockFetchSnapshotWithFallback).toHaveBeenCalledWith('mui/material-ui', 'abc123', 1);
   });
 });

package/src/types.d.ts

@@ -1,23 +1,3 @@
-// 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 }>;
-}
-
 // Upload configuration with optional properties
 interface UploadConfig {
   repo?: string; // The repository name (e.g., "mui/material-ui")
@@ -65,12 +45,17 @@ interface NormalizedBundleSizeCheckerConfig {
 // Command line argument types
 interface CommandLineArgs {
   analyze?: boolean;
-  accurateBundles?: boolean;
   output?: string;
   verbose?: boolean;
   filter?: string[];
   concurrency?: number;
-  vite?: boolean;
+  debug?: boolean;
+}
+
+interface ReportCommandArgs {
+  pr?: number;
+  owner?: string;
+  repo?: string;
 }
 
 // Diff command argument types

package/src/uploadSnapshot.js

@@ -1,4 +1,4 @@
-import fs from 'fs';
+import fs from 'node:fs';
 import { S3Client, PutObjectCommand, PutObjectTaggingCommand } from '@aws-sdk/client-s3';
 import { execa } from 'execa';
 import { fromEnv } from '@aws-sdk/credential-providers';
@@ -20,7 +20,7 @@ async function getCurrentCommitSHA() {
  */
 function sanitizeS3TagString(str) {
   // Replace disallowed characters with underscore
-  const safe = str.replace(/[^a-zA-Z0-9 +-=.:/@]+/g, '_');
+  const safe = str.replace(/[^a-zA-Z0-9 +\-=.:/@]+/g, '_');
   // Truncate to max lengths (256 for value)
   const maxLen = 256;
   return safe.length > maxLen ? safe.substring(0, maxLen) : safe;

package/src/worker.js

@@ -1,11 +1,10 @@
-import { pathToFileURL } from 'url';
-import path from 'path';
-import fs from 'fs/promises';
+import { pathToFileURL } from 'node:url';
+import path from 'node:path';
+import fs from 'node:fs/promises';
 import chalk from 'chalk';
-import * as module from 'module';
+import * as module from 'node:module';
 import { byteSizeFormatter } from './formatUtils.js';
-import { getWebpackSizes } from './webpackBuilder.js';
-import { getViteSizes } from './viteBuilder.js';
+import { getBundleSizes } from './builder.js';
 
 const require = module.createRequire(import.meta.url);
 
@@ -83,12 +82,7 @@ export default async function getSizes({ entry, args, index, total }) {
   }
 
   try {
-    let sizeMap;
-    if (args.vite) {
-      sizeMap = await getViteSizes(entry, args);
-    } else {
-      sizeMap = await getWebpackSizes(entry, args);
-    }
+    const sizeMap = await getBundleSizes(entry, args);
 
     // Create a concise log message showing import details
     let entryDetails = '';
@@ -112,7 +106,6 @@ export default async function getSizes({ entry, args, index, total }) {
 ${chalk.green('✓')} ${chalk.green.bold(`Completed ${index + 1}/${total}: [${entry.id}]`)}
   ${chalk.cyan('Import:')}    ${entryDetails}
   ${chalk.cyan('Externals:')} ${entry.externals.join(', ')}
-  ${chalk.cyan('Bundler:')}   ${args.vite ? 'vite' : 'webpack'}
   ${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(),

package/tsconfig.json

@@ -1,8 +1,8 @@
 {
   "compilerOptions": {
     "target": "ES2022",
-    "module": "ESNext",
-    "moduleResolution": "node",
+    "module": "nodenext",
+    "moduleResolution": "nodenext",
     "allowJs": true,
     "checkJs": true,
     "skipLibCheck": true,

package/src/webpackBuilder.js

@@ -1,267 +0,0 @@
-import { promisify } from 'util';
-import path from 'path';
-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';
-
-/**
- * @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);
-
-/**
- * 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;
-
-  if (entry.code && (entry.import || entry.importedNames)) {
-    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();
-    };
-  }
-
-  // Use externals from the entry object
-  const externalsArray = entry.externals || ['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: /\.[jt]sx?$/,
-          include: rootDir,
-          exclude: /node_modules/,
-          use: {
-            loader: require.resolve('babel-loader'),
-            options: {
-              presets: [
-                require.resolve('@babel/preset-react'),
-                require.resolve('@babel/preset-typescript'),
-              ],
-            },
-          },
-        },
-        {
-          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 };
-}
-
-/**
- * Process webpack stats to extract bundle sizes
- * @param {import('webpack').Stats} webpackStats - The webpack stats object
- * @returns {Map<string, { parsed: number, gzip: number }>} - Map of bundle names to size information
- */
-function processBundleSizes(webpackStats) {
-  /** @type {Map<string, { parsed: number, gzip: number }>} */
-  const sizeMap = new Map();
-
-  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(
-      `ERROR: The following errors occurred during bundling of ${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 sizeMap;
-  }
-
-  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 });
-    });
-  }
-
-  return sizeMap;
-}
-
-/**
- * Get sizes for a webpack bundle
- * @param {ObjectEntry} entry - The entry configuration
- * @param {CommandLineArgs} args - Command line arguments
- * @returns {Promise<Map<string, { parsed: number, gzip: number }>>}
- */
-export async function getWebpackSizes(entry, args) {
-  // Create webpack configuration
-  const { configuration } = await createWebpackConfig(entry, args);
-
-  // Run webpack
-  const webpackStats = await webpack(configuration);
-
-  // Process the webpack stats to get bundle sizes
-  return processBundleSizes(webpackStats);
-}