Fix SSR @component functions rendering under CSR components (#1324)

Co-authored-by: Archmonger <16909269+Archmonger@users.noreply.github.com>

Author: shawncrawley

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

@@ -1,4 +1,5 @@
 import eventToObject from "event-to-object";
+import { Fragment } from "preact";
 import type {
   ReactPyVdom,
   ReactPyVdomImportSource,
@@ -93,7 +94,7 @@ function createImportSourceElement(props: {
       }
     }
   } else {
-    type = props.model.tagName;
+    type = props.model.tagName === "" ? Fragment : props.model.tagName;
   }
   return props.binding.create(
     type,

tests/test_reactjs/js_fixtures/nest-custom-under-web.js

@@ -0,0 +1,14 @@
+import React from "https://esm.sh/react@19.0"
+import ReactDOM from "https://esm.sh/react-dom@19.0/client"
+import {Container} from "https://esm.sh/react-bootstrap@2.10.10/?deps=react@19.0,react-dom@19.0,react-is@19.0&exports=Container";
+export {Container};
+
+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_reactjs/test_modules.py

@@ -1,10 +1,14 @@
+from pathlib import Path
+
 import pytest
 
 import reactpy
 from reactpy import html
 from reactpy.reactjs import component_from_string, import_reactjs
 from reactpy.testing import BackendFixture, DisplayFixture
 
+JS_FIXTURES_DIR = Path(__file__).parent / "js_fixtures"
+
 
 @pytest.fixture(scope="module")
 async def display(browser):
@@ -89,3 +93,24 @@ def App():
     elements = await display.page.query_selector_all(".component-c")
     assert len(elements) == 2
     await display.page.wait_for_selector("#deep-server")
+
+
+async def test_nest_custom_component_under_web_component(display: DisplayFixture):
+    """
+    Fix https://github.com/reactive-python/reactpy/discussions/1323
+
+    Custom components (i.e those wrapped in the component decorator) were not able to
+    be nested under web components.
+    """
+    Container = reactpy.reactjs.component_from_file(
+        JS_FIXTURES_DIR / "nest-custom-under-web.js", "Container", name="nest-custom-under-web"
+    )
+
+    @reactpy.component
+    def CustomComponent():
+        return reactpy.html.div(reactpy.html.h1({"id": "my-header"}, "Header 1"))
+
+    await display.show(lambda: Container(CustomComponent()))
+
+    element = await display.page.wait_for_selector("#my-header", state="attached")
+    assert await element.inner_text() == "Header 1"

tests/test_web/__init__.py

@@ -0,0 +1,4 @@
+"""
+THESE ARE TESTS FOR THE LEGACY API. SEE tests/test_reactjs/* FOR THE NEW API TESTS.
+THE CONTENTS OF THIS MODULE WILL BE MIGRATED OR DELETED ONCE THE LEGACY API IS REMOVED.
+"""

tests/test_web/test_module.py

@@ -1,5 +1,7 @@
-# THESE ARE TESTS FOR THE LEGACY API. SEE tests/test_reactjs/* FOR THE NEW API TESTS.
-# THIS MODULE WILL BE MIGRATED OR DELETED ONCE THE LEGACY API IS REMOVED.
+"""
+THESE ARE TESTS FOR THE LEGACY API. SEE tests/test_reactjs/* FOR THE NEW API TESTS.
+THE CONTENTS OF THIS MODULE WILL BE MIGRATED OR DELETED ONCE THE LEGACY API IS REMOVED.
+"""
 from pathlib import Path
 
 import pytest