Proof of Concept: Monitor Component bundle sizes

.github/scripts/cleanup-component-size-report.js

@@ -0,0 +1,28 @@
+const fs = require('fs');
+const path = require('path');
+
+module.exports = async ({ github, context }) => {
+    const watermark = '<!-- COMPONENT_SIZE_REPORT -->';
+    const { owner, repo } = context.repo;
+    const issueNumber = context.payload.pull_request.number;
+
+    // Fetch existing comments and find the one with the watermark
+    const { data: comments } = await github.rest.issues.listComments({
+        owner,
+        repo,
+        issue_number: issueNumber,
+    });
+
+    const existingComment = comments.find(comment => comment.body.startsWith(watermark));
+
+    if (existingComment) {
+        console.log("Existing comment found, deleting.");
+        await github.rest.issues.deleteComment({
+            owner,
+            repo,
+            comment_id: existingComment.id,
+        });
+    } else {
+        console.log("No existing comment to delete.");
+    }
+};

.github/scripts/post-component-size-report.js

@@ -0,0 +1,95 @@
+const fs = require('fs');
+const path = require('path');
+
+module.exports = async ({ github, context }) => {
+    const watermark = '<!-- COMPONENT_SIZE_REPORT -->';
+    let summary = "| Component | Expected Threshold | Actual Size (KB) |\n| --- | --- | --- |\n";
+
+    // Find all compsizer-failure-report.json files
+    const reportFiles = getAllReportFiles('packages/components');
+
+    // Log the files found to verify
+    console.log("Found report files:", reportFiles);
+
+    const { owner, repo } = context.repo;
+    const issueNumber = context.payload.pull_request.number;
+
+    // Fetch existing comments and find the one with the watermark
+    const { data: comments } = await github.rest.issues.listComments({
+        owner,
+        repo,
+        issue_number: issueNumber,
+    });
+
+    const existingComment = comments.find(comment => comment.body.startsWith(watermark));
+
+    // If no files are found, delete any existing comment and exit
+    // There is a separate action to do this in cleanup-component-size-report.js. But this is a fallback in case that step fails.
+    if (reportFiles.length === 0) {
+        console.log("No compsizer-failure-report.json files found. Checking for existing comment to delete.");
+
+        if (existingComment) {
+            console.log("Existing comment found, deleting.");
+            await github.rest.issues.deleteComment({
+                owner,
+                repo,
+                comment_id: existingComment.id,
+            });
+        } else {
+            console.log("No existing comment to delete.");
+        }
+        return;
+    }
+
+    // Build the markdown table from JSON data in each file
+    for (const file of reportFiles) {
+        try {
+            const data = JSON.parse(fs.readFileSync(file, 'utf-8'));
+
+            data.forEach(({ component, expectedThreshold, actualSizeKB }) => {
+                summary += `| ${component} | ${expectedThreshold} | ${actualSizeKB} |\n`;
+            });
+        } catch (error) {
+            console.error(`Failed to parse JSON in file ${file}:`, error);
+        }
+    }
+
+    // Check if summary was populated
+    console.log("Generated summary:", summary);
+
+    const commentBody = `${watermark}\n### Component Size Report\n${summary}`;
+
+    if (existingComment) {
+        // Update the existing comment
+        await github.rest.issues.updateComment({
+            owner,
+            repo,
+            comment_id: existingComment.id,
+            body: commentBody,
+        });
+    } else {
+        // Create a new comment
+        await github.rest.issues.createComment({
+            owner,
+            repo,
+            issue_number: issueNumber,
+            body: commentBody,
+        });
+    }
+};
+
+// Helper function to find all report files
+function getAllReportFiles(dir) {
+    let results = [];
+    const list = fs.readdirSync(dir);
+    list.forEach((file) => {
+        const filePath = path.resolve(dir, file);
+        const stat = fs.statSync(filePath);
+        if (stat && stat.isDirectory()) {
+            results = results.concat(getAllReportFiles(filePath));
+        } else if (file === 'compsizer-failure-report.json') {
+            results.push(filePath);
+        }
+    });
+    return results;
+}

.github/workflows/ci.yml

@@ -154,6 +154,7 @@ jobs:
     with:
       os: ubuntu-latest
       node-version: 20
+      analyse-component-bundles: true
     secrets: inherit
 
   unit-tests:

.github/workflows/install-build.yml

@@ -13,6 +13,10 @@ on:
         required: false
         type: string
         default: 'build'
+      analyse-component-bundles:
+        type: boolean
+        required: false
+        default: false
 
 env:
     TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
@@ -33,4 +37,34 @@ jobs:
       - name: Build Packages
         uses: ./.github/actions/run-script
         with:
-          script-name: ${{ inputs.build-script }}
+          script-name: ${{ inputs.build-script }}
+      - name: Clean Up Old Component Size Failure Reports
+        if: inputs.analyse-component-bundles
+        run: |
+          echo "Cleaning up and verifying..."
+          find packages/components -type f -name 'compsizer-failure-report.json' -delete
+          echo "Remaining failure reports (if any):"
+          find packages/components -type f -name 'compsizer-failure-report.json'
+      - name: Analyse Component Bundle Sizes
+        if: inputs.analyse-component-bundles
+        run: yarn analyse-component-bundles --only --continue
+      - name: Cleanup Component Size Report
+        if: inputs.analyse-component-bundles && success()
+        uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
+        env:
+          GITHUB_TOKEN: ${{ secrets.CHANGESETS_TOKEN }}
+        with:
+          github-token: ${{ secrets.CHANGESETS_TOKEN }}
+          script: |
+            const script = require('./.github/scripts/cleanup-component-size-report.js');
+            await script({ github, context });
+      - name: Post Component Size Report
+        if: inputs.analyse-component-bundles && failure()
+        uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
+        env:
+          GITHUB_TOKEN: ${{ secrets.CHANGESETS_TOKEN }}
+        with:
+          github-token: ${{ secrets.CHANGESETS_TOKEN }}
+          script: |
+            const script = require('./.github/scripts/post-component-size-report.js');
+            await script({ github, context });

.gitignore

@@ -180,3 +180,7 @@ custom-elements.json
 # Yalc
 .yalc
 yalc.lock
+
+# Compsizer
+**/compsizer-failure-report.json
+**/component-bundle-sizes.json

package.json

@@ -22,6 +22,7 @@
     "generate-component-statuses": "./utilities/component-statuses/generate-component-statuses.js"
   },
   "scripts": {
+    "analyse-component-bundles": "turbo run analyse-component-bundles --filter=!pie-monorepo",
     "watch": "turbo run watch --filter=!pie-monorepo",
     "build": "cross-env-shell turbo run build --filter=!'./apps/examples/*' --filter=!pie-monorepo --token=${TURBO_TOKEN}",
     "build:dev": "cross-env-shell turbo run build:dev --filter=!'./apps/examples/*' --filter=!pie-monorepo --token=${TURBO_TOKEN}",
@@ -94,6 +95,7 @@
     "autoprefixer": "10.4.20",
     "babel-loader": "8.3.0",
     "commitizen": "4.3.0",
+    "compsizer": "next",
     "cross-env": "7.0.3",
     "cssnano": "5.1.15",
     "cz-customizable": "7.2.1",

packages/components/pie-assistive-text/package.json

@@ -16,6 +16,7 @@
     "componentStatus": "beta"
   },
   "scripts": {
+    "analyse-component-bundles": "run -T compsizer",
     "build": "run -T vite build",
     "build:react-wrapper": "npx build-react-wrapper",
     "create:manifest": "yarn cem analyze --litelement",
@@ -50,5 +51,16 @@
   "customElements": "custom-elements.json",
   "sideEffects": [
     "dist/*.js"
-  ]
+  ],
+  "compsizer": {
+    "exclude": [
+      "**/*.d.ts"
+    ],
+    "components": {
+      "pie-assistive-text": {
+        "maxSize": "50 KB",
+        "distFolderLocation": "./dist"
+      }
+    }
+  }
 }

packages/components/pie-button/package.json

@@ -16,6 +16,7 @@
     "componentStatus": "beta"
   },
   "scripts": {
+    "analyse-component-bundles": "run -T compsizer",
     "build": "run -T vite build",
     "build:react-wrapper": "npx build-react-wrapper",
     "create:manifest": "yarn cem analyze --litelement",
@@ -52,5 +53,16 @@
     "@justeattakeaway/pie-spinner": "0.7.2",
     "@justeattakeaway/pie-webc-core": "0.24.2",
     "element-internals-polyfill": "1.3.11"
+  },
+  "compsizer": {
+    "exclude": [
+      "**/*.d.ts"
+    ],
+    "components": {
+      "pie-button": {
+        "maxSize": "50 KB",
+        "distFolderLocation": "./dist"
+      }
+    }
   }
 }

packages/components/pie-card/package.json

@@ -16,6 +16,7 @@
     "componentStatus": "beta"
   },
   "scripts": {
+    "analyse-component-bundles": "run -T compsizer",
     "build": "run -T vite build",
     "build:react-wrapper": "npx build-react-wrapper",
     "create:manifest": "yarn cem analyze --litelement",
@@ -50,5 +51,16 @@
   "customElements": "custom-elements.json",
   "sideEffects": [
     "dist/*.js"
-  ]
+  ],
+  "compsizer": {
+    "exclude": [
+      "**/*.d.ts"
+    ],
+    "components": {
+      "pie-card": {
+        "maxSize": "50 KB",
+        "distFolderLocation": "./dist"
+      }
+    }
+  }
 }

packages/components/pie-checkbox-group/package.json

@@ -16,6 +16,7 @@
     "componentStatus": "beta"
   },
   "scripts": {
+    "analyse-component-bundles": "run -T compsizer",
     "build": "run -T vite build",
     "build:react-wrapper": "npx build-react-wrapper",
     "create:manifest": "yarn cem analyze --litelement",
@@ -51,5 +52,16 @@
   "customElements": "custom-elements.json",
   "sideEffects": [
     "dist/*.js"
-  ]
+  ],
+  "compsizer": {
+    "exclude": [
+      "**/*.d.ts"
+    ],
+    "components": {
+      "pie-checkbox-group": {
+        "maxSize": "50 KB",
+        "distFolderLocation": "./dist"
+      }
+    }
+  }
 }

packages/components/pie-checkbox/package.json

@@ -16,6 +16,7 @@
     "componentStatus": "beta"
   },
   "scripts": {
+    "analyse-component-bundles": "run -T compsizer",
     "build": "run -T vite build",
     "build:react-wrapper": "npx build-react-wrapper",
     "create:manifest": "yarn cem analyze --litelement",
@@ -50,5 +51,16 @@
   "customElements": "custom-elements.json",
   "sideEffects": [
     "dist/*.js"
-  ]
+  ],
+  "compsizer": {
+    "exclude": [
+      "**/*.d.ts"
+    ],
+    "components": {
+      "pie-checkbox": {
+        "maxSize": "50 KB",
+        "distFolderLocation": "./dist"
+      }
+    }
+  }
 }

packages/components/pie-chip/package.json

@@ -16,6 +16,7 @@
     "componentStatus": "beta"
   },
   "scripts": {
+    "analyse-component-bundles": "run -T compsizer",
     "build": "run -T vite build",
     "build:react-wrapper": "npx build-react-wrapper",
     "create:manifest": "yarn cem analyze --litelement",
@@ -51,5 +52,16 @@
   "customElements": "custom-elements.json",
   "sideEffects": [
     "dist/*.js"
-  ]
+  ],
+  "compsizer": {
+    "exclude": [
+      "**/*.d.ts"
+    ],
+    "components": {
+      "pie-chip": {
+        "maxSize": "50 KB",
+        "distFolderLocation": "./dist"
+      }
+    }
+  }
 }

packages/components/pie-cookie-banner/package.json

@@ -17,6 +17,7 @@
     "componentStatus": "stable"
   },
   "scripts": {
+    "analyse-component-bundles": "run -T compsizer",
     "build": "run -T vite build",
     "build:react-wrapper": "npx build-react-wrapper",
     "create:manifest": "yarn cem analyze --litelement",
@@ -57,5 +58,16 @@
   "customElements": "custom-elements.json",
   "sideEffects": [
     "dist/*.js"
-  ]
+  ],
+  "compsizer": {
+    "exclude": [
+      "**/*.d.ts"
+    ],
+    "components": {
+      "pie-cookie-banner": {
+        "maxSize": "50 KB",
+        "distFolderLocation": "./dist"
+      }
+    }
+  }
 }