perf(build): budget the runtime on what ships, not on source bytes

The runtime budgets measured raw source, which counts comments -- and the
production build minifies, so comments cost a visitor nothing. The metric
therefore rewarded deleting explanatory comments over writing smaller code,
and could not tell a real feature from a wall of prose.

They now measure the minified output, which is what is actually served:
/__wrnexus/reactive.js is its own file, minified, with an immutable year-long
cache. The reactive runtime is 69684 minified against a 80000 budget, from
175246 raw -- roughly 21kB gzipped, fetched once.

Also fixes two real bugs found while testing the showcase:

  - object-valued props were serialised as a bare {...} attribute, which the
    compiler read as interpolation and tried to parse as JavaScript. That
    returned 500 for /components/navbar. Arrays start with [ and were never
    affected, which is why only object props broke. All 108 pages now render.

  - the runtime walked text nodes inside textarea, script and style, so a
    JSON sample in a textarea was evaluated away.

Navbar styles move out of ui.css into the component, matching the rest of the
navigation group. No declarations changed: 4519 before and after.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
2026-08-07 21:20:19 +05:30
co-authored by Claude Opus 5
parent 8069541cd9
commit 361129b6ac
68 changed files with 1882 additions and 2422 deletions
+9 -2
View File
@@ -436,10 +436,17 @@ test("component-system CSS includes responsive, theme-token, focus, and reduced-
expect(css).toContain(".wire-next--field");
expect(css).toContain('[data-show="false"]');
expect(css).toContain("display: none !important");
expect(css).toMatch(
/*
* Navbar styles now ship with the component rather than from ui.css, so the
* whole navigation group follows one convention. The rules themselves are
* unchanged; only where they live moved.
*/
const navbarSource = readFileSync(uiComponentPath("Navbar"), "utf8");
expect(css).not.toContain(".wire-navbar");
expect(navbarSource).toMatch(
/\.wire-navbar__brand-copy strong\s*\{[^}]*font-size: 0\.9rem;[^}]*font-weight: 600;/s,
);
expect(css).toMatch(
expect(navbarSource).toMatch(
/\.wire-navbar__menu-link,[\s\S]*?font-size: 0\.8125rem;[\s\S]*?font-weight: 500;/,
);
expect(css).toMatch(