@mui/internal-bundle-size-checker 1.0.9-canary.11 → 1.0.9-canary.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/internal-bundle-size-checker",
-  "version": "1.0.9-canary.11",
+  "version": "1.0.9-canary.13",
   "description": "Bundle size checker for MUI packages.",
   "type": "module",
   "main": "./src/index.js",
@@ -51,7 +51,7 @@
     "@types/webpack-bundle-analyzer": "^4.7.0",
     "@types/yargs": "^17.0.33"
   },
-  "gitSha": "ad63edcb005175f8a6087a828e52648c7b4f1635",
+  "gitSha": "f17b92d918a4979325ae9ee8259bb35dd83ca510",
   "scripts": {
     "typescript": "tsc -p tsconfig.json",
     "test": "pnpm -w test --project @mui/internal-bundle-size-checker"

package/src/renderMarkdownReport.js

@@ -97,11 +97,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`;
@@ -141,9 +143,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,

package/src/renderMarkdownReport.test.js

@@ -353,8 +353,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> |
 
@@ -388,8 +388,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> |
 
@@ -423,8 +423,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> |
 
 
@@ -457,8 +457,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> |
 
@@ -490,8 +490,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> |
 
 

package/src/viteBuilder.js

@@ -173,14 +173,24 @@ 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);
 
@@ -197,8 +207,11 @@ async function processBundleSizes(outDir, entryName) {
   // 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);
@@ -223,11 +236,14 @@ async function processBundleSizes(outDir, entryName) {
 export async function getViteSizes(entry, args) {
   // Create vite configuration
   const { configuration } = await createViteConfig(entry, args);
-  const outDir = path.join(rootDir, 'build', entry.id);
 
   // 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);
 }