Rewrite style props (#936)

* rewrite style prop + other fixes

* apply rewrites

* changelog

* remove extra print

* minor annotation improvement

* fix class_name

* more helpful error message

* fix types

* fix typo

Author: rmorshea

docs/examples.py

@@ -122,7 +122,9 @@ 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({"class_name": "printout"}, text) if text else idom.html.div()
+        )
 
     return Wrapper()
 

docs/source/_exts/custom_autosectionlabel.py

@@ -4,8 +4,10 @@
 https://github.com/sphinx-doc/sphinx/blob/f9968594206e538f13fa1c27c065027f10d4ea27/LICENSE
 """
 
+from __future__ import annotations
+
 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 +32,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 +68,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/about/changelog.rst

@@ -23,7 +23,9 @@ more info, see the :ref:`Contributor Guide <Creating a Changelog Entry>`.
 Unreleased
 ----------
 
-No changes.
+**Fixed**
+
+- :pull:`936` - remaining issues from :pull:`934`
 
 
 v1.0.0-a5

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

@@ -22,15 +22,15 @@ async def handle_pointer_move(event):
                 "position": "relative",
                 "height": "200px",
                 "width": "100%",
-                "backgroundColor": "white",
+                "background_color": "white",
             },
         },
         html.div(
             {
                 "style": {
                     "position": "absolute",
-                    "backgroundColor": "red",
-                    "borderRadius": "50%",
+                    "background_color": "red",
+                    "border_radius": "50%",
                     "width": "20px",
                     "height": "20px",
                     "left": "-10px",

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

@@ -20,15 +20,15 @@ def handle_pointer_move(event):
                 "position": "relative",
                 "height": "200px",
                 "width": "100%",
-                "backgroundColor": "white",
+                "background_color": "white",
             },
         },
         html.div(
             {
                 "style": {
                     "position": "absolute",
-                    "backgroundColor": "red",
-                    "borderRadius": "50%",
+                    "background_color": "red",
+                    "border_radius": "50%",
                     "width": "20px",
                     "height": "20px",
                     "left": "-10px",

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

@@ -24,7 +24,7 @@ def handle_click(event):
                     "style": {
                         "height": "30px",
                         "width": "30px",
-                        "backgroundColor": "black"
+                        "background_color": "black"
                         if index in selected_indices
                         else "white",
                         "outline": "1px solid grey",

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

@@ -21,7 +21,7 @@ def handle_click(event):
                     "style": {
                         "height": "30px",
                         "width": "30px",
-                        "backgroundColor": "black"
+                        "background_color": "black"
                         if index in selected_indices
                         else "white",
                         "outline": "1px solid grey",

docs/source/guides/adding-interactivity/multiple-state-updates/_examples/set_color_3_times.py

@@ -15,10 +15,11 @@ def handle_reset(event):
 
     return html.div(
         html.button(
-            {"on_click": handle_click, "style": {"backgroundColor": color}}, "Set Color"
+            {"on_click": handle_click, "style": {"background_color": color}},
+            "Set Color",
         ),
         html.button(
-            {"on_click": handle_reset, "style": {"backgroundColor": color}}, "Reset"
+            {"on_click": handle_reset, "style": {"background_color": color}}, "Reset"
         ),
     )
 

docs/source/guides/adding-interactivity/responding-to-events/_examples/audio_player.py

@@ -10,7 +10,7 @@ def PlayDinosaurSound():
         idom.html.audio(
             {
                 "controls": True,
-                "onTimeUpdate": lambda e: set_event(e),
+                "on_time_update": lambda e: set_event(e),
                 "src": "https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3",
             }
         ),

docs/source/guides/adding-interactivity/responding-to-events/_examples/stop_event_propagation.py

@@ -10,15 +10,19 @@ def DivInDiv():
     div_in_div = html.div(
         {
             "on_click": lambda event: set_outer_count(outer_count + 1),
-            "style": {"height": "100px", "width": "100px", "backgroundColor": "red"},
+            "style": {"height": "100px", "width": "100px", "background_color": "red"},
         },
         html.div(
             {
                 "on_click": event(
                     lambda event: set_inner_count(inner_count + 1),
                     stop_propagation=stop_propagatation,
                 ),
-                "style": {"height": "50px", "width": "50px", "backgroundColor": "blue"},
+                "style": {
+                    "height": "50px",
+                    "width": "50px",
+                    "background_color": "blue",
+                },
             }
         ),
     )

docs/source/reference/_examples/character_movement/main.py

@@ -42,7 +42,7 @@ def Scene():
                 "style": {
                     "width": "200px",
                     "height": "200px",
-                    "backgroundColor": "slategray",
+                    "background_color": "slategray",
                 }
             },
             image(

docs/source/reference/_examples/click_count.py

@@ -6,8 +6,7 @@ def ClickCount():
     count, set_count = idom.hooks.use_state(0)
 
     return idom.html.button(
-        {"onClick": lambda event: set_count(count + 1)},
-        [f"Click count: {count}"],
+        {"on_click": lambda event: set_count(count + 1)}, [f"Click count: {count}"]
     )
 
 

docs/source/reference/_examples/matplotlib_plot.py

@@ -39,8 +39,8 @@ def del_input():
     return idom.html.div(
         idom.html.div(
             "add/remove term:",
-            idom.html.button({"onClick": lambda event: add_input()}, "+"),
-            idom.html.button({"onClick": lambda event: del_input()}, "-"),
+            idom.html.button({"on_click": lambda event: add_input()}, "+"),
+            idom.html.button({"on_click": lambda event: del_input()}, "-"),
         ),
         inputs,
     )
@@ -65,12 +65,7 @@ def poly_coef_input(index, callback):
             " × X",
             idom.html.sup(index),
         ),
-        idom.html.input(
-            {
-                "type": "number",
-                "onChange": callback,
-            },
-        ),
+        idom.html.input({"type": "number", "on_change": callback}),
     )
 
 

docs/source/reference/_examples/simple_dashboard.py

@@ -83,7 +83,7 @@ def update_value(value):
         set_value_callback(value)
 
     return idom.html.fieldset(
-        {"class": "number-input-container"},
+        {"class_name": "number-input-container"},
         idom.html.legend({"style": {"font-size": "medium"}}, label),
         Input(update_value, "number", value, attributes=attrs, cast=float),
         Input(update_value, "range", value, attributes=attrs, cast=float),

docs/source/reference/_examples/slideshow.py

@@ -12,7 +12,7 @@ def next_image(event):
         {
             "src": f"https://picsum.photos/id/{index}/800/300",
             "style": {"cursor": "pointer"},
-            "onClick": next_image,
+            "on_click": next_image,
         }
     )
 

docs/source/reference/_examples/snake_game.py

@@ -21,8 +21,7 @@ def GameView():
         return GameLoop(grid_size=6, block_scale=50, set_game_state=set_game_state)
 
     start_button = idom.html.button(
-        {"onClick": lambda event: set_game_state(GameState.play)},
-        "Start",
+        {"on_click": lambda event: set_game_state(GameState.play)}, "Start"
     )
 
     if game_state == GameState.won:
@@ -40,7 +39,7 @@ def GameView():
         """
     )
 
-    return idom.html.div({"className": "snake-game-menu"}, menu_style, menu)
+    return idom.html.div({"class_name": "snake-game-menu"}, menu_style, menu)
 
 
 class Direction(enum.Enum):
@@ -72,7 +71,7 @@ def on_direction_change(event):
             if direction_vector_sum != (0, 0):
                 direction.current = maybe_new_direction
 
-    grid_wrapper = idom.html.div({"onKeyDown": on_direction_change}, grid)
+    grid_wrapper = idom.html.div({"on_key_down": on_direction_change}, grid)
 
     assign_grid_block_color(grid, food, "blue")
 
@@ -149,7 +148,7 @@ def create_grid(grid_size, block_scale):
                 "grid-template-columns": f"repeat({grid_size}, {block_scale}px)",
                 "grid-template-rows": f"repeat({grid_size}, {block_scale}px)",
             },
-            "tabIndex": -1,
+            "tab_index": -1,
         },
         [
             idom.html.div(
@@ -170,11 +169,11 @@ def create_grid_block(color, block_scale, key):
             "style": {
                 "height": f"{block_scale}px",
                 "width": f"{block_scale}px",
-                "backgroundColor": color,
+                "background_color": color,
                 "outline": "1px solid grey",
             },
             "key": key,
-        },
+        }
     )
 
 

docs/source/reference/_examples/todo.py

@@ -17,10 +17,10 @@ async def remove_task(event, index=index):
             set_items(items[:index] + items[index + 1 :])
 
         task_text = idom.html.td(idom.html.p(text))
-        delete_button = idom.html.td({"onClick": remove_task}, idom.html.button(["x"]))
+        delete_button = idom.html.td({"on_click": remove_task}, idom.html.button(["x"]))
         tasks.append(idom.html.tr(task_text, delete_button))
 
-    task_input = idom.html.input({"onKeyDown": add_new_task})
+    task_input = idom.html.input({"on_key_down": add_new_task})
     task_table = idom.html.table(tasks)
 
     return idom.html.div(

docs/source/reference/_examples/use_reducer_counter.py

@@ -17,9 +17,9 @@ def Counter():
     count, dispatch = idom.hooks.use_reducer(reducer, 0)
     return idom.html.div(
         f"Count: {count}",
-        idom.html.button({"onClick": lambda event: dispatch("reset")}, "Reset"),
-        idom.html.button({"onClick": lambda event: dispatch("increment")}, "+"),
-        idom.html.button({"onClick": lambda event: dispatch("decrement")}, "-"),
+        idom.html.button({"on_click": lambda event: dispatch("reset")}, "Reset"),
+        idom.html.button({"on_click": lambda event: dispatch("increment")}, "+"),
+        idom.html.button({"on_click": lambda event: dispatch("decrement")}, "-"),
     )
 
 

docs/source/reference/_examples/use_state_counter.py

@@ -15,9 +15,9 @@ def Counter():
     count, set_count = idom.hooks.use_state(initial_count)
     return idom.html.div(
         f"Count: {count}",
-        idom.html.button({"onClick": lambda event: set_count(initial_count)}, "Reset"),
-        idom.html.button({"onClick": lambda event: set_count(increment)}, "+"),
-        idom.html.button({"onClick": lambda event: set_count(decrement)}, "-"),
+        idom.html.button({"on_click": lambda event: set_count(initial_count)}, "Reset"),
+        idom.html.button({"on_click": lambda event: set_count(increment)}, "+"),
+        idom.html.button({"on_click": lambda event: set_count(decrement)}, "-"),
     )
 
 

src/idom/_console/ast_utils.py

@@ -101,10 +101,9 @@ def find_element_constructor_usages(
             continue
 
         func = node.func
-        if (
-            isinstance(func, ast.Attribute)
-            and isinstance(func.value, ast.Name)
-            and func.value.id == "html"
+        if isinstance(func, ast.Attribute) and (
+            (isinstance(func.value, ast.Name) and func.value.id == "html")
+            or (isinstance(func.value, ast.Attribute) and func.value.attr == "html")
         ):
             name = func.attr
         elif isinstance(func, ast.Name):