@microsoft/fast-element 2.8.5 → 2.9.1

package/CHANGELOG.json

@@ -2,7 +2,37 @@
   "name": "@microsoft/fast-element",
   "entries": [
     {
-      "date": "Tue, 02 Dec 2025 21:46:27 GMT",
+      "date": "Tue, 16 Dec 2025 21:27:19 GMT",
+      "version": "2.9.1",
+      "tag": "@microsoft/fast-element_v2.9.1",
+      "comments": {
+        "patch": [
+          {
+            "author": "863023+radium-v@users.noreply.github.com",
+            "package": "@microsoft/fast-element",
+            "commit": "2c8de46fbde0440593f559cd2ddd8d7c6248f68d",
+            "comment": "fix: correct hydration marker indexes for templates with host bindings"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 08 Dec 2025 19:47:51 GMT",
+      "version": "2.9.0",
+      "tag": "@microsoft/fast-element_v2.9.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "863023+radium-v@users.noreply.github.com",
+            "package": "@microsoft/fast-element",
+            "commit": "1e21fa3cac5f940f639bf76311af291e1a368da1",
+            "comment": "feat: add support for compact attribute binding markers"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 02 Dec 2025 21:46:59 GMT",
       "version": "2.8.5",
       "tag": "@microsoft/fast-element_v2.8.5",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,28 @@
 # Change Log - @microsoft/fast-element
 
-<!-- This log was last generated on Tue, 02 Dec 2025 21:46:27 GMT and should not be manually modified. -->
+<!-- This log was last generated on Tue, 16 Dec 2025 21:27:19 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
+## 2.9.1
+
+Tue, 16 Dec 2025 21:27:19 GMT
+
+### Patches
+
+- fix: correct hydration marker indexes for templates with host bindings (863023+radium-v@users.noreply.github.com)
+
+## 2.9.0
+
+Mon, 08 Dec 2025 19:47:51 GMT
+
+### Minor changes
+
+- feat: add support for compact attribute binding markers (863023+radium-v@users.noreply.github.com)
+
 ## 2.8.5
 
-Tue, 02 Dec 2025 21:46:27 GMT
+Tue, 02 Dec 2025 21:46:59 GMT
 
 ### Patches
 

package/dist/dts/components/hydration.d.ts

@@ -8,6 +8,7 @@ import type { HydrationView } from "../templating/view.js";
  */
 export declare const HydrationMarkup: Readonly<{
     attributeMarkerName: "data-fe-b";
+    compactAttributeMarkerName: "data-fe-c";
     attributeBindingSeparator: " ";
     contentBindingStartMarker(index: number, uniqueId: string): string;
     contentBindingEndMarker(index: number, uniqueId: string): string;
@@ -22,15 +23,25 @@ export declare const HydrationMarkup: Readonly<{
     /**
      * Returns the indexes of the ViewBehaviorFactories affecting
      * attributes for the element, or null if no factories were found.
+     *
+     * This method parses the space-separated format: `data-fe-b="0 1 2"`.
      */
     parseAttributeBinding(node: Element): null | number[];
     /**
      * Returns the indexes of the ViewBehaviorFactories affecting
      * attributes for the element, or null if no factories were found.
      *
-     * Uses the alternative syntax of data-fe-b-<number>
+     * This method parses the enumerated format: `data-fe-b-0`, `data-fe-b-1`, `data-fe-b-2`.
+     * This is an alternative format that uses separate attributes for each binding index.
      */
     parseEnumeratedAttributeBinding(node: Element): null | number[];
+    /**
+     * Returns the indexes of the ViewBehaviorFactories affecting
+     * attributes for the element, or null if no factories were found.
+     *
+     * This method parses the compact format: `data-fe-c-{index}-{count}`.
+     */
+    parseCompactAttributeBinding(node: Element): null | number[];
     /**
      * Parses the ViewBehaviorFactory index from string data. Returns
      * the binding index or null if the index cannot be retrieved.

package/dist/esm/components/hydration.js

@@ -1,3 +1,4 @@
+import { FAST } from "../platform.js";
 const bindingStartMarker = /fe-b\$\$start\$\$(\d+)\$\$(.+)\$\$fe-b/;
 const bindingEndMarker = /fe-b\$\$end\$\$(\d+)\$\$(.+)\$\$fe-b/;
 const repeatViewStartMarker = /fe-repeat\$\$start\$\$(\d+)\$\$fe-repeat/;
@@ -13,6 +14,7 @@ function isComment(node) {
  */
 export const HydrationMarkup = Object.freeze({
     attributeMarkerName: "data-fe-b",
+    compactAttributeMarkerName: "data-fe-c",
     attributeBindingSeparator: " ",
     contentBindingStartMarker(index, uniqueId) {
         return `fe-b$$start$$${index}$$${uniqueId}$$fe-b`;
@@ -47,6 +49,8 @@ export const HydrationMarkup = Object.freeze({
     /**
      * Returns the indexes of the ViewBehaviorFactories affecting
      * attributes for the element, or null if no factories were found.
+     *
+     * This method parses the space-separated format: `data-fe-b="0 1 2"`.
      */
     parseAttributeBinding(node) {
         const attr = node.getAttribute(this.attributeMarkerName);
@@ -58,7 +62,8 @@ export const HydrationMarkup = Object.freeze({
      * Returns the indexes of the ViewBehaviorFactories affecting
      * attributes for the element, or null if no factories were found.
      *
-     * Uses the alternative syntax of data-fe-b-<number>
+     * This method parses the enumerated format: `data-fe-b-0`, `data-fe-b-1`, `data-fe-b-2`.
+     * This is an alternative format that uses separate attributes for each binding index.
      */
     parseEnumeratedAttributeBinding(node) {
         const attrs = [];
@@ -71,12 +76,47 @@ export const HydrationMarkup = Object.freeze({
                     attrs.push(count);
                 }
                 else {
-                    throw new Error(`Invalid attribute marker name: ${attr}. Expected format is ${prefix}<number>.`);
+                    throw FAST.error(1601 /* invalidAttributeMarkerName */, {
+                        name: attr,
+                        expectedFormat: `${prefix}<number>`,
+                    });
                 }
             }
         }
         return attrs.length === 0 ? null : attrs;
     },
+    /**
+     * Returns the indexes of the ViewBehaviorFactories affecting
+     * attributes for the element, or null if no factories were found.
+     *
+     * This method parses the compact format: `data-fe-c-{index}-{count}`.
+     */
+    parseCompactAttributeBinding(node) {
+        const prefix = `${this.compactAttributeMarkerName}-`;
+        const attrName = node.getAttributeNames().find(name => name.startsWith(prefix));
+        if (!attrName) {
+            return null;
+        }
+        const suffix = attrName.slice(prefix.length);
+        const parts = suffix.split("-");
+        const startIndex = parseInt(parts[0], 10);
+        const count = parseInt(parts[1], 10);
+        if (parts.length !== 2 ||
+            Number.isNaN(startIndex) ||
+            Number.isNaN(count) ||
+            startIndex < 0 ||
+            count < 1) {
+            throw FAST.error(1604 /* invalidCompactAttributeMarkerName */, {
+                name: attrName,
+                expectedFormat: `${this.compactAttributeMarkerName}-{index}-{count}`,
+            });
+        }
+        const indexes = [];
+        for (let i = 0; i < count; i++) {
+            indexes.push(startIndex + i);
+        }
+        return indexes;
+    },
     /**
      * Parses the ViewBehaviorFactory index from string data. Returns
      * the binding index or null if the index cannot be retrieved.

package/dist/esm/debug.js

@@ -35,6 +35,9 @@ const debugMessages = {
     [1512 /* noDefaultResolver */]: "'${key}' not registered. Did you forget to add @singleton()?",
     [1513 /* cyclicDependency */]: "Cyclic dependency found '${name}'.",
     [1514 /* connectUpdateRequiresController */]: "Injected properties that are updated on changes to DOM connectivity require the target object to be an instance of FASTElement.",
+    [1601 /* invalidAttributeMarkerName */]: "Invalid attribute marker name: ${name}. Expected format is ${expectedFormat}.",
+    [1602 /* invalidCompactAttributeMarkerValues */]: "Invalid compact attribute marker values in ${markerName}. Both index and count must be positive integers.",
+    [1604 /* invalidCompactAttributeMarkerName */]: "Invalid compact attribute marker name: ${name}. Expected format is ${expectedFormat}.",
 };
 const allPlaceholders = /(\$\{\w+?})/g;
 const placeholder = /\$\{(\w+?)}/g;

package/dist/esm/hydration/target-builder.js

@@ -52,6 +52,7 @@ function isShadowRoot(node) {
 export function buildViewBindingTargets(firstNode, lastNode, factories) {
     const range = createRangeForNodes(firstNode, lastNode);
     const treeRoot = range.commonAncestorContainer;
+    const hydrationIndexOffset = getHydrationIndexOffset(factories);
     const walker = document.createTreeWalker(treeRoot, NodeFilter.SHOW_ELEMENT + NodeFilter.SHOW_COMMENT + NodeFilter.SHOW_TEXT, {
         acceptNode(node) {
             return range.comparePoint(node, 0) === 0
@@ -65,11 +66,11 @@ export function buildViewBindingTargets(firstNode, lastNode, factories) {
     while (node !== null) {
         switch (node.nodeType) {
             case Node.ELEMENT_NODE: {
-                targetElement(node, factories, targets);
+                targetElement(node, factories, targets, hydrationIndexOffset);
                 break;
             }
             case Node.COMMENT_NODE: {
-                targetComment(node, walker, factories, targets, boundaries);
+                targetComment(node, walker, factories, targets, boundaries, hydrationIndexOffset);
                 break;
             }
         }
@@ -78,21 +79,22 @@ export function buildViewBindingTargets(firstNode, lastNode, factories) {
     range.detach();
     return { targets, boundaries };
 }
-function targetElement(node, factories, targets) {
-    var _a;
+function targetElement(node, factories, targets, hydrationIndexOffset) {
+    var _a, _b;
     // Check for attributes and map any factories.
-    const attrFactoryIds = (_a = HydrationMarkup.parseAttributeBinding(node)) !== null && _a !== void 0 ? _a : HydrationMarkup.parseEnumeratedAttributeBinding(node);
+    const attrFactoryIds = (_b = (_a = HydrationMarkup.parseAttributeBinding(node)) !== null && _a !== void 0 ? _a : HydrationMarkup.parseEnumeratedAttributeBinding(node)) !== null && _b !== void 0 ? _b : HydrationMarkup.parseCompactAttributeBinding(node);
     if (attrFactoryIds !== null) {
         for (const id of attrFactoryIds) {
-            if (!factories[id]) {
+            const factory = factories[id + hydrationIndexOffset];
+            if (!factory) {
                 throw new HydrationTargetElementError(`HydrationView was unable to successfully target factory on ${node.nodeName} inside ${node.getRootNode().host.nodeName}. This likely indicates a template mismatch between SSR rendering and hydration.`, factories, node);
             }
-            targetFactory(factories[id], node, targets);
+            targetFactory(factory, node, targets);
         }
         node.removeAttribute(HydrationMarkup.attributeMarkerName);
     }
 }
-function targetComment(node, walker, factories, targets, boundaries) {
+function targetComment(node, walker, factories, targets, boundaries, hydrationIndexOffset) {
     if (HydrationMarkup.isElementBoundaryStartMarker(node)) {
         skipToElementBoundaryEndMarker(node, walker);
         return;
@@ -103,7 +105,7 @@ function targetComment(node, walker, factories, targets, boundaries) {
             return;
         }
         const [index, id] = parsed;
-        const factory = factories[index];
+        const factory = factories[index + hydrationIndexOffset];
         const nodes = [];
         let current = walker.nextSibling();
         node.data = "";
@@ -167,6 +169,18 @@ function skipToElementBoundaryEndMarker(node, walker) {
         current = walker.nextSibling();
     }
 }
+function getHydrationIndexOffset(factories) {
+    let offset = 0;
+    for (let i = 0, ii = factories.length; i < ii; ++i) {
+        if (factories[i].targetNodeId === "h") {
+            offset++;
+        }
+        else {
+            break;
+        }
+    }
+    return offset;
+}
 export function targetFactory(factory, node, targets) {
     if (factory.targetNodeId === undefined) {
         // Dev error, this shouldn't ever be thrown

package/dist/fast-element.debug.js

@@ -35,6 +35,9 @@ const debugMessages = {
     [1512 /* noDefaultResolver */]: "'${key}' not registered. Did you forget to add @singleton()?",
     [1513 /* cyclicDependency */]: "Cyclic dependency found '${name}'.",
     [1514 /* connectUpdateRequiresController */]: "Injected properties that are updated on changes to DOM connectivity require the target object to be an instance of FASTElement.",
+    [1601 /* invalidAttributeMarkerName */]: "Invalid attribute marker name: ${name}. Expected format is ${expectedFormat}.",
+    [1602 /* invalidCompactAttributeMarkerValues */]: "Invalid compact attribute marker values in ${markerName}. Both index and count must be positive integers.",
+    [1604 /* invalidCompactAttributeMarkerName */]: "Invalid compact attribute marker name: ${name}. Expected format is ${expectedFormat}.",
 };
 const allPlaceholders = /(\$\{\w+?})/g;
 const placeholder = /\$\{(\w+?)}/g;
@@ -2333,6 +2336,7 @@ function isComment$1(node) {
  */
 const HydrationMarkup = Object.freeze({
     attributeMarkerName: "data-fe-b",
+    compactAttributeMarkerName: "data-fe-c",
     attributeBindingSeparator: " ",
     contentBindingStartMarker(index, uniqueId) {
         return `fe-b$$start$$${index}$$${uniqueId}$$fe-b`;
@@ -2367,6 +2371,8 @@ const HydrationMarkup = Object.freeze({
     /**
      * Returns the indexes of the ViewBehaviorFactories affecting
      * attributes for the element, or null if no factories were found.
+     *
+     * This method parses the space-separated format: `data-fe-b="0 1 2"`.
      */
     parseAttributeBinding(node) {
         const attr = node.getAttribute(this.attributeMarkerName);
@@ -2378,7 +2384,8 @@ const HydrationMarkup = Object.freeze({
      * Returns the indexes of the ViewBehaviorFactories affecting
      * attributes for the element, or null if no factories were found.
      *
-     * Uses the alternative syntax of data-fe-b-<number>
+     * This method parses the enumerated format: `data-fe-b-0`, `data-fe-b-1`, `data-fe-b-2`.
+     * This is an alternative format that uses separate attributes for each binding index.
      */
     parseEnumeratedAttributeBinding(node) {
         const attrs = [];
@@ -2391,12 +2398,47 @@ const HydrationMarkup = Object.freeze({
                     attrs.push(count);
                 }
                 else {
-                    throw new Error(`Invalid attribute marker name: ${attr}. Expected format is ${prefix}<number>.`);
+                    throw FAST.error(1601 /* invalidAttributeMarkerName */, {
+                        name: attr,
+                        expectedFormat: `${prefix}<number>`,
+                    });
                 }
             }
         }
         return attrs.length === 0 ? null : attrs;
     },
+    /**
+     * Returns the indexes of the ViewBehaviorFactories affecting
+     * attributes for the element, or null if no factories were found.
+     *
+     * This method parses the compact format: `data-fe-c-{index}-{count}`.
+     */
+    parseCompactAttributeBinding(node) {
+        const prefix = `${this.compactAttributeMarkerName}-`;
+        const attrName = node.getAttributeNames().find(name => name.startsWith(prefix));
+        if (!attrName) {
+            return null;
+        }
+        const suffix = attrName.slice(prefix.length);
+        const parts = suffix.split("-");
+        const startIndex = parseInt(parts[0], 10);
+        const count = parseInt(parts[1], 10);
+        if (parts.length !== 2 ||
+            Number.isNaN(startIndex) ||
+            Number.isNaN(count) ||
+            startIndex < 0 ||
+            count < 1) {
+            throw FAST.error(1604 /* invalidCompactAttributeMarkerName */, {
+                name: attrName,
+                expectedFormat: `${this.compactAttributeMarkerName}-{index}-{count}`,
+            });
+        }
+        const indexes = [];
+        for (let i = 0; i < count; i++) {
+            indexes.push(startIndex + i);
+        }
+        return indexes;
+    },
     /**
      * Parses the ViewBehaviorFactory index from string data. Returns
      * the binding index or null if the index cannot be retrieved.
@@ -2686,6 +2728,7 @@ function isShadowRoot(node) {
 function buildViewBindingTargets(firstNode, lastNode, factories) {
     const range = createRangeForNodes(firstNode, lastNode);
     const treeRoot = range.commonAncestorContainer;
+    const hydrationIndexOffset = getHydrationIndexOffset(factories);
     const walker = document.createTreeWalker(treeRoot, NodeFilter.SHOW_ELEMENT + NodeFilter.SHOW_COMMENT + NodeFilter.SHOW_TEXT, {
         acceptNode(node) {
             return range.comparePoint(node, 0) === 0
@@ -2699,11 +2742,11 @@ function buildViewBindingTargets(firstNode, lastNode, factories) {
     while (node !== null) {
         switch (node.nodeType) {
             case Node.ELEMENT_NODE: {
-                targetElement(node, factories, targets);
+                targetElement(node, factories, targets, hydrationIndexOffset);
                 break;
             }
             case Node.COMMENT_NODE: {
-                targetComment(node, walker, factories, targets, boundaries);
+                targetComment(node, walker, factories, targets, boundaries, hydrationIndexOffset);
                 break;
             }
         }
@@ -2712,21 +2755,22 @@ function buildViewBindingTargets(firstNode, lastNode, factories) {
     range.detach();
     return { targets, boundaries };
 }
-function targetElement(node, factories, targets) {
-    var _a;
+function targetElement(node, factories, targets, hydrationIndexOffset) {
+    var _a, _b;
     // Check for attributes and map any factories.
-    const attrFactoryIds = (_a = HydrationMarkup.parseAttributeBinding(node)) !== null && _a !== void 0 ? _a : HydrationMarkup.parseEnumeratedAttributeBinding(node);
+    const attrFactoryIds = (_b = (_a = HydrationMarkup.parseAttributeBinding(node)) !== null && _a !== void 0 ? _a : HydrationMarkup.parseEnumeratedAttributeBinding(node)) !== null && _b !== void 0 ? _b : HydrationMarkup.parseCompactAttributeBinding(node);
     if (attrFactoryIds !== null) {
         for (const id of attrFactoryIds) {
-            if (!factories[id]) {
+            const factory = factories[id + hydrationIndexOffset];
+            if (!factory) {
                 throw new HydrationTargetElementError(`HydrationView was unable to successfully target factory on ${node.nodeName} inside ${node.getRootNode().host.nodeName}. This likely indicates a template mismatch between SSR rendering and hydration.`, factories, node);
             }
-            targetFactory(factories[id], node, targets);
+            targetFactory(factory, node, targets);
         }
         node.removeAttribute(HydrationMarkup.attributeMarkerName);
     }
 }
-function targetComment(node, walker, factories, targets, boundaries) {
+function targetComment(node, walker, factories, targets, boundaries, hydrationIndexOffset) {
     if (HydrationMarkup.isElementBoundaryStartMarker(node)) {
         skipToElementBoundaryEndMarker(node, walker);
         return;
@@ -2737,7 +2781,7 @@ function targetComment(node, walker, factories, targets, boundaries) {
             return;
         }
         const [index, id] = parsed;
-        const factory = factories[index];
+        const factory = factories[index + hydrationIndexOffset];
         const nodes = [];
         let current = walker.nextSibling();
         node.data = "";
@@ -2801,6 +2845,18 @@ function skipToElementBoundaryEndMarker(node, walker) {
         current = walker.nextSibling();
     }
 }
+function getHydrationIndexOffset(factories) {
+    let offset = 0;
+    for (let i = 0, ii = factories.length; i < ii; ++i) {
+        if (factories[i].targetNodeId === "h") {
+            offset++;
+        }
+        else {
+            break;
+        }
+    }
+    return offset;
+}
 function targetFactory(factory, node, targets) {
     if (factory.targetNodeId === undefined) {
         // Dev error, this shouldn't ever be thrown