Unify vdom interface

.github/workflows/test.yml

@@ -23,7 +23,7 @@ jobs:
       session-name: test_python_suite
       session-arguments: --maxfail=3 --no-cov
       runs-on-array: '["ubuntu-latest", "macos-latest", "windows-latest"]'
-      python-version-array: '["3.7", "3.8", "3.9", "3.10"]'
+      python-version-array: '["3.7", "3.8", "3.9", "3.10", "3.11"]'
   docs:
     uses: ./.github/workflows/.nox-session.yml
     with:

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_name="printout") if text else idom.html.div()
 
     return Wrapper()
 

docs/source/_exts/custom_autosectionlabel.py

@@ -5,7 +5,7 @@
 """
 
 from fnmatch import fnmatch
-from typing import Any, Dict, cast
+from typing import Any, cast
 
 from docutils import nodes
 from docutils.nodes import Node
@@ -30,7 +30,6 @@ def get_node_depth(node: Node) -> int:
 
 def register_sections_as_label(app: Sphinx, document: Node) -> None:
     docname = app.env.docname
-    print(docname)
 
     for pattern in app.config.autosectionlabel_skip_docs:
         if fnmatch(docname, pattern):
@@ -67,7 +66,7 @@ def register_sections_as_label(app: Sphinx, document: Node) -> None:
         domain.labels[name] = docname, labelid, sectname
 
 
-def setup(app: Sphinx) -> Dict[str, Any]:
+def setup(app: Sphinx) -> dict[str, Any]:
     app.add_config_value("autosectionlabel_prefix_document", False, "env")
     app.add_config_value("autosectionlabel_maxdepth", None, "env")
     app.add_config_value("autosectionlabel_skip_docs", [], "env")

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,14 +29,14 @@ 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 ""),
         ),
@@ -46,8 +46,8 @@ def handle_more_click(event):
 @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,14 +29,14 @@ 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 ""),
         ),

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,26 +26,21 @@ 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}),
+            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,

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

@@ -23,21 +23,15 @@ 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},
-            ),
+            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,13 +24,13 @@ 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)

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

@@ -16,7 +16,7 @@ def handle_click(event):
         [
             html.li(
                 count,
-                html.button({"onClick": make_increment_click_handler(index)}, "+1"),
+                html.button("+1", on_click=make_increment_click_handler(index)),
                 key=index,
             )
             for index, count in enumerate(counters)

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

@@ -16,29 +16,25 @@ async def handle_pointer_move(event):
         )
 
     return html.div(
-        {
-            "onPointerMove": handle_pointer_move,
-            "style": {
-                "position": "relative",
-                "height": "200px",
-                "width": "100%",
-                "backgroundColor": "white",
-            },
-        },
         html.div(
-            {
-                "style": {
-                    "position": "absolute",
-                    "backgroundColor": "red",
-                    "borderRadius": "50%",
-                    "width": "20px",
-                    "height": "20px",
-                    "left": "-10px",
-                    "top": "-10px",
-                    "transform": f"translate({position['x']}px, {position['y']}px)",
-                },
+            style={
+                "position": "absolute",
+                "background_color": "red",
+                "border_radius": "50%",
+                "width": "20px",
+                "height": "20px",
+                "left": "-10px",
+                "top": "-10px",
+                "transform": f"translate({position['x']}px, {position['y']}px)",
             }
         ),
+        on_pointer_move=handle_pointer_move,
+        style={
+            "position": "relative",
+            "height": "200px",
+            "width": "100%",
+            "background_color": "white",
+        },
     )
 
 

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

@@ -14,29 +14,25 @@ def handle_pointer_move(event):
         position["y"] = event["clientY"] - outer_div_bounds["y"]
 
     return html.div(
-        {
-            "onPointerMove": handle_pointer_move,
-            "style": {
-                "position": "relative",
-                "height": "200px",
-                "width": "100%",
-                "backgroundColor": "white",
-            },
-        },
         html.div(
-            {
-                "style": {
-                    "position": "absolute",
-                    "backgroundColor": "red",
-                    "borderRadius": "50%",
-                    "width": "20px",
-                    "height": "20px",
-                    "left": "-10px",
-                    "top": "-10px",
-                    "transform": f"translate({position['x']}px, {position['y']}px)",
-                },
+            style={
+                "position": "absolute",
+                "background_color": "red",
+                "border_radius": "50%",
+                "width": "20px",
+                "height": "20px",
+                "left": "-10px",
+                "top": "-10px",
+                "transform": f"translate({position['x']}px, {position['y']}px)",
             }
         ),
+        on_pointer_move=handle_pointer_move,
+        style={
+            "position": "relative",
+            "height": "200px",
+            "width": "100%",
+            "background_color": "white",
+        },
     )