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

package/package.json

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

package/src/renderMarkdownReport.js

@@ -69,51 +69,6 @@ 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
@@ -137,20 +92,9 @@ export function renderMarkdownReportContent(
       }
       return trackedEntry;
     });
-
-    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';
+    // Show all tracked bundles directly (including unchanged ones)
+    const trackedChanges = trackedEntries.map(generateEmphasizedChange);
+    markdownContent += `${trackedChanges.join('\n')}`;
   } else {
     markdownContent += `**Total Size Change:** ${formatChange(
       comparison.totals.totalParsed,
@@ -163,26 +107,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,12 +323,13 @@ describe('renderMarkdownReport', () => {
     });
 
     expect(result).toMatchInlineSnapshot(`
-      "| 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/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>
 
+      **@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)"
     `);
@@ -358,12 +359,13 @@ describe('renderMarkdownReport', () => {
     });
 
     expect(result).toMatchInlineSnapshot(`
-      "| 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/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>
 
+      **@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)"
     `);
@@ -393,11 +395,13 @@ describe('renderMarkdownReport', () => {
     });
 
     expect(result).toMatchInlineSnapshot(`
-      "| Bundle | Parsed Size | Gzip Size |
-      |----------|----------:|----------:|
-      | @mui/material/Button/index.js | 🔺+400B<sup>(+2.67%)</sup> | 🔺+100B<sup>(+2.22%)</sup> |
+      "**@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>
 
+      **@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)"
     `);
@@ -427,12 +431,13 @@ describe('renderMarkdownReport', () => {
     });
 
     expect(result).toMatchInlineSnapshot(`
-      "| 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/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>
 
+      **@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)"
     `);
@@ -460,11 +465,12 @@ describe('renderMarkdownReport', () => {
     });
 
     expect(result).toMatchInlineSnapshot(`
-      "| Bundle | Parsed Size | Gzip Size |
-      |----------|----------:|----------:|
-      | @mui/material/Button/index.js | 🔺+400B<sup>(+2.67%)</sup> | 🔺+100B<sup>(+2.22%)</sup> |
+      "**@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>
 
+      **@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,12 +1,9 @@
 import path from 'path';
 import fs from 'fs/promises';
-import * as zlib from 'zlib';
-import { promisify } from 'util';
+import { gzipSync } from 'zlib';
 import { build, transformWithEsbuild } from 'vite';
 import { visualizer } from 'rollup-plugin-visualizer';
 
-const gzipAsync = promisify(zlib.gzip);
-
 const rootDir = process.cwd();
 
 /**
@@ -202,12 +199,11 @@ async function processBundleSizes(outDir, entryName) {
 
     // Calculate sizes
     const parsed = Buffer.byteLength(fileContent);
-    const gzipBuffer = await gzipAsync(fileContent, { level: zlib.constants.Z_BEST_COMPRESSION });
-    const gzipSize = Buffer.byteLength(gzipBuffer);
+    const gzip = Buffer.byteLength(gzipSync(fileContent));
 
     // 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: gzipSize }]);
+    return /** @type {const} */ ([chunkName, { parsed, gzip }]);
   });
 
   const chunkEntries = await Promise.all(chunkPromises);