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:
ClintchizandClaude Opus 5 committed
1 parent
8069541cd9
commit
361129b6ac
68 files changed
+1882
-2422
No files matched your search
@@ -504,11 +504,11 @@ page DataTableDetail {
|
||||
</div>
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>29 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-data-table-color"><span><strong>color</strong><small>string</small></span><select id="playground-data-table-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="danger">danger</option><option value="info">info</option><option value="warning">warning</option></select></label><label class="playground-field" for="playground-data-table-size"><span><strong>size</strong><small>string</small></span><select id="playground-data-table-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-data-table-columns"><span><strong>columns</strong><small>unknown[]</small></span><textarea id="playground-data-table-columns" name="pg_columns" rows="5" spellcheck="false" data-playground-json>[{"key": "name", "label": "Account", "sortable": true}, {"key": "plan", "label": "Plan", "sortable": true}, {"key": "owner", "label": "Owner"}, {"key": "seats", "label": "Seats", "align": "end", "sortable": true}, {"key": "statusHtml", "label": "Status", "align": "center", "html": true}]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-data-table-rows"><span><strong>rows</strong><small>unknown[]</small></span><textarea id="playground-data-table-rows" name="pg_rows" rows="5" spellcheck="false" data-playground-json>[{"id": 1, "name": "Northwind", "plan": "Scale", "owner": "A. Okafor", "seats": 6, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 2, "name": "Acme Industrial", "plan": "Team", "owner": "R. Silva", "seats": 13, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 3, "name": "Globex", "plan": "Enterprise", "owner": "M. Chen", "seats": 20, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 4, "name": "Initech", "plan": "Starter", "owner": "J. Dubois", "seats": 27, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 5, "name": "Umbrella", "plan": "Scale", "owner": "P. Novak", "seats": 34, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 6, "name": "Stark Labs", "plan": "Team", "owner": "A. Okafor", "seats": 41, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 7, "name": "Wayne Foods", "plan": "Enterprise", "owner": "R. Silva", "seats": 48, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 8, "name": "Soylent", "plan": "Starter", "owner": "M. Chen", "seats": 55, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 9, "name": "Hooli", "plan": "Scale", "owner": "J. Dubois", "seats": 62, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 10, "name": "Vehement", "plan": "Team", "owner": "P. Novak", "seats": 69, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 11, "name": "Massive Dynamic", "plan": "Enterprise", "owner": "A. Okafor", "seats": 76, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 12, "name": "Cyberdyne", "plan": "Starter", "owner": "R. Silva", "seats": 83, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 13, "name": "Tyrell", "plan": "Scale", "owner": "M. Chen", "seats": 90, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 14, "name": "Aperture", "plan": "Team", "owner": "J. Dubois", "seats": 97, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 15, "name": "Black Mesa", "plan": "Enterprise", "owner": "P. Novak", "seats": 104, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-data-table-rowKey"><span><strong>row Key</strong><small>strinLine truncated
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-data-table-color"><span><strong>color</strong><small>string</small></span><select id="playground-data-table-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="danger">danger</option><option value="info">info</option><option value="warning">warning</option></select></label><label class="playground-field" for="playground-data-table-size"><span><strong>size</strong><small>string</small></span><select id="playground-data-table-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-data-table-columns"><span><strong>columns</strong><small>unknown[]</small></span><textarea id="playground-data-table-columns" name="pg_columns" rows="5" spellcheck="false" data-playground-json>[{"key": "name", "label": "Account", "sortable": true}, {"key": "plan", "label": "Plan", "sortable": true}, {"key": "owner", "label": "Owner"}, {"key": "seats", "label": "Seats", "align": "end", "sortable": true}, {"key": "statusHtml", "label": "Status", "align": "center", "html": true}]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-data-table-rows"><span><strong>rows</strong><small>unknown[]</small></span><textarea id="playground-data-table-rows" name="pg_rows" rows="5" spellcheck="false" data-playground-json>[{"id": 1, "name": "Northwind", "plan": "Scale", "owner": "A. Okafor", "seats": 6, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 2, "name": "Acme Industrial", "plan": "Team", "owner": "R. Silva", "seats": 13, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 3, "name": "Globex", "plan": "Enterprise", "owner": "M. Chen", "seats": 20, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 4, "name": "Initech", "plan": "Starter", "owner": "J. Dubois", "seats": 27, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 5, "name": "Umbrella", "plan": "Scale", "owner": "P. Novak", "seats": 34, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 6, "name": "Stark Labs", "plan": "Team", "owner": "A. Okafor", "seats": 41, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 7, "name": "Wayne Foods", "plan": "Enterprise", "owner": "R. Silva", "seats": 48, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 8, "name": "Soylent", "plan": "Starter", "owner": "M. Chen", "seats": 55, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 9, "name": "Hooli", "plan": "Scale", "owner": "J. Dubois", "seats": 62, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 10, "name": "Vehement", "plan": "Team", "owner": "P. Novak", "seats": 69, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 11, "name": "Massive Dynamic", "plan": "Enterprise", "owner": "A. Okafor", "seats": 76, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 12, "name": "Cyberdyne", "plan": "Starter", "owner": "R. Silva", "seats": 83, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 13, "name": "Tyrell", "plan": "Scale", "owner": "M. Chen", "seats": 90, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 14, "name": "Aperture", "plan": "Team", "owner": "J. Dubois", "seats": 97, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 15, "name": "Black Mesa", "plan": "Enterprise", "owner": "P. Novak", "seats": 104, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--Line truncated
|
||||
5,
|
||||
10,
|
||||
25
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-data-table-selectable"><span><strong>selectable</strong><small>boolean</small></span><input id="playground-data-table-selectable" name="pg_selectable" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-data-table-actions"><span><strong>actions</strong><small>unknown[]</small></span><textarea id="playground-data-table-actions" name="pg_actions" rows="5" spellcheck="false" data-playground-json>[{"id": "refresh", "label": "Refresh", "icon": "icon-[lucide--refresh-cw]", "when": "always"}, {"id": "read", "label": "Mark as read", "icon": "icon-[lucide--mail-open]", "when": "selection"}, {"id": "archive", "label": "Archive", "icon": "icon-[lucide--archive]", "when": "selection"}, {"id": "delete", "label": "Delete", "icon": "icon-[lucide--trash-2]", "when": "selection", "tone": "danger"}]</textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-data-table-striped"><span><strong>striped</strong><small>boolean</small></span><input id="playground-data-table-striped" name="pg_striped" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-data-table-bordered"><span><strong>bordered</strong><small>boolean</small></span><input id="playground-data-table-bordered" name="pg_bordered" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-data-table-gridlines"><span><strong>gridlines</strong><small>string</small></span><select id="playground-data-table-gridlines" name="pg_gridlines"><option value="rows" selected>rows</option><option value="grid">grid</option></select></label><label class="playground-field" for="playground-data-table-density"><span><strong>density</strong><small>string</small></span><select id="playground-data-table-density" name="pg_density"><option value="default" selected>default</option><option value="compact">compact</option><option value="comfortable">comfortable</option></select></label><label class="playground-field" for="playground-data-table-emptyLabel"><span><strong>empty Label</strong><small>string</small></span><input id="playground-data-table-emptyLabel" name="pg_emptyLabel" type="text" value="Data Table" /></label><label class="playground-field" for="playground-data-table-noResultsLabel"><span><strong>no Results Label</strong><small>string</small></span><input id="playground-data-table-noResultsLabel" name="pg_noResultsLabel" type="text" value="Data Table" /></label><label class="playground-field" for="playground-data-table-clearSearchLabel"><span><strong>clear Search Label</strong><small>string</small></span><input id="playground-data-table-clearSearchLabel" name="pg_clearSearchLabel" type="text" value="Data Table" /></label><label class="playground-toggle" for="playground-data-table-stickyFirstColumn"><span><strong>sticky First Column</strong><small>boolean</small></span><input id="playground-data-table-stickyFirstColumn" name="pg_stickyFirstColumn" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-data-table-layout"><span><strong>layout</strong><small>string</small></span><select id="playground-data-table-layout" name="pg_layout"><option value="rows" selected>rows</option><option value="content">content</option><option value="split">split</option><option value="stacked">stacked</option><option value="balanced">balanced</option><option value="visual">visual</option></select></label><label class="playground-field" for="playground-data-table-class"><span><strong>class</strong><small>string</small></span><input id="playground-data-table-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-data-table-selectable"><span><strong>selectable</strong><small>boolean</small></span><input id="playground-data-table-selectable" name="pg_selectable" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-data-table-actions"><span><strong>actions</strong><small>unknown[]</small></span><textarea id="playground-data-table-actions" name="pg_actions" rows="5" spellcheck="false" data-playground-json>[{"id": "refresh", "label": "Refresh", "icon": "icon-[lucide--refresh-cw]", "when": "always"}, {"id": "read", "label": "Mark as read", "icon": "icon-[lucide--mail-open]", "when": "selection"}, {"id": "archive", "label": "Archive", "icon": "icon-[lucide--archive]", "when": "selection"}, {"id": "delete", "label": "Delete", "icon": "icon-[lucide--trash-2]", "when": "selection", "tone": "danger"}]</textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-data-table-striped"><span><strong>striped</strong><small>boolean</small></span><input id="playground-data-table-striped" name="pg_striped" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-data-table-bordered"><span><strong>bordered</strong><small>boolean</small></span><input id="playground-data-table-bordered" name="pg_bordered" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-data-table-gridlines"><span><strong>gridlines</strong><small>string</small></span><select id="playground-data-table-gridlines" name="pg_gridlines"><option value="rows" selected>rows</option><option value="grid">grid</option></select></label><label class="playground-field" for="playground-data-table-density"><span><strong>density</strong><small>string</small></span><select id="playground-data-table-density" name="pg_density"><option value="default" selected>default</option><option value="compact">compact</option><option value="comfortable">comfortable</option></select></label><label class="playground-field" for="playground-data-table-emptyLabel"><span><strong>empty Label</strong><small>string</small></span><input id="playground-data-table-emptyLabel" name="pg_emptyLabel" type="text" value="Data Table" /></label><label class="playground-field" for="playground-data-table-noResultsLabel"><span><strong>no Results Label</strong><small>string</small></span><input id="playground-data-table-noResultsLabel" name="pg_noResultsLabel" type="text" value="Data Table" /></label><label class="playground-field" for="playground-data-table-clearSearchLabel"><span><strong>clear Search Label</strong><small>string</small></span><input id="playground-data-table-clearSearchLabel" name="pg_clearSearchLabel" type="text" value="Data Table" /></label><label class="playground-toggle" for="playground-data-table-stickyFirstColumn"><span><strong>sticky First Column</strong><small>boolean</small></span><input id="playground-data-table-stickyFirstColumn" name="pg_stickyFirstColumn" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-data-table-layout"><span><strong>layout</strong><small>string</small></span><select id="playground-data-table-layout" name="pg_layout"><option value="rows" selected>rows</option><option value="content">content</option><option value="split">split</option><option value="stacked">stacked</option><option value="balanced">balanced</option><option value="visual">visual</option></select></label><label class="playground-field" for="playground-data-table-class"><span><strong>class</strong><small>string</small></span><input id="playground-data-table-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in new issue
Block a user