@microsoft/fast-element 2.10.3 → 3.0.0-rc.1

package/dist/esm/templating/hydration-view.js

@@ -0,0 +1,235 @@
+var _a;
+import { Hydratable } from "../components/hydration.js";
+import { buildViewBindingTargets, createRangeForNodes, HydrationTargetElementError, targetFactory, } from "../hydration/target-builder.js";
+import { SourceLifetime } from "../observation/observable.js";
+import { makeSerializationNoop } from "../platform.js";
+import { DefaultExecutionContext, removeNodeSequence, } from "./view.js";
+/** @public */
+export const HydrationStage = {
+    unhydrated: "unhydrated",
+    hydrating: "hydrating",
+    hydrated: "hydrated",
+};
+/** @public */
+export class HydrationBindingError extends Error {
+    constructor(
+    /**
+     * The error message
+     */
+    message, 
+    /**
+     * The factory that was unable to be bound
+     */
+    factory, 
+    /**
+     * A DocumentFragment containing a clone of the
+     * view's Nodes.
+     */
+    fragment, 
+    /**
+     * String representation of the HTML in the template that
+     * threw the binding error.
+     */
+    templateString) {
+        super(message);
+        this.factory = factory;
+        this.fragment = fragment;
+        this.templateString = templateString;
+    }
+}
+export class HydrationView extends DefaultExecutionContext {
+    get hydrationStage() {
+        return this._hydrationStage;
+    }
+    get targets() {
+        return this._targets;
+    }
+    get bindingViewBoundaries() {
+        return this._bindingViewBoundaries;
+    }
+    constructor(firstChild, lastChild, sourceTemplate, hostBindingTarget) {
+        super();
+        this.firstChild = firstChild;
+        this.lastChild = lastChild;
+        this.sourceTemplate = sourceTemplate;
+        this.hostBindingTarget = hostBindingTarget;
+        this[_a] = Hydratable;
+        this.context = this;
+        this.source = null;
+        this.isBound = false;
+        this.sourceLifetime = SourceLifetime.unknown;
+        this.unbindables = [];
+        this.fragment = null;
+        this.behaviors = null;
+        this._hydrationStage = HydrationStage.unhydrated;
+        this._bindingViewBoundaries = {};
+        this._targets = {};
+        this.factories = sourceTemplate.compile().factories;
+    }
+    /**
+     * no-op. Hydrated views are don't need to be moved from a documentFragment
+     * to the target node.
+     */
+    insertBefore(node) {
+        // No-op in cases where this is called before the view is removed,
+        // because the nodes will already be in the document and just need hydrating.
+        if (this.fragment === null) {
+            return;
+        }
+        if (this.fragment.hasChildNodes()) {
+            node.parentNode.insertBefore(this.fragment, node);
+        }
+        else {
+            const end = this.lastChild;
+            if (node.previousSibling === end)
+                return;
+            const parentNode = node.parentNode;
+            let current = this.firstChild;
+            let next;
+            while (current !== end) {
+                next = current.nextSibling;
+                parentNode.insertBefore(current, node);
+                current = next;
+            }
+            parentNode.insertBefore(end, node);
+        }
+    }
+    /**
+     * Appends the view to a node. In cases where this is called before the
+     * view has been removed, the method will no-op.
+     * @param node - the node to append the view to.
+     */
+    appendTo(node) {
+        if (this.fragment !== null) {
+            node.appendChild(this.fragment);
+        }
+    }
+    remove() {
+        const fragment = this.fragment || (this.fragment = document.createDocumentFragment());
+        const end = this.lastChild;
+        let current = this.firstChild;
+        let next;
+        while (current !== end) {
+            next = current.nextSibling;
+            if (!next) {
+                throw new Error(`Unmatched first/last child inside "${end.getRootNode().host.nodeName}".`);
+            }
+            fragment.appendChild(current);
+            current = next;
+        }
+        fragment.appendChild(end);
+    }
+    bind(source, context = this) {
+        var _b;
+        if (this.hydrationStage !== HydrationStage.hydrated) {
+            this._hydrationStage = HydrationStage.hydrating;
+        }
+        if (this.source === source) {
+            return;
+        }
+        let behaviors = this.behaviors;
+        if (behaviors === null) {
+            this.source = source;
+            this.context = context;
+            try {
+                const { targets, boundaries } = buildViewBindingTargets(this.firstChild, this.lastChild, this.factories);
+                this._targets = targets;
+                this._bindingViewBoundaries = boundaries;
+            }
+            catch (error) {
+                if (error instanceof HydrationTargetElementError) {
+                    let templateString = this.sourceTemplate.html;
+                    if (typeof templateString !== "string") {
+                        templateString = templateString.innerHTML;
+                    }
+                    error.templateString = templateString;
+                }
+                throw error;
+            }
+            this.behaviors = behaviors = new Array(this.factories.length);
+            const factories = this.factories;
+            for (let i = 0, ii = factories.length; i < ii; ++i) {
+                const factory = factories[i];
+                if (factory.targetNodeId === "h" && this.hostBindingTarget) {
+                    targetFactory(factory, this.hostBindingTarget, this._targets);
+                }
+                // If the binding has been targeted or it is a host binding and the view has a hostBindingTarget
+                if (factory.targetNodeId in this.targets) {
+                    const behavior = factory.createBehavior();
+                    behavior.bind(this);
+                    behaviors[i] = behavior;
+                }
+                else {
+                    let templateString = this.sourceTemplate.html;
+                    if (typeof templateString !== "string") {
+                        templateString = templateString.innerHTML;
+                    }
+                    const hostElement = ((_b = this.firstChild) === null || _b === void 0 ? void 0 : _b.getRootNode())
+                        .host;
+                    const hostName = (hostElement === null || hostElement === void 0 ? void 0 : hostElement.nodeName) || "unknown";
+                    const factoryInfo = factory;
+                    // Build detailed error message
+                    const details = [
+                        `HydrationView was unable to successfully target bindings inside "<${hostName.toLowerCase()}>".`,
+                        `\nMismatch Details:`,
+                        `  - Expected target node ID: "${factory.targetNodeId}"`,
+                        `  - Available target IDs: [${Object.keys(this.targets).join(", ") || "none"}]`,
+                    ];
+                    if (factory.targetTagName) {
+                        details.push(`  - Expected tag name: "${factory.targetTagName}"`);
+                    }
+                    if (factoryInfo.sourceAspect) {
+                        details.push(`  - Source aspect: "${factoryInfo.sourceAspect}"`);
+                    }
+                    if (factoryInfo.aspectType !== undefined) {
+                        details.push(`  - Aspect type: ${factoryInfo.aspectType}`);
+                    }
+                    details.push(`\nThis usually means:`, `  1. The server-rendered HTML doesn't match the client template`, `  2. The hydration markers are missing or corrupted`, `  3. The DOM structure was modified before hydration`, `\nTemplate: ${templateString.slice(0, 200)}${templateString.length > 200 ? "..." : ""}`);
+                    throw new HydrationBindingError(details.join("\n"), factory, createRangeForNodes(this.firstChild, this.lastChild).cloneContents(), templateString);
+                }
+            }
+        }
+        else {
+            if (this.source !== null) {
+                this.evaluateUnbindables();
+            }
+            this.isBound = false;
+            this.source = source;
+            this.context = context;
+            for (let i = 0, ii = behaviors.length; i < ii; ++i) {
+                behaviors[i].bind(this);
+            }
+        }
+        this.isBound = true;
+        this._hydrationStage = HydrationStage.hydrated;
+    }
+    unbind() {
+        if (!this.isBound || this.source === null) {
+            return;
+        }
+        this.evaluateUnbindables();
+        this.source = null;
+        this.context = this;
+        this.isBound = false;
+    }
+    /**
+     * Removes the view and unbinds its behaviors, disposing of DOM nodes afterward.
+     * Once a view has been disposed, it cannot be inserted or bound again.
+     */
+    dispose() {
+        removeNodeSequence(this.firstChild, this.lastChild);
+        this.unbind();
+    }
+    onUnbind(behavior) {
+        this.unbindables.push(behavior);
+    }
+    evaluateUnbindables() {
+        const unbindables = this.unbindables;
+        for (let i = 0, ii = unbindables.length; i < ii; ++i) {
+            unbindables[i].unbind(this);
+        }
+        unbindables.length = 0;
+    }
+}
+_a = Hydratable;
+makeSerializationNoop(HydrationView);

package/dist/esm/templating/render.js

@@ -8,7 +8,7 @@ import { isFunction, isString } from "../interfaces.js";
 import { HTMLDirective, } from "./html-directive.js";
 import { Markup } from "./markup.js";
 import { html, ViewTemplate, } from "./template.js";
-import { HydrationStage } from "./view.js";
+import { HydrationStage } from "./hydration-view.js";
 /**
  * A Behavior that enables advanced rendering.
  * @public
@@ -62,8 +62,19 @@ export class RenderBehavior {
             view.needsBindOnly = true;
         }
     }
-    /** @internal */
+    /**
+     * Handles changes from data or template binding observers.
+     * Guards against stale notifications that may arrive after the
+     * controller's view has been unbound (e.g., when a parent `when`
+     * directive tears down and later recreates a child element).
+     * @internal
+     */
     handleChange(source, observer) {
+        // https://github.com/microsoft/fast/issues/7444
+        // This guard will be reconsidered in the next major version.
+        if (!this.controller.isBound) {
+            return;
+        }
         if (observer === this.dataBindingObserver) {
             this.data = this.dataBindingObserver.bind(this.controller);
         }

package/dist/esm/templating/repeat.js

@@ -1,11 +1,12 @@
 import { normalizeBinding } from "../binding/normalize.js";
-import { HydrationMarkup, isHydratable } from "../components/hydration.js";
-import { ArrayObserver, Sort, Splice } from "../observation/arrays.js";
+import { isHydratable } from "../components/hydration.js";
+import { ArrayObserver } from "../observation/arrays.js";
 import { Observable, } from "../observation/observable.js";
 import { emptyArray } from "../platform.js";
 import { HTMLDirective, } from "./html-directive.js";
 import { Markup } from "./markup.js";
-import { HTMLView, HydrationStage, HydrationView } from "./view.js";
+import { HydrationStage, } from "./hydration-view.js";
+import { HTMLView, } from "./view.js";
 const defaultRepeatOptions = Object.freeze({
     positioning: false,
     recycle: true,
@@ -287,60 +288,61 @@ export class RepeatBehavior {
         if (!this.items) {
             return;
         }
-        this.views = new Array(this.items.length);
+        const itemCount = this.items.length;
+        this.views = new Array(itemCount);
+        // First pass: collect all repeat marker pairs by walking backward.
+        // Each entry is { start: Node, end: Node } for the item content range.
+        const itemRanges = [];
         let current = this.location.previousSibling;
         while (current !== null) {
-            if (!isCommentNode(current)) {
-                current = current.previousSibling;
-                continue;
-            }
-            const index = HydrationMarkup.parseRepeatEndMarker(current.data);
-            if (index === null) {
+            if (!isCommentNode(current) || current.data !== "fe:/r") {
                 current = current.previousSibling;
                 continue;
             }
+            // Found repeat end marker
             current.data = "";
-            // end of repeat is the previousSibling of end comment
             const end = current.previousSibling;
             if (!end) {
                 throw new Error(`Error when hydrating inside "${this.location.getRootNode().host.nodeName}": end should never be null.`);
             }
-            // find start marker
+            // Find matching start marker via balanced counting
             let start = end;
-            // How many unmatched end markers we've encountered
-            let unmatchedEndMarkers = 0;
+            let depth = 0;
             while (start !== null) {
                 if (isCommentNode(start)) {
-                    if (HydrationMarkup.isRepeatViewEndMarker(start.data)) {
-                        unmatchedEndMarkers++;
+                    if (start.data === "fe:/r") {
+                        depth++;
                     }
-                    else if (HydrationMarkup.isRepeatViewStartMarker(start.data)) {
-                        if (unmatchedEndMarkers) {
-                            unmatchedEndMarkers--;
-                        }
-                        else {
-                            if (HydrationMarkup.parseRepeatStartMarker(start.data) !==
-                                index) {
-                                throw new Error(`Error when hydrating inside "${this.location.getRootNode().host
-                                    .nodeName}": Mismatched start and end markers.`);
-                            }
-                            start.data = "";
-                            current = start.previousSibling;
-                            // start of repeat content is the nextSibling of start comment
-                            start = start.nextSibling;
-                            const view = template.hydrate(start, end);
-                            this.views[index] = view;
-                            this.bindView(view, this.items, index, this.controller);
+                    else if (start.data === "fe:r") {
+                        if (depth === 0) {
+                            const startMarker = start;
+                            startMarker.data = "";
+                            current = startMarker.previousSibling;
+                            const itemStart = startMarker.nextSibling;
+                            // Empty item: start and end markers are adjacent.
+                            const itemEnd = end === startMarker ? itemStart : end;
+                            itemRanges.push({ start: itemStart, end: itemEnd });
                             break;
                         }
+                        depth--;
                     }
                 }
                 start = start.previousSibling;
             }
             if (!start) {
-                throw new Error(`Error when hydrating inside "${this.location.getRootNode().host.nodeName}": start should never be null.`);
+                throw new Error(`Error when hydrating inside "${this.location.getRootNode().host.nodeName}": repeat start marker not found.`);
             }
         }
+        // Ranges were collected backward (last item first).
+        // Reverse so index 0 = first SSR item.
+        itemRanges.reverse();
+        // Hydrate each SSR item at its correct index (0-based from start).
+        for (let i = 0; i < itemRanges.length && i < itemCount; i++) {
+            const { start, end } = itemRanges[i];
+            const view = template.hydrate(start, end);
+            this.views[i] = view;
+            this.bindView(view, this.items, i, this.controller);
+        }
     }
 }
 /**

package/dist/esm/templating/template.js

@@ -77,13 +77,6 @@ export class ViewTemplate {
         }
         return this.result;
     }
-    /**
-     * Creates an HTMLView instance based on this template definition.
-     * @param hostBindingTarget - The element that host behaviors will be bound to.
-     */
-    create(hostBindingTarget) {
-        return this.compile().createView(hostBindingTarget);
-    }
     /**
      * Returns a directive that can inline the template.
      */
@@ -121,6 +114,13 @@ export class ViewTemplate {
         view.appendTo(host);
         return view;
     }
+    /**
+     * Creates an HTMLView instance based on this template definition.
+     * @param hostBindingTarget - The element that host behaviors will be bound to.
+     */
+    create(hostBindingTarget) {
+        return this.compile().createView(hostBindingTarget);
+    }
     /**
      * Processes the tagged template literal's static strings and interpolated values and
      * creates a ViewTemplate.

package/dist/esm/templating/view.js

@@ -1,9 +1,6 @@
-var _a;
-import { Hydratable } from "../components/hydration.js";
-import { buildViewBindingTargets, createRangeForNodes, HydrationTargetElementError, targetFactory, } from "../hydration/target-builder.js";
 import { ExecutionContext, Observable, SourceLifetime, } from "../observation/observable.js";
 import { makeSerializationNoop } from "../platform.js";
-function removeNodeSequence(firstNode, lastNode) {
+export function removeNodeSequence(firstNode, lastNode) {
     const parent = firstNode.parentNode;
     let current = firstNode;
     let next;
@@ -17,7 +14,11 @@ function removeNodeSequence(firstNode, lastNode) {
     }
     parent.removeChild(lastNode);
 }
-class DefaultExecutionContext {
+/**
+ * The default execution context for template views.
+ * @public
+ */
+export class DefaultExecutionContext {
     constructor() {
         /**
          * The index of the current item within a repeat context.
@@ -111,6 +112,24 @@ export class HTMLView extends DefaultExecutionContext {
          * Indicates how the source's lifetime relates to the controller's lifetime.
          */
         this.sourceLifetime = SourceLifetime.unknown;
+        /**
+         * When true, directives skip attribute/booleanAttribute DOM
+         * updates during bind(). Set only during the prerendered bind
+         * window and cleared immediately after.
+         * @internal
+         */
+        this._skipAttrUpdates = false;
+        /**
+         * A promise that resolves with `true` after prerendered content
+         * has been hydrated, or `false` when the view is client-side
+         * rendered. Resolves once the first bind completes.
+         */
+        this.isPrerendered = Promise.resolve(false);
+        /**
+         * Resolves `true` after prerendered content has been hydrated,
+         * `false` when client-side rendered or hydration not enabled.
+         */
+        this.isHydrated = Promise.resolve(false);
         /**
          * The execution context the view is running within.
          */
@@ -258,231 +277,3 @@ export class HTMLView extends DefaultExecutionContext {
 makeSerializationNoop(HTMLView);
 Observable.defineProperty(HTMLView.prototype, "index");
 Observable.defineProperty(HTMLView.prototype, "length");
-export const HydrationStage = {
-    unhydrated: "unhydrated",
-    hydrating: "hydrating",
-    hydrated: "hydrated",
-};
-/** @public */
-export class HydrationBindingError extends Error {
-    constructor(
-    /**
-     * The error message
-     */
-    message, 
-    /**
-     * The factory that was unable to be bound
-     */
-    factory, 
-    /**
-     * A DocumentFragment containing a clone of the
-     * view's Nodes.
-     */
-    fragment, 
-    /**
-     * String representation of the HTML in the template that
-     * threw the binding error.
-     */
-    templateString) {
-        super(message);
-        this.factory = factory;
-        this.fragment = fragment;
-        this.templateString = templateString;
-    }
-}
-export class HydrationView extends DefaultExecutionContext {
-    get hydrationStage() {
-        return this._hydrationStage;
-    }
-    get targets() {
-        return this._targets;
-    }
-    get bindingViewBoundaries() {
-        return this._bindingViewBoundaries;
-    }
-    constructor(firstChild, lastChild, sourceTemplate, hostBindingTarget) {
-        super();
-        this.firstChild = firstChild;
-        this.lastChild = lastChild;
-        this.sourceTemplate = sourceTemplate;
-        this.hostBindingTarget = hostBindingTarget;
-        this[_a] = Hydratable;
-        this.context = this;
-        this.source = null;
-        this.isBound = false;
-        this.sourceLifetime = SourceLifetime.unknown;
-        this.unbindables = [];
-        this.fragment = null;
-        this.behaviors = null;
-        this._hydrationStage = HydrationStage.unhydrated;
-        this._bindingViewBoundaries = {};
-        this._targets = {};
-        this.factories = sourceTemplate.compile().factories;
-    }
-    /**
-     * no-op. Hydrated views are don't need to be moved from a documentFragment
-     * to the target node.
-     */
-    insertBefore(node) {
-        // No-op in cases where this is called before the view is removed,
-        // because the nodes will already be in the document and just need hydrating.
-        if (this.fragment === null) {
-            return;
-        }
-        if (this.fragment.hasChildNodes()) {
-            node.parentNode.insertBefore(this.fragment, node);
-        }
-        else {
-            const end = this.lastChild;
-            if (node.previousSibling === end)
-                return;
-            const parentNode = node.parentNode;
-            let current = this.firstChild;
-            let next;
-            while (current !== end) {
-                next = current.nextSibling;
-                parentNode.insertBefore(current, node);
-                current = next;
-            }
-            parentNode.insertBefore(end, node);
-        }
-    }
-    /**
-     * Appends the view to a node. In cases where this is called before the
-     * view has been removed, the method will no-op.
-     * @param node - the node to append the view to.
-     */
-    appendTo(node) {
-        if (this.fragment !== null) {
-            node.appendChild(this.fragment);
-        }
-    }
-    remove() {
-        const fragment = this.fragment || (this.fragment = document.createDocumentFragment());
-        const end = this.lastChild;
-        let current = this.firstChild;
-        let next;
-        while (current !== end) {
-            next = current.nextSibling;
-            if (!next) {
-                throw new Error(`Unmatched first/last child inside "${end.getRootNode().host.nodeName}".`);
-            }
-            fragment.appendChild(current);
-            current = next;
-        }
-        fragment.appendChild(end);
-    }
-    bind(source, context = this) {
-        var _b;
-        if (this.hydrationStage !== HydrationStage.hydrated) {
-            this._hydrationStage = HydrationStage.hydrating;
-        }
-        if (this.source === source) {
-            return;
-        }
-        let behaviors = this.behaviors;
-        if (behaviors === null) {
-            this.source = source;
-            this.context = context;
-            try {
-                const { targets, boundaries } = buildViewBindingTargets(this.firstChild, this.lastChild, this.factories);
-                this._targets = targets;
-                this._bindingViewBoundaries = boundaries;
-            }
-            catch (error) {
-                if (error instanceof HydrationTargetElementError) {
-                    let templateString = this.sourceTemplate.html;
-                    if (typeof templateString !== "string") {
-                        templateString = templateString.innerHTML;
-                    }
-                    error.templateString = templateString;
-                }
-                throw error;
-            }
-            this.behaviors = behaviors = new Array(this.factories.length);
-            const factories = this.factories;
-            for (let i = 0, ii = factories.length; i < ii; ++i) {
-                const factory = factories[i];
-                if (factory.targetNodeId === "h" && this.hostBindingTarget) {
-                    targetFactory(factory, this.hostBindingTarget, this._targets);
-                }
-                // If the binding has been targeted or it is a host binding and the view has a hostBindingTarget
-                if (factory.targetNodeId in this.targets) {
-                    const behavior = factory.createBehavior();
-                    behavior.bind(this);
-                    behaviors[i] = behavior;
-                }
-                else {
-                    let templateString = this.sourceTemplate.html;
-                    if (typeof templateString !== "string") {
-                        templateString = templateString.innerHTML;
-                    }
-                    const hostElement = ((_b = this.firstChild) === null || _b === void 0 ? void 0 : _b.getRootNode())
-                        .host;
-                    const hostName = (hostElement === null || hostElement === void 0 ? void 0 : hostElement.nodeName) || "unknown";
-                    const factoryInfo = factory;
-                    // Build detailed error message
-                    const details = [
-                        `HydrationView was unable to successfully target bindings inside "<${hostName.toLowerCase()}>".`,
-                        `\nMismatch Details:`,
-                        `  - Expected target node ID: "${factory.targetNodeId}"`,
-                        `  - Available target IDs: [${Object.keys(this.targets).join(", ") || "none"}]`,
-                    ];
-                    if (factory.targetTagName) {
-                        details.push(`  - Expected tag name: "${factory.targetTagName}"`);
-                    }
-                    if (factoryInfo.sourceAspect) {
-                        details.push(`  - Source aspect: "${factoryInfo.sourceAspect}"`);
-                    }
-                    if (factoryInfo.aspectType !== undefined) {
-                        details.push(`  - Aspect type: ${factoryInfo.aspectType}`);
-                    }
-                    details.push(`\nThis usually means:`, `  1. The server-rendered HTML doesn't match the client template`, `  2. The hydration markers are missing or corrupted`, `  3. The DOM structure was modified before hydration`, `\nTemplate: ${templateString.slice(0, 200)}${templateString.length > 200 ? "..." : ""}`);
-                    throw new HydrationBindingError(details.join("\n"), factory, createRangeForNodes(this.firstChild, this.lastChild).cloneContents(), templateString);
-                }
-            }
-        }
-        else {
-            if (this.source !== null) {
-                this.evaluateUnbindables();
-            }
-            this.isBound = false;
-            this.source = source;
-            this.context = context;
-            for (let i = 0, ii = behaviors.length; i < ii; ++i) {
-                behaviors[i].bind(this);
-            }
-        }
-        this.isBound = true;
-        this._hydrationStage = HydrationStage.hydrated;
-    }
-    unbind() {
-        if (!this.isBound || this.source === null) {
-            return;
-        }
-        this.evaluateUnbindables();
-        this.source = null;
-        this.context = this;
-        this.isBound = false;
-    }
-    /**
-     * Removes the view and unbinds its behaviors, disposing of DOM nodes afterward.
-     * Once a view has been disposed, it cannot be inserted or bound again.
-     */
-    dispose() {
-        removeNodeSequence(this.firstChild, this.lastChild);
-        this.unbind();
-    }
-    onUnbind(behavior) {
-        this.unbindables.push(behavior);
-    }
-    evaluateUnbindables() {
-        const unbindables = this.unbindables;
-        for (let i = 0, ii = unbindables.length; i < ii; ++i) {
-            unbindables[i].unbind(this);
-        }
-        unbindables.length = 0;
-    }
-}
-_a = Hydratable;
-makeSerializationNoop(HydrationView);