Allow passing multiple attrs args into components (#117)

* Allow passing multiple attrs args into components

* Fix and simplify typing for BaseElement __init__

* Remove unneeded list call

* Add multiple dictionaries of attributes to docs

Author: gazpachoking

docs/changelog.md

@@ -1,5 +1,8 @@
 # Changelog
 
+## NEXT
+- Allow multiple attribute dictionaries when defining `Elements`.
+
 ## 25.4.2 - 2025-04-16
 - Fix import of `@deprecated()` annotation on Python >= 3.13. It is part of the `warnings` module, not the `typing` module. Fixes [issue #106]. [PR #107]
 

docs/usage.md

@@ -298,6 +298,17 @@ dynamically.
 
 ```
 
+You can also specify multiple dictionaries  containing attributes. This is
+especially useful if you have variables with a common preset group of 
+attributes, or are using helper functions to create a dictionary of attributes.
+
+```pycon title="Using multiple dictionaries with attributes"
+>>> from htpy import button
+>>> print(button({"disabled": True}, {"hx-post": "/foo"}))
+<button disabled hx-post="/foo"></button>
+
+```
+
 ### Boolean/Empty Attributes
 
 In HTML, boolean attributes such as `disabled` are considered "true" when they

htpy/__init__.py

@@ -265,34 +265,28 @@ def __str__(self) -> _Markup:
 
     @t.overload
     def __call__(
-        self: BaseElementSelf, id_class: str, attrs: Mapping[str, Attribute], **kwargs: Attribute
+        self: BaseElementSelf,
+        id_class: str,
+        /,
+        *attrs: Mapping[str, Attribute],
+        **kwargs: Attribute,
     ) -> BaseElementSelf: ...
     @t.overload
     def __call__(
-        self: BaseElementSelf, id_class: str = "", **kwargs: Attribute
+        self: BaseElementSelf, /, *attrs: Mapping[str, Attribute], **kwargs: Attribute
     ) -> BaseElementSelf: ...
-    @t.overload
-    def __call__(
-        self: BaseElementSelf, attrs: Mapping[str, Attribute], **kwargs: Attribute
-    ) -> BaseElementSelf: ...
-    @t.overload
-    def __call__(self: BaseElementSelf, **kwargs: Attribute) -> BaseElementSelf: ...
-    def __call__(self: BaseElementSelf, *args: t.Any, **kwargs: t.Any) -> BaseElementSelf:
-        id_class = ""
-        attrs: Mapping[str, Attribute] = {}
-
-        if len(args) == 1:
-            if isinstance(args[0], str):
-                # element(".foo")
-                id_class = args[0]
-                attrs = {}
-            else:
-                # element({"foo": "bar"})
-                id_class = ""
-                attrs = args[0]
-        elif len(args) == 2:
-            # element(".foo", {"bar": "baz"})
-            id_class, attrs = args
+    def __call__(self: BaseElementSelf, /, *args: t.Any, **kwargs: t.Any) -> BaseElementSelf:
+        id_class: str = ""
+        attr_dicts: t.Sequence[Mapping[str, Attribute]]
+        attrs: dict[str, Attribute] = {}
+
+        if args and not isinstance(args[0], Mapping):
+            id_class, *attr_dicts = args
+        else:
+            attr_dicts = args
+
+        for attr_dict in attr_dicts:
+            attrs.update(attr_dict)
 
         return self.__class__(
             self._name,

tests/test_attributes.py

@@ -187,15 +187,20 @@ def test_id_class_bad_format() -> None:
 
 
 def test_id_class_bad_type() -> None:
-    with pytest.raises(TypeError, match="id/class strings must be str. got {'oops': 'yes'}"):
-        div({"oops": "yes"}, {})  # type: ignore
+    with pytest.raises(TypeError, match="id/class strings must be str. got 3"):
+        div(3, {})  # type: ignore
 
 
 def test_id_class_and_kwargs(render: RenderFixture) -> None:
     result = div("#theid", for_="hello", data_foo="<bar")
     assert render(result) == ['<div id="theid" for="hello" data-foo="&lt;bar">', "</div>"]
 
 
+def test_multiple_attrs(render: RenderFixture) -> None:
+    result = div({"a": "1"}, {"a": "2", "b": "2"}, {"c": "3"})
+    assert render(result) == ['<div a="2" b="2" c="3">', "</div>"]
+
+
 def test_attrs_and_kwargs(render: RenderFixture) -> None:
     result = div({"a": "1", "for": "a"}, for_="b", b="2")
     assert render(result) == ['<div a="1" for="b" b="2">', "</div>"]