@microsoft/webui-framework 0.0.24 → 0.0.26

package/dist/streaming-spans.js

@@ -0,0 +1,200 @@
+import { MAX_MARKER_SCAN_NODES, safeRemove, safeRemoveAttribute, SPAN_START_PREFIX, STREAMING_SPAN_HOST_ATTR, } from './streaming-dom.js';
+export const MAX_SPAN_NESTING = 32;
+const INVALID_SPAN_ID = -1;
+const NOT_A_SPAN_HOST = -2;
+const openSpans = new Map();
+const hostScratch = [];
+const idScratch = [];
+let nextExpectedSpanInstanceId = 0;
+function spanIdOf(element) {
+    if (typeof element.hasAttribute !== 'function')
+        return NOT_A_SPAN_HOST;
+    if (!element.hasAttribute(STREAMING_SPAN_HOST_ATTR))
+        return NOT_A_SPAN_HOST;
+    const raw = element.getAttribute(STREAMING_SPAN_HOST_ATTR);
+    if (raw === null || raw.length === 0)
+        return INVALID_SPAN_ID;
+    let value = 0;
+    for (let i = 0; i < raw.length; i++) {
+        const code = raw.charCodeAt(i) - 48;
+        if (code < 0 || code > 9)
+            return INVALID_SPAN_ID;
+        value = value * 10 + code;
+        if (!Number.isSafeInteger(value))
+            return INVALID_SPAN_ID;
+    }
+    return String(value) === raw ? value : INVALID_SPAN_ID;
+}
+function invalidSpanAttrReason() {
+    return `invalid ${STREAMING_SPAN_HOST_ATTR} value`;
+}
+export function spanHostFor(id) {
+    return openSpans.get(id)?.host;
+}
+export function registerEnclosingSpans(renderRoot, enclosingSpanInstanceId) {
+    hostScratch.length = 0;
+    idScratch.length = 0;
+    let current = renderRoot;
+    let hops = 0;
+    let firstSpan = true;
+    while (current && hops < MAX_MARKER_SCAN_NODES) {
+        hops++;
+        const element = current.nodeType === 1
+            ? current
+            : null;
+        const id = element ? spanIdOf(element) : NOT_A_SPAN_HOST;
+        if (id !== NOT_A_SPAN_HOST) {
+            if (hostScratch.length >= MAX_SPAN_NESTING) {
+                clearScratch();
+                return `runtime component span nesting exceeds ${MAX_SPAN_NESTING}`;
+            }
+            if (id === INVALID_SPAN_ID) {
+                clearScratch();
+                return invalidSpanAttrReason();
+            }
+            if (firstSpan && id !== enclosingSpanInstanceId) {
+                clearScratch();
+                return `boundary declares enclosing span ${enclosingSpanInstanceId}, but its nearest spanning ancestor is ${id}`;
+            }
+            firstSpan = false;
+            hostScratch.push(element);
+            idScratch.push(id);
+        }
+        current = ascendRenderRoots(current);
+    }
+    if (firstSpan) {
+        clearScratch();
+        return `boundary declares enclosing span ${enclosingSpanInstanceId}, but no spanning ancestor was found`;
+    }
+    if (current) {
+        clearScratch();
+        return `spanning ancestor walk exceeds ${MAX_MARKER_SCAN_NODES} nodes`;
+    }
+    for (let i = hostScratch.length - 1; i >= 0; i--) {
+        const error = registerSpan(idScratch[i], hostScratch[i], i + 1 < idScratch.length ? idScratch[i + 1] : undefined);
+        if (error) {
+            clearScratch();
+            return error;
+        }
+    }
+    clearScratch();
+    return null;
+}
+function registerSpan(id, host, parentId) {
+    const existing = openSpans.get(id);
+    if (existing) {
+        return existing.host === host && existing.parentId === parentId
+            ? null
+            : `span instance ${id} is already open for another ancestry`;
+    }
+    if (id !== nextExpectedSpanInstanceId) {
+        return `expected span instance ${nextExpectedSpanInstanceId}, received ${id}`;
+    }
+    const marker = host.previousSibling;
+    if (marker?.nodeType !== 8 ||
+        marker.data !== `${SPAN_START_PREFIX}${id}`) {
+        return `missing root-local start marker for span ${id}`;
+    }
+    const parent = parentId === undefined ? undefined : openSpans.get(parentId);
+    if (parentId !== undefined && !parent) {
+        return `parent span ${parentId} is not open`;
+    }
+    openSpans.set(id, {
+        host,
+        start: marker,
+        parentId,
+        openChildren: 0,
+    });
+    if (parent)
+        parent.openChildren++;
+    nextExpectedSpanInstanceId++;
+    return null;
+}
+export function prepareSpanCompletion(id, range) {
+    const start = range.start;
+    const end = range.end;
+    if (!start || !end)
+        return `span ${id} completion is markerless`;
+    let host;
+    let node = start.nextSibling;
+    let hops = 0;
+    while (node && node !== end) {
+        if (hops >= MAX_MARKER_SCAN_NODES) {
+            return `span ${id} host lookup exceeds ${MAX_MARKER_SCAN_NODES} nodes`;
+        }
+        hops++;
+        if (node.nodeType === 1) {
+            const hostId = spanIdOf(node);
+            if (hostId === INVALID_SPAN_ID)
+                return invalidSpanAttrReason();
+            if (hostId !== NOT_A_SPAN_HOST) {
+                if (hostId !== id) {
+                    return `span completion targets span ${id}, but its host declares span ${hostId}`;
+                }
+                host = node;
+                break;
+            }
+        }
+        node = node.nextSibling;
+    }
+    if (!host) {
+        return `span completion targets span ${id}, but no spanning host was found inside its markers`;
+    }
+    if (!openSpans.has(id)) {
+        const error = registerEnclosingSpans(host, id);
+        if (error)
+            return error;
+    }
+    const span = openSpans.get(id);
+    if (!span)
+        return `span completion targets span ${id}, which is not open`;
+    if (span.openChildren !== 0) {
+        return `span ${id} completed before its nested component spans`;
+    }
+    return span.host === host && span.start === start &&
+        host.parentNode === start.parentNode
+        ? null
+        : `span completion markers do not match the open span ${id}`;
+}
+export function completeSpan(id) {
+    const span = openSpans.get(id);
+    if (!span)
+        return;
+    openSpans.delete(id);
+    safeRemoveAttribute(span.host, STREAMING_SPAN_HOST_ATTR);
+    if (span.parentId === undefined)
+        return;
+    const parent = openSpans.get(span.parentId);
+    if (parent && parent.openChildren > 0)
+        parent.openChildren--;
+}
+export function abandonOpenSpans() {
+    for (const span of openSpans.values()) {
+        safeRemoveAttribute(span.host, STREAMING_SPAN_HOST_ATTR);
+        safeRemove(span.start);
+    }
+    openSpans.clear();
+    clearScratch();
+    nextExpectedSpanInstanceId = 0;
+}
+function ascendRenderRoots(node) {
+    if (node.nodeType === 11) {
+        return node.host ?? null;
+    }
+    if (node.nodeType === 1) {
+        const slot = node.assignedSlot;
+        if (slot)
+            return slot;
+    }
+    return node.parentNode;
+}
+function clearScratch() {
+    hostScratch.length = 0;
+    idScratch.length = 0;
+}
+export function openSpanCountForTests() {
+    return openSpans.size;
+}
+export function hasOpenSpans() {
+    return openSpans.size !== 0;
+}

package/dist/template-content.d.ts

@@ -0,0 +1,17 @@
+import type { TemplateBlockMeta } from './template-types.js';
+export interface TemplateStylesheetDescriptor {
+    readonly crossOrigin: string | null;
+    readonly disabled: boolean;
+    readonly elementIndex: number;
+    readonly href: string;
+    readonly hasInlineStyles: boolean;
+    readonly hasUnsupportedAttributes: boolean;
+    readonly integrity: string;
+    readonly media: string;
+    readonly referrerPolicy: string;
+    readonly title: string;
+    readonly type: string;
+}
+export declare function cloneTemplateContent(meta: TemplateBlockMeta): DocumentFragment;
+export declare function getTemplateStylesheets(meta: TemplateBlockMeta): readonly TemplateStylesheetDescriptor[] | undefined;
+export declare function templateHtmlMayContainLink(html: string): boolean;

package/dist/template-content.js

@@ -0,0 +1,106 @@
+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);
+}
+export function getTemplateStylesheets(meta) {
+    const stylesheets = getTemplateContent(meta, true).stylesheets;
+    return stylesheets === NO_LINK_STYLESHEETS ? undefined : stylesheets;
+}
+export function templateHtmlMayContainLink(html) {
+    for (let i = 0; i <= html.length - 5; i++) {
+        if (html.charCodeAt(i) !== 60)
+            continue;
+        if (asciiLower(html.charCodeAt(i + 1)) !== 108 ||
+            asciiLower(html.charCodeAt(i + 2)) !== 105 ||
+            asciiLower(html.charCodeAt(i + 3)) !== 110 ||
+            asciiLower(html.charCodeAt(i + 4)) !== 107) {
+            continue;
+        }
+        const next = html.charCodeAt(i + 5);
+        if (i + 5 === html.length ||
+            next === 9 ||
+            next === 10 ||
+            next === 12 ||
+            next === 13 ||
+            next === 32 ||
+            next === 47 ||
+            next === 62) {
+            return true;
+        }
+    }
+    return false;
+}
+function getTemplateContent(meta, mayContainLink) {
+    let cached = templateContentCache.get(meta);
+    if (cached)
+        return cached;
+    const template = document.createElement('template');
+    template.innerHTML = meta.h;
+    const fragment = template.content;
+    const stylesheets = (mayContainLink ?? templateHtmlMayContainLink(meta.h))
+        ? collectStylesheetDescriptors(fragment)
+        : NO_LINK_STYLESHEETS;
+    cached = { fragment, stylesheets };
+    templateContentCache.set(meta, cached);
+    return cached;
+}
+function collectStylesheetDescriptors(fragment) {
+    const elements = fragment.querySelectorAll('*');
+    let hasLink = false;
+    let hasInlineStyles;
+    let stylesheets;
+    for (let i = 0; i < elements.length; i++) {
+        const element = elements[i];
+        if (element.localName !== 'link')
+            continue;
+        hasLink = true;
+        const link = element;
+        if (!link.relList.contains('stylesheet') ||
+            link.relList.contains('alternate')) {
+            continue;
+        }
+        const href = link.getAttribute('href');
+        if (!href)
+            continue;
+        hasInlineStyles ??= fragment.querySelector('style') !== null;
+        (stylesheets ??= []).push({
+            crossOrigin: link.getAttribute('crossorigin'),
+            disabled: link.disabled,
+            elementIndex: i + 1,
+            href,
+            hasInlineStyles,
+            hasUnsupportedAttributes: containsUnsupportedAttributes(link),
+            integrity: link.integrity,
+            media: link.media,
+            referrerPolicy: link.referrerPolicy,
+            title: link.title,
+            type: link.type,
+        });
+    }
+    return stylesheets ?? (hasLink ? EMPTY_STYLESHEETS : NO_LINK_STYLESHEETS);
+}
+function asciiLower(code) {
+    return code >= 65 && code <= 90 ? code + 32 : code;
+}
+function containsUnsupportedAttributes(link) {
+    const attributes = link.attributes;
+    for (let i = 0; i < attributes.length; i++) {
+        switch (attributes[i].name) {
+            case 'crossorigin':
+            case 'disabled':
+            case 'href':
+            case 'integrity':
+            case 'media':
+            case 'referrerpolicy':
+            case 'rel':
+            case 'title':
+            case 'type':
+                break;
+            default:
+                return true;
+        }
+    }
+    return false;
+}

package/dist/template-element.d.ts

@@ -1,8 +1,14 @@
 import type { TemplateMeta, TemplateBlockMeta, TemplateNodeIndex } from './template.js';
 import { STREAMING_BOUNDARY_ACTIVATE } from './streaming-mode.js';
+import type { ActivationOutcome } from './streaming-mode.js';
 import type { ScopeFrame, TemplateInstance } from './element/types.js';
 declare const WEBUI_SET_STATE_KEY: unique symbol;
 declare const STREAMING_BOUNDARY_ABANDON: unique symbol;
+interface PendingParentState {
+    readonly values: Record<string, unknown>;
+    replay?: Set<string>;
+}
+export declare function consumePendingParentState(element: Element): PendingParentState | undefined;
 export declare class TemplateElement extends HTMLElement {
     private static readonly $ancestorReleaseQueue;
     private static $ancestorReleaseIndex;
@@ -11,6 +17,8 @@ export declare class TemplateElement extends HTMLElement {
     private $meta?;
     private $ready;
     private $hydrated;
+    private $deferredClientMount;
+    private $resetClientShadow;
     private $hasMounted;
     private $deferredSSR;
     private $activatingDeferredSSR;
@@ -31,12 +39,15 @@ export declare class TemplateElement extends HTMLElement {
     private $pathIndex?;
     private $wildcardBindings?;
     [WEBUI_SET_STATE_KEY](key: string, value: unknown): boolean;
-    [STREAMING_BOUNDARY_ACTIVATE](state?: Record<string, unknown>): number;
+    [STREAMING_BOUNDARY_ACTIVATE](state?: Record<string, unknown>, bypassAncestor?: Element): ActivationOutcome;
     [STREAMING_BOUNDARY_ABANDON](): void;
+    private $clearAncestorDeferral;
+    private $resumeRetainedRoot;
     static define(tagName: string): void;
     connectedCallback(): void;
     private $remount;
     private $mount;
+    private $installStyles;
     disconnectedCallback(): void;
     $destroy(): void;
     private $clearRepeatBinding;
@@ -94,7 +105,6 @@ export declare class TemplateElement extends HTMLElement {
     private $collectConditionalRange;
     private $hasRootStructuralSlot;
     private $hydrateCondContent;
-    private $findSSRText;
     private $findSSRSlotRef;
     private $rootTag;
     private $wireAttrs;
@@ -105,6 +115,7 @@ export declare class TemplateElement extends HTMLElement {
     private $buildPathIndex;
     private $updateBindings;
     private $textStateIsKnown;
+    private $invalidateRawValues;
     private $attrStateIsKnown;
     private $partsAreKnown;
     private $pathsAreKnown;
@@ -112,15 +123,19 @@ export declare class TemplateElement extends HTMLElement {
     $updateInstance(instance: TemplateInstance): void;
     private $patchText;
     private $patchAttr;
+    private $swapOwnedRange;
     private $toggleCond;
     $resolveValue(path: string, scope?: ScopeFrame): unknown;
+    private $conditionResolver;
     $hasStateRoot(path: string, scope?: ScopeFrame): boolean;
     private $resolveComponentRoot;
     private $resolveParts;
+    private $setInstanceParent;
     $block(blockIndex: number): TemplateBlockMeta | undefined;
     $createBlockInstance(blockIndex: number, scope?: ScopeFrame, parent?: TemplateInstance, container?: ParentNode & Node): TemplateInstance | null;
     $removeInstance(instance: TemplateInstance): void;
     private $disposeInstance;
+    private $removeInstanceNodes;
     private $compactNodeArray;
     $changeStructure(removedFrom?: TemplateInstance): void;
     $insertInstanceAfter(cursor: Node | null, container: ParentNode & Node, instance: TemplateInstance): Node | null;