From 36fa8fe577705443c8fbc76a159ca2ea38025492 Mon Sep 17 00:00:00 2001 From: Dany Castillo <31006608+dcastil@users.noreply.github.com> Date: Sun, 23 Jun 2024 00:54:05 +0200 Subject: [PATCH] add bundle size table to comment --- .github/actions/metrics-report/src/main.mjs | 92 +++++++++++++++++++++ 1 file changed, 92 insertions(+) diff --git a/.github/actions/metrics-report/src/main.mjs b/.github/actions/metrics-report/src/main.mjs index a39c3c9..649c4bb 100644 --- a/.github/actions/metrics-report/src/main.mjs +++ b/.github/actions/metrics-report/src/main.mjs @@ -29,6 +29,7 @@ async function run() { const commentBody = getBodyText([ ['# Metrics report'], [`on commit ${pullRequest.head?.sha} at \`${new Date().toISOString()}\``], + getBundleSizeTable(localBundleSizes, baseBundleSizes), ]) await setComment(commentBody) @@ -87,3 +88,94 @@ function getSizeInKb(size) { function getBodyText(paragraphs) { return paragraphs.map((lines) => lines.join('\n')).join('\n\n') } + +/** + * @param {import('./get-package-size.mjs').OverallBundleSize[]} localBundleSizes + * @param {import('./get-package-size.mjs').OverallBundleSize[]} baseBundleSizes + */ +function getBundleSizeTable(localBundleSizes, baseBundleSizes) { + const baseBundleSizesMap = new Map( + baseBundleSizes.map((bundleSize) => [bundleSize.bundleSize.label, bundleSize]), + ) + + return [ + '| Bundle | Size | Minified | Minified and Brotli compressed |', + '| --- | --- | --- | --- |', + ...localBundleSizes.flatMap(({ bundleSize, singleExportSizes }) => { + const baseBundleSize = baseBundleSizesMap.get(bundleSize.label) + + const mainBundleRow = getBundleSizeRow(bundleSize, baseBundleSize?.bundleSize) + + if (singleExportSizes) { + const baseBundleSizeMap = new Map( + baseBundleSize?.singleExportSizes?.map((bundleSize) => [ + bundleSize.label, + bundleSize, + ]), + ) + + return [ + mainBundleRow, + ...singleExportSizes.map((singleExportSize) => { + const baseBundleSize = baseBundleSizeMap.get(singleExportSize.label) + return getBundleSizeRow(singleExportSize, baseBundleSize, true) + }), + ] + } + + return mainBundleRow + }), + ] +} + +/** + * + * @param {import('./get-package-size.mjs').BundleSize} bundleSize + * @param {import('./get-package-size.mjs').BundleSize=} baseBundleSize + * @param {boolean=} isIndented + */ +function getBundleSizeRow(bundleSize, baseBundleSize, isIndented) { + return [ + [isIndented ? '→ ' : '', bundleSize.label].join('').padEnd(30), + getBundleSizeDifference(bundleSize.size, baseBundleSize?.size), + getBundleSizeDifference(bundleSize.sizeMinified, baseBundleSize?.sizeMinified), + getBundleSizeDifference( + bundleSize.sizeBrotliCompressed, + baseBundleSize?.sizeBrotliCompressed, + ), + ].join(' | ') +} + +/** + * + * @param {number} size + * @param {number=} baseSize + */ +function getBundleSizeDifference(size, baseSize) { + if (baseSize) { + return getSizeInKb(size) + ' ' + getSizeDifference(size, baseSize) + } + + return getSizeInKb(size) +} + +/** + * @param {number} size + * @param {number} baseSize + */ +function getSizeDifference(size, baseSize) { + const difference = size - baseSize + const differencePercent = difference / baseSize + + const percentageString = differencePercent.toLocaleString('en-GB', { + style: 'percent', + minimumFractionDigits: 1, + maximumFractionDigits: 1, + signDisplay: 'exceptZero', + }) + + const isZero = difference === 0 + const isPositive = difference > 0 + + return ['(', percentageString, isZero ? '' : isPositive ? ' ↑' : ' ↓', ')'].join('') +}