@microsoft/webui-framework 0.0.19 → 0.0.21

package/dist/component-asset.js

@@ -1,12 +1,4 @@
-import { getTemplate, registerTemplateData, } from './template.js';
-const ASSET_TYPE = 'webui-component-asset';
-const ASSET_VERSION = 1;
-const injectedAssetStyles = new Set();
-const assetLoadPromises = new Map();
-let assetStylesSeeded = false;
-function assetGlobal() {
-    return window.__webui;
-}
+import { loadComponentAsset } from './component-asset/loader.js';
 export function defineComponentAssets(manifest) {
     const preloads = new Map();
     function preload(tag) {
@@ -85,129 +77,3 @@ function dataWithTimeout(data, timeoutMs) {
         }),
     ]);
 }
-function loadComponentAsset(tag, url) {
-    if (getTemplate(tag))
-        return Promise.resolve();
-    const assetUrl = new URL(url, document.baseURI);
-    const href = assetUrl.href;
-    let promise = assetLoadPromises.get(href);
-    if (promise)
-        return promise;
-    promise = importAndRegisterComponentAsset(assetUrl)
-        .finally(() => {
-        assetLoadPromises.delete(href);
-    });
-    assetLoadPromises.set(href, promise);
-    return promise;
-}
-function registerComponentAsset(asset) {
-    validateAsset(asset);
-    if (asset.templates && templatesAlreadyRegistered(asset.templates))
-        return;
-    registerAssetStyles(asset.templateStyles, readNonce());
-    if (asset.templates) {
-        registerTemplateData(asset.templates, asset.templateFunctions);
-    }
-}
-async function importAndRegisterComponentAsset(assetUrl) {
-    const imported = await import(assetUrl.href);
-    registerComponentAsset(readComponentAssetModule(imported));
-}
-function readComponentAssetModule(module) {
-    if (!isObject(module) || !isObject(module.default)) {
-        throw new Error('[WebUI] Component asset module must default-export an asset object.');
-    }
-    return module.default;
-}
-function isObject(value) {
-    return typeof value === 'object' && value !== null;
-}
-function validateAsset(asset) {
-    if (asset.type !== ASSET_TYPE) {
-        throw new Error(`[WebUI] Invalid component asset type: ${String(asset.type)}`);
-    }
-    if (asset.version !== ASSET_VERSION) {
-        throw new Error(`[WebUI] Unsupported component asset version: ${String(asset.version)}`);
-    }
-}
-function templatesAlreadyRegistered(templates) {
-    const tags = Object.keys(templates);
-    if (tags.length === 0)
-        return false;
-    for (let i = 0; i < tags.length; i++) {
-        if (!getTemplate(tags[i]))
-            return false;
-    }
-    return true;
-}
-function readNonce() {
-    const nonce = assetGlobal()?.nonce;
-    if (nonce)
-        return nonce;
-    const meta = document.querySelector('meta[name="webui-nonce"]');
-    return meta?.content ?? '';
-}
-function seedAssetStyleSet() {
-    if (assetStylesSeeded)
-        return;
-    assetStylesSeeded = true;
-    const styles = assetGlobal()?.styles;
-    if (!styles)
-        return;
-    for (let i = 0; i < styles.length; i++) {
-        injectedAssetStyles.add(styles[i]);
-    }
-}
-function registerAssetStyles(templateStyles, nonce) {
-    if (!templateStyles || templateStyles.length === 0)
-        return;
-    seedAssetStyleSet();
-    for (let i = 0; i < templateStyles.length; i++) {
-        const imports = parseImportMap(templateStyles[i]);
-        const nextImports = {};
-        let hasNewImport = false;
-        const specifiers = Object.keys(imports);
-        for (let j = 0; j < specifiers.length; j++) {
-            const specifier = specifiers[j];
-            if (injectedAssetStyles.has(specifier))
-                continue;
-            injectedAssetStyles.add(specifier);
-            nextImports[specifier] = imports[specifier];
-            hasNewImport = true;
-        }
-        if (!hasNewImport)
-            continue;
-        const script = document.createElement('script');
-        script.type = 'importmap';
-        if (nonce)
-            script.nonce = nonce;
-        script.textContent = JSON.stringify({ imports: nextImports });
-        document.head.appendChild(script);
-    }
-}
-function parseImportMap(scriptMarkup) {
-    const trimmed = scriptMarkup.trim();
-    if (!trimmed.startsWith('<script')) {
-        throw new Error('[WebUI] Component asset templateStyles entry must be a <script type="importmap"> tag.');
-    }
-    const openTagEnd = trimmed.indexOf('>');
-    const closeTagStart = trimmed.lastIndexOf('</script>');
-    if (openTagEnd < 0 || closeTagStart <= openTagEnd) {
-        throw new Error('[WebUI] Component asset importmap tag is malformed.');
-    }
-    const parsed = JSON.parse(trimmed.substring(openTagEnd + 1, closeTagStart));
-    if (!parsed.imports || typeof parsed.imports !== 'object') {
-        throw new Error('[WebUI] Component asset importmap is missing an imports object.');
-    }
-    const imports = {};
-    const specifiers = Object.keys(parsed.imports);
-    for (let i = 0; i < specifiers.length; i++) {
-        const specifier = specifiers[i];
-        const uri = parsed.imports[specifier];
-        if (typeof uri !== 'string' || !uri.startsWith('data:text/css,')) {
-            throw new Error(`[WebUI] Component asset importmap entry "${specifier}" must be a data:text/css URI.`);
-        }
-        imports[specifier] = uri;
-    }
-    return imports;
-}

package/dist/element.d.ts

@@ -8,14 +8,10 @@ export declare class WebUIElement extends TemplateElement {
     $emit(name: string, detail?: unknown): boolean;
     protected $finalize(instance: TemplateInstance, root: Node, meta: TemplateBlockMeta, resolver: (root: Node, path: TemplateNodePath) => Node | null, scope?: ScopeFrame): void;
     private $wireEvents;
-    private $resolveDelegatedEvents;
     private $wireRoot;
-    private $addDelegatedEvent;
-    private $dispatchDelegatedEvent;
     private $addEvent;
     private $addCleanup;
     private $callEventHandler;
-    private $callEventHandlerWithCurrentTarget;
     private $resolveEventArgs;
     private $resolveEventArg;
     private $wireRefs;

package/dist/element.js

@@ -29,32 +29,16 @@ export class WebUIElement extends TemplateElement {
         const groups = meta.eg;
         if (!groups)
             return;
-        const delegateTarget = this.shadowRoot ?? this;
         for (let i = 0; i < groups.length; i++) {
             const [eventName, bindings] = groups[i];
-            const bucket = this.$resolveDelegatedEvents(root, bindings, resolver, scope);
-            this.$addDelegatedEvent(instance, delegateTarget, eventName, bucket);
-        }
-    }
-    $resolveDelegatedEvents(root, bindings, resolver, scope) {
-        const entries = [];
-        for (let i = 0; i < bindings.length; i++) {
-            const [handlerName, args, target, usesEvent] = bindings[i];
-            const el = resolver(root, target);
-            if (!el || el.nodeType !== 1)
-                continue;
-            const method = this[handlerName];
-            if (typeof method !== 'function')
-                continue;
-            entries.push({
-                target: el,
-                method: method,
-                args,
-                usesEvent: usesEvent === 1,
-                scope,
-            });
+            for (let j = 0; j < bindings.length; j++) {
+                const [handlerName, args, target] = bindings[j];
+                const el = resolver(root, target);
+                if (el && el.nodeType === 1) {
+                    this.$addEvent(instance, el, eventName, handlerName, args, scope);
+                }
+            }
         }
-        return entries;
     }
     $wireRoot(instance, re) {
         const target = this.shadowRoot ?? this;
@@ -62,27 +46,6 @@ export class WebUIElement extends TemplateElement {
             this.$addEvent(instance, target, re[i][0], re[i][1], re[i][2], undefined);
         }
     }
-    $addDelegatedEvent(instance, target, eventName, entries) {
-        if (entries.length === 0)
-            return;
-        const listener = (event) => {
-            this.$dispatchDelegatedEvent(entries, event);
-        };
-        target.addEventListener(eventName, listener);
-        this.$addCleanup(instance, () => target.removeEventListener(eventName, listener));
-    }
-    $dispatchDelegatedEvent(entries, event) {
-        let current = event.target;
-        while (current) {
-            for (let i = 0; i < entries.length; i++) {
-                const entry = entries[i];
-                if (entry.target === current) {
-                    this.$callEventHandler(entry.method, entry.args, event, entry.scope, entry.target, entry.usesEvent);
-                }
-            }
-            current = current.parentNode;
-        }
-    }
     $addEvent(instance, target, eventName, handlerName, args, scope) {
         const method = this[handlerName];
         if (typeof method !== 'function')
@@ -94,11 +57,7 @@ export class WebUIElement extends TemplateElement {
     $addCleanup(instance, cleanup) {
         (instance.cleanups ??= []).push(cleanup);
     }
-    $callEventHandler(method, args, event, scope, currentTarget, usesEvent = false) {
-        if (currentTarget && usesEvent) {
-            this.$callEventHandlerWithCurrentTarget(method, args, event, scope, currentTarget);
-            return;
-        }
+    $callEventHandler(method, args, event, scope) {
         switch (args.length) {
             case 0:
                 method.call(this);
@@ -119,24 +78,6 @@ export class WebUIElement extends TemplateElement {
                 method.apply(this, this.$resolveEventArgs(args, event, scope));
         }
     }
-    $callEventHandlerWithCurrentTarget(method, args, event, scope, currentTarget) {
-        const descriptor = Object.getOwnPropertyDescriptor(event, 'currentTarget');
-        Object.defineProperty(event, 'currentTarget', {
-            configurable: true,
-            value: currentTarget,
-        });
-        try {
-            this.$callEventHandler(method, args, event, scope);
-        }
-        finally {
-            if (descriptor) {
-                Object.defineProperty(event, 'currentTarget', descriptor);
-            }
-            else {
-                delete event.currentTarget;
-            }
-        }
-    }
     $resolveEventArgs(args, event, scope) {
         const resolved = [];
         for (let i = 0; i < args.length; i++) {

package/dist/lifecycle.d.ts

@@ -1,2 +1,19 @@
 export declare function hydrationStart(): void;
 export declare function hydrationEnd(): void;
+export declare function beginStreamingGate(): void;
+export declare function abortStreamingGate(): void;
+export declare function markBoundaryPending(): void;
+export declare function markBoundaryCommitted(terminal: boolean): void;
+export declare function markLateActivationPending(): void;
+export declare function settleLateActivation(): void;
+export declare function __getLifecycleStateForTests(): {
+    pendingCount: number;
+    started: boolean;
+    completed: boolean;
+    streamingGateActive: boolean;
+    streamingGateAborted: boolean;
+    terminalReached: boolean;
+    pendingBoundaries: number;
+    pendingLateActivations: number;
+};
+export declare function __resetLifecycleForTests(): void;

package/dist/lifecycle.js

@@ -1,6 +1,11 @@
 let pendingCount = 0;
 let started = false;
 let completed = false;
+let streamingGateActive = false;
+let terminalReached = false;
+let streamingGateAborted = false;
+let pendingBoundaries = 0;
+let pendingLateActivations = 0;
 export function hydrationStart() {
     if (!started) {
         performance.mark('webui:hydrate:total:start');
@@ -9,11 +14,69 @@ export function hydrationStart() {
     pendingCount++;
 }
 export function hydrationEnd() {
+    if (pendingCount === 0)
+        return;
     pendingCount--;
-    if (pendingCount <= 0 && !completed) {
-        completed = true;
+    tryComplete();
+}
+export function beginStreamingGate() {
+    streamingGateActive = true;
+}
+export function abortStreamingGate() {
+    streamingGateAborted = true;
+}
+export function markBoundaryPending() {
+    pendingBoundaries++;
+}
+export function markBoundaryCommitted(terminal) {
+    if (pendingBoundaries === 0)
+        return;
+    pendingBoundaries--;
+    if (terminal)
+        terminalReached = true;
+    tryComplete();
+}
+export function markLateActivationPending() {
+    pendingLateActivations++;
+}
+export function settleLateActivation() {
+    if (pendingLateActivations === 0)
+        return;
+    pendingLateActivations--;
+    tryComplete();
+}
+function tryComplete() {
+    if (completed || streamingGateAborted || pendingCount !== 0)
+        return;
+    if (streamingGateActive &&
+        (!terminalReached || pendingBoundaries !== 0 || pendingLateActivations !== 0))
+        return;
+    completed = true;
+    if (started) {
         performance.mark('webui:hydrate:total:end');
         performance.measure('webui:hydrate:total', 'webui:hydrate:total:start', 'webui:hydrate:total:end');
-        window.dispatchEvent(new Event('webui:hydration-complete'));
     }
+    window.dispatchEvent(new Event('webui:hydration-complete'));
+}
+export function __getLifecycleStateForTests() {
+    return {
+        pendingCount,
+        started,
+        completed,
+        streamingGateActive,
+        streamingGateAborted,
+        terminalReached,
+        pendingBoundaries,
+        pendingLateActivations,
+    };
+}
+export function __resetLifecycleForTests() {
+    pendingCount = 0;
+    started = false;
+    completed = false;
+    streamingGateActive = false;
+    streamingGateAborted = false;
+    terminalReached = false;
+    pendingBoundaries = 0;
+    pendingLateActivations = 0;
 }

package/dist/static-host.js

@@ -22,6 +22,9 @@ function defineTemplateHost(tag, meta) {
         $shouldApplySSRBootstrapState() {
             return false;
         }
+        $shouldActivateOnBoundaryCommit() {
+            return false;
+        }
     }
     StaticTemplateHost.define(tag);
 }
@@ -58,9 +61,8 @@ export function installTemplateElementRuntime() {
             return;
         defineTemplateHosts(detail.templates);
     });
+    defineTemplateHosts();
     if (document.readyState === 'loading') {
         document.addEventListener('DOMContentLoaded', () => defineTemplateHosts(), { once: true });
-        return;
     }
-    defineTemplateHosts();
 }

package/dist/streaming-activation.d.ts

@@ -0,0 +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;

package/dist/streaming-activation.js

@@ -0,0 +1,13 @@
+import { abandonDeferredRange, } from './streaming-cleanup.js';
+import { activateDeferredTree, } from './streaming-deferred.js';
+export function activateRootsBetween(startMarker, endMarker, state, updates) {
+    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);
+    if (!failure)
+        return;
+    abandonDeferredRange(startMarker, endMarker);
+    throw new Error(failure);
+}

package/dist/streaming-bootstrap.d.ts

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

package/dist/streaming-bootstrap.js

@@ -0,0 +1,48 @@
+import { registerTemplateData } from './template.js';
+export function applyBoundaryBootstrap(bootstrap) {
+    if (bootstrap.templates)
+        registerTemplateData(bootstrap.templates);
+    const w = window;
+    if (!w.__webui)
+        w.__webui = {};
+    const keys = Object.keys(bootstrap);
+    for (let i = 0; i < keys.length; i++) {
+        const key = keys[i];
+        if (key === 'templates' || key === 'state')
+            continue;
+        if (key === 'inventory') {
+            w.__webui.inventory = mergeInventory(w.__webui.inventory, bootstrap.inventory);
+            continue;
+        }
+        if (key === 'css' || key === 'styles') {
+            appendUniqueStrings(w.__webui, key, bootstrap[key]);
+            continue;
+        }
+        w.__webui[key] = bootstrap[key];
+    }
+}
+function mergeInventory(existing, delta) {
+    const current = typeof existing === 'string' ? existing : '';
+    const next = delta ?? '';
+    const length = Math.max(current.length, next.length);
+    let merged = '';
+    for (let i = 0; i < length; i++) {
+        const a = i < current.length ? parseInt(current[i], 16) : 0;
+        const b = i < next.length ? parseInt(next[i], 16) : 0;
+        merged += (a | b).toString(16);
+    }
+    return merged;
+}
+function appendUniqueStrings(target, key, delta) {
+    if (!delta)
+        return;
+    const existing = target[key];
+    const cumulative = Array.isArray(existing) ? existing : [];
+    for (let i = 0; i < delta.length; i++) {
+        if (cumulative.indexOf(delta[i]) === -1) {
+            cumulative.push(delta[i]);
+        }
+    }
+    if (cumulative !== existing)
+        target[key] = cumulative;
+}

package/dist/streaming-cleanup.d.ts

@@ -0,0 +1,4 @@
+export declare function abandonDeferredElement(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

@@ -0,0 +1,66 @@
+import { firstNodeWithin, MAX_MARKER_SCAN_NODES, nextWithinRoot, safeRemoveAttribute, streamingErrorMessage, } from './streaming-dom.js';
+import { STREAMED_HOST_ATTR } from './streaming-mode.js';
+const STREAMING_BOUNDARY_ABANDON = Symbol.for('microsoft.webui.boundaryAbandon');
+export function abandonDeferredElement(el) {
+    try {
+        if (!el.hasAttribute(STREAMED_HOST_ATTR))
+            return;
+    }
+    catch {
+        safeRemoveAttribute(el, STREAMED_HOST_ATTR);
+        return;
+    }
+    try {
+        const hook = el[STREAMING_BOUNDARY_ABANDON];
+        if (typeof hook === 'function')
+            hook.call(el);
+    }
+    catch (error) {
+        console.error(`[WebUI] streaming: abandon failed for <${el.tagName?.toLowerCase?.() ?? '?'}>: ${streamingErrorMessage(error)}`);
+    }
+    finally {
+        safeRemoveAttribute(el, STREAMED_HOST_ATTR);
+    }
+}
+export function abandonDeferredDescendants(root) {
+    abandonDeferredNodes(firstNodeWithin(root), root, null);
+}
+export function abandonDeferredRange(startMarker, endMarker) {
+    const root = startMarker.parentNode;
+    if (root) {
+        abandonDeferredNodes(startMarker.nextSibling, root, endMarker);
+    }
+}
+function abandonDeferredNodes(first, root, end) {
+    let node = first;
+    let visited = 0;
+    while (node && node !== end && visited < MAX_MARKER_SCAN_NODES) {
+        visited++;
+        if (node.nodeType === 1) {
+            abandonDeferredElement(node);
+        }
+        node = nextWithinRoot(node, root);
+    }
+}
+export function abandonDeferredDocumentRoots() {
+    if (typeof document === 'undefined' ||
+        typeof document.getElementsByTagName !== 'function') {
+        return;
+    }
+    const elements = document.getElementsByTagName('*');
+    let visited = 0;
+    for (let i = 0; i < elements.length && visited < MAX_MARKER_SCAN_NODES; 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);
+        }
+    }
+}

package/dist/streaming-coordinator.d.ts

@@ -0,0 +1,7 @@
+import { elementHasPendingStateForTests, pendingTagWaiterCountForTests, pendingUndefinedRootCountForTests } from './streaming-deferred.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, };