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:
Clintchiz
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
Download Patch File Download Diff File Expand all files Collapse all files
examples/component-showcase/app/pages/components/checkbox.wrn
+40 -40
View File
@@ -280,7 +280,7 @@ page CheckboxDetail {
<form class="playground-controls" data-playground-form>
<header><div><span>Component props</span><strong>27 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-checkbox-size"><span><strong>size</strong><small>string</small></span><select id="playground-checkbox-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</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-checkbox-color"><span><strong>color</strong><small>string</small></span><select id="playground-checkbox-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-checkbox-id"><span><strong>id</strong><small>string</small></span><input id="playground-checkbox-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-checkbox-name"><span><strong>name</strong><small>string</small></span><input id="playground-checkbox-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-checkbox-label"><span><strong>label</strong><small>string</small></span><input id="playground-checkbox-label" name="pg_label" type="text" value="Checkbox" /></label><label class="playground-toggle" for="playground-checkbox-hiddenLabel"><span><strong>hidden Label</strong><small>boolean</small></span><input id="playground-checkbox-hiddenLabel" name="pg_hiddenLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-checkbox-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-checkbox-placeholder" name="pg_placeholder" type="text" value="Enter a sample value" /></label><label class="playground-field" for="playground-checkbox-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-checkbox-variant" name="pg_variant" type="text" value="normal" /></label><label class="playground-field" for="playground-checkbox-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-checkbox-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-checkbox-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-checkbox-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option><option value="left">left</option><option value="right">right</option></select></label><label class="playground-field" for="playground-checkbox-value"><span><strong>value</strong><small>string</small></span><input id="playground-checkbox-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-checkbox-values"><span><strong>values</strong><small>unknown[]</small></span><textarea id="playground-checkbox-values" name="pg_values" rows="5" spellcheck="false" data-playground-json>[
{
&#123;
"id": "checkbox-0-1",
"key": "checkbox-0-1",
"value": "primary",
@@ -309,31 +309,31 @@ page CheckboxDetail {
"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": "checkbox-0-2",
"key": "checkbox-0-2",
"value": "secondary",
@@ -362,32 +362,32 @@ page CheckboxDetail {
"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-checkbox-options"><span><strong>options</strong><small>unknown[]</small></span><textarea id="playground-checkbox-options" name="pg_options" rows="5" spellcheck="false" data-playground-json>[
{
&#123;
"id": "checkbox-0-1",
"key": "checkbox-0-1",
"value": "primary",
@@ -416,31 +416,31 @@ page CheckboxDetail {
"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": "checkbox-0-2",
"key": "checkbox-0-2",
"value": "secondary",
@@ -469,30 +469,30 @@ page CheckboxDetail {
"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-toggle" for="playground-checkbox-checked"><span><strong>checked</strong><small>boolean</small></span><input id="playground-checkbox-checked" name="pg_checked" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-checkbox-indeterminate"><span><strong>indeterminate</strong><small>boolean</small></span><input id="playground-checkbox-indeterminate" name="pg_indeterminate" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-checkbox-orientation"><span><strong>orientation</strong><small>string</small></span><select id="playground-checkbox-orientation" name="pg_orientation"><option value="vertical" selected>vertical</option><option value="horizontal">horizontal</option></select></label><label class="playground-toggle" for="playground-checkbox-card"><span><strong>card</strong><small>boolean</small></span><input id="playground-checkbox-card" name="pg_card" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-checkbox-rightAligned"><span><strong>right Aligned</strong><small>boolean</small></span><input id="playground-checkbox-rightAligned" name="pg_rightAligned" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-checkbox-list"><span><strong>list</strong><small>boolean</small></span><input id="playground-checkbox-list" name="pg_list" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-checkbox-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-checkbox-helperText" name="pg_helperText" type="text" value="" /></label><label class="playground-field" for="playground-checkbox-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-checkbox-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-checkbox-error"><span><strong>error</strong><small>string</small></span><input id="playground-checkbox-error" name="pg_error" type="text" value="" /></label><label class="playground-toggle" for="playground-checkbox-inline"><span><strong>inline</strong><small>boolean</small></span><input id="playground-checkbox-inline" name="pg_inline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-checkbox-readonly"><span><strong>readonly</strong><small>boolean</small></span><input id="playground-checkbox-readonly" name="pg_readonly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-checkbox-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-checkbox-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-checkbox-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-checkbox-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-checkbox-class"><span><strong>class</strong><small>string</small></span><input id="playground-checkbox-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
</form>
</div>