Update logic for enumerated attribute hydration markers, add view hydration as export (#7125)

# Pull Request

## 📖 Description

This change:
- Fixes an issue where if the number on an attribute binding marker did not start at `0` the binding would not be detected accurately.
- Adds the view template hydration script as an export as this will be used in FAST HTML to automatically include the `HydratableElementController`

## ✅ Checklist

### General

<!--- Review the list and put an x in the boxes that apply. -->

- [x] I have included a change request file using `$ npm run change`
- [x] I have added tests for my changes.
- [x] I have tested my changes.
- [ ] I have updated the project documentation to reflect my changes.
- [x] I have read the [CONTRIBUTING](https://github.com/microsoft/fast/blob/main/CONTRIBUTING.md) documentation and followed the [standards](https://github.com/microsoft/fast/blob/main/CODE_OF_CONDUCT.md#our-standards) for this project.

Author: janechu

change/@microsoft-fast-element-618572f2-1aac-463b-8d2d-d70aef99b60e.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Update logic for enumerated attribute hydration markers, add view hydration as export",
+  "packageName": "@microsoft/fast-element",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

packages/web-components/fast-element/package.json

@@ -74,6 +74,10 @@
       "types": "./dist/dts/components/install-hydration.d.ts",
       "default": "./dist/esm/components/install-hydration.js"
     },
+    "./install-hydratable-view-templates.js": {
+      "types": "./dist/dts/templating/install-hydratable-view-templates.d.ts",
+      "default": "./dist/esm/templating/install-hydratable-view-templates.js"
+    },
     "./pending-task.js": {
       "types": "./dist/dts/pending-task.d.ts",
       "default": "./dist/esm/pending-task.js"
@@ -88,7 +92,8 @@
   "sideEffects": [
     "./dist/esm/debug.js",
     "./dist/esm/polyfills.js",
-    "./dist/esm/components/install-hydration.js"
+    "./dist/esm/components/install-hydration.js",
+    "./dist/esm/templating/install-hydratable-view-templates.js"
   ],
   "scripts": {
     "benchmark": "npm run clean:dist && npm run build && node ./scripts/run-benchmarks",

packages/web-components/fast-element/src/components/hydration.spec.ts

@@ -245,6 +245,17 @@ describe("HydrationMarkup", () => {
             el.setAttribute(`${HydrationMarkup.attributeMarkerName}-2`, "");
             expect(HydrationMarkup.parseEnumeratedAttributeBinding(el)).to.eql([0, 1, 2]);
         });
+        it("should return the binding ids as numbers when assigned enumerated marker attributes on multiple elements", () => {
+            const el = document.createElement("div");
+            const el2 = document.createElement("div");
+            const el3 = document.createElement("div");
+            el.setAttribute(`${HydrationMarkup.attributeMarkerName}-0`, "");
+            el2.setAttribute(`${HydrationMarkup.attributeMarkerName}-1`, "");
+            el3.setAttribute(`${HydrationMarkup.attributeMarkerName}-2`, "");
+            expect(HydrationMarkup.parseEnumeratedAttributeBinding(el)).to.eql([0]);
+            expect(HydrationMarkup.parseEnumeratedAttributeBinding(el2)).to.eql([1]);
+            expect(HydrationMarkup.parseEnumeratedAttributeBinding(el3)).to.eql([2]);
+        });
     });
 
     describe("repeat parser", () => {

packages/web-components/fast-element/src/components/hydration.ts

@@ -77,13 +77,23 @@ export const HydrationMarkup = Object.freeze({
      */
     parseEnumeratedAttributeBinding(node: Element): null | number[] {
         const attrs: number[] = [];
-        let count = 0;
+        const prefixLength = this.attributeMarkerName.length + 1;
+        const prefix = `${this.attributeMarkerName}-`;
 
-        while (node.hasAttribute(`${this.attributeMarkerName}-${count}`)) {
-            attrs.push(count++);
+        for (const attr of node.getAttributeNames()) {
+            if (attr.startsWith(prefix)) {
+                const count = Number(attr.slice(prefixLength));
+                if (!Number.isNaN(count)) {
+                    attrs.push(count);
+                } else {
+                    throw new Error(
+                        `Invalid attribute marker name: ${attr}. Expected format is ${prefix}<number>.`
+                    );
+                }
+            }
         }
 
-        return count === 0 ? null : attrs;
+        return attrs.length === 0 ? null : attrs;
     },
     /**
      * Parses the ViewBehaviorFactory index from string data. Returns