@microsoft/webui-framework 0.0.25 → 0.0.27

package/dist/streaming-deferred.js

@@ -1,22 +1,28 @@
 import { markLateActivationPending, settleLateActivation, } from './lifecycle.js';
-import { abandonDeferredDescendants, abandonDeferredElement, } from './streaming-cleanup.js';
-import { firstNodeWithin, MAX_ELEMENTS_PER_BOUNDARY, MAX_MARKER_SCAN_NODES, nextAfterSubtreeWithin, nextWithinRoot, safeRemoveAttribute, streamingErrorMessage, } from './streaming-dom.js';
-import { PENDING_ROOT_CONNECTED, STREAMED_HOST_ATTR, STREAMING_BOUNDARY_ACTIVATE, } from './streaming-mode.js';
+import { abandonDeferredDescendants, abandonDeferredElement, removeStreamingAttributes, } from './streaming-cleanup.js';
+import { firstNodeWithin, MAX_ELEMENTS_PER_BOUNDARY, MAX_MARKER_SCAN_NODES, nextAfterSubtreeWithin, nextWithinRoot, STREAMING_ENCLOSING_SPAN_ATTR, streamingErrorMessage, } from './streaming-dom.js';
+import { ACTIVATION_ACTIVATED, ACTIVATION_ANCESTOR_BARRIER, ACTIVATION_MISSING_TEMPLATE, ACTIVATION_STATIC_HOST_OPT_OUT, PENDING_ROOT_CONNECTED, STREAMED_HOST_ATTR, STREAMING_BOUNDARY_ACTIVATE, } from './streaming-mode.js';
 import { applyStateUpdate } from './streaming-state.js';
-const ACTIVATION_ACTIVATED = 1;
-const ACTIVATION_STATIC_HOST_OPT_OUT = 2;
-export const ACTIVATION_MISSING_TEMPLATE = 3;
-export const ELEMENT_IGNORED = 0;
-export const ELEMENT_DEFERRED = 4;
-export const ELEMENT_LIMIT_FAILURE = 5;
+export const ELEMENT_IGNORED = 10;
+export const ELEMENT_DEFERRED = 11;
+export const ELEMENT_LIMIT_FAILURE = 12;
+export const ELEMENT_ACTIVATED_FROM_PENDING = 13;
+export const ELEMENT_BARRIER_LIMIT_FAILURE = 14;
+export const ELEMENT_INVALID_OUTCOME = 15;
 export const MAX_PENDING_UNDEFINED_ROOTS = 50_000;
+export const MAX_PENDING_BARRIER_ROOTS = 50_000;
+function retainsBoundaryUpdates(el, outcome) {
+    return outcome === ACTIVATION_ACTIVATED
+        || (outcome === ACTIVATION_STATIC_HOST_OPT_OUT
+            && typeof el.setState === 'function');
+}
 const pendingTagWaiters = new Map();
+const pendingBarrierRoots = new Set();
 let pendingUndefinedRoots = 0;
 let activationGeneration = 0;
 let failureHandler = null;
-const PENDING_BOUNDARY_STATE = Symbol();
-const PENDING_BOUNDARY_UPDATES = Symbol();
-const NO_BOUNDARY_STATE = Symbol();
+let invalidActivationOutcome;
+const PENDING_RECORD = Symbol();
 export function configureStreamingFailureHandler(handler) {
     failureHandler = handler;
 }
@@ -26,22 +32,54 @@ function fail(reason) {
     }
     failureHandler(reason);
 }
+function tagOf(el) {
+    return el.tagName.toLowerCase();
+}
+function missingTemplateReason(tag) {
+    return `template metadata missing while activating <${tag}>`;
+}
+function invalidOutcomeReason(tag) {
+    return `<${tag}> returned an unrecognized streaming activation outcome ${String(invalidActivationOutcome)}`;
+}
+function barrierLimitReason() {
+    return `pending ancestor-barrier root count exceeds ${MAX_PENDING_BARRIER_ROOTS}`;
+}
 function requireStateUpdate(el, patch) {
     if (applyStateUpdate(el, patch))
         return;
-    fail(`<${el.tagName.toLowerCase()}> activated without a setState() method`);
+    fail(`<${tagOf(el)}> activated without a setState() method`);
+}
+function joinBoundaryUpdates(el, updates) {
+    if (updates.active)
+        updates.roots.push(el);
+    if (updates.patch)
+        requireStateUpdate(el, updates.patch);
 }
-function activateMarkedElement(el, state, updates) {
-    const tag = el.tagName.toLowerCase();
+function activateMarkedElement(el, state, updates, bypass) {
+    const tag = tagOf(el);
     if (tag.indexOf('-') === -1)
         return ELEMENT_IGNORED;
-    if (customElements.get(tag))
-        return invokeActivationHook(el, state);
-    if (!hasPendingState(el) &&
-        pendingUndefinedRoots >= MAX_PENDING_UNDEFINED_ROOTS) {
-        return ELEMENT_LIMIT_FAILURE;
+    if (customElements.get(tag)) {
+        if (pendingBarrierRoots.has(el)) {
+            return activatePendingBarrierRoot(el);
+        }
+        if (hasPendingRecord(el))
+            return ELEMENT_DEFERRED;
+        const outcome = invokeActivationHook(el, state, bypass);
+        if (outcome !== ACTIVATION_ANCESTOR_BARRIER)
+            return outcome;
+        if (pendingBarrierRoots.size >= MAX_PENDING_BARRIER_ROOTS) {
+            return ELEMENT_BARRIER_LIMIT_FAILURE;
+        }
+        deferBehindBarrier(el, state, updates, bypass);
+        return ELEMENT_DEFERRED;
+    }
+    if (!hasPendingRecord(el)) {
+        if (pendingUndefinedRoots >= MAX_PENDING_UNDEFINED_ROOTS) {
+            return ELEMENT_LIMIT_FAILURE;
+        }
+        stashPendingRecord(el, state, updates, bypass);
     }
-    stashPendingState(el, state, updates);
     let waiter = pendingTagWaiters.get(tag);
     if (!waiter) {
         waiter = { generation: activationGeneration, roots: new Set() };
@@ -59,6 +97,58 @@ function activateMarkedElement(el, state, updates) {
     el[PENDING_ROOT_CONNECTED] = resumePendingRoot;
     return ELEMENT_DEFERRED;
 }
+function deferBehindBarrier(el, state, updates, bypass) {
+    stashPendingRecord(el, state, updates, bypass);
+    pendingBarrierRoots.add(el);
+    el[PENDING_ROOT_CONNECTED] = resumeBarrierRoot;
+}
+function activatePendingBarrierRoot(el) {
+    if (!pendingBarrierRoots.delete(el))
+        return ELEMENT_IGNORED;
+    delete el[PENDING_ROOT_CONNECTED];
+    const record = takePendingRecord(el);
+    const updates = releaseUpdates(record);
+    try {
+        const outcome = resumeRetainedRoot(el, record, updates);
+        if (outcome === ACTIVATION_ANCESTOR_BARRIER)
+            return ELEMENT_DEFERRED;
+        return outcome === ACTIVATION_MISSING_TEMPLATE ||
+            outcome === ELEMENT_INVALID_OUTCOME
+            ? outcome
+            : ELEMENT_ACTIVATED_FROM_PENDING;
+    }
+    finally {
+        if (updates?.pendingRoots === 0)
+            updates.patch = undefined;
+    }
+}
+function resumeRetainedRoot(el, record, updates) {
+    const outcome = invokeActivationHook(el, record?.state, record?.bypass);
+    if (outcome === ACTIVATION_ANCESTOR_BARRIER) {
+        deferBehindBarrier(el, record?.state, updates, record?.bypass);
+    }
+    else if (updates && retainsBoundaryUpdates(el, outcome)) {
+        joinBoundaryUpdates(el, updates);
+    }
+    return outcome;
+}
+function resumeBarrierRoot() {
+    try {
+        const outcome = activatePendingBarrierRoot(this);
+        if (outcome === ACTIVATION_MISSING_TEMPLATE) {
+            abandonDeferredTree(this);
+            fail(missingTemplateReason(tagOf(this)));
+        }
+        else if (outcome === ELEMENT_INVALID_OUTCOME) {
+            abandonDeferredTree(this);
+            fail(invalidOutcomeReason(tagOf(this)));
+        }
+    }
+    catch (error) {
+        abandonDeferredDescendants(this);
+        reportActivationFailure(tagOf(this), error);
+    }
+}
 function onTagDefined(tag, generation) {
     if (generation !== activationGeneration)
         return;
@@ -85,7 +175,7 @@ function onTagDefined(tag, generation) {
     }
 }
 function resumePendingRoot() {
-    const tag = this.tagName.toLowerCase();
+    const tag = tagOf(this);
     const waiter = pendingTagWaiters.get(tag);
     if (!waiter ||
         waiter.generation !== activationGeneration ||
@@ -100,23 +190,30 @@ function activatePendingRoot(tag, waiter, el) {
         return;
     pendingUndefinedRoots--;
     delete el[PENDING_ROOT_CONNECTED];
-    let updates;
+    const record = takePendingRecord(el);
+    const updates = releaseUpdates(record);
+    const state = record?.state;
+    const bypass = record?.bypass;
     try {
-        updates = takePendingUpdates(el);
-        const state = takePendingState(el);
-        const outcome = invokeActivationHook(el, state);
+        const outcome = resumeRetainedRoot(el, record, updates);
         if (outcome === ACTIVATION_MISSING_TEMPLATE) {
-            abandonDeferredDescendants(el);
-            abandonDeferredElement(el);
-            fail(`template metadata missing while activating <${tag}>`);
+            abandonDeferredTree(el);
+            fail(missingTemplateReason(tag));
             return;
         }
-        if (updates) {
-            updates.roots.push(el);
-            if (updates.patch)
-                requireStateUpdate(el, updates.patch);
+        if (outcome === ELEMENT_INVALID_OUTCOME) {
+            abandonDeferredTree(el);
+            fail(invalidOutcomeReason(tag));
+            return;
+        }
+        if (outcome === ACTIVATION_ANCESTOR_BARRIER) {
+            if (pendingBarrierRoots.size > MAX_PENDING_BARRIER_ROOTS) {
+                abandonDeferredTree(el);
+                fail(barrierLimitReason());
+            }
+            return;
         }
-        const failure = activateDeferredTree(firstNodeWithin(el), el, null, state, updates ? { updates } : undefined);
+        const failure = activateDeferredTree(firstNodeWithin(el), el, null, state, updates || bypass ? { updates, bypass } : undefined);
         if (failure)
             fail(failure);
     }
@@ -136,6 +233,7 @@ function activatePendingRoot(tag, waiter, el) {
 }
 export function activateDeferredTree(first, root, end, state, options) {
     const updates = options?.updates;
+    const bypass = options?.bypass;
     const countRetention = options?.countRetention === true && updates !== undefined;
     let node = first;
     let resumeAfterDeferred = null;
@@ -170,28 +268,30 @@ export function activateDeferredTree(first, root, end, state, options) {
             if (marked) {
                 const el = node;
                 try {
-                    const outcome = activateMarkedElement(el, state, updates);
+                    const outcome = activateMarkedElement(el, state, updates, bypass);
                     if (outcome === ACTIVATION_MISSING_TEMPLATE) {
-                        return `template metadata missing while activating <${el.tagName.toLowerCase()}>`;
+                        return missingTemplateReason(tagOf(el));
+                    }
+                    if (outcome === ELEMENT_INVALID_OUTCOME) {
+                        return invalidOutcomeReason(tagOf(el));
                     }
                     if (outcome === ELEMENT_LIMIT_FAILURE) {
                         return `pending undefined root count exceeds ${MAX_PENDING_UNDEFINED_ROOTS}`;
                     }
+                    if (outcome === ELEMENT_BARRIER_LIMIT_FAILURE) {
+                        return barrierLimitReason();
+                    }
                     if (outcome === ELEMENT_DEFERRED) {
                         resumeAfterDeferred = nextAfterSubtreeWithin(node, root);
                         skippingDeferredDescendants = true;
                     }
                     else if (updates &&
-                        (outcome === ACTIVATION_ACTIVATED ||
-                            outcome === ACTIVATION_STATIC_HOST_OPT_OUT)) {
-                        updates.roots.push(el);
-                        if (updates.patch) {
-                            requireStateUpdate(el, updates.patch);
-                        }
+                        retainsBoundaryUpdates(el, outcome)) {
+                        joinBoundaryUpdates(el, updates);
                     }
                 }
                 catch (error) {
-                    reportActivationFailure(el.tagName.toLowerCase(), error);
+                    reportActivationFailure(tagOf(el), error);
                 }
             }
         }
@@ -204,73 +304,83 @@ export function activateDeferredTree(first, root, end, state, options) {
 function reportActivationFailure(tag, error) {
     console.error(`[WebUI] streaming: late activation failed for <${tag}>: ${streamingErrorMessage(error)}`);
 }
+function abandonDeferredTree(el) {
+    abandonDeferredDescendants(el);
+    abandonDeferredElement(el);
+}
 export function abandonPendingWaiters() {
-    if (pendingTagWaiters.size === 0) {
-        pendingUndefinedRoots = 0;
-        return;
-    }
-    for (const waiter of pendingTagWaiters.values()) {
-        for (const el of waiter.roots)
+    if (pendingBarrierRoots.size !== 0) {
+        for (const el of pendingBarrierRoots)
             clearPendingRoot(el);
-        settleLateActivation();
+        pendingBarrierRoots.clear();
+    }
+    if (pendingTagWaiters.size !== 0) {
+        for (const waiter of pendingTagWaiters.values()) {
+            for (const el of waiter.roots)
+                clearPendingRoot(el);
+            settleLateActivation();
+        }
+        pendingTagWaiters.clear();
     }
-    pendingTagWaiters.clear();
     pendingUndefinedRoots = 0;
 }
 function clearPendingRoot(el) {
-    if (hasPendingState(el))
-        takePendingState(el);
-    takePendingUpdates(el);
+    releaseUpdates(takePendingRecord(el));
     delete el[PENDING_ROOT_CONNECTED];
-    abandonDeferredDescendants(el);
-    abandonDeferredElement(el);
+    abandonDeferredTree(el);
 }
-function stashPendingState(el, state, updates) {
-    const store = el;
-    store[PENDING_BOUNDARY_STATE] =
-        state === undefined ? NO_BOUNDARY_STATE : state;
-    if (updates) {
-        store[PENDING_BOUNDARY_UPDATES] = updates;
+function stashPendingRecord(el, state, updates, bypass) {
+    el[PENDING_RECORD] = {
+        state,
+        updates,
+        bypass,
+    };
+    if (updates)
         updates.pendingRoots++;
-    }
 }
-function hasPendingState(el) {
-    return Object.prototype.hasOwnProperty.call(el, PENDING_BOUNDARY_STATE);
+function hasPendingRecord(el) {
+    return Object.prototype.hasOwnProperty.call(el, PENDING_RECORD);
 }
-function takePendingState(el) {
+function takePendingRecord(el) {
     const store = el;
-    const stored = store[PENDING_BOUNDARY_STATE];
-    delete store[PENDING_BOUNDARY_STATE];
-    return stored === NO_BOUNDARY_STATE
-        ? undefined
-        : stored;
+    const record = store[PENDING_RECORD];
+    delete store[PENDING_RECORD];
+    return record;
 }
-function takePendingUpdates(el) {
-    const store = el;
-    const updates = store[PENDING_BOUNDARY_UPDATES];
-    delete store[PENDING_BOUNDARY_UPDATES];
-    if (updates)
-        updates.pendingRoots--;
-    return updates;
+function releaseUpdates(record) {
+    const updates = record?.updates;
+    if (!updates)
+        return undefined;
+    updates.pendingRoots--;
+    return updates.active || updates.patch !== undefined ? updates : undefined;
 }
-function invokeActivationHook(el, state) {
+function invokeActivationHook(el, state, bypass) {
     const hook = el[STREAMING_BOUNDARY_ACTIVATE];
     if (typeof hook !== 'function')
         return ACTIVATION_MISSING_TEMPLATE;
+    const bypassAncestor = bypass !== undefined &&
+        el.getAttribute(STREAMING_ENCLOSING_SPAN_ATTR) === bypass.id
+        ? bypass.host
+        : undefined;
     let outcome;
     try {
-        outcome = hook.call(el, state);
+        outcome = hook.call(el, state, bypassAncestor);
     }
     catch (error) {
-        safeRemoveAttribute(el, STREAMED_HOST_ATTR);
+        removeStreamingAttributes(el);
         throw error;
     }
-    if (outcome !== ACTIVATION_ACTIVATED &&
-        outcome !== ACTIVATION_STATIC_HOST_OPT_OUT) {
-        return ACTIVATION_MISSING_TEMPLATE;
+    if (outcome === ACTIVATION_ACTIVATED ||
+        outcome === ACTIVATION_STATIC_HOST_OPT_OUT) {
+        removeStreamingAttributes(el);
+        return outcome;
     }
-    safeRemoveAttribute(el, STREAMED_HOST_ATTR);
-    return outcome;
+    if (outcome === ACTIVATION_ANCESTOR_BARRIER ||
+        outcome === ACTIVATION_MISSING_TEMPLATE) {
+        return outcome;
+    }
+    invalidActivationOutcome = outcome;
+    return ELEMENT_INVALID_OUTCOME;
 }
 export function resetDeferredActivationForTests() {
     abandonPendingWaiters();
@@ -282,6 +392,9 @@ export function pendingTagWaiterCountForTests() {
 export function pendingUndefinedRootCountForTests() {
     return pendingUndefinedRoots;
 }
+export function pendingBarrierRootCountForTests() {
+    return pendingBarrierRoots.size;
+}
 export function elementHasPendingStateForTests(el) {
-    return hasPendingState(el);
+    return hasPendingRecord(el);
 }

package/dist/streaming-dom.d.ts

@@ -2,7 +2,14 @@ export declare const BOUNDARY_SCRIPT_ATTR = "data-webui-boundary";
 export declare const MAX_ELEMENTS_PER_BOUNDARY = 10000;
 export declare const MAX_MARKER_SCAN_NODES = 50000;
 export declare const MAX_BOUNDARY_SCRIPT_SCAN = 8;
+export declare const STREAMING_SPAN_HOST_ATTR = "data-ws-span";
+export declare const STREAMING_ENCLOSING_SPAN_ATTR = "data-ws-enclosing";
 export declare function streamingErrorMessage(error: unknown): string;
+export declare const BOUNDARY_START_PREFIX = "wb:";
+export declare const BOUNDARY_END_PREFIX = "/wb:";
+export declare const SPAN_START_PREFIX = "ws:";
+export declare const SPAN_END_PREFIX = "/ws:";
+export declare function isRangeEndMarker(data: string): boolean;
 export interface HydrationRange {
     readonly start: Comment | null;
     readonly end: Comment | null;
@@ -20,10 +27,12 @@ export type RangeResolution = {
     readonly truncated: true;
     readonly start: Comment | null;
 };
-export declare function resolveBoundaryRange(scriptEl: Element, sequence: number, terminal: boolean): RangeResolution;
+export declare function resolveBoundaryRange(scriptEl: Element, instanceId: number): RangeResolution;
+export declare function resolveSpanRange(scriptEl: Element, instanceId: number): RangeResolution;
+export declare function markerlessRecordViolation(scriptEl: Element, kind: string): string | null;
 export declare function findBoundaryScript(sentinel: Element): Element | null;
-export declare function findEndMarkerByPrefix(scriptEl: Element): Comment | null;
-export declare function findStartMarkerByPrefix(endMarker: Comment): Comment | null;
+export declare function findRangeEndMarkerByPrefix(scriptEl: Element): Comment | null;
+export declare function findRangeStartMarkerByPrefix(endMarker: Comment): Comment | null;
 export declare function safeRemove(node: Node | null | undefined): void;
 export declare function safeRemoveAttribute(el: Element, name: string): void;
 export declare function removeBoundaryScaffolding(sentinel: Element, scriptEl: Element | null, startMarker: Comment | null, endMarker: Comment | null): void;

package/dist/streaming-dom.js

@@ -2,41 +2,52 @@ export const BOUNDARY_SCRIPT_ATTR = 'data-webui-boundary';
 export const MAX_ELEMENTS_PER_BOUNDARY = 10_000;
 export const MAX_MARKER_SCAN_NODES = 50_000;
 export const MAX_BOUNDARY_SCRIPT_SCAN = 8;
+export const STREAMING_SPAN_HOST_ATTR = 'data-ws-span';
+export const STREAMING_ENCLOSING_SPAN_ATTR = 'data-ws-enclosing';
 export function streamingErrorMessage(error) {
     return error instanceof Error ? error.message : String(error);
 }
-const BOUNDARY_START_PREFIX = 'wb:';
-const BOUNDARY_END_PREFIX = '/wb:';
-const MARKERLESS_RANGE = { start: null, end: null };
-export function resolveBoundaryRange(scriptEl, sequence, terminal) {
-    const end = findEndMarker(scriptEl, sequence);
+export const BOUNDARY_START_PREFIX = 'wb:';
+export const BOUNDARY_END_PREFIX = '/wb:';
+export const SPAN_START_PREFIX = 'ws:';
+export const SPAN_END_PREFIX = '/ws:';
+export function isRangeEndMarker(data) {
+    return data.startsWith(BOUNDARY_END_PREFIX) ||
+        data.startsWith(SPAN_END_PREFIX);
+}
+const MARKER_KIND_BOUNDARY = 'boundary';
+const MARKER_KIND_SPAN = 'span';
+export function resolveBoundaryRange(scriptEl, instanceId) {
+    return resolveMarkerRange(scriptEl, instanceId, BOUNDARY_START_PREFIX, BOUNDARY_END_PREFIX, MARKER_KIND_BOUNDARY);
+}
+export function resolveSpanRange(scriptEl, instanceId) {
+    return resolveMarkerRange(scriptEl, instanceId, SPAN_START_PREFIX, SPAN_END_PREFIX, MARKER_KIND_SPAN);
+}
+function resolveMarkerRange(scriptEl, instanceId, startPrefix, endPrefix, kind) {
+    const end = findEndMarker(scriptEl, instanceId, endPrefix);
     if (end) {
-        if (terminal) {
-            return {
-                ok: false,
-                reason: `terminal boundary ${sequence} must be markerless`,
-                truncated: false,
-            };
-        }
-        const start = findStartMarkerBefore(end, sequence);
+        const start = findStartMarkerBefore(end, instanceId, startPrefix);
         if (!start) {
             return {
                 ok: false,
-                reason: `missing start marker for boundary ${sequence}`,
+                reason: `missing start marker for ${kind} ${instanceId}`,
                 truncated: false,
             };
         }
         return { ok: true, range: { start, end } };
     }
-    if (terminal)
-        return { ok: true, range: MARKERLESS_RANGE };
     return {
         ok: false,
-        reason: `missing end marker for boundary ${sequence}`,
+        reason: `missing end marker for ${kind} ${instanceId}`,
         truncated: true,
-        start: findStartMarkerBefore(scriptEl, sequence),
+        start: findStartMarkerBefore(scriptEl, instanceId, startPrefix),
     };
 }
+export function markerlessRecordViolation(scriptEl, kind) {
+    return previousRangeEndMarker(scriptEl)
+        ? `${kind} record must be markerless`
+        : null;
+}
 export function findBoundaryScript(sentinel) {
     let node = sentinel.previousElementSibling;
     for (let hops = 0; node && hops < MAX_BOUNDARY_SCRIPT_SCAN; hops++) {
@@ -48,21 +59,24 @@ export function findBoundaryScript(sentinel) {
     }
     return null;
 }
-function findEndMarker(scriptEl, sequence) {
+function findEndMarker(scriptEl, instanceId, prefix) {
     const marker = previousComment(scriptEl);
-    return marker?.data === `${BOUNDARY_END_PREFIX}${sequence}`
+    return marker?.data === `${prefix}${instanceId}`
         ? marker
         : null;
 }
-function findStartMarkerBefore(nodeBefore, sequence) {
-    return findCommentBefore(nodeBefore, `${BOUNDARY_START_PREFIX}${sequence}`);
+function findStartMarkerBefore(nodeBefore, instanceId, prefix) {
+    return findCommentBefore(nodeBefore, `${prefix}${instanceId}`);
 }
-export function findEndMarkerByPrefix(scriptEl) {
-    const marker = previousComment(scriptEl);
-    return marker?.data.startsWith(BOUNDARY_END_PREFIX) ? marker : null;
+export function findRangeEndMarkerByPrefix(scriptEl) {
+    return previousRangeEndMarker(scriptEl);
+}
+export function findRangeStartMarkerByPrefix(endMarker) {
+    return findCommentBefore(endMarker, endMarker.data.slice(1));
 }
-export function findStartMarkerByPrefix(endMarker) {
-    return findCommentBefore(endMarker, `${BOUNDARY_START_PREFIX}${endMarker.data.slice(BOUNDARY_END_PREFIX.length)}`);
+function previousRangeEndMarker(node) {
+    const marker = previousComment(node);
+    return marker && isRangeEndMarker(marker.data) ? marker : null;
 }
 function previousComment(node) {
     const previous = node.previousSibling;

package/dist/streaming-mode.d.ts

@@ -1,5 +1,10 @@
 export declare const STREAMING_BOUNDARY_ACTIVATE: unique symbol;
 export declare const PENDING_ROOT_CONNECTED: unique symbol;
 export declare const STREAMED_HOST_ATTR = "data-ws";
+export declare const ACTIVATION_ACTIVATED = 1;
+export declare const ACTIVATION_STATIC_HOST_OPT_OUT = 2;
+export declare const ACTIVATION_MISSING_TEMPLATE = 3;
+export declare const ACTIVATION_ANCESTOR_BARRIER = 4;
+export type ActivationOutcome = typeof ACTIVATION_ACTIVATED | typeof ACTIVATION_STATIC_HOST_OPT_OUT | typeof ACTIVATION_MISSING_TEMPLATE | typeof ACTIVATION_ANCESTOR_BARRIER;
 export declare function isStreamingHydrationMode(): boolean;
 export declare function resetStreamingModeForTests(): void;

package/dist/streaming-mode.js

@@ -2,6 +2,10 @@ let cached;
 export const STREAMING_BOUNDARY_ACTIVATE = Symbol.for('microsoft.webui.boundaryActivate');
 export const PENDING_ROOT_CONNECTED = Symbol.for('microsoft.webui.pendingRootConnected');
 export const STREAMED_HOST_ATTR = 'data-ws';
+export const ACTIVATION_ACTIVATED = 1;
+export const ACTIVATION_STATIC_HOST_OPT_OUT = 2;
+export const ACTIVATION_MISSING_TEMPLATE = 3;
+export const ACTIVATION_ANCESTOR_BARRIER = 4;
 export function isStreamingHydrationMode() {
     if (cached !== undefined)
         return cached;

package/dist/streaming-protocol.d.ts

@@ -1,5 +1,9 @@
 import type { TemplateMeta } from './template.js';
+import type { ComponentStyles } from './element/styles.js';
+export declare const STREAMING_PROTOCOL_VERSION = 2;
 export interface BoundaryBootstrap {
+    declarationId: number;
+    enclosingSpanInstanceId?: number;
     state?: Record<string, unknown>;
     templates?: Record<string, TemplateMeta>;
     inventory?: string;
@@ -7,14 +11,26 @@ export interface BoundaryBootstrap {
     chain?: unknown[];
     css?: string[];
     styles?: string[];
+    componentStyles: ComponentStyles;
     [key: string]: unknown;
 }
 export declare const RECORD_KIND_FINAL_CHECKPOINT = 0;
 export declare const RECORD_KIND_UPDATABLE_CHECKPOINT = 1;
 export declare const RECORD_KIND_STATE_UPDATE = 2;
-export declare const RECORD_KIND_TERMINAL = 3;
-export type BoundaryRecordKind = typeof RECORD_KIND_FINAL_CHECKPOINT | typeof RECORD_KIND_UPDATABLE_CHECKPOINT | typeof RECORD_KIND_STATE_UPDATE | typeof RECORD_KIND_TERMINAL;
-export type BoundaryRecordPayload = BoundaryBootstrap | Record<string, unknown>;
+export declare const RECORD_KIND_SPAN_COMPLETION = 3;
+export declare const RECORD_KIND_TERMINAL = 4;
+export type BoundaryRecordKind = typeof RECORD_KIND_FINAL_CHECKPOINT | typeof RECORD_KIND_UPDATABLE_CHECKPOINT | typeof RECORD_KIND_STATE_UPDATE | typeof RECORD_KIND_SPAN_COMPLETION | typeof RECORD_KIND_TERMINAL;
+export interface SpanCompletionPayload {
+    state?: Record<string, unknown>;
+    templates?: Record<string, TemplateMeta>;
+    inventory?: string;
+    nonce?: string;
+    chain?: unknown[];
+    css?: string[];
+    styles?: string[];
+    [key: string]: unknown;
+}
+export type BoundaryRecordPayload = BoundaryBootstrap | SpanCompletionPayload | Record<string, unknown>;
 export type BoundaryEnvelope = readonly [
     version: number,
     recordSequence: number,

package/dist/streaming-protocol.js

@@ -1,8 +1,9 @@
-const SUPPORTED_VERSION = 1;
+export const STREAMING_PROTOCOL_VERSION = 2;
 export const RECORD_KIND_FINAL_CHECKPOINT = 0;
 export const RECORD_KIND_UPDATABLE_CHECKPOINT = 1;
 export const RECORD_KIND_STATE_UPDATE = 2;
-export const RECORD_KIND_TERMINAL = 3;
+export const RECORD_KIND_SPAN_COMPLETION = 3;
+export const RECORD_KIND_TERMINAL = 4;
 function invalid(reason) {
     return { ok: false, reason };
 }
@@ -17,7 +18,7 @@ export function parseBoundaryEnvelope(text) {
     if (!Array.isArray(parsed) || parsed.length !== 5) {
         return invalid('boundary envelope must be a 5-element [version, recordSequence, kind, target, payload] array');
     }
-    if (parsed[0] !== SUPPORTED_VERSION) {
+    if (parsed[0] !== STREAMING_PROTOCOL_VERSION) {
         return invalid(`unsupported boundary envelope version ${JSON.stringify(parsed[0])}`);
     }
     return {

package/dist/streaming-spans.d.ts

@@ -0,0 +1,9 @@
+import type { HydrationRange } from './streaming-dom.js';
+export declare const MAX_SPAN_NESTING = 32;
+export declare function spanHostFor(id: number): Element | undefined;
+export declare function registerEnclosingSpans(renderRoot: Node, enclosingSpanInstanceId: number): string | null;
+export declare function prepareSpanCompletion(id: number, range: HydrationRange): string | null;
+export declare function completeSpan(id: number): void;
+export declare function abandonOpenSpans(): void;
+export declare function openSpanCountForTests(): number;
+export declare function hasOpenSpans(): boolean;