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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/internal-bundle-size-checker",
-  "version": "1.0.9-canary.45",
+  "version": "1.0.9-canary.46",
   "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": "8112fd2d7929c7e1b5f7475d1a4da16b62ba07cd",
   "scripts": {
     "typescript": "tsc -p tsconfig.json",
     "test": "pnpm -w test --project @mui/internal-bundle-size-checker"

package/src/builder.js

@@ -25,13 +25,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
+ * @param {Record<string, string>} [replacements] - String replacements to apply
  * @returns {Promise<import('vite').InlineConfig>}
  */
-async function createViteConfig(entry, args) {
+async function createViteConfig(entry, args, replacements = {}) {
   const entryName = entry.id;
   let entryContent;
 
@@ -61,6 +80,7 @@ async function createViteConfig(entry, args) {
   // Ensure build directory exists
   const outDir = path.join(rootDir, 'build', entryName);
   await fs.mkdir(outDir, { recursive: true });
+
   /**
    * @type {import('vite').InlineConfig}
    */
@@ -73,8 +93,19 @@ 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
@@ -113,11 +144,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 +157,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`) {
@@ -200,7 +234,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 +251,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,11 +274,12 @@ async function processBundleSizes(output, entryName) {
  * Get sizes for a vite bundle
  * @param {ObjectEntry} entry - The entry configuration
  * @param {CommandLineArgs} args - Command line arguments
+ * @param {Record<string, string>} [replacements] - String replacements to apply
  * @returns {Promise<Map<string, SizeSnapshotEntry>>}
  */
-export async function getBundleSizes(entry, args) {
+export async function getBundleSizes(entry, args, replacements) {
   // Create vite configuration
-  const configuration = await createViteConfig(entry, args);
+  const configuration = await createViteConfig(entry, args, replacements);
 
   // Run vite build
   const { output } = /** @type {import('vite').Rollup.RollupOutput} */ (await build(configuration));

package/src/cli.js

@@ -100,7 +100,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 }),
     ),
   );
 

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/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

@@ -6,8 +6,6 @@ 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 +18,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 +57,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 +83,7 @@ export default async function getSizes({ entry, args, index, total }) {
   }
 
   try {
-    const sizeMap = await getBundleSizes(entry, args);
+    const sizeMap = await getBundleSizes(entry, args, replace);
 
     // Create a concise log message showing import details
     let entryDetails = '';