@microsoft/webui-framework 0.0.24 → 0.0.26

package/dist/index.d.ts

@@ -2,4 +2,6 @@ export { WebUIElement } from './element.js';
 export { observable, attr } from './decorators.js';
 export { getTemplate, registerTemplateData } from './template.js';
 export type { TemplateMeta } from './template.js';
+export { installComponentStyles, prepareComponentStyles, registerComponentStyles, } from './element/styles.js';
+export type { ComponentStyleResource, ComponentStyles, } from './element/styles.js';
 export { hydrationStart, hydrationEnd } from './lifecycle.js';

package/dist/index.js

@@ -3,4 +3,5 @@ setTimeout(installTemplateElementRuntime, 0);
 export { WebUIElement } from './element.js';
 export { observable, attr } from './decorators.js';
 export { getTemplate, registerTemplateData } from './template.js';
+export { installComponentStyles, prepareComponentStyles, registerComponentStyles, } from './element/styles.js';
 export { hydrationStart, hydrationEnd } from './lifecycle.js';

package/dist/interaction-hydration.d.ts

@@ -0,0 +1,8 @@
+export interface InteractionHydrationOptions {
+    load: () => Promise<unknown>;
+    onError?: (error: unknown) => void;
+    root?: Element;
+}
+export declare function isInteractionReplay(event: Event): boolean;
+export declare function installInteractionHydration(options: InteractionHydrationOptions): () => void;
+export declare function wakeInteractionHydration(root?: Element): Promise<void>;

package/dist/interaction-hydration.js

@@ -0,0 +1,167 @@
+const INTERACTION_ROOT_SELECTOR = '[data-webui-interaction]';
+const WAKE_EVENTS = [
+    'pointerdown',
+    'focusin',
+    'keydown',
+];
+const installedBoundaries = new WeakMap();
+let compilerRoot;
+const interactionReplays = new WeakMap();
+export function isInteractionReplay(event) {
+    return interactionReplays.has(event);
+}
+export function installInteractionHydration(options) {
+    const root = options.root ?? compilerMarkedRoot();
+    const existing = installedBoundaries.get(root);
+    if (existing)
+        return existing.dispose;
+    let loading;
+    let listening = true;
+    let disposed = false;
+    const disposal = {};
+    const dispose = createDisposer(disposal);
+    const remove = () => {
+        if (!listening)
+            return;
+        listening = false;
+        for (let i = 0; i < WAKE_EVENTS.length; i++) {
+            root.removeEventListener(WAKE_EVENTS[i], wake, true);
+        }
+        root.removeEventListener('click', replay, true);
+        installedBoundaries.delete(root);
+        disposal.callback = undefined;
+    };
+    disposal.callback = () => {
+        disposed = true;
+        remove();
+    };
+    const ensureLoaded = () => {
+        loading ??= Promise.resolve().then(options.load).then(() => {
+            remove();
+        }, (error) => {
+            remove();
+            reportFailure(error, options.onError);
+            throw error;
+        });
+        return loading;
+    };
+    const wake = () => {
+        void ensureLoaded().catch(() => { });
+    };
+    const replay = (event) => {
+        if (!listening || hasTraversed(event, root))
+            return;
+        const target = event.composedPath()[0] ?? event.target;
+        const replayEvent = target ? cloneClick(event, target, root) : null;
+        if (!replayEvent) {
+            wake();
+            return;
+        }
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        const dispatchReplay = () => {
+            if (!disposed)
+                target.dispatchEvent(replayEvent);
+        };
+        void ensureLoaded().then(dispatchReplay, dispatchReplay);
+    };
+    installedBoundaries.set(root, { dispose, wake: ensureLoaded });
+    for (let i = 0; i < WAKE_EVENTS.length; i++) {
+        root.addEventListener(WAKE_EVENTS[i], wake, true);
+    }
+    root.addEventListener('click', replay, true);
+    return dispose;
+}
+function createDisposer(slot) {
+    return () => slot.callback?.();
+}
+export function wakeInteractionHydration(root) {
+    const target = root ?? compilerMarkedRoot();
+    const boundary = installedBoundaries.get(target);
+    if (!boundary) {
+        throw new Error('[WebUI] interaction hydration boundary is not installed.');
+    }
+    return boundary.wake();
+}
+function compilerMarkedRoot() {
+    const cached = compilerRoot?.deref();
+    if (cached && cached.isConnected !== false)
+        return cached;
+    const roots = compilerMarkedRoots();
+    if (roots.length !== 1) {
+        throw new Error(`[WebUI] interaction hydration requires exactly one compiler-marked root; found ${roots.length}.`);
+    }
+    const root = roots[0];
+    root.removeAttribute('data-webui-interaction');
+    compilerRoot = new WeakRef(root);
+    return root;
+}
+function compilerMarkedRoots() {
+    const matches = [];
+    const scopes = [document];
+    for (let scopeIndex = 0; scopeIndex < scopes.length; scopeIndex++) {
+        const scope = scopes[scopeIndex];
+        const marked = scope.querySelectorAll(INTERACTION_ROOT_SELECTOR);
+        for (let i = 0; i < marked.length; i++)
+            matches.push(marked[i]);
+        const elements = scope.querySelectorAll('*');
+        for (let i = 0; i < elements.length; i++) {
+            const shadowRoot = elements[i].shadowRoot;
+            if (shadowRoot)
+                scopes.push(shadowRoot);
+        }
+    }
+    return matches;
+}
+function cloneClick(event, target, boundary) {
+    const ownerDocument = 'ownerDocument' in target
+        ? target
+            .ownerDocument
+        : undefined;
+    const view = (ownerDocument?.defaultView);
+    const MouseEventConstructor = view?.MouseEvent
+        ?? (typeof MouseEvent === 'function' ? MouseEvent : undefined);
+    if (!MouseEventConstructor
+        || !(event instanceof MouseEventConstructor)
+        || !event.cancelable
+        || event.defaultPrevented
+        || event.button !== 0
+        || event.altKey
+        || event.ctrlKey
+        || event.metaKey
+        || event.shiftKey) {
+        return null;
+    }
+    const PointerEventConstructor = view?.PointerEvent
+        ?? (typeof PointerEvent === 'function' ? PointerEvent : undefined);
+    const replayEvent = PointerEventConstructor
+        && event instanceof PointerEventConstructor
+        ? new PointerEventConstructor('click', event)
+        : new MouseEventConstructor('click', event);
+    interactionReplays.set(replayEvent, {
+        boundary,
+        previous: interactionReplays.get(event),
+    });
+    return replayEvent;
+}
+function hasTraversed(event, boundary) {
+    let trail = interactionReplays.get(event);
+    while (trail) {
+        if (trail.boundary === boundary)
+            return true;
+        trail = trail.previous;
+    }
+    return false;
+}
+function reportFailure(error, onError) {
+    if (onError) {
+        try {
+            onError(error);
+        }
+        catch (onErrorFailure) {
+            console.error('[WebUI] interaction hydration error handler failed:', onErrorFailure);
+        }
+        return;
+    }
+    console.error(`[WebUI] interaction hydration failed: ${error instanceof Error ? error.message : String(error)}`);
+}

package/dist/static-host.js

@@ -1,8 +1,22 @@
-import { TemplateElement } from './template-element.js';
+import { consumePendingParentState, TemplateElement, } from './template-element.js';
+import { hasComponentStyleWork } from './element/styles.js';
 import { getTemplateRegistry } 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';
 let runtimeInstalled = false;
+function applyPendingNoopHostState(host) {
+    const pending = consumePendingParentState(host);
+    if (!pending)
+        return;
+    const target = host;
+    const keys = Object.keys(pending.values);
+    for (let i = 0; i < keys.length; i++) {
+        const key = keys[i];
+        if (!Object.hasOwn(target, key))
+            target[key] = pending.values[key];
+    }
+}
 function defineTemplateHost(tag, meta) {
     const w = window;
     if (!w.__webui)
@@ -11,6 +25,22 @@ function defineTemplateHost(tag, meta) {
         w.__webui.templates = {};
     if (!w.__webui.templates[tag])
         w.__webui.templates[tag] = meta;
+    if (templateIsNoopHost(meta) && !hasComponentStyleWork(tag)) {
+        customElements.define(tag, class extends HTMLElement {
+            connectedCallback() {
+                if (isStreamingHydrationMode() &&
+                    this.hasAttribute(STREAMED_HOST_ATTR)) {
+                    return;
+                }
+                applyPendingNoopHostState(this);
+            }
+            [STREAMING_BOUNDARY_ACTIVATE]() {
+                applyPendingNoopHostState(this);
+                return ACTIVATION_STATIC_HOST_OPT_OUT;
+            }
+        });
+        return;
+    }
     class StaticTemplateHost extends TemplateElement {
         $afterExternalStateWrite(applied) {
             if (applied)
@@ -28,6 +58,18 @@ function defineTemplateHost(tag, meta) {
     }
     StaticTemplateHost.define(tag);
 }
+function templateIsNoopHost(meta) {
+    return meta.h.length === 0
+        && meta.tx === undefined
+        && meta.a === undefined
+        && meta.c === undefined
+        && meta.r === undefined
+        && meta.eg === undefined
+        && meta.b === undefined
+        && meta.re === undefined
+        && meta.tr === undefined
+        && meta.sd === undefined;
+}
 function defineMissingTemplateHost(tag, meta) {
     if (!templateNeedsStaticHost(meta) ||
         window.__webui?.templateHostExclusions?.has(tag) ||

package/dist/streaming-activation.d.ts

@@ -1,2 +1,2 @@
-import type { PendingBoundaryUpdates } from './streaming-deferred.js';
-export declare function activateRootsBetween(startMarker: Comment, endMarker: Comment, state: Record<string, unknown> | undefined, updates?: PendingBoundaryUpdates): void;
+import type { PendingBoundaryUpdates, SpanBypass } from './streaming-deferred.js';
+export declare function activateRootsBetween(startMarker: Comment, endMarker: Comment, state: Record<string, unknown> | undefined, updates?: PendingBoundaryUpdates, bypass?: SpanBypass): void;

package/dist/streaming-activation.js

@@ -1,11 +1,13 @@
 import { abandonDeferredRange, } from './streaming-cleanup.js';
 import { activateDeferredTree, } from './streaming-deferred.js';
-export function activateRootsBetween(startMarker, endMarker, state, updates) {
+export function activateRootsBetween(startMarker, endMarker, state, updates, bypass) {
     const root = startMarker.parentNode;
     if (!root) {
         throw new Error('boundary start marker was detached before activation');
     }
-    const failure = activateDeferredTree(startMarker.nextSibling, root, endMarker, state, updates ? { updates, countRetention: true } : undefined);
+    const failure = activateDeferredTree(startMarker.nextSibling, root, endMarker, state, updates || bypass
+        ? { updates, bypass, countRetention: updates !== undefined }
+        : undefined);
     if (!failure)
         return;
     abandonDeferredRange(startMarker, endMarker);

package/dist/streaming-bootstrap.d.ts

@@ -1,2 +1,2 @@
-import type { BoundaryBootstrap } from './streaming-protocol.js';
-export declare function applyBoundaryBootstrap(bootstrap: BoundaryBootstrap): void;
+import type { BoundaryBootstrap, SpanCompletionPayload } from './streaming-protocol.js';
+export declare function applyBoundaryBootstrap(bootstrap: BoundaryBootstrap | SpanCompletionPayload): void;

package/dist/streaming-bootstrap.js

@@ -1,5 +1,7 @@
 import { registerTemplateData } from './template.js';
+import { registerComponentStyles } from './element/styles.js';
 export function applyBoundaryBootstrap(bootstrap) {
+    registerComponentStyles(bootstrap.componentStyles);
     if (bootstrap.templates)
         registerTemplateData(bootstrap.templates);
     const w = window;
@@ -8,7 +10,11 @@ export function applyBoundaryBootstrap(bootstrap) {
     const keys = Object.keys(bootstrap);
     for (let i = 0; i < keys.length; i++) {
         const key = keys[i];
-        if (key === 'templates' || key === 'state')
+        if (key === 'templates' ||
+            key === 'state' ||
+            key === 'componentStyles' ||
+            key === 'declarationId' ||
+            key === 'enclosingSpanInstanceId')
             continue;
         if (key === 'inventory') {
             w.__webui.inventory = mergeInventory(w.__webui.inventory, bootstrap.inventory);

package/dist/streaming-cleanup.d.ts

@@ -1,4 +1,5 @@
 export declare function abandonDeferredElement(el: Element): void;
+export declare function removeStreamingAttributes(el: Element): void;
 export declare function abandonDeferredDescendants(root: Element): void;
 export declare function abandonDeferredRange(startMarker: Comment, endMarker: Node): void;
 export declare function abandonDeferredDocumentRoots(): void;

package/dist/streaming-cleanup.js

@@ -1,13 +1,19 @@
-import { firstNodeWithin, MAX_MARKER_SCAN_NODES, nextWithinRoot, safeRemoveAttribute, streamingErrorMessage, } from './streaming-dom.js';
+import { BOUNDARY_SCRIPT_ATTR, BOUNDARY_START_PREFIX, firstNodeWithin, isRangeEndMarker, MAX_MARKER_SCAN_NODES, nextAfterSubtreeWithin, nextWithinRoot, safeRemoveAttribute, safeRemove, SPAN_START_PREFIX, STREAMING_ENCLOSING_SPAN_ATTR, STREAMING_SPAN_HOST_ATTR, streamingErrorMessage, } from './streaming-dom.js';
 import { STREAMED_HOST_ATTR } from './streaming-mode.js';
 const STREAMING_BOUNDARY_ABANDON = Symbol.for('microsoft.webui.boundaryAbandon');
+const STREAMING_ROOT_ATTRS = [
+    STREAMED_HOST_ATTR,
+    STREAMING_SPAN_HOST_ATTR,
+    STREAMING_ENCLOSING_SPAN_ATTR,
+];
 export function abandonDeferredElement(el) {
+    const marked = hasStreamingAttribute(el);
     try {
-        if (!el.hasAttribute(STREAMED_HOST_ATTR))
+        if (!marked)
             return;
     }
     catch {
-        safeRemoveAttribute(el, STREAMED_HOST_ATTR);
+        removeStreamingAttributes(el);
         return;
     }
     try {
@@ -19,7 +25,19 @@ export function abandonDeferredElement(el) {
         console.error(`[WebUI] streaming: abandon failed for <${el.tagName?.toLowerCase?.() ?? '?'}>: ${streamingErrorMessage(error)}`);
     }
     finally {
-        safeRemoveAttribute(el, STREAMED_HOST_ATTR);
+        removeStreamingAttributes(el);
+    }
+}
+function hasStreamingAttribute(el) {
+    for (let i = 0; i < STREAMING_ROOT_ATTRS.length; i++) {
+        if (el.hasAttribute(STREAMING_ROOT_ATTRS[i]))
+            return true;
+    }
+    return false;
+}
+export function removeStreamingAttributes(el) {
+    for (let i = 0; i < STREAMING_ROOT_ATTRS.length; i++) {
+        safeRemoveAttribute(el, STREAMING_ROOT_ATTRS[i]);
     }
 }
 export function abandonDeferredDescendants(root) {
@@ -47,20 +65,54 @@ export function abandonDeferredDocumentRoots() {
         typeof document.getElementsByTagName !== 'function') {
         return;
     }
+    const documentRoot = document.documentElement;
+    if (documentRoot) {
+        abandonStreamingNodes(documentRoot.firstChild, documentRoot);
+        abandonDeferredElement(documentRoot);
+        return;
+    }
     const elements = document.getElementsByTagName('*');
-    let visited = 0;
-    for (let i = 0; i < elements.length && visited < MAX_MARKER_SCAN_NODES; i++) {
+    const limit = elements.length < MAX_MARKER_SCAN_NODES
+        ? elements.length
+        : MAX_MARKER_SCAN_NODES;
+    for (let i = 0; i < limit; i++) {
         const el = elements[i];
-        visited++;
         abandonDeferredElement(el);
         const shadowRoot = el.shadowRoot;
-        let node = shadowRoot?.firstChild ?? null;
-        while (node && visited < MAX_MARKER_SCAN_NODES) {
-            visited++;
-            if (node.nodeType === 1) {
-                abandonDeferredElement(node);
-            }
-            node = nextWithinRoot(node, shadowRoot);
+        if (shadowRoot)
+            abandonStreamingNodes(shadowRoot.firstChild, shadowRoot);
+    }
+}
+function abandonStreamingNodes(first, root) {
+    let node = first;
+    let visited = 0;
+    while (node && visited < MAX_MARKER_SCAN_NODES) {
+        visited++;
+        if (node.nodeType === 8) {
+            const next = nextWithinRoot(node, root);
+            if (isStreamingMarker(node.data))
+                safeRemove(node);
+            node = next;
+            continue;
         }
+        if (node.nodeType === 1) {
+            const el = node;
+            const scaffold = el.tagName === 'WEBUI-HYDRATE' ||
+                el.hasAttribute(BOUNDARY_SCRIPT_ATTR);
+            const next = scaffold
+                ? nextAfterSubtreeWithin(node, root)
+                : nextWithinRoot(node, root);
+            abandonDeferredElement(el);
+            if (scaffold)
+                safeRemove(el);
+            node = next;
+            continue;
+        }
+        node = nextWithinRoot(node, root);
     }
 }
+function isStreamingMarker(data) {
+    return data.startsWith(BOUNDARY_START_PREFIX) ||
+        data.startsWith(SPAN_START_PREFIX) ||
+        isRangeEndMarker(data);
+}

package/dist/streaming-coordinator.d.ts

@@ -1,7 +1,8 @@
-import { elementHasPendingStateForTests, pendingTagWaiterCountForTests, pendingUndefinedRootCountForTests } from './streaming-deferred.js';
+import { elementHasPendingStateForTests, pendingBarrierRootCountForTests, pendingTagWaiterCountForTests, pendingUndefinedRootCountForTests } from './streaming-deferred.js';
+import { openSpanCountForTests } from './streaming-spans.js';
 export declare function enqueueStreamingSentinel(sentinel: Element): void;
 export declare function installStreamingTruncationGuard(): void;
 export declare function resetStreamingCoordinatorStateForTests(): void;
 export declare function isStreamingHaltedForTests(): boolean;
 export declare function streamingRetentionStateForTests(): readonly [number, number];
-export { elementHasPendingStateForTests, pendingTagWaiterCountForTests, pendingUndefinedRootCountForTests, };
+export { elementHasPendingStateForTests, openSpanCountForTests, pendingBarrierRootCountForTests, pendingTagWaiterCountForTests, pendingUndefinedRootCountForTests, };