@microsoft/webui-framework 0.0.9 → 0.0.11

package/README.md

@@ -8,11 +8,11 @@ This package is the browser-side runtime used by `webui build --plugin=webui`. I
 - `@observable`, `@attr`, and `@volatile` decorators
 - compiled template path mapping for direct DOM binding resolution
 - light DOM or shadow DOM rendering (`--dom=light|shadow` flag)
-- SSR state seeding from `window.__webui_state` (like Preact's props)
+- SSR state seeding from `window.__webui.state` (like Preact's props)
 
 If you are building WebUI apps in this repo, this is the component model used by examples like `examples/app/todo-webui`, `examples/app/commerce`, and `examples/app/contact-book-manager`.
 
-> 📖 **Full documentation at [microsoft.github.io/webui](https://microsoft.github.io/webui)** — see the [Interactivity Guide](https://microsoft.github.io/webui/guide/concepts/interactivity) for component authoring patterns.
+> 📖 **Full documentation at [microsoft.github.io/webui](https://microsoft.github.io/webui)**, see the [Interactivity Guide](https://microsoft.github.io/webui/guide/concepts/interactivity) for component authoring patterns. For framework internals (hydration, path resolution, reactive update model), see [RENDERING.md](./RENDERING.md).
 
 ## Install
 
@@ -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 consumed by the runtime. In normal app code, you should not need to hand-author `window.__webui.templates`.
 
 ### DOM strategy (`--dom`)
 
@@ -107,7 +107,7 @@ The `--dom` flag controls how the server renders component content:
 The runtime auto-detects which mode was used at hydration time:
 - If a `shadowRoot` already exists → shadow DOM SSR path
 - If `childNodes` exist but no shadow root → light DOM SSR path
-- If neither → client-created path (uses `meta.sd` or `window.__webui_shadow` to decide)
+- If neither → client-created path (uses `meta.sd` to decide)
 
 Light DOM is useful for simpler styling (CSS inheritance works naturally) and
 better search-engine indexing.  Shadow DOM provides style encapsulation.
@@ -125,7 +125,7 @@ Base class for framework components.
 | `static define(tagName)` | Register the class as a custom element |
 | `$emit(name, detail?)` | Dispatch a bubbling, composed `CustomEvent` |
 | `$update()` | Force a reactive update (normally called automatically) |
-| `setInitialState(state, params?)` | Populate `@observable` properties from router state |
+| `setState(state)` | Populate `@observable` properties from router/server state |
 | `disconnectedCallback()` | Override for cleanup (global listeners, etc.) |
 
 In most components you do not call `$update()` directly. Property changes through `@observable` and `@attr` trigger updates for you.
@@ -300,7 +300,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.state JSON  │
 │                      │     │                       │      │                      │
 │  Outputs:            │     │  Renders:             │      │  Hydrates:           │
 │  • TemplateMeta      │     │  • Full HTML page     │      │  • Path-based DOM    │
@@ -329,7 +329,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/>+ TemplateMeta &lt;script&gt;<br/>+ __webui.state &lt;script&gt;"]
     end
 
     subgraph Browser ["Browser"]
@@ -377,7 +377,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 a `window.__webui.state`
 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
@@ -390,13 +390,13 @@ 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/>+ __webui.state JSON
     Browser->>Browser: Parse HTML → DOM exists
     Browser->>CE: Custom element upgrade
     CE->>CE: attributeChangedCallback (pre-existing attrs)
     CE->>FW: connectedCallback() → $mount()
     FW->>FW: SSR DOM detected (shadow root or children exist)
-    FW->>FW: $applySSRState() — seed observables from __webui_state
+    FW->>FW: $applySSRState() — seed observables from __webui.state
     FW->>FW: $hydrate() — template-parallel path resolution
     FW->>FW: $resolveSSR() — match SSR nodes via ordinal traversal
     FW->>FW: $wireEvents() + $wireRefs()
@@ -552,7 +552,7 @@ 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
+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
 same data used for SSR rendering to the client.  During `$mount()`,
 `$applySSRState()` writes matching keys directly to observable backing fields
@@ -560,7 +560,7 @@ 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&gt;<br/>window.__webui.state = {<br/>  count: 42,<br/>  title: 'Hello'<br/>}"] --> 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"]
 ```
@@ -611,7 +611,7 @@ are removed; new items are appended.
 On initial hydration, the repeat system walks existing SSR children and
 reconstructs collection instances by matching them against the compiled
 template via `$resolveSSR` path traversal.  State is already seeded from
-`window.__webui_state`, so repeat items reflect the server-rendered list
+`window.__webui.state`, so repeat items reflect the server-rendered list
 without parsing marker comments.
 
 ---

package/dist/decorators.d.ts

@@ -1,4 +1,32 @@
-/** Convert camelCase to kebab-case for attribute reflection. */
+/**
+ * Convert a camelCase DOM property name into its kebab-case HTML attribute form.
+ *
+ * This function is optimized for framework-level hot paths where attribute
+ * normalization may run thousands of times per render. It performs three
+ * progressively cheaper checks:
+ *
+ * 1. **Direct lookup for irregular mappings**
+ *    Many DOM properties (e.g., `readOnly`, `tabIndex`, `crossOrigin`) do not
+ *    follow simple camelCase → kebab-case rules. These are resolved through a
+ *    precomputed `propertyToAttribute` map for O(1) returns with no string
+ *    processing.
+ *
+ * 2. **Fast path for ARIA attributes**
+ *    ARIA properties always begin with `aria` followed by an uppercase letter
+ *    (e.g., `ariaDescribedBy`). These map to `aria-` + the lowercase remainder.
+ *    This branch avoids the general loop and uses the engine-optimized
+ *    `.toLowerCase()` for the suffix.
+ *
+ * 3. **General camelCase → kebab-case conversion**
+ *    For all other inputs, the function performs a tight ASCII-only scan:
+ *    uppercase A–Z (65–90) are converted to lowercase and prefixed with `-`,
+ *    while all other characters are copied as-is. This avoids regex engines,
+ *    callback allocations, and match objects, producing predictable,
+ *    allocation-minimal performance ideal for DOM attribute reflection.
+ *
+ * The result is a predictable, JIT-friendly transformation suitable for
+ * attribute diffing, SSR serialization, and runtime DOM patching.
+ */
 export declare function toKebabCase(str: string): string;
 export declare function getObservableNames(ctor: Function): Set<string>;
 /**

package/dist/decorators.js

@@ -12,44 +12,11 @@
 /**
  * Map of camelCase property names to their HTML attribute names.
  *
- * Covers two categories of irregular mappings:
- *
- * 1. Multi-word ARIA attributes — concatenated lowercase after `aria-`
- *    (e.g., `ariaDescribedBy` → `aria-describedby`), per the ARIAMixin spec.
- * 2. HTML global/element attributes — concatenated lowercase attribute names
- *    with camelCase property counterparts (e.g., `readOnly` → `readonly`).
+ * ARIA attributes (`ariaXxxYyy → aria-` + lowercase remainder) are handled
+ * algorithmically in `toKebabCase`. Only HTML global/element attributes
+ * with irregular mappings (concatenated lowercase) need explicit entries.
  */
 const propertyToAttribute = Object.assign(Object.create(null), {
-    // --- ARIA (ARIAMixin) ---
-    ariaActiveDescendant: 'aria-activedescendant',
-    ariaAutoComplete: 'aria-autocomplete',
-    ariaBrailleLabel: 'aria-braillelabel',
-    ariaBrailleRoleDescription: 'aria-brailleroledescription',
-    ariaColCount: 'aria-colcount',
-    ariaColIndex: 'aria-colindex',
-    ariaColIndexText: 'aria-colindextext',
-    ariaColSpan: 'aria-colspan',
-    ariaDescribedBy: 'aria-describedby',
-    ariaDropEffect: 'aria-dropeffect',
-    ariaErrorMessage: 'aria-errormessage',
-    ariaFlowTo: 'aria-flowto',
-    ariaHasPopup: 'aria-haspopup',
-    ariaKeyShortcuts: 'aria-keyshortcuts',
-    ariaLabelledBy: 'aria-labelledby',
-    ariaMultiLine: 'aria-multiline',
-    ariaMultiSelectable: 'aria-multiselectable',
-    ariaPosInSet: 'aria-posinset',
-    ariaReadOnly: 'aria-readonly',
-    ariaRoleDescription: 'aria-roledescription',
-    ariaRowCount: 'aria-rowcount',
-    ariaRowIndex: 'aria-rowindex',
-    ariaRowIndexText: 'aria-rowindextext',
-    ariaRowSpan: 'aria-rowspan',
-    ariaSetSize: 'aria-setsize',
-    ariaValueMax: 'aria-valuemax',
-    ariaValueMin: 'aria-valuemin',
-    ariaValueNow: 'aria-valuenow',
-    ariaValueText: 'aria-valuetext',
     // --- HTML global/element attributes ---
     accessKey: 'accesskey',
     autoCapitalize: 'autocapitalize',
@@ -73,10 +40,49 @@ const propertyToAttribute = Object.assign(Object.create(null), {
     tabIndex: 'tabindex',
     useMap: 'usemap',
 });
-/** Convert camelCase to kebab-case for attribute reflection. */
+/**
+ * Convert a camelCase DOM property name into its kebab-case HTML attribute form.
+ *
+ * This function is optimized for framework-level hot paths where attribute
+ * normalization may run thousands of times per render. It performs three
+ * progressively cheaper checks:
+ *
+ * 1. **Direct lookup for irregular mappings**
+ *    Many DOM properties (e.g., `readOnly`, `tabIndex`, `crossOrigin`) do not
+ *    follow simple camelCase → kebab-case rules. These are resolved through a
+ *    precomputed `propertyToAttribute` map for O(1) returns with no string
+ *    processing.
+ *
+ * 2. **Fast path for ARIA attributes**
+ *    ARIA properties always begin with `aria` followed by an uppercase letter
+ *    (e.g., `ariaDescribedBy`). These map to `aria-` + the lowercase remainder.
+ *    This branch avoids the general loop and uses the engine-optimized
+ *    `.toLowerCase()` for the suffix.
+ *
+ * 3. **General camelCase → kebab-case conversion**
+ *    For all other inputs, the function performs a tight ASCII-only scan:
+ *    uppercase A–Z (65–90) are converted to lowercase and prefixed with `-`,
+ *    while all other characters are copied as-is. This avoids regex engines,
+ *    callback allocations, and match objects, producing predictable,
+ *    allocation-minimal performance ideal for DOM attribute reflection.
+ *
+ * The result is a predictable, JIT-friendly transformation suitable for
+ * attribute diffing, SSR serialization, and runtime DOM patching.
+ */
 export function toKebabCase(str) {
     const mapped = propertyToAttribute[str];
-    return mapped ?? str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+    if (mapped)
+        return mapped;
+    // ARIA properties: ariaXxxYyy → aria- + lowercase remainder
+    if (str.length > 4 && str.charCodeAt(0) === 97 /* a */ && str.startsWith('aria') && str.charCodeAt(4) >= 65 && str.charCodeAt(4) <= 90) {
+        return 'aria-' + str.slice(4).toLowerCase();
+    }
+    let out = '';
+    for (let i = 0; i < str.length; i++) {
+        const code = str.charCodeAt(i);
+        out += code >= 65 && code <= 90 ? '-' + String.fromCharCode(code + 32) : str[i];
+    }
+    return out;
 }
 /**
  * Shared logic for installing a reactive getter/setter on a class prototype.

package/dist/element/diff.js

@@ -28,7 +28,7 @@ export function dotWalk(cursor, path, from) {
 export function resolveRepeatValue(scopeVar, scope, path) {
     if (path === scopeVar)
         return scope;
-    if (!path.startsWith(`${scopeVar}.`))
+    if (path.length <= scopeVar.length || path.charCodeAt(scopeVar.length) !== 46 /* '.' */ || !path.startsWith(scopeVar))
         return undefined;
     return dotWalk(scope, path, scopeVar.length + 1);
 }

package/dist/element.d.ts

@@ -17,23 +17,31 @@ export declare class WebUIElement extends HTMLElement {
     /** Mount the component after children are available. */
     private $mount;
     disconnectedCallback(): void;
+    /**
+     * Permanently destroy this component's own bindings and DOM references.
+     * Each component is responsible for its own cleanup — child WebUI
+     * elements handle theirs via their own `disconnectedCallback`.
+     */
+    $destroy(): void;
+    /** Break all DOM references held by a binding instance and its nested blocks. */
+    private $teardown;
     /** Dispatch a bubbling custom event. Uses composed:true when in shadow DOM. */
     $emit(name: string, detail?: unknown): boolean;
-    /** Populate @observable properties from router state.
+    /** Populate @observable properties from server or router state.
      *
      * Each property is set through its reactive setter, which coalesces
      * updates into a single pending microtask. We then synchronously
      * flush those pending path updates so the DOM is current before any
      * view-transition snapshot captures it.
      */
-    setInitialState(state: Record<string, unknown>): void;
+    setState(state: Record<string, unknown>): void;
     /**
-     * Apply SSR state from the global `window.__webui_state` object.
+     * Apply SSR state from `window.__webui.state`.
      *
-     * Passing the same props to both server render and client
-     * hydrate, this ensures component observables match the server-rendered
-     * DOM. The handler emits the state as a `<script>` tag at the end of
-     * the page. Only observable properties are set — unknown keys are ignored.
+     * The handler emits all SSR metadata in a single consolidated
+     * `window.__webui` script block. State lives at `.state` — the same
+     * props passed to the server render so observables match the DOM.
+     * Only observable properties are set — unknown keys are ignored.
      *
      * Writes directly to the backing field (`_prop`) to avoid triggering
      * reactive updates before bindings are wired.

package/dist/element.js

@@ -48,8 +48,10 @@ import { ATTR_KIND_BOOLEAN, ATTR_KIND_COMPLEX, ATTR_KIND_TEMPLATE, } from './ele
 // ── Caches ──────────────────────────────────────────────────────
 /** Parsed template cache — cloneNode(true) is faster than re-parsing. */
 const templateCache = new WeakMap();
-/** Parsed template DOM for SSR path mapping, keyed by meta.h string. */
-const templateDOMCache = new Map();
+/** Parsed template DOM for SSR path mapping, keyed by TemplateBlockMeta. */
+const templateDOMCache = new WeakMap();
+/** Cached root tag name extracted from meta.h before it's released. */
+const rootTagCache = new WeakMap();
 /** Pre-computed ordinals for template nodes: childIndex → [nodeType, ordinal].
  *  Avoids re-counting element/text siblings on every $resolveSSR call. */
 const tplOrdinalCache = new WeakMap();
@@ -88,12 +90,12 @@ function childNodesArray(parent) {
 }
 // ── Helper: parse template HTML into a temp container ────────────
 function getTemplateDom(meta) {
-    let cached = templateDOMCache.get(meta.h);
+    let cached = templateDOMCache.get(meta);
     if (cached)
         return cached;
     const div = document.createElement('div');
     div.innerHTML = meta.h;
-    templateDOMCache.set(meta.h, div);
+    templateDOMCache.set(meta, div);
     return div;
 }
 // ═══════════════════════════════════════════════════════════════════
@@ -126,7 +128,7 @@ export class WebUIElement extends HTMLElement {
         const meta = getTemplate(tag);
         if (!meta) {
             console.warn(`[WebUI] Template metadata for <${tag}> not found. ` +
-                `Ensure the component is included in the SSR output or registered via __webui_templates.`);
+                `Ensure the component is included in the SSR output or registered via __webui.templates.`);
             return;
         }
         this.$meta = meta;
@@ -152,7 +154,7 @@ export class WebUIElement extends HTMLElement {
         hydrationStart();
         // Auto-detect shadow vs light DOM
         const hasShadow = !!this.shadowRoot;
-        const wantShadow = hasShadow || !!meta.sd || !!window.__webui_shadow;
+        const wantShadow = hasShadow || !!meta.sd;
         let root;
         let isSSR;
         if (hasShadow) {
@@ -208,7 +210,53 @@ export class WebUIElement extends HTMLElement {
         }
         hydrationEnd();
     }
-    disconnectedCallback() { }
+    disconnectedCallback() {
+        // Schedule teardown on microtask — if the element is re-connected
+        // before then (e.g. repeat reconciliation), skip the cleanup.
+        if (this.$root) {
+            queueMicrotask(() => {
+                if (!this.isConnected)
+                    this.$destroy();
+            });
+        }
+    }
+    /**
+     * Permanently destroy this component's own bindings and DOM references.
+     * Each component is responsible for its own cleanup — child WebUI
+     * elements handle theirs via their own `disconnectedCallback`.
+     */
+    $destroy() {
+        if (!this.$root)
+            return;
+        this.$teardown(this.$root);
+        this.$root = null;
+        this.$pathIndex = undefined;
+        this.$wildcardBindings = undefined;
+        this.$dirtyPaths = null;
+        this.$pendingFlush = false;
+        this.$ready = false;
+    }
+    /** Break all DOM references held by a binding instance and its nested blocks. */
+    $teardown(instance) {
+        for (const c of instance.conds) {
+            if (c.instance)
+                this.$teardown(c.instance);
+            c.instance = null;
+        }
+        for (const r of instance.repeats) {
+            for (const item of r.instances)
+                this.$teardown(item.instance);
+            r.instances.length = 0;
+            r.container = null;
+            r.start = null;
+            r.end = null;
+        }
+        instance.nodes.length = 0;
+        instance.texts.length = 0;
+        instance.attrs.length = 0;
+        instance.conds.length = 0;
+        instance.repeats.length = 0;
+    }
     /** Dispatch a bubbling custom event. Uses composed:true when in shadow DOM. */
     $emit(name, detail) {
         return this.dispatchEvent(new CustomEvent(name, {
@@ -218,16 +266,18 @@ export class WebUIElement extends HTMLElement {
             detail,
         }));
     }
-    /** Populate @observable properties from router state.
+    /** Populate @observable properties from server or router state.
      *
      * Each property is set through its reactive setter, which coalesces
      * updates into a single pending microtask. We then synchronously
      * flush those pending path updates so the DOM is current before any
      * view-transition snapshot captures it.
      */
-    setInitialState(state) {
+    setState(state) {
         const names = getObservableNames(this.constructor);
-        for (const key of Object.keys(state)) {
+        const keys = Object.keys(state);
+        for (let i = 0; i < keys.length; i++) {
+            const key = keys[i];
             if (names.has(key)) {
                 this[key] = state[key];
             }
@@ -235,18 +285,18 @@ export class WebUIElement extends HTMLElement {
         this.$flushUpdates();
     }
     /**
-     * Apply SSR state from the global `window.__webui_state` object.
+     * Apply SSR state from `window.__webui.state`.
      *
-     * Passing the same props to both server render and client
-     * hydrate, this ensures component observables match the server-rendered
-     * DOM. The handler emits the state as a `<script>` tag at the end of
-     * the page. Only observable properties are set — unknown keys are ignored.
+     * The handler emits all SSR metadata in a single consolidated
+     * `window.__webui` script block. State lives at `.state` — the same
+     * props passed to the server render so observables match the DOM.
+     * Only observable properties are set — unknown keys are ignored.
      *
      * Writes directly to the backing field (`_prop`) to avoid triggering
      * reactive updates before bindings are wired.
      */
     $applySSRState() {
-        const state = window.__webui_state;
+        const state = window.__webui?.state;
         if (!state || typeof state !== 'object')
             return;
         const names = getObservableNames(this.constructor);
@@ -775,23 +825,25 @@ export class WebUIElement extends HTMLElement {
      */
     $hydrateCondContent(condAnchor, blockMeta, scope) {
         const rootTag = this.$rootTag(blockMeta);
-        if (rootTag) {
+        const tplDom = getTemplateDom(blockMeta);
+        if (rootTag && tplDom.children.length === 1) {
+            // Single-root optimisation: hydrate the element in-place (pathStart=1).
             const el = nextElement(condAnchor);
             if (el) {
-                const inst = this.$hydrate(el, blockMeta, getTemplateDom(blockMeta), scope, 1);
+                const inst = this.$hydrate(el, blockMeta, tplDom, scope, 1);
                 this.$updateInstance(inst);
                 return inst;
             }
             return null;
         }
-        // Text-only conditional: collect nodes between <!--wc--> and <!--/wc-->
+        // Multi-root or text-only conditional: collect nodes between <!--wc--> and <!--/wc-->
         const condNodes = this.$collectBetween(condAnchor, MARKER_COND_END);
         if (condNodes.length === 0)
             return null;
         const wrapper = document.createElement('div');
         for (let cn = 0; cn < condNodes.length; cn++)
             wrapper.appendChild(condNodes[cn]);
-        const inst = this.$hydrate(wrapper, blockMeta, getTemplateDom(blockMeta), scope);
+        const inst = this.$hydrate(wrapper, blockMeta, tplDom, scope);
         inst.nodes = childNodesArray(wrapper);
         let afterNode = condAnchor;
         for (let cn = 0; cn < inst.nodes.length; cn++) {
@@ -849,9 +901,14 @@ export class WebUIElement extends HTMLElement {
     }
     /** Extract root tag name from block metadata. */
     $rootTag(meta) {
+        let cached = rootTagCache.get(meta);
+        if (cached !== undefined)
+            return cached;
         const h = meta.h;
-        if (!h || h.charCodeAt(0) !== 60)
+        if (!h || h.charCodeAt(0) !== 60) {
+            rootTagCache.set(meta, null);
             return null;
+        }
         let end = 1;
         while (end < h.length) {
             const c = h.charCodeAt(end);
@@ -859,7 +916,9 @@ export class WebUIElement extends HTMLElement {
                 break;
             end++;
         }
-        return h.slice(1, end).toLowerCase();
+        const tag = h.slice(1, end).toLowerCase();
+        rootTagCache.set(meta, tag);
+        return tag;
     }
     // ═══════════════════════════════════════════════════════════════
     //  Shared: binding wiring, event wiring, refs
@@ -907,14 +966,11 @@ export class WebUIElement extends HTMLElement {
         }
     }
     /** Attach a single event listener. */
-    $addEvent(target, eventName, handlerName, needsEvent) {
+    $addEvent(target, eventName, handlerName, _needsEvent) {
         const method = this[handlerName];
         if (typeof method !== 'function')
             return;
-        const self = this;
-        target.addEventListener(eventName, needsEvent
-            ? (e) => method.call(self, e)
-            : () => method.call(self));
+        target.addEventListener(eventName, method.bind(this));
     }
     /** Find w-ref attributes and assign to component properties. */
     $wireRefs(root) {

package/dist/template.d.ts

@@ -21,10 +21,12 @@ export type { CompiledAttrGroupMeta, CompiledAttrMeta, CompiledAttrPart, Compile
 import type { TemplateMeta } from './template-types.js';
 declare global {
     interface Window {
-        __webui_templates?: Record<string, TemplateMeta>;
-        __webui_state?: Record<string, unknown>;
-        /** When true, all client-created components use shadow DOM. */
-        __webui_shadow?: boolean;
+        /** Consolidated SSR bootstrap object — single script block. */
+        __webui?: {
+            state?: Record<string, unknown>;
+            templates?: Record<string, TemplateMeta>;
+            [key: string]: unknown;
+        };
     }
 }
 export declare function getTemplate(name: string): TemplateMeta | undefined;

package/dist/template.js

@@ -1,5 +1,5 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 export function getTemplate(name) {
-    return window.__webui_templates?.[name];
+    return window.__webui?.templates?.[name];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microsoft/webui-framework",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "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.9"
+    "@microsoft/webui-test-support": "0.0.11"
   },
   "scripts": {
     "build": "tsc",