@mui/internal-bundle-size-checker 1.0.9-canary.45 → 1.0.9-canary.47

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/internal-bundle-size-checker",
-  "version": "1.0.9-canary.45",
+  "version": "1.0.9-canary.47",
   "description": "Bundle size checker for MUI packages.",
   "type": "module",
   "main": "./src/index.js",
@@ -37,7 +37,7 @@
     "@types/micromatch": "^4.0.9",
     "@types/yargs": "^17.0.33"
   },
-  "gitSha": "110101a5bd808883977d6e52af0aeb8cb9ff701c",
+  "gitSha": "1e49380da7c1a731162a8815a0bc3d1c528fd360",
   "scripts": {
     "typescript": "tsc -p tsconfig.json",
     "test": "pnpm -w test --project @mui/internal-bundle-size-checker"

package/src/builder.js

@@ -4,6 +4,7 @@ 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<import('vite').InlineConfig>}
+ * @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,12 +79,15 @@ 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,
 
@@ -73,15 +96,26 @@ async function createViteConfig(entry, args) {
       minify: args.debug ? 'esbuild' : true,
       outDir,
       emptyOutDir: true,
+      modulePreload: false,
       rollupOptions: {
-        input: '/index.tsx',
+        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,
@@ -113,11 +147,12 @@ async function createViteConfig(entry, args) {
     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`;
@@ -125,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`) {
@@ -137,7 +174,7 @@ async function createViteConfig(entry, args) {
     ],
   };
 
-  return configuration;
+  return { config, treemapPath };
 }
 
 /**
@@ -200,7 +237,7 @@ async function processBundleSizes(output, entryName) {
   const manifest = JSON.parse(manifestContent);
 
   // Find the main entry point JS file in the manifest
-  const mainEntry = Object.entries(manifest).find(([_, entry]) => entry.name === '_virtual_entry');
+  const mainEntry = Object.entries(manifest).find(([_, entry]) => entry.name === 'bundle');
 
   if (!mainEntry) {
     throw new Error(`No main entry found in manifest for ${entryName}`);
@@ -217,18 +254,18 @@ async function processBundleSizes(output, entryName) {
       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);
     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 = chunk.name === '_virtual_entry' ? entryName : chunk.name || chunkKey;
+    const chunkName = chunk.name === 'bundle' ? entryName : chunk.name || chunkKey;
     return /** @type {const} */ ([chunkName, { parsed, gzip: gzipSize }]);
   });
 
@@ -240,19 +277,22 @@ async function processBundleSizes(output, entryName) {
  * Get sizes for a vite bundle
  * @param {ObjectEntry} entry - The entry configuration
  * @param {CommandLineArgs} args - Command line arguments
- * @returns {Promise<Map<string, SizeSnapshotEntry>>}
+ * @param {Record<string, string>} [replacements] - String replacements to apply
+ * @returns {Promise<{ sizes: Map<string, SizeSnapshotEntry>, treemapPath: string }>}
  */
-export async function getBundleSizes(entry, args) {
+export async function getBundleSizes(entry, args, replacements) {
   // Create vite configuration
-  const configuration = await createViteConfig(entry, args);
+  const { config, treemapPath } = await createViteConfig(entry, args, replacements);
 
   // Run vite build
-  const { output } = /** @type {import('vite').Rollup.RollupOutput} */ (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(output, entry.id);
+  const sizes = await processBundleSizes(output, entry.id);
+
+  return { sizes, treemapPath };
 }

package/src/cli.js

@@ -7,6 +7,8 @@ import yargs from 'yargs';
 import { Piscina } from 'piscina';
 import micromatch from 'micromatch';
 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';
@@ -100,7 +102,7 @@ async function getBundleSizes(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 }),
     ),
   );
 
@@ -229,7 +231,9 @@ async function run(argv) {
   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) {

package/src/configLoader.js

@@ -225,6 +225,7 @@ async function applyConfigDefaults(config, configPath) {
     entrypoints: await normalizeEntries(config.entrypoints, configPath),
     upload: null, // Default to disabled
     comment: config.comment !== undefined ? config.comment : true, // Default to enabled
+    replace: config.replace || {}, // String replacements, default to empty object
   };
 
   // Handle different types of upload value

package/src/strings.js

@@ -0,0 +1,38 @@
+const illegalRe = /[/?<>\\:*|"]/g;
+// eslint-disable-next-line no-control-regex
+const controlRe = /[\x00-\x1f\x80-\x9f]/g;
+const reservedRe = /^\.+$/;
+const windowsReservedRe = /^(con|prn|aux|nul|com[0-9]|lpt[0-9])(\..*)?$/i;
+const windowsTrailingRe = /[. ]+$/;
+
+/**
+ * Inspired by https://github.com/parshap/node-sanitize-filename
+ *
+ * Replaces characters in strings that are illegal/unsafe for filenames.
+ * Unsafe characters are either removed or replaced by a substitute set
+ * in the optional `options` object.
+ *
+ * Illegal Characters on Various Operating Systems
+ * / ? < > \ : * | "
+ * https://kb.acronis.com/content/39790
+ *
+ * Unicode Control codes
+ * C0 0x00-0x1f & C1 (0x80-0x9f)
+ * http://en.wikipedia.org/wiki/C0_and_C1_control_codes
+ *
+ * Reserved filenames on Unix-based systems (".", "..")
+ * Reserved filenames in Windows ("CON", "PRN", "AUX", "NUL", "COM1",
+ * "COM2", "COM3", "COM4", "COM5", "COM6", "COM7", "COM8", "COM9",
+ * "LPT1", "LPT2", "LPT3", "LPT4", "LPT5", "LPT6", "LPT7", "LPT8", and
+ * "LPT9") case-insesitively and with or without filename extensions.
+ * @param {string} input
+ */
+export function escapeFilename(input, replacement = '_') {
+  const sanitized = input
+    .replace(illegalRe, replacement)
+    .replace(controlRe, replacement)
+    .replace(reservedRe, replacement)
+    .replace(windowsReservedRe, replacement)
+    .replace(windowsTrailingRe, replacement);
+  return sanitized;
+}

package/src/types.d.ts

@@ -32,6 +32,7 @@ interface BundleSizeCheckerConfigObject {
   entrypoints: EntryPoint[];
   upload?: UploadConfig | boolean | null;
   comment?: boolean; // Whether to post PR comments (defaults to true)
+  replace?: Record<string, string>; // String replacements to apply during bundling
 }
 
 type BundleSizeCheckerConfig =
@@ -44,6 +45,7 @@ interface NormalizedBundleSizeCheckerConfig {
   entrypoints: ObjectEntry[];
   upload: NormalizedUploadConfig | null; // null means upload is disabled
   comment: boolean; // Whether to post PR comments
+  replace: Record<string, string>; // String replacements to apply during bundling
 }
 
 // Command line argument types

package/src/worker.js

@@ -1,13 +1,10 @@
 import { pathToFileURL } from 'node:url';
-import path from 'node:path';
 import fs from 'node:fs/promises';
 import chalk from 'chalk';
 import * as module from 'node:module';
 import { byteSizeFormatter } from './formatUtils.js';
 import { getBundleSizes } from './builder.js';
 
-const require = module.createRequire(import.meta.url);
-
 const rootDir = process.cwd();
 
 /**
@@ -20,11 +17,14 @@ async function getPeerDependencies(packageName) {
     /** @type {string | undefined} */
     let packageJsonPath;
 
+    const rootDirUrl = pathToFileURL(rootDir);
+
     if (module.findPackageJSON) {
       // findPackageJSON was added in: v23.2.0, v22.14.0
-      packageJsonPath = module.findPackageJSON(packageName, `${rootDir}/_.js`);
+      packageJsonPath = module.findPackageJSON(packageName, `${rootDirUrl}/index.mjs`);
     } else {
       // Try to resolve packageName/package.json
+      const require = module.createRequire(`${rootDirUrl}/index.mjs`);
       packageJsonPath = require.resolve(`${packageName}/package.json`, {
         paths: [rootDir],
       });
@@ -56,10 +56,10 @@ async function getPeerDependencies(packageName) {
 
 /**
  * Get sizes for a bundle
- * @param {{ entry: ObjectEntry, args: CommandLineArgs, index: number, total: number }} options
+ * @param {{ entry: ObjectEntry, args: CommandLineArgs, index: number, total: number, replace?: Record<string, string> }} options
  * @returns {Promise<Array<[string, SizeSnapshotEntry]>>}
  */
-export default async function getSizes({ entry, args, index, total }) {
+export default async function getSizes({ entry, args, index, total, replace }) {
   // eslint-disable-next-line no-console -- process monitoring
   console.log(chalk.blue(`Compiling ${index + 1}/${total}: ${chalk.bold(`[${entry.id}]`)}`));
 
@@ -82,7 +82,7 @@ export default async function getSizes({ entry, args, index, total }) {
   }
 
   try {
-    const sizeMap = await getBundleSizes(entry, args);
+    const { sizes: sizeMap, treemapPath } = await getBundleSizes(entry, args, replace);
 
     // Create a concise log message showing import details
     let entryDetails = '';
@@ -107,7 +107,7 @@ ${chalk.green('✓')} ${chalk.green.bold(`Completed ${index + 1}/${total}: [${en
   ${chalk.cyan('Import:')}    ${entryDetails}
   ${chalk.cyan('Externals:')} ${entry.externals.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)}` : ''}
+${args.analyze ? `  ${chalk.cyan('Analysis:')}  ${chalk.underline(pathToFileURL(treemapPath).href)}` : ''}
 `.trim(),
     );