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:
1 parent
8069541cd9
commit
361129b6ac
68 files changed
+1882
-2422
No files matched your search
@@ -125,36 +125,36 @@ page AdvancedSelectDetail {
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>51 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-advanced-select-size"><span><strong>size</strong><small>string</small></span><select id="playground-advanced-select-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-advanced-select-color"><span><strong>color</strong><small>string</small></span><select id="playground-advanced-select-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-advanced-select-label"><span><strong>label</strong><small>string</small></span><input id="playground-advanced-select-label" name="pg_label" type="text" value="Default advanced select" /></label><label class="playground-field" for="playground-advanced-select-name"><span><strong>name</strong><small>string</small></span><input id="playground-advanced-select-name" name="pg_name" type="text" value="advanced-select-1" /></label><label class="playground-field" for="playground-advanced-select-value"><span><strong>value</strong><small>string</small></span><input id="playground-advanced-select-value" name="pg_value" type="text" value="design" /></label><label class="playground-field" for="playground-advanced-select-values"><span><strong>values</strong><small>unknown[]</small></span><textarea id="playground-advanced-select-values" name="pg_values" rows="5" spellcheck="false" data-playground-json>[]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-advanced-select-options"><span><strong>options</strong><small>unknown[]</small></span><textarea id="playground-advanced-select-options" name="pg_options" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
{
|
||||
"value": "design",
|
||||
"label": "Design",
|
||||
"description": "Product and visual design",
|
||||
"icon": "icon-[lucide--palette]",
|
||||
"color": "#8b5cf6",
|
||||
"avatar": "/showcase-images/avatar-design.svg"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"value": "engineering",
|
||||
"label": "Engineering",
|
||||
"description": "Platform and application engineering",
|
||||
"icon": "icon-[lucide--code-2]",
|
||||
"color": "#0ea5e9",
|
||||
"avatar": "/showcase-images/avatar-engineering.svg"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"value": "growth",
|
||||
"label": "Growth",
|
||||
"description": "Marketing and customer growth",
|
||||
"icon": "icon-[lucide--trending-up]",
|
||||
"color": "#10b981",
|
||||
"avatar": "/showcase-images/avatar-growth.svg"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"value": "support",
|
||||
"label": "Support",
|
||||
"description": "Customer operations",
|
||||
"disabled": false
|
||||
}
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-advanced-select-groups"><span><strong>groups</strong><small>unknown[]</small></span><textarea id="playground-advanced-select-groups" name="pg_groups" rows="5" spellcheck="false" data-playground-json>[]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-advanced-select-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-advanced-select-placeholder" name="pg_placeholder" type="text" value="Choose a team" /></label><label class="playground-field" for="playground-advanced-select-placeholderIcon"><span><strong>placeholder Icon</strong><small>string</small></span><input id="playground-advanced-select-placeholderIcon" name="pg_placeholderIcon" type="text" value="" /></label><label class="playground-field" for="playground-advanced-select-searchPlaceholder"><span><strong>search Placeholder</strong><small>string</small></span><input id="playground-advanced-select-searchPlaceholder" name="pg_searchPlaceholder" type="text" value="Search options…" /></label><label class="playground-toggle" for="playground-advanced-select-multiple"><span><strong>multiple</strong><small>boolean</small></span><input id="playground-advanced-select-multiple" name="pg_multiple" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-advanced-select-searchable"><span><strong>searchable</strong><small>boolean</small></span><input id="playground-advanced-select-searchable" name="pg_searchable" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-advanced-select-defaultOpen"><span><strong>default Open</strong><small>boolean</small></span><input id="playground-advanced-select-defaultOpen" name="pg_defaultOpen" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-advanced-select-clearable"><span><strong>clearable</strong><small>boolean</small></span><input id="playground-advanced-select-clearable" name="pg_clearable" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-advanced-select-allowEmpty"><span><strong>allow Empty</strong><small>boolean</small></span><input id="playground-advanced-select-allowEmpty" name="pg_allowEmpty" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-advanced-select-tags"><span><strong>tags</strong><small>boolean</small></span><input id="playground-advanced-select-tags" name="pg_tags" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-advanced-select-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-advanced-select-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-advanced-select-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-advanced-select-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-advanced-select-invalid"><span><strong>invalid</strong><small>boolean</small></span><input id="playground-advanced-select-invalid" name="pg_invalid" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-advanced-select-validationMessage"><span><strong>validation Message</strong><small>string</small></span><input id="playground-advanced-select-validationMessage" name="pg_validationMessage" type="text" value="" /></label><label class="playground-field" for="playground-advanced-select-helpText"><span><strong>help Text</strong><small>string</small></span><input id="playground-advanced-select-helpText" name="pg_helpText" type="text" value="" /></label><label class="playground-toggle" for="playground-advanced-select-loading"><span><strong>loading</strong><small>boolean</small></span><input id="playground-advanced-select-loading" name="pg_loading" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-advanced-select-loadingLabel"><span><strong>loading Label</strong><small>string</small></span><input id="playground-advanced-select-loadingLabel" name="pg_loadingLabel" type="text" value="Loading options…" /></label><label class="playground-field" for="playground-advanced-select-emptyLabel"><span><strong>empty Label</strong><small>string</small></span><input iLine truncated
|
||||
</form>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user