modify vdom interface usage

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

docs/source/guides/adding-interactivity/components-with-state/_examples/adding_state_variable/main.py

@@ -25,10 +25,10 @@ def handle_click(event):
     url = sculpture["url"]
 
     return html.div(
-        html.button({"onClick": handle_click}, "Next"),
+        html.button("Next", on_click=handle_click),
         html.h2(name, " by ", artist),
         html.p(f"({bounded_index + 1} of {len(sculpture_data)})"),
-        html.img({"src": url, "alt": alt, "style": {"height": "200px"}}),
+        html.img(src=url, alt=alt, style={"height": "200px"}),
         html.p(description),
     )
 

docs/source/guides/adding-interactivity/components-with-state/_examples/isolated_state/main.py

@@ -29,25 +29,25 @@ def handle_more_click(event):
     url = sculpture["url"]
 
     return html.div(
-        html.button({"onClick": handle_next_click}, "Next"),
+        html.button("Next", on_click=handle_next_click),
         html.h2(name, " by ", artist),
         html.p(f"({bounded_index + 1} or {len(sculpture_data)})"),
-        html.img({"src": url, "alt": alt, "style": {"height": "200px"}}),
+        html.img(src=url, alt=alt, style={"height": "200px"}),
         html.div(
             html.button(
-                {"onClick": handle_more_click},
-                f"{'Show' if show_more else 'Hide'} details",
+                f"{('Show' if show_more else 'Hide')} details",
+                on_click=handle_more_click,
             ),
-            (html.p(description) if show_more else ""),
+            html.p(description) if show_more else "",
         ),
     )
 
 
 @component
 def App():
     return html.div(
-        html.section({"style": {"width": "50%", "float": "left"}}, Gallery()),
-        html.section({"style": {"width": "50%", "float": "left"}}, Gallery()),
+        html.section(Gallery(), style={"width": "50%", "float": "left"}),
+        html.section(Gallery(), style={"width": "50%", "float": "left"}),
     )
 
 

docs/source/guides/adding-interactivity/components-with-state/_examples/multiple_state_variables/main.py

@@ -29,16 +29,16 @@ def handle_more_click(event):
     url = sculpture["url"]
 
     return html.div(
-        html.button({"onClick": handle_next_click}, "Next"),
+        html.button("Next", on_click=handle_next_click),
         html.h2(name, " by ", artist),
         html.p(f"({bounded_index + 1} or {len(sculpture_data)})"),
-        html.img({"src": url, "alt": alt, "style": {"height": "200px"}}),
+        html.img(src=url, alt=alt, style={"height": "200px"}),
         html.div(
             html.button(
-                {"onClick": handle_more_click},
-                f"{'Show' if show_more else 'Hide'} details",
+                f"{('Show' if show_more else 'Hide')} details",
+                on_click=handle_more_click,
             ),
-            (html.p(description) if show_more else ""),
+            html.p(description) if show_more else "",
         ),
     )
 

docs/source/guides/adding-interactivity/components-with-state/_examples/when_variables_are_not_enough/main.py

@@ -31,10 +31,10 @@ def handle_click(event):
     url = sculpture["url"]
 
     return html.div(
-        html.button({"onClick": handle_click}, "Next"),
+        html.button("Next", on_click=handle_click),
         html.h2(name, " by ", artist),
         html.p(f"({bounded_index + 1} or {len(sculpture_data)})"),
-        html.img({"src": url, "alt": alt, "style": {"height": "200px"}}),
+        html.img(src=url, alt=alt, style={"height": "200px"}),
         html.p(description),
     )
 

docs/source/guides/adding-interactivity/dangers-of-mutability/_examples/dict_remove.py

@@ -26,31 +26,25 @@ def handle_click(event):
         return handle_click
 
     return html.div(
-        html.button({"onClick": handle_add_click}, "add term"),
+        html.button("add term", on_click=handle_add_click),
         html.label(
-            "Term: ",
-            html.input({"value": term_to_add, "onChange": handle_term_to_add_change}),
+            "Term: ", html.input(value=term_to_add, on_change=handle_term_to_add_change)
         ),
         html.label(
             "Definition: ",
             html.input(
-                {
-                    "value": definition_to_add,
-                    "onChange": handle_definition_to_add_change,
-                }
+                value=definition_to_add, on_change=handle_definition_to_add_change
             ),
         ),
         html.hr(),
         [
             html.div(
-                html.button(
-                    {"onClick": make_delete_click_handler(term)}, "delete term"
-                ),
+                html.button("delete term", on_click=make_delete_click_handler(term)),
                 html.dt(term),
                 html.dd(definition),
                 key=term,
             )
-            for term, definition in all_terms.items()
+            for (term, definition) in all_terms.items()
         ],
     )
 

docs/source/guides/adding-interactivity/dangers-of-mutability/_examples/dict_update.py

@@ -23,21 +23,14 @@ def handle_email_change(event):
     return html.div(
         html.label(
             "First name: ",
-            html.input(
-                {"value": person["first_name"], "onChange": handle_first_name_change},
-            ),
+            html.input(value=person["first_name"], on_change=handle_first_name_change),
         ),
         html.label(
             "Last name: ",
-            html.input(
-                {"value": person["last_name"], "onChange": handle_last_name_change},
-            ),
+            html.input(value=person["last_name"], on_change=handle_last_name_change),
         ),
         html.label(
-            "Email: ",
-            html.input(
-                {"value": person["email"], "onChange": handle_email_change},
-            ),
+            "Email: ", html.input(value=person["email"], on_change=handle_email_change)
         ),
         html.p(f"{person['first_name']} {person['last_name']} {person['email']}"),
     )

docs/source/guides/adding-interactivity/dangers-of-mutability/_examples/list_insert.py

@@ -16,8 +16,8 @@ def handle_click(event):
 
     return html.div(
         html.h1("Inspiring sculptors:"),
-        html.input({"value": artist_to_add, "onChange": handle_change}),
-        html.button({"onClick": handle_click}, "add"),
+        html.input(value=artist_to_add, on_change=handle_change),
+        html.button("add", on_click=handle_click),
         html.ul([html.li(name, key=name) for name in artists]),
     )
 

docs/source/guides/adding-interactivity/dangers-of-mutability/_examples/list_re_order.py

@@ -15,8 +15,8 @@ def handle_reverse_click(event):
 
     return html.div(
         html.h1("Inspiring sculptors:"),
-        html.button({"onClick": handle_sort_click}, "sort"),
-        html.button({"onClick": handle_reverse_click}, "reverse"),
+        html.button("sort", on_click=handle_sort_click),
+        html.button("reverse", on_click=handle_reverse_click),
         html.ul([html.li(name, key=name) for name in artists]),
     )
 

docs/source/guides/adding-interactivity/dangers-of-mutability/_examples/list_remove.py

@@ -24,16 +24,16 @@ def handle_click(event):
 
     return html.div(
         html.h1("Inspiring sculptors:"),
-        html.input({"value": artist_to_add, "onChange": handle_change}),
-        html.button({"onClick": handle_add_click}, "add"),
+        html.input(value=artist_to_add, on_change=handle_change),
+        html.button("add", on_click=handle_add_click),
         html.ul(
             [
                 html.li(
                     name,
-                    html.button({"onClick": make_handle_delete_click(index)}, "delete"),
+                    html.button("delete", on_click=make_handle_delete_click(index)),
                     key=name,
                 )
-                for index, name in enumerate(artists)
+                for (index, name) in enumerate(artists)
             ]
         ),
     )