misc fixes

Author: rmorshea

docs/source/escape-hatches/_examples/super_simple_chart/app.py

@@ -4,7 +4,13 @@
 
 
 file = Path(__file__).parent / "super-simple-chart.js"
-ssc = web.module_from_file("super-simple-chart", file, fallback="⌛")
+ssc = web.module_from_file(
+    "super-simple-chart",
+    file,
+    fallback="⌛",
+    # normally this option is not required
+    replace_existing=True,
+)
 SuperSimpleChart = web.export(ssc, "SuperSimpleChart")
 
 

docs/source/reference-material/_examples/matplotlib_plot.py

@@ -71,6 +71,7 @@ def poly_coef_input(index, callback):
                 "onChange": callback,
             },
         ),
+        key=index,
     )
 
 

docs/source/reference-material/_examples/snake_game.py

@@ -18,7 +18,12 @@ def GameView():
     game_state, set_game_state = idom.hooks.use_state(GameState.init)
 
     if game_state == GameState.play:
-        return GameLoop(grid_size=6, block_scale=50, set_game_state=set_game_state)
+        return GameLoop(
+            grid_size=6,
+            block_scale=50,
+            set_game_state=set_game_state,
+            key="game loop",
+        )
 
     start_button = idom.html.button(
         {"onClick": lambda event: set_game_state(GameState.play)},
@@ -40,7 +45,12 @@ def GameView():
         """
     )
 
-    return idom.html.div({"className": "snake-game-menu"}, menu_style, menu)
+    return idom.html.div(
+        {"className": "snake-game-menu"},
+        menu_style,
+        menu,
+        key="menu",
+    )
 
 
 class Direction(enum.Enum):
@@ -154,14 +164,18 @@ def create_grid(grid_size, block_scale):
         [
             idom.html.div(
                 {"style": {"height": f"{block_scale}px"}},
-                [create_grid_block("black", block_scale) for i in range(grid_size)],
+                [
+                    create_grid_block("black", block_scale, key=i)
+                    for i in range(grid_size)
+                ],
+                key=i,
             )
             for i in range(grid_size)
         ],
     )
 
 
-def create_grid_block(color, block_scale):
+def create_grid_block(color, block_scale, key):
     return idom.html.div(
         {
             "style": {
@@ -170,7 +184,8 @@ def create_grid_block(color, block_scale):
                 "backgroundColor": color,
                 "outline": "1px solid grey",
             }
-        }
+        },
+        key=key,
     )
 
 

src/idom/core/proto.py

@@ -22,11 +22,14 @@
 """Simple function returning a new component"""
 
 
+Key = Union[str, int]
+
+
 @runtime_checkable
 class ComponentType(Protocol):
     """The expected interface for all component-like objects"""
 
-    key: Optional[Any]
+    key: Key | None
     """An identifier which is unique amongst a component's immediate siblings"""
 
     def render(self) -> VdomDict:
@@ -74,7 +77,7 @@ def __exit__(
 
 
 class _VdomDictOptional(TypedDict, total=False):
-    key: str
+    key: Key | None
     children: Sequence[
         # recursive types are not allowed yet:
         # https://github.com/python/mypy/issues/731
@@ -101,7 +104,7 @@ class ImportSourceDict(TypedDict):
 
 
 class _OptionalVdomJson(TypedDict, total=False):
-    key: str
+    key: Key
     error: str
     children: List[Any]
     attributes: Dict[str, Any]

src/idom/core/vdom.py

@@ -129,7 +129,7 @@ def is_vdom(value: Any) -> bool:
 def vdom(
     tag: str,
     *attributes_and_children: VdomAttributesAndChildren,
-    key: str = "",
+    key: str | int | None = None,
     event_handlers: Optional[EventHandlerMapping] = None,
     import_source: Optional[ImportSourceDict] = None,
 ) -> VdomDict:
@@ -169,7 +169,7 @@ def vdom(
     if event_handlers:
         model["eventHandlers"] = event_handlers
 
-    if key != "":
+    if key is not None:
         model["key"] = key
 
     if import_source is not None:
@@ -182,7 +182,7 @@ class _VdomDictConstructor(Protocol):
     def __call__(
         self,
         *attributes_and_children: VdomAttributesAndChildren,
-        key: str = ...,
+        key: str | int | None = ...,
         event_handlers: Optional[EventHandlerMapping] = ...,
         import_source: Optional[ImportSourceDict] = ...,
     ) -> VdomDict:
@@ -200,7 +200,7 @@ def make_vdom_constructor(
 
     def constructor(
         *attributes_and_children: VdomAttributesAndChildren,
-        key: str = "",
+        key: str | int | None = None,
         event_handlers: Optional[EventHandlerMapping] = None,
         import_source: Optional[ImportSourceDict] = None,
     ) -> VdomDict:
@@ -333,7 +333,11 @@ def _is_single_child(value: Any) -> bool:
                     logger.error(f"Key not specified for child in list {child}")
                 elif isinstance(child, Mapping) and "key" not in child:
                     # remove 'children' to reduce log spam
-                    child_copy = {**child, "children": ...}
+                    child_copy = {**child, "children": _EllipsisRepr()}
                     logger.error(f"Key not specified for child in list {child_copy}")
 
         return False
+
+    class _EllipsisRepr:
+        def __repr__(self) -> str:
+            return "..."

src/idom/web/module.py

@@ -195,8 +195,8 @@ def module_from_file(
             Using this option has negative performance consequences since all DOM
             elements must be changed on each render. See :issue:`461` for more info.
         replace_existing:
-            Whether to replace the source for a module with the same name if
-            if already exists. Otherwise raise an error.
+            Whether to replace the source for a module with the same name if it already
+            exists. Otherwise raise an error.
     """
     source_file = Path(file)
     target_file = _web_module_path(name)