@microsoft/webui-framework 0.0.18 → 0.0.20

package/dist/template-element.js

@@ -1,9 +1,10 @@
-import { getTemplate } from './template.js';
+import { deferTemplateDefinition, getTemplate } from './template.js';
 import { hydrationStart, hydrationEnd } from './lifecycle.js';
-import { syncRepeat, dotWalk } from './element/diff.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 { injectModuleStyle, } from './element/styles.js';
-import { ATTR_KIND_BOOLEAN, ATTR_KIND_COMPLEX, ATTR_KIND_TEMPLATE, } from './element/types.js';
+import { ATTR_KIND_BOOLEAN, ATTR_KIND_COMPLEX, ATTR_KIND_TEMPLATE, hasNativeLiveProperty, } from './element/types.js';
 import { templateHasRoot, templateRootForAttribute } from './template-roots.js';
 const DEV = typeof __WEBUI_DEV__ === 'undefined' || __WEBUI_DEV__;
 const templateCache = new WeakMap();
@@ -35,28 +36,11 @@ function getTplOrdinals(tplNode) {
 const EMPTY_ARR = [];
 const EMPTY_SET = Object.freeze(new Set());
 const WEBUI_SET_STATE_KEY = Symbol.for('microsoft.webui.setStateKey');
+const STREAMING_BOUNDARY_ABANDON = Symbol.for('microsoft.webui.boundaryAbandon');
+const ACTIVATION_ACTIVATED = 1;
+const ACTIVATION_STATIC_HOST_OPT_OUT = 2;
+const ACTIVATION_MISSING_TEMPLATE = 3;
 const templateMetaByCtor = new WeakMap();
-let domReadyQueue = null;
-function runWhenDomReady(callback) {
-    if (document.readyState !== 'loading') {
-        callback();
-        return;
-    }
-    if (domReadyQueue) {
-        domReadyQueue.push(callback);
-        return;
-    }
-    domReadyQueue = [callback];
-    document.addEventListener('DOMContentLoaded', flushDomReadyQueue, { once: true });
-}
-function flushDomReadyQueue() {
-    const queue = domReadyQueue;
-    domReadyQueue = null;
-    if (!queue)
-        return;
-    for (let i = 0; i < queue.length; i++)
-        queue[i]();
-}
 function childNodesArray(parent) {
     const children = parent.childNodes;
     const len = children.length;
@@ -74,8 +58,7 @@ function getTemplateDom(meta) {
     templateDOMCache.set(meta, div);
     return div;
 }
-function installTemplateObservedAttributes(ctor, tagName) {
-    const meta = getTemplate(tagName);
+function installTemplateObservedAttributes(ctor, tagName, meta = getTemplate(tagName)) {
     if (!meta)
         return;
     templateMetaByCtor.set(ctor, meta);
@@ -111,6 +94,10 @@ function installTemplateObservedAttributes(ctor, tagName) {
         configurable: true,
     });
 }
+function defineTemplateConstructor(ctor, tagName, meta) {
+    installTemplateObservedAttributes(ctor, tagName, meta);
+    customElements.define(tagName, ctor);
+}
 function hasAuthoredMember(instance, key) {
     if (Object.prototype.hasOwnProperty.call(instance, key))
         return true;
@@ -128,6 +115,10 @@ export class TemplateElement extends HTMLElement {
         this.$root = null;
         this.$ready = false;
         this.$hydrated = false;
+        this.$hydratedCallbackCalled = false;
+        this.$deferredSSR = false;
+        this.$activatingDeferredSSR = false;
+        this.$hasUnknownScopes = false;
         this.$templateState = null;
         this.$dirtyPaths = null;
         this.$pendingFlush = false;
@@ -135,39 +126,85 @@ export class TemplateElement extends HTMLElement {
         this.$resolver = (p, s) => this.$resolveValue(p, s);
     }
     [WEBUI_SET_STATE_KEY](key, value) {
-        return this.$setStateKey(key, value);
+        const wasDeferred = this.$deferredSSR;
+        this.$beforeExternalStateWrite();
+        const owned = this.$setStateKey(key, value);
+        this.$afterExternalStateWrite(owned);
+        if (owned && wasDeferred && !this.$deferredSSR)
+            this.$update(key);
+        return owned;
+    }
+    [STREAMING_BOUNDARY_ACTIVATE](state) {
+        if (!this.$deferredSSR && this.hasAttribute(STREAMED_HOST_ATTR)) {
+            this.$deferredSSR = true;
+            this.$ready = true;
+        }
+        if (!this.$deferredSSR)
+            return ACTIVATION_ACTIVATED;
+        const meta = this.$templateMeta();
+        if (!meta) {
+            return ACTIVATION_MISSING_TEMPLATE;
+        }
+        this.$meta = meta;
+        if (!this.$shouldActivateOnBoundaryCommit())
+            return ACTIVATION_STATIC_HOST_OPT_OUT;
+        this.$activateDeferredSSR(state);
+        return ACTIVATION_ACTIVATED;
+    }
+    [STREAMING_BOUNDARY_ABANDON]() {
+        this.$deferredSSR = false;
+        this.$activatingDeferredSSR = false;
+        this.$ready = false;
+        this.$preReadyWrites = null;
     }
     static define(tagName) {
-        installTemplateObservedAttributes(this, tagName);
-        customElements.define(tagName, this);
+        const ctor = this;
+        const meta = getTemplate(tagName);
+        if (!meta && isStreamingHydrationMode()) {
+            deferTemplateDefinition(tagName, ctor, () => {
+                defineTemplateConstructor(ctor, tagName, getTemplate(tagName));
+            });
+            return;
+        }
+        defineTemplateConstructor(ctor, tagName, meta);
     }
     connectedCallback() {
         const tag = this.tagName.toLowerCase();
+        if (this.$deferredSSR) {
+            this.$ready = true;
+            return;
+        }
         if (this.$hydrated && this.$root) {
             hydrationStart();
+            try {
+                this.$ready = true;
+                this.$update();
+            }
+            finally {
+                hydrationEnd();
+            }
+            return;
+        }
+        if (isStreamingHydrationMode() && this.hasAttribute(STREAMED_HOST_ATTR)) {
+            this.$deferredSSR = true;
             this.$ready = true;
-            this.$update();
-            hydrationEnd();
+            const resume = this[PENDING_ROOT_CONNECTED];
+            if (typeof resume === 'function')
+                resume.call(this);
             return;
         }
-        const meta = getTemplate(tag);
+        const meta = this.$templateMeta();
         if (!meta) {
             console.warn(`[WebUI] Template metadata for <${tag}> not found. ` +
                 `Ensure the component is included in the SSR output or registered via __webui.templates.`);
             return;
         }
         this.$meta = meta;
-        if (document.readyState === 'loading') {
-            runWhenDomReady(() => this.$mount(meta));
-        }
-        else {
-            this.$mount(meta);
-        }
+        this.$mount(meta, false);
     }
-    $mount(meta) {
+    $mount(meta, forceSSR, ssrState) {
         if (this.$hydrated)
             return;
-        hydrationStart();
         const hasShadow = !!this.shadowRoot;
         const wantShadow = hasShadow || !!meta.sd;
         let root;
@@ -189,33 +226,48 @@ export class TemplateElement extends HTMLElement {
             root = this;
             isSSR = false;
         }
-        if (meta.sa)
-            injectModuleStyle(meta.sa, this.shadowRoot);
-        if (isSSR) {
-            this.$applySSRState();
-            this.$root = this.$hydrate(root, meta, getTemplateDom(meta));
-        }
-        else {
-            clientRoot = this.$createStagingRoot(meta);
-            this.$root = this.$wire(clientRoot, meta);
+        if (isSSR && !forceSSR && this.$shouldDeferSSRHydration()) {
+            this.$meta = meta;
+            this.$deferredSSR = true;
+            this.$ready = true;
+            return;
         }
-        this.$meta = meta;
-        this.$hydrated = true;
-        this.$ready = true;
-        this.$syncAuthoredAttributes();
-        if (isSSR && DEV)
-            this.$checkHydrationMismatch();
-        else
-            this.$preReadyWrites = null;
-        if (!isSSR && clientRoot) {
-            this.$updateInstance(this.$root);
-            if (this.$root.repeats.length !== 0 || this.$root.conds.length !== 0) {
-                this.$root.nodes = childNodesArray(clientRoot);
-                this.$releaseStagingRepeatContainers(this.$root, clientRoot);
+        hydrationStart();
+        try {
+            if (meta.sa)
+                injectModuleStyle(meta.sa, this.shadowRoot);
+            if (isSSR) {
+                if (this.$shouldApplySSRBootstrapState()) {
+                    this.$applySSRState(forceSSR ? ssrState : window.__webui?.state);
+                }
+                this.$root = this.$hydrate(root, meta, getTemplateDom(meta));
+            }
+            else {
+                clientRoot = this.$createStagingRoot(meta);
+                this.$root = this.$wire(clientRoot, meta);
             }
-            this.$appendStagedChildren(root, clientRoot);
+            this.$meta = meta;
+            this.$hydrated = true;
+            this.$ready = true;
+            this.$syncAuthoredAttributes();
+            if (isSSR && DEV)
+                this.$checkHydrationMismatch();
+            else
+                this.$preReadyWrites = null;
+            if (!isSSR && clientRoot) {
+                this.$updateInstance(this.$root);
+                if (this.$root.repeats.length !== 0 || this.$root.conds.length !== 0) {
+                    this.$root.nodes = childNodesArray(clientRoot);
+                    this.$replaceInstanceContainer(this.$root, clientRoot, root);
+                }
+                this.$appendStagedChildren(root, clientRoot);
+                this.$root.container = root;
+            }
+            this.$notifyHydrated();
+        }
+        finally {
+            hydrationEnd();
         }
-        hydrationEnd();
     }
     disconnectedCallback() {
         if (this.$root) {
@@ -226,9 +278,13 @@ export class TemplateElement extends HTMLElement {
         }
     }
     $destroy() {
-        if (!this.$root)
+        if (!this.$root) {
+            this.$deferredSSR = false;
+            this.$ready = false;
+            this.$hasUnknownScopes = false;
             return;
-        this.$teardown(this.$root);
+        }
+        this.$disposeInstance(this.$root, false);
         this.$root = null;
         this.$pathIndex = undefined;
         this.$wildcardBindings = undefined;
@@ -236,67 +292,115 @@ export class TemplateElement extends HTMLElement {
         this.$pendingFlush = false;
         this.$preReadyWrites = null;
         this.$ready = false;
-    }
-    $teardown(instance) {
-        this.$teardownInstanceCleanups(instance);
-        for (const c of instance.conds) {
-            if (c.instance)
-                this.$teardown(c.instance);
-            c.instance = null;
-        }
-        for (const r of instance.repeats) {
-            for (const item of r.instances)
-                this.$teardown(item.instance);
-            r.instances.length = 0;
-            r.container = null;
-            r.start = null;
-            r.end = null;
-        }
+        this.$hasUnknownScopes = false;
+    }
+    $clearRepeatBinding(repeat) {
+        repeat.instances.length = 0;
+        repeat.container = null;
+        repeat.start = null;
+        repeat.end = null;
+        const state = repeat.keyState;
+        if (state) {
+            state.keys.length = 0;
+            state.nextKeys.length = 0;
+            state.map.clear();
+        }
+    }
+    $clearInstance(instance) {
+        instance.scope = undefined;
+        instance.parent = undefined;
+        instance.container = null;
         instance.nodes.length = 0;
         instance.texts.length = 0;
         instance.attrs.length = 0;
         instance.conds.length = 0;
         instance.repeats.length = 0;
     }
-    $teardownInstanceCleanups(instance) {
-        const cleanups = instance.cleanups;
-        if (!cleanups)
-            return;
-        for (let i = 0; i < cleanups.length; i++)
-            cleanups[i]();
-        cleanups.length = 0;
-    }
     attributeChangedCallback(name, oldValue, newValue) {
         if (Object.is(oldValue, newValue))
             return;
+        const wasDeferred = this.$deferredSSR;
+        this.$beforeExternalStateWrite();
         const property = this.$templateRootForAttribute(name);
+        let changed = false;
         if (property && this.$usesTemplateState(property)) {
-            this.$setTemplateState(property, newValue);
+            changed = this.$setTemplateState(property, newValue);
         }
+        this.$afterExternalStateWrite(changed);
+        if (changed && property && wasDeferred && !this.$deferredSSR)
+            this.$update(property);
     }
     setState(state) {
+        const wasDeferred = this.$deferredSSR;
+        this.$beforeExternalStateWrite();
         const keys = Object.keys(state);
+        let owned = false;
         for (let i = 0; i < keys.length; i++) {
             const key = keys[i];
-            this.$setStateKey(key, state[key]);
+            owned = this.$setStateKey(key, state[key]) || owned;
+        }
+        this.$afterExternalStateWrite(owned);
+        if (owned && wasDeferred && !this.$deferredSSR) {
+            for (let i = 0; i < keys.length; i++)
+                this.$update(keys[i]);
         }
         this.$flushUpdates();
     }
     $observableNames() {
         return EMPTY_SET;
     }
+    $beforeExternalStateWrite() {
+    }
+    $afterExternalStateWrite(_applied) {
+    }
+    $shouldDeferSSRHydration() {
+        return false;
+    }
+    $shouldActivateOnBoundaryCommit() {
+        return true;
+    }
+    $activateDeferredSSR(state) {
+        if (!this.$deferredSSR)
+            return;
+        const meta = this.$meta;
+        if (!meta)
+            return;
+        this.$deferredSSR = false;
+        this.$ready = false;
+        this.$preReadyWrites = null;
+        this.$activatingDeferredSSR = true;
+        try {
+            this.$mount(meta, true, state);
+        }
+        finally {
+            this.$activatingDeferredSSR = false;
+        }
+    }
+    $shouldApplySSRBootstrapState() {
+        return true;
+    }
     $shouldApplySSRState(_key) {
         return true;
     }
     $syncAuthoredAttributes() {
     }
+    hydratedCallback() {
+    }
+    $notifyHydrated() {
+        if (this.$hydratedCallbackCalled)
+            return;
+        this.$hydratedCallbackCalled = true;
+        this.hydratedCallback();
+    }
     $shouldApplyTemplateStateFromSSR(_key) {
         return true;
     }
     $setTemplateState(key, value) {
-        if (this.$writeTemplateState(key, value)) {
+        const changed = this.$writeTemplateState(key, value);
+        if (changed) {
             this.$update(key);
         }
+        return changed;
     }
     $writeTemplateState(key, value) {
         if (!this.$templateState) {
@@ -335,8 +439,7 @@ export class TemplateElement extends HTMLElement {
         }
         return false;
     }
-    $applySSRState() {
-        const state = window.__webui?.state;
+    $applySSRState(state) {
         if (!state || typeof state !== 'object')
             return;
         const observableNames = this.$observableNames();
@@ -382,24 +485,34 @@ export class TemplateElement extends HTMLElement {
             this.$flush();
     }
     $flush() {
-        if (!this.$ready || !this.$root || !this.$pathIndex) {
+        if (!this.$ready || !this.$root) {
             this.$dirtyPaths = null;
             this.$pendingFlush = false;
             return;
         }
+        if (!this.$pathIndex)
+            this.$buildPathIndex();
+        if (!this.$pathIndex)
+            return;
         while (this.$dirtyPaths && this.$dirtyPaths.size > 0) {
             const dirty = this.$dirtyPaths;
             this.$dirtyPaths = null;
             for (const path of dirty) {
-                const entry = this.$pathIndex.get(path);
+                if (!this.$pathIndex)
+                    this.$buildPathIndex();
+                const entry = this.$pathIndex?.get(path);
                 if (entry) {
                     this.$updateBindings(entry.texts, entry.attrs, entry.conds, entry.repeats);
                 }
             }
+            if (!this.$pathIndex)
+                this.$buildPathIndex();
             if (this.$wildcardBindings) {
                 const wc = this.$wildcardBindings;
                 this.$updateBindings(wc.texts, wc.attrs, wc.conds, wc.repeats);
             }
+            if (!this.$pathIndex)
+                this.$buildPathIndex();
         }
         this.$pendingFlush = false;
     }
@@ -501,34 +614,34 @@ export class TemplateElement extends HTMLElement {
         }
         root.appendChild(fragment);
     }
-    $releaseStagingRepeatContainers(instance, stagingRoot) {
-        if (!instance || !stagingRoot)
-            return;
-        if (instance.repeats.length === 0 && instance.conds.length === 0)
+    $replaceInstanceContainer(instance, previous, next) {
+        if (previous === next)
             return;
         const stack = [instance];
         while (stack.length > 0) {
             const current = stack.pop();
             if (!current)
                 continue;
-            for (let i = 0; i < current.repeats.length; i++) {
-                const repeat = current.repeats[i];
-                if (repeat.container === stagingRoot)
-                    repeat.container = null;
-                for (let j = 0; j < repeat.instances.length; j++) {
-                    stack.push(repeat.instances[j].instance);
-                }
-            }
+            if (current.container === previous)
+                current.container = next;
             for (let i = 0; i < current.conds.length; i++) {
                 const child = current.conds[i].instance;
                 if (child)
                     stack.push(child);
             }
+            for (let i = 0; i < current.repeats.length; i++) {
+                const repeat = current.repeats[i];
+                if (repeat.container === previous)
+                    repeat.container = next;
+                const children = repeat.instances;
+                for (let j = 0; j < children.length; j++)
+                    stack.push(children[j]);
+            }
         }
     }
     $wire(root, meta, scope) {
         const instance = {
-            scope, nodes: childNodesArray(root),
+            scope, container: root, nodes: childNodesArray(root),
             texts: [], attrs: [], conds: [], repeats: [],
         };
         const textRefs = new Array(meta.tx?.length ?? 0);
@@ -563,12 +676,19 @@ export class TemplateElement extends HTMLElement {
         let repRefCount = 0;
         if (meta.r) {
             for (let i = 0; i < meta.r.length; i++) {
-                const [collection, itemVar, blockIndex, slotMeta] = meta.r[i];
+                const [collection, itemVar, blockIndex, slotMeta, keyPath] = meta.r[i];
                 const [parentPath, beforeIndex] = slotMeta;
                 const parent = parentPath.length > 0 ? this.$resolve(root, parentPath) : root;
                 if (!parent || (parent.nodeType !== 1 && parent.nodeType !== 11))
                     continue;
-                repRefs[repRefCount] = { parent, ref: parent.childNodes[beforeIndex] || null, collection, itemVar, blockIndex };
+                repRefs[repRefCount] = {
+                    parent,
+                    ref: parent.childNodes[beforeIndex] || null,
+                    collection,
+                    itemVar,
+                    blockIndex,
+                    keyPath,
+                };
                 repRefCount += 1;
             }
         }
@@ -594,19 +714,28 @@ export class TemplateElement extends HTMLElement {
             const c = condRefs[i];
             const anchor = document.createComment('');
             c.parent.insertBefore(anchor, c.ref);
-            instance.conds.push({ condition: c.condition, blockIndex: c.blockIndex, anchor, scope, instance: null });
+            instance.conds.push({
+                condition: c.condition,
+                blockIndex: c.blockIndex,
+                anchor,
+                scope,
+                owner: instance,
+                instance: null,
+            });
         }
         for (let i = 0; i < repRefCount; i++) {
             const r = repRefs[i];
             const anchor = document.createComment('');
             r.parent.insertBefore(anchor, r.ref);
-            const { keyAttribute, keyPath } = this.$repeatMaps(r.blockIndex, r.itemVar);
-            instance.repeats.push({
+            const binding = {
                 markerId: i, collection: r.collection, itemVar: r.itemVar, blockIndex: r.blockIndex,
                 container: r.parent, start: anchor, end: null,
-                scope, owner: instance, instances: [], rootTag: null,
-                keyAttribute, keyPath,
-            });
+                scope, owner: instance, instances: [],
+            };
+            if (r.keyPath !== undefined) {
+                binding.keyState = createRepeatKeyState(r.keyPath);
+            }
+            instance.repeats.push(binding);
         }
         for (let i = 0; i < instance.conds.length; i++)
             this.$toggleCond(instance.conds[i]);
@@ -615,6 +744,7 @@ export class TemplateElement extends HTMLElement {
     $hydrate(ssrRoot, meta, tplDom, scope, pathStart = 0) {
         const instance = {
             scope,
+            container: (pathStart > 0 ? ssrRoot.parentNode : ssrRoot),
             nodes: pathStart > 0 ? [ssrRoot] : childNodesArray(ssrRoot),
             texts: [], attrs: [], conds: [], repeats: [],
         };
@@ -657,7 +787,6 @@ export class TemplateElement extends HTMLElement {
                 const [parentPath] = slotMeta;
                 const ssrParent = this.$resolveSSR(ssrRoot, tplDom, parentPath, pathStart) ?? ssrRoot;
                 const blockMeta = this.$block(blockIndex);
-                const shown = condition[0](this.$resolver, scope);
                 let condInstance = null;
                 if (ssrParent !== lastCondParent) {
                     lastCondMarker = null;
@@ -676,11 +805,10 @@ export class TemplateElement extends HTMLElement {
                 }
                 if (marker)
                     lastCondMarker = marker;
-                const ssrContentPresent = marker && blockMeta && this.$hasContentAfterMarker(condAnchor, MARKER_COND_END);
-                if (blockMeta && (shown || ssrContentPresent)) {
-                    if (marker) {
-                        condInstance = this.$hydrateCondContent(condAnchor, blockMeta, scope);
-                    }
+                if (marker && blockMeta) {
+                    condInstance = this.$hydrateCondContent(condAnchor, blockMeta, scope);
+                    if (condInstance)
+                        condInstance.parent = instance;
                 }
                 if (marker) {
                     const lastNode = condInstance ? condInstance.nodes[condInstance.nodes.length - 1] : condAnchor;
@@ -692,7 +820,7 @@ export class TemplateElement extends HTMLElement {
                 instance.conds.push({
                     condition: condition, blockIndex,
                     anchor: condAnchor,
-                    scope, instance: condInstance,
+                    scope, owner: instance, instance: condInstance,
                 });
             }
         }
@@ -700,7 +828,7 @@ export class TemplateElement extends HTMLElement {
             let lastRepMarker = null;
             let lastRepParent = null;
             for (let i = 0; i < meta.r.length; i++) {
-                const [collection, itemVar, blockIndex, slotMeta] = meta.r[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) {
@@ -708,7 +836,6 @@ export class TemplateElement extends HTMLElement {
                     lastRepParent = ssrParent;
                 }
                 const blockMeta = this.$block(blockIndex);
-                const { keyAttribute, keyPath } = this.$repeatMaps(blockIndex, itemVar);
                 const blockTplDom = blockMeta ? getTemplateDom(blockMeta) : null;
                 const rootTag = blockMeta && blockTplDom?.childNodes.length === 1 && blockTplDom.children.length === 1
                     ? this.$rootTag(blockMeta)
@@ -726,29 +853,37 @@ export class TemplateElement extends HTMLElement {
                     const insertRef = ssrParent.childNodes[Math.min(beforeIndex ?? staticCount, ssrParent.childNodes.length)] ?? null;
                     ssrParent.insertBefore(anchor, insertRef);
                 }
-                lastRepMarker = anchor;
                 const repeatInsts = [];
+                const hasCollectionState = this.$hasStateRoot(collection, scope);
                 const itemsArr = this.$resolveValue(collection, scope);
                 const items = Array.isArray(itemsArr) ? itemsArr : [];
                 const { items: itemMarkers, end: endMarker } = marker
                     ? collectItemMarkers(anchor)
                     : { items: [], end: null };
-                if (blockMeta && blockTplDom && items.length > 0 && anchor.parentNode && itemMarkers.length > 0) {
-                    if (itemMarkers.length !== items.length) {
+                lastRepMarker = endMarker ?? anchor;
+                if (blockMeta && blockTplDom && anchor.parentNode && itemMarkers.length > 0) {
+                    if (!this.$activatingDeferredSSR
+                        && hasCollectionState
+                        && itemMarkers.length !== items.length) {
                         console.warn(`[webui] hydration: repeat marker count (${itemMarkers.length}) ≠ data length (${items.length}) for "${collection}"`);
                     }
-                    const limit = Math.min(itemMarkers.length, items.length);
-                    for (let j = 0; j < limit; j++) {
+                    for (let j = 0; j < itemMarkers.length; j++) {
                         const itemValue = items[j];
-                        const itemScope = { name: itemVar, value: itemValue, parent: scope };
+                        const known = hasCollectionState && j < items.length;
+                        if (!known)
+                            this.$hasUnknownScopes = true;
+                        const itemScope = {
+                            name: itemVar,
+                            value: itemValue,
+                            parent: scope,
+                            known,
+                        };
                         if (rootTag) {
                             const itemEl = nextElement(itemMarkers[j]);
                             if (itemEl) {
-                                const key = keyAttribute !== undefined
-                                    ? itemEl.getAttribute(keyAttribute)
-                                    : String(j);
                                 const childInstance = this.$hydrate(itemEl, blockMeta, blockTplDom, itemScope, 1);
-                                repeatInsts.push({ key, value: itemValue, instance: childInstance });
+                                childInstance.parent = instance;
+                                repeatInsts.push(childInstance);
                             }
                         }
                         else {
@@ -762,6 +897,7 @@ export class TemplateElement extends HTMLElement {
                                 cursor = next;
                             }
                             const inst = this.$hydrate(wrapper, blockMeta, blockTplDom, itemScope);
+                            inst.parent = instance;
                             inst.nodes = childNodesArray(wrapper);
                             let afterNode = itemMarkers[j];
                             for (let nodeIndex = 0; nodeIndex < inst.nodes.length; nodeIndex++) {
@@ -769,8 +905,10 @@ export class TemplateElement extends HTMLElement {
                                 itemParent?.insertBefore(node, afterNode.nextSibling);
                                 afterNode = node;
                             }
-                            const key = keyPath ? String(dotWalk(itemValue, keyPath, 0) ?? '') : null;
-                            repeatInsts.push({ key, value: itemValue, instance: inst });
+                            if (itemParent) {
+                                this.$replaceInstanceContainer(inst, wrapper, itemParent);
+                            }
+                            repeatInsts.push(inst);
                         }
                     }
                     for (let m = 0; m < itemMarkers.length; m++) {
@@ -779,43 +917,76 @@ export class TemplateElement extends HTMLElement {
                 }
                 if (endMarker)
                     staleMarkers.push(endMarker);
-                instance.repeats.push({
+                const binding = {
                     markerId: i, collection, itemVar, blockIndex,
                     container: (anchor.parentNode ?? ssrRoot),
                     start: anchor, end: null,
-                    scope, owner: instance, instances: repeatInsts, rootTag,
-                    keyAttribute, keyPath, synced: true,
-                });
+                    scope, owner: instance, instances: repeatInsts,
+                    synced: hasCollectionState,
+                };
+                if (keyPath !== undefined) {
+                    binding.keyState = createRepeatKeyState(keyPath);
+                    if (hasCollectionState) {
+                        seedHydratedRepeatKeys(binding, items);
+                    }
+                }
+                instance.repeats.push(binding);
             }
         }
         this.$finalize(instance, ssrRoot, meta, (r, p) => this.$resolveSSR(r, tplDom, p, pathStart), scope);
         for (let i = 0; i < staleMarkers.length; i++) {
             staleMarkers[i].parentNode?.removeChild(staleMarkers[i]);
         }
+        this.$compactNodeArray(instance);
         return instance;
     }
-    $collectBetween(start, endData) {
+    $collectConditionalRange(start) {
         const nodes = [];
+        let depth = 0;
         let node = start.nextSibling;
         while (node) {
-            if (node.nodeType === 8 && node.data === endData)
-                break;
+            if (node.nodeType === 8) {
+                const data = node.data;
+                if (data === MARKER_COND_START) {
+                    depth++;
+                }
+                else if (data === MARKER_COND_END) {
+                    if (depth === 0)
+                        break;
+                    depth--;
+                }
+            }
             nodes.push(node);
             node = node.nextSibling;
         }
         return nodes;
     }
+    $hasRootStructuralSlot(meta) {
+        if (meta.c) {
+            for (let i = 0; i < meta.c.length; i++) {
+                if (meta.c[i][2][0].length === 0)
+                    return true;
+            }
+        }
+        if (meta.r) {
+            for (let i = 0; i < meta.r.length; i++) {
+                if (meta.r[i][3][0].length === 0)
+                    return true;
+            }
+        }
+        return false;
+    }
     $hydrateCondContent(condAnchor, blockMeta, scope) {
         const rootTag = this.$rootTag(blockMeta);
         const tplDom = getTemplateDom(blockMeta);
-        if (rootTag && tplDom.children.length === 1) {
+        if (rootTag && tplDom.children.length === 1 && !this.$hasRootStructuralSlot(blockMeta)) {
             const el = nextElement(condAnchor);
             if (el) {
                 return this.$hydrate(el, blockMeta, tplDom, scope, 1);
             }
             return null;
         }
-        const condNodes = this.$collectBetween(condAnchor, MARKER_COND_END);
+        const condNodes = this.$collectConditionalRange(condAnchor);
         if (condNodes.length === 0)
             return null;
         const wrapper = document.createElement('div');
@@ -828,6 +999,9 @@ export class TemplateElement extends HTMLElement {
             condAnchor.parentNode?.insertBefore(inst.nodes[cn], afterNode.nextSibling);
             afterNode = inst.nodes[cn];
         }
+        const container = condAnchor.parentNode;
+        if (container)
+            this.$replaceInstanceContainer(inst, wrapper, container);
         return inst;
     }
     $findMarker(parent, data, after) {
@@ -840,16 +1014,6 @@ export class TemplateElement extends HTMLElement {
         }
         return null;
     }
-    $hasContentAfterMarker(anchor, endData) {
-        let sibling = anchor.nextSibling;
-        while (sibling) {
-            if (sibling.nodeType === 8 && sibling.data === endData) {
-                return false;
-            }
-            return true;
-        }
-        return false;
-    }
     $findSSRText(ssrParent, tplParent, beforeIndex) {
         const ordinals = getTplOrdinals(tplParent);
         let textOrd = 0;
@@ -926,32 +1090,6 @@ export class TemplateElement extends HTMLElement {
             return { element: el, name, kind, parts: entry[2], scope };
         return { element: el, name, kind: kind, path: entry[2] || '', scope };
     }
-    $repeatMaps(blockIndex, itemVar) {
-        let keyAttribute;
-        let keyPath;
-        const bm = this.$block(blockIndex);
-        if (bm?.a && bm.ag) {
-            for (let g = 0; g < bm.ag.length; g++) {
-                const [tp, s, c] = bm.ag[g];
-                const isRoot = tp.length === 0 || (tp.length === 1 && tp[0] === 0);
-                if (isRoot) {
-                    for (let j = 0; j < c; j++) {
-                        const entry = bm.a[s + j];
-                        if (entry) {
-                            if (entry[1] === 0 || entry[1] === 3) {
-                                const dp = this.$singleDynamic(entry[1] === 3 ? entry[2] : [[entry[2]]]);
-                                if (dp && keyPath === undefined && dp.path.startsWith(itemVar + '.')) {
-                                    keyAttribute = entry[0];
-                                    keyPath = dp.path.slice(itemVar.length + 1);
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-        return { keyAttribute, keyPath };
-    }
     $buildPathIndex() {
         if (!this.$root)
             return;
@@ -1025,7 +1163,7 @@ export class TemplateElement extends HTMLElement {
                     ensure(keyFor(rep.collection)).repeats.push(rep);
                 }
                 for (let i = 0; i < rep.instances.length; i++) {
-                    visit(rep.instances[i].instance);
+                    visit(rep.instances[i]);
                 }
             }
         };
@@ -1041,16 +1179,37 @@ export class TemplateElement extends HTMLElement {
         this.$pathIndex = index;
     }
     $updateBindings(texts, attrs, conds, repeats) {
-        for (let i = 0; i < texts.length; i++)
-            this.$patchText(texts[i]);
-        for (let i = 0; i < attrs.length; i++)
-            this.$patchAttr(attrs[i]);
-        for (let i = 0; i < conds.length; i++)
-            this.$toggleCond(conds[i]);
+        const gated = this.$hasUnknownScopes;
+        for (let i = 0; i < texts.length; i++) {
+            const binding = texts[i];
+            if (!gated || !binding.scope || this.$scopeIsKnown(binding.scope))
+                this.$patchText(binding);
+        }
+        for (let i = 0; i < attrs.length; i++) {
+            const binding = attrs[i];
+            if (!gated || !binding.scope || this.$scopeIsKnown(binding.scope))
+                this.$patchAttr(binding);
+        }
+        for (let i = 0; i < conds.length; i++) {
+            const binding = conds[i];
+            if (!gated || !binding.scope || this.$scopeIsKnown(binding.scope))
+                this.$toggleCond(binding);
+        }
         for (let i = 0; i < repeats.length; i++) {
-            syncRepeat(this, repeats[i]);
+            const binding = repeats[i];
+            if (!gated || !binding.scope || this.$scopeIsKnown(binding.scope))
+                syncRepeat(this, binding);
         }
     }
+    $scopeIsKnown(scope) {
+        let frame = scope;
+        while (frame) {
+            if (frame.known === false)
+                return false;
+            frame = frame.parent;
+        }
+        return true;
+    }
     $updateInstance(instance) {
         this.$updateBindings(instance.texts, instance.attrs, instance.conds, instance.repeats);
     }
@@ -1099,7 +1258,8 @@ export class TemplateElement extends HTMLElement {
                     el.setAttribute(b.name, '');
                 else
                     el.removeAttribute(b.name);
-                if (b.name === 'checked' || b.name === 'selected' || b.name === 'disabled') {
+                if ((b.name === 'checked' || b.name === 'selected' || b.name === 'disabled')
+                    && hasNativeLiveProperty(el, b.name)) {
                     el[b.name] = show;
                 }
                 break;
@@ -1113,12 +1273,14 @@ export class TemplateElement extends HTMLElement {
             default: {
                 const v = this.$resolveValue(b.path, b.scope);
                 const s = v == null ? '' : String(v);
-                if (b.name === 'checked' || b.name === 'selected') {
+                if ((b.name === 'checked' || b.name === 'selected')
+                    && hasNativeLiveProperty(el, b.name)) {
                     el[b.name] = !!v && v !== 'false' && v !== '0';
                 }
-                else if (b.name === 'value') {
-                    if (el.value !== s)
-                        el.value = s;
+                else if (b.name === 'value' && hasNativeLiveProperty(el, b.name)) {
+                    const target = el;
+                    if (target.value !== s)
+                        target.value = s;
                 }
                 else {
                     if (el.getAttribute(b.name) !== s)
@@ -1131,22 +1293,25 @@ export class TemplateElement extends HTMLElement {
     $toggleCond(c) {
         const show = c.condition[0](this.$resolver, c.scope);
         if (show) {
+            let created = false;
+            const container = c.anchor.parentNode;
             if (!c.instance) {
-                c.instance = this.$createBlockInstance(c.blockIndex, c.scope);
-                if (c.instance) {
-                    const frag = document.createDocumentFragment();
-                    for (const n of c.instance.nodes)
-                        frag.appendChild(n);
-                    c.anchor.parentNode?.insertBefore(frag, c.anchor.nextSibling);
-                }
+                c.instance = this.$createBlockInstance(c.blockIndex, c.scope, c.owner, container ?? undefined);
+                created = c.instance !== null;
             }
             else {
                 this.$updateInstance(c.instance);
             }
+            if (c.instance && container) {
+                this.$insertInstanceAfter(c.anchor, container, c.instance);
+                if (created)
+                    this.$changeStructure();
+            }
         }
         else if (c.instance) {
             this.$removeInstance(c.instance);
             c.instance = null;
+            this.$changeStructure(c.owner);
         }
     }
     $resolveValue(path, scope) {
@@ -1164,6 +1329,23 @@ export class TemplateElement extends HTMLElement {
             return this.$resolveComponentRoot(path);
         return dotWalk(this.$resolveComponentRoot(path.substring(0, dot)), path, dot + 1);
     }
+    $hasStateRoot(path, scope) {
+        let frame = scope;
+        while (frame) {
+            if (path === frame.name
+                || (path.length > frame.name.length
+                    && path.charCodeAt(frame.name.length) === 46
+                    && path.startsWith(frame.name))) {
+                return frame.value !== undefined;
+            }
+            frame = frame.parent;
+        }
+        const dot = path.indexOf('.');
+        const root = dot === -1 ? path : path.substring(0, dot);
+        return hasAuthoredMember(this, root)
+            || (this.$templateState !== null
+                && Object.prototype.hasOwnProperty.call(this.$templateState, root));
+    }
     $resolveComponentRoot(root) {
         const instance = this;
         if (this.$templateState &&
@@ -1189,64 +1371,92 @@ export class TemplateElement extends HTMLElement {
     $block(blockIndex) {
         return this.$meta?.b?.[blockIndex];
     }
-    $createBlockInstance(blockIndex, scope) {
+    $createBlockInstance(blockIndex, scope, parent, container) {
         const bm = this.$block(blockIndex);
         if (!bm)
             return null;
         const wrapper = this.$createStagingRoot(bm);
         const inst = this.$wire(wrapper, bm, scope);
+        inst.parent = parent;
         inst.nodes = childNodesArray(wrapper);
         this.$updateInstance(inst);
         if (inst.repeats.length !== 0 || inst.conds.length !== 0) {
             inst.nodes = childNodesArray(wrapper);
-            this.$releaseStagingRepeatContainers(inst, wrapper);
+            this.$replaceInstanceContainer(inst, wrapper, container ?? null);
+        }
+        else if (container) {
+            inst.container = container;
         }
         return inst;
     }
     $removeInstance(instance) {
-        this.$teardownInstanceCleanups(instance);
-        for (const n of instance.nodes)
-            n.parentNode?.removeChild(n);
-        for (const c of instance.conds) {
-            if (c.instance)
-                this.$removeInstance(c.instance);
+        this.$disposeInstance(instance, true);
+    }
+    $disposeInstance(root, removeNodes) {
+        const stack = [root];
+        while (stack.length > 0) {
+            const instance = stack.pop();
+            if (!instance)
+                continue;
+            const cleanups = instance.cleanups;
+            if (cleanups) {
+                for (const cleanup of cleanups)
+                    cleanup();
+                cleanups.length = 0;
+            }
+            if (removeNodes) {
+                for (const node of instance.nodes)
+                    node.parentNode?.removeChild(node);
+            }
+            for (const binding of instance.conds) {
+                if (binding.instance)
+                    stack.push(binding.instance);
+                binding.instance = null;
+            }
+            for (const repeat of instance.repeats) {
+                for (const child of repeat.instances)
+                    stack.push(child);
+                this.$clearRepeatBinding(repeat);
+            }
+            this.$clearInstance(instance);
         }
-        for (const r of instance.repeats) {
-            for (const item of r.instances)
-                this.$removeInstance(item.instance);
+    }
+    $compactNodeArray(instance) {
+        const container = instance.container;
+        if (!container)
+            return;
+        const nodes = instance.nodes;
+        let write = 0;
+        for (let read = 0; read < nodes.length; read++) {
+            const node = nodes[read];
+            if (node.parentNode === container) {
+                nodes[write] = node;
+                write++;
+            }
         }
+        nodes.length = write;
+    }
+    $changeStructure(removedFrom) {
+        if (removedFrom) {
+            let current = removedFrom;
+            while (current) {
+                this.$compactNodeArray(current);
+                current = current.parent;
+            }
+        }
+        this.$pathIndex = undefined;
+        this.$wildcardBindings = undefined;
     }
     $insertInstanceAfter(cursor, container, instance) {
+        this.$replaceInstanceContainer(instance, instance.container, container);
         const nodes = instance.nodes;
         if (nodes.length === 0)
             return cursor;
         const ref = cursor ? cursor.nextSibling : container.firstChild;
         if (nodes[0] === ref)
             return nodes[nodes.length - 1];
-        const frag = document.createDocumentFragment();
         for (let i = 0; i < nodes.length; i++)
-            frag.appendChild(nodes[i]);
-        container.insertBefore(frag, ref);
+            container.insertBefore(nodes[i], ref);
         return nodes[nodes.length - 1];
     }
-    $singleDynamic(parts) {
-        let path = '';
-        let prefix = '';
-        let suffix = '';
-        let seen = false;
-        for (const p of parts) {
-            if (typeof p === 'string') {
-                if (seen)
-                    suffix += p;
-                else
-                    prefix += p;
-                continue;
-            }
-            if (seen)
-                return null;
-            path = p[0];
-            seen = true;
-        }
-        return seen ? { path, prefix, suffix } : null;
-    }
 }