allow elements with the same key to change type

Author: rmorshea

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

@@ -18,12 +18,7 @@ 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,
-            key="game loop",
-        )
+        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)},
@@ -45,12 +40,7 @@ def GameView():
         """
     )
 
-    return idom.html.div(
-        {"className": "snake-game-menu"},
-        menu_style,
-        menu,
-        key="menu",
-    )
+    return idom.html.div({"className": "snake-game-menu"}, menu_style, menu)
 
 
 class Direction(enum.Enum):

src/idom/core/layout.py

@@ -271,10 +271,10 @@ def _render_model_attributes(
 
         model_event_handlers = new_state.model.current["eventHandlers"] = {}
         for event, handler in handlers_by_event.items():
-            target = old_state.targets_by_event.get(
-                event,
-                uuid4().hex if handler.target is None else handler.target,
-            )
+            if event in old_state.targets_by_event:
+                target = old_state.targets_by_event[event]
+            else:
+                target = uuid4().hex if handler.target is None else handler.target
             new_state.targets_by_event[event] = target
             self._event_handlers[target] = handler
             model_event_handlers[event] = {
@@ -350,6 +350,8 @@ def _render_model_children(
                         key,
                     )
                 else:
+                    if hasattr(old_child_state, "life_cycle_hook"):
+                        old_child_state.life_cycle_state.hook.component_will_unmount()
                     new_child_state = _update_element_model_state(
                         old_child_state,
                         new_state,
@@ -374,6 +376,7 @@ def _render_model_children(
                         new_state,
                         index,
                         child,
+                        self._rendering_queue.put,
                     )
                 self._render_component(old_child_state, new_child_state, child)
             else:
@@ -459,7 +462,6 @@ def _make_component_model_state(
 
 
 def _copy_component_model_state(old_model_state: _ModelState) -> _ModelState:
-
     # use try/except here because not having a parent is rare (only the root state)
     try:
         parent: Optional[_ModelState] = old_model_state.parent
@@ -483,15 +485,8 @@ def _update_component_model_state(
     new_parent: _ModelState,
     new_index: int,
     new_component: ComponentType,
+    schedule_render: Callable[[_LifeCycleStateId], None],
 ) -> _ModelState:
-    try:
-        old_life_cycle_state = old_model_state.life_cycle_state
-    except AttributeError:
-        raise ValueError(
-            f"Failed to render layout at {old_model_state.patch_path!r} with key "
-            f"{old_model_state.key!r} - prior element with this key wasn't a component"
-        )
-
     return _ModelState(
         parent=new_parent,
         index=new_index,
@@ -500,7 +495,11 @@ def _update_component_model_state(
         patch_path=old_model_state.patch_path,
         children_by_key={},
         targets_by_event={},
-        life_cycle_state=_update_life_cycle_state(old_life_cycle_state, new_component),
+        life_cycle_state=(
+            old_model_state.life_cycle_state
+            if hasattr(old_model_state, "life_cycle_hook")
+            else _make_life_cycle_state(new_component, schedule_render)
+        ),
     )
 
 
@@ -525,12 +524,6 @@ def _update_element_model_state(
     new_parent: _ModelState,
     new_index: int,
 ) -> _ModelState:
-    if hasattr(old_model_state, "life_cycle_state"):
-        raise ValueError(
-            f"Failed to render layout at {old_model_state.patch_path!r} with key "
-            f"{old_model_state.key!r} - prior element with this key was a component"
-        )
-
     return _ModelState(
         parent=new_parent,
         index=new_index,