more fixes

Author: rmorshea

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

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

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

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

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

@@ -23,7 +23,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

@@ -20,7 +20,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,9 +15,9 @@ def handle_reset(event):
 
     return html.div(
         html.button(
-            "Set Color", on_click=handle_click, style={"backgroundColor": color}
+            "Set Color", on_click=handle_click, style={"background_color": color}
         ),
-        html.button("Reset", on_click=handle_reset, style={"backgroundColor": color}),
+        html.button("Reset", on_click=handle_reset, style={"background_color": color}),
     )
 
 

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

@@ -13,10 +13,10 @@ def DivInDiv():
                 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"},
         ),
         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"},
     )
 
     return html.div(

docs/source/reference/_examples/matplotlib_plot.py

@@ -61,7 +61,7 @@ def poly_coef_input(index, callback):
         idom.html.label("C", idom.html.sub(index), " × X", idom.html.sup(index)),
         idom.html.input(type="number", on_change=callback),
         key=index,
-        style={"margin-top": "5px"},
+        style={"margin_top": "5px"},
     )
 
 

docs/source/reference/_examples/simple_dashboard.py

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

docs/source/reference/_examples/snake_game.py

@@ -154,9 +154,9 @@ def create_grid(grid_size, block_scale):
             "width": f"{block_scale * grid_size}px",
             "cursor": "pointer",
             "display": "grid",
-            "grid-gap": 0,
-            "grid-template-columns": f"repeat({grid_size}, {block_scale}px)",
-            "grid-template-rows": f"repeat({grid_size}, {block_scale}px)",
+            "grid_gap": 0,
+            "grid_template_columns": f"repeat({grid_size}, {block_scale}px)",
+            "grid_template_rows": f"repeat({grid_size}, {block_scale}px)",
         },
         tab_index=-1,
     )
@@ -168,7 +168,7 @@ 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",
         },
     )
@@ -177,7 +177,7 @@ def create_grid_block(color, block_scale, key):
 def assign_grid_block_color(grid, point, color):
     x, y = point
     block = grid["children"][x]["children"][y]
-    block["attributes"]["style"]["backgroundColor"] = color
+    block["attributes"]["style"]["background_color"] = color
 
 
 idom.run(GameView)

src/client/packages/idom-client-react/src/element-utils.js

@@ -26,9 +26,11 @@ export function createElementAttributes(model, sendEvent) {
     }
   }
 
-  return Object.fromEntries(
-    Object.entries(attributes).map(([key, value]) => [snakeToCamel(key), value])
+  const attrs = Object.fromEntries(
+    Object.entries(attributes).map(normalizeAttribute)
   );
+  console.log(attrs);
+  return attrs;
 }
 
 function createEventHandler(sendEvent, eventSpec) {
@@ -53,12 +55,32 @@ function createEventHandler(sendEvent, eventSpec) {
   };
 }
 
-function snakeToCamel(str) {
-  if (str.startsWith("data_") || str.startsWith("aria_")) {
-    return str.replace("_", "-");
+function normalizeAttribute([key, value]) {
+  let normKey = key;
+  let normValue = value;
+
+  if (key === "style" && typeof value === "object") {
+    normValue = Object.fromEntries(
+      Object.entries(value).map(([k, v]) => [snakeToCamel(k), v])
+    );
+  } else if (
+    key.startsWith("data_") ||
+    key.startsWith("aria_") ||
+    DASHED_HTML_ATTRS.includes(key)
+  ) {
+    normKey = key.replace("_", "-");
   } else {
-    return str
-      .toLowerCase()
-      .replace(/([-_][a-z])/g, (group) => group.toUpperCase().replace("_", ""));
+    normKey = snakeToCamel(key);
   }
+  return [normKey, normValue];
 }
+
+function snakeToCamel(str) {
+  return str.replace(/([_][a-z])/g, (group) =>
+    group.toUpperCase().replace("_", "")
+  );
+}
+
+// see list of HTML attributes with dashes in them:
+// https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes#attribute_list
+const DASHED_HTML_ATTRS = ["accept_charset", "http_equiv"];

src/idom/_option.py

@@ -1,12 +1,12 @@
 from __future__ import annotations
 
 import os
-from inspect import currentframe
 from logging import getLogger
-from types import FrameType
 from typing import Any, Callable, Generic, Iterator, TypeVar, cast
 from warnings import warn
 
+from idom._warnings import warn
+
 
 _O = TypeVar("_O")
 logger = getLogger(__name__)
@@ -129,25 +129,5 @@ def current(self) -> _O:
         warn(
             self._deprecation_message,
             DeprecationWarning,
-            stacklevel=_frame_depth_in_module() + 1,
         )
         return super().current
-
-
-def _frame_depth_in_module() -> int:
-    depth = 0
-    for frame in _iter_frames(2):
-        if frame.f_globals.get("__name__") != __name__:
-            break
-        depth += 1
-    return depth
-
-
-def _iter_frames(index: int = 1) -> Iterator[FrameType]:
-    frame = currentframe()
-    while frame is not None:
-        if index == 0:
-            yield frame
-        else:
-            index -= 1
-        frame = frame.f_back

src/idom/_warnings.py

@@ -0,0 +1,31 @@
+from functools import wraps
+from inspect import currentframe
+from types import FrameType
+from typing import Any, Iterator
+from warnings import warn as _warn
+
+
+@wraps(_warn)
+def warn(*args: Any, **kwargs: Any) -> Any:
+    # warn at call site outside of IDOM
+    _warn(*args, stacklevel=_frame_depth_in_module() + 1, **kwargs)
+
+
+def _frame_depth_in_module() -> int:
+    depth = 0
+    for frame in _iter_frames(2):
+        module_name = frame.f_globals.get("__name__")
+        if not module_name or not module_name.startswith("idom."):
+            break
+        depth += 1
+    return depth
+
+
+def _iter_frames(index: int = 1) -> Iterator[FrameType]:
+    frame = currentframe()
+    while frame is not None:
+        if index == 0:
+            yield frame
+        else:
+            index -= 1
+        frame = frame.f_back

src/idom/core/vdom.py

@@ -2,10 +2,10 @@
 
 import logging
 from typing import Any, Mapping, cast
-from warnings import warn
 
 from fastjsonschema import compile as compile_json_schema
 
+from idom._warnings import warn
 from idom.config import IDOM_DEBUG_MODE
 from idom.core.events import (
     EventHandler,
@@ -15,6 +15,7 @@
 from idom.core.types import (
     ComponentType,
     EventHandlerDict,
+    EventHandlerMapping,
     EventHandlerType,
     ImportSourceDict,
     Key,
@@ -159,11 +160,13 @@ def vdom(
         if isinstance(child, dict) and "tagName" not in child:
             warn(
                 (
-                    "Element constructor signatures have changed! A CLI tool for "
-                    "automatically updating code to the latest API has been provided "
-                    "with this release of IDOM (e.g. 'idom update-html-usages'). For "
-                    "start a discussion if you need help transitioning to this new "
-                    "interface: https://github.com/idom-team/idom/discussions/new?category=question"
+                    "Element constructor signatures have changed! This will be an "
+                    "error in a future release. A CLI tool for automatically updating "
+                    "code to the latest API has been provided with this release of "
+                    "IDOM (e.g. 'idom update-html-usages'). However, it may not "
+                    "resolve all issues arrising from this change. Start a discussion "
+                    "if you need help transitioning to this new interface: "
+                    "https://github.com/idom-team/idom/discussions/new?category=question"
                 ),
                 DeprecationWarning,
             )
@@ -194,19 +197,62 @@ def with_import_source(element: VdomDict, import_source: ImportSourceDict) -> Vd
     return {**element, "importSource": import_source}
 
 
-def make_vdom_constructor(tag: str, allow_children: bool = True) -> VdomDictConstructor:
+def with_event_handlers(
+    element: VdomDict, event_handlers: EventHandlerMapping
+) -> VdomDict:
+    if "eventHandlers" in element:
+        old_handlers = element["eventHandlers"]
+        new_handlers = {
+            merge_event_handlers((old_handlers[k], event_handlers[h]))
+            if k in old_handlers
+            else h
+            for k, h in event_handlers
+        }
+        return {**element, "eventHandlers": new_handlers}
+    else:
+        return {**element, "eventHandlers": dict(event_handlers)}
+
+
+def make_vdom_constructor(
+    tag: str,
+    allow_children: bool = True,
+    import_source: ImportSourceDict | None = None,
+    event_handlers: EventHandlerMapping | None = None,
+) -> VdomDictConstructor:
     """Return a constructor for VDOM dictionaries with the given tag name.
 
     The resulting callable will have the same interface as :func:`vdom` but without its
     first ``tag`` argument.
     """
 
-    def constructor(
-        *children: VdomChild, key: Key | None = None, **attributes: Any
-    ) -> VdomDict:
-        if not allow_children and children:
-            raise TypeError(f"{tag!r} nodes cannot have children.")
-        return vdom(tag, *children, key=key, **attributes)
+    if import_source is not None:
+
+        def constructor(
+            *children: VdomChild, key: Key | None = None, **attributes: Any
+        ) -> VdomDict:
+            if not allow_children and children:
+                raise TypeError(f"{tag!r} nodes cannot have children.")
+            return with_import_source(
+                vdom(tag, *children, key=key, **attributes), import_source
+            )
+
+    else:
+
+        def constructor(
+            *children: VdomChild, key: Key | None = None, **attributes: Any
+        ) -> VdomDict:
+            if not allow_children and children:
+                raise TypeError(f"{tag!r} nodes cannot have children.")
+            return vdom(tag, *children, key=key, **attributes)
+
+    if event_handlers:
+        _constructor = constructor
+
+        def constructor(
+            *children: VdomChild, key: Key | None = None, **attributes: Any
+        ) -> VdomDict:
+            model = _constructor(*children, key=key, **attributes)
+            return with_event_handlers(model, event_handlers)
 
     # replicate common function attributes
     constructor.__name__ = tag