Skip to content
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/js/packages/@reactpy/client/src/vdom.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ function createImportSourceElement(props: {
}
}
} else {
type = props.model.tagName;
type = props.model.tagName === "" ? Fragment : props.model.tagName;
}
return props.binding.create(
type,
Expand Down
14 changes: 14 additions & 0 deletions tests/test_reactjs/js_fixtures/nest-custom-under-web.js
Comment thread
Archmonger marked this conversation as resolved.
Original file line number Diff line number Diff line change
@@ -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()
};
}
14 changes: 14 additions & 0 deletions tests/test_web/js_fixtures/nest-custom-under-web.js
Original file line number Diff line number Diff line change
@@ -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()
};
}
29 changes: 29 additions & 0 deletions tests/test_web/test_module.py
Original file line number Diff line number Diff line change
Expand Up @@ -563,3 +563,32 @@ async def test_module_without_bind(display: DisplayFixture):
"#my-generic-component", state="attached"
)
assert await element.inner_text() == "Hello World"

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.

"""
module = reactpy.reactjs.file_to_module(
"nest-custom-under-web", JS_FIXTURES_DIR / "nest-custom-under-web.js"
)
Container = reactpy.reactjs.module_to_vdom(module, "Container")
Comment thread
Archmonger marked this conversation as resolved.
Outdated

@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"
Loading