Remove key from VdomDict

Author: Archmonger

docs/source/about/changelog.rst

@@ -39,6 +39,7 @@ Unreleased
 
 **Changed**
 
+- :pull:`1284` - The ``key`` attribute is now stored within ``attributes`` in the VDOM spec.
 - :pull:`1251` - Substitute client-side usage of ``react`` with ``preact``.
 - :pull:`1239` - Script elements no longer support behaving like effects. They now strictly behave like plain HTML scripts.
 - :pull:`1255` - The ``reactpy.html`` module has been modified to allow for auto-creation of any HTML nodes. For example, you can create a ``<data-table>`` element by calling ``html.data_table()``.

src/js/packages/@reactpy/client/src/components.tsx

@@ -67,7 +67,7 @@ function StandardElement({ model }: { model: ReactPyVdom }) {
     model.tagName === "" ? Fragment : model.tagName,
     createAttributes(model, client),
     ...createChildren(model, (child) => {
-      return <Element model={child} key={child.key} />;
+      return <Element model={child} key={child.attributes?.key} />;
     }),
   );
 }
@@ -100,7 +100,7 @@ function UserInputElement({ model }: { model: ReactPyVdom }): JSX.Element {
     // overwrite
     { ...props, value },
     ...createChildren(model, (child) => (
-      <Element model={child} key={child.key} />
+      <Element model={child} key={child.attributes?.key} />
     )),
   );
 }
@@ -135,7 +135,7 @@ function ScriptElement({ model }: { model: ReactPyVdom }) {
     return () => {
       ref.current?.removeChild(scriptElement);
     };
-  }, [model.key]);
+  }, [model.attributes?.key]);
 
   return <div ref={ref} />;
 }

src/js/packages/@reactpy/client/src/types.ts

@@ -48,7 +48,6 @@ export type ReactPyComponent = ComponentType<{ model: ReactPyVdom }>;
 
 export type ReactPyVdom = {
   tagName: string;
-  key?: string;
   attributes?: { [key: string]: string };
   children?: (ReactPyVdom | string)[];
   error?: string;

src/reactpy/_html.py

@@ -6,7 +6,6 @@
 from reactpy.core.vdom import Vdom
 from reactpy.types import (
     EventHandlerDict,
-    Key,
     VdomAttributes,
     VdomChild,
     VdomChildren,
@@ -100,29 +99,26 @@
 def _fragment(
     attributes: VdomAttributes,
     children: Sequence[VdomChild],
-    key: Key | None,
     event_handlers: EventHandlerDict,
 ) -> VdomDict:
     """An HTML fragment - this element will not appear in the DOM"""
-    attributes.pop("key", None)
-    if attributes or event_handlers:
+    if any(k != "key" for k in attributes) or event_handlers:
         msg = "Fragments cannot have attributes besides 'key'"
         raise TypeError(msg)
     model = VdomDict(tagName="")
 
     if children:
         model["children"] = children
 
-    if key is not None:
-        model["key"] = key
+    if attributes:
+        model["attributes"] = attributes
 
     return model
 
 
 def _script(
     attributes: VdomAttributes,
     children: Sequence[VdomChild],
-    key: Key | None,
     event_handlers: EventHandlerDict,
 ) -> VdomDict:
     """Create a new `<script> <https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script>`__ element.
@@ -148,6 +144,8 @@ def _script(
         msg = "'script' elements do not support event handlers"
         raise ValueError(msg)
 
+    key = attributes.get("key")
+
     if children:
         if len(children) > 1:
             msg = "'script' nodes may have, at most, one child."
@@ -165,7 +163,9 @@ def _script(
             key = attributes["src"]
 
     if key is not None:
-        model["key"] = key
+        if "attributes" not in model:
+            model["attributes"] = {}
+        model["attributes"]["key"] = key
 
     return model
 

src/reactpy/core/layout.py

@@ -303,8 +303,9 @@ async def _render_model(
         except Exception as e:  # nocov
             msg = f"Expected a VDOM element dict, not {raw_model}"
             raise ValueError(msg) from e
-        if "key" in raw_model:
-            new_state.key = new_state.model.current["key"] = raw_model["key"]
+        key = raw_model.get("attributes", {}).get("key")
+        if key is not None:
+            new_state.key = key
         if "importSource" in raw_model:
             new_state.model.current["importSource"] = raw_model["importSource"]
         self._render_model_attributes(old_state, new_state, raw_model)
@@ -726,7 +727,7 @@ def _get_children_info(
             continue
         elif isinstance(child, dict):
             child_type = _DICT_TYPE
-            key = child.get("key")
+            key = child.get("attributes", {}).get("key")
         elif isinstance(child, Component):
             child_type = _COMPONENT_TYPE
             key = child.key

src/reactpy/core/vdom.py

@@ -41,7 +41,6 @@
             "type": "object",
             "properties": {
                 "tagName": {"type": "string"},
-                "key": {"type": ["string", "number", "null"]},
                 "error": {"type": "string"},
                 "children": {"$ref": "#/definitions/elementChildren"},
                 "attributes": {"type": "object"},
@@ -170,7 +169,6 @@ def __call__(
     ) -> VdomDict:
         """The entry point for the VDOM API, for example reactpy.html(<WE_ARE_HERE>)."""
         attributes, children = separate_attributes_and_children(attributes_and_children)
-        key = attributes.get("key", None)
         attributes, event_handlers, inline_javascript = (
             separate_attributes_handlers_and_inline_javascript(attributes)
         )
@@ -180,7 +178,6 @@ def __call__(
         # Run custom constructor, if defined
         if self.custom_constructor:
             result = self.custom_constructor(
-                key=key,
                 children=children,
                 attributes=attributes,
                 event_handlers=event_handlers,
@@ -189,7 +186,6 @@ def __call__(
         # Otherwise, use the default constructor
         else:
             result = {
-                **({"key": key} if key is not None else {}),
                 **({"children": children} if children else {}),
                 **({"attributes": attributes} if attributes else {}),
                 **({"eventHandlers": event_handlers} if event_handlers else {}),
@@ -277,7 +273,9 @@ def _validate_child_key_integrity(value: Any) -> None:
         for child in value:
             if isinstance(child, Component) and child.key is None:
                 warn(f"Key not specified for child in list {child}", UserWarning)
-            elif isinstance(child, Mapping) and "key" not in child:
+            elif isinstance(child, Mapping) and "key" not in child.get(
+                "attributes", {}
+            ):
                 # remove 'children' to reduce log spam
                 child_copy = {**child, "children": EllipsisRepr()}
                 warn(f"Key not specified for child in list {child_copy}", UserWarning)

src/reactpy/transforms.py

@@ -113,8 +113,8 @@ def infer_key_from_attributes(vdom: VdomDict) -> None:
         if key is None and vdom["tagName"] in {"input", "select", "textarea"}:
             key = attributes.get("name")
 
-        if key:
-            vdom["key"] = key
+        if key and "key" not in attributes:
+            attributes["key"] = key
 
     def intercept_link_clicks(self, vdom: VdomDict) -> None:
         """Intercepts anchor link clicks and prevents the default behavior.

src/reactpy/types.py

@@ -533,7 +533,7 @@ class CssStyleTypeDict(TypedDict, total=False):
     zIndex: str | int
 
 
-# TODO: Enable `extra_items` on `CssStyleDict` when PEP 728 is merged, likely in Python 3.14. Ref: https://peps.python.org/pep-0728/
+# TODO: Enable `extra_items` on `CssStyleDict` when PEP 728 is merged, likely in Python 3.15. Ref: https://peps.python.org/pep-0728/
 CssStyleDict = CssStyleTypeDict | dict[str, Any]
 
 EventFunc = Callable[[dict[str, Any]], Awaitable[None] | None]
@@ -797,7 +797,6 @@ class DangerouslySetInnerHTML(TypedDict):
 
 VdomDictKeys = Literal[
     "tagName",
-    "key",
     "children",
     "attributes",
     "eventHandlers",
@@ -806,7 +805,6 @@ class DangerouslySetInnerHTML(TypedDict):
 ]
 ALLOWED_VDOM_KEYS = {
     "tagName",
-    "key",
     "children",
     "attributes",
     "eventHandlers",
@@ -819,7 +817,6 @@ class VdomTypeDict(TypedDict):
     """TypedDict representation of what the `VdomDict` should look like."""
 
     tagName: str
-    key: NotRequired[Key | None]
     children: NotRequired[Sequence[Component | VdomChild]]
     attributes: NotRequired[VdomAttributes]
     eventHandlers: NotRequired[EventHandlerDict]
@@ -844,8 +841,6 @@ def __init__(self, **kwargs: Unpack[VdomTypeDict]) -> None:
     @overload
     def __getitem__(self, key: Literal["tagName"]) -> str: ...
     @overload
-    def __getitem__(self, key: Literal["key"]) -> Key | None: ...
-    @overload
     def __getitem__(
         self, key: Literal["children"]
     ) -> Sequence[Component | VdomChild]: ...
@@ -863,8 +858,6 @@ def __getitem__(self, key: VdomDictKeys) -> Any:
     @overload
     def __setitem__(self, key: Literal["tagName"], value: str) -> None: ...
     @overload
-    def __setitem__(self, key: Literal["key"], value: Key | None) -> None: ...
-    @overload
     def __setitem__(
         self, key: Literal["children"], value: Sequence[Component | VdomChild]
     ) -> None: ...
@@ -1116,7 +1109,6 @@ def __call__(
         self,
         attributes: VdomAttributes,
         children: Sequence[VdomChildren],
-        key: Key | None,
         event_handlers: EventHandlerDict,
     ) -> VdomDict: ...
 

tests/test_html.py

@@ -106,10 +106,13 @@ def test_script_has_no_event_handlers():
 def test_simple_fragment():
     assert html.fragment() == {"tagName": ""}
     assert html.fragment(1, 2, 3) == {"tagName": "", "children": [1, 2, 3]}
-    assert html.fragment({"key": "something"}) == {"tagName": "", "key": "something"}
+    assert html.fragment({"key": "something"}) == {
+        "tagName": "",
+        "attributes": {"key": "something"},
+    }
     assert html.fragment({"key": "something"}, 1, 2, 3) == {
         "tagName": "",
-        "key": "something",
+        "attributes": {"key": "something"},
         "children": [1, 2, 3],
     }
 

tests/test_utils.py

@@ -172,17 +172,15 @@ def test_string_to_reactpy(case):
             "source": '<div id="my-key"></div>',
             "model": {
                 "tagName": "div",
-                "key": "my-key",
-                "attributes": {"id": "my-key"},
+                "attributes": {"id": "my-key", "key": "my-key"},
             },
         },
         # 7: Infer ReactJS `key` from the `name` attribute
         {
             "source": '<input type="text" name="my-input">',
             "model": {
                 "tagName": "input",
-                "key": "my-input",
-                "attributes": {"type": "text", "name": "my-input"},
+                "attributes": {"type": "text", "name": "my-input", "key": "my-input"},
             },
         },
         # 8: Infer ReactJS `key` from the `key` attribute
@@ -191,7 +189,6 @@ def test_string_to_reactpy(case):
             "model": {
                 "tagName": "div",
                 "attributes": {"key": "my-key"},
-                "key": "my-key",
             },
         },
         # 9: Includes `inlineJavaScript` attribue
@@ -268,7 +265,7 @@ def test_non_html_tag_behavior():
         "tagName": "my-tag",
         "attributes": {"data-x": "something"},
         "children": [
-            {"tagName": "my-other-tag", "attributes": {"key": "a-key"}, "key": "a-key"},
+            {"tagName": "my-other-tag", "attributes": {"key": "a-key"}},
         ],
     }