@microsoft/webui-framework 0.0.8 → 0.0.10

package/dist/decorators.d.ts

@@ -1,3 +1,33 @@
+/**
+ * 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>;
 /**
  * Marks a property as observable. When the value changes the decorator will:

package/dist/decorators.js

@@ -9,9 +9,80 @@
 // ---------------------------------------------------------------------------
 // Internal helpers
 // ---------------------------------------------------------------------------
-/** Convert camelCase to kebab-case for attribute reflection. */
-function toKebabCase(str) {
-    return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+/**
+ * Map of camelCase property names to their HTML attribute names.
+ *
+ * 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), {
+    // --- HTML global/element attributes ---
+    accessKey: 'accesskey',
+    autoCapitalize: 'autocapitalize',
+    contentEditable: 'contenteditable',
+    crossOrigin: 'crossorigin',
+    dirName: 'dirname',
+    fetchPriority: 'fetchpriority',
+    formAction: 'formaction',
+    formEnctype: 'formenctype',
+    formMethod: 'formmethod',
+    formNoValidate: 'formnovalidate',
+    formTarget: 'formtarget',
+    inputMode: 'inputmode',
+    isMap: 'ismap',
+    maxLength: 'maxlength',
+    minLength: 'minlength',
+    noModule: 'nomodule',
+    noValidate: 'novalidate',
+    readOnly: 'readonly',
+    referrerPolicy: 'referrerpolicy',
+    tabIndex: 'tabindex',
+    useMap: 'usemap',
+});
+/**
+ * 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];
+    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.js

@@ -48,8 +48,8 @@ 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();
 /** 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 +88,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;
 }
 // ═══════════════════════════════════════════════════════════════════
@@ -208,7 +208,12 @@ export class WebUIElement extends HTMLElement {
         }
         hydrationEnd();
     }
-    disconnectedCallback() { }
+    disconnectedCallback() {
+        // Note: event listeners wired by $addEvent target child nodes owned by
+        // this component — they will be GC'd together with the component.
+        // We intentionally do NOT remove them here because connectedCallback
+        // does not re-wire events when a hydrated component is reattached.
+    }
     /** Dispatch a bubbling custom event. Uses composed:true when in shadow DOM. */
     $emit(name, detail) {
         return this.dispatchEvent(new CustomEvent(name, {
@@ -775,23 +780,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++) {

package/package.json

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