@mui/internal-bundle-size-checker 1.0.6 → 1.0.9-canary.0

package/package.json

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

package/src/renderMarkdownReport.js

@@ -69,6 +69,51 @@ function generateEmphasizedChange({ id: bundle, parsed, gzip }) {
   return `**${bundle}** **parsed:** ${changeParsed} **gzip:** ${changeGzip}`;
 }
 
+/**
+ * @typedef {Object} ColumnDefinition
+ * @property {string} field - The property key to extract from data objects
+ * @property {string} [header] - Column header (defaults to field name)
+ * @property {'left'|'center'|'right'} [align='left'] - Column alignment
+ */
+
+/**
+ * Formats data as a markdown table
+ * @param {ColumnDefinition[]} columns - Column definitions
+ * @param {Partial<Record<string, unknown>>[]} data - Array of data objects
+ * @returns {string} Formatted markdown table
+ */
+function formatMarkdownTable(columns, data) {
+  let table = '';
+
+  // Extract headers and alignments from column definitions
+  const headers = columns.map((col) => col.header || col.field);
+  const alignments = columns.map((col) => col.align || 'left');
+
+  // Header row
+  table += `| ${headers.join(' | ')} |\n`;
+
+  // Separator row with alignment
+  const separators = alignments.map((align) => {
+    switch (align) {
+      case 'center':
+        return ':----------:';
+      case 'right':
+        return '----------:';
+      default:
+        return '----------';
+    }
+  });
+  table += `|${separators.join('|')}|\n`;
+
+  // Data rows
+  data.forEach((row) => {
+    const cells = columns.map((col) => row[col.field] ?? '');
+    table += `| ${cells.join(' | ')} |\n`;
+  });
+
+  return table;
+}
+
 /**
  * Generates a Markdown report for bundle size changes
  * @param {ComparisonResult} comparison - Comparison result from calculateSizeDiff
@@ -92,9 +137,20 @@ export function renderMarkdownReportContent(
       }
       return trackedEntry;
     });
-    // Show all tracked bundles directly (including unchanged ones)
-    const trackedChanges = trackedEntries.map(generateEmphasizedChange);
-    markdownContent += `${trackedChanges.join('\n')}`;
+
+    markdownContent += formatMarkdownTable(
+      [
+        { field: 'id', header: 'Bundle' },
+        { field: 'parsed', header: 'Parsed Size', align: 'right' },
+        { field: 'gzip', header: 'Gzip Size', align: 'right' },
+      ],
+      trackedEntries.map(({ id, parsed, gzip }) => ({
+        id,
+        parsed: formatChange(parsed.absoluteDiff, parsed.relativeDiff),
+        gzip: formatChange(gzip.absoluteDiff, gzip.relativeDiff),
+      })),
+    );
+    markdownContent += '\n';
   } else {
     markdownContent += `**Total Size Change:** ${formatChange(
       comparison.totals.totalParsed,
@@ -107,26 +163,26 @@ export function renderMarkdownReportContent(
     markdownContent += `Files: ${comparison.fileCounts.total} total (${
       comparison.fileCounts.added
     } added, ${comparison.fileCounts.removed} removed, ${comparison.fileCounts.changed} changed)\n\n`;
-  }
 
-  // Show all entries in details section, not just changed ones
-  // Filter out tracked bundles to avoid duplication
-  const trackedIdSet = new Set(track);
-  const detailsEntries = comparison.entries.filter((entry) => !trackedIdSet.has(entry.id));
-
-  // Cap at maxDetailsLines bundles to avoid overly large reports
-  const cappedEntries = detailsEntries.slice(0, maxDetailsLines);
-  const hasMore = detailsEntries.length > maxDetailsLines;
-
-  if (cappedEntries.length > 0) {
-    const allChanges = cappedEntries.map(generateEmphasizedChange);
-    const bundleWord = cappedEntries.length === 1 ? 'bundle' : 'bundles';
-    const summaryText = hasMore
-      ? `Show details for ${cappedEntries.length} more ${bundleWord} (${detailsEntries.length - maxDetailsLines} more not shown)`
-      : `Show details for ${cappedEntries.length} more ${bundleWord}`;
-    markdownContent += `<details>\n<summary>${summaryText}</summary>\n\n`;
-    markdownContent += `${allChanges.join('\n')}\n\n`;
-    markdownContent += `</details>`;
+    // Show all entries in details section, not just changed ones
+    // Filter out tracked bundles to avoid duplication
+    const trackedIdSet = new Set(track);
+    const detailsEntries = comparison.entries.filter((entry) => !trackedIdSet.has(entry.id));
+
+    // Cap at maxDetailsLines bundles to avoid overly large reports
+    const cappedEntries = detailsEntries.slice(0, maxDetailsLines);
+    const hasMore = detailsEntries.length > maxDetailsLines;
+
+    if (cappedEntries.length > 0) {
+      const allChanges = cappedEntries.map(generateEmphasizedChange);
+      const bundleWord = cappedEntries.length === 1 ? 'bundle' : 'bundles';
+      const summaryText = hasMore
+        ? `Show details for ${cappedEntries.length} more ${bundleWord} (${detailsEntries.length - maxDetailsLines} more not shown)`
+        : `Show details for ${cappedEntries.length} more ${bundleWord}`;
+      markdownContent += `<details>\n<summary>${summaryText}</summary>\n\n`;
+      markdownContent += `${allChanges.join('\n')}\n\n`;
+      markdownContent += `</details>`;
+    }
   }
 
   return markdownContent;

package/src/renderMarkdownReport.test.js

@@ -323,13 +323,12 @@ describe('renderMarkdownReport', () => {
     });
 
     expect(result).toMatchInlineSnapshot(`
-      "**@mui/material/Button/index.js**&emsp;**parsed:** 🔺+400B<sup>(+2.67%)</sup> **gzip:** 🔺+100B<sup>(+2.22%)</sup>
-      **@mui/material/TextField/index.js**&emsp;**parsed:** 🔺+200B<sup>(+0.91%)</sup> **gzip:** 🔺+100B<sup>(+1.54%)</sup><details>
-      <summary>Show details for 1 more bundle</summary>
+      "| 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> |
 
-      **@mui/icons-material/Add.js**&emsp;**parsed:** 🔺+100B<sup>(+10.00%)</sup> **gzip:** 🔺+50B<sup>(+16.67%)</sup>
 
-      </details>
 
       [Details of bundle changes](https://frontend-public.mui.com/size-comparison/mui/material-ui/diff?prNumber=42&baseRef=master&baseCommit=abc123&headCommit=def456)"
     `);
@@ -359,13 +358,12 @@ describe('renderMarkdownReport', () => {
     });
 
     expect(result).toMatchInlineSnapshot(`
-      "**@mui/material/Button/index.js**&emsp;**parsed:** 🔺+500B<sup>(+3.33%)</sup> **gzip:** 🔺+150B<sup>(+3.33%)</sup>
-      **@mui/material/TextField/index.js**&emsp;**parsed:** 🔺+300B<sup>(+1.36%)</sup> **gzip:** 🔺+150B<sup>(+2.31%)</sup><details>
-      <summary>Show details for 1 more bundle</summary>
+      "| 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> |
 
-      **@mui/icons-material/Add.js**&emsp;**parsed:** 🔺+1KB<sup>(+100.00%)</sup> **gzip:** 🔺+300B<sup>(+100.00%)</sup>
 
-      </details>
 
       [Details of bundle changes](https://frontend-public.mui.com/size-comparison/mui/material-ui/diff?prNumber=42&baseRef=master&baseCommit=abc123&headCommit=def456)"
     `);
@@ -395,13 +393,11 @@ describe('renderMarkdownReport', () => {
     });
 
     expect(result).toMatchInlineSnapshot(`
-      "**@mui/material/Button/index.js**&emsp;**parsed:** 🔺+400B<sup>(+2.67%)</sup> **gzip:** 🔺+100B<sup>(+2.22%)</sup><details>
-      <summary>Show details for 2 more bundles</summary>
+      "| Bundle | Parsed Size | Gzip Size |
+      |----------|----------:|----------:|
+      | @mui/material/Button/index.js | 🔺+400B<sup>(+2.67%)</sup> | 🔺+100B<sup>(+2.22%)</sup> |
 
-      **@mui/icons-material/Add.js**&emsp;**parsed:** 🔺+100B<sup>(+10.00%)</sup> **gzip:** 🔺+50B<sup>(+16.67%)</sup>
-      **@mui/icons-material/Delete.js**&emsp;**parsed:** 🔺+100B<sup>(+8.33%)</sup> **gzip:** 🔺+50B<sup>(+14.29%)</sup>
 
-      </details>
 
       [Details of bundle changes](https://frontend-public.mui.com/size-comparison/mui/material-ui/diff?prNumber=42&baseRef=master&baseCommit=abc123&headCommit=def456)"
     `);
@@ -431,13 +427,12 @@ describe('renderMarkdownReport', () => {
     });
 
     expect(result).toMatchInlineSnapshot(`
-      "**@mui/material/Button/index.js**&emsp;**parsed:**  0B<sup>(0.00%)</sup> **gzip:**  0B<sup>(0.00%)</sup>
-      **@mui/material/TextField/index.js**&emsp;**parsed:**  0B<sup>(0.00%)</sup> **gzip:**  0B<sup>(0.00%)</sup><details>
-      <summary>Show details for 1 more bundle</summary>
+      "| 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> |
 
-      **@mui/material/Icon/index.js**&emsp;**parsed:** 🔺+100B<sup>(+1.25%)</sup> **gzip:** 🔺+50B<sup>(+2.00%)</sup>
 
-      </details>
 
       [Details of bundle changes](https://frontend-public.mui.com/size-comparison/mui/material-ui/diff?prNumber=42&baseRef=master&baseCommit=abc123&headCommit=def456)"
     `);
@@ -465,12 +460,11 @@ describe('renderMarkdownReport', () => {
     });
 
     expect(result).toMatchInlineSnapshot(`
-      "**@mui/material/Button/index.js**&emsp;**parsed:** 🔺+400B<sup>(+2.67%)</sup> **gzip:** 🔺+100B<sup>(+2.22%)</sup><details>
-      <summary>Show details for 1 more bundle</summary>
+      "| 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**&emsp;**parsed:**  0B<sup>(0.00%)</sup> **gzip:**  0B<sup>(0.00%)</sup>
 
-      </details>
 
       [Details of bundle changes](https://frontend-public.mui.com/size-comparison/mui/material-ui/diff?prNumber=42&baseRef=master&baseCommit=abc123&headCommit=def456)"
     `);

package/src/viteBuilder.js

@@ -1,9 +1,12 @@
 import path from 'path';
 import fs from 'fs/promises';
-import { gzipSync } from 'zlib';
+import * as zlib from 'zlib';
+import { promisify } from 'util';
 import { build, transformWithEsbuild } from 'vite';
 import { visualizer } from 'rollup-plugin-visualizer';
 
+const gzipAsync = promisify(zlib.gzip);
+
 const rootDir = process.cwd();
 
 /**
@@ -199,11 +202,12 @@ async function processBundleSizes(outDir, entryName) {
 
     // Calculate sizes
     const parsed = Buffer.byteLength(fileContent);
-    const gzip = Buffer.byteLength(gzipSync(fileContent));
+    const gzipBuffer = await gzipAsync(fileContent, { level: zlib.constants.Z_BEST_COMPRESSION });
+    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;
-    return /** @type {const} */ ([chunkName, { parsed, gzip }]);
+    return /** @type {const} */ ([chunkName, { parsed, gzip: gzipSize }]);
   });
 
   const chunkEntries = await Promise.all(chunkPromises);