@microsoft/webui-framework 0.0.28 → 0.0.29

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-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;

package/dist/template-registry.js

@@ -0,0 +1,228 @@
+import { dispatchTemplatesRegistered, templateRegistrationDetail, TEMPLATES_REGISTERED_EVENT, } from './template-events.js';
+import { prepareComponentStyles, registerComponentStyles, registerPreparedComponentStyles, validateComponentStylesRegistration, } from './element/style-catalog.js';
+import { registerTrustedTemplateBlock } from './trusted-types-policy.js';
+const WEBUI_DATA_ID = 'webui-data';
+const HYDRATION_COMPLETE_EVENT = 'webui:hydration-complete';
+const TEMPLATE_FN_COUNT = Symbol.for('microsoft.webui.templateFnCount');
+const normalizedTemplates = new WeakSet();
+const assetNormalizedTemplates = new WeakSet();
+let webuiDataLoaded = false;
+function runtimeTemplateFnCount(registry) {
+    const count = registry[TEMPLATE_FN_COUNT];
+    if (typeof count === 'number')
+        return count;
+    const initialized = Object.keys(registry).length;
+    registry[TEMPLATE_FN_COUNT] = initialized;
+    return initialized;
+}
+const pendingTemplateDefinitions = new Map();
+let prepareResources;
+let prepareDefinitions;
+export function installTemplateResourcePreparation(prepare) {
+    prepareResources = prepare;
+}
+export function installTemplateDefinitionPreparation(prepare) {
+    if (prepareDefinitions !== null)
+        prepareDefinitions = prepare;
+}
+function acceptTemplateData(templates, templateFns, componentStyles) {
+    validateComponentStylesRegistration(componentStyles);
+    prepareTemplateData(templates, templateFns);
+    if (componentStyles) {
+        registerPreparedComponentStyles(componentStyles);
+    }
+    const w = window;
+    if (!w.__webui)
+        w.__webui = {};
+    if (!w.__webui.templates)
+        w.__webui.templates = {};
+    const names = Object.keys(templates);
+    for (let i = 0; i < names.length; i++) {
+        const tag = names[i];
+        w.__webui.templates[tag] = templates[tag];
+    }
+    for (let i = 0; i < names.length; i++) {
+        const pending = pendingTemplateDefinitions.get(names[i]);
+        if (!pending)
+            continue;
+        pendingTemplateDefinitions.delete(names[i]);
+        pending.define();
+    }
+    return names;
+}
+if (typeof window !== 'undefined' && typeof window.addEventListener === 'function') {
+    if (window.__webui?.componentStyles) {
+        registerComponentStyles(window.__webui.componentStyles);
+    }
+    window.addEventListener(TEMPLATES_REGISTERED_EVENT, (event) => {
+        const detail = templateRegistrationDetail(event);
+        if (!detail?.templates)
+            return;
+        const styles = detail.componentStyles === undefined
+            ? undefined
+            : prepareComponentStyles(detail.componentStyles);
+        const templates = detail.templates;
+        const names = acceptTemplateData(templates, undefined, styles);
+        const definitions = detail.waitUntil
+            ? prepareDefinitions?.(templates, names)
+            : undefined;
+        if (definitions) {
+            detail.waitUntil?.(definitions.then(() => prepareResources?.(templates)));
+        }
+        else {
+            const ready = prepareResources?.(templates);
+            if (ready)
+                detail.waitUntil?.(ready);
+        }
+    });
+    window.addEventListener(HYDRATION_COMPLETE_EVENT, releaseNonRoutedSSRBootstrapState, { once: true });
+}
+export function getTemplate(name) {
+    let meta = window.__webui?.templates?.[name];
+    if (!meta) {
+        loadWebUIDataBlock();
+        meta = window.__webui?.templates?.[name];
+    }
+    if (meta)
+        normalizeTemplate(name, meta);
+    return meta;
+}
+export function getTemplateRegistry() {
+    loadWebUIDataBlock();
+    return window.__webui?.templates;
+}
+export function registerTemplateData(templates, templateFns, componentStylesValue) {
+    const componentStyles = prepareComponentStyles(componentStylesValue);
+    if (acceptTemplateData(templates, templateFns, componentStyles).length > 0) {
+        dispatchTemplatesRegistered(templates);
+    }
+}
+function prepareTemplateData(templates, templateFns) {
+    const names = Object.keys(templates);
+    for (let i = 0; i < names.length; i++) {
+        const name = names[i];
+        normalizeTemplate(name, templates[name], templateFns?.[name]);
+    }
+}
+export function prepareAssetTemplateData(templates, templateFns) {
+    const names = Object.keys(templates);
+    for (let i = 0; i < names.length; i++) {
+        const name = names[i];
+        const meta = templates[name];
+        if (assetNormalizedTemplates.has(meta))
+            continue;
+        normalizeTemplateConditions(name, meta, templateFns?.[name] ?? []);
+        normalizedTemplates.add(meta);
+        assetNormalizedTemplates.add(meta);
+    }
+}
+export function deferTemplateDefinition(tagName, ctor, define) {
+    const pending = pendingTemplateDefinitions.get(tagName);
+    if (pending) {
+        if (pending.ctor === ctor) {
+            throw new Error(`[WebUI] <${tagName}> is already pending definition.`);
+        }
+        throw new Error(`[WebUI] <${tagName}> already has a pending authored definition.`);
+    }
+    pendingTemplateDefinitions.set(tagName, { ctor, define });
+}
+function loadWebUIDataBlock() {
+    if (webuiDataLoaded || window.__webui?.state !== undefined || typeof document === 'undefined')
+        return;
+    const el = document.getElementById(WEBUI_DATA_ID);
+    if (!el) {
+        webuiDataLoaded = true;
+        return;
+    }
+    const text = el.textContent;
+    if (text) {
+        const templateFns = window.__webui?.templateFns;
+        const componentAssetStyles = window.__webui?.componentAssetStyles;
+        const parsed = JSON.parse(text);
+        if (templateFns)
+            parsed.templateFns = templateFns;
+        if (componentAssetStyles)
+            parsed.componentAssetStyles = componentAssetStyles;
+        window.__webui = parsed;
+        el.remove();
+        webuiDataLoaded = true;
+        if (parsed.componentStyles !== undefined) {
+            registerComponentStyles(parsed.componentStyles);
+        }
+        return;
+    }
+    el.remove();
+    webuiDataLoaded = true;
+}
+export function releaseSSRBootstrapState() {
+    const runtime = window.__webui;
+    if (runtime?.state !== undefined) {
+        delete runtime.state;
+    }
+}
+export function releaseNonRoutedSSRBootstrapState() {
+    const runtime = window.__webui;
+    if (runtime?.chain === undefined &&
+        runtime?.templateHostExclusions === undefined) {
+        releaseSSRBootstrapState();
+    }
+}
+function normalizeTemplate(name, meta, suppliedFns) {
+    if (normalizedTemplates.has(meta))
+        return;
+    const runtimeFns = window.__webui?.templateFns;
+    const fns = suppliedFns ?? runtimeFns?.[name] ?? [];
+    normalizeTemplateConditions(name, meta, fns);
+    normalizedTemplates.add(meta);
+    if (suppliedFns === undefined && runtimeFns?.[name] === fns) {
+        let remaining = runtimeTemplateFnCount(runtimeFns);
+        delete runtimeFns[name];
+        remaining--;
+        runtimeFns[TEMPLATE_FN_COUNT] = remaining;
+        if (remaining === 0 && window.__webui) {
+            const liveCount = Object.keys(runtimeFns).length;
+            if (liveCount === 0) {
+                delete window.__webui.templateFns;
+            }
+            else {
+                runtimeFns[TEMPLATE_FN_COUNT] = liveCount;
+            }
+        }
+    }
+}
+function normalizeTemplateConditions(name, meta, fns) {
+    const stack = [meta];
+    while (stack.length > 0) {
+        const block = stack.pop();
+        if (!block)
+            continue;
+        registerTrustedTemplateBlock(block);
+        if (block.a) {
+            for (let i = 0; i < block.a.length; i++) {
+                const attr = block.a[i];
+                if (attr[1] === 2)
+                    normalizeCondition(name, attr[2], fns);
+            }
+        }
+        if (block.c) {
+            for (let i = 0; i < block.c.length; i++) {
+                normalizeCondition(name, block.c[i][0], fns);
+            }
+        }
+        const children = block.b;
+        if (children) {
+            for (let i = 0; i < children.length; i++)
+                stack.push(children[i]);
+        }
+    }
+}
+function normalizeCondition(tagName, condition, fns) {
+    const first = condition[0];
+    if (typeof first === 'function')
+        return;
+    const fn = fns[first];
+    if (typeof fn !== 'function') {
+        throw new Error(`[WebUI] Missing condition closure ${first} for <${tagName}>.`);
+    }
+    condition[0] = fn;
+}

package/dist/template.d.ts

@@ -1,25 +1 @@
-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/styles.js';
-import type { CompiledConditionFn, TemplateMeta } from './template-types.js';
-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;
+export * from './template-registry.js';