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

package/dist/esm/templating/repeat.js

@@ -1,12 +1,12 @@
 import { normalizeBinding } from "../binding/normalize.js";
-import { isHydratable } from "../components/hydration.js";
+import { HydrationMarkup, 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 { HydrationStage } from "./hydration-view.js";
 import { Markup } from "./markup.js";
-import { HydrationStage, } from "./hydration-view.js";
-import { HTMLView, } from "./view.js";
+import { HTMLView } from "./view.js";
 const defaultRepeatOptions = Object.freeze({
     positioning: false,
     recycle: true,
@@ -26,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(
     /**
@@ -285,23 +300,26 @@ export class RepeatBehavior {
         }
     }
     hydrateViews(template) {
+        var _a;
         if (!this.items) {
             return;
         }
-        const itemCount = this.items.length;
-        this.views = new Array(itemCount);
+        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 is { start: Node, end: Node } for the item content range.
+        // 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.data !== "fe:/r") {
+            if (!isCommentNode(current) ||
+                !HydrationMarkup.isRepeatViewEndMarker(current.data)) {
                 current = current.previousSibling;
                 continue;
             }
-            // Found repeat end marker
-            current.data = "";
-            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.`);
             }
@@ -310,18 +328,23 @@ export class RepeatBehavior {
             let depth = 0;
             while (start !== null) {
                 if (isCommentNode(start)) {
-                    if (start.data === "fe:/r") {
+                    if (HydrationMarkup.isRepeatViewEndMarker(start.data)) {
                         depth++;
                     }
-                    else if (start.data === "fe:r") {
+                    else if (HydrationMarkup.isRepeatViewStartMarker(start.data)) {
                         if (depth === 0) {
                             const startMarker = start;
                             startMarker.data = "";
                             current = startMarker.previousSibling;
-                            const itemStart = startMarker.nextSibling;
+                            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 });
+                            itemRanges.push({
+                                start: itemStart,
+                                end: itemEnd,
+                                startMarker,
+                                endMarker,
+                            });
                             break;
                         }
                         depth--;
@@ -337,11 +360,22 @@ export class RepeatBehavior {
         // 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 hydrationCount = Math.min(itemRanges.length, itemCount);
+        for (let i = 0; i < hydrationCount; i++) {
             const { start, end } = itemRanges[i];
             const view = template.hydrate(start, end);
-            this.views[i] = view;
-            this.bindView(view, this.items, i, this.controller);
+            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/view.js

@@ -211,7 +211,7 @@ export class HTMLView extends DefaultExecutionContext {
      * @param context - The execution context to run the behaviors within.
      */
     bind(source, context = this) {
-        if (this.source === source) {
+        if (this.source === source && this.context === context) {
             return;
         }
         let behaviors = this.behaviors;

package/dist/esm/testing/fixture.js

@@ -32,8 +32,8 @@ export function uniqueElementName(prefix = "fast-unique") {
  * ensure that the DOM has settled.
  * @public
  */
-export function fixture(templateNameOrType, options = {}) {
-    return __awaiter(this, void 0, void 0, function* () {
+export function fixture(templateNameOrType_1) {
+    return __awaiter(this, arguments, void 0, function* (templateNameOrType, options = {}) {
         const document = options.document || globalThis.document;
         const parent = options.parent || document.createElement("div");
         const source = options.source || {};

package/dist/esm/testing/timeout.js

@@ -13,8 +13,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
  * @returns A promise that resolves once the configured time has elapsed.
  * @public
  */
-export function timeout(timeout = 0) {
-    return __awaiter(this, void 0, void 0, function* () {
+export function timeout() {
+    return __awaiter(this, arguments, void 0, function* (timeout = 0) {
         return new Promise((resolve, reject) => {
             window.setTimeout(() => {
                 resolve(void 0);