@microsoft/webui-framework 0.0.27 → 0.0.29

package/README.md

@@ -16,6 +16,10 @@ If you are building WebUI apps in this repo, this is the component model used by
 
 ## Install
 
+Trusted Types support is automatic; no setup call is needed. To enforce it,
+allow the `webui` policy in CSP. See [Trusted Types](https://microsoft.github.io/webui/guide/concepts/hydration#trusted-types)
+for CSP requirements and raw-HTML limits.
+
 In this workspace:
 
 ```json
@@ -246,6 +250,20 @@ authored `<boundary>` directives through
 `@microsoft/webui-framework` entry has no dependency on the coordinator, so
 normal applications pay no streaming bundle or initialization cost.
 
+To keep the full application out of `<head>`, put the explicit
+`import '@microsoft/webui-framework/streaming.js'` in a small application-owned
+entry. Register that file with your bundler, preserve its side effect, and
+share framework modules with the application. Identify its output and static
+dependencies through native bundler metadata and your existing asset handoff.
+WebUI does not create entries, inject imports, or require a streaming manifest.
+
+Load the coordinator with `type="module" async`; marker-based deferral handles
+application-first delivery without a second framework bundle.
+The application may load later, but early-interactive components still need
+their registration modules. Use `fetchpriority="low"` on deferred authored
+module scripts to exclude them from automatic modulepreload hints. See
+[Separate coordinator and application assets](https://microsoft.github.io/webui/guide/concepts/hydration#separate-coordinator-and-application-assets).
+
 Boundaries may be authored in entries and reusable components, including
 runtime conditions, outlets, and selected routes. A boundary-bearing subtree
 reached from a `<for>` body fails the build with `boundary-in-repeat`. A whole
@@ -269,8 +287,8 @@ activation. The coordinator does not publish that state to
 scaffolding after commit. Updates apply state to retained roots and never insert
 markup or rerun hydration.
 
-The browser reads version-2
-`[2, sequence, kind, target, payload]` records for final checkpoints,
+The browser reads the single unversioned
+`[sequence, kind, target, payload]` contract for final checkpoints,
 updatable checkpoints, updates, span completions, and terminal. Every commit
 also emits a `performance.mark()` - `webui:boundary:<id>`,
 `webui:boundary:<id>:update`, `webui:span:<id>`, or
@@ -278,6 +296,12 @@ also emits a `performance.mark()` - `webui:boundary:<id>`,
 Set `window.__WEBUI_STREAMING_DEBUG__ = true` only when tooling needs the live
 `webui:boundary-hydrated` event as well.
 
+A range record can reuse the exact preceding range state with `stateRef` and
+carry only a top-level `stateDelta`. References are backward-only and resolved
+before activation; missing, stale, forward, or malformed references halt and
+clean up the stream. The reference base is released on terminal, cancellation,
+failure, or coordinator reset.
+
 Set `window.__WEBUI_STREAMING_SLICE_MS__` to a positive millisecond budget to
 make the coordinator yield between boundaries instead of draining its queue in
 one pass. That is for pages where an intermediary coalesces the response into a

package/dist/element/style-catalog.d.ts

@@ -0,0 +1,33 @@
+export type ComponentStyleResource = ({
+    kind: 'link';
+    href: string;
+} | {
+    kind: 'style';
+    css: string;
+} | {
+    kind: 'module';
+    specifier: string;
+    css: string;
+}) & {
+    members?: string[];
+};
+export interface ComponentStyles {
+    version: 1;
+    strategy: 'link' | 'style' | 'module';
+    resources: Record<string, ComponentStyleResource>;
+    closures: Record<string, string[]>;
+}
+export interface DocumentCatalog {
+    readonly resources: Map<string, ComponentStyleResource>;
+    readonly closures: Map<string, readonly string[]>;
+}
+export declare function catalogFor(document: Document): DocumentCatalog;
+export declare function sameComponentStyleResource(current: ComponentStyleResource, next: ComponentStyleResource): boolean;
+export declare function sameComponentStyleClosure(current: readonly string[], next: readonly string[]): boolean;
+export declare function prepareComponentStyles(value: unknown): ComponentStyles | undefined;
+export declare function requireComponentStyles(value: unknown): ComponentStyles;
+export declare function validateComponentStylesRegistration(styles: ComponentStyles | undefined, document?: Document): void;
+export declare function registerPreparedComponentStyles(styles: ComponentStyles, document?: Document): void;
+export declare function registerComponentStyles(value: ComponentStyles | unknown, document?: Document): void;
+export declare function hasRegisteredComponentStyleResource(id: string, document?: Document): boolean;
+export declare function hasComponentStyleWork(rootId: string, document?: Document): boolean;

package/dist/element/style-catalog.js

@@ -0,0 +1,154 @@
+const catalogs = new WeakMap();
+export function catalogFor(document) {
+    let catalog = catalogs.get(document);
+    if (!catalog) {
+        catalog = {
+            resources: new Map(),
+            closures: new Map(),
+        };
+        catalogs.set(document, catalog);
+    }
+    return catalog;
+}
+function isObject(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+export function sameComponentStyleResource(current, next) {
+    if (current === next)
+        return true;
+    const currentMembers = current.members;
+    const nextMembers = next.members;
+    if (currentMembers?.length !== nextMembers?.length ||
+        currentMembers?.some((member, index) => member !== nextMembers?.[index])) {
+        return false;
+    }
+    switch (current.kind) {
+        case 'link':
+            return next.kind === 'link' && current.href === next.href;
+        case 'style':
+            return next.kind === 'style' && current.css === next.css;
+        case 'module':
+            return next.kind === 'module' &&
+                current.specifier === next.specifier &&
+                current.css === next.css;
+    }
+}
+export function sameComponentStyleClosure(current, next) {
+    return current === next ||
+        (current.length === next.length && current.every((id, index) => id === next[index]));
+}
+export function prepareComponentStyles(value) {
+    if (value === undefined)
+        return undefined;
+    if (!isObject(value) || value.version !== 1) {
+        throw new Error('[WebUI] componentStyles must use version 1.');
+    }
+    if (value.strategy !== 'link' && value.strategy !== 'style' && value.strategy !== 'module') {
+        throw new Error('[WebUI] componentStyles strategy must be "link", "style", or "module".');
+    }
+    if (!isObject(value.resources) || !isObject(value.closures)) {
+        throw new Error('[WebUI] componentStyles resources and closures must be objects.');
+    }
+    const strategy = value.strategy;
+    const resources = {};
+    for (const id of Object.keys(value.resources)) {
+        const resource = value.resources[id];
+        if (!id || !isObject(resource) || resource.kind !== strategy) {
+            throw new Error(`[WebUI] Invalid component style resource "${id}".`);
+        }
+        let members;
+        if (resource.members !== undefined) {
+            if (!Array.isArray(resource.members) ||
+                resource.members.length < 2 ||
+                resource.members.some(member => typeof member !== 'string' || !member) ||
+                new Set(resource.members).size !== resource.members.length) {
+                throw new Error(`[WebUI] Invalid component style resource members "${id}".`);
+            }
+            members = [...resource.members];
+        }
+        if (resource.kind === 'link' && typeof resource.href === 'string' && resource.href) {
+            resources[id] = members
+                ? { kind: 'link', href: resource.href, members }
+                : { kind: 'link', href: resource.href };
+        }
+        else if (resource.kind === 'style' && typeof resource.css === 'string') {
+            resources[id] = members
+                ? { kind: 'style', css: resource.css, members }
+                : { kind: 'style', css: resource.css };
+        }
+        else if (resource.kind === 'module' &&
+            typeof resource.specifier === 'string' && resource.specifier &&
+            typeof resource.css === 'string') {
+            resources[id] = members
+                ? { kind: 'module', specifier: resource.specifier, css: resource.css, members }
+                : { kind: 'module', specifier: resource.specifier, css: resource.css };
+        }
+        else {
+            throw new Error(`[WebUI] Invalid component style resource "${id}".`);
+        }
+    }
+    const closures = {};
+    for (const root of Object.keys(value.closures)) {
+        const closure = value.closures[root];
+        if (!root || !Array.isArray(closure)) {
+            throw new Error(`[WebUI] Invalid component style closure "${root}".`);
+        }
+        closures[root] = closure.map((id) => {
+            if (typeof id !== 'string' || !id) {
+                throw new Error(`[WebUI] Invalid resource ID in component style closure "${root}".`);
+            }
+            return id;
+        });
+    }
+    return { version: 1, strategy, resources, closures };
+}
+export function requireComponentStyles(value) {
+    const styles = prepareComponentStyles(value);
+    if (!styles) {
+        throw new Error('[WebUI] componentStyles is required.');
+    }
+    return styles;
+}
+export function validateComponentStylesRegistration(styles, document = globalThis.document) {
+    if (!styles)
+        return;
+    const catalog = catalogFor(document);
+    for (const id of Object.keys(styles.resources)) {
+        const current = catalog.resources.get(id);
+        if (current && !sameComponentStyleResource(current, styles.resources[id])) {
+            throw new Error(`[WebUI] Conflicting component style resource "${id}".`);
+        }
+    }
+    for (const root of Object.keys(styles.closures)) {
+        const current = catalog.closures.get(root);
+        const next = styles.closures[root];
+        if (current && !sameComponentStyleClosure(current, next)) {
+            throw new Error(`[WebUI] Conflicting component style closure "${root}".`);
+        }
+    }
+}
+export function registerPreparedComponentStyles(styles, document = globalThis.document) {
+    const catalog = catalogFor(document);
+    for (const id of Object.keys(styles.resources)) {
+        if (catalog.resources.has(id))
+            continue;
+        const resource = styles.resources[id];
+        catalog.resources.set(id, resource);
+    }
+    for (const root of Object.keys(styles.closures)) {
+        if (!catalog.closures.has(root)) {
+            catalog.closures.set(root, styles.closures[root]);
+        }
+    }
+}
+export function registerComponentStyles(value, document = globalThis.document) {
+    const styles = requireComponentStyles(value);
+    validateComponentStylesRegistration(styles, document);
+    registerPreparedComponentStyles(styles, document);
+}
+export function hasRegisteredComponentStyleResource(id, document = globalThis.document) {
+    return catalogFor(document).resources.has(id);
+}
+export function hasComponentStyleWork(rootId, document = globalThis.document) {
+    return (catalogFor(document).closures.get(rootId)?.length ?? 0) > 0;
+}

package/dist/element/styles.d.ts

@@ -1,39 +1,12 @@
-export type ComponentStyleResource = ({
-    kind: 'link';
-    href: string;
-} | {
-    kind: 'style';
-    css: string;
-} | {
-    kind: 'module';
-    specifier: string;
-    css: string;
-}) & {
-    members?: string[];
-};
-export interface ComponentStyles {
-    version: 1;
-    strategy: 'link' | 'style' | 'module';
-    resources: Record<string, ComponentStyleResource>;
-    closures: Record<string, string[]>;
-}
+export { hasComponentStyleWork, hasRegisteredComponentStyleResource, prepareComponentStyles, registerComponentStyles, registerPreparedComponentStyles, requireComponentStyles, sameComponentStyleClosure, sameComponentStyleResource, validateComponentStylesRegistration, } from './style-catalog.js';
+export type { ComponentStyleResource, ComponentStyles } from './style-catalog.js';
 type StyleTarget = Document | ShadowRoot;
 type CssModule = {
     default: CSSStyleSheet;
 };
 type CssModuleLoader = (specifier: string) => Promise<CssModule>;
 export declare function setCssModuleLoaderForTests(loader?: CssModuleLoader): void;
-export declare function sameComponentStyleResource(current: ComponentStyleResource, next: ComponentStyleResource): boolean;
-export declare function sameComponentStyleClosure(current: readonly string[], next: readonly string[]): boolean;
-export declare function prepareComponentStyles(value: unknown): ComponentStyles | undefined;
-export declare function requireComponentStyles(value: unknown): ComponentStyles;
-export declare function validateComponentStylesRegistration(styles: ComponentStyles | undefined, document?: Document): void;
-export declare function registerPreparedComponentStyles(styles: ComponentStyles, document?: Document): void;
-export declare function registerComponentStyles(value: ComponentStyles | unknown, document?: Document): void;
-export declare function hasRegisteredComponentStyleResource(id: string, document?: Document): boolean;
-export declare function hasComponentStyleWork(rootId: string, document?: Document): boolean;
 export declare function isComponentStyleMarker(element: Element): boolean;
 export declare function isComponentStyleResourceMarker(element: Element): boolean;
 export declare function claimSsrComponentStyles(source: Element, target: StyleTarget): void;
 export declare function installComponentStyles(rootId: string, target: StyleTarget, host?: HTMLElement): Promise<void> | undefined;
-export {};

package/dist/element/styles.js

@@ -1,6 +1,8 @@
 import { installComponentLinkStyles } from './link-styles.js';
+import { setImportMapContent } from '../trusted-types-policy.js';
+import { catalogFor } from './style-catalog.js';
+export { hasComponentStyleWork, hasRegisteredComponentStyleResource, prepareComponentStyles, registerComponentStyles, registerPreparedComponentStyles, requireComponentStyles, sameComponentStyleClosure, sameComponentStyleResource, validateComponentStylesRegistration, } from './style-catalog.js';
 const DEV = typeof __WEBUI_DEV__ === 'undefined' || __WEBUI_DEV__;
-const catalogs = new WeakMap();
 const installed = new WeakMap();
 const completedClosures = new WeakMap();
 const pending = new WeakMap();
@@ -14,26 +16,12 @@ let loadCssModule = defaultCssModuleLoader;
 export function setCssModuleLoaderForTests(loader) {
     loadCssModule = loader ?? defaultCssModuleLoader;
 }
-function catalogFor(document) {
-    let catalog = catalogs.get(document);
-    if (!catalog) {
-        catalog = {
-            resources: new Map(),
-            closures: new Map(),
-        };
-        catalogs.set(document, catalog);
-    }
-    return catalog;
-}
 function isDocument(target) {
     return target.nodeType === 9;
 }
 function owningDocument(target) {
     return isDocument(target) ? target : target.ownerDocument;
 }
-function isObject(value) {
-    return typeof value === 'object' && value !== null && !Array.isArray(value);
-}
 function styleGlobal(owner) {
     const configured = owner.defaultView?.__webui;
     if (configured || owner !== globalThis.document || typeof window === 'undefined') {
@@ -49,145 +37,6 @@ function readNonce(target = document) {
     const meta = owner.querySelector('meta[name="webui-nonce"]');
     return meta?.content ?? '';
 }
-export function sameComponentStyleResource(current, next) {
-    if (current === next)
-        return true;
-    const currentMembers = current.members;
-    const nextMembers = next.members;
-    if (currentMembers?.length !== nextMembers?.length ||
-        currentMembers?.some((member, index) => member !== nextMembers?.[index])) {
-        return false;
-    }
-    switch (current.kind) {
-        case 'link':
-            return next.kind === 'link' && current.href === next.href;
-        case 'style':
-            return next.kind === 'style' && current.css === next.css;
-        case 'module':
-            return next.kind === 'module' &&
-                current.specifier === next.specifier &&
-                current.css === next.css;
-    }
-}
-export function sameComponentStyleClosure(current, next) {
-    return current === next ||
-        (current.length === next.length && current.every((id, index) => id === next[index]));
-}
-export function prepareComponentStyles(value) {
-    if (value === undefined)
-        return undefined;
-    if (!isObject(value) || value.version !== 1) {
-        throw new Error('[WebUI] componentStyles must use version 1.');
-    }
-    if (value.strategy !== 'link' && value.strategy !== 'style' && value.strategy !== 'module') {
-        throw new Error('[WebUI] componentStyles strategy must be "link", "style", or "module".');
-    }
-    if (!isObject(value.resources) || !isObject(value.closures)) {
-        throw new Error('[WebUI] componentStyles resources and closures must be objects.');
-    }
-    const strategy = value.strategy;
-    const resources = {};
-    for (const id of Object.keys(value.resources)) {
-        const resource = value.resources[id];
-        if (!id || !isObject(resource) || resource.kind !== strategy) {
-            throw new Error(`[WebUI] Invalid component style resource "${id}".`);
-        }
-        let members;
-        if (resource.members !== undefined) {
-            if (!Array.isArray(resource.members) ||
-                resource.members.length < 2 ||
-                resource.members.some(member => typeof member !== 'string' || !member) ||
-                new Set(resource.members).size !== resource.members.length) {
-                throw new Error(`[WebUI] Invalid component style resource members "${id}".`);
-            }
-            members = [...resource.members];
-        }
-        if (resource.kind === 'link' && typeof resource.href === 'string' && resource.href) {
-            resources[id] = members
-                ? { kind: 'link', href: resource.href, members }
-                : { kind: 'link', href: resource.href };
-        }
-        else if (resource.kind === 'style' && typeof resource.css === 'string') {
-            resources[id] = members
-                ? { kind: 'style', css: resource.css, members }
-                : { kind: 'style', css: resource.css };
-        }
-        else if (resource.kind === 'module' &&
-            typeof resource.specifier === 'string' && resource.specifier &&
-            typeof resource.css === 'string') {
-            resources[id] = members
-                ? { kind: 'module', specifier: resource.specifier, css: resource.css, members }
-                : { kind: 'module', specifier: resource.specifier, css: resource.css };
-        }
-        else {
-            throw new Error(`[WebUI] Invalid component style resource "${id}".`);
-        }
-    }
-    const closures = {};
-    for (const root of Object.keys(value.closures)) {
-        const closure = value.closures[root];
-        if (!root || !Array.isArray(closure)) {
-            throw new Error(`[WebUI] Invalid component style closure "${root}".`);
-        }
-        closures[root] = closure.map((id) => {
-            if (typeof id !== 'string' || !id) {
-                throw new Error(`[WebUI] Invalid resource ID in component style closure "${root}".`);
-            }
-            return id;
-        });
-    }
-    return { version: 1, strategy, resources, closures };
-}
-export function requireComponentStyles(value) {
-    const styles = prepareComponentStyles(value);
-    if (!styles) {
-        throw new Error('[WebUI] componentStyles is required.');
-    }
-    return styles;
-}
-export function validateComponentStylesRegistration(styles, document = globalThis.document) {
-    if (!styles)
-        return;
-    const catalog = catalogFor(document);
-    for (const id of Object.keys(styles.resources)) {
-        const current = catalog.resources.get(id);
-        if (current && !sameComponentStyleResource(current, styles.resources[id])) {
-            throw new Error(`[WebUI] Conflicting component style resource "${id}".`);
-        }
-    }
-    for (const root of Object.keys(styles.closures)) {
-        const current = catalog.closures.get(root);
-        const next = styles.closures[root];
-        if (current && !sameComponentStyleClosure(current, next)) {
-            throw new Error(`[WebUI] Conflicting component style closure "${root}".`);
-        }
-    }
-}
-export function registerPreparedComponentStyles(styles, document = globalThis.document) {
-    const catalog = catalogFor(document);
-    for (const id of Object.keys(styles.resources)) {
-        if (catalog.resources.has(id))
-            continue;
-        const resource = styles.resources[id];
-        catalog.resources.set(id, resource);
-    }
-    for (const root of Object.keys(styles.closures)) {
-        if (!catalog.closures.has(root)) {
-            catalog.closures.set(root, styles.closures[root]);
-        }
-    }
-}
-export function registerComponentStyles(value, document = globalThis.document) {
-    const styles = requireComponentStyles(value);
-    validateComponentStylesRegistration(styles, document);
-    registerPreparedComponentStyles(styles, document);
-}
-export function hasRegisteredComponentStyleResource(id, document = globalThis.document) {
-    return catalogFor(document).resources.has(id);
-}
-export function hasComponentStyleWork(rootId, document = globalThis.document) {
-    return (catalogFor(document).closures.get(rootId)?.length ?? 0) > 0;
-}
 function targetInstalledResources(target) {
     let targetInstalled = installed.get(target);
     if (!targetInstalled) {
@@ -362,9 +211,7 @@ function installModuleImportMap(target, specifier, css) {
     const nonce = readNonce(target);
     if (nonce)
         script.nonce = nonce;
-    script.textContent = JSON.stringify({
-        imports: { [specifier]: `data:text/css,${encodeURIComponent(css)}` },
-    });
+    setImportMapContent(script, specifier, css, owner.defaultView);
     owner.head.appendChild(script);
     installedSpecifiers.add(specifier);
 }

package/dist/lifecycle.js

@@ -1,3 +1,4 @@
+import { isStreamingHydrationMode } from './streaming-mode.js';
 let pendingCount = 0;
 let started = false;
 let completed = false;
@@ -74,6 +75,9 @@ function tryComplete() {
         streamingGateAborted ||
         pendingCount !== 0)
         return;
+    if (!streamingGateActive && hasBrowserDocument && isStreamingHydrationMode()) {
+        streamingGateActive = true;
+    }
     if (!started && !streamingGateActive)
         return;
     if (streamingGateActive &&

package/dist/static-host.js

@@ -1,6 +1,6 @@
 import { consumePendingParentState, TemplateElement, } from './template-element.js';
 import { hasComponentStyleWork } from './element/styles.js';
-import { getTemplateRegistry } from './template.js';
+import { getTemplateRegistry, installTemplateDefinitionPreparation, } from './template.js';
 import { templateNeedsStaticHost } from './template-roots.js';
 import { ACTIVATION_STATIC_HOST_OPT_OUT, isStreamingHydrationMode, STREAMED_HOST_ATTR, STREAMING_BOUNDARY_ACTIVATE, } from './streaming-mode.js';
 import { TEMPLATES_REGISTERED_EVENT, templateRegistrationDetail, } from './template-events.js';
@@ -97,6 +97,7 @@ export function installTemplateElementRuntime() {
     if (typeof window === 'undefined' || typeof document === 'undefined')
         return;
     runtimeInstalled = true;
+    installTemplateDefinitionPreparation(null);
     window.addEventListener(TEMPLATES_REGISTERED_EVENT, (event) => {
         const detail = templateRegistrationDetail(event);
         if (!detail?.templates)

package/dist/streaming-bootstrap.js

@@ -1,5 +1,5 @@
-import { registerTemplateData } from './template.js';
-import { registerComponentStyles } from './element/styles.js';
+import { registerTemplateData } from './template-registry.js';
+import { registerComponentStyles } from './element/style-catalog.js';
 export function applyBoundaryBootstrap(bootstrap) {
     registerComponentStyles(bootstrap.componentStyles);
     if (bootstrap.templates)
@@ -12,6 +12,8 @@ export function applyBoundaryBootstrap(bootstrap) {
         const key = keys[i];
         if (key === 'templates' ||
             key === 'state' ||
+            key === 'stateRef' ||
+            key === 'stateDelta' ||
             key === 'componentStyles' ||
             key === 'declarationId' ||
             key === 'enclosingSpanInstanceId')

package/dist/streaming-coordinator.js

@@ -6,6 +6,7 @@ import { abandonPendingWaiters, configureStreamingFailureHandler, elementHasPend
 import { findBoundaryScript, findRangeEndMarkerByPrefix, findRangeStartMarkerByPrefix, markerlessRecordViolation, removeBoundaryScaffolding, resolveBoundaryRange, resolveSpanRange, streamingErrorMessage, } from './streaming-dom.js';
 import { parseBoundaryEnvelope, RECORD_KIND_FINAL_CHECKPOINT, RECORD_KIND_SPAN_COMPLETION, RECORD_KIND_STATE_UPDATE, RECORD_KIND_TERMINAL, RECORD_KIND_UPDATABLE_CHECKPOINT, } from './streaming-protocol.js';
 import { applyStateUpdate } from './streaming-state.js';
+import { clearRangeState, resolveRangeState, } from './streaming-record-state.js';
 import { abandonOpenSpans, completeSpan, hasOpenSpans, openSpanCountForTests, prepareSpanCompletion, registerEnclosingSpans, spanHostFor, } from './streaming-spans.js';
 const MAX_QUEUED_BOUNDARIES = 512;
 const MAX_UPDATABLE_BOUNDARIES = 128;
@@ -110,6 +111,7 @@ function fail(reason) {
     abandonPendingWaiters();
     abandonOpenSpans();
     clearUpdatableBoundaries();
+    clearRangeState();
     settlePendingTerminal(false);
     for (let i = queueHead; i < queue.length; i++) {
         discardRejectedBoundary(queue[i]);
@@ -151,7 +153,7 @@ function processSentinel(sentinel) {
         failBoundary(sentinel, parsed.reason);
         return;
     }
-    const [, sequence, kind, target, payload] = parsed.envelope;
+    const [sequence, kind, target, payload] = parsed.envelope;
     if (sequence !== nextExpectedRecordSequence) {
         failBoundary(sentinel, `expected streaming record sequence ${nextExpectedRecordSequence}, received ${sequence}`);
         return;
@@ -213,11 +215,12 @@ function commitRecord(span, payload, range, sequence, target, updatable, sentine
     markBoundaryPending();
     let committed = false;
     try {
+        const state = resolveRangeState(payload, sequence);
         if (span) {
-            hydrateSpanCompletion(payload, range, target);
+            hydrateSpanCompletion(payload, state, range, target);
         }
         else {
-            hydrateCheckpoint(payload, range, target, updatable);
+            hydrateCheckpoint(payload, state, range, target, updatable);
         }
         committed = true;
     }
@@ -235,7 +238,7 @@ function commitRecord(span, payload, range, sequence, target, updatable, sentine
         markBoundaryCommitted(false);
     }
 }
-function hydrateCheckpoint(bootstrap, range, target, updatable) {
+function hydrateCheckpoint(bootstrap, state, range, target, updatable) {
     let bypass;
     const enclosing = bootstrap.enclosingSpanInstanceId;
     if (enclosing !== undefined && range.start?.parentNode) {
@@ -251,7 +254,7 @@ function hydrateCheckpoint(bootstrap, range, target, updatable) {
         const boundary = updatable
             ? newUpdatableBoundary()
             : undefined;
-        activateRootsBetween(range.start, range.end, bootstrap.state, boundary, bypass);
+        activateRootsBetween(range.start, range.end, state, boundary, bypass);
         if (boundary)
             retainUpdatableBoundary(target, boundary);
     }
@@ -262,12 +265,12 @@ function hydrateCheckpoint(bootstrap, range, target, updatable) {
 function newUpdatableBoundary() {
     return { roots: [], active: true, retained: 0, pendingRoots: 0 };
 }
-function hydrateSpanCompletion(payload, range, target) {
+function hydrateSpanCompletion(payload, state, range, target) {
     const invalid = prepareSpanCompletion(target, range);
     if (invalid)
         throw new Error(invalid);
     applyBoundaryBootstrap(payload);
-    activateRootsBetween(range.start, range.end, payload.state);
+    activateRootsBetween(range.start, range.end, state);
     completeSpan(target);
 }
 function failRangeResolution(sentinel, scriptEl, resolved) {
@@ -321,6 +324,7 @@ function commitTerminal(sequence, sentinel, scriptEl) {
     removeBoundaryScaffolding(sentinel, scriptEl, null, null);
     terminalCommitted = true;
     pendingTerminalSequence = sequence;
+    clearRangeState();
     clearUpdatableBoundaries(true);
     scheduleTerminalValidation();
 }
@@ -403,6 +407,7 @@ export function resetStreamingCoordinatorStateForTests() {
     abandonOpenSpans();
     settlePendingTerminal(false);
     clearUpdatableBoundaries();
+    clearRangeState();
     coordinatorGeneration++;
     queue.length = 0;
     queueHead = 0;