@microsoft/webui-framework 0.0.22 → 0.0.24

package/dist/template-element.js

@@ -2,7 +2,7 @@ import { deferTemplateDefinition, getTemplate } from './template.js';
 import { hydrationStart, hydrationEnd } from './lifecycle.js';
 import { isStreamingHydrationMode, PENDING_ROOT_CONNECTED, STREAMED_HOST_ATTR, STREAMING_BOUNDARY_ACTIVATE, } from './streaming-mode.js';
 import { createRepeatKeyState, seedHydratedRepeatKeys, syncRepeat, dotWalk, } from './element/diff.js';
-import { collectItemMarkers, nextElement, findByOrdinal, MARKER_COND_START, MARKER_COND_END, MARKER_REPEAT_START, } from './element/markers.js';
+import { collectItemMarkers, nextElement, findByOrdinal, buildSSRIndex, collectTemplateElements, MARKER_COND_START, MARKER_COND_END, } from './element/markers.js';
 import { injectModuleStyle, } from './element/styles.js';
 import { ATTR_KIND_BOOLEAN, ATTR_KIND_COMPLEX, ATTR_KIND_TEMPLATE, hasNativeLiveProperty, } from './element/types.js';
 import { templateHasRoot, templateRootForAttribute } from './template-roots.js';
@@ -11,6 +11,15 @@ const templateCache = new WeakMap();
 const templateDOMCache = new WeakMap();
 const rootTagCache = new WeakMap();
 const tplOrdinalCache = new WeakMap();
+const tplElementCache = new WeakMap();
+function getTemplateElements(tplRoot) {
+    let cached = tplElementCache.get(tplRoot);
+    if (!cached) {
+        cached = collectTemplateElements(tplRoot);
+        tplElementCache.set(tplRoot, cached);
+    }
+    return cached;
+}
 function getTplOrdinals(tplNode) {
     let map = tplOrdinalCache.get(tplNode);
     if (map)
@@ -41,6 +50,30 @@ const ACTIVATION_ACTIVATED = 1;
 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;
@@ -115,7 +148,7 @@ export class TemplateElement extends HTMLElement {
         this.$root = null;
         this.$ready = false;
         this.$hydrated = false;
-        this.$hydratedCallbackCalled = false;
+        this.$hasMounted = false;
         this.$deferredSSR = false;
         this.$activatingDeferredSSR = false;
         this.$hasUnknownScopes = false;
@@ -125,13 +158,16 @@ export class TemplateElement extends HTMLElement {
         this.$preReadyWrites = null;
         this.$resolver = (p, s) => this.$resolveValue(p, s);
     }
+    static { this.$ancestorReleaseQueue = []; }
+    static { this.$ancestorReleaseIndex = 0; }
+    static { this.$ancestorReleaseActive = false; }
     [WEBUI_SET_STATE_KEY](key, value) {
         const wasDeferred = this.$deferredSSR;
         this.$beforeExternalStateWrite();
         const owned = this.$setStateKey(key, value);
+        if (owned && wasDeferred)
+            this.$recordDeferredWrite(key);
         this.$afterExternalStateWrite(owned);
-        if (owned && wasDeferred && !this.$deferredSSR)
-            this.$update(key);
         return owned;
     }
     [STREAMING_BOUNDARY_ACTIVATE](state) {
@@ -148,14 +184,35 @@ export class TemplateElement extends HTMLElement {
         this.$meta = meta;
         if (!this.$shouldActivateOnBoundaryCommit())
             return ACTIVATION_STATIC_HOST_OPT_OUT;
-        this.$activateDeferredSSR(state);
+        const ancestor = this.$nearestHydrationBarrier();
+        if (ancestor) {
+            this.$deferredByAncestor = true;
+            this.$ancestorBoundaryState = state;
+            this.$hasAncestorBoundaryState = true;
+            this.$registerWithHydrationBarrier(ancestor);
+            return ACTIVATION_ACTIVATED;
+        }
+        this.$activatingDeferredSSR = true;
+        try {
+            this.$activateDeferredSSR(state);
+        }
+        finally {
+            this.$activatingDeferredSSR = false;
+        }
         return ACTIVATION_ACTIVATED;
     }
     [STREAMING_BOUNDARY_ABANDON]() {
+        this.$detachDeferredAncestor();
+        this.$abandonDeferredDescendants();
         this.$deferredSSR = false;
+        this.$deferredByAncestor = undefined;
+        this.$ancestorBoundaryState = undefined;
+        this.$hasAncestorBoundaryState = undefined;
         this.$activatingDeferredSSR = false;
         this.$ready = false;
         this.$preReadyWrites = null;
+        if (this.$deferredWrites)
+            this.$deferredWrites = undefined;
     }
     static define(tagName) {
         const ctor = this;
@@ -170,8 +227,20 @@ export class TemplateElement extends HTMLElement {
     }
     connectedCallback() {
         const tag = this.tagName.toLowerCase();
+        this.$adoptPendingDescendants();
         if (this.$deferredSSR) {
             this.$ready = true;
+            if (this.$deferredByAncestor) {
+                const ancestor = this.$nearestHydrationBarrier();
+                if (ancestor) {
+                    this.$registerWithHydrationBarrier(ancestor);
+                    return;
+                }
+                this.$detachDeferredAncestor();
+                this.$releaseAncestorBarrier();
+                return;
+            }
+            this.$didDeferSSRHydration();
             return;
         }
         if (this.$hydrated && this.$root) {
@@ -185,12 +254,15 @@ export class TemplateElement extends HTMLElement {
             }
             return;
         }
-        if (isStreamingHydrationMode() && this.hasAttribute(STREAMED_HOST_ATTR)) {
+        if (!this.$hasMounted &&
+            isStreamingHydrationMode() &&
+            this.hasAttribute(STREAMED_HOST_ATTR)) {
             this.$deferredSSR = true;
             this.$ready = true;
             const resume = this[PENDING_ROOT_CONNECTED];
             if (typeof resume === 'function')
                 resume.call(this);
+            this.$didDeferSSRHydration();
             return;
         }
         const meta = this.$templateMeta();
@@ -200,17 +272,35 @@ export class TemplateElement extends HTMLElement {
             return;
         }
         this.$meta = meta;
-        this.$mount(meta, false);
+        if (this.$hasMounted) {
+            this.$remount(meta);
+        }
+        else {
+            this.$mount(meta, false);
+        }
+    }
+    $remount(meta) {
+        this.$mount(meta, false, undefined, false, true);
     }
-    $mount(meta, forceSSR, ssrState) {
+    $mount(meta, forceSSR, ssrState, hasBoundaryState = false, reconnecting = false) {
         if (this.$hydrated)
             return;
         const hasShadow = !!this.shadowRoot;
         const wantShadow = hasShadow || !!meta.sd;
+        const remountStructuralTemplate = reconnecting &&
+            ((meta.c?.length ?? 0) !== 0 || (meta.r?.length ?? 0) !== 0);
         let root;
         let isSSR;
         let clientRoot = null;
-        if (hasShadow) {
+        if (remountStructuralTemplate) {
+            const renderRoot = wantShadow
+                ? this.shadowRoot ?? this.attachShadow({ mode: 'open' })
+                : this;
+            renderRoot.replaceChildren();
+            root = renderRoot;
+            isSSR = false;
+        }
+        else if (hasShadow) {
             root = this.shadowRoot;
             isSSR = true;
         }
@@ -226,20 +316,42 @@ export class TemplateElement extends HTMLElement {
             root = this;
             isSSR = false;
         }
-        if (isSSR && !forceSSR && this.$shouldDeferSSRHydration()) {
-            this.$meta = meta;
-            this.$deferredSSR = true;
-            this.$ready = true;
-            return;
+        if (isSSR &&
+            !forceSSR &&
+            !reconnecting) {
+            const ancestor = this.$nearestHydrationBarrier();
+            if (ancestor) {
+                this.$meta = meta;
+                this.$deferredSSR = true;
+                this.$deferredByAncestor = true;
+                this.$ready = true;
+                this.$primeSSRStateForDeferral();
+                this.$registerWithHydrationBarrier(ancestor);
+                return;
+            }
+            if (!this.$shouldDeferSSRHydration(meta)) {
+            }
+            else {
+                this.$meta = meta;
+                this.$deferredSSR = true;
+                this.$ready = true;
+                this.$didDeferSSRHydration();
+                return;
+            }
         }
         hydrationStart();
         try {
             if (meta.sa)
                 injectModuleStyle(meta.sa, this.shadowRoot);
-            if (isSSR) {
-                if (this.$shouldApplySSRBootstrapState()) {
-                    this.$applySSRState(forceSSR ? 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 {
@@ -250,6 +362,11 @@ export class TemplateElement extends HTMLElement {
             this.$hydrated = true;
             this.$ready = true;
             this.$syncAuthoredAttributes();
+            if (isSSR && this.$deferredWrites)
+                this.$replayDeferredWrites();
+            if (isSSR && reconnecting) {
+                this.$updateBindings(this.$root.texts, this.$root.attrs, this.$root.conds, this.$root.repeats, true);
+            }
             if (isSSR && DEV)
                 this.$checkHydrationMismatch();
             else
@@ -263,13 +380,14 @@ export class TemplateElement extends HTMLElement {
                 this.$appendStagedChildren(root, clientRoot);
                 this.$root.container = root;
             }
-            this.$notifyHydrated();
+            this.$finishHydration();
         }
         finally {
             hydrationEnd();
         }
     }
     disconnectedCallback() {
+        this.$detachDeferredAncestor();
         if (this.$root) {
             queueMicrotask(() => {
                 if (!this.isConnected)
@@ -279,9 +397,16 @@ export class TemplateElement extends HTMLElement {
     }
     $destroy() {
         if (!this.$root) {
+            this.$detachDeferredAncestor();
+            this.$abandonDeferredDescendants();
             this.$deferredSSR = false;
+            this.$deferredByAncestor = undefined;
+            this.$ancestorBoundaryState = undefined;
+            this.$hasAncestorBoundaryState = undefined;
             this.$ready = false;
             this.$hasUnknownScopes = false;
+            if (this.$deferredWrites)
+                this.$deferredWrites = undefined;
             return;
         }
         this.$disposeInstance(this.$root, false);
@@ -291,6 +416,7 @@ export class TemplateElement extends HTMLElement {
         this.$dirtyPaths = null;
         this.$pendingFlush = false;
         this.$preReadyWrites = null;
+        this.$hydrated = false;
         this.$ready = false;
         this.$hasUnknownScopes = false;
     }
@@ -324,11 +450,11 @@ export class TemplateElement extends HTMLElement {
         const property = this.$templateRootForAttribute(name);
         let changed = false;
         if (property && this.$usesTemplateState(property)) {
+            if (wasDeferred)
+                this.$recordDeferredWrite(property);
             changed = this.$setTemplateState(property, newValue);
         }
         this.$afterExternalStateWrite(changed);
-        if (changed && property && wasDeferred && !this.$deferredSSR)
-            this.$update(property);
     }
     setState(state) {
         const wasDeferred = this.$deferredSSR;
@@ -337,13 +463,12 @@ export class TemplateElement extends HTMLElement {
         let owned = false;
         for (let i = 0; i < keys.length; i++) {
             const key = keys[i];
-            owned = this.$setStateKey(key, state[key]) || owned;
+            const keyOwned = this.$setStateKey(key, state[key]);
+            if (keyOwned && wasDeferred)
+                this.$recordDeferredWrite(key);
+            owned = keyOwned || owned;
         }
         this.$afterExternalStateWrite(owned);
-        if (owned && wasDeferred && !this.$deferredSSR) {
-            for (let i = 0; i < keys.length; i++)
-                this.$update(keys[i]);
-        }
         this.$flushUpdates();
     }
     $observableNames() {
@@ -353,27 +478,221 @@ export class TemplateElement extends HTMLElement {
     }
     $afterExternalStateWrite(_applied) {
     }
-    $shouldDeferSSRHydration() {
+    $shouldDeferSSRHydration(_meta) {
         return false;
     }
+    $didDeferSSRHydration() {
+    }
+    $didDeferStreamedSSRHydration(_state) {
+        this.$didDeferSSRHydration();
+    }
+    $currentTemplateMetadata() {
+        return this.$meta ?? this.$templateMeta();
+    }
+    $nearestHydrationBarrier() {
+        let current = this;
+        while (true) {
+            let parent = current.assignedSlot ?? current.parentElement;
+            if (!parent) {
+                const getRootNode = current.getRootNode;
+                const root = typeof getRootNode === 'function'
+                    ? getRootNode.call(current)
+                    : null;
+                parent = typeof ShadowRoot !== 'undefined' &&
+                    root instanceof ShadowRoot
+                    ? root.host
+                    : null;
+            }
+            if (!parent)
+                return undefined;
+            if (parent instanceof TemplateElement) {
+                const parentMeta = parent.$meta ?? parent.$templateMeta();
+                if (parentMeta?.th) {
+                    current = parent;
+                    continue;
+                }
+                if (parent.$deferredSSR || !parent.$hydrated)
+                    return parent;
+            }
+            else {
+                const parentMeta = getTemplate(parent.tagName.toLowerCase());
+                if (parentMeta && !parentMeta.th)
+                    return parent;
+            }
+            current = parent;
+        }
+    }
+    $registerWithHydrationBarrier(ancestor) {
+        if (ancestor instanceof TemplateElement) {
+            ancestor.$registerDeferredDescendant(this);
+            return;
+        }
+        this.$detachDeferredAncestor();
+        this.$pendingAncestor = ancestor;
+        const descendants = pendingAncestorDescendants.get(ancestor);
+        if (descendants) {
+            descendants.push(this);
+        }
+        else {
+            pendingAncestorDescendants.set(ancestor, [this]);
+        }
+    }
+    $adoptPendingDescendants() {
+        const descendants = pendingAncestorDescendants.get(this);
+        if (!descendants)
+            return;
+        pendingAncestorDescendants.delete(this);
+        for (let i = 0; i < descendants.length; i++) {
+            const descendant = descendants[i];
+            if (descendant.$pendingAncestor !== this)
+                continue;
+            descendant.$pendingAncestor = undefined;
+            if (descendant.isConnected)
+                this.$registerDeferredDescendant(descendant);
+        }
+    }
+    $registerDeferredDescendant(descendant) {
+        if (descendant.$deferredAncestor === this)
+            return;
+        descendant.$detachDeferredAncestor();
+        descendant.$deferredAncestor = this;
+        (this.$deferredDescendants ??= []).push(descendant);
+    }
+    $detachDeferredAncestor() {
+        const pendingAncestor = this.$pendingAncestor;
+        if (pendingAncestor) {
+            this.$pendingAncestor = undefined;
+            const pending = pendingAncestorDescendants.get(pendingAncestor);
+            if (pending) {
+                const pendingIndex = pending.indexOf(this);
+                if (pendingIndex >= 0)
+                    pending.splice(pendingIndex, 1);
+                if (pending.length === 0) {
+                    pendingAncestorDescendants.delete(pendingAncestor);
+                }
+            }
+        }
+        const ancestor = this.$deferredAncestor;
+        if (!ancestor)
+            return;
+        this.$deferredAncestor = undefined;
+        const descendants = ancestor.$deferredDescendants;
+        if (!descendants)
+            return;
+        const index = descendants.indexOf(this);
+        if (index >= 0)
+            descendants.splice(index, 1);
+        if (descendants.length === 0)
+            ancestor.$deferredDescendants = undefined;
+    }
+    $releaseDeferredDescendants() {
+        const descendants = this.$deferredDescendants;
+        if (!descendants)
+            return;
+        this.$deferredDescendants = undefined;
+        const queue = TemplateElement.$ancestorReleaseQueue;
+        for (let i = 0; i < descendants.length; i++) {
+            const descendant = descendants[i];
+            if (descendant.$deferredAncestor !== this)
+                continue;
+            descendant.$deferredAncestor = undefined;
+            queue.push(descendant);
+        }
+        if (TemplateElement.$ancestorReleaseActive)
+            return;
+        TemplateElement.$ancestorReleaseActive = true;
+        let errors;
+        try {
+            while (TemplateElement.$ancestorReleaseIndex < queue.length) {
+                const descendant = queue[TemplateElement.$ancestorReleaseIndex];
+                TemplateElement.$ancestorReleaseIndex++;
+                try {
+                    descendant.$releaseAncestorBarrier();
+                }
+                catch (error) {
+                    (errors ??= []).push(error);
+                }
+            }
+        }
+        finally {
+            queue.length = 0;
+            TemplateElement.$ancestorReleaseIndex = 0;
+            TemplateElement.$ancestorReleaseActive = false;
+        }
+        if (errors) {
+            if (errors.length === 1)
+                throw errors[0];
+            throw new AggregateError(errors, 'multiple deferred descendants failed to hydrate');
+        }
+    }
+    $releaseAncestorBarrier() {
+        if (!this.$deferredByAncestor || !this.isConnected)
+            return;
+        this.$deferredByAncestor = undefined;
+        const hasBoundaryState = this.$hasAncestorBoundaryState === true;
+        const boundaryState = this.$ancestorBoundaryState;
+        this.$hasAncestorBoundaryState = undefined;
+        this.$ancestorBoundaryState = undefined;
+        const meta = this.$meta;
+        if (meta && this.$shouldDeferSSRHydration(meta)) {
+            if (hasBoundaryState) {
+                this.$didDeferStreamedSSRHydration(boundaryState);
+            }
+            else {
+                this.$didDeferSSRHydration();
+            }
+            return;
+        }
+        if (hasBoundaryState) {
+            this.$activateDeferredSSRFromBoundary(boundaryState);
+        }
+        else {
+            this.$activateDeferredSSR();
+        }
+    }
+    $abandonDeferredDescendants() {
+        const descendants = this.$deferredDescendants;
+        if (!descendants)
+            return;
+        this.$deferredDescendants = undefined;
+        for (let i = 0; i < descendants.length; i++) {
+            if (descendants[i].$deferredAncestor === this) {
+                descendants[i].$deferredAncestor = undefined;
+            }
+        }
+    }
+    $primeSSRStateForDeferral() {
+        if (this.$shouldApplySSRBootstrapState()) {
+            this.$applySSRState(window.__webui?.state);
+        }
+        this.$applyPendingParentState(true);
+    }
     $shouldActivateOnBoundaryCommit() {
         return true;
     }
     $activateDeferredSSR(state) {
+        this.$activateDeferredSSRWithState(state, this.$activatingDeferredSSR);
+    }
+    $activateDeferredSSRFromBoundary(state) {
+        this.$activateDeferredSSRWithState(state, true);
+    }
+    $activateDeferredSSRWithState(state, hasBoundaryState) {
         if (!this.$deferredSSR)
             return;
         const meta = this.$meta;
         if (!meta)
             return;
         this.$deferredSSR = false;
+        this.$guardUnknownState = true;
         this.$ready = false;
         this.$preReadyWrites = null;
+        const wasActivating = this.$activatingDeferredSSR;
         this.$activatingDeferredSSR = true;
         try {
-            this.$mount(meta, true, state);
+            this.$mount(meta, true, state, hasBoundaryState);
         }
         finally {
-            this.$activatingDeferredSSR = false;
+            this.$activatingDeferredSSR = wasActivating;
         }
     }
     $shouldApplySSRBootstrapState() {
@@ -387,11 +706,33 @@ export class TemplateElement extends HTMLElement {
     hydratedCallback() {
     }
     $notifyHydrated() {
-        if (this.$hydratedCallbackCalled)
+        if (this.$hasMounted)
             return;
-        this.$hydratedCallbackCalled = true;
+        this.$hasMounted = true;
         this.hydratedCallback();
     }
+    $finishHydration() {
+        let callbackFailed = false;
+        let callbackError;
+        try {
+            this.$notifyHydrated();
+        }
+        catch (error) {
+            callbackFailed = true;
+            callbackError = error;
+        }
+        try {
+            this.$releaseDeferredDescendants();
+        }
+        catch (releaseError) {
+            if (callbackFailed) {
+                throw new AggregateError([callbackError, releaseError], 'component callback and deferred descendant hydration failed');
+            }
+            throw releaseError;
+        }
+        if (callbackFailed)
+            throw callbackError;
+    }
     $shouldApplyTemplateStateFromSSR(_key) {
         return true;
     }
@@ -406,7 +747,8 @@ export class TemplateElement extends HTMLElement {
         if (!this.$templateState) {
             this.$templateState = Object.create(null);
         }
-        if (Object.is(this.$templateState[key], value))
+        if (Object.prototype.hasOwnProperty.call(this.$templateState, key) &&
+            Object.is(this.$templateState[key], value))
             return false;
         this.$templateState[key] = value;
         return true;
@@ -443,9 +785,12 @@ export class TemplateElement extends HTMLElement {
         if (!state || typeof state !== 'object')
             return;
         const observableNames = this.$observableNames();
+        const deferredWrites = this.$deferredWrites;
         const keys = Object.keys(state);
         for (let i = 0; i < keys.length; i++) {
             const key = keys[i];
+            if (deferredWrites?.has(key))
+                continue;
             if (observableNames.has(key)) {
                 if (!this.$shouldApplySSRState(key))
                     continue;
@@ -456,8 +801,42 @@ 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)
+                this.$recordDeferredWrite(path);
             if (DEV && path && this.isConnected)
                 this.$recordPreReadyWrite(path);
             return;
@@ -480,11 +859,31 @@ export class TemplateElement extends HTMLElement {
         this.$dirtyPaths = null;
         this.$updateInstance(this.$root);
     }
+    $recordDeferredWrite(path) {
+        const dot = path.indexOf('.');
+        const root = dot === -1 ? path : path.slice(0, dot);
+        (this.$deferredWrites ??= new Set()).add(root);
+    }
+    $replayDeferredWrites() {
+        const writes = this.$deferredWrites;
+        if (!writes)
+            return;
+        this.$deferredWrites = undefined;
+        if (this.$dirtyPaths) {
+            for (const path of writes)
+                this.$dirtyPaths.add(path);
+        }
+        else {
+            this.$dirtyPaths = writes;
+        }
+        this.$pendingFlush = true;
+        this.$flush(true);
+    }
     $flushUpdates() {
         if (this.$pendingFlush)
             this.$flush();
     }
-    $flush() {
+    $flush(requireKnownState = this.$guardUnknownState === true) {
         if (!this.$ready || !this.$root) {
             this.$dirtyPaths = null;
             this.$pendingFlush = false;
@@ -502,14 +901,14 @@ export class TemplateElement extends HTMLElement {
                     this.$buildPathIndex();
                 const entry = this.$pathIndex?.get(path);
                 if (entry) {
-                    this.$updateBindings(entry.texts, entry.attrs, entry.conds, entry.repeats);
+                    this.$updateBindings(entry.texts, entry.attrs, entry.conds, entry.repeats, requireKnownState);
                 }
             }
             if (!this.$pathIndex)
                 this.$buildPathIndex();
             if (this.$wildcardBindings) {
                 const wc = this.$wildcardBindings;
-                this.$updateBindings(wc.texts, wc.attrs, wc.conds, wc.repeats);
+                this.$updateBindings(wc.texts, wc.attrs, wc.conds, wc.repeats, requireKnownState);
             }
             if (!this.$pathIndex)
                 this.$buildPathIndex();
@@ -541,49 +940,6 @@ export class TemplateElement extends HTMLElement {
         const tag = this.tagName.toLowerCase();
         void import('./hydration-mismatch.js').then((m) => m.reportHydrationMismatch(tag, writes, index, ctx));
     }
-    $resolve(root, path, pathStart = 0) {
-        let cur = root;
-        for (let i = 0; i < pathStart; i++) {
-            const child = cur.childNodes[path[i]];
-            if (!child)
-                return null;
-            cur = child;
-        }
-        for (let i = pathStart; i < path.length; i++) {
-            const child = cur.childNodes[path[i]];
-            if (!child)
-                return null;
-            cur = child;
-        }
-        return cur;
-    }
-    $resolveSSR(ssrRoot, tplRoot, path, pathStart = 0) {
-        let ssr = ssrRoot;
-        let tpl = tplRoot;
-        for (let i = 0; i < pathStart; i++) {
-            const tplChild = tpl.childNodes[path[i]];
-            if (!tplChild)
-                return null;
-            tpl = tplChild;
-        }
-        for (let i = pathStart; i < path.length; i++) {
-            const idx = path[i];
-            const tplChild = tpl.childNodes[idx];
-            if (!tplChild)
-                return null;
-            const ordinals = getTplOrdinals(tpl);
-            const entry = ordinals.get(idx);
-            if (!entry)
-                return null;
-            const [nodeType, ordinal] = entry;
-            const child = findByOrdinal(ssr, nodeType, ordinal);
-            if (!child)
-                return null;
-            ssr = child;
-            tpl = tplChild;
-        }
-        return ssr;
-    }
     $parseTemplate(meta) {
         let cached = templateCache.get(meta);
         if (cached)
@@ -644,6 +1000,7 @@ export class TemplateElement extends HTMLElement {
             scope, container: root, nodes: childNodesArray(root),
             texts: [], attrs: [], conds: [], repeats: [],
         };
+        const elements = collectTemplateElements(root);
         const textRefs = new Array(meta.tx?.length ?? 0);
         let textRefCount = 0;
         if (meta.tx) {
@@ -651,8 +1008,8 @@ export class TemplateElement extends HTMLElement {
                 const entry = meta.tx[i];
                 const [slot, parts] = entry;
                 const raw = entry[2] === 1;
-                const [parentPath, beforeIndex] = slot;
-                const parent = parentPath.length > 0 ? this.$resolve(root, parentPath) : root;
+                const [parentIndex, beforeIndex] = slot;
+                const parent = elements[parentIndex];
                 if (!parent || (parent.nodeType !== 1 && parent.nodeType !== 11))
                     continue;
                 textRefs[textRefCount] = { parent, ref: parent.childNodes[beforeIndex] || null, parts, raw };
@@ -664,8 +1021,8 @@ export class TemplateElement extends HTMLElement {
         if (meta.c) {
             for (let i = 0; i < meta.c.length; i++) {
                 const [condition, blockIndex, slotMeta] = meta.c[i];
-                const [parentPath, beforeIndex] = slotMeta;
-                const parent = parentPath.length > 0 ? this.$resolve(root, parentPath) : root;
+                const [parentIndex, beforeIndex] = slotMeta;
+                const parent = elements[parentIndex];
                 if (!parent || (parent.nodeType !== 1 && parent.nodeType !== 11))
                     continue;
                 condRefs[condRefCount] = { parent, ref: parent.childNodes[beforeIndex] || null, condition: condition, blockIndex };
@@ -677,8 +1034,8 @@ export class TemplateElement extends HTMLElement {
         if (meta.r) {
             for (let i = 0; i < meta.r.length; i++) {
                 const [collection, itemVar, blockIndex, slotMeta, keyPath] = meta.r[i];
-                const [parentPath, beforeIndex] = slotMeta;
-                const parent = parentPath.length > 0 ? this.$resolve(root, parentPath) : root;
+                const [parentIndex, beforeIndex] = slotMeta;
+                const parent = elements[parentIndex];
                 if (!parent || (parent.nodeType !== 1 && parent.nodeType !== 11))
                     continue;
                 repRefs[repRefCount] = {
@@ -692,8 +1049,8 @@ export class TemplateElement extends HTMLElement {
                 repRefCount += 1;
             }
         }
-        this.$wireAttrs(instance, meta, scope, (p) => this.$resolve(root, p));
-        this.$finalize(instance, root, meta, (r, p) => this.$resolve(r, p), scope);
+        this.$wireAttrs(instance, meta, scope, (i) => elements[i] ?? null);
+        this.$finalize(instance, root, meta, (_r, i) => elements[i] ?? null, scope);
         for (let i = 0; i < textRefCount; i++) {
             const t = textRefs[i];
             const anchor = document.createComment('');
@@ -749,16 +1106,19 @@ export class TemplateElement extends HTMLElement {
             texts: [], attrs: [], conds: [], repeats: [],
         };
         const staleMarkers = [];
+        const ssrIndex = buildSSRIndex(tplDom, ssrRoot, meta.c !== undefined || meta.r !== undefined, pathStart > 0);
+        const ssrElements = ssrIndex.elements;
+        const tplElements = getTemplateElements(tplDom);
         if (meta.tx) {
             for (let i = 0; i < meta.tx.length; i++) {
                 const entry = meta.tx[i];
                 const [slot, parts] = entry;
                 const raw = entry[2] === 1;
-                const [parentPath, beforeIndex] = slot;
-                const ssrParent = this.$resolveSSR(ssrRoot, tplDom, parentPath, pathStart);
+                const [parentIndex, beforeIndex] = slot;
+                const ssrParent = ssrElements[parentIndex];
                 if (!ssrParent)
                     continue;
-                const tplParent = this.$resolve(tplDom, parentPath, pathStart);
+                const tplParent = tplElements[parentIndex];
                 if (!tplParent)
                     continue;
                 if (raw) {
@@ -778,21 +1138,16 @@ export class TemplateElement extends HTMLElement {
                 }
             }
         }
-        this.$wireAttrs(instance, meta, scope, (p) => this.$resolveSSR(ssrRoot, tplDom, p, pathStart));
+        this.$wireAttrs(instance, meta, scope, (i) => ssrElements[i], true);
         if (meta.c) {
-            let lastCondMarker = null;
-            let lastCondParent = null;
+            const condMarkers = ssrIndex.conds.length === meta.c.length ? ssrIndex.conds : null;
             for (let i = 0; i < meta.c.length; i++) {
                 const [condition, blockIndex, slotMeta] = meta.c[i];
-                const [parentPath] = slotMeta;
-                const ssrParent = this.$resolveSSR(ssrRoot, tplDom, parentPath, pathStart) ?? ssrRoot;
+                const [parentIndex] = slotMeta;
                 const blockMeta = this.$block(blockIndex);
                 let condInstance = null;
-                if (ssrParent !== lastCondParent) {
-                    lastCondMarker = null;
-                    lastCondParent = ssrParent;
-                }
-                const marker = this.$findMarker(ssrParent, MARKER_COND_START, lastCondMarker);
+                const marker = condMarkers ? condMarkers[i] : null;
+                const ssrParent = (marker ? marker.parentNode : ssrElements[parentIndex]) ?? ssrRoot;
                 let condAnchor;
                 if (marker) {
                     condAnchor = marker;
@@ -803,8 +1158,6 @@ export class TemplateElement extends HTMLElement {
                     const insertRef = ssrParent.childNodes[beforeIndex ?? ssrParent.childNodes.length] ?? null;
                     ssrParent.insertBefore(condAnchor, insertRef);
                 }
-                if (marker)
-                    lastCondMarker = marker;
                 if (marker && blockMeta) {
                     condInstance = this.$hydrateCondContent(condAnchor, blockMeta, scope);
                     if (condInstance)
@@ -825,22 +1178,17 @@ export class TemplateElement extends HTMLElement {
             }
         }
         if (meta.r) {
-            let lastRepMarker = null;
-            let lastRepParent = null;
+            const repMarkers = ssrIndex.repeats.length === meta.r.length ? ssrIndex.repeats : null;
             for (let i = 0; i < meta.r.length; i++) {
                 const [collection, itemVar, blockIndex, slotMeta, keyPath] = meta.r[i];
-                const [parentPath] = slotMeta;
-                const ssrParent = this.$resolveSSR(ssrRoot, tplDom, parentPath, pathStart) ?? ssrRoot;
-                if (ssrParent !== lastRepParent) {
-                    lastRepMarker = null;
-                    lastRepParent = ssrParent;
-                }
+                const [parentIndex] = slotMeta;
+                const marker = repMarkers ? repMarkers[i] : null;
+                const ssrParent = (marker ? marker.parentNode : ssrElements[parentIndex]) ?? ssrRoot;
                 const blockMeta = this.$block(blockIndex);
                 const blockTplDom = blockMeta ? getTemplateDom(blockMeta) : null;
                 const rootTag = blockMeta && blockTplDom?.childNodes.length === 1 && blockTplDom.children.length === 1
                     ? this.$rootTag(blockMeta)
                     : null;
-                const marker = this.$findMarker(ssrParent, MARKER_REPEAT_START, lastRepMarker);
                 let anchor;
                 if (marker) {
                     anchor = marker;
@@ -848,7 +1196,7 @@ export class TemplateElement extends HTMLElement {
                 else {
                     anchor = document.createComment('');
                     const [, beforeIndex] = slotMeta;
-                    const tplParent = this.$resolve(tplDom, parentPath, pathStart);
+                    const tplParent = tplElements[parentIndex];
                     const staticCount = tplParent ? tplParent.childNodes.length : 0;
                     const insertRef = ssrParent.childNodes[Math.min(beforeIndex ?? staticCount, ssrParent.childNodes.length)] ?? null;
                     ssrParent.insertBefore(anchor, insertRef);
@@ -860,7 +1208,6 @@ export class TemplateElement extends HTMLElement {
                 const { items: itemMarkers, end: endMarker } = marker
                     ? collectItemMarkers(anchor)
                     : { items: [], end: null };
-                lastRepMarker = endMarker ?? anchor;
                 if (blockMeta && blockTplDom && anchor.parentNode && itemMarkers.length > 0) {
                     if (!this.$activatingDeferredSSR
                         && hasCollectionState
@@ -933,7 +1280,7 @@ export class TemplateElement extends HTMLElement {
                 instance.repeats.push(binding);
             }
         }
-        this.$finalize(instance, ssrRoot, meta, (r, p) => this.$resolveSSR(r, tplDom, p, pathStart), scope);
+        this.$finalize(instance, ssrRoot, meta, (_r, i) => ssrElements[i] ?? null, scope);
         for (let i = 0; i < staleMarkers.length; i++) {
             staleMarkers[i].parentNode?.removeChild(staleMarkers[i]);
         }
@@ -964,13 +1311,13 @@ export class TemplateElement extends HTMLElement {
     $hasRootStructuralSlot(meta) {
         if (meta.c) {
             for (let i = 0; i < meta.c.length; i++) {
-                if (meta.c[i][2][0].length === 0)
+                if (meta.c[i][2][0] === 0)
                     return true;
             }
         }
         if (meta.r) {
             for (let i = 0; i < meta.r.length; i++) {
-                if (meta.r[i][3][0].length === 0)
+                if (meta.r[i][3][0] === 0)
                     return true;
             }
         }
@@ -1004,16 +1351,6 @@ export class TemplateElement extends HTMLElement {
             this.$replaceInstanceContainer(inst, wrapper, container);
         return inst;
     }
-    $findMarker(parent, data, after) {
-        let child = after ? after.nextSibling : parent.firstChild;
-        while (child) {
-            if (child.nodeType === 8 && child.data === data) {
-                return child;
-            }
-            child = child.nextSibling;
-        }
-        return null;
-    }
     $findSSRText(ssrParent, tplParent, beforeIndex) {
         const ordinals = getTplOrdinals(tplParent);
         let textOrd = 0;
@@ -1065,20 +1402,51 @@ 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++) {
-            const [targetPath, start, count] = meta.ag[g];
-            const el = resolve(targetPath);
+            const [targetIndex, start, count] = meta.ag[g];
+            const el = resolve(targetIndex);
             if (!el || el.nodeType !== 1)
                 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) {
@@ -1178,29 +1546,65 @@ export class TemplateElement extends HTMLElement {
         }
         this.$pathIndex = index;
     }
-    $updateBindings(texts, attrs, conds, repeats) {
+    $updateBindings(texts, attrs, conds, repeats, requireKnownState = false) {
         const gated = this.$hasUnknownScopes;
         for (let i = 0; i < texts.length; i++) {
             const binding = texts[i];
-            if (!gated || !binding.scope || this.$scopeIsKnown(binding.scope))
+            if ((!gated || !binding.scope || this.$scopeIsKnown(binding.scope)) &&
+                (!requireKnownState || this.$textStateIsKnown(binding))) {
                 this.$patchText(binding);
+            }
         }
         for (let i = 0; i < attrs.length; i++) {
             const binding = attrs[i];
-            if (!gated || !binding.scope || this.$scopeIsKnown(binding.scope))
+            if ((!gated || !binding.scope || this.$scopeIsKnown(binding.scope)) &&
+                (!requireKnownState || this.$attrStateIsKnown(binding))) {
                 this.$patchAttr(binding);
+            }
         }
         for (let i = 0; i < conds.length; i++) {
             const binding = conds[i];
-            if (!gated || !binding.scope || this.$scopeIsKnown(binding.scope))
+            if ((!gated || !binding.scope || this.$scopeIsKnown(binding.scope)) &&
+                (!requireKnownState || this.$pathsAreKnown(binding.condition[1], binding.scope))) {
                 this.$toggleCond(binding);
+            }
         }
         for (let i = 0; i < repeats.length; i++) {
             const binding = repeats[i];
-            if (!gated || !binding.scope || this.$scopeIsKnown(binding.scope))
+            if ((!gated || !binding.scope || this.$scopeIsKnown(binding.scope)) &&
+                (!requireKnownState || this.$hasStateRoot(binding.collection, binding.scope))) {
                 syncRepeat(this, binding);
+            }
         }
     }
+    $textStateIsKnown(binding) {
+        if (binding.parts)
+            return this.$partsAreKnown(binding.parts, binding.scope);
+        return !binding.path || this.$hasStateRoot(binding.path, binding.scope);
+    }
+    $attrStateIsKnown(binding) {
+        if (binding.path && !this.$hasStateRoot(binding.path, binding.scope))
+            return false;
+        if (binding.parts && !this.$partsAreKnown(binding.parts, binding.scope))
+            return false;
+        return !binding.condition
+            || this.$pathsAreKnown(binding.condition[1], binding.scope);
+    }
+    $partsAreKnown(parts, scope) {
+        for (let i = 0; i < parts.length; i++) {
+            const part = parts[i];
+            if (typeof part !== 'string' && !this.$hasStateRoot(part[0], scope))
+                return false;
+        }
+        return true;
+    }
+    $pathsAreKnown(paths, scope) {
+        for (let i = 0; i < paths.length; i++) {
+            if (!this.$hasStateRoot(paths[i], scope))
+                return false;
+        }
+        return true;
+    }
     $scopeIsKnown(scope) {
         let frame = scope;
         while (frame) {
@@ -1211,7 +1615,7 @@ export class TemplateElement extends HTMLElement {
         return true;
     }
     $updateInstance(instance) {
-        this.$updateBindings(instance.texts, instance.attrs, instance.conds, instance.repeats);
+        this.$updateBindings(instance.texts, instance.attrs, instance.conds, instance.repeats, this.$guardUnknownState === true);
     }
     $patchText(b) {
         let val;
@@ -1239,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: {
@@ -1336,7 +1730,7 @@ export class TemplateElement extends HTMLElement {
                 || (path.length > frame.name.length
                     && path.charCodeAt(frame.name.length) === 46
                     && path.startsWith(frame.name))) {
-                return frame.value !== undefined;
+                return frame.known !== false;
             }
             frame = frame.parent;
         }