update usages

Author: rmorshea

docs/examples.py

@@ -122,7 +122,7 @@ def Wrapper():
     def PrintView():
         text, set_text = idom.hooks.use_state(print_buffer.getvalue())
         print_buffer.set_callback(set_text)
-        return idom.html.pre({"class": "printout"}, text) if text else idom.html.div()
+        return idom.html.pre(text, class_="printout") if text else idom.html.div()
 
     return Wrapper()
 

requirements/pkg-deps.txt

@@ -7,4 +7,4 @@ requests >=2
 colorlog >=6
 asgiref >=3
 lxml >=4
-typer >=8, <9
+click >=8, <9

src/idom/core/vdom.py

@@ -1,8 +1,7 @@
 from __future__ import annotations
 
 import logging
-from functools import wraps
-from typing import Any, Mapping, TypeVar, cast
+from typing import Any, Mapping, cast
 from warnings import warn
 
 from fastjsonschema import compile as compile_json_schema
@@ -130,31 +129,6 @@ def is_vdom(value: Any) -> bool:
     )
 
 
-_T = TypeVar("_T")
-
-
-def _help_message(func: _T) -> _T:
-    @wraps(func)
-    def wrapper(*args, **kwargs):
-        try:
-            return func(*args, **kwargs)
-        except TypeError:  # pragma: no cover
-            warn(
-                (
-                    "Element constructor signatures have changed! A CLI tool for "
-                    "automatically updating code to the latest API has been provided "
-                    "with this release of IDOM (e.g. 'idom update-html-usages'). For "
-                    "start a discussion if you need help transitioning to this new "
-                    "interface: https://github.com/idom-team/idom/discussions/new?category=question"
-                ),
-                UserWarning,
-            )
-            raise
-
-    return wrapper
-
-
-@_help_message
 def vdom(
     tag: str, *children: VdomChild, key: Key | None = None, **attributes: Any
 ) -> VdomDict:
@@ -182,6 +156,17 @@ def vdom(
 
     children: list[VdomChild] = []
     for child in children:
+        if isinstance(child, dict) and "tagName" not in child:
+            warn(
+                (
+                    "Element constructor signatures have changed! A CLI tool for "
+                    "automatically updating code to the latest API has been provided "
+                    "with this release of IDOM (e.g. 'idom update-html-usages'). For "
+                    "start a discussion if you need help transitioning to this new "
+                    "interface: https://github.com/idom-team/idom/discussions/new?category=question"
+                ),
+                UserWarning,
+            )
         if _is_single_child(child):
             children.append(child)
         else:

src/idom/sample.py

@@ -8,14 +8,12 @@
 @component
 def SampleApp() -> VdomDict:
     return html.div(
-        {"id": "sample", "style": {"padding": "15px"}},
         html.h1("Sample Application"),
         html.p(
             "This is a basic application made with IDOM. Click ",
-            html.a(
-                {"href": "https://pypi.org/project/idom/", "target": "_blank"},
-                "here",
-            ),
+            html.a("here", href="https://pypi.org/project/idom/", target="_blank"),
             " to learn more.",
         ),
+        id="sample",
+        style={"padding": "15px"},
     )

tests/test_backend/test__common.py

@@ -44,22 +44,22 @@ def test_catch_unsafe_relative_path_traversal(tmp_path, bad_path):
         ),
         (
             html.head(
-                html.meta({"charset": "utf-8"}),
+                html.meta(charset="utf-8"),
                 html.title("example"),
             ),
             # we strip the head element
             '<meta charset="utf-8"><title>example</title>',
         ),
         (
             html._(
-                html.meta({"charset": "utf-8"}),
+                html.meta(charset="utf-8"),
                 html.title("example"),
             ),
             '<meta charset="utf-8"><title>example</title>',
         ),
         (
             [
-                html.meta({"charset": "utf-8"}),
+                html.meta(charset="utf-8"),
                 html.title("example"),
             ],
             '<meta charset="utf-8"><title>example</title>',

tests/test_backend/test_all.py

@@ -39,7 +39,7 @@ async def display(page, request):
 async def test_display_simple_hello_world(display: DisplayFixture):
     @idom.component
     def Hello():
-        return idom.html.p({"id": "hello"}, ["Hello World"])
+        return idom.html.p(["Hello World"], id="hello")
 
     await display.show(Hello)
 
@@ -56,11 +56,9 @@ async def test_display_simple_click_counter(display: DisplayFixture):
     def Counter():
         count, set_count = idom.hooks.use_state(0)
         return idom.html.button(
-            {
-                "id": "counter",
-                "onClick": lambda event: set_count(lambda old_count: old_count + 1),
-            },
             f"Count: {count}",
+            id="counter",
+            on_click=lambda event: set_count(lambda old_count: old_count + 1),
         )
 
     await display.show(Counter)
@@ -85,7 +83,7 @@ async def test_use_connection(display: DisplayFixture):
     @idom.component
     def ShowScope():
         conn.current = idom.use_connection()
-        return html.pre({"id": "scope"}, str(conn.current))
+        return html.pre(str(conn.current), id="scope")
 
     await display.show(ShowScope)
 
@@ -99,7 +97,7 @@ async def test_use_scope(display: DisplayFixture):
     @idom.component
     def ShowScope():
         scope.current = idom.use_scope()
-        return html.pre({"id": "scope"}, str(scope.current))
+        return html.pre(str(scope.current), id="scope")
 
     await display.show(ShowScope)
 
@@ -147,7 +145,7 @@ async def test_use_request(display: DisplayFixture, hook_name):
     @idom.component
     def ShowRoute():
         hook_val.current = hook()
-        return html.pre({"id": "hook"}, str(hook_val.current))
+        return html.pre(str(hook_val.current), id="hook")
 
     await display.show(ShowRoute)
 

tests/test_client.py

@@ -22,7 +22,7 @@ async def test_automatic_reconnect(browser: Browser):
 
     @idom.component
     def OldComponent():
-        return idom.html.p({"id": "old-component"}, "old")
+        return idom.html.p("old", id="old-component")
 
     async with AsyncExitStack() as exit_stack:
         server = await exit_stack.enter_async_context(BackendFixture(port=port))
@@ -43,7 +43,7 @@ def OldComponent():
     @idom.component
     def NewComponent():
         state, set_state.current = idom.hooks.use_state(0)
-        return idom.html.p({"id": f"new-component-{state}"}, f"new-{state}")
+        return idom.html.p(f"new-{state}", id=f"new-component-{state}")
 
     async with AsyncExitStack() as exit_stack:
         server = await exit_stack.enter_async_context(BackendFixture(port=port))
@@ -76,12 +76,10 @@ def ButtonWithChangingColor():
         color_toggle, set_color_toggle = idom.hooks.use_state(True)
         color = "red" if color_toggle else "blue"
         return idom.html.button(
-            {
-                "id": "my-button",
-                "onClick": lambda event: set_color_toggle(not color_toggle),
-                "style": {"backgroundColor": color, "color": "white"},
-            },
             f"color: {color}",
+            id="my-button",
+            on_click=lambda event: set_color_toggle(not color_toggle),
+            style={"backgroundColor": color, "color": "white"},
         )
 
     await display.show(ButtonWithChangingColor)
@@ -117,7 +115,7 @@ async def handle_change(event):
             await asyncio.sleep(delay)
             set_value(event["target"]["value"])
 
-        return idom.html.input({"onChange": handle_change, "id": "test-input"})
+        return idom.html.input(on_change=handle_change, id="test-input")
 
     await display.show(SomeComponent)
 

tests/test_core/test_component.py

@@ -47,7 +47,7 @@ def ComponentWithVarArgsAndKwargs(*args, **kwargs):
 async def test_display_simple_hello_world(display: DisplayFixture):
     @idom.component
     def Hello():
-        return idom.html.p({"id": "hello"}, ["Hello World"])
+        return idom.html.p(["Hello World"], id="hello")
 
     await display.show(Hello)
 
@@ -58,10 +58,10 @@ async def test_pre_tags_are_rendered_correctly(display: DisplayFixture):
     @idom.component
     def PreFormated():
         return idom.html.pre(
-            {"id": "pre-form-test"},
             idom.html.span("this", idom.html.span("is"), "some"),
             "pre-formated",
             " text",
+            id="pre-form-test",
         )
 
     await display.show(PreFormated)

tests/test_core/test_events.py

@@ -151,7 +151,7 @@ def Input():
         async def on_key_down(value):
             pass
 
-        return idom.html.input({"onKeyDown": on_key_down, "id": "input"})
+        return idom.html.input(on_key_down=on_key_down, id="input")
 
     await display.show(Input)
 
@@ -170,9 +170,9 @@ async def on_click(event):
             set_clicked(True)
 
         if not clicked:
-            return idom.html.button({"onClick": on_click, "id": "click"}, ["Click Me!"])
+            return idom.html.button(["Click Me!"], on_click=on_click, id="click")
         else:
-            return idom.html.p({"id": "complete"}, ["Complete"])
+            return idom.html.p(["Complete"], id="complete")
 
     await display.show(Button)
 
@@ -194,26 +194,14 @@ def outer_click_is_not_triggered(event):
             assert False
 
         outer = idom.html.div(
-            {
-                "style": {
-                    "height": "35px",
-                    "width": "35px",
-                    "backgroundColor": "red",
-                },
-                "onClick": outer_click_is_not_triggered,
-                "id": "outer",
-            },
             idom.html.div(
-                {
-                    "style": {
-                        "height": "30px",
-                        "width": "30px",
-                        "backgroundColor": "blue",
-                    },
-                    "onClick": inner_click_no_op,
-                    "id": "inner",
-                },
+                style={"height": "30px", "width": "30px", "backgroundColor": "blue"},
+                on_click=inner_click_no_op,
+                id="inner",
             ),
+            style={"height": "35px", "width": "35px", "backgroundColor": "red"},
+            on_click=outer_click_is_not_triggered,
+            id="outer",
         )
         return outer
 

tests/test_core/test_hooks.py

@@ -181,18 +181,14 @@ def TestComponent():
         render_count.current += 1
         return idom.html.div(
             idom.html.button(
-                {
-                    "id": "r_1",
-                    "onClick": event_count_tracker(lambda event: set_state(r_1)),
-                },
                 "r_1",
+                id="r_1",
+                on_click=event_count_tracker(lambda event: set_state(r_1)),
             ),
             idom.html.button(
-                {
-                    "id": "r_2",
-                    "onClick": event_count_tracker(lambda event: set_state(r_2)),
-                },
                 "r_2",
+                id="r_2",
+                on_click=event_count_tracker(lambda event: set_state(r_2)),
             ),
             f"Last state: {'r_1' if state is r_1 else 'r_2'}",
         )
@@ -237,9 +233,9 @@ async def on_change(event):
                 set_message(event["target"]["value"])
 
         if message is None:
-            return idom.html.input({"id": "input", "onChange": on_change})
+            return idom.html.input(id="input", on_change=on_change)
         else:
-            return idom.html.p({"id": "complete"}, ["Complete"])
+            return idom.html.p(["Complete"], id="complete")
 
     await display.show(Input)
 
@@ -261,13 +257,9 @@ def double_set_state(event):
             set_state_2(state_2 + 1)
 
         return idom.html.div(
-            idom.html.div(
-                {"id": "first", "data-value": state_1}, f"value is: {state_1}"
-            ),
-            idom.html.div(
-                {"id": "second", "data-value": state_2}, f"value is: {state_2}"
-            ),
-            idom.html.button({"id": "button", "onClick": double_set_state}, "click me"),
+            idom.html.div(f"value is: {state_1}", id="first", data_value=state_1),
+            idom.html.div(f"value is: {state_2}", id="second", data_value=state_2),
+            idom.html.button("click me", id="button", on_click=double_set_state),
         )
 
     await display.show(SomeComponent)