@microsoft/webui-framework 0.0.21 → 0.0.23

package/README.md

@@ -108,6 +108,63 @@ lifecycle code, imperative methods, or state that TypeScript code reads or
 mutates. `@observable` and `@attr` are optional; add them when JavaScript needs
 to access the value or when the value is part of the component's public API.
 
+### Offscreen work reduction
+
+For components repeated beyond the initial viewport, put the complete policy on
+the component template:
+
+```html
+<template
+  w-render="lazy"
+  w-reserve-block-size="18rem"
+>
+  <!-- Component content -->
+</template>
+```
+
+`w-render="lazy"` combines visibility-deferred hydration with the browser's
+`content-visibility: auto` rendering deferral. The reservation is the typical
+rendered block size of one instance; WebUI emits it as
+`contain-intrinsic-block-size: auto 18rem` before first layout. The SSR DOM
+remains present, searchable, and accessible while the browser skips offscreen
+style, layout, and paint work. The generated policy applies to instances in the
+document, Light DOM, and standard Shadow DOM components. A `--dom=light`
+component inside an authored shadow root needs the `style` CSS strategy or an
+equivalent rule in that root's stylesheet because document styles cannot cross
+the boundary.
+
+Import the optional coordinator entry once before component modules:
+
+```ts
+import '@microsoft/webui-framework/lazy-hydration.js';
+import './product-card.js';
+```
+
+Use hydration-only deferral when rendering containment is not safe for a
+component:
+
+```html
+<template w-hydrate="lazy">
+  <!-- Component content -->
+</template>
+```
+
+Components are eager by default. Instance attributes provide explicit escape
+hatches:
+
+```html
+<!-- Keep rendering deferral, but hydrate this instance immediately. -->
+<product-card w-hydrate="eager"></product-card>
+
+<!-- Disable both rendering and hydration deferral for this instance. -->
+<product-card w-render="eager"></product-card>
+```
+
+Client-created instances and reconnects after a successful mount remain eager.
+If the optional entry or `IntersectionObserver` is unavailable, hydration falls
+back to eager; `content-visibility` remains browser-managed. See
+[Lazy Hydration](https://microsoft.github.io/webui/guide/concepts/hydration#lazy-hydration).
+
 ### Build with the WebUI plugin
 
 ```bash
@@ -184,17 +241,17 @@ development-only and is dead-code-eliminated from production bundles via the
 Override the protected `hydratedCallback()` hook for work that requires the
 component's bindings, events, and `w-ref` references to be ready. It runs
 synchronously exactly once after the first successful ordinary SSR hydration,
-client-created mount, deferred streamed activation, or dormant static-host wake.
-Its once-latch is set before author code runs, so a thrown callback is not
-retried on reconnect.
+client-created mount, lazy activation, deferred streamed activation, or dormant
+static-host wake. Its once-latch is set before author code runs, so a thrown
+callback is not retried on reconnect.
 
 `connectedCallback()` remains a native per-connection lifecycle. On ordinary
 SSR and client-created mounts, `super.connectedCallback()` hydrates
-synchronously, but a streamed `data-ws` root returns while still deferred and
-hydrates only when its boundary commits. Therefore `connectedCallback()` cannot
-be used as a universal post-hydration signal. Descendants must not structurally
-mutate a containing component's SSR subtree before it hydrates, because
-hydration relies on stable compiled paths.
+synchronously, but a lazy root or streamed `data-ws` root can return while still
+deferred. Therefore `connectedCallback()` cannot be used as a universal
+post-hydration signal. Descendants must not structurally mutate a containing
+component's SSR subtree before it hydrates, because hydration relies on stable
+compiled paths.
 
 ### DOM strategy (`--dom`)
 
@@ -405,7 +462,7 @@ resource-constrained devices.
 
 5. **Single-pass hydration via path mapping.**
    SSR DOM is matched to compiled template bindings through
-   template-parallel traversal (`$resolveSSR`). Ordinary buffered hydration
+   the lockstep hydration walk (`buildSSRIndex`). Ordinary buffered hydration
    needs no marker comments or data attributes for binding resolution. The
    hydration walk touches each DOM node exactly once.
 
@@ -469,7 +526,7 @@ Angular all require a JavaScript runtime on the server.  This framework's SSR
 is driven by data (template metadata + state values), not code.  Any language
 that can read the compiled metadata and produce HTML can serve as the SSR
 backend.  No comment markers or data attributes are needed — the runtime
-resolves ordinary buffered SSR nodes via template-parallel path traversal.
+resolves ordinary buffered SSR nodes via the lockstep hydration walk.
 Progressive streaming uses temporary checkpoint scaffolding only to delay
 activation until a complete region arrives; it removes that scaffolding after
 commit.
@@ -505,7 +562,7 @@ flowchart LR
 
 ```mermaid
 graph TD
-    EL["element.ts (~850 lines)<br/><i>Orchestrator</i><br/>$mount, $wire, $hydrate,<br/>$resolveSSR, $applySSRState,<br/>$update, events, cleanup"]
+    EL["element.ts (~850 lines)<br/><i>Orchestrator</i><br/>$mount, $wire, $hydrate,<br/>buildSSRIndex, $applySSRState,<br/>$update, events, cleanup"]
 
     DIFF["element/diff.ts<br/><i>List Reconciliation</i><br/>positional + explicit-key diffing<br/>for &lt;for&gt; repeat blocks"]
 
@@ -556,7 +613,7 @@ sequenceDiagram
     FW->>FW: SSR DOM detected (shadow root or children exist)
     FW->>FW: $applySSRState() — seed decorated state
     FW->>FW: $hydrate() — template-parallel path resolution
-    FW->>FW: $resolveSSR() — match SSR nodes via ordinal traversal
+    FW->>FW: buildSSRIndex() — number SSR nodes in one pre-order walk
     FW->>FW: $wireEvents() + $wireRefs()
     FW->>FW: $buildPathIndex(), $ready = true
     FW->>CE: hydratedCallback() (once)
@@ -605,7 +662,7 @@ interface TemplateMeta {
   ag?: [path, start, count][];         // Attribute target groups
   c?: [conditionAST, blockIndex, slot][]; // Conditional blocks
   r?: [collection, itemVar, blockIdx, slot][]; // Repeat blocks
-  eg?: [event, [[handler, argSpecs, targetPath, usesEvent?]]][]; // Events
+  eg?: [event, [[handler, argSpecs, targetIndex, usesEvent?]]][]; // Events
   b?: TemplateBlockMeta[];             // Nested block metadata
   sa?: string;                         // Adopted stylesheet specifier
   sd?: 1;                              // Shadow DOM flag for client-created
@@ -760,7 +817,7 @@ valid identity is re-established.
 
 On initial hydration, the repeat system walks existing SSR children and
 reconstructs collection instances by matching them against the compiled
-template via `$resolveSSR` path traversal.  State is already seeded from
+template via the `buildSSRIndex` walk.  State is already seeded from
 `window.__webui.state`, so repeat items reflect the server-rendered list
 without parsing marker comments.
 
@@ -785,40 +842,44 @@ stylesheet specifier for a component.
 ## Path-Based Binding Resolution
 
 Unlike frameworks that use comment markers or data attributes to locate each
-dynamic binding, this framework uses **compiled template paths** — arrays of
-child-node indices that describe exactly where each binding lives in the DOM
-tree. Progressive streaming's temporary boundary markers locate complete
+dynamic binding, this framework uses **compiled element indices** — each
+binding names its element by pre-order position within its compiled section. Progressive streaming's temporary boundary markers locate complete
 activation regions, not individual bindings.
 
-### Client-created resolution (`$resolve`)
+### Client-created resolution (`collectTemplateElements`)
 
-For client-created components, the DOM matches `meta.h` exactly (it was cloned
-from the parsed template fragment).  Resolution is a simple child-node index
-walk:
+For client-created components the DOM matches `meta.h` exactly (it was cloned
+from the parsed template fragment), so a plain pre-order walk reproduces the
+compiled numbering:
 
 ```typescript
-// path = [1, 0] → root.childNodes[1].childNodes[0]
-let cur: Node = root;
-for (const idx of path) {
-  cur = cur.childNodes[idx];
-}
+// elements[0] is the section root; elements[i] is the i-th element
+// a depth-first walk of the template meets.
+const elements = collectTemplateElements(root);
+const target = elements[index];
 ```
 
-### SSR resolution (`$resolveSSR`)
+### SSR resolution (`buildSSRIndex`)
 
-SSR DOM may differ from the compiled template — the browser's HTML parser can
-strip whitespace-only text nodes.  `$resolveSSR` walks the SSR DOM and the
-compiled template DOM **in parallel**, translating each child-node index into
-an element-ordinal or text-ordinal lookup:
+SSR DOM differs from the compiled template: the renderer strips inter-element
+whitespace, and `<if>` / `<for>` bodies are rendered inline between markers.
+`buildSSRIndex` walks the SSR DOM and the compiled template DOM **in lockstep**,
+skipping whole marker ranges, and numbers the result the same way:
 
 ```typescript
-// For element nodes: count element siblings up to idx in template,
-// then find the element at that ordinal in SSR DOM.
-// For text nodes: same approach with text node ordinals.
+// Elements are paired positionally and numbered in pre-order.
+// Structural ranges are skipped whole — that content belongs to
+// the block's own metadata.
+// Text is the exception: whitespace stripping means text nodes do
+// not line up, so text slots still resolve by ordinal.
 ```
 
-This template-parallel traversal eliminates the need for any marker comments,
-`data-*` attributes, or DOM annotations.  The SSR server emits clean HTML.
+This eliminates all *per-binding* annotation: no `data-w-*` attributes, no
+comment per text run, no DOM markers around individual bindings.  What the SSR
+server does emit is the five structural comments documented above
+(`<!--wr-->`, `<!--wi-->`, `<!--/wr-->`, `<!--wc-->`, `<!--/wc-->`), which
+delimit `<if>` / `<for>` bodies and are what the walk skips over and anchors
+blocks on.  They are removed once hydration completes.
 
 ---
 
@@ -826,7 +887,7 @@ This template-parallel traversal eliminates the need for any marker comments,
 
 | Operation | Cost | Why |
 |-----------|------|-----|
-| Initial hydration | O(bindings) | Single pass over compiled path mappings |
+| Initial hydration | O(nodes) | One pre-order walk numbers the subtree; each binding is then an index lookup |
 | Reactive update | O(affected) | Per-path index skips unrelated bindings |
 | Conditional toggle | O(block size) | Create/destroy a block instance |
 | Repeat reconciliation | O(items) | Positional scan; explicit keys use a reusable map only when order changes |
@@ -852,10 +913,15 @@ The runtime exposes hydration timing via the Performance API:
 
 ```ts
 window.addEventListener('webui:hydration-complete', () => {
-  console.log('All initial framework components are hydrated.');
+  console.log('The startup hydration cohort is complete.');
 });
 ```
 
+Parser-startup lazy components hold this event only through their first
+intersection result. Initially visible roots finish first; dormant roots do not
+hold the one-shot event open or redispatch it later. Use `hydratedCallback()`
+for instance readiness.
+
 ---
 
 ## Where to Look Next

package/dist/decorators.js

@@ -163,8 +163,14 @@ function createReactiveProperty(proto, name, attrDefinition) {
         },
         set(newValue) {
             const oldValue = this[backingKey];
-            if (Object.is(oldValue, newValue))
+            if (Object.is(oldValue, newValue)) {
+                if (this['$deferredSSR'] === true) {
+                    const update = this['$update'];
+                    if (update)
+                        update.call(this, name);
+                }
                 return;
+            }
             this[backingKey] = newValue;
             if (attrDefinition && this['$ready'] === true) {
                 reflectPropertyToAttribute(this, attrDefinition, newValue);
@@ -173,7 +179,8 @@ function createReactiveProperty(proto, name, attrDefinition) {
             if (typeof cb === 'function') {
                 cb.call(this, oldValue, newValue);
             }
-            if (this.isConnected) {
+            if (this.isConnected ||
+                this['$deferredSSR'] === true) {
                 const upd = this['$update'];
                 if (upd)
                     upd.call(this, name);

package/dist/element/markers.d.ts

@@ -7,4 +7,12 @@ export declare function collectItemMarkers(repeatStart: Comment): {
     end: Comment | null;
 };
 export declare function nextElement(marker: Comment): Element | null;
+export declare function skipBlockRange(start: Comment, data: string): ChildNode | null;
+export declare function collectTemplateElements(root: Node): Array<Node | undefined>;
+export interface SSRIndex {
+    elements: Array<Node | undefined>;
+    conds: Comment[];
+    repeats: Comment[];
+}
+export declare function buildSSRIndex(tplRoot: Node, ssrRoot: Node, needMarkers: boolean, ssrIsSectionChild?: boolean): SSRIndex;
 export declare function findByOrdinal(parent: Node, nodeType: number, ordinal: number): Node | null;

package/dist/element/markers.js

@@ -43,6 +43,100 @@ export function nextElement(marker) {
     }
     return null;
 }
+export function skipBlockRange(start, data) {
+    const endTag = data === MARKER_COND_START ? MARKER_COND_END : MARKER_REPEAT_END;
+    let depth = 1;
+    let node = start.nextSibling;
+    while (node && depth > 0) {
+        if (node.nodeType === 8) {
+            const d = node.data;
+            if (d === data)
+                depth++;
+            else if (d === endTag)
+                depth--;
+        }
+        if (depth > 0)
+            node = node.nextSibling;
+    }
+    return node ? node.nextSibling : null;
+}
+export function collectTemplateElements(root) {
+    const elements = [root];
+    const stack = [root.firstChild];
+    while (stack.length > 0) {
+        const node = stack.pop();
+        let child = node ?? null;
+        while (child) {
+            if (child.nodeType === 1) {
+                elements.push(child);
+                if (child.firstChild) {
+                    stack.push(child.nextSibling);
+                    child = child.firstChild;
+                    continue;
+                }
+            }
+            child = child.nextSibling;
+        }
+    }
+    return elements;
+}
+export function buildSSRIndex(tplRoot, ssrRoot, needMarkers, ssrIsSectionChild = false) {
+    const elements = [ssrIsSectionChild ? undefined : ssrRoot];
+    const conds = [];
+    const repeats = [];
+    const stack = [
+        {
+            t: tplRoot.firstChild,
+            s: ssrIsSectionChild ? ssrRoot : ssrRoot.firstChild,
+            solo: ssrIsSectionChild,
+        },
+    ];
+    let index = 0;
+    while (stack.length > 0) {
+        const frame = stack[stack.length - 1];
+        let s = frame.s;
+        while (s) {
+            const type = s.nodeType;
+            if (type === 8) {
+                const data = s.data;
+                if (data === MARKER_COND_START) {
+                    conds.push(s);
+                    s = skipBlockRange(s, data);
+                    continue;
+                }
+                if (data === MARKER_REPEAT_START) {
+                    repeats.push(s);
+                    s = skipBlockRange(s, data);
+                    continue;
+                }
+            }
+            else if (type === 1) {
+                break;
+            }
+            s = s.nextSibling;
+        }
+        let t = frame.t;
+        while (t && t.nodeType !== 1)
+            t = t.nextSibling;
+        if (!t) {
+            stack.pop();
+            continue;
+        }
+        index++;
+        if (s) {
+            elements[index] = s;
+            frame.s = frame.solo ? null : s.nextSibling;
+        }
+        frame.t = t.nextSibling;
+        if (t.firstChild) {
+            stack.push({ t: t.firstChild, s: s ? s.firstChild : null, solo: false });
+        }
+        else if (needMarkers && s && s.firstChild && t.tagName.indexOf('-') < 0) {
+            stack.push({ t: null, s: s.firstChild, solo: false });
+        }
+    }
+    return { elements, conds, repeats };
+}
 export function findByOrdinal(parent, nodeType, ordinal) {
     let count = 0;
     let child = parent.firstChild;
@@ -50,22 +144,7 @@ export function findByOrdinal(parent, nodeType, ordinal) {
         if (child.nodeType === 8) {
             const data = child.data;
             if (data === MARKER_COND_START || data === MARKER_REPEAT_START) {
-                const endTag = data === MARKER_COND_START ? MARKER_COND_END : MARKER_REPEAT_END;
-                let depth = 1;
-                child = child.nextSibling;
-                while (child && depth > 0) {
-                    if (child.nodeType === 8) {
-                        const d = child.data;
-                        if (d === data)
-                            depth++;
-                        else if (d === endTag)
-                            depth--;
-                    }
-                    if (depth > 0)
-                        child = child.nextSibling;
-                }
-                if (child)
-                    child = child.nextSibling;
+                child = skipBlockRange(child, data);
                 continue;
             }
         }

package/dist/element.d.ts

@@ -1,12 +1,21 @@
 import { TemplateElement } from './template-element.js';
-import type { TemplateBlockMeta, TemplateNodePath } from './template.js';
+import { LAZY_HYDRATION_ACTIVATE } from './lazy-hydration-contract.js';
+import type { TemplateBlockMeta, TemplateMeta, TemplateNodeIndex } from './template.js';
 import type { ScopeFrame, TemplateInstance } from './element/types.js';
 export declare class WebUIElement extends TemplateElement {
+    private $lazyHydrationMode;
+    protected $shouldDeferSSRHydration(meta?: TemplateMeta): boolean;
+    protected $didDeferSSRHydration(): void;
+    protected $didDeferStreamedSSRHydration(state: Record<string, unknown> | undefined): void;
+    protected $activateDeferredSSR(state?: Record<string, unknown>): void;
+    private $resolveLazyHydrationMode;
+    [LAZY_HYDRATION_ACTIVATE](state: Record<string, unknown> | undefined): void;
+    disconnectedCallback(): void;
     protected $observableNames(): Set<string>;
     protected $shouldApplySSRState(key: string): boolean;
     protected $syncAuthoredAttributes(): void;
     $emit(name: string, detail?: unknown): boolean;
-    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, path: TemplateNodeIndex) => Node | null, scope?: ScopeFrame): void;
     private $wireEvents;
     private $wireRoot;
     private $addEvent;

package/dist/element.js

@@ -1,6 +1,92 @@
 import { TemplateElement } from './template-element.js';
+import { disconnectLazyHydration, isStreamedLazyActivation, isLazyHydrationCoordinatorInstalled, LAZY_HYDRATION_ACTIVATE, LAZY_HYDRATION_CONTENT_VISIBILITY, LAZY_HYDRATION_VIEWPORT, observeLazyHydration, observeStreamedLazyHydration, supportsLazyHydration, } from './lazy-hydration-contract.js';
+import { isStreamingHydrationMode, STREAMED_HOST_ATTR, } from './streaming-mode.js';
 import { attributeNameForProperty, getObservableNames, syncAttrProperties, } from './decorators.js';
+const HYDRATE_ATTR = 'w-hydrate';
+const RENDER_ATTR = 'w-render';
+const HYDRATE_EAGER = 'eager';
+const DEV = typeof __WEBUI_DEV__ === 'undefined' || __WEBUI_DEV__;
+let warnedMissingLazyHydrationEntry = false;
+function warnMissingLazyHydrationEntry(tag, policy) {
+    if (!DEV || warnedMissingLazyHydrationEntry)
+        return;
+    warnedMissingLazyHydrationEntry = true;
+    const directive = policy === LAZY_HYDRATION_CONTENT_VISIBILITY
+        ? 'w-render="lazy"'
+        : 'w-hydrate="lazy"';
+    console.warn(`[WebUI] <${tag}> was compiled with \`${directive}\`, but ` +
+        "'@microsoft/webui-framework/lazy-hydration.js' was never imported, " +
+        'so it hydrated eagerly instead. Import that optional entry once before ' +
+        'your component definitions to enable visibility-deferred hydration.');
+}
 export class WebUIElement extends TemplateElement {
+    $shouldDeferSSRHydration(meta) {
+        this.$lazyHydrationMode = this.$resolveLazyHydrationMode(meta);
+        return this.$lazyHydrationMode !== undefined;
+    }
+    $didDeferSSRHydration() {
+        if (!isStreamingHydrationMode() ||
+            !this.hasAttribute(STREAMED_HOST_ATTR)) {
+            this.$primeSSRStateForDeferral();
+            const mode = this.$lazyHydrationMode;
+            if (mode !== undefined)
+                observeLazyHydration(this, mode);
+        }
+    }
+    $didDeferStreamedSSRHydration(state) {
+        const mode = this.$lazyHydrationMode;
+        if (mode === undefined) {
+            super.$didDeferStreamedSSRHydration(state);
+            return;
+        }
+        observeStreamedLazyHydration(this, state, mode);
+    }
+    $activateDeferredSSR(state) {
+        if (isStreamedLazyActivation(this)) {
+            this.$lazyHydrationMode = undefined;
+            super.$activateDeferredSSRFromBoundary(state);
+            return;
+        }
+        const mode = this.$lazyHydrationMode ??
+            this.$resolveLazyHydrationMode(this.$currentTemplateMetadata());
+        if (isStreamingHydrationMode() &&
+            this.hasAttribute(STREAMED_HOST_ATTR) &&
+            mode !== undefined) {
+            this.$lazyHydrationMode = mode;
+            observeStreamedLazyHydration(this, state, mode);
+            return;
+        }
+        this.$lazyHydrationMode = undefined;
+        super.$activateDeferredSSR(state);
+    }
+    $resolveLazyHydrationMode(meta) {
+        const policy = meta?.wp;
+        if (policy === undefined)
+            return undefined;
+        if (policy === LAZY_HYDRATION_CONTENT_VISIBILITY &&
+            this.getAttribute(RENDER_ATTR) === HYDRATE_EAGER)
+            return undefined;
+        if (this.getAttribute(HYDRATE_ATTR) === HYDRATE_EAGER)
+            return undefined;
+        if (!isLazyHydrationCoordinatorInstalled()) {
+            warnMissingLazyHydrationEntry(this.tagName, policy);
+            return undefined;
+        }
+        if (!supportsLazyHydration())
+            return undefined;
+        return policy === LAZY_HYDRATION_CONTENT_VISIBILITY
+            ? LAZY_HYDRATION_CONTENT_VISIBILITY
+            : LAZY_HYDRATION_VIEWPORT;
+    }
+    [LAZY_HYDRATION_ACTIVATE](state) {
+        this.$activateDeferredSSR(state);
+    }
+    disconnectedCallback() {
+        if (this.$lazyHydrationMode !== undefined) {
+            disconnectLazyHydration(this);
+        }
+        super.disconnectedCallback();
+    }
     $observableNames() {
         return getObservableNames(this.constructor);
     }
@@ -41,9 +127,8 @@ export class WebUIElement extends TemplateElement {
         }
     }
     $wireRoot(instance, re) {
-        const target = this.shadowRoot ?? this;
         for (let i = 0; i < re.length; i++) {
-            this.$addEvent(instance, target, re[i][0], re[i][1], re[i][2], undefined);
+            this.$addEvent(instance, this, re[i][0], re[i][1], re[i][2], undefined);
         }
     }
     $addEvent(instance, target, eventName, handlerName, args, scope) {

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

@@ -0,0 +1,22 @@
+export declare const LAZY_HYDRATION_ACTIVATE: unique symbol;
+export declare const LAZY_HYDRATION_VIEWPORT = 1;
+export declare const LAZY_HYDRATION_CONTENT_VISIBILITY = 2;
+export type LazyHydrationMode = typeof LAZY_HYDRATION_VIEWPORT | typeof LAZY_HYDRATION_CONTENT_VISIBILITY;
+export type LazyHydrationTarget = HTMLElement & {
+    [LAZY_HYDRATION_ACTIVATE](state: Record<string, unknown> | undefined): void;
+};
+export interface LazyHydrationCoordinator {
+    supportsLazyHydration(): boolean;
+    observe(target: LazyHydrationTarget, mode: LazyHydrationMode): void;
+    observeStreamed(target: LazyHydrationTarget, state: Record<string, unknown> | undefined, mode: LazyHydrationMode): void;
+    disconnect(target: LazyHydrationTarget): void;
+    isStreamedActivation(target: LazyHydrationTarget): boolean;
+}
+export declare function registerLazyHydrationCoordinator(impl: LazyHydrationCoordinator): void;
+export declare function isLazyHydrationCoordinatorInstalled(): boolean;
+export declare function supportsLazyHydration(): boolean;
+export declare function observeLazyHydration(target: LazyHydrationTarget, mode: LazyHydrationMode): void;
+export declare function observeStreamedLazyHydration(target: LazyHydrationTarget, state: Record<string, unknown> | undefined, mode: LazyHydrationMode): void;
+export declare function disconnectLazyHydration(target: LazyHydrationTarget): void;
+export declare function isStreamedLazyActivation(target: LazyHydrationTarget): boolean;
+export declare function __resetLazyHydrationContractForTests(): void;

package/dist/lazy-hydration-contract.js

@@ -0,0 +1,28 @@
+export const LAZY_HYDRATION_ACTIVATE = Symbol();
+export const LAZY_HYDRATION_VIEWPORT = 1;
+export const LAZY_HYDRATION_CONTENT_VISIBILITY = 2;
+let coordinator;
+export function registerLazyHydrationCoordinator(impl) {
+    coordinator = impl;
+}
+export function isLazyHydrationCoordinatorInstalled() {
+    return coordinator !== undefined;
+}
+export function supportsLazyHydration() {
+    return coordinator?.supportsLazyHydration() ?? false;
+}
+export function observeLazyHydration(target, mode) {
+    coordinator?.observe(target, mode);
+}
+export function observeStreamedLazyHydration(target, state, mode) {
+    coordinator?.observeStreamed(target, state, mode);
+}
+export function disconnectLazyHydration(target) {
+    coordinator?.disconnect(target);
+}
+export function isStreamedLazyActivation(target) {
+    return coordinator?.isStreamedActivation(target) ?? false;
+}
+export function __resetLazyHydrationContractForTests() {
+    coordinator = undefined;
+}

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

@@ -0,0 +1,2 @@
+export declare function installLazyHydrationCoordinator(): void;
+export declare function __resetLazyHydrationCoordinatorForTests(): void;