@microsoft/webui-framework 0.0.25 → 0.0.27

package/dist/template-element.js

@@ -1,17 +1,36 @@
 import { deferTemplateDefinition, getTemplate } from './template.js';
+import { cloneTemplateContent, } from './template-content.js';
 import { hydrationStart, hydrationEnd } from './lifecycle.js';
-import { isStreamingHydrationMode, PENDING_ROOT_CONNECTED, STREAMED_HOST_ATTR, STREAMING_BOUNDARY_ACTIVATE, } from './streaming-mode.js';
+import { ACTIVATION_ACTIVATED, ACTIVATION_ANCESTOR_BARRIER, ACTIVATION_MISSING_TEMPLATE, ACTIVATION_STATIC_HOST_OPT_OUT, 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, buildSSRIndex, collectTemplateElements, MARKER_COND_START, MARKER_COND_END, } from './element/markers.js';
-import { injectModuleStyle, } from './element/styles.js';
+import { collectItemMarkers, nextElement, findByOrdinal, buildSSRIndex, collectTemplateElements, MARKER_COND_START, MARKER_COND_END, rawMarker, } from './element/markers.js';
+import { claimSsrComponentStyles, installComponentStyles, isComponentStyleMarker, } from './element/styles.js';
+import { cancelTemplateLinkStyleMount, installTemplateLinkStyles, prepareTemplateLinkStyles, templateMayContainLinkStyles, } from './element/link-styles.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();
-const templateDOMCache = new WeakMap();
 const rootTagCache = new WeakMap();
+const templateDOMCache = new WeakMap();
 const tplOrdinalCache = new WeakMap();
+const textMarkerBoundaryCache = new WeakMap();
+const NO_TEXT_MARKER_BOUNDARIES = new Int32Array(0);
+const RAW_MARKER_BOUNDARY_BASE = 0x40000000;
 const tplElementCache = new WeakMap();
+function comparePendingSlots(left, right) {
+    return left.order - right.order;
+}
+function insertPendingSlots(slots, count, needsOrdering) {
+    if (needsOrdering) {
+        slots.length = count;
+        slots.sort(comparePendingSlots);
+    }
+    for (let i = 0; i < count; i++) {
+        const slot = slots[i];
+        slot.parent.insertBefore(slot.node, slot.before);
+        if (slot.end)
+            slot.parent.insertBefore(slot.end, slot.before);
+    }
+}
 function getTemplateElements(tplRoot) {
     let cached = tplElementCache.get(tplRoot);
     if (!cached) {
@@ -27,6 +46,7 @@ function getTplOrdinals(tplNode) {
     map = new Map();
     let elemOrd = 0;
     let textOrd = 0;
+    let commentOrd = 0;
     const children = tplNode.childNodes;
     for (let k = 0; k < children.length; k++) {
         const type = children[k].nodeType;
@@ -38,20 +58,61 @@ function getTplOrdinals(tplNode) {
             map.set(k, [3, textOrd]);
             textOrd++;
         }
+        else if (type === 8) {
+            map.set(k, [8, commentOrd]);
+            commentOrd++;
+        }
     }
     tplOrdinalCache.set(tplNode, map);
     return map;
 }
+function slotKey(slot, orderOffset = 0) {
+    return `${slot[0]},${slot[1]},${(slot[2] ?? 0) + orderOffset}`;
+}
+function getTextMarkerBoundaries(meta) {
+    const cached = textMarkerBoundaryCache.get(meta);
+    if (cached)
+        return cached;
+    const texts = meta.tx;
+    if (!texts) {
+        textMarkerBoundaryCache.set(meta, NO_TEXT_MARKER_BOUNDARIES);
+        return NO_TEXT_MARKER_BOUNDARIES;
+    }
+    const markers = new Map();
+    if (meta.c) {
+        for (let i = 0; i < meta.c.length; i++) {
+            markers.set(slotKey(meta.c[i][2]), i + 1);
+        }
+    }
+    if (meta.r) {
+        for (let i = 0; i < meta.r.length; i++) {
+            markers.set(slotKey(meta.r[i][3]), -(i + 1));
+        }
+    }
+    let rawIndex = 0;
+    for (let i = 0; i < texts.length; i++) {
+        if (texts[i][2] !== 1)
+            continue;
+        markers.set(slotKey(texts[i][0]), RAW_MARKER_BOUNDARY_BASE + rawIndex + 1);
+        rawIndex++;
+    }
+    const boundaries = new Int32Array(texts.length);
+    for (let i = 0; i < texts.length; i++) {
+        boundaries[i] = markers.get(slotKey(texts[i][0], 1)) ?? 0;
+    }
+    textMarkerBoundaryCache.set(meta, boundaries);
+    return boundaries;
+}
 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();
 const pendingAncestorDescendants = new WeakMap();
 const pendingParentStateByElement = new WeakMap();
+function bindingArray(count) {
+    return count > 0 ? [] : EMPTY_ARR;
+}
 function queuePendingParentState(element, name, value, replayAfterHydration) {
     let pending = pendingParentStateByElement.get(element);
     if (!pending) {
@@ -65,6 +126,12 @@ function queuePendingParentState(element, name, value, replayAfterHydration) {
         (pending.replay ??= new Set()).add(name);
     }
 }
+export function consumePendingParentState(element) {
+    const pending = pendingParentStateByElement.get(element);
+    if (pending)
+        pendingParentStateByElement.delete(element);
+    return pending;
+}
 function isUnupgradedWebUITarget(element) {
     const tagName = element.localName;
     if (tagName.indexOf('-') === -1)
@@ -129,6 +196,11 @@ function installTemplateObservedAttributes(ctor, tagName, meta = getTemplate(tag
 }
 function defineTemplateConstructor(ctor, tagName, meta) {
     installTemplateObservedAttributes(ctor, tagName, meta);
+    if (meta) {
+        const ready = prepareTemplateLinkStyles(meta);
+        if (ready)
+            void ready;
+    }
     customElements.define(tagName, ctor);
 }
 function hasAuthoredMember(instance, key) {
@@ -148,6 +220,8 @@ export class TemplateElement extends HTMLElement {
         this.$root = null;
         this.$ready = false;
         this.$hydrated = false;
+        this.$deferredClientMount = false;
+        this.$resetClientShadow = false;
         this.$hasMounted = false;
         this.$deferredSSR = false;
         this.$activatingDeferredSSR = false;
@@ -156,7 +230,6 @@ export class TemplateElement extends HTMLElement {
         this.$dirtyPaths = null;
         this.$pendingFlush = false;
         this.$preReadyWrites = null;
-        this.$resolver = (p, s) => this.$resolveValue(p, s);
     }
     static { this.$ancestorReleaseQueue = []; }
     static { this.$ancestorReleaseIndex = 0; }
@@ -170,7 +243,7 @@ export class TemplateElement extends HTMLElement {
         this.$afterExternalStateWrite(owned);
         return owned;
     }
-    [STREAMING_BOUNDARY_ACTIVATE](state) {
+    [STREAMING_BOUNDARY_ACTIVATE](state, bypassAncestor) {
         if (!this.$deferredSSR && this.hasAttribute(STREAMED_HOST_ATTR)) {
             this.$deferredSSR = true;
             this.$ready = true;
@@ -182,16 +255,20 @@ export class TemplateElement extends HTMLElement {
             return ACTIVATION_MISSING_TEMPLATE;
         }
         this.$meta = meta;
-        if (!this.$shouldActivateOnBoundaryCommit())
+        if (!this.$shouldActivateOnBoundaryCommit()) {
+            this.$installStyles(meta);
             return ACTIVATION_STATIC_HOST_OPT_OUT;
-        const ancestor = this.$nearestHydrationBarrier();
+        }
+        const ancestor = this.$nearestHydrationBarrier(bypassAncestor);
         if (ancestor) {
             this.$deferredByAncestor = true;
             this.$ancestorBoundaryState = state;
             this.$hasAncestorBoundaryState = true;
             this.$registerWithHydrationBarrier(ancestor);
-            return ACTIVATION_ACTIVATED;
+            return ACTIVATION_ANCESTOR_BARRIER;
         }
+        if (this.$deferredByAncestor)
+            this.$clearAncestorDeferral();
         this.$activatingDeferredSSR = true;
         try {
             this.$activateDeferredSSR(state);
@@ -202,22 +279,32 @@ export class TemplateElement extends HTMLElement {
         return ACTIVATION_ACTIVATED;
     }
     [STREAMING_BOUNDARY_ABANDON]() {
-        this.$detachDeferredAncestor();
+        this.$clearAncestorDeferral();
         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;
     }
+    $clearAncestorDeferral() {
+        this.$detachDeferredAncestor();
+        this.$deferredByAncestor = undefined;
+        this.$ancestorBoundaryState = undefined;
+        this.$hasAncestorBoundaryState = undefined;
+    }
+    $resumeRetainedRoot() {
+        const resume = this[PENDING_ROOT_CONNECTED];
+        if (typeof resume !== 'function')
+            return false;
+        resume.call(this);
+        return true;
+    }
     static define(tagName) {
         const ctor = this;
         const meta = getTemplate(tagName);
-        if (!meta && isStreamingHydrationMode()) {
+        if (!meta) {
             deferTemplateDefinition(tagName, ctor, () => {
                 defineTemplateConstructor(ctor, tagName, getTemplate(tagName));
             });
@@ -244,6 +331,8 @@ export class TemplateElement extends HTMLElement {
             return;
         }
         if (this.$hydrated && this.$root) {
+            if (this.$deferredClientMount)
+                return;
             hydrationStart();
             try {
                 this.$ready = true;
@@ -259,9 +348,8 @@ export class TemplateElement extends HTMLElement {
             this.hasAttribute(STREAMED_HOST_ATTR)) {
             this.$deferredSSR = true;
             this.$ready = true;
-            const resume = this[PENDING_ROOT_CONNECTED];
-            if (typeof resume === 'function')
-                resume.call(this);
+            if (this.$resumeRetainedRoot())
+                return;
             this.$didDeferSSRHydration();
             return;
         }
@@ -287,6 +375,8 @@ export class TemplateElement extends HTMLElement {
             return;
         const hasShadow = !!this.shadowRoot;
         const wantShadow = hasShadow || !!meta.sd;
+        const resetClientShadow = this.$resetClientShadow;
+        this.$resetClientShadow = false;
         const remountStructuralTemplate = reconnecting &&
             ((meta.c?.length ?? 0) !== 0 || (meta.r?.length ?? 0) !== 0);
         let root;
@@ -296,11 +386,18 @@ export class TemplateElement extends HTMLElement {
             const renderRoot = wantShadow
                 ? this.shadowRoot ?? this.attachShadow({ mode: 'open' })
                 : this;
-            renderRoot.replaceChildren();
+            const retainedStyles = [];
+            let child = renderRoot.firstElementChild;
+            while (child) {
+                if (isComponentStyleMarker(child))
+                    retainedStyles.push(child);
+                child = child.nextElementSibling;
+            }
+            renderRoot.replaceChildren(...retainedStyles);
             root = renderRoot;
             isSSR = false;
         }
-        else if (hasShadow) {
+        else if (hasShadow && !resetClientShadow) {
             root = this.shadowRoot;
             isSSR = true;
         }
@@ -309,16 +406,18 @@ export class TemplateElement extends HTMLElement {
             isSSR = true;
         }
         else if (wantShadow) {
-            root = this.attachShadow({ mode: 'open' });
+            const renderRoot = this.shadowRoot ?? this.attachShadow({ mode: 'open' });
+            if (resetClientShadow)
+                renderRoot.replaceChildren();
+            root = renderRoot;
             isSSR = false;
         }
         else {
             root = this;
             isSSR = false;
         }
-        if (isSSR &&
-            !forceSSR &&
-            !reconnecting) {
+        this.$installStyles(meta);
+        if (isSSR && !forceSSR && !reconnecting) {
             const ancestor = this.$nearestHydrationBarrier();
             if (ancestor) {
                 this.$meta = meta;
@@ -329,9 +428,7 @@ export class TemplateElement extends HTMLElement {
                 this.$registerWithHydrationBarrier(ancestor);
                 return;
             }
-            if (!this.$shouldDeferSSRHydration(meta)) {
-            }
-            else {
+            if (this.$shouldDeferSSRHydration(meta)) {
                 this.$meta = meta;
                 this.$deferredSSR = true;
                 this.$ready = true;
@@ -339,10 +436,9 @@ export class TemplateElement extends HTMLElement {
                 return;
             }
         }
+        let deferredHydrationFinish = false;
         hydrationStart();
         try {
-            if (meta.sa)
-                injectModuleStyle(meta.sa, this.shadowRoot);
             if (!reconnecting) {
                 if (isSSR) {
                     if (this.$shouldApplySSRBootstrapState()) {
@@ -365,6 +461,7 @@ export class TemplateElement extends HTMLElement {
             if (isSSR && this.$deferredWrites)
                 this.$replayDeferredWrites();
             if (isSSR && reconnecting) {
+                this.$invalidateRawValues(this.$root);
                 this.$updateBindings(this.$root.texts, this.$root.attrs, this.$root.conds, this.$root.repeats, true);
             }
             if (isSSR && DEV)
@@ -373,19 +470,72 @@ export class TemplateElement extends HTMLElement {
                 this.$preReadyWrites = null;
             if (!isSSR && clientRoot) {
                 this.$updateInstance(this.$root);
-                if (this.$root.repeats.length !== 0 || this.$root.conds.length !== 0) {
+                const hasStructuralBindings = this.$root.repeats.length !== 0 || this.$root.conds.length !== 0;
+                if (hasStructuralBindings) {
                     this.$root.nodes = childNodesArray(clientRoot);
+                }
+                let deferredStyles = false;
+                if (templateMayContainLinkStyles(meta)) {
+                    const stagingRoot = clientRoot;
+                    const mountedInstance = this.$root;
+                    deferredStyles = installTemplateLinkStyles(this, meta, this.shadowRoot, clientRoot, this.$root.attrs, {
+                        hasAuthorHydrationLifecycle: this.hydratedCallback !==
+                            TemplateElement.prototype.hydratedCallback,
+                        beforeAppend: () => {
+                            if (this.$root !== mountedInstance || !this.$hydrated)
+                                return;
+                            this.$updateInstance(mountedInstance);
+                            if (hasStructuralBindings) {
+                                mountedInstance.nodes = childNodesArray(stagingRoot);
+                            }
+                        },
+                        afterAppend: () => {
+                            if (this.$root !== mountedInstance || !this.$hydrated)
+                                return;
+                            this.$replaceInstanceContainer(mountedInstance, clientRoot, root);
+                            mountedInstance.container = root;
+                            this.$deferredClientMount = false;
+                            this.$ready = true;
+                            this.$finishHydration();
+                        },
+                    });
+                }
+                if (deferredStyles) {
+                    this.$deferredClientMount = true;
+                    this.$ready = false;
+                    deferredHydrationFinish = true;
+                }
+                if (!deferredStyles && hasStructuralBindings) {
                     this.$replaceInstanceContainer(this.$root, clientRoot, root);
                 }
-                this.$appendStagedChildren(root, clientRoot);
-                this.$root.container = root;
+                if (!deferredStyles)
+                    this.$appendStagedChildren(root, clientRoot);
+                if (!deferredStyles)
+                    this.$root.container = root;
             }
-            this.$finishHydration();
+            if (!deferredHydrationFinish)
+                this.$finishHydration();
         }
         finally {
             hydrationEnd();
         }
     }
+    $installStyles(meta) {
+        const wantShadow = !!this.shadowRoot || !!meta.sd;
+        const containingRoot = this.getRootNode();
+        const styleTarget = wantShadow
+            ? this.shadowRoot
+            : containingRoot.nodeType === 11 && 'host' in containingRoot
+                ? containingRoot
+                : this.ownerDocument;
+        claimSsrComponentStyles(this, styleTarget);
+        const installation = installComponentStyles(this.localName, styleTarget, this);
+        if (installation) {
+            void installation.catch((error) => {
+                console.error(error);
+            });
+        }
+    }
     disconnectedCallback() {
         this.$detachDeferredAncestor();
         if (this.$root) {
@@ -396,13 +546,14 @@ export class TemplateElement extends HTMLElement {
         }
     }
     $destroy() {
+        const shadowRoot = this.shadowRoot;
+        if (shadowRoot && cancelTemplateLinkStyleMount(shadowRoot)) {
+            this.$resetClientShadow = true;
+        }
         if (!this.$root) {
-            this.$detachDeferredAncestor();
+            this.$clearAncestorDeferral();
             this.$abandonDeferredDescendants();
             this.$deferredSSR = false;
-            this.$deferredByAncestor = undefined;
-            this.$ancestorBoundaryState = undefined;
-            this.$hasAncestorBoundaryState = undefined;
             this.$ready = false;
             this.$hasUnknownScopes = false;
             if (this.$deferredWrites)
@@ -417,6 +568,7 @@ export class TemplateElement extends HTMLElement {
         this.$pendingFlush = false;
         this.$preReadyWrites = null;
         this.$hydrated = false;
+        this.$deferredClientMount = false;
         this.$ready = false;
         this.$hasUnknownScopes = false;
     }
@@ -437,10 +589,14 @@ export class TemplateElement extends HTMLElement {
         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;
+        if (instance.texts.length > 0)
+            instance.texts.length = 0;
+        if (instance.attrs.length > 0)
+            instance.attrs.length = 0;
+        if (instance.conds.length > 0)
+            instance.conds.length = 0;
+        if (instance.repeats.length > 0)
+            instance.repeats.length = 0;
     }
     attributeChangedCallback(name, oldValue, newValue) {
         if (Object.is(oldValue, newValue))
@@ -489,7 +645,8 @@ export class TemplateElement extends HTMLElement {
     $currentTemplateMetadata() {
         return this.$meta ?? this.$templateMeta();
     }
-    $nearestHydrationBarrier() {
+    $nearestHydrationBarrier(bypassAncestor) {
+        let bypass = bypassAncestor;
         let current = this;
         while (true) {
             let parent = current.assignedSlot ?? current.parentElement;
@@ -505,6 +662,11 @@ export class TemplateElement extends HTMLElement {
             }
             if (!parent)
                 return undefined;
+            if (parent === bypass) {
+                bypass = undefined;
+                current = parent;
+                continue;
+            }
             if (parent instanceof TemplateElement) {
                 const parentMeta = parent.$meta ?? parent.$templateMeta();
                 if (parentMeta?.th) {
@@ -633,6 +795,8 @@ export class TemplateElement extends HTMLElement {
         const boundaryState = this.$ancestorBoundaryState;
         this.$hasAncestorBoundaryState = undefined;
         this.$ancestorBoundaryState = undefined;
+        if (this.$resumeRetainedRoot())
+            return;
         const meta = this.$meta;
         if (meta && this.$shouldDeferSSRHydration(meta)) {
             if (hasBoundaryState) {
@@ -802,10 +966,9 @@ export class TemplateElement extends HTMLElement {
         }
     }
     $applyPendingParentState(replayAfterHydration) {
-        const pending = pendingParentStateByElement.get(this);
+        const pending = consumePendingParentState(this);
         if (!pending)
             return;
-        pendingParentStateByElement.delete(this);
         const state = pending.values;
         const observableNames = this.$observableNames();
         const keys = Object.keys(state);
@@ -835,6 +998,8 @@ export class TemplateElement extends HTMLElement {
     }
     $update(path) {
         if (!this.$ready || !this.$root) {
+            if (this.$deferredClientMount)
+                return;
             if (path && this.$deferredSSR)
                 this.$recordDeferredWrite(path);
             if (DEV && path && this.isConnected)
@@ -933,7 +1098,7 @@ export class TemplateElement extends HTMLElement {
         if (!index)
             return;
         const ctx = {
-            resolver: this.$resolver,
+            resolver: this.$conditionResolver(),
             resolveParts: (parts, scope) => this.$resolveParts(parts, scope),
             resolveValue: (path, scope) => this.$resolveValue(path, scope),
         };
@@ -941,13 +1106,7 @@ export class TemplateElement extends HTMLElement {
         void import('./hydration-mismatch.js').then((m) => m.reportHydrationMismatch(tag, writes, index, ctx));
     }
     $parseTemplate(meta) {
-        let cached = templateCache.get(meta);
-        if (cached)
-            return cached.cloneNode(true);
-        const tpl = document.createElement('template');
-        tpl.innerHTML = meta.h;
-        templateCache.set(meta, tpl.content);
-        return tpl.content.cloneNode(true);
+        return cloneTemplateContent(meta);
     }
     $createStagingRoot(meta) {
         const wrapper = document.createElement('div');
@@ -998,102 +1157,113 @@ export class TemplateElement extends HTMLElement {
     $wire(root, meta, scope) {
         const instance = {
             scope, container: root, nodes: childNodesArray(root),
-            texts: [], attrs: [], conds: [], repeats: [],
+            texts: bindingArray(meta.tx?.length ?? 0),
+            attrs: bindingArray(meta.a?.length ?? 0),
+            conds: bindingArray(meta.c?.length ?? 0),
+            repeats: bindingArray(meta.r?.length ?? 0),
         };
         const elements = collectTemplateElements(root);
-        const textRefs = new Array(meta.tx?.length ?? 0);
-        let textRefCount = 0;
+        const pendingSlots = new Array((meta.tx?.length ?? 0) + (meta.c?.length ?? 0) + (meta.r?.length ?? 0));
+        let pendingSlotCount = 0;
+        let needsSlotOrdering = false;
+        let rawIndex = 0;
         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 [parentIndex, beforeIndex] = slot;
+                const [parentIndex, beforeIndex, order = 0] = slot;
                 const parent = elements[parentIndex];
                 if (!parent || (parent.nodeType !== 1 && parent.nodeType !== 11))
                     continue;
-                textRefs[textRefCount] = { parent, ref: parent.childNodes[beforeIndex] || null, parts, raw };
-                textRefCount += 1;
+                let node;
+                let end;
+                if (raw) {
+                    const start = document.createComment(rawMarker(rawIndex));
+                    end = document.createComment(rawMarker(rawIndex, true));
+                    rawIndex++;
+                    instance.texts.push({
+                        node: start,
+                        parts,
+                        scope,
+                        raw: true,
+                        rawEnd: end,
+                        rawOwner: instance,
+                    });
+                    node = start;
+                }
+                else {
+                    const textNode = document.createTextNode('');
+                    instance.texts.push({ node: textNode, parts, scope });
+                    node = textNode;
+                }
+                pendingSlots[pendingSlotCount++] = {
+                    parent,
+                    before: parent.childNodes[beforeIndex] || null,
+                    order,
+                    node,
+                    end,
+                };
+                if (order > 0)
+                    needsSlotOrdering = true;
             }
         }
-        const condRefs = new Array(meta.c?.length ?? 0);
-        let condRefCount = 0;
         if (meta.c) {
             for (let i = 0; i < meta.c.length; i++) {
                 const [condition, blockIndex, slotMeta] = meta.c[i];
-                const [parentIndex, beforeIndex] = slotMeta;
+                const [parentIndex, beforeIndex, order = 0] = 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 };
-                condRefCount += 1;
+                const anchor = document.createComment('');
+                instance.conds.push({
+                    condition: condition,
+                    blockIndex,
+                    anchor,
+                    scope,
+                    owner: instance,
+                    instance: null,
+                });
+                pendingSlots[pendingSlotCount++] = {
+                    parent,
+                    before: parent.childNodes[beforeIndex] || null,
+                    order,
+                    node: anchor,
+                };
+                if (order > 0)
+                    needsSlotOrdering = true;
             }
         }
-        const repRefs = new Array(meta.r?.length ?? 0);
-        let repRefCount = 0;
         if (meta.r) {
             for (let i = 0; i < meta.r.length; i++) {
                 const [collection, itemVar, blockIndex, slotMeta, keyPath] = meta.r[i];
-                const [parentIndex, beforeIndex] = slotMeta;
+                const [parentIndex, beforeIndex, order = 0] = slotMeta;
                 const parent = elements[parentIndex];
                 if (!parent || (parent.nodeType !== 1 && parent.nodeType !== 11))
                     continue;
-                repRefs[repRefCount] = {
+                const anchor = document.createComment('');
+                const binding = {
+                    markerId: i, collection, itemVar, blockIndex,
+                    container: parent, start: anchor, end: null,
+                    scope, owner: instance, instances: [],
+                };
+                if (keyPath !== undefined) {
+                    binding.keyState = createRepeatKeyState(keyPath);
+                }
+                instance.repeats.push(binding);
+                pendingSlots[pendingSlotCount++] = {
                     parent,
-                    ref: parent.childNodes[beforeIndex] || null,
-                    collection,
-                    itemVar,
-                    blockIndex,
-                    keyPath,
+                    before: parent.childNodes[beforeIndex] || null,
+                    order,
+                    node: anchor,
                 };
-                repRefCount += 1;
+                if (order > 0)
+                    needsSlotOrdering = true;
             }
         }
         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('');
-            t.parent.insertBefore(anchor, t.ref);
-            if (t.raw) {
-                const container = document.createElement('span');
-                t.parent.insertBefore(container, anchor);
-                const textNode = document.createTextNode('');
-                instance.texts.push({ node: textNode, parts: t.parts, scope, raw: true, rawParent: container });
-            }
-            else {
-                const textNode = document.createTextNode('');
-                t.parent.insertBefore(textNode, anchor);
-                instance.texts.push({ node: textNode, parts: t.parts, scope });
-            }
-        }
-        for (let i = 0; i < condRefCount; i++) {
-            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,
-                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 binding = {
-                markerId: i, collection: r.collection, itemVar: r.itemVar, blockIndex: r.blockIndex,
-                container: r.parent, start: anchor, end: null,
-                scope, owner: instance, instances: [],
-            };
-            if (r.keyPath !== undefined) {
-                binding.keyState = createRepeatKeyState(r.keyPath);
-            }
-            instance.repeats.push(binding);
-        }
+        insertPendingSlots(pendingSlots, pendingSlotCount, needsSlotOrdering);
         for (let i = 0; i < instance.conds.length; i++)
             this.$toggleCond(instance.conds[i]);
         return instance;
@@ -1103,18 +1273,31 @@ export class TemplateElement extends HTMLElement {
             scope,
             container: (pathStart > 0 ? ssrRoot.parentNode : ssrRoot),
             nodes: pathStart > 0 ? [ssrRoot] : childNodesArray(ssrRoot),
-            texts: [], attrs: [], conds: [], repeats: [],
+            texts: bindingArray(meta.tx?.length ?? 0),
+            attrs: bindingArray(meta.a?.length ?? 0),
+            conds: bindingArray(meta.c?.length ?? 0),
+            repeats: bindingArray(meta.r?.length ?? 0),
         };
         const staleMarkers = [];
-        const ssrIndex = buildSSRIndex(tplDom, ssrRoot, meta.c !== undefined || meta.r !== undefined, pathStart > 0);
+        let rawTextCount = 0;
+        if (meta.tx) {
+            for (let i = 0; i < meta.tx.length; i++) {
+                if (meta.tx[i][2] === 1)
+                    rawTextCount++;
+            }
+        }
+        const ssrIndex = buildSSRIndex(tplDom, ssrRoot, meta.c !== undefined || meta.r !== undefined || rawTextCount !== 0, pathStart > 0);
         const ssrElements = ssrIndex.elements;
         const tplElements = getTemplateElements(tplDom);
+        const textMarkerBoundaries = getTextMarkerBoundaries(meta);
         if (meta.tx) {
+            const rawRanges = ssrIndex.raws.length === rawTextCount ? ssrIndex.raws : null;
+            let rawIndex = 0;
             for (let i = 0; i < meta.tx.length; i++) {
                 const entry = meta.tx[i];
                 const [slot, parts] = entry;
                 const raw = entry[2] === 1;
-                const [parentIndex, beforeIndex] = slot;
+                const [parentIndex] = slot;
                 const ssrParent = ssrElements[parentIndex];
                 if (!ssrParent)
                     continue;
@@ -1122,19 +1305,37 @@ export class TemplateElement extends HTMLElement {
                 if (!tplParent)
                     continue;
                 if (raw) {
-                    const rawParent = ssrParent;
-                    const textNode = document.createTextNode('');
-                    instance.texts.push({ node: textNode, parts, scope, raw: true, rawParent });
+                    const rawRange = rawRanges?.[rawIndex++];
+                    if (!rawRange)
+                        continue;
+                    const binding = {
+                        node: rawRange[0],
+                        parts,
+                        scope,
+                        raw: true,
+                        rawEnd: rawRange[1],
+                        rawOwner: instance,
+                    };
+                    if ((!scope || this.$scopeIsKnown(scope))
+                        && this.$textStateIsKnown(binding)) {
+                        binding.rawValue = this.$resolveParts(parts, scope);
+                    }
+                    instance.texts.push(binding);
                 }
                 else {
-                    let textNode = this.$findSSRText(ssrParent, tplParent, beforeIndex);
-                    if (!textNode) {
+                    const insertRef = this.$findSSRSlotRef(ssrParent, tplParent, meta, ssrIndex, slot, textMarkerBoundaries[i] ?? 0);
+                    let previous = insertRef ? insertRef.previousSibling : ssrParent.lastChild;
+                    if (previous?.nodeType === 8
+                        && previous.data === ''
+                        && previous.previousSibling?.nodeType === 3) {
+                        previous = previous.previousSibling;
+                    }
+                    let textNode = previous?.nodeType === 3 ? previous : null;
+                    if (textNode === null) {
                         textNode = document.createTextNode('');
-                        const insertRef = this.$findSSRSlotRef(ssrParent, tplParent, beforeIndex);
                         ssrParent.insertBefore(textNode, insertRef);
                     }
-                    if (textNode)
-                        instance.texts.push({ node: textNode, parts, scope });
+                    instance.texts.push({ node: textNode, parts, scope });
                 }
             }
         }
@@ -1161,7 +1362,7 @@ export class TemplateElement extends HTMLElement {
                 if (marker && blockMeta) {
                     condInstance = this.$hydrateCondContent(condAnchor, blockMeta, scope);
                     if (condInstance)
-                        condInstance.parent = instance;
+                        this.$setInstanceParent(condInstance, instance);
                 }
                 if (marker) {
                     const lastNode = condInstance ? condInstance.nodes[condInstance.nodes.length - 1] : condAnchor;
@@ -1170,9 +1371,14 @@ export class TemplateElement extends HTMLElement {
                         staleMarkers.push(endMarker);
                     }
                 }
+                let liveAnchor = condAnchor;
+                if (condInstance && condInstance.nodes.length > 0) {
+                    staleMarkers.push(condAnchor);
+                    liveAnchor = null;
+                }
                 instance.conds.push({
                     condition: condition, blockIndex,
-                    anchor: condAnchor,
+                    anchor: liveAnchor,
                     scope, owner: instance, instance: condInstance,
                 });
             }
@@ -1186,7 +1392,10 @@ export class TemplateElement extends HTMLElement {
                 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
+                const rootTag = blockMeta
+                    && blockTplDom?.childNodes.length === 1
+                    && blockTplDom.children.length === 1
+                    && !this.$hasRootStructuralSlot(blockMeta)
                     ? this.$rootTag(blockMeta)
                     : null;
                 let anchor;
@@ -1229,7 +1438,7 @@ export class TemplateElement extends HTMLElement {
                             const itemEl = nextElement(itemMarkers[j]);
                             if (itemEl) {
                                 const childInstance = this.$hydrate(itemEl, blockMeta, blockTplDom, itemScope, 1);
-                                childInstance.parent = instance;
+                                this.$setInstanceParent(childInstance, instance);
                                 repeatInsts.push(childInstance);
                             }
                         }
@@ -1244,7 +1453,6 @@ 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++) {
@@ -1255,6 +1463,7 @@ export class TemplateElement extends HTMLElement {
                             if (itemParent) {
                                 this.$replaceInstanceContainer(inst, wrapper, itemParent);
                             }
+                            this.$setInstanceParent(inst, instance);
                             repeatInsts.push(inst);
                         }
                     }
@@ -1321,6 +1530,12 @@ export class TemplateElement extends HTMLElement {
                     return true;
             }
         }
+        if (meta.tx) {
+            for (let i = 0; i < meta.tx.length; i++) {
+                if (meta.tx[i][2] === 1 && meta.tx[i][0][0] === 0)
+                    return true;
+            }
+        }
         return false;
     }
     $hydrateCondContent(condAnchor, blockMeta, scope) {
@@ -1351,27 +1566,25 @@ export class TemplateElement extends HTMLElement {
             this.$replaceInstanceContainer(inst, wrapper, container);
         return inst;
     }
-    $findSSRText(ssrParent, tplParent, beforeIndex) {
-        const ordinals = getTplOrdinals(tplParent);
-        let textOrd = 0;
-        for (let k = 0; k < beforeIndex; k++) {
-            const entry = ordinals.get(k);
-            if (entry && entry[0] === 3)
-                textOrd++;
-        }
-        const found = findByOrdinal(ssrParent, 3, textOrd);
-        if (found)
-            return found;
-        let child = ssrParent.firstChild;
-        while (child) {
-            if (child.nodeType === 3 && child.data && child.data.trim()) {
-                return child;
-            }
-            child = child.nextSibling;
-        }
-        return null;
-    }
-    $findSSRSlotRef(ssrParent, tplParent, beforeIndex) {
+    $findSSRSlotRef(ssrParent, tplParent, meta, ssrIndex, slot, markerBoundary) {
+        const [, beforeIndex] = slot;
+        let marker = null;
+        if (markerBoundary >= RAW_MARKER_BOUNDARY_BASE) {
+            marker =
+                ssrIndex.raws[markerBoundary - RAW_MARKER_BOUNDARY_BASE - 1]?.[0] ?? null;
+        }
+        else if (markerBoundary > 0
+            && meta.c
+            && ssrIndex.conds.length === meta.c.length) {
+            marker = ssrIndex.conds[markerBoundary - 1];
+        }
+        else if (markerBoundary < 0
+            && meta.r
+            && ssrIndex.repeats.length === meta.r.length) {
+            marker = ssrIndex.repeats[-markerBoundary - 1];
+        }
+        if (marker?.parentNode === ssrParent)
+            return marker;
         const ordinals = getTplOrdinals(tplParent);
         const children = tplParent.childNodes;
         for (let i = beforeIndex; i < children.length; i++) {
@@ -1582,6 +1795,29 @@ export class TemplateElement extends HTMLElement {
             return this.$partsAreKnown(binding.parts, binding.scope);
         return !binding.path || this.$hasStateRoot(binding.path, binding.scope);
     }
+    $invalidateRawValues(root) {
+        const stack = [root];
+        while (stack.length > 0) {
+            const instance = stack.pop();
+            if (!instance)
+                continue;
+            for (let i = 0; i < instance.texts.length; i++) {
+                const binding = instance.texts[i];
+                if (binding.raw)
+                    binding.rawValue = undefined;
+            }
+            for (let i = 0; i < instance.conds.length; i++) {
+                const child = instance.conds[i].instance;
+                if (child)
+                    stack.push(child);
+            }
+            for (let i = 0; i < instance.repeats.length; i++) {
+                const children = instance.repeats[i].instances;
+                for (let j = 0; j < children.length; j++)
+                    stack.push(children[j]);
+            }
+        }
+    }
     $attrStateIsKnown(binding) {
         if (binding.path && !this.$hasStateRoot(binding.path, binding.scope))
             return false;
@@ -1629,9 +1865,39 @@ export class TemplateElement extends HTMLElement {
         else {
             return;
         }
-        if (b.raw && b.rawParent) {
-            if (b.rawParent.innerHTML !== val)
-                b.rawParent.innerHTML = val;
+        if (b.raw && b.rawEnd) {
+            if (b.rawValue === val)
+                return;
+            const range = document.createRange();
+            range.setStartAfter(b.node);
+            range.setEndBefore(b.rawEnd);
+            range.deleteContents();
+            let rawNodes;
+            const rawOwner = b.rawOwner;
+            if (val !== '') {
+                const fragment = range.createContextualFragment(val);
+                if (rawOwner && b.node.parentNode === rawOwner.container) {
+                    rawNodes = childNodesArray(fragment);
+                }
+                range.insertNode(fragment);
+            }
+            else if (rawOwner && b.node.parentNode === rawOwner.container) {
+                rawNodes = [];
+            }
+            if (rawNodes && rawOwner) {
+                const container = b.node.parentNode;
+                let owner = rawOwner;
+                while (owner && owner.container === container) {
+                    const ownerNodes = owner.nodes;
+                    const startIndex = ownerNodes.indexOf(b.node);
+                    const endIndex = ownerNodes.indexOf(b.rawEnd, startIndex + 1);
+                    if (startIndex >= 0 && endIndex > startIndex) {
+                        ownerNodes.splice(startIndex + 1, endIndex - startIndex - 1, ...rawNodes);
+                    }
+                    owner = owner.parent;
+                }
+            }
+            b.rawValue = val;
         }
         else {
             if (b.node.data !== val)
@@ -1647,7 +1913,7 @@ export class TemplateElement extends HTMLElement {
                 break;
             }
             case ATTR_KIND_BOOLEAN: {
-                const show = b.condition[0](this.$resolver, b.scope);
+                const show = b.condition[0](this.$conditionResolver(), b.scope);
                 if (show)
                     el.setAttribute(b.name, '');
                 else
@@ -1684,28 +1950,68 @@ export class TemplateElement extends HTMLElement {
             }
         }
     }
+    $swapOwnedRange(owner, current, replacement) {
+        const currentIsRange = Array.isArray(current);
+        const first = currentIsRange ? current[0] : current;
+        if (!first)
+            return;
+        const count = currentIsRange ? current.length : 1;
+        const last = currentIsRange ? current[count - 1] : first;
+        const container = first.parentNode;
+        let instance = owner;
+        while (container && instance && instance.container === container) {
+            const nodes = instance.nodes;
+            const index = nodes.indexOf(first);
+            if (index >= 0 && nodes[index + count - 1] === last) {
+                if (Array.isArray(replacement)) {
+                    nodes.splice(index, count, ...replacement);
+                }
+                else {
+                    nodes.splice(index, count, replacement);
+                }
+            }
+            instance = instance.parent;
+        }
+    }
     $toggleCond(c) {
-        const show = c.condition[0](this.$resolver, c.scope);
+        const show = c.condition[0](this.$conditionResolver(), c.scope);
         if (show) {
-            let created = false;
-            const container = c.anchor.parentNode;
-            if (!c.instance) {
-                c.instance = this.$createBlockInstance(c.blockIndex, c.scope, c.owner, container ?? undefined);
-                created = c.instance !== null;
-            }
-            else {
+            if (c.instance) {
                 this.$updateInstance(c.instance);
+                return;
             }
-            if (c.instance && container) {
-                this.$insertInstanceAfter(c.anchor, container, c.instance);
-                if (created)
-                    this.$changeStructure();
+            const anchor = c.anchor;
+            const container = anchor?.parentNode;
+            if (!anchor || !container)
+                return;
+            const instance = this.$createBlockInstance(c.blockIndex, c.scope, c.owner, container);
+            if (!instance)
+                return;
+            c.instance = instance;
+            const nodes = instance.nodes;
+            this.$insertInstanceAfter(anchor, container, instance);
+            if (nodes.length > 0) {
+                this.$swapOwnedRange(c.owner, anchor, nodes);
+                anchor.remove();
+                c.anchor = null;
             }
+            this.$changeStructure();
         }
         else if (c.instance) {
-            this.$removeInstance(c.instance);
+            const instance = c.instance;
+            const block = this.$block(c.blockIndex);
+            const compactOwners = !!block && this.$hasRootStructuralSlot(block);
+            const first = instance.nodes[0] ?? null;
+            const container = first?.parentNode;
+            if (first && container) {
+                const anchor = document.createComment('');
+                container.insertBefore(anchor, first);
+                this.$swapOwnedRange(c.owner, instance.nodes, anchor);
+                c.anchor = anchor;
+            }
+            this.$removeInstance(instance);
             c.instance = null;
-            this.$changeStructure(c.owner);
+            this.$changeStructure(compactOwners ? c.owner : undefined);
         }
     }
     $resolveValue(path, scope) {
@@ -1723,6 +2029,9 @@ export class TemplateElement extends HTMLElement {
             return this.$resolveComponentRoot(path);
         return dotWalk(this.$resolveComponentRoot(path.substring(0, dot)), path, dot + 1);
     }
+    $conditionResolver() {
+        return this.$resolver ??= (path, scope) => this.$resolveValue(path, scope);
+    }
     $hasStateRoot(path, scope) {
         let frame = scope;
         while (frame) {
@@ -1762,6 +2071,9 @@ export class TemplateElement extends HTMLElement {
         }
         return result;
     }
+    $setInstanceParent(instance, parent) {
+        instance.parent = parent;
+    }
     $block(blockIndex) {
         return this.$meta?.b?.[blockIndex];
     }
@@ -1771,7 +2083,6 @@ export class TemplateElement extends HTMLElement {
             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) {
@@ -1781,6 +2092,7 @@ export class TemplateElement extends HTMLElement {
         else if (container) {
             inst.container = container;
         }
+        this.$setInstanceParent(inst, parent);
         return inst;
     }
     $removeInstance(instance) {
@@ -1799,8 +2111,7 @@ export class TemplateElement extends HTMLElement {
                 cleanups.length = 0;
             }
             if (removeNodes) {
-                for (const node of instance.nodes)
-                    node.parentNode?.removeChild(node);
+                this.$removeInstanceNodes(instance);
             }
             for (const binding of instance.conds) {
                 if (binding.instance)
@@ -1815,6 +2126,11 @@ export class TemplateElement extends HTMLElement {
             this.$clearInstance(instance);
         }
     }
+    $removeInstanceNodes(instance) {
+        const nodes = instance.nodes;
+        for (let i = 0; i < nodes.length; i++)
+            nodes[i].parentNode?.removeChild(nodes[i]);
+    }
     $compactNodeArray(instance) {
         const container = instance.container;
         if (!container)