Fix attribute name handling to convert underscores to hyphens (#105)

Author: joshuadavidthomas

CHANGELOG.md

@@ -18,6 +18,10 @@ and this project attempts to adhere to [Semantic Versioning](https://semver.org/
 
 ## [Unreleased]
 
+### Fixed
+
+- Fixed attribute name handling in components to properly convert underscores to hyphens (e.g. `hx_get` becomes `hx-get`) for better HTML compatibility.
+
 ## [0.9.0]
 
 ### Added

docs/params.md

@@ -67,6 +67,24 @@ This will render as:
 </button>
 ```
 
+### Attribute Names
+
+When rendering attributes, underscores in attribute names are automatically converted to hyphens. This is particularly useful for data attributes and other hyphenated HTML attributes:
+
+```htmldjango
+{% bird button data_analytics="signup" hx_get="/api/data" %}
+    Load Data
+{% endbird %}
+```
+
+This will render as:
+
+```html
+<button data-analytics="signup" hx-get="/api/data">
+    Load Data
+</button>
+```
+
 ## Properties
 
 Properties (i.e. `props`) allow you to define parameters that your component expects, with optional default values. Unlike attributes which are provided as a flattened string via `{{ attrs }}`, props are processed by the component and made available as individual values (e.g. `{{ props.variant }}`) that can be used to control rendering logic.

src/django_bird/params.py

@@ -38,19 +38,17 @@ class Param:
     name: str
     value: Value
 
-    def _resolve_value(self, context: Context) -> str | bool | None:
-        return self.value.resolve(context)
-
     def render_attr(self, context: Context) -> str:
-        value = self._resolve_value(context)
+        value = self.value.resolve(context)
+        name = self.name.replace("_", "-")
         if value is None:
             return ""
         if value is True:
-            return self.name
-        return f'{self.name}="{value}"'
+            return name
+        return f'{name}="{value}"'
 
     def render_prop(self, context: Context) -> str | bool | None:
-        return self._resolve_value(context)
+        return self.value.resolve(context)
 
     @classmethod
     def from_bit(cls, bit: str) -> Param:

tests/test_params.py

@@ -64,6 +64,7 @@ class TestParam:
                 {"foo": {}},
                 'class="foo.bar"',
             ),
+            (Param(name="hx_get", value=Value("/", quoted=False)), {}, 'hx-get="/"'),
         ],
     )
     def test_render_attr(self, param, context, expected):