Simplier interface for reactpy.Vdom

Author: Archmonger

src/reactpy/_html.py

@@ -194,7 +194,7 @@ def __getattr__(self, value: str) -> VdomConstructor:
             return self.__cache__[value]
 
         self.__cache__[value] = Vdom(
-            tagName=value, allow_children=value not in NO_CHILDREN_ALLOWED_SVG
+            value, allow_children=value not in NO_CHILDREN_ALLOWED_SVG
         )
 
         return self.__cache__[value]
@@ -282,8 +282,8 @@ class HtmlConstructor:
 
     # ruff: noqa: N815
     __cache__: ClassVar[dict[str, VdomConstructor]] = {
-        "script": Vdom(tagName="script", custom_constructor=_script),
-        "fragment": Vdom(tagName="", custom_constructor=_fragment),
+        "script": Vdom("script", custom_constructor=_script),
+        "fragment": Vdom("", custom_constructor=_fragment),
         "svg": SvgConstructor(),
     }
 
@@ -294,7 +294,7 @@ def __getattr__(self, value: str) -> VdomConstructor:
             return self.__cache__[value]
 
         self.__cache__[value] = Vdom(
-            tagName=value, allow_children=value not in NO_CHILDREN_ALLOWED_HTML_BODY
+            value, allow_children=value not in NO_CHILDREN_ALLOWED_HTML_BODY
         )
 
         return self.__cache__[value]

src/reactpy/core/vdom.py

@@ -2,7 +2,7 @@
 from __future__ import annotations
 
 import json
-from collections.abc import Iterable, Mapping, Sequence
+from collections.abc import Mapping, Sequence
 from typing import (
     Any,
     Callable,
@@ -11,7 +11,6 @@
 )
 
 from fastjsonschema import compile as compile_json_schema
-from typing_extensions import Unpack
 
 from reactpy._warnings import warn
 from reactpy.config import REACTPY_CHECK_JSON_ATTRS, REACTPY_DEBUG
@@ -23,11 +22,11 @@
     EllipsisRepr,
     EventHandlerDict,
     EventHandlerType,
+    ImportSourceDict,
     VdomAttributes,
     VdomChildren,
     VdomDict,
     VdomJson,
-    VdomTypeDict,
 )
 
 VDOM_JSON_SCHEMA = {
@@ -112,30 +111,29 @@ def is_vdom(value: Any) -> bool:
 
 
 class Vdom:
-    """Class that follows VDOM spec, and exposes the user API that can create VDOM elements."""
+    """Class-based constructor for VDOM dictionaries.
+    Once initialized, the `__call__` method on this class is used as the user API
+    for `reactpy.html`."""
 
     def __init__(
         self,
+        tag_name: str,
         /,
         allow_children: bool = True,
         custom_constructor: CustomVdomConstructor | None = None,
-        **kwargs: Unpack[VdomTypeDict],
+        import_source: ImportSourceDict | None = None,
     ) -> None:
-        """`**kwargs` provided here are considered as defaults for dictionary key values.
-        Other arguments exist to configure the way VDOM dictionaries are constructed."""
-        if "tagName" not in kwargs:
-            msg = "You must specify a 'tagName' for a VDOM element."
-            raise ValueError(msg)
+        """Initialize a VDOM constructor for the provided `tag_name`."""
         self.allow_children = allow_children
         self.custom_constructor = custom_constructor
-        self.default_values = kwargs
+        self.import_source = import_source
 
         # Configure Python debugger attributes
-        self.__name__ = kwargs["tagName"]
+        self.__name__ = tag_name
         module_name = f_module_name(1)
         if module_name:
             self.__module__ = module_name
-            self.__qualname__ = f"{module_name}.{kwargs['tagName']}"
+            self.__qualname__ = f"{module_name}.{tag_name}"
 
     @overload
     def __call__(
@@ -163,21 +161,24 @@ def __call__(
                 attributes=attributes,
                 event_handlers=event_handlers,
             )
+
         # Otherwise, use the default constructor
         else:
             result = {
                 **({"key": key} if key is not None else {}),
                 **({"children": children} if children else {}),
                 **({"attributes": attributes} if attributes else {}),
                 **({"eventHandlers": event_handlers} if event_handlers else {}),
+                **({"importSource": self.import_source} if self.import_source else {}),
             }
 
         # Validate the result
+        result = result | {"tagName": self.__name__}
         if children and not self.allow_children:
-            msg = f"{self.default_values.get('tagName')!r} nodes cannot have children."
+            msg = f"{self.__name__!r} nodes cannot have children."
             raise TypeError(msg)
 
-        return VdomDict(**(self.default_values | result))  # type: ignore
+        return VdomDict(**result)  # type: ignore
 
 
 def separate_attributes_and_children(

src/reactpy/web/module.py

@@ -284,9 +284,9 @@ def _make_export(
     allow_children: bool,
 ) -> VdomConstructor:
     return Vdom(
-        tagName=name,
+        name,
         allow_children=allow_children,
-        importSource=ImportSourceDict(
+        import_source=ImportSourceDict(
             source=web_module.source,
             sourceType=web_module.source_type,
             fallback=(fallback or web_module.default_fallback),

tests/test_core/test_component.py

@@ -27,7 +27,7 @@ def SimpleDiv():
 async def test_simple_parameterized_component():
     @reactpy.component
     def SimpleParamComponent(tag):
-        return reactpy.Vdom(tagName=tag)()
+        return reactpy.Vdom(tag)()
 
     assert SimpleParamComponent("div").render() == {"tagName": "div"}
 

tests/test_core/test_layout.py

@@ -82,7 +82,7 @@ async def test_simple_layout():
     @reactpy.component
     def SimpleComponent():
         tag, set_state_hook.current = reactpy.hooks.use_state("div")
-        return reactpy.Vdom(tagName=tag)()
+        return reactpy.Vdom(tag)()
 
     async with reactpy.Layout(SimpleComponent()) as layout:
         update_1 = await layout.render()

tests/test_core/test_vdom.py

@@ -32,19 +32,19 @@ def test_is_vdom(result, value):
     "actual, expected",
     [
         (
-            reactpy.Vdom(tagName="div")([reactpy.Vdom(tagName="div")()]),
+            reactpy.Vdom("div")([reactpy.Vdom("div")()]),
             {"tagName": "div", "children": [{"tagName": "div"}]},
         ),
         (
-            reactpy.Vdom(tagName="div")({"style": {"backgroundColor": "red"}}),
+            reactpy.Vdom("div")({"style": {"backgroundColor": "red"}}),
             {"tagName": "div", "attributes": {"style": {"backgroundColor": "red"}}},
         ),
         (
             # multiple iterables of children are merged
-            reactpy.Vdom(tagName="div")(
+            reactpy.Vdom("div")(
                 (
-                    [reactpy.Vdom(tagName="div")(), 1],
-                    (reactpy.Vdom(tagName="div")(), 2),
+                    [reactpy.Vdom("div")(), 1],
+                    (reactpy.Vdom("div")(), 2),
                 )
             ),
             {
@@ -53,13 +53,11 @@ def test_is_vdom(result, value):
             },
         ),
         (
-            reactpy.Vdom(tagName="div")({"onEvent": FAKE_EVENT_HANDLER}),
+            reactpy.Vdom("div")({"onEvent": FAKE_EVENT_HANDLER}),
             {"tagName": "div", "eventHandlers": FAKE_EVENT_HANDLER_DICT},
         ),
         (
-            reactpy.Vdom(
-                tagName="div",
-            )((reactpy.html.h1("hello"), reactpy.html.h2("world"))),
+            reactpy.Vdom("div")((reactpy.html.h1("hello"), reactpy.html.h2("world"))),
             {
                 "tagName": "div",
                 "children": [
@@ -69,19 +67,19 @@ def test_is_vdom(result, value):
             },
         ),
         (
-            reactpy.Vdom(tagName="div")({"tagName": "div"}),
+            reactpy.Vdom("div")({"tagName": "div"}),
             {"tagName": "div", "attributes": {"tagName": "div"}},
         ),
         (
-            reactpy.Vdom(tagName="div")((i for i in range(3))),
+            reactpy.Vdom("div")((i for i in range(3))),
             {"tagName": "div", "children": [0, 1, 2]},
         ),
         (
-            reactpy.Vdom(tagName="div")((x**2 for x in [1, 2, 3])),
+            reactpy.Vdom("div")((x**2 for x in [1, 2, 3])),
             {"tagName": "div", "children": [1, 4, 9]},
         ),
         (
-            reactpy.Vdom(tagName="div")(["child_1", ["child_2"]]),
+            reactpy.Vdom("div")(["child_1", ["child_2"]]),
             {"tagName": "div", "children": ["child_1", "child_2"]},
         ),
     ],
@@ -93,7 +91,7 @@ def test_simple_node_construction(actual, expected):
 async def test_callable_attributes_are_cast_to_event_handlers():
     params_from_calls = []
 
-    node = reactpy.Vdom(tagName="div")(
+    node = reactpy.Vdom("div")(
         {"onEvent": lambda *args: params_from_calls.append(args)}
     )
 
@@ -109,15 +107,15 @@ async def test_callable_attributes_are_cast_to_event_handlers():
 
 
 def test_make_vdom_constructor():
-    elmt = Vdom(tagName="some-tag")
+    elmt = Vdom("some-tag")
 
     assert elmt({"data": 1}, [elmt()]) == {
         "tagName": "some-tag",
         "children": [{"tagName": "some-tag"}],
         "attributes": {"data": 1},
     }
 
-    no_children = Vdom(tagName="no-children", allow_children=False)
+    no_children = Vdom("no-children", allow_children=False)
 
     with pytest.raises(TypeError, match="cannot have children"):
         no_children([1, 2, 3])
@@ -295,7 +293,7 @@ def test_invalid_vdom(value, error_message_pattern):
 @pytest.mark.skipif(not REACTPY_DEBUG.current, reason="Only warns in debug mode")
 def test_warn_cannot_verify_keypath_for_genereators():
     with pytest.warns(UserWarning) as record:
-        reactpy.Vdom(tagName="div")((1 for i in range(10)))
+        reactpy.Vdom("div")((1 for i in range(10)))
         assert len(record) == 1
         assert (
             record[0]
@@ -307,16 +305,16 @@ def test_warn_cannot_verify_keypath_for_genereators():
 @pytest.mark.skipif(not REACTPY_DEBUG.current, reason="Only warns in debug mode")
 def test_warn_dynamic_children_must_have_keys():
     with pytest.warns(UserWarning) as record:
-        reactpy.Vdom(tagName="div")([reactpy.Vdom(tagName="div")()])
+        reactpy.Vdom("div")([reactpy.Vdom("div")()])
         assert len(record) == 1
         assert record[0].message.args[0].startswith("Key not specified for child")
 
     @reactpy.component
     def MyComponent():
-        return reactpy.Vdom(tagName="div")()
+        return reactpy.Vdom("div")()
 
     with pytest.warns(UserWarning) as record:
-        reactpy.Vdom(tagName="div")([MyComponent()])
+        reactpy.Vdom("div")([MyComponent()])
         assert len(record) == 1
         assert record[0].message.args[0].startswith("Key not specified for child")
 
@@ -328,12 +326,6 @@ def test_raise_for_non_json_attrs():
 
 
 def test_invalid_vdom_keys():
-    with pytest.raises(ValueError, match="Invalid keys*"):
-        reactpy.Vdom(tagName="div", foo="bar")()
-
-    with pytest.raises(ValueError, match="You must specify a 'tagName'*"):
-        reactpy.Vdom()
-
     with pytest.raises(ValueError, match="Invalid keys:*"):
         reactpy.types.VdomDict(tagName="test", foo="bar")