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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/internal-bundle-size-checker",
-  "version": "1.0.9-canary.46",
+  "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": "8112fd2d7929c7e1b5f7475d1a4da16b62ba07cd",
+  "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);
 
@@ -48,7 +49,7 @@ function createReplacePlugin(replacements) {
  * @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>}
+ * @returns {Promise<{ config:import('vite').InlineConfig, treemapPath: string }>}
  */
 async function createViteConfig(entry, args, replacements = {}) {
   const entryName = entry.id;
@@ -78,13 +79,15 @@ async function createViteConfig(entry, args, replacements = {}) {
   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,
 
@@ -112,7 +115,7 @@ async function createViteConfig(entry, args, replacements = {}) {
             ? [
                 // 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,
@@ -171,7 +174,7 @@ async function createViteConfig(entry, args, replacements = {}) {
     ],
   };
 
-  return configuration;
+  return { config, treemapPath };
 }
 
 /**
@@ -275,19 +278,21 @@ async function processBundleSizes(output, entryName) {
  * @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>>}
+ * @returns {Promise<{ sizes: Map<string, SizeSnapshotEntry>, treemapPath: string }>}
  */
 export async function getBundleSizes(entry, args, replacements) {
   // Create vite configuration
-  const configuration = await createViteConfig(entry, args, replacements);
+  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';
@@ -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/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/worker.js

@@ -1,5 +1,4 @@
 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';
@@ -83,7 +82,7 @@ export default async function getSizes({ entry, args, index, total, replace }) {
   }
 
   try {
-    const sizeMap = await getBundleSizes(entry, args, replace);
+    const { sizes: sizeMap, treemapPath } = await getBundleSizes(entry, args, replace);
 
     // Create a concise log message showing import details
     let entryDetails = '';
@@ -108,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(),
     );