chore: Measure tree-shakeability in CI

.github/workflows/treeshake-test.yml

@@ -0,0 +1,111 @@
+name: Tree-shake test
+
+on:
+  pull_request:
+
+jobs:
+  treeshake-test:
+    permissions:
+      contents: read
+      issues: write
+      pull-requests: write
+    runs-on: ubuntu-latest
+    steps:
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10.27.0
+          run_install: false
+
+      - name: Checkout PR branch
+        uses: actions/checkout@v4
+        with:
+          path: pr-branch
+
+      - name: Checkout target branch
+        uses: actions/checkout@v4
+        with:
+          path: target-branch
+          ref: ${{ github.base_ref }}
+
+      - name: Install dependencies (PR branch)
+        working-directory: pr-branch
+        run: pnpm install
+
+      - name: Install dependencies (target branch)
+        working-directory: target-branch
+        run: pnpm install
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22.x
+          cache: 'pnpm'
+          cache-dependency-path: |
+            pr-branch/pnpm-lock.yaml
+            target-branch/pnpm-lock.yaml
+
+      - name: Run tree-shake test on PR branch
+        working-directory: pr-branch
+        run: pnpm --filter treeshake-test test
+
+      - name: Run tree-shake test on target branch
+        working-directory: target-branch
+        run: pnpm --filter treeshake-test test
+
+      - name: Compare results
+        run: |
+          node pr-branch/apps/treeshake-test/compare-results.ts \
+            pr-branch/apps/treeshake-test/results.json \
+            target-branch/apps/treeshake-test/results.json \
+            > comparison.md
+
+      - name: Comment PR with results
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const fs = require('fs');
+            const comparison = fs.readFileSync('comparison.md', 'utf8');
+
+            const botCommentIdentifier = '## 📊 Bundle Size Comparison\n\n';
+
+            async function findBotComment(issueNumber) {
+              if (!issueNumber) return null;
+              const comments = await github.rest.issues.listComments({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: issueNumber,
+              });
+              return comments.data.find((comment) =>
+                comment.body.includes(botCommentIdentifier)
+              );
+            }
+
+            async function createOrUpdateComment(issueNumber) {
+              if (!issueNumber) {
+                console.log('No issue number provided. Cannot post or update comment.');
+                return;
+              }
+
+              const existingComment = await findBotComment(issueNumber);
+              if (existingComment) {
+                await github.rest.issues.updateComment({
+                  ...context.repo,
+                  comment_id: existingComment.id,
+                  body: botCommentIdentifier + comparison,
+                });
+              } else {
+                await github.rest.issues.createComment({
+                  ...context.repo,
+                  issue_number: issueNumber,
+                  body: botCommentIdentifier + comparison,
+                });
+              }
+            }
+
+            const issueNumber = context.issue.number;
+            if (!issueNumber) {
+              console.log('No issue number found in context. Skipping comment.');
+            } else {
+              await createOrUpdateComment(issueNumber);
+            }

apps/treeshake-test/.gitignore

@@ -0,0 +1,4 @@
+dist/
+
+results.md
+results.json

apps/treeshake-test/compare-results.ts

@@ -0,0 +1,180 @@
+#!/usr/bin/env node
+
+import { arrayOf, type } from 'arktype';
+import * as fs from 'node:fs/promises';
+
+// Define schema for benchmark results
+const ResultRecord = type({
+  testFilename: 'string',
+  bundler: 'string',
+  size: 'number',
+});
+
+const BenchmarkResults = arrayOf(ResultRecord);
+
+function groupResultsByTest(results: typeof BenchmarkResults.infer) {
+  const grouped: Record<string, Record<string, number>> = {};
+  for (const result of results) {
+    if (!grouped[result.testFilename]) {
+      grouped[result.testFilename] = {};
+    }
+    // biome-ignore lint/style/noNonNullAssertion: it's there...
+    grouped[result.testFilename]![result.bundler] = result.size;
+  }
+  return grouped;
+}
+
+function calculateTrendMessage(
+  prSize: number | undefined,
+  targetSize: number | undefined,
+): string {
+  if (prSize === undefined || targetSize === undefined) {
+    return '';
+  }
+  if (prSize === targetSize) {
+    return '(➖)';
+  }
+  const diff = prSize - targetSize;
+  const percent = ((diff / targetSize) * 100).toFixed(1);
+  if (diff > 0) {
+    return `($\${\\color{red}+${percent}\\\\%}$$)`;
+  }
+  return `($\${\\color{green}${percent}\\\\%}$$)`;
+}
+
+function prettifySize(size: number | undefined) {
+  if (size === undefined) {
+    return 'N/A';
+  }
+  const units = ['B', 'kB', 'MB', 'GB', 'TB'];
+  let unitIndex = 0;
+  let sizeInUnits = size;
+  while (sizeInUnits > 1024 && unitIndex < units.length) {
+    sizeInUnits /= 1024;
+    unitIndex += 1;
+  }
+  return `${
+    Number.isInteger(sizeInUnits) ? sizeInUnits : sizeInUnits.toFixed(2)
+  } ${units[unitIndex]}`;
+}
+
+async function generateReport(
+  prResults: typeof BenchmarkResults.infer,
+  targetResults: typeof BenchmarkResults.infer,
+) {
+  const prGrouped = groupResultsByTest(prResults);
+  const targetGrouped = groupResultsByTest(targetResults);
+
+  // Get all unique bundlers from both branches
+  const allBundlers = new Set([
+    ...new Set(prResults.map((r) => r.bundler)),
+    ...new Set(targetResults.map((r) => r.bundler)),
+  ]);
+
+  // Get all unique tests from both branches
+  const allTests = new Set([
+    ...Object.keys(prGrouped),
+    ...Object.keys(targetGrouped),
+  ]);
+
+  let output = '\n\n';
+
+  // Summary statistics
+  let totalIncrease = 0,
+    totalDecrease = 0,
+    totalUnchanged = 0,
+    totalUnknown = 0;
+
+  for (const test of allTests) {
+    for (const bundler of allBundlers) {
+      const prSize = prGrouped[test]?.[bundler];
+      const targetSize = targetGrouped[test]?.[bundler];
+
+      if (targetSize === undefined || prSize === undefined) totalUnknown++;
+      else if (prSize > targetSize) totalIncrease++;
+      else if (prSize < targetSize) totalDecrease++;
+      else totalUnchanged++;
+    }
+  }
+
+  output += '## 📈 Summary\n\n';
+  output += `- 📈 **Increased**: ${totalIncrease} bundles\n`;
+  output += `- 📉 **Decreased**: ${totalDecrease} bundles\n`;
+  output += `- ➖ **Unchanged**: ${totalUnchanged} bundles\n\n`;
+  output += `- ❔ **Unknown**: ${totalUnknown} bundles\n\n`;
+
+  // Main comparison table
+  output += '## 📋 Bundle Size Comparison\n\n';
+
+  // Table header
+  output += '| Test';
+  for (const bundler of allBundlers) {
+    output += ` | ${bundler}`;
+  }
+  output += ' |\n';
+
+  // Table separator
+  output += '|---------';
+  for (const _ of allBundlers) {
+    output += '|---------';
+  }
+  output += ' |\n';
+
+  // Table rows
+  for (const test of [...allTests].sort()) {
+    output += `| ${test}`;
+
+    for (const bundler of allBundlers) {
+      const prSize = prGrouped[test]?.[bundler];
+      const targetSize = targetGrouped[test]?.[bundler];
+
+      output += ` | ${prettifySize(prSize)} ${
+        calculateTrendMessage(prSize, Math.random() * 100000)
+      }`;
+    }
+    output += ' |\n';
+  }
+  output += '\n';
+
+  return output;
+}
+
+async function main() {
+  const [prFile, targetFile] = process.argv.slice(2);
+
+  if (!prFile || !targetFile) {
+    console.error(
+      'Usage: compare-results.js <pr-results.json> [target-results.json]',
+    );
+    process.exit(1);
+  }
+
+  // Read and validate PR results
+  let prResults: typeof BenchmarkResults.infer;
+  try {
+    const prContent = await fs.readFile(prFile, 'utf8');
+    prResults = BenchmarkResults.assert(JSON.parse(prContent));
+  } catch (error) {
+    throw new Error('PR results validation failed', { cause: error });
+  }
+
+  // Read and validate target results
+  let targetResults: typeof BenchmarkResults.infer = [];
+  if (targetFile) {
+    try {
+      const targetContent = await fs.readFile(targetFile, 'utf8');
+      targetResults = BenchmarkResults.assert(JSON.parse(targetContent));
+    } catch (error) {
+      console.warn('Could not read or validate target results:', error);
+    }
+  }
+
+  // Generate appropriate report
+  const markdownReport = await generateReport(
+    prResults,
+    targetResults,
+  );
+  console.log(markdownReport);
+}
+
+await main();

apps/treeshake-test/deno.json

@@ -0,0 +1,7 @@
+{
+  "exclude": ["."],
+  "fmt": {
+    "exclude": ["!."],
+    "singleQuote": true
+  }
+}

apps/treeshake-test/index.ts

@@ -0,0 +1,66 @@
+import * as fs from 'node:fs/promises';
+import {
+  bundleWithTsdown,
+  bundleWithWebpack,
+  getFileSize,
+  type ResultRecord,
+} from './utils.ts';
+
+const DIST_DIR = new URL('./dist/', import.meta.url);
+const EXAMPLES_DIR = new URL('./tests/', import.meta.url);
+
+/**
+ * A list of test filenames in the tests directory.
+ * E.g.: ['test1.ts', 'test2.ts', ...]
+ */
+const tests = await fs.readdir(EXAMPLES_DIR);
+
+async function bundleTest(
+  testFilename: string,
+  bundler: string,
+  bundle: (testUrl: URL, outUrl: URL) => Promise<URL>,
+): Promise<ResultRecord> {
+  const testUrl = new URL(testFilename, EXAMPLES_DIR);
+  const outUrl = await bundle(testUrl, DIST_DIR);
+  const size = await getFileSize(outUrl);
+
+  return { testFilename, bundler, size };
+}
+
+async function main() {
+  console.log('Starting bundler efficiency measurement...');
+  await fs.mkdir(DIST_DIR, { recursive: true });
+
+  const results = await Promise.allSettled(
+    tests.flatMap((test) => [
+      // https://github.com/software-mansion/TypeGPU/issues/2026
+      // bundleTest(test, 'esbuild', bundleWithEsbuild),
+      bundleTest(test, 'tsdown', bundleWithTsdown),
+      bundleTest(test, 'webpack', bundleWithWebpack),
+    ]),
+  );
+
+  if (results.some((result) => result.status === 'rejected')) {
+    console.error('Some tests failed to bundle.');
+    for (const result of results) {
+      if (result.status === 'rejected') {
+        console.error(result.reason);
+      }
+    }
+    process.exit(1);
+  }
+
+  const successfulResults = (
+    results as PromiseFulfilledResult<ResultRecord>[]
+  ).map((result) => result.value);
+
+  // Save results as JSON
+  await fs.writeFile(
+    'results.json',
+    JSON.stringify(successfulResults, null, 2),
+  );
+
+  console.log('\nMeasurement complete. Results saved to results.json');
+}
+
+await main();

apps/treeshake-test/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "treeshake-test",
+  "private": true,
+  "version": "0.0.0",
+  "description": "Treeshake testing app for TypeGPU",
+  "type": "module",
+  "scripts": {
+    "test": "node index.ts"
+  },
+  "dependencies": {
+    "typegpu": "workspace:*",
+    "unplugin-typegpu": "^0.9.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "arktype": "1.0.29-alpha",
+    "esbuild": "^0.25.10",
+    "ts-loader": "^9.5.4",
+    "tsdown": "^0.15.6",
+    "typescript": "catalog:types",
+    "webpack": "^5.102.0",
+    "webpack-cli": "^6.0.1"
+  }
+}