@microsoft/webui-framework 0.0.27 → 0.0.29

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;

package/dist/streaming-mode.js

@@ -1,6 +1,9 @@
 let cached;
 export const STREAMING_BOUNDARY_ACTIVATE = Symbol.for('microsoft.webui.boundaryActivate');
-export const PENDING_ROOT_CONNECTED = Symbol.for('microsoft.webui.pendingRootConnected');
+export let resumeStreamingRoot;
+export function registerStreamingRootResume(resume) {
+    resumeStreamingRoot = resume;
+}
 export const STREAMED_HOST_ATTR = 'data-ws';
 export const ACTIVATION_ACTIVATED = 1;
 export const ACTIVATION_STATIC_HOST_OPT_OUT = 2;

package/dist/streaming-protocol.d.ts

@@ -1,10 +1,11 @@
 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>;
+    stateRef?: number;
+    stateDelta?: Record<string, unknown>;
     templates?: Record<string, TemplateMeta>;
     inventory?: string;
     nonce?: string;
@@ -22,6 +23,8 @@ 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>;
+    stateRef?: number;
+    stateDelta?: Record<string, unknown>;
     templates?: Record<string, TemplateMeta>;
     inventory?: string;
     nonce?: string;
@@ -32,7 +35,6 @@ export interface SpanCompletionPayload {
 }
 export type BoundaryRecordPayload = BoundaryBootstrap | SpanCompletionPayload | Record<string, unknown>;
 export type BoundaryEnvelope = readonly [
-    version: number,
     recordSequence: number,
     kind: BoundaryRecordKind,
     target: number,

package/dist/streaming-protocol.js

@@ -1,4 +1,3 @@
-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;
@@ -15,11 +14,8 @@ export function parseBoundaryEnvelope(text) {
     catch {
         return invalid('boundary payload is not valid JSON');
     }
-    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] !== STREAMING_PROTOCOL_VERSION) {
-        return invalid(`unsupported boundary envelope version ${JSON.stringify(parsed[0])}`);
+    if (!Array.isArray(parsed) || parsed.length !== 4) {
+        return invalid('boundary envelope must be a 4-element [recordSequence, kind, target, payload] array');
     }
     return {
         ok: true,

package/dist/streaming-record-state.d.ts

@@ -0,0 +1,6 @@
+import type { BoundaryBootstrap, SpanCompletionPayload } from './streaming-protocol.js';
+type RangePayload = BoundaryBootstrap | SpanCompletionPayload;
+type StreamedState = Record<string, unknown> | undefined;
+export declare function resolveRangeState(payload: RangePayload, sequence: number): StreamedState;
+export declare function clearRangeState(): void;
+export {};

package/dist/streaming-record-state.js

@@ -0,0 +1,54 @@
+let lastRangeSequence;
+let lastRangeState;
+export function resolveRangeState(payload, sequence) {
+    const reference = payload.stateRef;
+    if (reference === undefined) {
+        if (payload.stateDelta !== undefined) {
+            throw new Error('streaming state delta is missing its stateRef');
+        }
+        const state = payload.state;
+        if (state !== undefined && !isStateObject(state)) {
+            throw new Error('streaming range state must be an object');
+        }
+        lastRangeSequence = sequence;
+        lastRangeState = cloneState(state);
+        return state;
+    }
+    if (!Number.isSafeInteger(reference) ||
+        reference < 0 ||
+        reference >= sequence) {
+        throw new Error(`invalid streaming state reference ${String(reference)}`);
+    }
+    if (payload.state !== undefined) {
+        throw new Error('referenced streaming state must not include complete state');
+    }
+    if (lastRangeSequence === undefined || reference !== lastRangeSequence) {
+        throw new Error(`streaming state reference ${reference} does not match prior range record ${lastRangeSequence === undefined ? 'none' : lastRangeSequence}`);
+    }
+    const delta = payload.stateDelta;
+    if (delta !== undefined && !isStateObject(delta)) {
+        throw new Error('streaming state delta must be an object');
+    }
+    const state = mergeStateDelta(lastRangeState, delta);
+    lastRangeSequence = sequence;
+    lastRangeState = state;
+    return cloneState(state);
+}
+export function clearRangeState() {
+    lastRangeSequence = undefined;
+    lastRangeState = undefined;
+}
+function isStateObject(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+function mergeStateDelta(base, delta) {
+    if (delta === undefined || Object.keys(delta).length === 0)
+        return base;
+    if (base === undefined) {
+        throw new Error('streaming state delta references missing base state');
+    }
+    return { ...base, ...delta };
+}
+function cloneState(state) {
+    return state === undefined ? undefined : structuredClone(state);
+}

package/dist/streaming-template-hosts.d.ts

@@ -0,0 +1,5 @@
+import type { TemplateMeta } from './template-types.js';
+export declare function loadTemplateHostRuntime(): Promise<void> | undefined;
+export declare function prepareTemplateDefinitions(templates: Record<string, TemplateMeta>, names: readonly string[]): Promise<void> | undefined;
+export declare function invalidateTemplateHostRuntime(): void;
+export declare function resetTemplateHostRuntimeForTests(): void;

package/dist/streaming-template-hosts.js

@@ -0,0 +1,39 @@
+import { templateNeedsStaticHost } from './template-roots.js';
+let generation = 0;
+let installed = false;
+let pending;
+export function loadTemplateHostRuntime() {
+    if (installed)
+        return;
+    if (!pending) {
+        const current = generation;
+        pending = import('./static-host.js').then(({ installTemplateElementRuntime }) => {
+            if (current !== generation) {
+                throw new Error('[WebUI] Template-host activation was abandoned.');
+            }
+            installTemplateElementRuntime();
+            installed = true;
+            pending = undefined;
+        });
+    }
+    return pending;
+}
+export function prepareTemplateDefinitions(templates, names) {
+    const exclusions = window.__webui?.templateHostExclusions;
+    for (let i = 0; i < names.length; i++) {
+        const tag = names[i];
+        if (templateNeedsStaticHost(templates[tag]) &&
+            !exclusions?.has(tag) &&
+            !customElements.get(tag)) {
+            return loadTemplateHostRuntime();
+        }
+    }
+}
+export function invalidateTemplateHostRuntime() {
+    generation++;
+    pending = undefined;
+}
+export function resetTemplateHostRuntimeForTests() {
+    invalidateTemplateHostRuntime();
+    installed = false;
+}

package/dist/template-content.d.ts

@@ -13,5 +13,6 @@ export interface TemplateStylesheetDescriptor {
     readonly type: string;
 }
 export declare function cloneTemplateContent(meta: TemplateBlockMeta): DocumentFragment;
+export declare function getTemplateFragment(meta: TemplateBlockMeta): DocumentFragment;
 export declare function getTemplateStylesheets(meta: TemplateBlockMeta): readonly TemplateStylesheetDescriptor[] | undefined;
 export declare function templateHtmlMayContainLink(html: string): boolean;

package/dist/template-content.js

@@ -1,8 +1,12 @@
+import { setTemplateContent } from './trusted-types-policy.js';
 const EMPTY_STYLESHEETS = Object.freeze([]);
 const NO_LINK_STYLESHEETS = Object.freeze([]);
 const templateContentCache = new WeakMap();
 export function cloneTemplateContent(meta) {
-    return getTemplateContent(meta).fragment.cloneNode(true);
+    return getTemplateFragment(meta).cloneNode(true);
+}
+export function getTemplateFragment(meta) {
+    return getTemplateContent(meta).fragment;
 }
 export function getTemplateStylesheets(meta) {
     const stylesheets = getTemplateContent(meta, true).stylesheets;
@@ -37,7 +41,7 @@ function getTemplateContent(meta, mayContainLink) {
     if (cached)
         return cached;
     const template = document.createElement('template');
-    template.innerHTML = meta.h;
+    setTemplateContent(template, meta);
     const fragment = template.content;
     const stylesheets = (mayContainLink ?? templateHtmlMayContainLink(meta.h))
         ? collectStylesheetDescriptors(fragment)

package/dist/template-element.js

@@ -1,7 +1,7 @@
 import { deferTemplateDefinition, getTemplate } from './template.js';
-import { cloneTemplateContent, } from './template-content.js';
+import { cloneTemplateContent, getTemplateFragment, } from './template-content.js';
 import { hydrationStart, hydrationEnd } from './lifecycle.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 { ACTIVATION_ACTIVATED, ACTIVATION_ANCESTOR_BARRIER, ACTIVATION_MISSING_TEMPLATE, ACTIVATION_STATIC_HOST_OPT_OUT, isStreamingHydrationMode, resumeStreamingRoot, 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, rawMarker, } from './element/markers.js';
 import { claimSsrComponentStyles, installComponentStyles, isComponentStyleMarker, } from './element/styles.js';
@@ -10,7 +10,6 @@ import { ATTR_KIND_BOOLEAN, ATTR_KIND_COMPLEX, ATTR_KIND_TEMPLATE, hasNativeLive
 import { templateHasRoot, templateRootForAttribute } from './template-roots.js';
 const DEV = typeof __WEBUI_DEV__ === 'undefined' || __WEBUI_DEV__;
 const rootTagCache = new WeakMap();
-const templateDOMCache = new WeakMap();
 const tplOrdinalCache = new WeakMap();
 const textMarkerBoundaryCache = new WeakMap();
 const NO_TEXT_MARKER_BOUNDARIES = new Int32Array(0);
@@ -149,15 +148,6 @@ function childNodesArray(parent) {
         result[i] = children[i];
     return result;
 }
-function getTemplateDom(meta) {
-    let cached = templateDOMCache.get(meta);
-    if (cached)
-        return cached;
-    const div = document.createElement('div');
-    div.innerHTML = meta.h;
-    templateDOMCache.set(meta, div);
-    return div;
-}
 function installTemplateObservedAttributes(ctor, tagName, meta = getTemplate(tagName)) {
     if (!meta)
         return;
@@ -295,11 +285,7 @@ export class TemplateElement extends HTMLElement {
         this.$hasAncestorBoundaryState = undefined;
     }
     $resumeRetainedRoot() {
-        const resume = this[PENDING_ROOT_CONNECTED];
-        if (typeof resume !== 'function')
-            return false;
-        resume.call(this);
-        return true;
+        return resumeStreamingRoot?.(this) ?? false;
     }
     static define(tagName) {
         const ctor = this;
@@ -448,7 +434,7 @@ export class TemplateElement extends HTMLElement {
                 this.$applyPendingParentState(isSSR);
             }
             if (isSSR) {
-                this.$root = this.$hydrate(root, meta, getTemplateDom(meta));
+                this.$root = this.$hydrate(root, meta, getTemplateFragment(meta));
             }
             else {
                 clientRoot = this.$createStagingRoot(meta);
@@ -1054,31 +1040,47 @@ export class TemplateElement extends HTMLElement {
             this.$pendingFlush = false;
             return;
         }
-        if (!this.$pathIndex)
-            this.$buildPathIndex();
-        if (!this.$pathIndex)
-            return;
-        while (this.$dirtyPaths && this.$dirtyPaths.size > 0) {
-            const dirty = this.$dirtyPaths;
-            this.$dirtyPaths = null;
-            for (const path of dirty) {
+        try {
+            if (!this.$pathIndex)
+                this.$buildPathIndex();
+            if (!this.$pathIndex)
+                return;
+            while (this.$dirtyPaths && this.$dirtyPaths.size > 0) {
+                const dirty = this.$dirtyPaths;
+                this.$dirtyPaths = null;
+                const paths = dirty.values();
+                try {
+                    for (const path of paths) {
+                        if (!this.$pathIndex)
+                            this.$buildPathIndex();
+                        const entry = this.$pathIndex?.get(path);
+                        if (entry) {
+                            this.$updateBindings(entry.texts, entry.attrs, entry.conds, entry.repeats, requireKnownState);
+                        }
+                    }
+                }
+                catch (error) {
+                    for (const path of paths)
+                        (this.$dirtyPaths ??= new Set()).add(path);
+                    throw error;
+                }
                 if (!this.$pathIndex)
                     this.$buildPathIndex();
-                const entry = this.$pathIndex?.get(path);
-                if (entry) {
-                    this.$updateBindings(entry.texts, entry.attrs, entry.conds, entry.repeats, requireKnownState);
+                if (this.$wildcardBindings) {
+                    const wc = this.$wildcardBindings;
+                    this.$updateBindings(wc.texts, wc.attrs, wc.conds, wc.repeats, requireKnownState);
                 }
+                if (!this.$pathIndex)
+                    this.$buildPathIndex();
             }
-            if (!this.$pathIndex)
-                this.$buildPathIndex();
-            if (this.$wildcardBindings) {
-                const wc = this.$wildcardBindings;
-                this.$updateBindings(wc.texts, wc.attrs, wc.conds, wc.repeats, requireKnownState);
+        }
+        finally {
+            this.$pendingFlush = false;
+            if (this.$dirtyPaths?.size) {
+                this.$pendingFlush = true;
+                queueMicrotask(() => this.$flush());
             }
-            if (!this.$pathIndex)
-                this.$buildPathIndex();
         }
-        this.$pendingFlush = false;
     }
     $recordPreReadyWrite(path) {
         if (!this.$preReadyWrites)
@@ -1391,7 +1393,7 @@ export class TemplateElement extends HTMLElement {
                 const marker = repMarkers ? repMarkers[i] : null;
                 const ssrParent = (marker ? marker.parentNode : ssrElements[parentIndex]) ?? ssrRoot;
                 const blockMeta = this.$block(blockIndex);
-                const blockTplDom = blockMeta ? getTemplateDom(blockMeta) : null;
+                const blockTplDom = blockMeta ? getTemplateFragment(blockMeta) : null;
                 const rootTag = blockMeta
                     && blockTplDom?.childNodes.length === 1
                     && blockTplDom.children.length === 1
@@ -1540,7 +1542,7 @@ export class TemplateElement extends HTMLElement {
     }
     $hydrateCondContent(condAnchor, blockMeta, scope) {
         const rootTag = this.$rootTag(blockMeta);
-        const tplDom = getTemplateDom(blockMeta);
+        const tplDom = getTemplateFragment(blockMeta);
         if (rootTag && tplDom.children.length === 1 && !this.$hasRootStructuralSlot(blockMeta)) {
             const el = nextElement(condAnchor);
             if (el) {
@@ -1871,11 +1873,11 @@ export class TemplateElement extends HTMLElement {
             const range = document.createRange();
             range.setStartAfter(b.node);
             range.setEndBefore(b.rawEnd);
+            const fragment = val !== '' ? range.createContextualFragment(val) : undefined;
             range.deleteContents();
             let rawNodes;
             const rawOwner = b.rawOwner;
-            if (val !== '') {
-                const fragment = range.createContextualFragment(val);
+            if (fragment) {
                 if (rawOwner && b.node.parentNode === rawOwner.container) {
                     rawNodes = childNodesArray(fragment);
                 }

package/dist/template-registry.d.ts

@@ -0,0 +1,29 @@
+export type { CompiledAttrGroupMeta, CompiledAttrMeta, CompiledAttrPart, CompiledCondition, CompiledConditionFn, CompiledConditionalMeta, CompiledEventArg, CompiledEventArgs, CompiledEventBindingMeta, CompiledEventGroupMeta, SerializedCompiledCondition, TemplateCondition, CompiledTextRunMeta, TemplateBlockMeta, TemplateMeta, TemplateNodeIndex, TemplateSlot, } from './template-types.js';
+import { type ComponentStyles } from './element/style-catalog.js';
+import type { CompiledConditionFn, TemplateMeta } from './template-types.js';
+declare let prepareResources: ((templates: Record<string, TemplateMeta>) => Promise<void> | undefined) | undefined;
+type DefinitionPreparation = (templates: Record<string, TemplateMeta>, names: readonly string[]) => Promise<void> | undefined;
+export declare function installTemplateResourcePreparation(prepare: NonNullable<typeof prepareResources>): void;
+export declare function installTemplateDefinitionPreparation(prepare: DefinitionPreparation | null): void;
+declare global {
+    interface WebUIRuntimeGlobal {
+        state?: Record<string, unknown>;
+        templates?: Record<string, TemplateMeta>;
+        templateFns?: Record<string, CompiledConditionFn[]>;
+        componentAssetStyles?: Record<string, readonly string[]>;
+        templateHostExclusions?: Set<string>;
+        componentStyles?: ComponentStyles;
+        [key: string]: unknown;
+    }
+    interface Window {
+        __webui?: WebUIRuntimeGlobal;
+        __webuiRegisterComponentStyles?: (value: unknown) => Promise<void> | undefined;
+    }
+}
+export declare function getTemplate(name: string): TemplateMeta | undefined;
+export declare function getTemplateRegistry(): Record<string, TemplateMeta> | undefined;
+export declare function registerTemplateData(templates: Record<string, TemplateMeta>, templateFns?: Record<string, CompiledConditionFn[]>, componentStylesValue?: ComponentStyles | unknown): void;
+export declare function prepareAssetTemplateData(templates: Record<string, TemplateMeta>, templateFns?: Record<string, CompiledConditionFn[]>): void;
+export declare function deferTemplateDefinition(tagName: string, ctor: Function, define: () => void): void;
+export declare function releaseSSRBootstrapState(): void;
+export declare function releaseNonRoutedSSRBootstrapState(): void;