Merge pull request #387 from knockout/claude/compassionate-tesla-O7UfD

fix: use mapped bindingName in AttributeMustacheProvider

Author: brianmhunt

.changeset/fix-attribute-mustache-binding-name.md

@@ -0,0 +1,5 @@
+---
+"@tko/provider.mustache": patch
+---
+
+Fix AttributeMustacheProvider to use the mapped binding name (e.g. `css`) instead of the raw attribute name (e.g. `class`) when looking up and emitting a direct binding. In handler sets that register `css` but not a `class` alias, `class="{{ expr }}"` previously fell through to `attr.class` instead of activating the `css` binding handler.

packages/provider.mustache/spec/attributeInterpolationSpec.ts

@@ -167,6 +167,15 @@ describe('Attribute Interpolation Markup Provider', function () {
     expect(testNode.getAttribute('class')).to.equal('test')
   })
 
+  it('Should map class attribute to css binding', function () {
+    testNode.setAttribute('class', '{{expr}}')
+    const bindings: any[] = Array.from(provider.bindingObjects(testNode, ctxStub({ expr: 'active' })))
+    expect(bindings.length).to.equal(1)
+    expect(bindings[0]).to.have.property('css')
+    expect(bindings[0]).to.not.have.property('class')
+    expect(bindings[0]).to.not.have.property('attr.class')
+  })
+
   it('Should convert value and checked attributes to two-way bindings', function () {
     const input = document.createElement('input')
     input.type = 'checkbox'

packages/provider.mustache/src/AttributeMustacheProvider.ts

@@ -80,13 +80,14 @@ export default class AttributeMustacheProvider extends Provider {
 
   getPossibleDirectBinding(attrName: string | number) {
     const bindingName = this.ATTRIBUTES_BINDING_MAP[attrName]
-    return bindingName && this.bindingHandlers.get(attrName)
+    return bindingName && this.bindingHandlers.get(bindingName)
   }
 
   *bindingObjects(node: Element, context: any) {
     for (const [attrName, parts] of this.bindingParts(node, context)) {
       const bindingForAttribute = this.getPossibleDirectBinding(attrName)
-      const handler: string = bindingForAttribute ? attrName : `attr.${attrName}`
+      const bindingName = this.ATTRIBUTES_BINDING_MAP[attrName]
+      const handler: string = bindingForAttribute ? bindingName : `attr.${attrName}`
       const accessorFn = bindingForAttribute
         ? (...v: any) => this.partsTogether(parts, context, node, ...v)
         : (...v: any) => ({ [attrName]: this.partsTogether(parts, context, node, ...v) })