add element and component identity

At the moment, whenever a particular branch of a layout is
updated, all the state (i.e. hooks and event handlers) that
live within that branch are thrown away and reconstructed.
Given IDOM’s current implementation for Layout this is
unavoidable. To resolve this issue, we need to add a concept
of “keys” which can be used to indicate the identity of an
element within the layout structure. For example, if you have
a list of elements that get re-ordered when a button is
pressed, their state should be preserved, and reassigned to
their new location in the layout.

By default React requires keys to be used to communicate
element identity whenever the order or number of simbling
elements can change. While there are clear performance
benefits for adhering to this stipulation, it’s often
confusing for new developers. React has the further advantage
of the JSX syntax, which makes it easier for the program to
determine exactly when keys must be supplied by the user. To
make the experience for new users simpler, and due to a lack
of inforcement via JSX, IDOM will be to assume that any
element without a key is new. Thus, for IDOM, keys will
primarilly be a tool for optimization rather than a functional
requirement.

Author: rmorshea

docs/source/core-concepts.rst

@@ -85,10 +85,10 @@ which we can re-render and see what changed:
             [f"Click count: {count}"],
         )
 
-    async with idom.Layout(ClickCount(key="test-component")) as layout:
+    async with idom.Layout(ClickCount()) as layout:
         patch_1 = await layout.render()
 
-        fake_event = LayoutEvent(target="/test-component/onClick", data=[{}])
+        fake_event = LayoutEvent(target="/onClick", data=[{}])
         await layout.dispatch(fake_event)
         patch_2 = await layout.render()
 
@@ -135,7 +135,7 @@ callback that's called by the dispatcher to events it should execute.
 
 
     async def recv():
-        event = LayoutEvent(target="/test-component/onClick", data=[{}])
+        event = LayoutEvent(target="/onClick", data=[{}])
 
         # We need this so we don't flood the render loop with events.
         # In practice this is never an issue since events won't arrive
@@ -145,9 +145,7 @@ callback that's called by the dispatcher to events it should execute.
         return event
 
 
-    async with SingleViewDispatcher(
-        idom.Layout(ClickCount(key="test-component"))
-    ) as dispatcher:
+    async with SingleViewDispatcher(idom.Layout(ClickCount())) as dispatcher:
         context = None  # see note below
         await dispatcher.run(send, recv, context)
 

requirements/check-style.txt

@@ -1,5 +1,6 @@
 black
 flake8
+flake8-print
 pep8-naming
 flake8-idom-hooks >=0.4.0
 isort >=5.7.0

src/idom/core/component.py

@@ -21,8 +21,8 @@ def component(function: ComponentRenderFunction) -> Callable[..., "Component"]:
     """
 
     @wraps(function)
-    def constructor(*args: Any, key: str = "", **kwargs: Any) -> Component:
-        return Component(function, key, args, kwargs)
+    def constructor(*args: Any, **kwargs: Any) -> Component:
+        return Component(function, args, kwargs)
 
     return constructor
 
@@ -48,11 +48,10 @@ class Component(AbstractComponent):
     def __init__(
         self,
         function: ComponentRenderFunction,
-        key: str,
         args: Tuple[Any, ...],
         kwargs: Dict[str, Any],
     ) -> None:
-        self.key = key
+        self.key = kwargs.get("key", "")
         self._function = function
         self._args = args
         self._kwargs = kwargs

src/idom/core/hooks.py

@@ -1,3 +1,5 @@
+from __future__ import annotations
+
 import asyncio
 from logging import getLogger
 from threading import get_ident as get_thread_id
@@ -20,6 +22,7 @@
 
 from typing_extensions import Protocol
 
+import idom
 from idom.utils import Ref
 
 from .component import AbstractComponent
@@ -384,10 +387,10 @@ class LifeCycleHook:
     def __init__(
         self,
         component: AbstractComponent,
-        schedule_render: Callable[[AbstractComponent], None],
+        layout: idom.core.layout.Layout,
     ) -> None:
         self.component = component
-        self._schedule_render_callback = schedule_render
+        self._schedule_render_callback = layout.update
         self._schedule_render_later = False
         self._is_rendering = False
         self._rendered_atleast_once = False