refactor(fast-html): address PR review comments for AttributeMap

- Remove async from test.describe callbacks in both spec files
  (Playwright requires synchronous describe callbacks)
- Convert existingAccessors to a Set for O(1) lookup instead of O(N)
- Update definition.attributes array alongside attributeLookup and
  propertyLookup to keep the definition's canonical attribute list
  in sync
- Add .define() call to attributeMap README usage snippet
- Add comment explaining why observedAttributes mutation via push
  is safe (FAST uses a concrete array, and registry.define() runs
  after this method)

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: janechu

packages/fast-html/README.md

@@ -230,7 +230,7 @@ TemplateElement.options({
     "my-element": {
         attributeMap: "all",
     },
-});
+}).define({ name: "f-template" });
 ```
 
 With the template:

packages/fast-html/src/components/attribute-map.spec.ts

@@ -1,6 +1,6 @@
 import { expect, test } from "@playwright/test";
 
-test.describe("AttributeMap", async () => {
+test.describe("AttributeMap", () => {
     test.beforeEach(async ({ page }) => {
         await page.goto("/fixtures/attribute-map/");
         await page.waitForSelector("attribute-map-test-element");

packages/fast-html/src/components/attribute-map.ts

@@ -27,7 +27,9 @@ export class AttributeMap {
 
     public defineProperties(): void {
         const propertyNames = this.schema.getRootProperties();
-        const existingAccessors = Observable.getAccessors(this.classPrototype);
+        const existingAccessorNames = new Set(
+            Observable.getAccessors(this.classPrototype).map(a => a.name),
+        );
 
         for (const propertyName of propertyNames) {
             const propertySchema = this.schema.getSchema(propertyName);
@@ -46,7 +48,7 @@ export class AttributeMap {
             }
 
             // Skip if the property already has an accessor (from @attr or @observable)
-            if (existingAccessors.some(accessor => accessor.name === propertyName)) {
+            if (existingAccessorNames.has(propertyName)) {
                 continue;
             }
 
@@ -58,11 +60,13 @@ export class AttributeMap {
 
             Observable.defineProperty(this.classPrototype, attrDef);
 
-            // Push to the existing observedAttributes array on the class.
-            // For all f-template-registered elements, registry.define() (which causes
-            // the browser to cache observedAttributes) is called AFTER this method runs.
-            // Mutating the existing array reference ensures the browser observes these
-            // attributes, enabling setAttribute() → attributeChangedCallback() → template update.
+            // Mutate the existing observedAttributes array on the class.
+            // FAST's FASTElementDefinition sets observedAttributes via
+            // Reflect.defineProperty with a concrete array value (non-configurable,
+            // non-writable), so the descriptor cannot be replaced. However, the
+            // array itself is mutable, and pushing into it works because
+            // registry.define() — which causes the browser to snapshot
+            // observedAttributes — is called AFTER this method runs.
             const existingObservedAttrs: string[] | undefined = (
                 this.classPrototype.constructor as any
             ).observedAttributes;
@@ -80,6 +84,18 @@ export class AttributeMap {
                 (this.definition.propertyLookup as Record<string, AttributeDefinition>)[
                     propertyName
                 ] = attrDef;
+
+                const attrs = (this.definition as any).attributes;
+                if (
+                    Array.isArray(attrs) &&
+                    !attrs.some(
+                        (existing: AttributeDefinition) =>
+                            existing.name === attrDef.name ||
+                            existing.attribute === attrDef.attribute,
+                    )
+                ) {
+                    attrs.push(attrDef);
+                }
             }
         }
     }

packages/fast-html/test/fixtures/attribute-map/attribute-map.spec.ts

@@ -1,6 +1,6 @@
 import { expect, test } from "@playwright/test";
 
-test.describe("AttributeMap", async () => {
+test.describe("AttributeMap", () => {
     test.beforeEach(async ({ page }) => {
         await page.goto("/fixtures/attribute-map/");
         await page.waitForSelector("attribute-map-test-element");