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