@microsoft/fast-element 2.10.4 → 3.0.0-rc.2

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

@@ -0,0 +1,228 @@
+var _a;
+import { Hydratable } from "../components/hydration.js";
+import { getHostName, getHydrationDiagnostic, } from "../hydration/diagnostics.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, 
+    /**
+     * Structured description of the binding the hydration walk was
+     * attempting to apply when the mismatch was detected.
+     */
+    expected, 
+    /**
+     * Structured description of the server-rendered DOM that was
+     * encountered at the mismatch point.
+     */
+    received) {
+        super(message);
+        this.factory = factory;
+        this.fragment = fragment;
+        this.templateString = templateString;
+        this.expected = expected;
+        this.received = received;
+    }
+}
+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) {
+        if (this.source === source && this.context === context) {
+            return;
+        }
+        if (this.hydrationStage !== HydrationStage.hydrated) {
+            this._hydrationStage = HydrationStage.hydrating;
+        }
+        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 fragment = createRangeForNodes(this.firstChild, this.lastChild).cloneContents();
+                    const result = getHydrationDiagnostic().formatBindingMismatch(factory, this.firstChild, this.lastChild, getHostName(this.firstChild));
+                    throw new HydrationBindingError(result.message, factory, fragment, templateString, result.expected, result.received);
+                }
+            }
+        }
+        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

@@ -4,11 +4,12 @@ import { oneTime } from "../binding/one-time.js";
 import { oneWay } from "../binding/one-way.js";
 import { FASTElementDefinition } from "../components/fast-definitions.js";
 import { isHydratable } from "../components/hydration.js";
-import { isFunction, isString } from "../interfaces.js";
+import { isFunction, isString, Message } from "../interfaces.js";
+import { FAST } from "../platform.js";
 import { HTMLDirective, } from "./html-directive.js";
+import { HydrationStage } from "./hydration-view.js";
 import { Markup } from "./markup.js";
 import { html, ViewTemplate, } from "./template.js";
-import { HydrationStage } from "./view.js";
 /**
  * A Behavior that enables advanced rendering.
  * @public
@@ -45,11 +46,10 @@ export class RenderBehavior {
             if (viewNodes) {
                 this.view = this.template.hydrate(viewNodes.first, viewNodes.last);
                 this.bindView(this.view);
+                return;
             }
         }
-        else {
-            this.refreshView();
-        }
+        this.refreshView();
     }
     /**
      * Unbinds this behavior.
@@ -172,6 +172,32 @@ function instructionToTemplate(def) {
     }
     return def.template;
 }
+function resolveTemplateBindingValue(result, dataBinding, source, context) {
+    var _a;
+    if (isString(result)) {
+        return instructionToTemplate(getForInstance(dataBinding.evaluate(source, context), result));
+    }
+    if (result instanceof Node) {
+        return (_a = result.$fastTemplate) !== null && _a !== void 0 ? _a : new NodeTemplate(result);
+    }
+    return result;
+}
+function adaptTemplateBinding(binding, dataBinding) {
+    const evaluateTemplate = binding.evaluate;
+    const adapter = Object.create(Object.getPrototypeOf(binding));
+    for (const propertyName of Object.getOwnPropertyNames(binding)) {
+        if (propertyName !== "evaluate") {
+            Object.defineProperty(adapter, propertyName, Object.getOwnPropertyDescriptor(binding, propertyName));
+        }
+    }
+    Object.defineProperty(adapter, "evaluate", {
+        configurable: true,
+        enumerable: true,
+        value: (source, context) => resolveTemplateBindingValue(evaluateTemplate(source, context), dataBinding, source, context),
+        writable: true,
+    });
+    return adapter;
+}
 function createElementTemplate(tagName, options) {
     const markup = [];
     const values = [];
@@ -251,6 +277,13 @@ function register(optionsOrInstruction) {
     const instruction = instanceOf(optionsOrInstruction)
         ? optionsOrInstruction
         : create(optionsOrInstruction);
+    if (lookup[instruction.name] !== void 0) {
+        const typeName = instruction.type.name || "(anonymous)";
+        FAST.warn(Message.duplicateRenderInstruction, {
+            type: typeName,
+            name: instruction.name,
+        });
+    }
     return (lookup[instruction.name] = instruction);
 }
 function getByType(type, name) {
@@ -425,19 +458,7 @@ export function render(value, template) {
         });
     }
     else if (template instanceof Binding) {
-        const evaluateTemplate = template.evaluate;
-        template.evaluate = (s, c) => {
-            var _a;
-            let result = evaluateTemplate(s, c);
-            if (isString(result)) {
-                result = instructionToTemplate(getForInstance(dataBinding.evaluate(s, c), result));
-            }
-            else if (result instanceof Node) {
-                result = (_a = result.$fastTemplate) !== null && _a !== void 0 ? _a : new NodeTemplate(result);
-            }
-            return result;
-        };
-        templateBinding = template;
+        templateBinding = adaptTemplateBinding(template, dataBinding);
     }
     else {
         templateBinding = oneTime((s, c) => template);

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 { ArrayObserver } from "../observation/arrays.js";
 import { Observable, } from "../observation/observable.js";
 import { emptyArray } from "../platform.js";
 import { HTMLDirective, } from "./html-directive.js";
+import { HydrationStage } from "./hydration-view.js";
 import { Markup } from "./markup.js";
-import { HTMLView, HydrationStage, HydrationView } from "./view.js";
+import { HTMLView } from "./view.js";
 const defaultRepeatOptions = Object.freeze({
     positioning: false,
     recycle: true,
@@ -25,6 +26,21 @@ function bindWithPositioning(view, items, index, controller) {
 function isCommentNode(node) {
     return node.nodeType === Node.COMMENT_NODE;
 }
+function removeNodeRange(first, last) {
+    const parentNode = first.parentNode;
+    if (parentNode === null) {
+        return;
+    }
+    let current = first;
+    while (current !== null) {
+        const next = current.nextSibling;
+        parentNode.removeChild(current);
+        if (current === last) {
+            break;
+        }
+        current = next;
+    }
+}
 export class HydrationRepeatError extends Error {
     constructor(
     /**
@@ -284,63 +300,83 @@ export class RepeatBehavior {
         }
     }
     hydrateViews(template) {
+        var _a;
         if (!this.items) {
             return;
         }
-        this.views = new Array(this.items.length);
+        const items = this.items;
+        const itemCount = items.length;
+        const views = (this.views = new Array(itemCount));
+        // First pass: collect all repeat marker pairs by walking backward.
+        // Each entry tracks both the item content range and its SSR markers.
+        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) ||
+                !HydrationMarkup.isRepeatViewEndMarker(current.data)) {
                 current = current.previousSibling;
                 continue;
             }
-            current.data = "";
-            // end of repeat is the previousSibling of end comment
-            const end = current.previousSibling;
+            const endMarker = current;
+            endMarker.data = "";
+            const end = endMarker.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++;
+                        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);
+                        if (depth === 0) {
+                            const startMarker = start;
+                            startMarker.data = "";
+                            current = startMarker.previousSibling;
+                            const itemStart = (_a = startMarker.nextSibling) !== null && _a !== void 0 ? _a : endMarker;
+                            // Empty item: start and end markers are adjacent.
+                            const itemEnd = end === startMarker ? itemStart : end;
+                            itemRanges.push({
+                                start: itemStart,
+                                end: itemEnd,
+                                startMarker,
+                                endMarker,
+                            });
                             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).
+        const hydrationCount = Math.min(itemRanges.length, itemCount);
+        for (let i = 0; i < hydrationCount; i++) {
+            const { start, end } = itemRanges[i];
+            const view = template.hydrate(start, end);
+            views[i] = view;
+            this.bindView(view, items, i, this.controller);
+        }
+        for (let i = hydrationCount; i < itemCount; i++) {
+            const view = template.create();
+            views[i] = view;
+            this.bindView(view, items, i, this.controller);
+            view.insertBefore(this.location);
+        }
+        for (let i = itemCount, ii = itemRanges.length; i < ii; i++) {
+            const { startMarker, endMarker } = itemRanges[i];
+            removeNodeRange(startMarker, endMarker);
+        }
     }
 }
 /**

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.