@microsoft/webui-framework 0.0.28 → 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

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)

package/dist/streaming-deferred.js

@@ -1,8 +1,10 @@
 import { markLateActivationPending, settleLateActivation, } from './lifecycle.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 { ACTIVATION_ACTIVATED, ACTIVATION_ANCESTOR_BARRIER, ACTIVATION_MISSING_TEMPLATE, ACTIVATION_STATIC_HOST_OPT_OUT, registerStreamingRootResume, STREAMED_HOST_ATTR, STREAMING_BOUNDARY_ACTIVATE, } from './streaming-mode.js';
 import { applyStateUpdate } from './streaming-state.js';
+import { templateNeedsStaticHost } from './template-roots.js';
+import { invalidateTemplateHostRuntime, loadTemplateHostRuntime, resetTemplateHostRuntimeForTests, } from './streaming-template-hosts.js';
 export const ELEMENT_IGNORED = 10;
 export const ELEMENT_DEFERRED = 11;
 export const ELEMENT_LIMIT_FAILURE = 12;
@@ -20,9 +22,11 @@ const pendingTagWaiters = new Map();
 const pendingBarrierRoots = new Set();
 let pendingUndefinedRoots = 0;
 let activationGeneration = 0;
+let templateHostRuntimeRequested = false;
 let failureHandler = null;
 let invalidActivationOutcome;
-const PENDING_RECORD = Symbol();
+let pendingRootRecords;
+registerStreamingRootResume(resumeRetainedElement);
 export function configureStreamingFailureHandler(handler) {
     failureHandler = handler;
 }
@@ -89,23 +93,45 @@ function activateMarkedElement(el, state, updates, bypass) {
         customElements
             .whenDefined(tag)
             .then(() => onTagDefined(tag, generation));
+        requestTemplateHostRuntime(tag, generation);
     }
     if (!waiter.roots.has(el)) {
         waiter.roots.add(el);
         pendingUndefinedRoots++;
     }
-    el[PENDING_ROOT_CONNECTED] = resumePendingRoot;
     return ELEMENT_DEFERRED;
 }
+function resumeRetainedElement(el) {
+    if (!hasPendingRecord(el))
+        return false;
+    if (pendingBarrierRoots.has(el))
+        resumeBarrierRoot.call(el);
+    else
+        resumePendingRoot.call(el);
+    return true;
+}
+function requestTemplateHostRuntime(tag, generation) {
+    if (templateHostRuntimeRequested)
+        return;
+    const meta = window.__webui?.templates?.[tag];
+    if (!meta || !templateNeedsStaticHost(meta))
+        return;
+    if (window.__webui?.templateHostExclusions?.has(tag))
+        return;
+    templateHostRuntimeRequested = true;
+    void loadTemplateHostRuntime()?.catch((error) => {
+        if (generation === activationGeneration) {
+            fail(`failed to load template-host runtime: ${streamingErrorMessage(error)}`);
+        }
+    });
+}
 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 {
@@ -180,7 +206,6 @@ function resumePendingRoot() {
     if (!waiter ||
         waiter.generation !== activationGeneration ||
         !waiter.roots.has(this)) {
-        delete this[PENDING_ROOT_CONNECTED];
         return;
     }
     activatePendingRoot(tag, waiter, this);
@@ -189,7 +214,6 @@ function activatePendingRoot(tag, waiter, el) {
     if (!waiter.roots.delete(el))
         return;
     pendingUndefinedRoots--;
-    delete el[PENDING_ROOT_CONNECTED];
     const record = takePendingRecord(el);
     const updates = releaseUpdates(record);
     const state = record?.state;
@@ -309,6 +333,8 @@ function abandonDeferredTree(el) {
     abandonDeferredElement(el);
 }
 export function abandonPendingWaiters() {
+    activationGeneration++;
+    invalidateTemplateHostRuntime();
     if (pendingBarrierRoots.size !== 0) {
         for (const el of pendingBarrierRoots)
             clearPendingRoot(el);
@@ -323,28 +349,30 @@ export function abandonPendingWaiters() {
         pendingTagWaiters.clear();
     }
     pendingUndefinedRoots = 0;
+    pendingRootRecords = undefined;
 }
 function clearPendingRoot(el) {
     releaseUpdates(takePendingRecord(el));
-    delete el[PENDING_ROOT_CONNECTED];
     abandonDeferredTree(el);
 }
 function stashPendingRecord(el, state, updates, bypass) {
-    el[PENDING_RECORD] = {
+    (pendingRootRecords ??= new WeakMap()).set(el, {
         state,
         updates,
         bypass,
-    };
+    });
     if (updates)
         updates.pendingRoots++;
 }
 function hasPendingRecord(el) {
-    return Object.prototype.hasOwnProperty.call(el, PENDING_RECORD);
+    return pendingRootRecords?.has(el) ?? false;
 }
 function takePendingRecord(el) {
-    const store = el;
-    const record = store[PENDING_RECORD];
-    delete store[PENDING_RECORD];
+    const record = pendingRootRecords?.get(el);
+    pendingRootRecords?.delete(el);
+    if (pendingUndefinedRoots === 0 && pendingBarrierRoots.size === 0) {
+        pendingRootRecords = undefined;
+    }
     return record;
 }
 function releaseUpdates(record) {
@@ -384,7 +412,8 @@ function invokeActivationHook(el, state, bypass) {
 }
 export function resetDeferredActivationForTests() {
     abandonPendingWaiters();
-    activationGeneration++;
+    templateHostRuntimeRequested = false;
+    resetTemplateHostRuntimeForTests();
 }
 export function pendingTagWaiterCountForTests() {
     return pendingTagWaiters.size;

package/dist/streaming-install.js

@@ -1,7 +1,8 @@
 import { beginStreamingGate } from './lifecycle.js';
-import { installTemplateElementRuntime } from './static-host.js';
 import { enqueueStreamingSentinel, installStreamingTruncationGuard, } from './streaming-coordinator.js';
 import { isStreamingHydrationMode } from './streaming-mode.js';
+import { installTemplateDefinitionPreparation } from './template-registry.js';
+import { prepareTemplateDefinitions } from './streaming-template-hosts.js';
 const SENTINEL_TAG = 'webui-hydrate';
 let installed = false;
 class WebUiHydrateSentinel extends HTMLElement {
@@ -13,12 +14,12 @@ export function installStreamingCoordinator() {
     if (installed || !isStreamingHydrationMode())
         return;
     installed = true;
+    installTemplateDefinitionPreparation(prepareTemplateDefinitions);
     if (!customElements.get(SENTINEL_TAG)) {
         customElements.define(SENTINEL_TAG, WebUiHydrateSentinel);
     }
     beginStreamingGate();
     installStreamingTruncationGuard();
-    installTemplateElementRuntime();
 }
 export function resetStreamingInstallForTests() {
     installed = false;

package/dist/streaming-mode.d.ts

@@ -1,5 +1,6 @@
 export declare const STREAMING_BOUNDARY_ACTIVATE: unique symbol;
-export declare const PENDING_ROOT_CONNECTED: unique symbol;
+export declare let resumeStreamingRoot: ((element: Element) => boolean) | undefined;
+export declare function registerStreamingRootResume(resume: typeof resumeStreamingRoot): void;
 export declare const STREAMED_HOST_ATTR = "data-ws";
 export declare const ACTIVATION_ACTIVATED = 1;
 export declare const ACTIVATION_STATIC_HOST_OPT_OUT = 2;