@microsoft/webui-framework 0.0.21 → 0.0.23

package/dist/lazy-hydration-coordinator.js

@@ -0,0 +1,380 @@
+import { LAZY_HYDRATION_ACTIVATE, LAZY_HYDRATION_CONTENT_VISIBILITY, registerLazyHydrationCoordinator, } from './lazy-hydration-contract.js';
+import { hydrationEnd, hydrationStart, isHydrationStartupPending, } from './lifecycle.js';
+const pendingTargets = new WeakSet();
+const observedTargets = new Set();
+const boundaryStates = new WeakMap();
+const streamedActivations = new WeakSet();
+const initialObservationTargets = new WeakSet();
+const activationGenerations = new WeakMap();
+const queuedGenerations = new WeakMap();
+const observationStartTimes = new WeakMap();
+const nativeVisibilityTargets = new WeakSet();
+const activationQueue = [];
+const activationQueueGenerations = [];
+const ancestorScratch = [];
+const WAKE_EVENTS = [
+    'pointerover',
+    'pointerdown',
+    'focus',
+    'keydown',
+    'click',
+];
+const HYDRATION_BUDGET_MS = 8;
+const CONTENT_VISIBILITY_EVENT = 'contentvisibilityautostatechange';
+let observer;
+let queueIndex = 0;
+let continuationPending = false;
+let schedulerUnavailable = false;
+let wakeListenersInstalled = false;
+let continuationChannel;
+let hydrationBatchActive = false;
+let initialObservationCount = 0;
+let startupObservationGateActive = false;
+let startupObservationGateSealed = false;
+let installed = false;
+function supportsLazyHydration() {
+    return typeof IntersectionObserver !== 'undefined';
+}
+function observe(target, mode) {
+    pendingTargets.add(target);
+    if (!target.isConnected || observedTargets.has(target))
+        return;
+    observedTargets.add(target);
+    advanceActivationGeneration(target);
+    observationStartTimes.set(target, performance.now());
+    trackInitialObservation(target);
+    if (mode === LAZY_HYDRATION_CONTENT_VISIBILITY &&
+        supportsContentVisibilityEvents()) {
+        nativeVisibilityTargets.add(target);
+        target.addEventListener(CONTENT_VISIBILITY_EVENT, handleContentVisibilityChange);
+    }
+    getObserver().observe(target);
+    installWakeListeners();
+}
+function observeStreamed(target, state, mode) {
+    boundaryStates.set(target, state);
+    observe(target, mode);
+}
+function disconnect(target) {
+    if (!observedTargets.delete(target))
+        return;
+    advanceActivationGeneration(target);
+    settleInitialObservation(target);
+    observer?.unobserve(target);
+    removeContentVisibilityListener(target);
+    removeWakeListenersWhenIdle();
+}
+function isStreamedActivation(target) {
+    return streamedActivations.has(target);
+}
+export function installLazyHydrationCoordinator() {
+    if (installed)
+        return;
+    installed = true;
+    registerLazyHydrationCoordinator({
+        supportsLazyHydration,
+        observe,
+        observeStreamed,
+        disconnect,
+        isStreamedActivation,
+    });
+}
+export function __resetLazyHydrationCoordinatorForTests() {
+    installed = false;
+}
+function getObserver() {
+    if (!observer) {
+        const supportsScrollMargin = 'scrollMargin' in IntersectionObserver.prototype;
+        const options = {
+            root: null,
+            rootMargin: supportsScrollMargin ? '0px' : '200px',
+            threshold: 0,
+        };
+        if (supportsScrollMargin)
+            options.scrollMargin = '200px';
+        observer = new IntersectionObserver(handleIntersections, options);
+    }
+    return observer;
+}
+function supportsContentVisibilityEvents() {
+    if ('ContentVisibilityAutoStateChangeEvent' in globalThis)
+        return true;
+    const root = document.documentElement;
+    return !!root && `on${CONTENT_VISIBILITY_EVENT}` in root;
+}
+function handleIntersections(entries) {
+    if (entries.length === 0)
+        return;
+    let queued = false;
+    for (let i = 0; i < entries.length; i++) {
+        const entry = entries[i];
+        if (isCurrentObservation(entry) &&
+            (entry.isIntersecting || entry.intersectionRatio > 0)) {
+            queued = true;
+        }
+    }
+    if (queued)
+        beginHydrationBatch();
+    for (let i = 0; i < entries.length; i++) {
+        const entry = entries[i];
+        const target = entry.target;
+        if (!isCurrentObservation(entry))
+            continue;
+        settleInitialObservation(target);
+        if (entry.isIntersecting || entry.intersectionRatio > 0) {
+            enqueueActivationChain(target);
+        }
+    }
+    if (!queued)
+        return;
+    if (!continuationPending)
+        drainActivationQueue();
+}
+function handleContentVisibilityChange(event) {
+    const target = event.currentTarget;
+    if (!target ||
+        event.target !== target ||
+        !target.isConnected ||
+        !observedTargets.has(target))
+        return;
+    const skipped = event.skipped;
+    if (skipped === true) {
+        settleInitialObservation(target);
+        observer?.unobserve(target);
+        return;
+    }
+    if (skipped !== false)
+        return;
+    beginHydrationBatch();
+    enqueueActivationChain(target);
+    if (!continuationPending)
+        drainActivationQueue();
+}
+function drainActivationQueue() {
+    continuationPending = false;
+    const started = performance.now();
+    while (queueIndex < activationQueue.length) {
+        const target = activationQueue[queueIndex];
+        const generation = activationQueueGenerations[queueIndex];
+        queueIndex++;
+        if (queuedGenerations.get(target) === generation) {
+            queuedGenerations.delete(target);
+        }
+        if (activationGenerations.get(target) !== generation)
+            continue;
+        try {
+            activate(target);
+        }
+        catch (error) {
+            reportActivationError(error);
+        }
+        if (queueIndex < activationQueue.length &&
+            performance.now() - started >= HYDRATION_BUDGET_MS) {
+            scheduleContinuation();
+            return;
+        }
+    }
+    activationQueue.length = 0;
+    activationQueueGenerations.length = 0;
+    queueIndex = 0;
+    finishHydrationBatch();
+}
+function beginHydrationBatch() {
+    if (hydrationBatchActive)
+        return false;
+    hydrationBatchActive = true;
+    hydrationStart();
+    return true;
+}
+function finishHydrationBatch() {
+    if (!hydrationBatchActive)
+        return;
+    hydrationBatchActive = false;
+    hydrationEnd();
+}
+function scheduleContinuation() {
+    if (continuationPending)
+        return;
+    continuationPending = true;
+    const taskScheduler = globalThis.scheduler;
+    if (!schedulerUnavailable && taskScheduler?.postTask) {
+        void taskScheduler
+            .postTask(drainActivationQueue, { priority: 'user-visible' })
+            .catch(abortContinuation);
+        return;
+    }
+    if (!continuationChannel) {
+        continuationChannel = new MessageChannel();
+        continuationChannel.port1.onmessage = drainActivationQueue;
+    }
+    continuationChannel.port2.postMessage(0);
+}
+function abortContinuation(error) {
+    continuationPending = false;
+    schedulerUnavailable = true;
+    reportActivationError(error);
+    if (queueIndex < activationQueue.length) {
+        scheduleContinuation();
+    }
+    else {
+        finishHydrationBatch();
+    }
+}
+function reportActivationError(error) {
+    const target = globalThis;
+    if (typeof target.reportError === 'function') {
+        target.reportError(error);
+        return;
+    }
+    setTimeout(() => {
+        throw error;
+    }, 0);
+}
+function enqueueActivationChain(target) {
+    const scratchStart = ancestorScratch.length;
+    let current = target;
+    while (current) {
+        const candidate = current;
+        if (pendingTargets.has(candidate)) {
+            ancestorScratch.push(candidate);
+        }
+        current = composedParent(current);
+    }
+    try {
+        for (let i = ancestorScratch.length - 1; i >= scratchStart; i--) {
+            enqueueActivation(ancestorScratch[i]);
+        }
+    }
+    finally {
+        ancestorScratch.length = scratchStart;
+    }
+}
+function enqueueActivation(target) {
+    const generation = activationGenerations.get(target);
+    if (generation === undefined ||
+        queuedGenerations.get(target) === generation)
+        return;
+    queuedGenerations.set(target, generation);
+    activationQueue.push(target);
+    activationQueueGenerations.push(generation);
+}
+function advanceActivationGeneration(target) {
+    activationGenerations.set(target, (activationGenerations.get(target) ?? 0) + 1);
+}
+function isCurrentObservation(entry) {
+    const started = observationStartTimes.get(entry.target);
+    return started !== undefined &&
+        (typeof entry.time !== 'number' || entry.time >= started);
+}
+function composedParent(element) {
+    if (element.assignedSlot)
+        return element.assignedSlot;
+    if (element.parentElement)
+        return element.parentElement;
+    const root = element.getRootNode();
+    return root instanceof ShadowRoot ? root.host : null;
+}
+function activate(target) {
+    if (!target.isConnected || !pendingTargets.delete(target))
+        return;
+    settleInitialObservation(target);
+    if (observedTargets.delete(target))
+        observer?.unobserve(target);
+    removeContentVisibilityListener(target);
+    removeWakeListenersWhenIdle();
+    const streamed = boundaryStates.has(target);
+    const state = boundaryStates.get(target);
+    boundaryStates.delete(target);
+    if (streamed)
+        streamedActivations.add(target);
+    try {
+        target[LAZY_HYDRATION_ACTIVATE](state);
+    }
+    finally {
+        if (streamed)
+            streamedActivations.delete(target);
+    }
+}
+function removeContentVisibilityListener(target) {
+    if (!nativeVisibilityTargets.delete(target))
+        return;
+    target.removeEventListener(CONTENT_VISIBILITY_EVENT, handleContentVisibilityChange);
+}
+function trackInitialObservation(target) {
+    if (startupObservationGateSealed ||
+        !isHydrationStartupPending())
+        return;
+    initialObservationTargets.add(target);
+    initialObservationCount++;
+    if (startupObservationGateActive)
+        return;
+    startupObservationGateActive = true;
+    hydrationStart();
+    document.addEventListener('DOMContentLoaded', sealStartupObservationGate, {
+        once: true,
+    });
+    window.addEventListener('load', sealStartupObservationGate, { once: true });
+}
+function settleInitialObservation(target) {
+    if (!initialObservationTargets.delete(target))
+        return;
+    initialObservationCount--;
+    finishStartupObservationGate();
+}
+function sealStartupObservationGate() {
+    startupObservationGateSealed = true;
+    finishStartupObservationGate();
+}
+function finishStartupObservationGate() {
+    if (!startupObservationGateActive ||
+        !startupObservationGateSealed ||
+        initialObservationCount !== 0)
+        return;
+    startupObservationGateActive = false;
+    hydrationEnd();
+}
+function handleWakeEvent(event) {
+    const path = event.composedPath();
+    let ownsBatch = false;
+    let batchStarted = false;
+    try {
+        for (let i = path.length - 1; i >= 0; i--) {
+            const current = path[i];
+            if (current instanceof HTMLElement) {
+                const target = current;
+                if (pendingTargets.has(target)) {
+                    if (!batchStarted) {
+                        ownsBatch = beginHydrationBatch();
+                        batchStarted = true;
+                    }
+                    try {
+                        activate(target);
+                    }
+                    catch (error) {
+                        reportActivationError(error);
+                    }
+                }
+            }
+        }
+    }
+    finally {
+        if (ownsBatch)
+            finishHydrationBatch();
+    }
+}
+function installWakeListeners() {
+    if (wakeListenersInstalled)
+        return;
+    wakeListenersInstalled = true;
+    for (let i = 0; i < WAKE_EVENTS.length; i++) {
+        document.addEventListener(WAKE_EVENTS[i], handleWakeEvent, true);
+    }
+}
+function removeWakeListenersWhenIdle() {
+    if (!wakeListenersInstalled || observedTargets.size !== 0)
+        return;
+    wakeListenersInstalled = false;
+    for (let i = 0; i < WAKE_EVENTS.length; i++) {
+        document.removeEventListener(WAKE_EVENTS[i], handleWakeEvent, true);
+    }
+}

package/dist/lazy-hydration-entry.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/lazy-hydration-entry.js

@@ -0,0 +1,2 @@
+import { installLazyHydrationCoordinator } from './lazy-hydration-coordinator.js';
+installLazyHydrationCoordinator();

package/dist/lifecycle.d.ts

@@ -1,3 +1,4 @@
+export declare function isHydrationStartupPending(): boolean;
 export declare function hydrationStart(): void;
 export declare function hydrationEnd(): void;
 export declare function beginStreamingGate(): void;

package/dist/lifecycle.js

@@ -1,6 +1,29 @@
 let pendingCount = 0;
 let started = false;
 let completed = false;
+const hasBrowserDocument = typeof document !== 'undefined' &&
+    typeof Document !== 'undefined' &&
+    document instanceof Document;
+const navigationTiming = hasBrowserDocument &&
+    typeof performance.getEntriesByType === 'function'
+    ? performance.getEntriesByType('navigation')[0]
+    : undefined;
+let documentReady = !hasBrowserDocument ||
+    document.readyState === 'complete' ||
+    (navigationTiming?.domContentLoadedEventStart ?? 0) > 0;
+if (!documentReady) {
+    const markDocumentReady = () => {
+        if (documentReady)
+            return;
+        documentReady = true;
+        tryComplete();
+    };
+    document.addEventListener('DOMContentLoaded', markDocumentReady, { once: true });
+    window.addEventListener('load', markDocumentReady, { once: true });
+}
+export function isHydrationStartupPending() {
+    return !documentReady;
+}
 let streamingGateActive = false;
 let terminalReached = false;
 let streamingGateAborted = false;
@@ -46,7 +69,12 @@ export function settleLateActivation() {
     tryComplete();
 }
 function tryComplete() {
-    if (completed || streamingGateAborted || pendingCount !== 0)
+    if (completed ||
+        !documentReady ||
+        streamingGateAborted ||
+        pendingCount !== 0)
+        return;
+    if (!started && !streamingGateActive)
         return;
     if (streamingGateActive &&
         (!terminalReached || pendingBoundaries !== 0 || pendingLateActivations !== 0))

package/dist/template-element.d.ts

@@ -1,21 +1,32 @@
-import type { TemplateBlockMeta, TemplateNodePath } from './template.js';
+import type { TemplateMeta, TemplateBlockMeta, TemplateNodeIndex } from './template.js';
 import { STREAMING_BOUNDARY_ACTIVATE } 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;
 export declare class TemplateElement extends HTMLElement {
+    private static readonly $ancestorReleaseQueue;
+    private static $ancestorReleaseIndex;
+    private static $ancestorReleaseActive;
     private $root;
     private $meta?;
     private $ready;
     private $hydrated;
-    private $hydratedCallbackCalled;
+    private $hasMounted;
     private $deferredSSR;
     private $activatingDeferredSSR;
+    private $deferredAncestor;
+    private $pendingAncestor;
+    private $deferredDescendants;
+    private $deferredByAncestor;
+    private $ancestorBoundaryState;
+    private $hasAncestorBoundaryState;
     private $hasUnknownScopes;
     private $templateState;
     private $dirtyPaths;
     private $pendingFlush;
     private $preReadyWrites;
+    private $deferredWrites;
+    private $guardUnknownState;
     private $resolver;
     private $pathIndex?;
     private $wildcardBindings?;
@@ -24,6 +35,7 @@ export declare class TemplateElement extends HTMLElement {
     [STREAMING_BOUNDARY_ABANDON](): void;
     static define(tagName: string): void;
     connectedCallback(): void;
+    private $remount;
     private $mount;
     disconnectedCallback(): void;
     $destroy(): void;
@@ -34,14 +46,29 @@ export declare class TemplateElement extends HTMLElement {
     protected $observableNames(): Set<string>;
     protected $beforeExternalStateWrite(): void;
     protected $afterExternalStateWrite(_applied: boolean): void;
-    protected $shouldDeferSSRHydration(): boolean;
+    protected $shouldDeferSSRHydration(_meta?: TemplateMeta): boolean;
+    protected $didDeferSSRHydration(): void;
+    protected $didDeferStreamedSSRHydration(_state: Record<string, unknown> | undefined): void;
+    protected $currentTemplateMetadata(): TemplateMeta | undefined;
+    private $nearestHydrationBarrier;
+    private $registerWithHydrationBarrier;
+    private $adoptPendingDescendants;
+    private $registerDeferredDescendant;
+    private $detachDeferredAncestor;
+    private $releaseDeferredDescendants;
+    private $releaseAncestorBarrier;
+    private $abandonDeferredDescendants;
+    protected $primeSSRStateForDeferral(): void;
     protected $shouldActivateOnBoundaryCommit(): boolean;
     protected $activateDeferredSSR(state?: Record<string, unknown>): void;
+    protected $activateDeferredSSRFromBoundary(state?: Record<string, unknown>): void;
+    private $activateDeferredSSRWithState;
     protected $shouldApplySSRBootstrapState(): boolean;
     protected $shouldApplySSRState(_key: string): boolean;
     protected $syncAuthoredAttributes(): void;
     protected hydratedCallback(): void;
     private $notifyHydrated;
+    private $finishHydration;
     protected $shouldApplyTemplateStateFromSSR(_key: string): boolean;
     protected $setTemplateState(key: string, value: unknown): boolean;
     private $writeTemplateState;
@@ -51,12 +78,12 @@ export declare class TemplateElement extends HTMLElement {
     private $setStateKey;
     private $applySSRState;
     $update(path?: string): void;
+    private $recordDeferredWrite;
+    private $replayDeferredWrites;
     $flushUpdates(): void;
     private $flush;
     private $recordPreReadyWrite;
     private $checkHydrationMismatch;
-    private $resolve;
-    private $resolveSSR;
     private $parseTemplate;
     private $createStagingRoot;
     private $appendStagedChildren;
@@ -66,15 +93,18 @@ export declare class TemplateElement extends HTMLElement {
     private $collectConditionalRange;
     private $hasRootStructuralSlot;
     private $hydrateCondContent;
-    private $findMarker;
     private $findSSRText;
     private $findSSRSlotRef;
     private $rootTag;
     private $wireAttrs;
-    protected $finalize(_instance: TemplateInstance, _root: Node, _meta: TemplateBlockMeta, _resolver: (root: Node, path: TemplateNodePath) => Node | null, _scope?: ScopeFrame): void;
+    protected $finalize(_instance: TemplateInstance, _root: Node, _meta: TemplateBlockMeta, _resolver: (root: Node, index: TemplateNodeIndex) => Node | null, _scope?: ScopeFrame): void;
     private $makeAttr;
     private $buildPathIndex;
     private $updateBindings;
+    private $textStateIsKnown;
+    private $attrStateIsKnown;
+    private $partsAreKnown;
+    private $pathsAreKnown;
     private $scopeIsKnown;
     $updateInstance(instance: TemplateInstance): void;
     private $patchText;