@microsoft/webui-framework 0.0.28 → 0.0.30

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;
@@ -214,6 +204,8 @@ function hasAuthoredMember(instance, key) {
     }
     return false;
 }
+const MOUNTED = 1;
+const HYDRATION_NOTIFIED = 2;
 export class TemplateElement extends HTMLElement {
     constructor() {
         super(...arguments);
@@ -222,7 +214,7 @@ export class TemplateElement extends HTMLElement {
         this.$hydrated = false;
         this.$deferredClientMount = false;
         this.$resetClientShadow = false;
-        this.$hasMounted = false;
+        this.$mountPhase = 0;
         this.$deferredSSR = false;
         this.$activatingDeferredSSR = false;
         this.$hasUnknownScopes = false;
@@ -295,11 +287,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;
@@ -336,6 +324,8 @@ export class TemplateElement extends HTMLElement {
             hydrationStart();
             try {
                 this.$ready = true;
+                this.$syncAuthoredAttributes();
+                this.$notifyHydrated();
                 this.$update();
             }
             finally {
@@ -343,7 +333,7 @@ export class TemplateElement extends HTMLElement {
             }
             return;
         }
-        if (!this.$hasMounted &&
+        if (!this.$mountPhase &&
             isStreamingHydrationMode() &&
             this.hasAttribute(STREAMED_HOST_ATTR)) {
             this.$deferredSSR = true;
@@ -360,7 +350,7 @@ export class TemplateElement extends HTMLElement {
             return;
         }
         this.$meta = meta;
-        if (this.$hasMounted) {
+        if (this.$mountPhase) {
             this.$remount(meta);
         }
         else {
@@ -448,7 +438,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);
@@ -870,10 +860,14 @@ export class TemplateElement extends HTMLElement {
     hydratedCallback() {
     }
     $notifyHydrated() {
-        if (this.$hasMounted)
+        if (!this.$mountPhase)
+            this.$mountPhase = MOUNTED;
+        if (!this.$reconcileAuthoredState())
             return;
-        this.$hasMounted = true;
-        this.hydratedCallback();
+        if (this.$mountPhase === MOUNTED) {
+            this.$mountPhase = HYDRATION_NOTIFIED;
+            this.hydratedCallback();
+        }
     }
     $finishHydration() {
         let callbackFailed = false;
@@ -1045,40 +1039,65 @@ export class TemplateElement extends HTMLElement {
         this.$flush(true);
     }
     $flushUpdates() {
+        if (this.$mountPhase === MOUNTED)
+            this.$notifyHydrated();
         if (this.$pendingFlush)
             this.$flush();
     }
+    $reconcileAuthoredState() {
+        return true;
+    }
+    $canRunAuthoredEffects() {
+        return this.$hydrated && this.$root !== null && this.$ready &&
+            !this.$deferredClientMount && this.isConnected;
+    }
     $flush(requireKnownState = this.$guardUnknownState === true) {
         if (!this.$ready || !this.$root) {
             this.$dirtyPaths = null;
             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 +1410,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 +1559,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 +1890,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';