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()
 

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)

tests/test_core/test_layout.py

@@ -507,10 +507,8 @@ def bad_trigger():
             raise ValueError("Called bad trigger")
 
         children = [
-            idom.html.button(
-                {"onClick": good_trigger, "id": "good"}, "good", key="good"
-            ),
-            idom.html.button({"onClick": bad_trigger, "id": "bad"}, "bad", key="bad"),
+            idom.html.button("good", key="good", on_click=good_trigger, id="good"),
+            idom.html.button("bad", key="bad", on_click=bad_trigger, id="bad"),
         ]
 
         if reverse_children:
@@ -567,7 +565,7 @@ def callback():
             def callback():
                 raise ValueError("Called bad trigger")
 
-        return idom.html.button({"onClick": callback, "id": "good"}, "good")
+        return idom.html.button("good", on_click=callback, id="good")
 
     async with idom.Layout(RootComponent()) as layout:
         await layout.render()
@@ -649,7 +647,7 @@ def HasEventHandlerAtRoot():
         value, set_value = idom.hooks.use_state(False)
         set_value(not value)  # trigger renders forever
         event_handler.current = weakref(set_value)
-        button = idom.html.button({"onClick": set_value}, "state is: ", value)
+        button = idom.html.button("state is: ", value, on_click=set_value)
         event_handler.current = weakref(button["eventHandlers"]["onClick"].function)
         return button
 
@@ -671,7 +669,7 @@ def HasNestedEventHandler():
         value, set_value = idom.hooks.use_state(False)
         set_value(not value)  # trigger renders forever
         event_handler.current = weakref(set_value)
-        button = idom.html.button({"onClick": set_value}, "state is: ", value)
+        button = idom.html.button("state is: ", value, on_click=set_value)
         event_handler.current = weakref(button["eventHandlers"]["onClick"].function)
         return idom.html.div(idom.html.div(button))
 
@@ -753,7 +751,7 @@ def ComponentWithBadEventHandler():
         def raise_error():
             raise Exception("bad event handler")
 
-        return idom.html.button({"onClick": raise_error})
+        return idom.html.button(on_click=raise_error)
 
     with assert_idom_did_log(match_error="bad event handler"):
 
@@ -850,7 +848,7 @@ def SomeComponent():
         return idom.html.div(
             [
                 idom.html.div(
-                    idom.html.input({"onChange": lambda event: None}),
+                    idom.html.input(on_change=lambda event: None),
                     key=str(i),
                 )
                 for i in items
@@ -909,14 +907,14 @@ def Root():
         toggle, toggle_type.current = use_toggle(True)
         handler = element_static_handler.use(lambda: None)
         if toggle:
-            return html.div(html.button({"onEvent": handler}))
+            return html.div(html.button(on_event=handler))
         else:
             return html.div(SomeComponent())
 
     @idom.component
     def SomeComponent():
         handler = component_static_handler.use(lambda: None)
-        return html.button({"onAnotherEvent": handler})
+        return html.button(on_another_event=handler)
 
     async with idom.Layout(Root()) as layout:
         await layout.render()
@@ -999,8 +997,7 @@ def Parent():
         state, set_state = use_state(0)
         return html.div(
             html.button(
-                {"onClick": set_child_key_num.use(lambda: set_state(state + 1))},
-                "click me",
+                "click me", on_click=set_child_key_num.use(lambda: set_state(state + 1))
             ),
             Child("some-key"),
             Child(f"key-{state}"),
@@ -1073,7 +1070,7 @@ async def test_changing_event_handlers_in_the_next_render():
     def Root():
         event_name, set_event_name.current = use_state("first")
         return html.button(
-            {event_name: event_handler.use(lambda: did_trigger.set_current(True))}
+            **{event_name: event_handler.use(lambda: did_trigger.set_current(True))}
         )
 
     async with Layout(Root()) as layout:

tests/test_core/test_serve.py

@@ -85,7 +85,7 @@ def Counter():
         initial_value=0,
     )
     handler = STATIC_EVENT_HANDLER.use(lambda: change_count(1))
-    return idom.html.div({EVENT_NAME: handler, "count": count})
+    return idom.html.div(**{EVENT_NAME: handler, "count": count})
 
 
 async def test_dispatch():
@@ -115,8 +115,8 @@ async def handle_event():
             second_event_did_execute.set()
 
         return idom.html.div(
-            idom.html.button({"onClick": block_forever}),
-            idom.html.button({"onClick": handle_event}),
+            idom.html.button(on_click=block_forever),
+            idom.html.button(on_click=handle_event),
         )
 
     send_queue = asyncio.Queue()