@microsoft/webui-framework 0.0.7 → 0.0.9

package/dist/decorators.d.ts

@@ -1,3 +1,5 @@
+/** Convert camelCase to kebab-case for attribute reflection. */
+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,74 @@
 // ---------------------------------------------------------------------------
 // Internal helpers
 // ---------------------------------------------------------------------------
+/**
+ * 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`).
+ */
+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',
+    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 camelCase to kebab-case for attribute reflection. */
-function toKebabCase(str) {
-    return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+export function toKebabCase(str) {
+    const mapped = propertyToAttribute[str];
+    return mapped ?? str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
 }
 /**
  * Shared logic for installing a reactive getter/setter on a class prototype.

package/dist/element.d.ts

@@ -19,7 +19,13 @@ export declare class WebUIElement extends HTMLElement {
     disconnectedCallback(): void;
     /** 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 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;
     /**
      * Apply SSR state from the global `window.__webui_state` object.

package/dist/element.js

@@ -160,14 +160,18 @@ export class WebUIElement extends HTMLElement {
             root = this.shadowRoot;
             isSSR = true;
         }
-        else if (this.childNodes.length > 0) {
-            // SSR — element already has server-rendered children (light DOM).
-            // Reuse existing DOM regardless of shadow preference.
+        else if (this.childNodes.length > 0 && !meta.sd) {
+            // SSR light-DOM — element already has server-rendered children.
+            // Only treat as SSR when the template does NOT explicitly declare
+            // shadow DOM (meta.sd).  When meta.sd is set, existing children
+            // are slot content from an SPA partial, not SSR output.
             root = this;
             isSSR = true;
         }
         else if (wantShadow) {
-            // Shadow DOM client-created
+            // Shadow DOM client-created (or SPA partial with slot content).
+            // Existing children are slot content — they stay in light DOM
+            // and project through the template's <slot>.
             root = this.attachShadow({ mode: 'open' });
             const fragment = this.$parseTemplate(meta);
             root.appendChild(fragment);
@@ -195,6 +199,13 @@ export class WebUIElement extends HTMLElement {
         this.$meta = meta;
         this.$hydrated = true;
         this.$ready = true;
+        // Client-created components: flush current attr/observable values
+        // into the freshly-wired template DOM. Call $updateInstance directly
+        // to avoid the $update() path-index build — it will be lazy-built
+        // on the first reactive change instead.
+        if (!isSSR) {
+            this.$updateInstance(this.$root);
+        }
         hydrationEnd();
     }
     disconnectedCallback() { }
@@ -207,7 +218,13 @@ export class WebUIElement extends HTMLElement {
             detail,
         }));
     }
-    /** Populate @observable properties from router state. */
+    /** Populate @observable properties from 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) {
         const names = getObservableNames(this.constructor);
         for (const key of Object.keys(state)) {
@@ -215,6 +232,7 @@ export class WebUIElement extends HTMLElement {
                 this[key] = state[key];
             }
         }
+        this.$flushUpdates();
     }
     /**
      * Apply SSR state from the global `window.__webui_state` object.
@@ -1059,6 +1077,13 @@ export class WebUIElement extends HTMLElement {
             case ATTR_KIND_COMPLEX: {
                 const v = this.$resolveValue(b.path, b.scope);
                 el[b.name] = v;
+                // If the target is a WebUIElement, flush its pending updates
+                // synchronously so child <for> loops re-render immediately.
+                // Without this, the child's microtask-coalesced update runs
+                // too late for view transitions that snapshot the DOM.
+                const flush = el['$flushUpdates'];
+                if (typeof flush === 'function')
+                    flush.call(el);
                 break;
             }
             case ATTR_KIND_BOOLEAN: {

package/package.json

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