refactor(fast-html): use {{foobar}} binding (no dashes) in AttributeMap fixture

Template bindings should not use dashes. The attribute name can still have
dashes (e.g. foo-bar on the element), but the binding itself uses foobar.
Update fixture template, main.ts, and all spec descriptions accordingly.
Clarify removeDashes JSDoc to reflect the design intent.

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

Author: janechu

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

@@ -20,7 +20,7 @@ test.describe("AttributeMap", async () => {
         expect(hasFooAccessor).toBeTruthy();
     });
 
-    test("should define @attr for a property with dashes removed", async ({ page }) => {
+    test("should define @attr for a foobar property", async ({ page }) => {
         const element = page.locator("attribute-map-test-element");
 
         const hasFoobarAccessor = await element.evaluate(node => {
@@ -34,16 +34,16 @@ test.describe("AttributeMap", async () => {
         expect(hasFoobarAccessor).toBeTruthy();
     });
 
-    test("should remove dashes from attribute name to form property name", async ({
+    test("should define @attr for a foobar property using the same attribute name", async ({
         page,
     }) => {
         const element = page.locator("attribute-map-test-element");
 
-        // Setting the dash-case attribute should update the dashes-removed property
-        await element.evaluate(node => node.setAttribute("foo-bar", "dash-case-test"));
+        // Setting the foobar attribute should update the foobar property
+        await element.evaluate(node => node.setAttribute("foobar", "foobar-test"));
         const propValue = await element.evaluate(node => (node as any).foobar);
 
-        expect(propValue).toBe("dash-case-test");
+        expect(propValue).toBe("foobar-test");
     });
 
     test("should not define @attr for event handler methods", async ({ page }) => {
@@ -79,12 +79,12 @@ test.describe("AttributeMap", async () => {
         await expect(page.locator(".foo-value")).toHaveText("attr-value");
     });
 
-    test("should update template when dash-case attribute is set via setAttribute", async ({
+    test("should update template when foobar attribute is set via setAttribute", async ({
         page,
     }) => {
         const element = page.locator("attribute-map-test-element");
 
-        await element.evaluate(node => node.setAttribute("foo-bar", "bar-attr-value"));
+        await element.evaluate(node => node.setAttribute("foobar", "bar-attr-value"));
 
         await expect(page.locator(".foo-bar-value")).toHaveText("bar-attr-value");
     });
@@ -115,13 +115,13 @@ test.describe("AttributeMap", async () => {
         expect(propValue).toBe("lookup-test");
     });
 
-    test("should update definition attributeLookup with dashes removed for dash-case attributes", async ({
+    test("should update definition attributeLookup for foobar property", async ({
         page,
     }) => {
         const element = page.locator("attribute-map-test-element");
 
-        // setAttribute with dash-case triggers attributeChangedCallback for the dashes-removed property
-        await element.evaluate(node => node.setAttribute("foo-bar", "lookup-bar-test"));
+        // setAttribute triggers attributeChangedCallback for the foobar property
+        await element.evaluate(node => node.setAttribute("foobar", "lookup-bar-test"));
         const propValue = await element.evaluate(node => (node as any).foobar);
 
         expect(propValue).toBe("lookup-bar-test");

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

@@ -85,7 +85,10 @@ export class AttributeMap {
     }
 
     /**
-     * Removes dashes from an attribute name to produce a JS property name.
+     * Derives a JS property name from an attribute name by removing all dashes.
+     * Template bindings should not use dashes (e.g. use {{foobar}} not {{foo-bar}}),
+     * but HTML attributes can have dashes (e.g. foo-bar), so this ensures
+     * a valid JS identifier is always produced.
      * e.g. foo-bar → foobar
      */
     private removeDashes(str: string): string {

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

@@ -22,13 +22,13 @@ test.describe("AttributeMap", async () => {
         expect(accessors.foobar).toBeTruthy();
     });
 
-    test("should remove dashes from attribute name to form property name", async ({
+    test("should define @attr using binding name as both attribute and property name", async ({
         page,
     }) => {
         const element = page.locator("attribute-map-test-element");
 
-        // Setting foo-bar attribute should update the foobar property
-        await element.evaluate(node => node.setAttribute("foo-bar", "dash-test"));
+        // Setting foobar attribute should update the foobar property
+        await element.evaluate(node => node.setAttribute("foobar", "dash-test"));
         const propValue = await element.evaluate(node => (node as any).foobar);
 
         expect(propValue).toBe("dash-test");
@@ -54,12 +54,12 @@ test.describe("AttributeMap", async () => {
         await expect(page.locator(".foo-value")).toHaveText("hello-via-attr");
     });
 
-    test("should update template when foo-bar attribute is set via setAttribute", async ({
+    test("should update template when foobar attribute is set via setAttribute", async ({
         page,
     }) => {
         const element = page.locator("attribute-map-test-element");
 
-        await element.evaluate(node => node.setAttribute("foo-bar", "world-via-attr"));
+        await element.evaluate(node => node.setAttribute("foobar", "world-via-attr"));
 
         await expect(page.locator(".foo-bar-value")).toHaveText("world-via-attr");
     });
@@ -69,7 +69,7 @@ test.describe("AttributeMap", async () => {
 
         await element.evaluate(node => {
             node.setAttribute("foo", "multi-foo");
-            node.setAttribute("foo-bar", "multi-bar");
+            node.setAttribute("foobar", "multi-bar");
         });
 
         await expect(page.locator(".foo-value")).toHaveText("multi-foo");
@@ -90,7 +90,7 @@ test.describe("AttributeMap", async () => {
         expect(attrValue).toBe("reflected-value");
     });
 
-    test("should reflect foobar property value back to foo-bar attribute", async ({
+    test("should reflect foobar property value back to foobar attribute", async ({
         page,
     }) => {
         const element = page.locator("attribute-map-test-element");
@@ -101,7 +101,7 @@ test.describe("AttributeMap", async () => {
 
         await page.evaluate(() => new Promise(r => requestAnimationFrame(r)));
 
-        const attrValue = await element.evaluate(node => node.getAttribute("foo-bar"));
+        const attrValue = await element.evaluate(node => node.getAttribute("foobar"));
         expect(attrValue).toBe("bar-reflected");
     });
 

packages/fast-html/test/fixtures/attribute-map/index.html

@@ -10,7 +10,7 @@
         <f-template name="attribute-map-test-element">
             <template>
                 <div class="foo-value">{{foo}}</div>
-                <div class="foo-bar-value">{{foo-bar}}</div>
+                <div class="foo-bar-value">{{foobar}}</div>
                 <button type="button" @click="{setFoo()}">Set Foo</button>
                 <button type="button" @click="{setFooBar()}">Set FooBar</button>
                 <button type="button" @click="{setMultiple()}">Set Multiple</button>