@microsoft/webui-framework 0.0.7 → 0.0.8

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.8",
   "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.8"
   },
   "scripts": {
     "build": "tsc",