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"];