@mui/internal-bundle-size-checker 1.0.4 → 1.0.5-canary.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/internal-bundle-size-checker",
-  "version": "1.0.4",
+  "version": "1.0.5-canary.1",
   "description": "Bundle size checker for MUI packages.",
   "type": "module",
   "main": "./src/index.js",
@@ -32,23 +32,25 @@
     "execa": "^7.2.0",
     "fast-glob": "^3.3.2",
     "file-loader": "^6.2.0",
-    "fs-extra": "^11.2.0",
     "micromatch": "^4.0.8",
     "piscina": "^4.2.1",
+    "rollup-plugin-visualizer": "^6.0.1",
     "terser-webpack-plugin": "^5.3.10",
+    "vite": "^6.3.5",
     "webpack": "^5.90.3",
     "webpack-bundle-analyzer": "^4.10.1",
     "yargs": "^17.7.2"
   },
   "devDependencies": {
     "@types/env-ci": "^3.1.4",
-    "@types/fs-extra": "^11.0.4",
     "@types/micromatch": "^4.0.9",
     "@types/webpack": "^5.28.5",
     "@types/webpack-bundle-analyzer": "^4.7.0",
     "@types/yargs": "^17.0.33"
   },
+  "gitSha": "925798014aef249e6650d8fb67463a86ee675f50",
   "scripts": {
-    "typescript": "tsc -p tsconfig.json"
+    "typescript": "tsc -p tsconfig.json",
+    "test": "pnpm -w test --project @mui/internal-bundle-size-checker"
   }
 }

package/src/cli.js

@@ -2,15 +2,12 @@
 
 import path from 'path';
 import os from 'os';
-import fse from 'fs-extra';
+import fs from 'fs/promises';
 import yargs from 'yargs';
 import Piscina from 'piscina';
 import micromatch from 'micromatch';
 import { loadConfig } from './configLoader.js';
 import { uploadSnapshot } from './uploadSnapshot.js';
-import { calculateSizeDiff } from './sizeDiff.js';
-import { renderMarkdownReportContent, renderMarkdownReport } from './renderMarkdownReport.js';
-import { fetchSnapshot } from './fetchSnapshot.js';
 
 /**
  * @typedef {import('./sizeDiff.js').SizeSnapshot} SizeSnapshot
@@ -34,7 +31,8 @@ async function getWebpackSizes(args, config) {
   });
   // Clean and recreate the build directory
   const buildDir = path.join(rootDir, 'build');
-  await fse.emptyDir(buildDir);
+  await fs.rm(buildDir, { recursive: true, force: true });
+  await fs.mkdir(buildDir, { recursive: true });
 
   if (
     !config ||
@@ -92,8 +90,8 @@ async function run(argv) {
   const bundleSizes = Object.fromEntries(webpackSizes.sort((a, b) => a[0].localeCompare(b[0])));
 
   // Ensure output directory exists
-  await fse.mkdirp(path.dirname(snapshotDestPath));
-  await fse.writeJSON(snapshotDestPath, bundleSizes, { spaces: 2 });
+  await fs.mkdir(path.dirname(snapshotDestPath), { recursive: true });
+  await fs.writeFile(snapshotDestPath, JSON.stringify(bundleSizes, null, 2));
 
   // eslint-disable-next-line no-console
   console.log(`Bundle size snapshot written to ${snapshotDestPath}`);
@@ -114,215 +112,6 @@ async function run(argv) {
   }
 }
 
-/**
- * Resolves a file path that can be relative or absolute
- * @param {string} filePath - The file path to resolve
- * @returns {string} The resolved absolute path
- */
-function resolveFilePath(filePath) {
-  if (path.isAbsolute(filePath)) {
-    return filePath;
-  }
-  return path.resolve(rootDir, filePath);
-}
-
-/**
- * Checks if a string is a URL
- * @param {string} str - The string to check
- * @returns {boolean} Whether the string is a URL
- */
-function isUrl(str) {
-  try {
-    // eslint-disable-next-line no-new
-    new URL(str);
-    return true;
-  } catch {
-    return false;
-  }
-}
-
-/**
- * Loads a snapshot from a URL (http:, https:, or file: scheme)
- * @param {string} source - The source URL
- * @returns {Promise<SizeSnapshot>} The loaded snapshot
- */
-async function loadSnapshot(source) {
-  // Check if it's a valid URL
-  if (!isUrl(source)) {
-    throw new Error(`Invalid URL: ${source}. Use file:, http:, or https: schemes.`);
-  }
-
-  if (source.startsWith('file:')) {
-    // Handle file: URL
-    // Remove file: prefix and handle the rest as a file path
-    // For file:///absolute/path
-    let filePath = source.substring(source.indexOf('file:') + 5);
-
-    // Remove leading slashes for absolute paths on this machine
-    while (
-      filePath.startsWith('/') &&
-      !path.isAbsolute(filePath.substring(1)) &&
-      filePath.length > 1
-    ) {
-      filePath = filePath.substring(1);
-    }
-
-    // Now resolve the path
-    filePath = resolveFilePath(filePath);
-
-    try {
-      return await fse.readJSON(filePath);
-    } catch (/** @type {any} */ error) {
-      throw new Error(`Failed to read snapshot from ${filePath}: ${error.message}`);
-    }
-  }
-
-  // HTTP/HTTPS URL - fetch directly
-  const response = await fetch(source);
-  if (!response.ok) {
-    throw new Error(`Failed to fetch snapshot from ${source}: ${response.statusText}`);
-  }
-  const body = await response.json();
-  return body;
-}
-
-/**
- * Handler for the diff command
- * @param {DiffCommandArgs} argv - Command line arguments
- */
-async function diffHandler(argv) {
-  const { base, head = 'file:./size-snapshot.json', output, reportUrl } = argv;
-
-  if (!base) {
-    console.error('The --base option is required');
-    process.exit(1);
-  }
-
-  try {
-    // Load snapshots
-    // eslint-disable-next-line no-console
-    console.log(`Loading base snapshot from ${base}...`);
-    const baseSnapshot = await loadSnapshot(base);
-
-    // eslint-disable-next-line no-console
-    console.log(`Loading head snapshot from ${head}...`);
-    const headSnapshot = await loadSnapshot(head);
-
-    // Calculate diff
-    const comparison = calculateSizeDiff(baseSnapshot, headSnapshot);
-
-    // Output
-    if (output === 'markdown') {
-      // Generate markdown with optional report URL
-      let markdownContent = renderMarkdownReportContent(comparison);
-
-      // Add report URL if provided
-      if (reportUrl) {
-        markdownContent += `\n\n[Details of bundle changes](${reportUrl})`;
-      }
-
-      // eslint-disable-next-line no-console
-      console.log(markdownContent);
-    } else {
-      // Default JSON output
-      // eslint-disable-next-line no-console
-      console.log(JSON.stringify(comparison, null, 2));
-    }
-  } catch (/** @type {any} */ error) {
-    console.error(`Error: ${error.message}`);
-    process.exit(1);
-  }
-}
-
-/**
- * Fetches GitHub PR information
- * @param {string} owner - Repository owner
- * @param {string} repo - Repository name
- * @param {number} prNumber - Pull request number
- * @returns {Promise<PrInfo>} PR information
- */
-async function fetchPrInfo(owner, repo, prNumber) {
-  const url = `https://api.github.com/repos/${owner}/${repo}/pulls/${prNumber}`;
-
-  try {
-    // eslint-disable-next-line no-console
-    console.log(`Fetching PR info from ${url}...`);
-    const response = await fetch(url);
-
-    if (!response.ok) {
-      throw new Error(`GitHub API request failed: ${response.statusText} (${response.status})`);
-    }
-
-    return await response.json();
-  } catch (/** @type {any} */ error) {
-    console.error(`Failed to fetch PR info: ${error.message}`);
-    throw error;
-  }
-}
-
-/**
- * Handler for the pr command
- * @param {PrCommandArgs} argv - Command line arguments
- */
-async function prHandler(argv) {
-  const { prNumber, circleci, output } = argv;
-
-  try {
-    // Load the config to get the repository information
-    const config = await loadConfig(rootDir);
-
-    if (!config.upload) {
-      throw new Error(
-        'Upload is not configured. Please enable it in your bundle-size-checker config.',
-      );
-    }
-
-    // Extract owner and repo from repository config
-    const [owner, repo] = config.upload.repo.split('/');
-
-    if (!owner || !repo) {
-      throw new Error(
-        `Invalid repository format in config: ${config.upload.repo}. Expected format: "owner/repo"`,
-      );
-    }
-
-    // Fetch PR information from GitHub
-    const prInfo = await fetchPrInfo(owner, repo, prNumber);
-
-    // Generate the report
-    // eslint-disable-next-line no-console
-    console.log('Generating bundle size report...');
-    const report = await renderMarkdownReport(prInfo, circleci);
-
-    // Output
-    if (output === 'markdown') {
-      // eslint-disable-next-line no-console
-      console.log(report);
-    } else {
-      // For JSON we need to load the snapshots and calculate differences
-      const baseCommit = prInfo.base.sha;
-      const prCommit = prInfo.head.sha;
-
-      // eslint-disable-next-line no-console
-      console.log(`Fetching base snapshot for commit ${baseCommit}...`);
-      // eslint-disable-next-line no-console
-      console.log(`Fetching PR snapshot for commit ${prCommit}...`);
-
-      const [baseSnapshot, prSnapshot] = await Promise.all([
-        fetchSnapshot(config.upload.repo, baseCommit).catch(() => ({})),
-        fetchSnapshot(config.upload.repo, prCommit).catch(() => ({})),
-      ]);
-
-      const comparison = calculateSizeDiff(baseSnapshot, prSnapshot);
-      // eslint-disable-next-line no-console
-      console.log(JSON.stringify(comparison, null, 2));
-    }
-  } catch (/** @type {any} */ error) {
-    console.error(`Error: ${error.message}`);
-    process.exit(1);
-  }
-}
-
 yargs(process.argv.slice(2))
   // @ts-expect-error
   .command({
@@ -345,6 +134,11 @@ yargs(process.argv.slice(2))
           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:
@@ -365,62 +159,6 @@ yargs(process.argv.slice(2))
     },
     handler: run,
   })
-  // @ts-expect-error
-  .command({
-    command: 'diff',
-    describe: 'Compare two bundle size snapshots',
-    builder: (cmdYargs) => {
-      return cmdYargs
-        .option('base', {
-          describe: 'Base snapshot URL (file:, http:, or https: scheme)',
-          type: 'string',
-          demandOption: true,
-        })
-        .option('head', {
-          describe:
-            'Head snapshot URL (file:, http:, or https: scheme), defaults to file:./size-snapshot.json',
-          type: 'string',
-          default: 'file:./size-snapshot.json',
-        })
-        .option('output', {
-          alias: 'o',
-          describe: 'Output format (json or markdown)',
-          type: 'string',
-          choices: ['json', 'markdown'],
-          default: 'json',
-        })
-        .option('reportUrl', {
-          describe: 'URL to the detailed report (optional)',
-          type: 'string',
-        });
-    },
-    handler: diffHandler,
-  })
-  // @ts-expect-error
-  .command({
-    command: 'pr <prNumber>',
-    describe: 'Generate a bundle size report for a GitHub pull request',
-    builder: (cmdYargs) => {
-      return cmdYargs
-        .positional('prNumber', {
-          describe: 'GitHub pull request number',
-          type: 'number',
-          demandOption: true,
-        })
-        .option('output', {
-          alias: 'o',
-          describe: 'Output format (json or markdown)',
-          type: 'string',
-          choices: ['json', 'markdown'],
-          default: 'markdown', // Default to markdown for PR reports
-        })
-        .option('circleci', {
-          describe: 'CircleCI build number for the report URL (optional)',
-          type: 'string',
-        });
-    },
-    handler: prHandler,
-  })
   .help()
   .strict(true)
   .version(false)

package/src/fetchSnapshot.js

@@ -34,3 +34,61 @@ export async function fetchSnapshot(repo, sha) {
 
   throw new Error(`Failed to fetch snapshot`, { cause: lastError });
 }
+
+/**
+ * Gets parent commits for a given commit SHA using GitHub API
+ * @param {string} repo - Repository name (e.g., 'mui/material-ui')
+ * @param {string} commit - The commit SHA to start from
+ * @param {number} depth - How many commits to retrieve (including the starting commit)
+ * @returns {Promise<string[]>} Array of commit SHAs in chronological order (excluding the starting commit)
+ */
+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}`);
+    }
+
+    /** @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) {
+    console.warn(`Failed to get parent commits for ${commit}: ${error.message}`);
+    return [];
+  }
+}
+
+/**
+ * Attempts to fetch a snapshot with fallback to parent commits
+ * @param {string} repo - Repository name
+ * @param {string} commit - The commit SHA to start from
+ * @param {number} [fallbackDepth=3] - How many parent commits to try as fallback
+ * @returns {Promise<{snapshot: import('./sizeDiff').SizeSnapshot | null, actualCommit: string | null}>}
+ */
+export async function fetchSnapshotWithFallback(repo, commit, fallbackDepth = 3) {
+  // Try the original commit first
+  try {
+    const snapshot = await fetchSnapshot(repo, commit);
+    return { snapshot, actualCommit: commit };
+  } catch (/** @type {any} */ error) {
+    // fallthrough to parent commits if the snapshot for the original commit fails
+  }
+
+  // Get parent commits and try each one
+  const parentCommits = await getParentCommits(repo, commit, fallbackDepth + 1);
+
+  for (const parentCommit of parentCommits) {
+    try {
+      // eslint-disable-next-line no-await-in-loop
+      const snapshot = await fetchSnapshot(repo, parentCommit);
+      return { snapshot, actualCommit: parentCommit };
+    } catch {
+      // fallthrough to the next parent commit if fetching fails
+    }
+  }
+
+  return { snapshot: null, actualCommit: null };
+}

package/src/index.js

@@ -1,17 +1,10 @@
 import defineConfig from './defineConfig.js';
 import { loadConfig } from './configLoader.js';
 import { calculateSizeDiff } from './sizeDiff.js';
-import { renderMarkdownReport, renderMarkdownReportContent } from './renderMarkdownReport.js';
+import { renderMarkdownReport } from './renderMarkdownReport.js';
 import { fetchSnapshot } from './fetchSnapshot.js';
 
-export {
-  defineConfig,
-  loadConfig,
-  calculateSizeDiff,
-  renderMarkdownReport,
-  renderMarkdownReportContent,
-  fetchSnapshot,
-};
+export { defineConfig, loadConfig, calculateSizeDiff, renderMarkdownReport, fetchSnapshot };
 
 /**
  * @typedef {import('./sizeDiff.js').Size} Size

package/src/renderMarkdownReport.js

@@ -5,17 +5,8 @@
  */
 
 import { calculateSizeDiff } from './sizeDiff.js';
-import { fetchSnapshot } from './fetchSnapshot.js';
+import { fetchSnapshot, fetchSnapshotWithFallback } from './fetchSnapshot.js';
 import { displayPercentFormatter, byteSizeChangeFormatter } from './formatUtils.js';
-/**
- *
- * @param {'▲' | '▼'} symbol
- * @param {KatexColor} color
- * @returns
- */
-function formatSymbol(symbol, color) {
-  return `<sup>\${\\tiny{\\color{${color}}${symbol}}}$</sup>`;
-}
 
 /**
  * Generates a symbol based on the relative change value.
@@ -24,16 +15,16 @@ function formatSymbol(symbol, color) {
  */
 function getChangeIcon(relative) {
   if (relative === null) {
-    return formatSymbol('▲', 'orangered');
+    return '🔺';
   }
   if (relative === -1) {
-    return formatSymbol('▼', 'cornflowerblue');
+    return '▼';
   }
   if (relative < 0) {
-    return formatSymbol('▼', 'green');
+    return '▼';
   }
   if (relative > 0) {
-    return formatSymbol('▲', 'red');
+    return '🔺';
   }
   return ' ';
 }
@@ -75,69 +66,66 @@ function generateEmphasizedChange({ id: bundle, parsed, gzip }) {
   const changeParsed = formatChange(parsed.absoluteDiff, parsed.relativeDiff);
   const changeGzip = formatChange(gzip.absoluteDiff, gzip.relativeDiff);
 
-  return `**${bundle}**&emsp;**parsed:**${changeParsed} **gzip:**${changeGzip}`;
+  return `**${bundle}**&emsp;**parsed:** ${changeParsed} **gzip:** ${changeGzip}`;
 }
 
 /**
  * Generates a Markdown report for bundle size changes
  * @param {ComparisonResult} comparison - Comparison result from calculateSizeDiff
  * @param {Object} [options] - Additional options
- * @param {number} [options.visibleLimit=10] - Number of entries to show before collapsing
- * @param {number} [options.parsedSizeChangeThreshold=300] - Threshold for parsed size change by which to show the entry
- * @param {number} [options.gzipSizeChangeThreshold=100] - Threshold for gzipped size change by which to show the entry
+ * @param {string[]} [options.track] - Array of bundle IDs to track. If specified, totals will only include tracked bundles and all tracked bundles will be shown prominently
+ * @param {number} [options.maxDetailsLines=100] - Maximum number of bundles to show in details section
  * @returns {string} Markdown report
  */
 export function renderMarkdownReportContent(
   comparison,
-  { visibleLimit = 10, parsedSizeChangeThreshold = 300, gzipSizeChangeThreshold = 100 } = {},
+  { track = [], maxDetailsLines = 100 } = {},
 ) {
   let markdownContent = '';
 
-  markdownContent += `**Total Size Change:**${formatChange(
-    comparison.totals.totalParsed,
-    comparison.totals.totalParsedPercent,
-  )} - **Total Gzip Change:**${formatChange(
-    comparison.totals.totalGzip,
-    comparison.totals.totalGzipPercent,
-  )}\n`;
-
-  markdownContent += `Files: ${comparison.fileCounts.total} total (${
-    comparison.fileCounts.added
-  } added, ${comparison.fileCounts.removed} removed, ${comparison.fileCounts.changed} changed)\n\n`;
-
-  const changedEntries = comparison.entries.filter(
-    (entry) => Math.abs(entry.parsed.absoluteDiff) > 0 || Math.abs(entry.gzip.absoluteDiff) > 0,
-  );
-
-  const visibleEntries = [];
-  const hiddenEntries = [];
-
-  for (const entry of changedEntries) {
-    const { parsed, gzip } = entry;
-    const isSignificantChange =
-      Math.abs(parsed.absoluteDiff) > parsedSizeChangeThreshold ||
-      Math.abs(gzip.absoluteDiff) > gzipSizeChangeThreshold;
-    if (isSignificantChange && visibleEntries.length < visibleLimit) {
-      visibleEntries.push(entry);
-    } else {
-      hiddenEntries.push(entry);
-    }
+  if (track.length > 0) {
+    const entryMap = new Map(comparison.entries.map((entry) => [entry.id, entry]));
+    const trackedEntries = track.map((bundleId) => {
+      const trackedEntry = entryMap.get(bundleId);
+      if (!trackedEntry) {
+        throw new Error(`Tracked bundle not found in head snapshot: ${bundleId}`);
+      }
+      return trackedEntry;
+    });
+    // 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,
+      comparison.totals.totalParsedPercent,
+    )} - **Total Gzip Change:** ${formatChange(
+      comparison.totals.totalGzip,
+      comparison.totals.totalGzipPercent,
+    )}\n`;
+
+    markdownContent += `Files: ${comparison.fileCounts.total} total (${
+      comparison.fileCounts.added
+    } added, ${comparison.fileCounts.removed} removed, ${comparison.fileCounts.changed} changed)\n\n`;
   }
 
-  const importantChanges = visibleEntries.map(generateEmphasizedChange);
-  const hiddenChanges = hiddenEntries.map(generateEmphasizedChange);
-
-  // Add important changes to markdown
-  if (importantChanges.length > 0) {
-    // Show the most significant changes first, up to the visible limit
-    const visibleChanges = importantChanges.slice(0, visibleLimit);
-    markdownContent += `${visibleChanges.join('\n')}`;
-  }
-
-  // If there are more changes, add them in a collapsible details section
-  if (hiddenChanges.length > 0) {
-    markdownContent += `\n<details>\n<summary>Show ${hiddenChanges.length} more bundle changes</summary>\n\n`;
-    markdownContent += `${hiddenChanges.join('\n')}\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>`;
   }
 
@@ -147,16 +135,19 @@ export function renderMarkdownReportContent(
 /**
  *
  * @param {PrInfo} prInfo
- * @param {string} [circleciBuildNumber] - The CircleCI build number
+ * @param {Object} [options] - Optional parameters
+ * @param {string | null} [options.circleciBuildNumber] - The CircleCI build number
+ * @param {string | null} [options.actualBaseCommit] - The actual commit SHA used for comparison (may differ from prInfo.base.sha)
  * @returns {URL}
  */
-function getDetailsUrl(prInfo, circleciBuildNumber) {
+function getDetailsUrl(prInfo, options = {}) {
+  const { circleciBuildNumber, actualBaseCommit } = options;
   const detailedComparisonUrl = new URL(
     `https://frontend-public.mui.com/size-comparison/${prInfo.base.repo.full_name}/diff`,
   );
   detailedComparisonUrl.searchParams.set('prNumber', String(prInfo.number));
   detailedComparisonUrl.searchParams.set('baseRef', prInfo.base.ref);
-  detailedComparisonUrl.searchParams.set('baseCommit', prInfo.base.sha);
+  detailedComparisonUrl.searchParams.set('baseCommit', actualBaseCommit || prInfo.base.sha);
   detailedComparisonUrl.searchParams.set('headCommit', prInfo.head.sha);
   if (circleciBuildNumber) {
     detailedComparisonUrl.searchParams.set('circleCIBuildNumber', circleciBuildNumber);
@@ -168,33 +159,40 @@ function getDetailsUrl(prInfo, circleciBuildNumber) {
  *
  * @param {PrInfo} prInfo
  * @param {string} [circleciBuildNumber] - The CircleCI build number
+ * @param {Object} [options] - Additional options
+ * @param {string[]} [options.track] - Array of bundle IDs to track
+ * @param {number} [options.fallbackDepth=3] - How many parent commits to try as fallback when base snapshot is missing
+ * @param {number} [options.maxDetailsLines=100] - Maximum number of bundles to show in details section
  * @returns {Promise<string>} Markdown report
  */
-export async function renderMarkdownReport(prInfo, circleciBuildNumber) {
+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 [baseSnapshot, prSnapshot] = await Promise.all([
-    fetchSnapshot(repo, baseCommit).catch((error) => {
-      console.error(`Error fetching base snapshot: ${error}`);
-      return null;
-    }),
+  const { fallbackDepth = 3 } = options;
+
+  const [baseResult, prSnapshot] = await Promise.all([
+    fetchSnapshotWithFallback(repo, baseCommit, fallbackDepth),
     fetchSnapshot(repo, prCommit),
   ]);
 
+  const { snapshot: baseSnapshot, actualCommit: actualBaseCommit } = baseResult;
+
   if (!baseSnapshot) {
-    markdownContent += `_:no_entry_sign: No bundle size snapshot found for base commit ${baseCommit}._\n\n`;
+    markdownContent += `_:no_entry_sign: No bundle size snapshot found for base commit ${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`;
   }
 
   const sizeDiff = calculateSizeDiff(baseSnapshot ?? {}, prSnapshot);
 
-  const report = renderMarkdownReportContent(sizeDiff);
+  const report = renderMarkdownReportContent(sizeDiff, options);
 
   markdownContent += report;
 
-  markdownContent += `\n\n[Details of bundle changes](${getDetailsUrl(prInfo, circleciBuildNumber)})`;
+  markdownContent += `\n\n[Details of bundle changes](${getDetailsUrl(prInfo, { circleciBuildNumber, actualBaseCommit })})`;
 
   return markdownContent;
 }