.

Author: Kocal

.github/generate-dist-files-size-diff.mjs

@@ -6,7 +6,9 @@
 Usage:
 ```shell
 BASE_DIST_FILES='{"src/Autocomplete/assets/dist/controller.js":{"size":15382,"size_gz":3716,"size_brotli":3125},"src/Chartjs/assets/dist/controller.js":{"size":2281,"size_gz":771,"size_brotli":642},"src/Cropperjs/assets/dist/controller.js":{"size":1044,"size_gz":475,"size_brotli":371}}' \
-PR_DIST_FILES='{"src/Chartjs/assets/dist/controller.js":{"size":2281,"size_gz":771,"size_brotli":642},"src/Cropperjs/assets/dist/controller.js":{"size":1044,"size_gz":475,"size_brotli":371},"src/Cropperjs/assets/dist/style.min.css":{"size":32,"size_gz":66,"size_brotli":34},"src/Dropzone/assets/dist/controller.js":{"size":3199,"size_gz":816,"size_brotli":634}}' \
+PR_DIST_FILES='{"src/Chartjs/assets/dist/controller.js":{"size":1281,"size_gz":171,"size_brotli":641},"src/Cropperjs/assets/dist/controller.js":{"size":1044,"size_gz":475,"size_brotli":371},"src/Cropperjs/assets/dist/style.min.css":{"size":32,"size_gz":66,"size_brotli":34},"src/Dropzone/assets/dist/controller.js":{"size":3199,"size_gz":816,"size_brotli":634},"src/Map/src/Bridge/Google/assets/dist/foo.js":{"size":3199,"size_gz":816,"size_brotli":634}}' \
+GITHUB_REPOSITORY='symfony/ux' \
+GITHUB_HEAD_REF='my-branch-name' \
   node .github/generate-dist-files-size-diff.mjs
 ```
  */
@@ -19,6 +21,14 @@ if (!process.env.PR_DIST_FILES) {
     throw new Error('Missing or invalid "PR_DIST_FILES" env variable.');
 }
 
+if (!process.env.GITHUB_REPOSITORY) {
+    throw new Error('Missing or invalid "GITHUB_REPOSITORY" env variable.');
+}
+
+if (!process.env.GITHUB_HEAD_REF) {
+    throw new Error('Missing or invalid "GITHUB_HEAD_REF" env variable.');
+}
+
 /**
  * Adapted from https://gist.github.com/zentala/1e6f72438796d74531803cc3833c039c?permalink_comment_id=4455218#gistcomment-4455218
  * @param {number} bytes
@@ -44,8 +54,8 @@ function computeDiffPercent(from, to) {
     if (from === to) {
         return 0;
     }
-    
-    return Number(((from - to) / to * -100).toFixed(2));
+
+    return Number(((from - to) / to * -100).toFixed(1));
 }
 
 /**
@@ -57,54 +67,106 @@ function formatDiffPercent(percent) {
 }
 
 export function main() {
-    let base = JSON.parse(process.env.BASE_DIST_FILES);
-    let pr = JSON.parse(process.env.PR_DIST_FILES);
-    let output = '<h1>📊 Dist files size difference</h1>\n\n';
-
-    const files = [...new Set([...Object.keys(pr), ...Object.keys(base)])].sort().reduce((acc, file) => {
-        const added = !base[file] && pr[file];
-        const removed = base[file] && !pr[file];
-        const diff_percent_size = removed ? -100 : (added ? 100 : (computeDiffPercent(base[file].size, pr[file].size)));
-        const diff_percent_size_gz = removed ? -100 : (added ? 100 : (computeDiffPercent(base[file].size_gz, pr[file].size_gz)));
-        const diff_percent_size_brotli = removed ? -100 : (added ? 100 : (computeDiffPercent(base[file].size_brotli, pr[file].size_brotli)));
-
-        if (diff_percent_size !== 0 && diff_percent_size_gz !== 0 && diff_percent_size_brotli !== 0) {
-            acc.set(file, {
-                state: added ? 'added' : (removed ? 'removed' : 'changed'),
-                diff_percent_size,
-                diff_percent_size_gz,
-                diff_percent_size_brotli
-            });
-        }
+    const repoUrl = `https://github.com/${process.env.GITHUB_REPOSITORY}`;
+    /** @type {Record<string, {size: number, size_gz: number, size_brotli: number}>} */
+    const base = JSON.parse(process.env.BASE_DIST_FILES);
+    /** @type {Record<string, {size: number, size_gz: number, size_brotli: number}>} */
+    const pr = JSON.parse(process.env.PR_DIST_FILES);
+    let output = '<h1>📊 Dist packagesFiles size difference</h1>\n\n';
 
-        return acc;
-    }, new Map);
+    /**
+     * @type {Map<string, {
+     *     meta: {
+     *         packageName: string,
+     *         bridgeName: string,
+     *         url: string,
+     *     },
+     *     files: Set<{
+     *         state: 'added' | 'removed' | 'changed',
+     *         before: {size: number, sizeGz: number, sizeBrotli: number},
+     *         after: {size: number, sizeGz: number, sizeBrotli: number},
+     *         diffPercent: {size: number, sizeGz: number, sizeBrotli: number},
+     *         meta: {fileNameShort: string, fileNameUrl: string}
+     *     }>
+     * }>}
+     */
+    const packagesFiles = [...new Set([...Object.keys(pr), ...Object.keys(base)])]
+        .sort()
+        .reduce((acc, file) => {
+            const beforeSize = base[file]?.size || 0;
+            const afterSize = pr[file]?.size || 0;
+            const beforeSizeGz = base[file]?.size_gz || 0;
+            const afterSizeGz = pr[file]?.size_gz || 0;
+            const beforeSizeBrotli = base[file]?.size_brotli || 0;
+            const afterSizeBrotli = pr[file]?.size_brotli || 0;
 
-    if (files.size === 0) {
-        output += 'ℹ️ No difference in dist files.\n';
+            if (beforeSize !== afterSize) {
+                const isBridge = file.includes('src/Bridge'); // we assume that's enough for now
+                const packageName = file.split('/')[1];
+                const bridgeName = isBridge ? file.split('/')[4] : '';
+                const key = isBridge ? `${packageName} (Bridge ${bridgeName})` : packageName;
+                if (!acc.has(key)) {
+                    acc.set(key, {
+                        meta: {
+                            packageName,
+                            bridgeName,
+                            url: isBridge ? `${repoUrl}/tree/${process.env.GITHUB_HEAD_REF}/src/${packageName}/src/Bridge/${bridgeName}/assets/dist` : `${repoUrl}/tree/${process.env.GITHUB_HEAD_REF}/src/${packageName}/assets/dist`,
+                        }, files: new Set(),
+                    });
+                }
+
+                const added = !base[file] && pr[file];
+                const removed = base[file] && !pr[file];
+
+                acc.get(key).files.add({
+                    state: added ? 'added' : (removed ? 'removed' : 'changed'),
+                    before: { size: beforeSize, sizeGz: beforeSizeGz, sizeBrotli: beforeSizeBrotli },
+                    after: { size: afterSize, sizeGz: afterSizeGz, sizeBrotli: afterSizeBrotli },
+                    diffPercent: {
+                        size: removed ? -100 : (added ? 100 : (computeDiffPercent(beforeSize, afterSize))),
+                        sizeGz: removed ? -100 : (added ? 100 : (computeDiffPercent(beforeSizeGz, afterSizeGz))),
+                        sizeBrotli: removed ? -100 : (added ? 100 : (computeDiffPercent(beforeSizeBrotli, afterSizeBrotli))),
+                    },
+                    meta: {
+                        fileNameShort: file.replace(isBridge ? `src/${file.split('/')[1]}/src/Bridge/${file.split('/')[4]}/assets/dist/` : `src/${file.split('/')[1]}/assets/dist/`, ''),
+                        fileNameUrl: `${repoUrl}/blob/${process.env.GITHUB_HEAD_REF}/${file}`,
+                    },
+                });
+            }
+
+            return acc;
+        }, new Map);
+
+    if (packagesFiles.size === 0) {
+        output += 'ℹ️ No difference in dist packagesFiles.\n';
         return output;
     }
 
-    output += 'Thanks for the PR! Here is the difference in size of the dist files between the base and the PR.\n';
+    output += 'Thanks for the PR! Here is the difference in size of the dist packagesFiles between the base and the PR.\n';
     output += 'Please review the changes and make sure they are expected.\n\n';
     output += `<table>
-    <thead><tr><th>File</th><th>Diff (B)</th><th>Diff (%)</th></tr></thead>
+    <thead><tr><th>File</th><th>Before (Size / Gzip / Brotli)</th><th>After (Size / Gzip / Brotli)</th></tr></thead>
     <tbody>`;
-    for (const [file, details] of files.entries()) {
-        output += `<tr>
-        <td><code>${file}</code> ${details.state === 'added' ? '(new)' : (details.state === 'removed' ? '(deleted)' : '')}</td>
-        <td>
-            Size: <code>${formatBytes(base[file]?.size || 0)}</code> → <code>${formatBytes(pr[file]?.size || 0)}</code><br>
-            Gzip: <code>${formatBytes(base[file]?.size_gz || 0)}</code> → <code>${formatBytes(pr[file]?.size_gz || 0)}</code><br>
-            Brotli: <code>${formatBytes(base[file]?.size_brotli || 0)}</code> → <code>${formatBytes(pr[file]?.size_brotli || 0)}</code>
-        </td>
-        <td align="right">
-            Size: <b>${formatDiffPercent(details.diff_percent_size)}</b><br>
-            Gzip: <b>${formatDiffPercent(details.diff_percent_size_gz)}</b><br>
-            Brotli: <b>${formatDiffPercent(details.diff_percent_size_brotli)}</b>
-        </td>
-    </tr>
-    `;
+    for (const [pkgKey, pkg] of packagesFiles.entries()) {
+        output += `<tr><td colspan="3"><a href="${pkg.meta.url}"><b>${pkgKey}</b></a></td></tr>`;
+        for (const file of pkg.files) {
+            output += `<tr>
+                <td><a href="${file.meta.fileNameUrl}"><code>${file.meta.fileNameShort}</code></a></td>
+            `;
+            output += file.state === 'added' 
+                ? `<td><em>Added</em></td>`
+                : `<td>
+                    <code>${formatBytes(file.before.size)}</code> / <code>${formatBytes(file.before.sizeGz)}</code> / <code>${formatBytes(file.before.sizeBrotli)}</code>
+                </td>`; 
+            output += file.state === 'removed'
+                ? `<td><em>Removed</em></td>`
+                : `<td>
+                    <code>${formatBytes(file.after.size)}</code>${file.state === 'changed' ? `<sup>${formatDiffPercent(file.diffPercent.size)}</sup>` : ''}
+                    / <code>${formatBytes(file.after.sizeGz)}</code>${file.state === 'changed' ? `<sup>${formatDiffPercent(file.diffPercent.sizeGz)}</sup>` : ''}
+                    / <code>${formatBytes(file.after.sizeBrotli)}</code>${file.state === 'changed' ? `<sup>${formatDiffPercent(file.diffPercent.sizeBrotli)}</sup>` : ''}
+                </td>`;
+            output += `</tr>`;
+        }
     }
     output += `</tbody>
 </table>

.github/workflows/dist-files-size-diff.yaml

@@ -3,9 +3,8 @@ name: Dist Files Size Diff
 on:
   pull_request:
     paths:
-      - 'src/*/**'
-      - '!src/*/doc/**'
-      - '.github/**'
+      - 'src/*/assets/dist/**'
+      - 'src/*/src/Bridge/*/assets/dist/**'
 
 jobs:
     dist-files-size-diff:
@@ -60,6 +59,8 @@ jobs:
             with:
               result-encoding: string
               script: |
+                console.log(process.env);
+                console.log(context);
                 const { main } = await import('${{ github.workspace }}/.github/generate-dist-files-size-diff.mjs')
                 
                 return await main()