Ensures key is properly propagated to importedElements

docs/source/about/changelog.rst

@@ -16,6 +16,7 @@ Unreleased
 ----------
 
 **Added**
+
 - :pull:`1113` - Added ``reactpy.executors.asgi.ReactPy`` that can be used to run ReactPy in standalone mode via ASGI.
 - :pull:`1269` - Added ``reactpy.executors.asgi.ReactPyPyodide`` that can be used to run ReactPy in standalone mode via ASGI, but rendered entirely client-sided.
 - :pull:`1113` - Added ``reactpy.executors.asgi.ReactPyMiddleware`` that can be used to utilize ReactPy within any ASGI compatible framework.
@@ -69,6 +70,7 @@ Unreleased
 **Fixed**
 
 - :pull:`1239` - Fixed a bug where script elements would not render to the DOM as plain text.
+- :pull:`1271` - Fixed bug where JavaScript components were unable to obtain the ``key`` attribute provided within ReactPy.
 - :pull:`1254` - Fixed a bug where ``RuntimeError("Hook stack is in an invalid state")`` errors would be provided when using a webserver that reuses threads.
 
 v1.1.0

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

@@ -142,6 +142,14 @@ export function createAttributes(
   model: ReactPyVdom,
   client: ReactPyClientInterface,
 ): { [key: string]: any } {
+  // Add key to attributes
+  if (model.key) {
+    if (model.attributes) {
+      model.attributes.key = model.key;
+    } else {
+      model.attributes = { key: model.key };
+    }
+  }
   return Object.fromEntries(
     Object.entries({
       // Normal HTML attributes

tests/test_web/js_fixtures/keys-properly-propagated.js

@@ -0,0 +1,14 @@
+import React from "https://esm.sh/[email protected]"
+import ReactDOM from "https://esm.sh/[email protected]/client"
+import GridLayout from "https://esm.sh/[email protected]";
+export {GridLayout};
+
+export function bind(node, config) {
+  const root = ReactDOM.createRoot(node);
+  return {
+    create: (type, props, children) => 
+      React.createElement(type, props, children),
+    render: (element) => root.render(element, node),
+    unmount: () => root.unmount()
+  };
+}

tests/test_web/test_module.py

@@ -208,6 +208,57 @@ async def test_imported_components_can_render_children(display: DisplayFixture):
         assert (await child.get_attribute("id")) == f"child-{index + 1}"
 
 
+async def test_keys_properly_propagated(display: DisplayFixture):
+    module = reactpy.web.module_from_file(
+        "keys-properly-propagated", JS_FIXTURES_DIR / "keys-properly-propagated.js"
+    )
+    GridLayout = reactpy.web.export(module, "GridLayout")
+
+    await display.show(
+        lambda: GridLayout({
+            "layout": [
+                {
+                    "i": "a",
+                    "x": 0,
+                    "y": 0,
+                    "w": 1,
+                    "h": 2,
+                    "static": True,
+                },
+                {
+                    "i": "b",
+                    "x": 1,
+                    "y": 0,
+                    "w": 3,
+                    "h": 2,
+                    "minW": 2,
+                    "maxW": 4,
+                },
+                {
+                    "i": "c",
+                    "x": 4,
+                    "y": 0,
+                    "w": 1,
+                    "h": 2,
+                }
+            ],
+            "cols": 12,
+            "rowHeight": 30,
+            "width": 1200,
+        },
+            reactpy.html.div({"key": "a"}, "a"),
+            reactpy.html.div({"key": "b"}, "b"),
+            reactpy.html.div({"key": "c"}, "c"),
+        )
+    )
+
+    parent = await display.page.wait_for_selector(".react-grid-layout", state="attached")
+    children = await parent.query_selector_all("div")
+
+    # The children simply will not render unless they receive the key prop
+    assert len(children) == 3
+
+
 def test_module_from_string():
     reactpy.web.module_from_string("temp", "old")
     with assert_reactpy_did_log(r"Existing web module .* will be replaced with"):