revert #841 (#919)

* revert 764a5a8

- but preserve ability to declare attributes with snake_case
- move 'key' to be an attribute rather than keyword argument
  in constructor + make auto converter for this change based
  on the one used for the "new" `*args` and `**kwargs`
  syntax we are reverting.

* add key rewrite script

* changelog

* fix types

* apply rewrites

* add custom vdom constructor decorator

* change to snake

* fix err msg

* cast keys to strings

* make pub

* fix dashed html attrs

* rename to rewrite-keys

* fix types

* allow ints in vdom spec for keys

* fix types

* camelCase to snake_case + rewrite util

* fix types

* get cov

* fix style

Author: rmorshea

.pre-commit-config.yaml

@@ -1,14 +1,14 @@
 repos:
   - repo: https://github.com/ambv/black
-    rev: 22.6.0
+    rev: 23.1.0
     hooks:
       - id: black
   - repo: https://github.com/pycqa/isort
-    rev: 5.6.3
+    rev: 5.12.0
     hooks:
       - id: isort
         name: isort
   - repo: https://github.com/pre-commit/mirrors-prettier
-    rev: "v2.5.1"
+    rev: v2.7.1
     hooks:
       - id: prettier

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(text, class_name="printout") if text else idom.html.div()
+        return idom.html.pre({"class": "printout"}, text) 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, cast
+from typing import Any, Dict, cast
 
 from docutils import nodes
 from docutils.nodes import Node
@@ -30,6 +30,7 @@ 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):
@@ -66,7 +67,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

@@ -23,7 +23,15 @@ more info, see the :ref:`Contributor Guide <Creating a Changelog Entry>`.
 Unreleased
 ----------
 
-No changes.
+**Changed**
+
+- :pull:`919` - Reverts :pull:`841` as per the conclusion in :discussion:`916`. but
+  preserves the ability to declare attributes with snake_case.
+
+**Deprecated**
+
+- :pull:`919` - Declaration of keys via keywork arguments in standard elements. A script
+  has been added to automatically convert old usages where possible.
 
 
 v1.0.0-a3

docs/source/about/changelog.rst

@@ -25,10 +25,10 @@ def handle_click(event):
     url = sculpture["url"]
 
     return html.div(
-        html.button("Next", on_click=handle_click),
+        html.button({"on_click": handle_click}, "Next"),
         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("Next", on_click=handle_next_click),
+        html.button({"on_click": handle_next_click}, "Next"),
         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(
+                {"on_click": handle_more_click},
                 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(Gallery(), style={"width": "50%", "float": "left"}),
-        html.section(Gallery(), style={"width": "50%", "float": "left"}),
+        html.section({"style": {"width": "50%", "float": "left"}}, Gallery()),
+        html.section({"style": {"width": "50%", "float": "left"}}, Gallery()),
     )
 
 

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("Next", on_click=handle_next_click),
+        html.button({"on_click": handle_next_click}, "Next"),
         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(
+                {"on_click": handle_more_click},
                 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("Next", on_click=handle_click),
+        html.button({"on_click": handle_click}, "Next"),
         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,24 +26,29 @@ def handle_click(event):
         return handle_click
 
     return html.div(
-        html.button("add term", on_click=handle_add_click),
+        html.button({"on_click": handle_add_click}, "add term"),
         html.label(
             "Term: ",
-            html.input(value=term_to_add, on_change=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, on_change=handle_definition_to_add_change
+                {
+                    "value": definition_to_add,
+                    "on_change": handle_definition_to_add_change,
+                }
             ),
         ),
         html.hr(),
         [
             html.div(
-                html.button("delete term", on_click=make_delete_click_handler(term)),
+                {"key": term},
+                html.button(
+                    {"on_click": make_delete_click_handler(term)}, "delete term"
+                ),
                 html.dt(term),
                 html.dd(definition),
-                key=term,
             )
             for term, definition in all_terms.items()
         ],

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

@@ -23,15 +23,19 @@ def handle_email_change(event):
     return html.div(
         html.label(
             "First name: ",
-            html.input(value=person["first_name"], on_change=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"], on_change=handle_last_name_change),
+            html.input(
+                {"value": person["last_name"], "on_change": handle_last_name_change}
+            ),
         ),
         html.label(
             "Email: ",
-            html.input(value=person["email"], on_change=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/dict_update.py

@@ -16,9 +16,9 @@ def handle_click(event):
 
     return html.div(
         html.h1("Inspiring sculptors:"),
-        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]),
+        html.input({"value": artist_to_add, "on_change": handle_change}),
+        html.button({"on_click": handle_click}, "add"),
+        html.ul([html.li({"key": name}, name) for name in artists]),
     )
 
 

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

@@ -15,9 +15,9 @@ def handle_reverse_click(event):
 
     return html.div(
         html.h1("Inspiring sculptors:"),
-        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]),
+        html.button({"on_click": handle_sort_click}, "sort"),
+        html.button({"on_click": handle_reverse_click}, "reverse"),
+        html.ul([html.li({"key": name}, name) for name in artists]),
     )
 
 

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

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

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

@@ -15,9 +15,9 @@ def handle_click(event):
     return html.ul(
         [
             html.li(
+                {"key": index},
                 count,
-                html.button("+1", on_click=make_increment_click_handler(index)),
-                key=index,
+                html.button({"on_click": make_increment_click_handler(index)}, "+1"),
             )
             for index, count in enumerate(counters)
         ]

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

@@ -16,25 +16,29 @@ async def handle_pointer_move(event):
         )
 
     return html.div(
+        {
+            "on_pointer_move": handle_pointer_move,
+            "style": {
+                "position": "relative",
+                "height": "200px",
+                "width": "100%",
+                "backgroundColor": "white",
+            },
+        },
         html.div(
-            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)",
+            {
+                "style": {
+                    "position": "absolute",
+                    "backgroundColor": "red",
+                    "borderRadius": "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.py

@@ -14,25 +14,29 @@ def handle_pointer_move(event):
         position["y"] = event["clientY"] - outer_div_bounds["y"]
 
     return html.div(
+        {
+            "on_pointer_move": handle_pointer_move,
+            "style": {
+                "position": "relative",
+                "height": "200px",
+                "width": "100%",
+                "backgroundColor": "white",
+            },
+        },
         html.div(
-            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)",
+            {
+                "style": {
+                    "position": "absolute",
+                    "backgroundColor": "red",
+                    "borderRadius": "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",
-        },
     )