Optimization & CI: Reduce redundant code in context of loops, LRU-ish cache for dynamic objects, more constants

.github/workflows/ci.yml

@@ -68,3 +68,6 @@ jobs:
 
       - name: Build package
         run: npm run build
+
+      - name: Check published bundle size
+        run: npm run check:size

.github/workflows/pr-build-report.yml

@@ -0,0 +1,80 @@
+# Posts / updates a PR comment with typecheck + build wall times, lib bundle sizes, and links.
+name: PR build report
+
+on:
+  pull_request:
+    branches:
+      - main
+
+permissions:
+  contents: read
+  pull-requests: write
+
+concurrency:
+  group: pr-build-report-${{ github.event.pull_request.number }}
+  cancel-in-progress: true
+
+jobs:
+  report:
+    # Fork PRs cannot update comments with the default token; skip to avoid a failing step.
+    if: github.event.pull_request.head.repo.full_name == github.repository
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.pull_request.head.sha }}
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Generate timed build report
+        env:
+          COMMIT_SHA: ${{ github.event.pull_request.head.sha }}
+          COMMIT_URL: ${{ github.server_url }}/${{ github.repository }}/commit/${{ github.event.pull_request.head.sha }}
+          RUN_URL: ${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}
+        run: node scripts/pr-build-report.mjs
+
+      - name: Upsert PR comment
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const fs = require('fs');
+            const marker = '<!-- nativeflowcss-build-report -->';
+            const body = fs.readFileSync('build-report.md', 'utf8');
+
+            const issue_number = context.payload.pull_request.number;
+            const { data: comments } = await github.rest.issues.listComments({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number,
+              per_page: 100,
+            });
+
+            const existing = comments.find(
+              (c) =>
+                c.body?.includes(marker) &&
+                (c.user?.login === 'github-actions[bot]' || c.user?.type === 'Bot'),
+            );
+
+            if (existing) {
+              await github.rest.issues.updateComment({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                comment_id: existing.id,
+                body,
+              });
+            } else {
+              await github.rest.issues.createComment({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number,
+                body,
+              });
+            }

.gitignore

@@ -16,6 +16,7 @@ npm-debug.log
 yarn-debug.log
 yarn-error.log
 lib/
+build-report.md
 
 # Yarn
 .yarn/*

package.json

@@ -27,6 +27,7 @@
   ],
   "scripts": {
     "build": "tsup",
+    "check:size": "node scripts/check-lib-size.mjs",
     "typecheck": "tsc --noEmit",
     "lint": "eslint \"**/*.ts\"",
     "test": "jest",

scripts/check-lib-size.mjs

@@ -0,0 +1,22 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const root = path.join(__dirname, '..');
+const esmPath = path.join(root, 'lib', 'index.js');
+const cjsPath = path.join(root, 'lib', 'index.cjs');
+
+const maxBytes = Number(process.env.MAX_LIB_BYTES ?? 45 * 1024);
+
+function check(label, filePath) {
+  const bytes = fs.statSync(filePath).size;
+  console.log(`${label}: ${bytes} bytes (max ${maxBytes})`);
+  if (bytes > maxBytes) {
+    console.error(`${label} exceeds budget — raise MAX_LIB_BYTES only after intentional growth`);
+    process.exit(1);
+  }
+}
+
+check('lib/index.js', esmPath);
+check('lib/index.cjs', cjsPath);

scripts/pr-build-report.mjs

@@ -0,0 +1,66 @@
+/**
+ * Runs timed typecheck + build + size gate, writes build-report.md for the PR comment bot.
+ * Env: COMMIT_SHA, COMMIT_URL, RUN_URL (set by GitHub Actions).
+ */
+import { execSync } from 'node:child_process';
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const root = path.join(__dirname, '..');
+process.chdir(root);
+
+function runTimed(label, command) {
+  const t0 = performance.now();
+  execSync(command, { stdio: 'inherit' });
+  const ms = Math.round(performance.now() - t0);
+  return { label, ms };
+}
+
+const steps = [];
+steps.push(runTimed('npm run typecheck', 'npm run typecheck'));
+steps.push(runTimed('npm run build', 'npm run build'));
+runTimed('npm run check:size', 'npm run check:size');
+
+const lib = path.join(root, 'lib');
+const files = ['index.js', 'index.cjs', 'index.d.ts'];
+const rows = files.map((f) => {
+  const p = path.join(lib, f);
+  return { file: f, bytes: fs.statSync(p).size };
+});
+
+const commitSha = process.env.COMMIT_SHA ?? '';
+const commitUrl = process.env.COMMIT_URL ?? '';
+const runUrl = process.env.RUN_URL ?? '';
+const shortSha = commitSha ? commitSha.slice(0, 7) : '';
+
+function fmtMs(ms) {
+  return `${(ms / 1000).toFixed(2)}s (${ms.toLocaleString()} ms)`;
+}
+
+let md = '';
+md += `### nativeflowcss — build stats\n\n`;
+md += `| Step | Wall time |\n|:------|:----------|\n`;
+for (const s of steps) {
+  md += `| \`${s.label}\` | ${fmtMs(s.ms)} |\n`;
+}
+md += `\n**Published bundle (\`lib/\`)**\n\n`;
+md += `| File | Size |\n|:------|-----:|\n`;
+for (const r of rows) {
+  md += `| \`${r.file}\` | ${r.bytes.toLocaleString()} bytes |\n`;
+}
+if (commitUrl && commitSha) {
+  md += `\n**Head commit:** [\`${shortSha}\`](${commitUrl})\n`;
+} else if (commitSha) {
+  md += `\n**Head commit:** \`${shortSha}\`\n`;
+}
+if (runUrl) {
+  md += `\n[View workflow run](${runUrl})\n`;
+}
+md += `\n_Comment updated on each push to this PR._\n`;
+
+const marker = '<!-- nativeflowcss-build-report -->';
+const outPath = path.join(root, 'build-report.md');
+fs.writeFileSync(outPath, `${marker}\n\n${md}`, 'utf8');
+console.log('Wrote', outPath);

src/effects/fx.ts

@@ -56,25 +56,11 @@ Array.from({ length: 10 }, (_, i) => i + 1).forEach((value) => {
   fx[`elevation_${value}`] = { elevation: value };
 });
 
-// Dynamically add background color properties from colorList
 Object.keys(colorList).forEach((colorKey) => {
-  fx[`bg_color_${colorKey}`] = {
-    backgroundColor: colorList[colorKey],
-  };
-});
-
-// Dynamically add tint color properties from colorList
-Object.keys(colorList).forEach((colorKey) => {
-  fx[`tint_${colorKey}`] = {
-    tintColor: colorList[colorKey],
-  };
-});
-
-// Dynamically add overlay color properties from colorList
-Object.keys(colorList).forEach((colorKey) => {
-  fx[`overlay_${colorKey}`] = {
-    overlayColor: colorList[colorKey],
-  };
+  const hex = colorList[colorKey];
+  fx[`bg_color_${colorKey}`] = { backgroundColor: hex };
+  fx[`tint_${colorKey}`] = { tintColor: hex };
+  fx[`overlay_${colorKey}`] = { overlayColor: hex };
 });
 
 export default fx;