WorkRoot/WRNexusJS
2
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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:
ClintchizandClaude Opus 5 committed 2026-08-07 21:20:19 +05:30
1 parent 8069541cd9
commit 361129b6ac
68 files changed
+1882 -2422
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

examples/component-showcase/app/pages/components/hero.wrn
+60 -60
View File
@@ -428,7 +428,7 @@ page HeroDetail {
<form class="playground-controls" data-playground-form>
<header><div><span>Component props</span><strong>38 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
<div class="playground-fields"><label class="playground-field" for="playground-hero-eyebrow"><span><strong>eyebrow</strong><small>string</small></span><input id="playground-hero-eyebrow" name="pg_eyebrow" type="text" value="" /></label><label class="playground-field" for="playground-hero-eyebrowIcon"><span><strong>eyebrow Icon</strong><small>string</small></span><input id="playground-hero-eyebrowIcon" name="pg_eyebrowIcon" type="text" value="" /></label><label class="playground-field" for="playground-hero-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-hero-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-hero-title"><span><strong>title</strong><small>string</small></span><input id="playground-hero-title" name="pg_title" type="text" value="Hero example" /></label><label class="playground-field" for="playground-hero-highlight"><span><strong>highlight</strong><small>string</small></span><input id="playground-hero-highlight" name="pg_highlight" type="text" value="" /></label><label class="playground-field" for="playground-hero-description"><span><strong>description</strong><small>string</small></span><input id="playground-hero-description" name="pg_description" type="text" value="A polished default hero for a modern application." /></label><label class="playground-field" for="playground-hero-align"><span><strong>align</strong><small>string</small></span><select id="playground-hero-align" name="pg_align"><option value="start" selected>start</option><option value="left">left</option><option value="center">center</option><option value="right">right</option><option value="end">end</option><option value="stretch">stretch</option></select></label><label class="playground-field" for="playground-hero-size"><span><strong>size</strong><small>string</small></span><select id="playground-hero-size" name="pg_size"><option value="default" selected>default</option><option value="compact">compact</option><option value="lg">lg</option><option value="xl">xl</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-hero-color"><span><strong>color</strong><small>string</small></span><select id="playground-hero-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-hero-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-hero-variant" name="pg_variant"><option value="default" selected>default</option><option value="soft">soft</option><option value="raised">raised</option><option value="outline">outline</option><option value="gradient">gradient</option><option value="solid">solid</option><option value="minimal">minimal</option></select></label><label class="playground-field" for="playground-hero-layout"><span><strong>layout</strong><small>string</small></span><select id="playground-hero-layout" name="pg_layout"><option value="split" selected>split</option><option value="stacked">stacked</option><option value="content">content</option><option value="balanced">balanced</option><option value="visual">visual</option></select></label><label class="playground-field" for="playground-hero-visualPosition"><span><strong>visual Position</strong><small>string</small></span><select id="playground-hero-visualPosition" name="pg_visualPosition"><option value="right" selected>right</option><option value="left">left</option></select></label><label class="playground-field" for="playground-hero-visualStyle"><span><strong>visual Style</strong><small>string</small></span><select id="playground-hero-visualStyle" name="pg_visualStyle"><option value="plain" selected>plain</option><option value="card">card</option><option value="soft">soft</option></select></label><label class="playground-toggle" for="playground-hero-showDecorations"><span><strong>show Decorations</strong><small>boolean</small></span><input id="playground-hero-showDecorations" name="pg_showDecorations" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-hero-fullBleed"><span><strong>full Bleed</strong><small>boolean</small></span><input id="playground-hero-fullBleed" name="pg_fullBleed" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-hero-visualEyebrow"><span><strong>visual Eyebrow</strong><small>string</small></span><input id="playground-hero-vLine truncated
{
&#123;
"id": "hero-0-1",
"key": "hero-0-1",
"value": "primary",
@@ -457,31 +457,31 @@ page HeroDetail {
"target": "_self",
"ariaLabel": "Open primary workflow 1",
"items": [
{
&#123;
"label": "Nested option A",
"value": "nested-a"
},
{
&#125;,
&#123;
"label": "Nested option B",
"value": "nested-b"
}
&#125;
],
"links": [
{
&#123;
"label": "Documentation",
"href": "#documentation"
},
{
&#125;,
&#123;
"label": "API reference",
"href": "#api-reference"
}
&#125;
],
"values": [
"Included",
"Standard"
]
},
{
&#125;,
&#123;
"id": "hero-0-2",
"key": "hero-0-2",
"value": "secondary",
@@ -510,32 +510,32 @@ page HeroDetail {
"target": "_self",
"ariaLabel": "Open primary workflow 2",
"items": [
{
&#123;
"label": "Nested option A",
"value": "nested-a"
},
{
&#125;,
&#123;
"label": "Nested option B",
"value": "nested-b"
}
&#125;
],
"links": [
{
&#123;
"label": "Documentation",
"href": "#documentation"
},
{
&#125;,
&#123;
"label": "API reference",
"href": "#api-reference"
}
&#125;
],
"values": [
"Included",
"Standard"
]
}
&#125;
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-hero-primaryLabel"><span><strong>primary Label</strong><small>string</small></span><input id="playground-hero-primaryLabel" name="pg_primaryLabel" type="text" value="Hero" /></label><label class="playground-field" for="playground-hero-primaryHref"><span><strong>primary Href</strong><small>string</small></span><input id="playground-hero-primaryHref" name="pg_primaryHref" type="text" value="#hero-demo" /></label><label class="playground-field" for="playground-hero-primaryIcon"><span><strong>primary Icon</strong><small>string</small></span><input id="playground-hero-primaryIcon" name="pg_primaryIcon" type="text" value="" /></label><label class="playground-field" for="playground-hero-primaryTarget"><span><strong>primary Target</strong><small>string</small></span><input id="playground-hero-primaryTarget" name="pg_primaryTarget" type="text" value="" /></label><label class="playground-field" for="playground-hero-secondaryLabel"><span><strong>secondary Label</strong><small>string</small></span><input id="playground-hero-secondaryLabel" name="pg_secondaryLabel" type="text" value="Hero" /></label><label class="playground-field" for="playground-hero-secondaryHref"><span><strong>secondary Href</strong><small>string</small></span><input id="playground-hero-secondaryHref" name="pg_secondaryHref" type="text" value="#hero-demo" /></label><label class="playground-field" for="playground-hero-secondaryIcon"><span><strong>secondary Icon</strong><small>string</small></span><input id="playground-hero-secondaryIcon" name="pg_secondaryIcon" type="text" value="" /></label><label class="playground-field" for="playground-hero-secondaryTarget"><span><strong>secondary Target</strong><small>string</small></span><input id="playground-hero-secondaryTarget" name="pg_secondaryTarget" type="text" value="" /></label><label class="playground-field" for="playground-hero-tertiaryLabel"><span><strong>tertiary Label</strong><small>string</small></span><input id="playground-hero-tertiaryLabel" name="pg_tertiaryLabel" type="text" value="Hero" /></label><label class="playground-field" for="playground-hero-tertiaryHref"><span><strong>tertiary Href</strong><small>string</small></span><input id="playground-hero-tertiaryHref" name="pg_tertiaryHref" type="text" value="#hero-demo" /></label><label class="playground-field" for="playground-hero-tertiaryIcon"><span><strong>tertiary Icon</strong><small>string</small></span><input id="playground-hero-tertiaryIcon" name="pg_tertiaryIcon" type="text" value="" /></label><label class="playground-field" for="playground-hero-tertiaryTarget"><span><strong>tertiary Target</strong><small>string</small></span><input id="playground-hero-tertiaryTarget" name="pg_tertiaryTarget" type="text" value="" /></label><label class="playground-field" for="playground-hero-badges"><span><strong>badges</strong><small>unknown[]</small></span><textarea id="playground-hero-badges" name="pg_badges" rows="5" spellcheck="false" data-playground-json>[
{
&#123;
"id": "hero-0-1",
"key": "hero-0-1",
"value": "primary",
@@ -564,31 +564,31 @@ page HeroDetail {
"target": "_self",
"ariaLabel": "Open primary workflow 1",
"items": [
{
&#123;
"label": "Nested option A",
"value": "nested-a"
},
{
&#125;,
&#123;
"label": "Nested option B",
"value": "nested-b"
}
&#125;
],
"links": [
{
&#123;
"label": "Documentation",
"href": "#documentation"
},
{
&#125;,
&#123;
"label": "API reference",
"href": "#api-reference"
}
&#125;
],
"values": [
"Included",
"Standard"
]
},
{
&#125;,
&#123;
"id": "hero-0-2",
"key": "hero-0-2",
"value": "secondary",
@@ -617,32 +617,32 @@ page HeroDetail {
"target": "_self",
"ariaLabel": "Open primary workflow 2",
"items": [
{
&#123;
"label": "Nested option A",
"value": "nested-a"
},
{
&#125;,
&#123;
"label": "Nested option B",
"value": "nested-b"
}
&#125;
],
"links": [
{
&#123;
"label": "Documentation",
"href": "#documentation"
},
{
&#125;,
&#123;
"label": "API reference",
"href": "#api-reference"
}
&#125;
],
"values": [
"Included",
"Standard"
]
}
&#125;
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-hero-trustItems"><span><strong>trust Items</strong><small>unknown[]</small></span><textarea id="playground-hero-trustItems" name="pg_trustItems" rows="5" spellcheck="false" data-playground-json>[
{
&#123;
"id": "hero-0-1",
"key": "hero-0-1",
"value": "primary",
@@ -671,31 +671,31 @@ page HeroDetail {
"target": "_self",
"ariaLabel": "Open primary workflow 1",
"items": [
{
&#123;
"label": "Nested option A",
"value": "nested-a"
},
{
&#125;,
&#123;
"label": "Nested option B",
"value": "nested-b"
}
&#125;
],
"links": [
{
&#123;
"label": "Documentation",
"href": "#documentation"
},
{
&#125;,
&#123;
"label": "API reference",
"href": "#api-reference"
}
&#125;
],
"values": [
"Included",
"Standard"
]
},
{
&#125;,
&#123;
"id": "hero-0-2",
"key": "hero-0-2",
"value": "secondary",
@@ -724,30 +724,30 @@ page HeroDetail {
"target": "_self",
"ariaLabel": "Open primary workflow 2",
"items": [
{
&#123;
"label": "Nested option A",
"value": "nested-a"
},
{
&#125;,
&#123;
"label": "Nested option B",
"value": "nested-b"
}
&#125;
],
"links": [
{
&#123;
"label": "Documentation",
"href": "#documentation"
},
{
&#125;,
&#123;
"label": "API reference",
"href": "#api-reference"
}
&#125;
],
"values": [
"Included",
"Standard"
]
}
&#125;
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-hero-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-hero-maxWidth" name="pg_maxWidth"><option value="wide" selected>wide</option><option value="xl">xl</option><option value="compact">compact</option><option value="lg">lg</option><option value="2xl">2xl</option><option value="full">full</option></select></label><label class="playground-field" for="playground-hero-class"><span><strong>class</strong><small>string</small></span><input id="playground-hero-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
</form>
</div>