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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/internal-bundle-size-checker",
-  "version": "1.0.9-canary.1",
+  "version": "1.0.9-canary.11",
   "description": "Bundle size checker for MUI packages.",
   "type": "module",
   "main": "./src/index.js",
@@ -21,9 +21,11 @@
   "dependencies": {
     "@aws-sdk/client-s3": "^3.515.0",
     "@aws-sdk/credential-providers": "^3.787.0",
-    "@babel/core": "^7.27.1",
+    "@babel/core": "^7.27.4",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.27.1",
+    "@octokit/auth-action": "^6.0.1",
+    "@octokit/rest": "^22.0.0",
     "babel-loader": "^10.0.0",
     "chalk": "^5.4.1",
     "compression-webpack-plugin": "^10.0.0",
@@ -32,6 +34,7 @@
     "execa": "^7.2.0",
     "fast-glob": "^3.3.2",
     "file-loader": "^6.2.0",
+    "git-url-parse": "^16.1.0",
     "micromatch": "^4.0.8",
     "piscina": "^4.2.1",
     "rollup-plugin-visualizer": "^6.0.1",
@@ -48,7 +51,7 @@
     "@types/webpack-bundle-analyzer": "^4.7.0",
     "@types/yargs": "^17.0.33"
   },
-  "gitSha": "89c91764b62f0af7ce6ee4ec52c8e45b47e3c8aa",
+  "gitSha": "ad63edcb005175f8a6087a828e52648c7b4f1635",
   "scripts": {
     "typescript": "tsc -p tsconfig.json",
     "test": "pnpm -w test --project @mui/internal-bundle-size-checker"

package/src/cli.js

@@ -4,10 +4,14 @@ import path from 'path';
 import os from 'os';
 import fs from 'fs/promises';
 import yargs from 'yargs';
-import Piscina from 'piscina';
+import { Piscina } from 'piscina';
 import micromatch from 'micromatch';
+import { execa } from 'execa';
+import gitUrlParse from 'git-url-parse';
 import { loadConfig } from './configLoader.js';
 import { uploadSnapshot } from './uploadSnapshot.js';
+import { renderMarkdownReport } from './renderMarkdownReport.js';
+import { octokit } from './github.js';
 
 /**
  * @typedef {import('./sizeDiff.js').SizeSnapshot} SizeSnapshot
@@ -18,6 +22,26 @@ const DEFAULT_CONCURRENCY = os.availableParallelism();
 
 const rootDir = process.cwd();
 
+/**
+ * Gets the current repository owner and name from git remote
+ * @returns {Promise<{owner: string | null, repo: string | null}>}
+ */
+async function getCurrentRepoInfo() {
+  try {
+    const { stdout } = await execa('git', ['remote', 'get-url', 'origin']);
+    const parsed = gitUrlParse(stdout.trim());
+    return {
+      owner: parsed.owner,
+      repo: parsed.name,
+    };
+  } catch (error) {
+    return {
+      owner: null,
+      repo: null,
+    };
+  }
+}
+
 /**
  * creates size snapshot for every bundle that built with webpack
  * @param {CommandLineArgs} args
@@ -72,6 +96,42 @@ async function getWebpackSizes(args, config) {
   return sizeArrays.flat();
 }
 
+/**
+ * Report command handler
+ * @param {ReportCommandArgs} argv - Command line arguments
+ */
+async function reportCommand(argv) {
+  const { pr, owner: argOwner, repo: argRepo } = argv;
+
+  // Get current repo info and coerce with provided arguments
+  const currentRepo = await getCurrentRepoInfo();
+  const owner = argOwner ?? currentRepo.owner;
+  const repo = argRepo ?? currentRepo.repo;
+
+  if (typeof pr !== 'number') {
+    throw new Error('Invalid pull request number. Please provide a valid --pr option.');
+  }
+
+  // Validate that both owner and repo are available
+  if (!owner || !repo) {
+    throw new Error(
+      'Repository owner and name are required. Please provide --owner and --repo options, or run this command from within a git repository.',
+    );
+  }
+
+  // Fetch PR information
+  const { data: prInfo } = await octokit.pulls.get({
+    owner,
+    repo,
+    pull_number: pr,
+  });
+
+  // Generate and print the markdown report
+  const report = await renderMarkdownReport(prInfo);
+  // eslint-disable-next-line no-console
+  console.log(report);
+}
+
 /**
  * Main runner function
  * @param {CommandLineArgs} argv - Command line arguments
@@ -113,52 +173,76 @@ async function run(argv) {
 }
 
 yargs(process.argv.slice(2))
-  // @ts-expect-error
-  .command({
-    command: '$0',
-    describe: 'Saves a size snapshot in size-snapshot.json',
-    builder: (cmdYargs) => {
-      return cmdYargs
-        .option('analyze', {
-          default: false,
-          describe: 'Creates a webpack-bundle-analyzer report for each bundle.',
-          type: 'boolean',
-        })
-        .option('accurateBundles', {
-          default: false,
-          describe: 'Displays used bundles accurately at the cost of more CPU cycles.',
-          type: 'boolean',
-        })
-        .option('verbose', {
-          default: false,
-          describe: 'Show more detailed information during compilation.',
-          type: 'boolean',
-        })
-        .option('vite', {
-          default: false,
-          describe: 'Use Vite instead of webpack for bundling.',
-          type: 'boolean',
-        })
-        .option('output', {
-          alias: 'o',
-          describe:
-            'Path to output the size snapshot JSON file (defaults to size-snapshot.json in current directory).',
-          type: 'string',
-        })
-        .option('filter', {
-          alias: 'F',
-          describe: 'Filter entry points by glob pattern(s) applied to their IDs',
-          type: 'array',
-        })
-        .option('concurrency', {
-          alias: 'c',
-          describe: 'Number of workers to use for parallel processing',
-          type: 'number',
-          default: DEFAULT_CONCURRENCY,
-        });
-    },
-    handler: run,
-  })
+  .command(
+    /** @type {import('yargs').CommandModule<{}, CommandLineArgs>} */ ({
+      command: '$0',
+      describe: 'Saves a size snapshot in size-snapshot.json',
+      builder: (cmdYargs) => {
+        return cmdYargs
+          .option('analyze', {
+            default: false,
+            describe: 'Creates a webpack-bundle-analyzer report for each bundle.',
+            type: 'boolean',
+          })
+          .option('accurateBundles', {
+            default: false,
+            describe: 'Displays used bundles accurately at the cost of more CPU cycles.',
+            type: 'boolean',
+          })
+          .option('verbose', {
+            default: false,
+            describe: 'Show more detailed information during compilation.',
+            type: 'boolean',
+          })
+          .option('vite', {
+            default: false,
+            describe: 'Use Vite instead of webpack for bundling.',
+            type: 'boolean',
+          })
+          .option('output', {
+            alias: 'o',
+            describe:
+              'Path to output the size snapshot JSON file (defaults to size-snapshot.json in current directory).',
+            type: 'string',
+          })
+          .option('filter', {
+            alias: 'F',
+            describe: 'Filter entry points by glob pattern(s) applied to their IDs',
+            type: 'array',
+          })
+          .option('concurrency', {
+            alias: 'c',
+            describe: 'Number of workers to use for parallel processing',
+            type: 'number',
+            default: DEFAULT_CONCURRENCY,
+          });
+      },
+      handler: run,
+    }),
+  )
+  .command(
+    /** @type {import('yargs').CommandModule<{}, ReportCommandArgs>} */ ({
+      command: 'report',
+      describe: 'Generate a markdown report for a pull request',
+      builder: (cmdYargs) => {
+        return cmdYargs
+          .option('pr', {
+            describe: 'Pull request number',
+            type: 'number',
+            demandOption: true,
+          })
+          .option('owner', {
+            describe: 'Repository owner (defaults to current git repo owner)',
+            type: 'string',
+          })
+          .option('repo', {
+            describe: 'Repository name (defaults to current git repo name)',
+            type: 'string',
+          });
+      },
+      handler: reportCommand,
+    }),
+  )
   .help()
   .strict(true)
   .version(false)

package/src/fetchSnapshot.js

@@ -1,3 +1,5 @@
+import { octokit } from './github.js';
+
 /**
  *
  * @param {string} repo - The name of the repository e.g. 'mui/material-ui'
@@ -44,15 +46,15 @@ export async function fetchSnapshot(repo, sha) {
  */
 async function getParentCommits(repo, commit, depth = 4) {
   try {
-    const response = await fetch(
-      `https://api.github.com/repos/${repo}/commits?sha=${commit}&per_page=${depth}`,
-    );
-    if (!response.ok) {
-      throw new Error(`GitHub API request failed: ${response.status}`);
-    }
+    const [owner, repoName] = repo.split('/');
+
+    const { data: commits } = await octokit.repos.listCommits({
+      owner,
+      repo: repoName,
+      sha: commit,
+      per_page: depth,
+    });
 
-    /** @type {{ sha: string }[]} */
-    const commits = await response.json();
     // Skip the first commit (which is the starting commit) and return the rest
     return commits.slice(1).map((commitDetails) => commitDetails.sha);
   } catch (/** @type {any} */ error) {

package/src/github.js

@@ -0,0 +1,11 @@
+// @ts-check
+
+import { Octokit } from '@octokit/rest';
+import { createActionAuth } from '@octokit/auth-action';
+
+// Create and export Octokit instance
+/** @type {import('@octokit/rest').Octokit} */
+export const octokit = new Octokit({
+  authStrategy: process.env.GITHUB_TOKEN ? createActionAuth : undefined,
+  userAgent: 'bundle-size-checker',
+});

package/src/renderMarkdownReport.js

@@ -7,6 +7,7 @@
 import { calculateSizeDiff } from './sizeDiff.js';
 import { fetchSnapshot, fetchSnapshotWithFallback } from './fetchSnapshot.js';
 import { displayPercentFormatter, byteSizeChangeFormatter } from './formatUtils.js';
+import { octokit } from './github.js';
 
 /**
  * Generates a symbol based on the relative change value.
@@ -224,11 +225,19 @@ function getDetailsUrl(prInfo, options = {}) {
 export async function renderMarkdownReport(prInfo, circleciBuildNumber, options = {}) {
   let markdownContent = '';
 
-  const baseCommit = prInfo.base.sha;
   const prCommit = prInfo.head.sha;
   const repo = prInfo.base.repo.full_name;
   const { fallbackDepth = 3 } = options;
 
+  const [owner, repoName] = repo.split('/');
+  const { data } = await octokit.repos.compareCommits({
+    owner,
+    repo: repoName,
+    base: prInfo.base.sha,
+    head: prCommit,
+  });
+  const baseCommit = data.merge_base_commit.sha;
+
   const [baseResult, prSnapshot] = await Promise.all([
     fetchSnapshotWithFallback(repo, baseCommit, fallbackDepth),
     fetchSnapshot(repo, prCommit),
@@ -237,9 +246,9 @@ export async function renderMarkdownReport(prInfo, circleciBuildNumber, options
   const { snapshot: baseSnapshot, actualCommit: actualBaseCommit } = baseResult;
 
   if (!baseSnapshot) {
-    markdownContent += `_:no_entry_sign: No bundle size snapshot found for base commit ${baseCommit} or any of its ${fallbackDepth} parent commits._\n\n`;
+    markdownContent += `_:no_entry_sign: No bundle size snapshot found for merge base ${baseCommit} or any of its ${fallbackDepth} parent commits._\n\n`;
   } else if (actualBaseCommit !== baseCommit) {
-    markdownContent += `_:information_source: Using snapshot from parent commit ${actualBaseCommit} (fallback from ${baseCommit})._\n\n`;
+    markdownContent += `_:information_source: Using snapshot from parent commit ${actualBaseCommit} (fallback from merge base ${baseCommit})._\n\n`;
   }
 
   const sizeDiff = calculateSizeDiff(baseSnapshot ?? {}, prSnapshot);

package/src/renderMarkdownReport.test.js

@@ -1,9 +1,22 @@
+/* eslint-disable testing-library/render-result-naming-convention */
 import { vi, describe, it, expect, beforeEach } from 'vitest';
 import { renderMarkdownReport } from './renderMarkdownReport.js';
 import * as fetchSnapshotModule from './fetchSnapshot.js';
 
 // Mock the fetchSnapshot module
 vi.mock('./fetchSnapshot.js');
+// Mock the @octokit/rest module
+vi.mock('@octokit/rest', () => ({
+  Octokit: vi.fn(() => ({
+    repos: {
+      compareCommits: vi.fn(),
+      listCommits: vi.fn(),
+    },
+    pulls: {
+      get: vi.fn(),
+    },
+  })),
+}));
 
 describe('renderMarkdownReport', () => {
   const mockFetchSnapshot = vi.mocked(fetchSnapshotModule.fetchSnapshot);
@@ -23,9 +36,26 @@ describe('renderMarkdownReport', () => {
     },
   };
 
-  beforeEach(() => {
+  beforeEach(async () => {
     mockFetchSnapshot.mockClear();
     mockFetchSnapshotWithFallback.mockClear();
+
+    // Import and mock the octokit instance after mocking the module
+    const { octokit } = await import('./github.js');
+
+    // Set up default mock for compareCommits to return the base commit SHA
+    vi.mocked(octokit.repos.compareCommits).mockResolvedValue(
+      /** @type {any} */ ({
+        data: {
+          merge_base_commit: {
+            sha: mockPrInfo.base.sha,
+          },
+        },
+      }),
+    );
+
+    // Clear any previous mock calls
+    vi.mocked(octokit.repos.compareCommits).mockClear();
   });
 
   it('should generate markdown report with size increases', async () => {
@@ -108,7 +138,7 @@ describe('renderMarkdownReport', () => {
     const result = await renderMarkdownReport(mockPrInfo);
 
     expect(result).toContain(
-      'No bundle size snapshot found for base commit abc123 or any of its 3 parent commits.',
+      'No bundle size snapshot found for merge base abc123 or any of its 3 parent commits.',
     );
   });
 
@@ -511,7 +541,9 @@ describe('renderMarkdownReport', () => {
 
     const result = await renderMarkdownReport(mockPrInfo);
 
-    expect(result).toContain('Using snapshot from parent commit parent1 (fallback from abc123)');
+    expect(result).toContain(
+      'Using snapshot from parent commit parent1 (fallback from merge base abc123)',
+    );
     expect(result).toContain('baseCommit=parent1');
   });
 
@@ -526,7 +558,7 @@ describe('renderMarkdownReport', () => {
     const result = await renderMarkdownReport(mockPrInfo);
 
     expect(result).toContain(
-      'No bundle size snapshot found for base commit abc123 or any of its 3 parent commits.',
+      'No bundle size snapshot found for merge base abc123 or any of its 3 parent commits.',
     );
   });
 
@@ -547,7 +579,9 @@ describe('renderMarkdownReport', () => {
 
     const result = await renderMarkdownReport(mockPrInfo, undefined, { fallbackDepth: 1 });
 
-    expect(result).toContain('Using snapshot from parent commit parent1 (fallback from abc123)');
+    expect(result).toContain(
+      'Using snapshot from parent commit parent1 (fallback from merge base abc123)',
+    );
     expect(mockFetchSnapshotWithFallback).toHaveBeenCalledWith('mui/material-ui', 'abc123', 1);
   });
 });

package/src/types.d.ts

@@ -73,6 +73,12 @@ interface CommandLineArgs {
   vite?: boolean;
 }
 
+interface ReportCommandArgs {
+  pr?: number;
+  owner?: string;
+  repo?: string;
+}
+
 // Diff command argument types
 interface DiffCommandArgs {
   base: string;

package/.eslintrc.cjs

@@ -1,14 +0,0 @@
-module.exports = {
-  rules: {
-    'import/prefer-default-export': 'off',
-    // Allow .js file extensions in import statements for ESM compatibility
-    'import/extensions': [
-      'error',
-      'ignorePackages',
-      {
-        js: 'always',
-        mjs: 'always',
-      },
-    ],
-  },
-};