@microsoft/webui-framework 0.0.15 → 0.0.17

package/README.md

@@ -32,7 +32,7 @@ Outside the workspace:
 pnpm add @microsoft/webui-framework
 ```
 
-TypeScript must use legacy decorators:
+TypeScript must enable decorator emit:
 
 ```json
 {
@@ -93,7 +93,7 @@ Build with `--dom=shadow` (default) to wrap in a declarative shadow root, or `--
 cargo run -p microsoft-webui-cli -- build ./src --out ./dist --plugin=webui
 ```
 
-The compiler/plugin generates the template metadata consumed by the runtime. In normal app code, you should not need to hand-author `window.__webui.templates`.
+The compiler/plugin generates the template metadata and condition closure arrays consumed by the runtime. In normal app code, you should not need to hand-author `window.__webui.templates` or `window.__webui.templateFns`.
 
 ### Property binding lifecycle
 
@@ -311,7 +311,7 @@ When contributing to the runtime, avoid these patterns:
 │                      │     │   (Rust/Go/C#/…)      │      │                      │
 │  HTML template       │     │                       │      │  SSR HTML (light or  │
 │  + expressions       │────▶│  TemplateMeta (JSON)  │────▶│  shadow DOM) +       │
-│  + @if / @for        │     │  + state data         │      │  __webui.state JSON  │
+│  + @if / @for        │     │  + state data         │      │  webui-data JSON     │
 │                      │     │                       │      │                      │
 │  Outputs:            │     │  Renders:             │      │  Hydrates:           │
 │  • TemplateMeta      │     │  • Full HTML page     │      │  • Path-based DOM    │
@@ -340,7 +340,7 @@ flowchart LR
     subgraph Serve ["Server (Any Language)"]
         M --> R[Route Handler]
         S[State Data] --> R
-        R --> HTML["Full SSR HTML<br/>(shadow or light DOM)<br/>+ TemplateMeta &lt;script&gt;<br/>+ __webui.state &lt;script&gt;"]
+        R --> HTML["Full SSR HTML<br/>(shadow or light DOM)<br/>+ inert #webui-data"]
     end
 
     subgraph Browser ["Browser"]
@@ -366,7 +366,7 @@ graph TD
 
     TYPES["element/types.ts<br/><i>Shared Types</i><br/>TemplateInstance, TextBinding,<br/>AttrBinding, CondBinding,<br/>RepeatBinding, ScopeFrame,<br/>RepeatHost"]
 
-    TMPL["template.ts<br/><i>Metadata Types + Registry</i><br/>TemplateMeta, getTemplate"]
+    TMPL["template.ts<br/><i>Metadata Types + Registry</i><br/>TemplateMeta, getTemplate,<br/>registerTemplateData"]
 
     DEC["decorators.ts<br/><i>Reactive Properties</i><br/>@observable, @attr, @volatile"]
 
@@ -388,7 +388,7 @@ graph TD
 ### SSR Hydration Path
 
 When the server renders a component, it emits HTML content (as a declarative
-shadow root or as light DOM children) along with a `window.__webui.state`
+shadow root or as light DOM children) along with an inert `#webui-data`
 JSON payload.  The browser parses this DOM before any JavaScript runs.
 When the component's JS loads and `connectedCallback` fires, the framework
 uses compiled template paths to resolve SSR DOM nodes without any marker
@@ -401,7 +401,7 @@ sequenceDiagram
     participant CE as Custom Element
     participant FW as Framework
 
-    Server->>Browser: HTML (shadow or light DOM)<br/>+ __webui.state JSON
+    Server->>Browser: HTML (shadow or light DOM)<br/>+ inert #webui-data JSON
     Browser->>Browser: Parse HTML → DOM exists
     Browser->>CE: Custom element upgrade
     CE->>CE: attributeChangedCallback (pre-existing attrs)
@@ -486,19 +486,16 @@ Compiled metadata:
 }
 ```
 
-### Condition AST
+### Condition references
 
-Conditions are emitted as compact tuples:
+Conditions are emitted as `[functionIndex, paths]` references. The index points
+to a component-local closure in `window.__webui.templateFns[tagName]`, while
+`paths` lets the runtime build targeted reactive indexes without parsing
+function source.
 
-| Tuple | Meaning | Example |
-|-------|---------|---------|
-| `[0, path]` | Identifier (truthy check) | `@if(visible)` |
-| `[1, left, op, right]` | Comparison predicate | `@if(count > 0)` |
-| `[2, inner]` | Logical NOT | `@if(!visible)` |
-| `[3, left, op, right]` | Compound AND/OR | `@if(a && b)` |
-
-The runtime evaluates these iteratively (stack-based, no recursion) to avoid
-call-stack depth in hot update paths.
+The runtime normalizes each condition reference into `[fn, paths]` once before
+hydration or client-created wiring, so hot update paths call the closure
+directly.
 
 ---
 
@@ -561,15 +558,15 @@ browser sees `42` in the DOM but the JavaScript property `this.count` is still
 `0` (the class default).  Without seeding, the first `$update()` would
 overwrite the SSR content with the wrong value.
 
-State seeding uses `window.__webui.state` — a JSON object emitted by the
-server handler as a `<script>` tag.  Like Preact's props, this delivers the
+State seeding uses `window.__webui.state` — a JSON object loaded from the
+server-emitted `#webui-data` block.  Like Preact's props, this delivers the
 same data used for SSR rendering to the client.  During `$mount()`,
 `$applySSRState()` writes matching keys directly to observable backing fields
 before any bindings are wired:
 
 ```mermaid
 flowchart LR
-    SCRIPT["&lt;script&gt;<br/>window.__webui.state = {<br/>  count: 42,<br/>  title: 'Hello'<br/>}"] --> APPLY["$applySSRState()"]
+    SCRIPT["&lt;script type='application/json' id='webui-data'&gt;<br/>{ state: { count: 42, title: 'Hello' } }"] --> APPLY["$applySSRState()"]
     APPLY --> SEED["Write to backing fields:<br/>this._count = 42<br/>this._title = 'Hello'"]
     SEED --> HYDRATE["$hydrate() — bindings match<br/>server-rendered DOM"]
 ```

package/dist/decorators.js

@@ -3,8 +3,8 @@
 /**
  * Reactive decorators for WebUIElement properties.
  *
- * Uses legacy/experimental TypeScript decorators (`experimentalDecorators: true`)
- * for compatibility with the FAST ecosystem conventions.
+ * Uses TypeScript's `experimentalDecorators` emit, matching the FAST ecosystem
+ * conventions.
  */
 // ---------------------------------------------------------------------------
 // Internal helpers

package/dist/element.js

@@ -540,7 +540,7 @@ export class WebUIElement extends HTMLElement {
                 const parent = parentPath.length > 0 ? this.$resolve(root, parentPath) : root;
                 if (!parent || (parent.nodeType !== 1 && parent.nodeType !== 11))
                     continue;
-                condRefs.push({ parent, ref: parent.childNodes[beforeIndex] || null, condition, blockIndex });
+                condRefs.push({ parent, ref: parent.childNodes[beforeIndex] || null, condition: condition, blockIndex });
             }
         }
         const repRefs = [];
@@ -719,7 +719,7 @@ export class WebUIElement extends HTMLElement {
                     }
                 }
                 instance.conds.push({
-                    condition, blockIndex,
+                    condition: condition, blockIndex,
                     anchor: condAnchor,
                     scope, instance: condInstance,
                 });

package/dist/index.d.ts

@@ -19,6 +19,6 @@
  */
 export { WebUIElement } from './element.js';
 export { observable, attr } from './decorators.js';
-export { getTemplate } from './template.js';
+export { getTemplate, registerTemplateData } from './template.js';
 export type { TemplateMeta } from './template.js';
 export { hydrationStart, hydrationEnd } from './lifecycle.js';

package/dist/index.js

@@ -21,5 +21,5 @@
  */
 export { WebUIElement } from './element.js';
 export { observable, attr } from './decorators.js';
-export { getTemplate } from './template.js';
+export { getTemplate, registerTemplateData } from './template.js';
 export { hydrationStart, hydrationEnd } from './lifecycle.js';

package/dist/template-types.d.ts

@@ -16,19 +16,19 @@ export type CompiledAttrGroupMeta = [
     count: number
 ];
 /**
- * Compiled condition — a pre-compiled JS function plus the paths it references.
- * The Rust compiler emits the function body at build time so the runtime
- * doesn't need a condition AST interpreter.
+ * Compiled condition — JSON metadata carries a function index plus the paths it
+ * references. The Rust compiler emits the actual function bodies in a separate
+ * closure array, and the runtime normalizes indexes to functions once.
  *
- * - `[0]` — evaluator function: `(resolve, scope) => boolean`
+ * - `[0]` — evaluator function or component-local function index
  * - `[1]` — referenced paths for the reactive path index
  */
-export type CompiledCondition = [
-    fn: (v: (path: string, s?: unknown) => unknown, s?: unknown) => boolean,
-    paths: string[]
-];
-export type CompiledConditionalMeta = [condition: CompiledCondition, blockIndex: number, slot: TemplateSlotPath];
-export type CompiledAttrMeta = [name: string, kind: 0, value: string] | [name: string, kind: 1, value: string] | [name: string, kind: 2, condition: CompiledCondition] | [name: string, kind: 3, parts: CompiledAttrPart[]];
+export type CompiledConditionFn = (v: (path: string, s?: unknown) => unknown, s?: unknown) => boolean;
+export type CompiledCondition = [fn: CompiledConditionFn, paths: string[]];
+export type SerializedCompiledCondition = [fnIndex: number, paths: string[]];
+export type TemplateCondition = CompiledCondition | SerializedCompiledCondition;
+export type CompiledConditionalMeta = [condition: TemplateCondition, blockIndex: number, slot: TemplateSlotPath];
+export type CompiledAttrMeta = [name: string, kind: 0, value: string] | [name: string, kind: 1, value: string] | [name: string, kind: 2, condition: TemplateCondition] | [name: string, kind: 3, parts: CompiledAttrPart[]];
 export type CompiledRepeatMeta = [collection: string, itemVar: string, blockIndex: number, slot: TemplateSlotPath];
 export type CompiledEventArg = ['e'] | ['p', string] | ['s', string] | ['n', number] | ['b', number] | ['z'];
 export type CompiledEventArgs = CompiledEventArg[];

package/dist/template.d.ts

@@ -6,26 +6,26 @@
  * - `tx` — text runs `[slot, parts]` for text binding positions
  * - `a`  — attribute binding metadata
  * - `ag` — attribute target groups `[path, startIndex, count]`
- * - `c`  — conditional blocks `[conditionAst, blockIndex]`
- * - `cl` — conditional anchor slots
- * - `r`  — repeat/for blocks `[collection, itemVar, blockIndex]`
- * - `rl` — repeat anchor slots
+ * - `c`  — conditional blocks `[conditionRef, blockIndex, slot]`
+ * - `r`  — repeat/for blocks `[collection, itemVar, blockIndex, slot]`
  * - `e`  — element events `[eventName, handlerName, argSpecs, targetPath]`
  * - `b`  — nested compiled block metadata
  * - `sa` — adopted stylesheet specifier for CSS module strategy
  * - `sd` — shadow DOM flag for client-created components
  * - `re` — root events on the host element
  */
-export type { CompiledAttrGroupMeta, CompiledAttrMeta, CompiledAttrPart, CompiledCondition, CompiledConditionalMeta, CompiledEventArg, CompiledEventArgs, CompiledTextRunMeta, TemplateBlockMeta, TemplateMeta, TemplateNodePath, TemplateSlotPath, } from './template-types.js';
-import type { TemplateMeta } from './template-types.js';
+export type { CompiledAttrGroupMeta, CompiledAttrMeta, CompiledAttrPart, CompiledCondition, CompiledConditionFn, CompiledConditionalMeta, CompiledEventArg, CompiledEventArgs, SerializedCompiledCondition, TemplateCondition, CompiledTextRunMeta, TemplateBlockMeta, TemplateMeta, TemplateNodePath, TemplateSlotPath, } from './template-types.js';
+import type { CompiledConditionFn, TemplateMeta } from './template-types.js';
 declare global {
     interface Window {
-        /** Consolidated SSR bootstrap object — single script block. */
+        /** Consolidated SSR metadata loaded from `#webui-data` or partial responses. */
         __webui?: {
             state?: Record<string, unknown>;
             templates?: Record<string, TemplateMeta>;
+            templateFns?: Record<string, CompiledConditionFn[]>;
             [key: string]: unknown;
         };
     }
 }
 export declare function getTemplate(name: string): TemplateMeta | undefined;
+export declare function registerTemplateData(templates: Record<string, TemplateMeta>, templateFns?: Record<string, CompiledConditionFn[]>): void;

package/dist/template.js

@@ -1,5 +1,96 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
+const WEBUI_DATA_ID = 'webui-data';
+const normalizedTemplates = new WeakSet();
+let webuiDataLoaded = false;
 export function getTemplate(name) {
-    return window.__webui?.templates?.[name];
+    let meta = window.__webui?.templates?.[name];
+    if (!meta) {
+        loadWebUIDataBlock();
+        meta = window.__webui?.templates?.[name];
+    }
+    if (meta)
+        normalizeTemplate(name, meta);
+    return meta;
+}
+export function registerTemplateData(templates, templateFns) {
+    const w = window;
+    if (!w.__webui)
+        w.__webui = {};
+    if (!w.__webui.templates)
+        w.__webui.templates = {};
+    if (templateFns) {
+        if (!w.__webui.templateFns)
+            w.__webui.templateFns = {};
+        const fnNames = Object.keys(templateFns);
+        for (let i = 0; i < fnNames.length; i++) {
+            const tag = fnNames[i];
+            w.__webui.templateFns[tag] = templateFns[tag];
+        }
+    }
+    const names = Object.keys(templates);
+    for (let i = 0; i < names.length; i++) {
+        const tag = names[i];
+        const meta = templates[tag];
+        w.__webui.templates[tag] = meta;
+        normalizeTemplate(tag, meta);
+    }
+}
+function loadWebUIDataBlock() {
+    if (webuiDataLoaded || window.__webui?.state !== undefined || typeof document === 'undefined')
+        return;
+    const el = document.getElementById(WEBUI_DATA_ID);
+    if (!el) {
+        webuiDataLoaded = true;
+        return;
+    }
+    const text = el.textContent;
+    if (text) {
+        const templateFns = window.__webui?.templateFns;
+        const parsed = JSON.parse(text);
+        if (templateFns)
+            parsed.templateFns = templateFns;
+        window.__webui = parsed;
+    }
+    el.remove();
+    webuiDataLoaded = true;
+}
+function normalizeTemplate(name, meta) {
+    if (normalizedTemplates.has(meta))
+        return;
+    const fns = window.__webui?.templateFns?.[name] ?? [];
+    const stack = [meta];
+    while (stack.length > 0) {
+        const block = stack.pop();
+        if (!block)
+            continue;
+        if (block.a) {
+            for (let i = 0; i < block.a.length; i++) {
+                const attr = block.a[i];
+                if (attr[1] === 2)
+                    normalizeCondition(name, attr[2], fns);
+            }
+        }
+        if (block.c) {
+            for (let i = 0; i < block.c.length; i++) {
+                normalizeCondition(name, block.c[i][0], fns);
+            }
+        }
+        const children = block.b;
+        if (children) {
+            for (let i = 0; i < children.length; i++)
+                stack.push(children[i]);
+        }
+    }
+    normalizedTemplates.add(meta);
+}
+function normalizeCondition(tagName, condition, fns) {
+    const first = condition[0];
+    if (typeof first === 'function')
+        return;
+    const fn = fns[first];
+    if (typeof fn !== 'function') {
+        throw new Error(`[WebUI] Missing condition closure ${first} for <${tagName}>.`);
+    }
+    condition[0] = fn;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microsoft/webui-framework",
-  "version": "0.0.15",
+  "version": "0.0.17",
   "type": "module",
   "description": "WebUI Framework Next — Preact-inspired lightweight Web Component runtime with SSR hydration. 15KB minified, compiled-template path mapping, no hydration markers.",
   "license": "MIT",
@@ -19,7 +19,7 @@
     "@playwright/test": "^1.58.2",
     "@types/node": "^25.3.5",
     "typescript": "^5.9.3",
-    "@microsoft/webui-test-support": "0.0.15"
+    "@microsoft/webui-test-support": "0.0.17"
   },
   "scripts": {
     "build": "tsc",