Unify vdom interface (#841)

* begin vdom interface unification

* turn script into cli app

* misc fixes

* convert vdom func usages too

* minor fix

* start fixes in source/tests/docs

* more fixes

* correct more tests

* improve warning

* improve coverage

* fix typo

* remove console logs

* Python<3.10 compat

* more cov

* skip python<3.9

* misc fixes

* better skip

* misc typing improvements + fix ico path

* error if no files

* test py 3.11

* warn on dir does not exist

* fix tests

* fix old class_name typos

* remove unused var

Author: rmorshea

.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/_custom_js/package-lock.json

@@ -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/_exts/custom_autosectionlabel.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/adding_state_variable/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/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 ""),
         ),

docs/source/guides/adding-interactivity/components-with-state/_examples/multiple_state_variables/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/components-with-state/_examples/when_variables_are_not_enough/main.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_remove.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']}"),
     )