Function reportDiff

apps/site/scripts/compare-size/index.mjs:77–142

* Compares old and new assets and returns a markdown report

({ assets: oldAssets }, { assets: newAssets })

 * Compares old and new assets and returns a markdown report
 */
function reportDiff({ assets: oldAssets }, { assets: newAssets }) {
  const changes = categorizeChanges(oldAssets, newAssets);

  const oldTotal = oldAssets.reduce((sum, a) => sum + a.size, 0);
  const newTotal = newAssets.reduce((sum, a) => sum + a.size, 0);
  const totalDelta = newTotal - oldTotal;

  // Summary table
  let report = `## 📦 Build Size Comparison\n\n### Summary\n\n| Metric | Value |\n|--------|-------|\n`;
  report += `| Old Total Size | ${formatBytes(oldTotal)} |\n`;
  report += `| New Total Size | ${formatBytes(newTotal)} |\n`;
  report += `| Delta | ${formatBytes(totalDelta)} (${formatPercent(
    oldTotal,
    newTotal
  )}) |\n\n`;

  // Changes
  if (
    changes.added.length ||
    changes.removed.length ||
    changes.modified.length
  ) {
    report += `### Changes\n\n`;

    // Asset tables
    report += tableSection(
      'Added Assets',
      changes.added,
      [
        { label: 'Name', format: a => `\`${a.name}\`` },
        { label: 'Size', format: a => formatBytes(a.size) },
      ],
      '➕'
    );

    report += tableSection(
      'Removed Assets',
      changes.removed,
      [
        { label: 'Name', format: a => `\`${a.name}\`` },
        { label: 'Size', format: a => formatBytes(a.size) },
      ],
      '➖'
    );

    report += tableSection(
      'Modified Assets',
      changes.modified,
      [
        { label: 'Name', format: a => `\`${a.name}\`` },
        { label: 'Old Size', format: a => formatBytes(a.oldSize) },
        { label: 'New Size', format: a => formatBytes(a.newSize) },
        {
          label: 'Delta',
          format: a =>
            `${a.delta > 0 ? '📈' : '📉'} ${formatBytes(
              a.delta
            )} (${formatPercent(a.oldSize, a.newSize)})`,