@microsoft/webui-framework 0.0.28 → 0.0.30

package/dist/element.js

@@ -7,6 +7,9 @@ const RENDER_ATTR = 'w-render';
 const HYDRATE_EAGER = 'eager';
 const INTERACTION_HYDRATION = 3;
 const LAZY_RENDER_INTERACTION = 4;
+const AUTHORED_LIVE = 1;
+const AUTHORED_PENDING = 2;
+const AUTHORED_FLUSHING = 4;
 const DEV = typeof __WEBUI_DEV__ === 'undefined' || __WEBUI_DEV__;
 let warnedMissingLazyHydrationEntry = false;
 function warnMissingLazyHydrationEntry(tag, policy) {
@@ -22,6 +25,121 @@ function warnMissingLazyHydrationEntry(tag, policy) {
         'your component definitions to enable visibility-deferred hydration.');
 }
 export class WebUIElement extends TemplateElement {
+    constructor() {
+        super();
+        const names = getObservableNames(this.constructor);
+        for (const name of names) {
+            if (!Object.prototype.hasOwnProperty.call(this, name))
+                continue;
+            (this.$preUpgradeProperties ??= new Map()).set(name, this[name]);
+            delete this[name];
+        }
+    }
+    connectedCallback() {
+        const properties = this.$preUpgradeProperties;
+        if (properties) {
+            this.$preUpgradeProperties = undefined;
+            for (const [name, value] of properties) {
+                this[name] = value;
+            }
+        }
+        super.connectedCallback();
+    }
+    $destroy() {
+        if (this.$authoredPhase !== undefined)
+            this.$authoredPhase &= ~AUTHORED_LIVE;
+        super.$destroy();
+    }
+    $recordPropertyChange(name, oldValue) {
+        if (this.$authoredPhase === undefined)
+            return;
+        const changes = this.$pendingPropertyChanges;
+        if ((this.$authoredPhase & AUTHORED_LIVE) && this.$canRunAuthoredEffects()) {
+            if (changes?.has(name)) {
+                oldValue = changes.get(name);
+                changes.delete(name);
+            }
+            try {
+                this.$invokePropertyChange(name, oldValue);
+            }
+            finally {
+                this.$releasePropertyChanges();
+            }
+        }
+        else {
+            const queued = changes ?? (this.$pendingPropertyChanges = new Map());
+            if (!queued.has(name))
+                queued.set(name, oldValue);
+            this.$authoredPhase |= AUTHORED_PENDING;
+        }
+    }
+    $reconcileAuthoredState() {
+        if (!this.$canRunAuthoredEffects())
+            return !this.$pendingPropertyChanges;
+        if (this.$authoredPhase === undefined) {
+            const names = getObservableNames(this.constructor);
+            for (const name of names) {
+                if (typeof this[`${name}Changed`] !== 'function')
+                    continue;
+                this.$authoredPhase = AUTHORED_LIVE;
+                if (Object.prototype.hasOwnProperty.call(this, `_${name}`)) {
+                    (this.$pendingPropertyChanges ??= new Map()).set(name, undefined);
+                }
+            }
+        }
+        if (this.$authoredPhase === undefined)
+            return true;
+        this.$authoredPhase |= AUTHORED_LIVE;
+        if (this.$authoredPhase & AUTHORED_FLUSHING)
+            return false;
+        if (this.$pendingPropertyChanges) {
+            this.$authoredPhase |= AUTHORED_PENDING;
+            this.$flushAuthoredChanges();
+        }
+        return !this.$pendingPropertyChanges;
+    }
+    $flushUpdates() {
+        if (this.$pendingPropertyChanges)
+            this.$notifyHydrated();
+        super.$flushUpdates();
+    }
+    $flushAuthoredChanges() {
+        const changes = this.$pendingPropertyChanges;
+        if (!changes || !this.$canRunAuthoredEffects())
+            return;
+        this.$authoredPhase = AUTHORED_LIVE | AUTHORED_PENDING | AUTHORED_FLUSHING;
+        try {
+            for (const [name, oldValue] of changes) {
+                if (!this.$canRunAuthoredEffects()) {
+                    this.$authoredPhase &= ~AUTHORED_LIVE;
+                    break;
+                }
+                changes.delete(name);
+                this.$invokePropertyChange(name, oldValue);
+            }
+        }
+        finally {
+            this.$authoredPhase &= ~AUTHORED_FLUSHING;
+            this.$releasePropertyChanges();
+        }
+    }
+    $invokePropertyChange(name, oldValue) {
+        const value = this[name];
+        if (Object.is(oldValue, value))
+            return;
+        const callback = this[`${name}Changed`];
+        if (typeof callback === 'function') {
+            callback.call(this, oldValue, value);
+        }
+    }
+    $releasePropertyChanges() {
+        const phase = this.$authoredPhase;
+        if (phase !== undefined && this.$pendingPropertyChanges?.size === 0 &&
+            !(phase & AUTHORED_FLUSHING)) {
+            this.$pendingPropertyChanges = undefined;
+            this.$authoredPhase = phase & ~AUTHORED_PENDING;
+        }
+    }
     $shouldDeferSSRHydration(meta) {
         this.$lazyHydrationMode = this.$resolveLazyHydrationMode(meta);
         return this.$lazyHydrationMode !== undefined;
@@ -90,6 +208,8 @@ export class WebUIElement extends TemplateElement {
         this.$activateDeferredSSR(state);
     }
     disconnectedCallback() {
+        if (this.$authoredPhase !== undefined)
+            this.$authoredPhase &= ~AUTHORED_LIVE;
         if (this.$lazyHydrationMode !== undefined) {
             disconnectLazyHydration(this);
         }
@@ -103,7 +223,8 @@ export class WebUIElement extends TemplateElement {
         return attribute === undefined || !this.hasAttribute(attribute);
     }
     $syncAuthoredAttributes() {
-        syncAttrProperties(this, this.constructor);
+        if (this.isConnected)
+            syncAttrProperties(this, this.constructor);
     }
     $emit(name, detail) {
         return this.dispatchEvent(new CustomEvent(name, {

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;

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.d.ts

@@ -19,7 +19,7 @@ export declare class TemplateElement extends HTMLElement {
     private $hydrated;
     private $deferredClientMount;
     private $resetClientShadow;
-    private $hasMounted;
+    private $mountPhase;
     private $deferredSSR;
     private $activatingDeferredSSR;
     private $deferredAncestor;
@@ -78,7 +78,7 @@ export declare class TemplateElement extends HTMLElement {
     protected $shouldApplySSRState(_key: string): boolean;
     protected $syncAuthoredAttributes(): void;
     protected hydratedCallback(): void;
-    private $notifyHydrated;
+    protected $notifyHydrated(): void;
     private $finishHydration;
     protected $shouldApplyTemplateStateFromSSR(_key: string): boolean;
     protected $setTemplateState(key: string, value: unknown): boolean;
@@ -93,6 +93,8 @@ export declare class TemplateElement extends HTMLElement {
     private $recordDeferredWrite;
     private $replayDeferredWrites;
     $flushUpdates(): void;
+    protected $reconcileAuthoredState(): boolean;
+    protected $canRunAuthoredEffects(): boolean;
     private $flush;
     private $recordPreReadyWrite;
     private $checkHydrationMismatch;