@microsoft/webui-framework 0.0.23 → 0.0.25

package/dist/template-element.d.ts

@@ -77,6 +77,7 @@ export declare class TemplateElement extends HTMLElement {
     private $usesTemplateState;
     private $setStateKey;
     private $applySSRState;
+    private $applyPendingParentState;
     $update(path?: string): void;
     private $recordDeferredWrite;
     private $replayDeferredWrites;
@@ -97,6 +98,8 @@ export declare class TemplateElement extends HTMLElement {
     private $findSSRSlotRef;
     private $rootTag;
     private $wireAttrs;
+    private $primeSSRComplexProperty;
+    private $writeComplexProperty;
     protected $finalize(_instance: TemplateInstance, _root: Node, _meta: TemplateBlockMeta, _resolver: (root: Node, index: TemplateNodeIndex) => Node | null, _scope?: ScopeFrame): void;
     private $makeAttr;
     private $buildPathIndex;

package/dist/template-element.js

@@ -51,6 +51,29 @@ const ACTIVATION_STATIC_HOST_OPT_OUT = 2;
 const ACTIVATION_MISSING_TEMPLATE = 3;
 const templateMetaByCtor = new WeakMap();
 const pendingAncestorDescendants = new WeakMap();
+const pendingParentStateByElement = new WeakMap();
+function queuePendingParentState(element, name, value, replayAfterHydration) {
+    let pending = pendingParentStateByElement.get(element);
+    if (!pending) {
+        pending = {
+            values: Object.create(null),
+        };
+        pendingParentStateByElement.set(element, pending);
+    }
+    pending.values[name] = value;
+    if (replayAfterHydration) {
+        (pending.replay ??= new Set()).add(name);
+    }
+}
+function isUnupgradedWebUITarget(element) {
+    const tagName = element.localName;
+    if (tagName.indexOf('-') === -1)
+        return false;
+    const ctor = customElements.get(tagName);
+    if (ctor)
+        return ctor.prototype instanceof TemplateElement;
+    return getTemplate(tagName) !== undefined;
+}
 function childNodesArray(parent) {
     const children = parent.childNodes;
     const len = children.length;
@@ -320,10 +343,15 @@ export class TemplateElement extends HTMLElement {
         try {
             if (meta.sa)
                 injectModuleStyle(meta.sa, this.shadowRoot);
-            if (isSSR) {
-                if (!reconnecting && this.$shouldApplySSRBootstrapState()) {
-                    this.$applySSRState(hasBoundaryState ? ssrState : window.__webui?.state);
+            if (!reconnecting) {
+                if (isSSR) {
+                    if (this.$shouldApplySSRBootstrapState()) {
+                        this.$applySSRState(hasBoundaryState ? ssrState : window.__webui?.state);
+                    }
                 }
+                this.$applyPendingParentState(isSSR);
+            }
+            if (isSSR) {
                 this.$root = this.$hydrate(root, meta, getTemplateDom(meta));
             }
             else {
@@ -637,6 +665,7 @@ export class TemplateElement extends HTMLElement {
         if (this.$shouldApplySSRBootstrapState()) {
             this.$applySSRState(window.__webui?.state);
         }
+        this.$applyPendingParentState(true);
     }
     $shouldActivateOnBoundaryCommit() {
         return true;
@@ -772,6 +801,38 @@ export class TemplateElement extends HTMLElement {
             }
         }
     }
+    $applyPendingParentState(replayAfterHydration) {
+        const pending = pendingParentStateByElement.get(this);
+        if (!pending)
+            return;
+        pendingParentStateByElement.delete(this);
+        const state = pending.values;
+        const observableNames = this.$observableNames();
+        const keys = Object.keys(state);
+        for (let i = 0; i < keys.length; i++) {
+            const key = keys[i];
+            if (observableNames.has(key)) {
+                this[`_${key}`] = state[key];
+            }
+            else if (this.$usesTemplateState(key)) {
+                this.$writeTemplateState(key, state[key]);
+            }
+            else {
+                this[key] = state[key];
+            }
+        }
+        const replay = pending.replay;
+        if (replayAfterHydration && replay) {
+            const deferredWrites = this.$deferredWrites;
+            if (deferredWrites) {
+                for (const key of replay)
+                    deferredWrites.add(key);
+            }
+            else {
+                this.$deferredWrites = replay;
+            }
+        }
+    }
     $update(path) {
         if (!this.$ready || !this.$root) {
             if (path && this.$deferredSSR)
@@ -1077,7 +1138,7 @@ export class TemplateElement extends HTMLElement {
                 }
             }
         }
-        this.$wireAttrs(instance, meta, scope, (i) => ssrElements[i]);
+        this.$wireAttrs(instance, meta, scope, (i) => ssrElements[i], true);
         if (meta.c) {
             const condMarkers = ssrIndex.conds.length === meta.c.length ? ssrIndex.conds : null;
             for (let i = 0; i < meta.c.length; i++) {
@@ -1341,7 +1402,7 @@ export class TemplateElement extends HTMLElement {
         rootTagCache.set(meta, tag);
         return tag;
     }
-    $wireAttrs(instance, meta, scope, resolve) {
+    $wireAttrs(instance, meta, scope, resolve, primeSSRComplexProperties = false) {
         if (!meta.a || !meta.ag)
             return;
         for (let g = 0; g < meta.ag.length; g++) {
@@ -1351,10 +1412,41 @@ export class TemplateElement extends HTMLElement {
                 continue;
             for (let j = 0; j < count; j++) {
                 const entry = meta.a[start + j];
-                if (entry)
-                    instance.attrs.push(this.$makeAttr(el, entry, scope));
+                if (!entry)
+                    continue;
+                const binding = this.$makeAttr(el, entry, scope);
+                instance.attrs.push(binding);
+                if (primeSSRComplexProperties &&
+                    binding.kind === ATTR_KIND_COMPLEX &&
+                    this.$attrStateIsKnown(binding)) {
+                    this.$primeSSRComplexProperty(binding);
+                }
+            }
+        }
+    }
+    $primeSSRComplexProperty(binding) {
+        const element = binding.element;
+        const value = this.$resolveValue(binding.path, binding.scope);
+        this.$writeComplexProperty(element, binding.name, value, false);
+    }
+    $writeComplexProperty(element, name, value, replayAfterHydration) {
+        const target = element;
+        const setStateKey = target[WEBUI_SET_STATE_KEY];
+        if (typeof setStateKey === 'function') {
+            if (setStateKey.call(element, name, value)) {
+                const flush = target['$flushUpdates'];
+                if (typeof flush === 'function')
+                    flush.call(element);
+                return;
             }
+            target[name] = value;
+            return;
         }
+        if (isUnupgradedWebUITarget(element)) {
+            queuePendingParentState(element, name, value, replayAfterHydration);
+            return;
+        }
+        target[name] = value;
     }
     $finalize(_instance, _root, _meta, _resolver, _scope) { }
     $makeAttr(el, entry, scope) {
@@ -1551,17 +1643,7 @@ export class TemplateElement extends HTMLElement {
         switch (b.kind) {
             case ATTR_KIND_COMPLEX: {
                 const v = this.$resolveValue(b.path, b.scope);
-                const target = el;
-                const setStateKey = target[WEBUI_SET_STATE_KEY];
-                if (typeof setStateKey === 'function') {
-                    if (setStateKey.call(el, b.name, v)) {
-                        const flush = target['$flushUpdates'];
-                        if (typeof flush === 'function')
-                            flush.call(el);
-                        break;
-                    }
-                }
-                target[b.name] = v;
+                this.$writeComplexProperty(el, b.name, v, true);
                 break;
             }
             case ATTR_KIND_BOOLEAN: {

package/dist/template.d.ts

@@ -1,14 +1,15 @@
 export type { CompiledAttrGroupMeta, CompiledAttrMeta, CompiledAttrPart, CompiledCondition, CompiledConditionFn, CompiledConditionalMeta, CompiledEventArg, CompiledEventArgs, CompiledEventBindingMeta, CompiledEventGroupMeta, SerializedCompiledCondition, TemplateCondition, CompiledTextRunMeta, TemplateBlockMeta, TemplateMeta, TemplateNodeIndex, TemplateSlot, } from './template-types.js';
 import type { CompiledConditionFn, TemplateMeta } from './template-types.js';
 declare global {
+    interface WebUIRuntimeGlobal {
+        state?: Record<string, unknown>;
+        templates?: Record<string, TemplateMeta>;
+        templateFns?: Record<string, CompiledConditionFn[]>;
+        templateHostExclusions?: Set<string>;
+        [key: string]: unknown;
+    }
     interface Window {
-        __webui?: {
-            state?: Record<string, unknown>;
-            templates?: Record<string, TemplateMeta>;
-            templateFns?: Record<string, CompiledConditionFn[]>;
-            templateHostExclusions?: Set<string>;
-            [key: string]: unknown;
-        };
+        __webui?: WebUIRuntimeGlobal;
     }
 }
 export declare function getTemplate(name: string): TemplateMeta | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microsoft/webui-framework",
-  "version": "0.0.23",
+  "version": "0.0.25",
   "type": "module",
   "description": "WebUI Framework Next — Preact-inspired lightweight Web Component runtime with SSR hydration and compiled-template path mapping.",
   "license": "MIT",
@@ -37,7 +37,7 @@
     "@playwright/test": "^1.61.1",
     "@types/node": "^26.1.0",
     "typescript": "^6.0.3",
-    "@microsoft/webui-test-support": "0.0.23"
+    "@microsoft/webui-test-support": "0.0.25"
   },
   "scripts": {
     "build": "tsc",