From 03f83e7d23ac35eefe1749ed54069d87b27092b9 Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Wed, 10 Dec 2025 16:26:33 -0800
Subject: [PATCH 01/21] Fix hook stack errors

---
 src/reactpy/core/_life_cycle_hook.py |  5 +-
 src/reactpy/core/layout.py           | 74 +++++++++++++++-------------
 src/reactpy/core/serve.py            | 26 +++++-----
 tests/conftest.py                    | 17 -------
 4 files changed, 54 insertions(+), 68 deletions(-)

diff --git a/src/reactpy/core/_life_cycle_hook.py b/src/reactpy/core/_life_cycle_hook.py
index 14b1bc084..e0f88a169 100644
--- a/src/reactpy/core/_life_cycle_hook.py
+++ b/src/reactpy/core/_life_cycle_hook.py
@@ -33,7 +33,10 @@ class _HookStack(Singleton):  # nocov
     )
 
     def get(self) -> list[LifeCycleHook]:
-        return self._state.get()
+        try:
+            return self._state.get()
+        except LookupError:
+            return []
 
     def initialize(self) -> Token[list[LifeCycleHook]] | None:
         return None if isinstance(self._state, ThreadLocal) else self._state.set([])
diff --git a/src/reactpy/core/layout.py b/src/reactpy/core/layout.py
index 5ed2a204e..4e8ebda3d 100644
--- a/src/reactpy/core/layout.py
+++ b/src/reactpy/core/layout.py
@@ -34,7 +34,7 @@
     REACTPY_CHECK_VDOM_SPEC,
     REACTPY_DEBUG,
 )
-from reactpy.core._life_cycle_hook import LifeCycleHook
+from reactpy.core._life_cycle_hook import HOOK_STACK, LifeCycleHook
 from reactpy.core.vdom import validate_vdom_json
 from reactpy.types import (
     BaseLayout,
@@ -162,43 +162,47 @@ async def _parallel_render(self) -> LayoutUpdateMessage:
     async def _create_layout_update(
         self, old_state: _ModelState
     ) -> LayoutUpdateMessage:
-        component = old_state.life_cycle_state.component
+        token = HOOK_STACK.initialize()
         try:
-            parent: _ModelState | None = old_state.parent
-        except AttributeError:
-            parent = None
-
-        async with AsyncExitStack() as exit_stack:
-            new_state = await self._render_component(
-                exit_stack,
-                old_state,
-                parent,
-                old_state.index,
-                old_state.key,
-                component,
-            )
+            component = old_state.life_cycle_state.component
+            try:
+                parent: _ModelState | None = old_state.parent
+            except AttributeError:
+                parent = None
+
+            async with AsyncExitStack() as exit_stack:
+                new_state = await self._render_component(
+                    exit_stack,
+                    old_state,
+                    parent,
+                    old_state.index,
+                    old_state.key,
+                    component,
+                )
 
-        if parent is not None:
-            parent.children_by_key[new_state.key] = new_state
-            old_parent_model = parent.model.current
-            old_parent_children = old_parent_model.setdefault("children", [])
-            parent.model.current = {
-                **old_parent_model,
-                "children": [
-                    *old_parent_children[: new_state.index],
-                    new_state.model.current,
-                    *old_parent_children[new_state.index + 1 :],
-                ],
+            if parent is not None:
+                parent.children_by_key[new_state.key] = new_state
+                old_parent_model = parent.model.current
+                old_parent_children = old_parent_model.setdefault("children", [])
+                parent.model.current = {
+                    **old_parent_model,
+                    "children": [
+                        *old_parent_children[: new_state.index],
+                        new_state.model.current,
+                        *old_parent_children[new_state.index + 1 :],
+                    ],
+                }
+
+            if REACTPY_CHECK_VDOM_SPEC.current:
+                validate_vdom_json(new_state.model.current)
+
+            return {
+                "type": "layout-update",
+                "path": new_state.patch_path,
+                "model": new_state.model.current,
             }
-
-        if REACTPY_CHECK_VDOM_SPEC.current:
-            validate_vdom_json(new_state.model.current)
-
-        return {
-            "type": "layout-update",
-            "path": new_state.patch_path,
-            "model": new_state.model.current,
-        }
+        finally:
+            HOOK_STACK.reset(token)
 
     async def _render_component(
         self,
diff --git a/src/reactpy/core/serve.py b/src/reactpy/core/serve.py
index 435cd442c..c8fcec4fb 100644
--- a/src/reactpy/core/serve.py
+++ b/src/reactpy/core/serve.py
@@ -45,22 +45,18 @@ async def _single_outgoing_loop(
     send: SendCoroutine,
 ) -> None:
     while True:
-        token = HOOK_STACK.initialize()
+        update = await layout.render()
         try:
-            update = await layout.render()
-            try:
-                await send(update)
-            except Exception:  # nocov
-                if not REACTPY_DEBUG.current:
-                    msg = (
-                        "Failed to send update. More info may be available "
-                        "if you enabling debug mode by setting "
-                        "`reactpy.config.REACTPY_DEBUG.current = True`."
-                    )
-                    logger.error(msg)
-                raise
-        finally:
-            HOOK_STACK.reset(token)
+            await send(update)
+        except Exception:  # nocov
+            if not REACTPY_DEBUG.current:
+                msg = (
+                    "Failed to send update. More info may be available "
+                    "if you enabling debug mode by setting "
+                    "`reactpy.config.REACTPY_DEBUG.current = True`."
+                )
+                logger.error(msg)
+            raise
 
 
 async def _single_incoming_loop(
diff --git a/tests/conftest.py b/tests/conftest.py
index 167a85b26..8531f9874 100644
--- a/tests/conftest.py
+++ b/tests/conftest.py
@@ -54,23 +54,6 @@ def rebuild():
     subprocess.run(["hatch", "build", "-t", "wheel"], check=True, env=env)  # noqa: S607
 
 
-@pytest.fixture(autouse=True, scope="function")
-def create_hook_state():
-    """This fixture is a bug fix related to `pytest_asyncio`.
-
-    Usually the hook stack is created automatically within the display fixture, but context
-    variables aren't retained within `pytest_asyncio` async fixtures. As a workaround,
-    this fixture ensures that the hook stack is created before each test is run.
-
-    Ref: https://github.com/pytest-dev/pytest-asyncio/issues/127
-    """
-    from reactpy.core._life_cycle_hook import HOOK_STACK
-
-    token = HOOK_STACK.initialize()
-    yield token
-    HOOK_STACK.reset(token)
-
-
 @pytest.fixture
 async def display(server, page):
     async with DisplayFixture(server, page) as display:

From 5e10713e8b24b6a77a9305087c9aafcb48ea46bd Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Wed, 10 Dec 2025 16:44:54 -0800
Subject: [PATCH 02/21] fix lint

---
 src/reactpy/core/serve.py | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/reactpy/core/serve.py b/src/reactpy/core/serve.py
index c8fcec4fb..622d8b1ac 100644
--- a/src/reactpy/core/serve.py
+++ b/src/reactpy/core/serve.py
@@ -8,7 +8,6 @@
 from anyio.abc import TaskGroup
 
 from reactpy.config import REACTPY_DEBUG
-from reactpy.core._life_cycle_hook import HOOK_STACK
 from reactpy.types import BaseLayout, LayoutEventMessage, LayoutUpdateMessage
 
 logger = getLogger(__name__)

From 8a9737aa4a52acce6f1ee3e761dfdfc8826dd1b7 Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Wed, 10 Dec 2025 16:46:00 -0800
Subject: [PATCH 03/21] hatch fmt tests

---
 tests/test_asgi/test_init.py       |  2 +-
 tests/test_asgi/test_middleware.py |  4 ++--
 tests/test_asgi/test_utils.py      |  2 +-
 tests/test_client.py               |  2 +-
 tests/test_config.py               |  2 +-
 tests/test_core/test_events.py     |  6 +++---
 tests/test_core/test_hooks.py      |  2 +-
 tests/test_core/test_layout.py     |  6 +++---
 tests/test_core/test_vdom.py       | 12 ++++++------
 tests/test_html.py                 | 10 ++++++----
 tests/test_option.py               | 18 +++++++++---------
 tests/test_testing.py              |  2 +-
 tests/test_utils.py                |  8 ++++----
 tests/test_web/test_module.py      |  4 ++--
 tests/tooling/select.py            |  3 +--
 15 files changed, 42 insertions(+), 41 deletions(-)

diff --git a/tests/test_asgi/test_init.py b/tests/test_asgi/test_init.py
index fd6124394..f7ef2d78d 100644
--- a/tests/test_asgi/test_init.py
+++ b/tests/test_asgi/test_init.py
@@ -15,7 +15,7 @@ def test_asgi_import_error():
             ModuleNotFoundError,
             match=r"ASGI executors require the 'reactpy\[asgi\]' extra to be installed",
         ):
-            import reactpy.executors.asgi
+            import reactpy.executors.asgi  # noqa: F401
 
     # Clean up
     if "reactpy.executors.asgi" in sys.modules:
diff --git a/tests/test_asgi/test_middleware.py b/tests/test_asgi/test_middleware.py
index fc76571eb..476187072 100644
--- a/tests/test_asgi/test_middleware.py
+++ b/tests/test_asgi/test_middleware.py
@@ -37,7 +37,7 @@ async def homepage(request):
 
 
 def test_invalid_path_prefix():
-    with pytest.raises(ValueError, match="Invalid `path_prefix`*"):
+    with pytest.raises(ValueError, match=r"Invalid `path_prefix`*"):
 
         async def app(scope, receive, send):
             pass
@@ -47,7 +47,7 @@ async def app(scope, receive, send):
 
 def test_invalid_web_modules_dir():
     with pytest.raises(
-        ValueError, match='Web modules directory "invalid" does not exist.'
+        ValueError, match=r'Web modules directory "invalid" does not exist.'
     ):
 
         async def app(scope, receive, send):
diff --git a/tests/test_asgi/test_utils.py b/tests/test_asgi/test_utils.py
index 7b65b2d80..369283dce 100644
--- a/tests/test_asgi/test_utils.py
+++ b/tests/test_asgi/test_utils.py
@@ -17,5 +17,5 @@ def test_process_settings():
 
 
 def test_invalid_setting():
-    with pytest.raises(ValueError, match='Unknown ReactPy setting "foobar".'):
+    with pytest.raises(ValueError, match=r'Unknown ReactPy setting "foobar".'):
         utils.process_settings({"foobar": True})
diff --git a/tests/test_client.py b/tests/test_client.py
index 7815dcce8..39e59ad41 100644
--- a/tests/test_client.py
+++ b/tests/test_client.py
@@ -111,7 +111,7 @@ async def test_slow_server_response_on_input_change(display: DisplayFixture):
 
     @reactpy.component
     def SomeComponent():
-        value, set_value = reactpy.hooks.use_state("")
+        _value, set_value = reactpy.hooks.use_state("")
 
         async def handle_change(event):
             await asyncio.sleep(delay)
diff --git a/tests/test_config.py b/tests/test_config.py
index e5c6457c5..37bc9174e 100644
--- a/tests/test_config.py
+++ b/tests/test_config.py
@@ -15,7 +15,7 @@ def reset_options():
 
     yield
 
-    for opt, val in zip(options, original_values):
+    for opt, val in zip(options, original_values, strict=False):
         if val is should_unset:
             if opt.is_set():
                 opt.unset()
diff --git a/tests/test_core/test_events.py b/tests/test_core/test_events.py
index 6e22abf5c..dd99018b5 100644
--- a/tests/test_core/test_events.py
+++ b/tests/test_core/test_events.py
@@ -86,7 +86,7 @@ def func(*args):
 
 
 async def test_merge_event_handler_empty_list():
-    with pytest.raises(ValueError, match="No event handlers to merge"):
+    with pytest.raises(ValueError, match=r"No event handlers to merge"):
         merge_event_handlers([])
 
 
@@ -102,7 +102,7 @@ async def test_merge_event_handlers_raises_on_mismatch(kwargs_1, kwargs_2):
     def func(data):
         return None
 
-    with pytest.raises(ValueError, match="Cannot merge handlers"):
+    with pytest.raises(ValueError, match=r"Cannot merge handlers"):
         merge_event_handlers(
             [
                 EventHandler(func, **kwargs_1),
@@ -127,7 +127,7 @@ async def test_merge_event_handlers():
 
 
 def test_merge_event_handler_funcs_empty_list():
-    with pytest.raises(ValueError, match="No event handler functions to merge"):
+    with pytest.raises(ValueError, match=r"No event handler functions to merge"):
         merge_event_handler_funcs([])
 
 
diff --git a/tests/test_core/test_hooks.py b/tests/test_core/test_hooks.py
index 41a568326..ae9d05c34 100644
--- a/tests/test_core/test_hooks.py
+++ b/tests/test_core/test_hooks.py
@@ -20,7 +20,7 @@ def SimpleComponentWithHook():
         reactpy.hooks.use_state(None)
         return reactpy.html.div()
 
-    with pytest.raises(RuntimeError, match="No life cycle hook is active"):
+    with pytest.raises(RuntimeError, match=r"No life cycle hook is active"):
         await SimpleComponentWithHook().render()
 
     async with Layout(SimpleComponentWithHook()) as layout:
diff --git a/tests/test_core/test_layout.py b/tests/test_core/test_layout.py
index c3330d882..211487db6 100644
--- a/tests/test_core/test_layout.py
+++ b/tests/test_core/test_layout.py
@@ -57,9 +57,9 @@ def MyComponent(): ...
 
 
 def test_layout_expects_abstract_component():
-    with pytest.raises(TypeError, match="Expected a ReactPy component"):
+    with pytest.raises(TypeError, match=r"Expected a ReactPy component"):
         Layout(None)
-    with pytest.raises(TypeError, match="Expected a ReactPy component"):
+    with pytest.raises(TypeError, match=r"Expected a ReactPy component"):
         Layout(reactpy.html.div())
 
 
@@ -449,7 +449,7 @@ def AnyComponent():
                 layout.render(),
                 timeout=0.1,  # this should have been plenty of time
             )
-        except asyncio.TimeoutError:
+        except TimeoutError:
             pass  # the render should still be rendering since we only update once
 
         assert run_count.current == 2
diff --git a/tests/test_core/test_vdom.py b/tests/test_core/test_vdom.py
index 68d27e6fa..c1436f1d7 100644
--- a/tests/test_core/test_vdom.py
+++ b/tests/test_core/test_vdom.py
@@ -117,7 +117,7 @@ def test_make_vdom_constructor():
 
     no_children = Vdom("no-children", allow_children=False)
 
-    with pytest.raises(TypeError, match="cannot have children"):
+    with pytest.raises(TypeError, match=r"cannot have children"):
         no_children([1, 2, 3])
 
     assert no_children() == {"tagName": "no-children"}
@@ -127,7 +127,7 @@ def test_nested_html_access_raises_error():
     elmt = Vdom("div")
 
     with pytest.raises(
-        AttributeError, match="can only be accessed on web module components"
+        AttributeError, match=r"can only be accessed on web module components"
     ):
         elmt.fails()
 
@@ -330,16 +330,16 @@ def MyComponent():
 
 @pytest.mark.skipif(not REACTPY_DEBUG.current, reason="only checked in debug mode")
 def test_raise_for_non_json_attrs():
-    with pytest.raises(TypeError, match="JSON serializable"):
+    with pytest.raises(TypeError, match=r"JSON serializable"):
         reactpy.html.div({"nonJsonSerializableObject": object()})
 
 
 def test_invalid_vdom_keys():
-    with pytest.raises(ValueError, match="Invalid keys:*"):
+    with pytest.raises(ValueError, match=r"Invalid keys:*"):
         reactpy.types.VdomDict(tagName="test", foo="bar")
 
-    with pytest.raises(KeyError, match="Invalid key:*"):
+    with pytest.raises(KeyError, match=r"Invalid key:*"):
         reactpy.types.VdomDict(tagName="test")["foo"] = "bar"
 
-    with pytest.raises(ValueError, match="VdomDict requires a 'tagName' key."):
+    with pytest.raises(ValueError, match=r"VdomDict requires a 'tagName' key."):
         reactpy.types.VdomDict(foo="bar")
diff --git a/tests/test_html.py b/tests/test_html.py
index 151857a57..5251eb189 100644
--- a/tests/test_html.py
+++ b/tests/test_html.py
@@ -87,17 +87,19 @@ def HasScript():
 
 
 def test_script_may_only_have_one_child():
-    with pytest.raises(ValueError, match="'script' nodes may have, at most, one child"):
+    with pytest.raises(
+        ValueError, match=r"'script' nodes may have, at most, one child"
+    ):
         html.script("one child", "two child")
 
 
 def test_child_of_script_must_be_string():
-    with pytest.raises(ValueError, match="The child of a 'script' must be a string"):
+    with pytest.raises(ValueError, match=r"The child of a 'script' must be a string"):
         html.script(1)
 
 
 def test_script_has_no_event_handlers():
-    with pytest.raises(ValueError, match="do not support event handlers"):
+    with pytest.raises(ValueError, match=r"do not support event handlers"):
         html.script({"onEvent": lambda: None})
 
 
@@ -113,7 +115,7 @@ def test_simple_fragment():
 
 
 def test_fragment_can_have_no_attributes():
-    with pytest.raises(TypeError, match="Fragments cannot have attributes"):
+    with pytest.raises(TypeError, match=r"Fragments cannot have attributes"):
         html.fragment({"someAttribute": 1})
 
 
diff --git a/tests/test_option.py b/tests/test_option.py
index 929e17488..8c5492150 100644
--- a/tests/test_option.py
+++ b/tests/test_option.py
@@ -33,16 +33,16 @@ def test_option_validator():
     opt.current = "0"
     assert opt.current is False
 
-    with pytest.raises(ValueError, match="Invalid value"):
+    with pytest.raises(ValueError, match=r"Invalid value"):
         opt.current = "not-an-int"
 
 
 def test_immutable_option():
     opt = Option("A_FAKE_OPTION", "default-value", mutable=False)
     assert not opt.mutable
-    with pytest.raises(TypeError, match="cannot be modified after initial load"):
+    with pytest.raises(TypeError, match=r"cannot be modified after initial load"):
         opt.current = "a-new-value"
-    with pytest.raises(TypeError, match="cannot be modified after initial load"):
+    with pytest.raises(TypeError, match=r"cannot be modified after initial load"):
         opt.unset()
 
 
@@ -78,7 +78,7 @@ def test_option_set_default():
 
 def test_cannot_subscribe_immutable_option():
     opt = Option("A_FAKE_OPTION", "default", mutable=False)
-    with pytest.raises(TypeError, match="Immutable options cannot be subscribed to"):
+    with pytest.raises(TypeError, match=r"Immutable options cannot be subscribed to"):
         opt.subscribe(lambda value: None)
 
 
@@ -104,10 +104,10 @@ def test_option_subscribe():
 def test_deprecated_option():
     opt = DeprecatedOption("A_FAKE_OPTION", None, message="is deprecated!")
 
-    with pytest.warns(DeprecationWarning, match="is deprecated!"):
+    with pytest.warns(DeprecationWarning, match=r"is deprecated!"):
         assert opt.current is None
 
-    with pytest.warns(DeprecationWarning, match="is deprecated!"):
+    with pytest.warns(DeprecationWarning, match=r"is deprecated!"):
         opt.current = "something"
 
 
@@ -124,14 +124,14 @@ def test_option_parent():
 def test_option_parent_child_must_be_mutable():
     mut_parent_opt = Option("A_FAKE_OPTION", "default-value", mutable=True)
     immu_parent_opt = Option("A_FAKE_OPTION", "default-value", mutable=False)
-    with pytest.raises(TypeError, match="must be mutable"):
+    with pytest.raises(TypeError, match=r"must be mutable"):
         Option("A_FAKE_OPTION", parent=mut_parent_opt, mutable=False)
-    with pytest.raises(TypeError, match="must be mutable"):
+    with pytest.raises(TypeError, match=r"must be mutable"):
         Option("A_FAKE_OPTION", parent=immu_parent_opt, mutable=None)
 
 
 def test_no_default_or_parent():
     with pytest.raises(
-        TypeError, match="Must specify either a default or a parent option"
+        TypeError, match=r"Must specify either a default or a parent option"
     ):
         Option("A_FAKE_OPTION")
diff --git a/tests/test_testing.py b/tests/test_testing.py
index ad7a9af48..3318bb2c4 100644
--- a/tests/test_testing.py
+++ b/tests/test_testing.py
@@ -11,7 +11,7 @@
 
 
 def test_assert_reactpy_logged_does_not_suppress_errors():
-    with pytest.raises(RuntimeError, match="expected error"):
+    with pytest.raises(RuntimeError, match=r"expected error"):
         with testing.assert_reactpy_did_log():
             msg = "expected error"
             raise RuntimeError(msg)
diff --git a/tests/test_utils.py b/tests/test_utils.py
index 2e4c41c83..01475219a 100644
--- a/tests/test_utils.py
+++ b/tests/test_utils.py
@@ -391,22 +391,22 @@ def test_reactpy_to_string(vdom_in, html_out):
 
 
 def test_reactpy_to_string_error():
-    with pytest.raises(TypeError, match="Expected a VDOM dict"):
+    with pytest.raises(TypeError, match=r"Expected a VDOM dict"):
         utils.reactpy_to_string({"notVdom": True})
 
 
 def test_invalid_dotted_path():
-    with pytest.raises(ValueError, match='"abc" is not a valid dotted path.'):
+    with pytest.raises(ValueError, match=r'"abc" is not a valid dotted path.'):
         utils.import_dotted_path("abc")
 
 
 def test_invalid_component():
     with pytest.raises(
-        AttributeError, match='ReactPy failed to import "foobar" from "reactpy"'
+        AttributeError, match=r'ReactPy failed to import "foobar" from "reactpy"'
     ):
         utils.import_dotted_path("reactpy.foobar")
 
 
 def test_invalid_module():
-    with pytest.raises(ImportError, match='ReactPy failed to import "foo"'):
+    with pytest.raises(ImportError, match=r'ReactPy failed to import "foo"'):
         utils.import_dotted_path("foo.bar")
diff --git a/tests/test_web/test_module.py b/tests/test_web/test_module.py
index 85116007c..9357d1c36 100644
--- a/tests/test_web/test_module.py
+++ b/tests/test_web/test_module.py
@@ -100,7 +100,7 @@ def ShowSimpleButton():
 def test_module_from_file_source_conflict(tmp_path):
     first_file = tmp_path / "first.js"
 
-    with pytest.raises(FileNotFoundError, match="does not exist"):
+    with pytest.raises(FileNotFoundError, match=r"does not exist"):
         reactpy.web.module._module_from_file("temp", first_file)
 
     first_file.touch()
@@ -165,7 +165,7 @@ def test_web_module_from_file_replace_existing(tmp_path):
 def test_module_missing_exports():
     module = WebModule("test", NAME_SOURCE, None, {"a", "b", "c"}, None, False)
 
-    with pytest.raises(ValueError, match="does not export 'x'"):
+    with pytest.raises(ValueError, match=r"does not export 'x'"):
         reactpy.web.module._vdom_from_web_module(module, "x")
 
     with pytest.raises(ValueError, match=r"does not export \['x', 'y'\]"):
diff --git a/tests/tooling/select.py b/tests/tooling/select.py
index 2a0f170b8..7e93f7c4b 100644
--- a/tests/tooling/select.py
+++ b/tests/tooling/select.py
@@ -1,8 +1,7 @@
 from __future__ import annotations
 
-from collections.abc import Iterator, Sequence
+from collections.abc import Callable, Iterator, Sequence
 from dataclasses import dataclass
-from typing import Callable
 
 from reactpy.types import VdomJson
 

From a1746f3d913b1aa23b047b7f333206aa5c36fc7a Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Wed, 10 Dec 2025 17:12:50 -0800
Subject: [PATCH 04/21] Remove `key` from VdomDict

---
 docs/source/about/changelog.rst                  |  1 +
 .../packages/@reactpy/client/src/components.tsx  |  6 +++---
 src/js/packages/@reactpy/client/src/types.ts     |  1 -
 src/reactpy/_html.py                             | 16 ++++++++--------
 src/reactpy/core/layout.py                       |  7 ++++---
 src/reactpy/core/vdom.py                         |  8 +++-----
 src/reactpy/transforms.py                        |  4 ++--
 src/reactpy/types.py                             | 10 +---------
 tests/test_html.py                               |  7 +++++--
 tests/test_utils.py                              |  9 +++------
 10 files changed, 30 insertions(+), 39 deletions(-)

diff --git a/docs/source/about/changelog.rst b/docs/source/about/changelog.rst
index 8f7e87c78..2deb0c49b 100644
--- a/docs/source/about/changelog.rst
+++ b/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()``.
diff --git a/src/js/packages/@reactpy/client/src/components.tsx b/src/js/packages/@reactpy/client/src/components.tsx
index a4fa97ce3..d7c5825bd 100644
--- a/src/js/packages/@reactpy/client/src/components.tsx
+++ b/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} />;
 }
diff --git a/src/js/packages/@reactpy/client/src/types.ts b/src/js/packages/@reactpy/client/src/types.ts
index 49232e532..12bc8f3fa 100644
--- a/src/js/packages/@reactpy/client/src/types.ts
+++ b/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;
diff --git a/src/reactpy/_html.py b/src/reactpy/_html.py
index ffeee7072..82dbba963 100644
--- a/src/reactpy/_html.py
+++ b/src/reactpy/_html.py
@@ -6,7 +6,6 @@
 from reactpy.core.vdom import Vdom
 from reactpy.types import (
     EventHandlerDict,
-    Key,
     VdomAttributes,
     VdomChild,
     VdomChildren,
@@ -100,12 +99,10 @@
 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="")
@@ -113,8 +110,8 @@ def _fragment(
     if children:
         model["children"] = children
 
-    if key is not None:
-        model["key"] = key
+    if attributes:
+        model["attributes"] = attributes
 
     return model
 
@@ -122,7 +119,6 @@ def _fragment(
 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
 
diff --git a/src/reactpy/core/layout.py b/src/reactpy/core/layout.py
index 4e8ebda3d..987937f9f 100644
--- a/src/reactpy/core/layout.py
+++ b/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
diff --git a/src/reactpy/core/vdom.py b/src/reactpy/core/vdom.py
index 5029c1970..08592a74c 100644
--- a/src/reactpy/core/vdom.py
+++ b/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)
diff --git a/src/reactpy/transforms.py b/src/reactpy/transforms.py
index 072653c95..f1896c831 100644
--- a/src/reactpy/transforms.py
+++ b/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.
diff --git a/src/reactpy/types.py b/src/reactpy/types.py
index b55123cf8..21cc71b21 100644
--- a/src/reactpy/types.py
+++ b/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: ...
 
diff --git a/tests/test_html.py b/tests/test_html.py
index 5251eb189..5dff8a80c 100644
--- a/tests/test_html.py
+++ b/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],
     }
 
diff --git a/tests/test_utils.py b/tests/test_utils.py
index 01475219a..bda4d8f08 100644
--- a/tests/test_utils.py
+++ b/tests/test_utils.py
@@ -172,8 +172,7 @@ 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
@@ -181,8 +180,7 @@ def test_string_to_reactpy(case):
             "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"}},
         ],
     }
 

From 2737ce51c043dd70cf808d0bb7b48de46167c518 Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Wed, 10 Dec 2025 17:18:33 -0800
Subject: [PATCH 05/21] `reactpy.html(...)` to be shorthand notation for
 fragments

---
 docs/source/about/changelog.rst |  4 ++--
 src/reactpy/_html.py            |  1 +
 src/reactpy/utils.py            |  2 +-
 tests/test_client.py            |  2 +-
 tests/test_core/test_hooks.py   |  2 +-
 tests/test_core/test_layout.py  |  4 ++--
 tests/test_html.py              | 10 +++++-----
 tests/test_utils.py             |  8 ++++----
 8 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/docs/source/about/changelog.rst b/docs/source/about/changelog.rst
index 2deb0c49b..7b8ee5241 100644
--- a/docs/source/about/changelog.rst
+++ b/docs/source/about/changelog.rst
@@ -79,8 +79,8 @@ Unreleased
 - :pull:`1311` - Removed deprecated exception type ``reactpy.core.serve.Stop``.
 - :pull:`1311` - Removed deprecated component ``reactpy.widgets.hotswap``.
 - :pull:`1255` - Removed ``reactpy.sample`` module.
-- :pull:`1255` - Removed ``reactpy.svg`` module. Contents previously within ``reactpy.svg.*`` can now be accessed via ``html.svg.*``.
-- :pull:`1255` - Removed ``reactpy.html._`` function. Use ``html.fragment`` instead.
+- :pull:`1255` - Removed ``reactpy.svg`` module. Contents previously within ``reactpy.svg.*`` can now be accessed via ``reactpy.html.svg.*``.
+- :pull:`1255` - Removed ``reactpy.html._`` function. Use ``reactpy.html(...)`` or ``reactpy.html.fragment(...)`` instead.
 - :pull:`1113` - Removed ``reactpy.run``. See the documentation for the new method to run ReactPy applications.
 - :pull:`1113` - Removed ``reactpy.backend.*``. See the documentation for the new method to run ReactPy applications.
 - :pull:`1113` - Removed ``reactpy.core.types`` module. Use ``reactpy.types`` instead.
diff --git a/src/reactpy/_html.py b/src/reactpy/_html.py
index 82dbba963..028d6e693 100644
--- a/src/reactpy/_html.py
+++ b/src/reactpy/_html.py
@@ -287,6 +287,7 @@ class HtmlConstructor:
         "fragment": Vdom("", custom_constructor=_fragment),
         "svg": SvgConstructor(),
     }
+    __call__ = __cache__["fragment"].__call__
 
     def __getattr__(self, value: str) -> VdomConstructor:
         value = value.rstrip("_").replace("_", "-")
diff --git a/src/reactpy/utils.py b/src/reactpy/utils.py
index 7430a45d2..6ebf90fdc 100644
--- a/src/reactpy/utils.py
+++ b/src/reactpy/utils.py
@@ -242,7 +242,7 @@ def component_to_vdom(component: Component) -> VdomDict:
         return component_to_vdom(cast(Component, result))
     elif isinstance(result, str):
         return html.div(result)
-    return html.fragment()
+    return html()
 
 
 def _react_attribute_to_html(key: str, value: Any) -> tuple[str, str]:
diff --git a/tests/test_client.py b/tests/test_client.py
index 39e59ad41..afe577e38 100644
--- a/tests/test_client.py
+++ b/tests/test_client.py
@@ -17,7 +17,7 @@ async def test_automatic_reconnect(
     @reactpy.component
     def SomeComponent():
         count, incr_count = use_counter(0)
-        return reactpy.html.fragment(
+        return reactpy.html(
             reactpy.html.p({"data-count": count, "id": "count"}, "count", count),
             reactpy.html.button(
                 {"onClick": lambda e: incr_count(), "id": "incr"}, "incr"
diff --git a/tests/test_core/test_hooks.py b/tests/test_core/test_hooks.py
index ae9d05c34..93e64a692 100644
--- a/tests/test_core/test_hooks.py
+++ b/tests/test_core/test_hooks.py
@@ -981,7 +981,7 @@ async def test_context_values_are_scoped():
 
     @reactpy.component
     def Parent():
-        return html.fragment(
+        return html(
             Context(Context(Child1(), value=1), value="something-else"),
             Context(Child2(), value=2),
         )
diff --git a/tests/test_core/test_layout.py b/tests/test_core/test_layout.py
index 211487db6..07ce0992d 100644
--- a/tests/test_core/test_layout.py
+++ b/tests/test_core/test_layout.py
@@ -1225,7 +1225,7 @@ def colorize(event):
     @component
     def App():
         items = use_state(["A", "B", "C"])
-        return html.fragment([Item(item, items, key=item) for item in items.value])
+        return html([Item(item, items, key=item) for item in items.value])
 
     async with layout_runner(Layout(App())) as runner:
         tree = await runner.render()
@@ -1266,7 +1266,7 @@ async def test_async_renders(async_rendering):
 
     @component
     def outer():
-        return html.fragment(child_1(), child_2())
+        return html(child_1(), child_2())
 
     @component
     @child_1_hook.capture
diff --git a/tests/test_html.py b/tests/test_html.py
index 5dff8a80c..930b3e2fb 100644
--- a/tests/test_html.py
+++ b/tests/test_html.py
@@ -104,13 +104,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"}) == {
+    assert html() == {"tagName": ""}
+    assert html(1, 2, 3) == {"tagName": "", "children": [1, 2, 3]}
+    assert html({"key": "something"}) == {
         "tagName": "",
         "attributes": {"key": "something"},
     }
-    assert html.fragment({"key": "something"}, 1, 2, 3) == {
+    assert html({"key": "something"}, 1, 2, 3) == {
         "tagName": "",
         "attributes": {"key": "something"},
         "children": [1, 2, 3],
@@ -119,7 +119,7 @@ def test_simple_fragment():
 
 def test_fragment_can_have_no_attributes():
     with pytest.raises(TypeError, match=r"Fragments cannot have attributes"):
-        html.fragment({"someAttribute": 1})
+        html({"someAttribute": 1})
 
 
 async def test_svg(display: DisplayFixture):
diff --git a/tests/test_utils.py b/tests/test_utils.py
index bda4d8f08..d98adab6b 100644
--- a/tests/test_utils.py
+++ b/tests/test_utils.py
@@ -325,11 +325,11 @@ def example_none_return():
             "<button></button>",
         ),
         (
-            html.fragment("hello ", html.fragment("world")),
+            html("hello ", html("world")),
             "hello world",
         ),
         (
-            html.fragment(html.div("hello"), html.fragment("world")),
+            html(html.div("hello"), html("world")),
             "<div>hello</div>world",
         ),
         (
@@ -341,7 +341,7 @@ def example_none_return():
             '<div style="background-color:blue;margin-left:10px"></div>',
         ),
         (
-            html.fragment(
+            html(
                 html.div("hello"),
                 html.a({"href": "https://example.com"}, "example"),
             ),
@@ -349,7 +349,7 @@ def example_none_return():
         ),
         (
             html.div(
-                html.fragment(
+                html(
                     html.div("hello"),
                     html.a({"href": "https://example.com"}, "example"),
                 ),

From 982627861d3dc9dfd0443e87051667a7e975113a Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Wed, 10 Dec 2025 17:22:53 -0800
Subject: [PATCH 06/21] Add `html.h` shorthand alias

---
 docs/source/about/changelog.rst | 3 ++-
 src/reactpy/_html.py            | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/docs/source/about/changelog.rst b/docs/source/about/changelog.rst
index 7b8ee5241..bd3098f8e 100644
--- a/docs/source/about/changelog.rst
+++ b/docs/source/about/changelog.rst
@@ -36,10 +36,11 @@ Unreleased
 - :pull:`1307` - Added ``reactpy.web.reactjs_component_from_file`` to import ReactJS components from a file.
 - :pull:`1307` - Added ``reactpy.web.reactjs_component_from_url`` to import ReactJS components from a URL.
 - :pull:`1307` - Added ``reactpy.web.reactjs_component_from_string`` to import ReactJS components from a string.
+- :pull:`1314` - Added ``reactpy.h`` as a shorthand alias for ``reactpy.html``.
 
 **Changed**
 
-- :pull:`1284` - The ``key`` attribute is now stored within ``attributes`` in the VDOM spec.
+- :pull:`1314` - 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()``.
diff --git a/src/reactpy/_html.py b/src/reactpy/_html.py
index 028d6e693..9cdc367d3 100644
--- a/src/reactpy/_html.py
+++ b/src/reactpy/_html.py
@@ -13,7 +13,7 @@
     VdomDict,
 )
 
-__all__ = ["html"]
+__all__ = ["h", "html"]
 
 NO_CHILDREN_ALLOWED_HTML_BODY = {
     "area",
@@ -424,3 +424,4 @@ def __getattr__(self, value: str) -> VdomConstructor:
 
 
 html = HtmlConstructor()
+h = html  # shorthand alias for html

From d4c3177bee02e035357c3d3dccb8022e8930daf4 Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Wed, 10 Dec 2025 17:29:21 -0800
Subject: [PATCH 07/21] Add nocov for pyscript hotfix

---
 src/reactpy/pyscript/utils.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/reactpy/pyscript/utils.py b/src/reactpy/pyscript/utils.py
index ca5e3fccc..90f1d235a 100644
--- a/src/reactpy/pyscript/utils.py
+++ b/src/reactpy/pyscript/utils.py
@@ -123,7 +123,7 @@ def extend_pyscript_config(
     pyscript_config["packages"].extend(extra_py)
 
     # FIXME: https://github.com/pyscript/pyscript/issues/2282
-    if any(pkg.endswith(".whl") for pkg in pyscript_config["packages"]):
+    if any(pkg.endswith(".whl") for pkg in pyscript_config["packages"]):  # nocov
         pyscript_config["packages_cache"] = "never"
 
     # Extend the JavaScript dependency list

From 53982b762ae78a0a7b9b2ba730ccc2fdec2278d3 Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Thu, 11 Dec 2025 01:39:04 -0800
Subject: [PATCH 08/21] initial implementation of reactjy_component_from_npm

---
 src/js/packages/@reactpy/app/src/index.ts    |  9 +-
 src/js/packages/@reactpy/client/src/index.ts |  1 +
 src/reactpy/testing/backend.py               |  8 +-
 src/reactpy/testing/display.py               |  3 +-
 src/reactpy/web/__init__.py                  |  2 +
 src/reactpy/web/module.py                    | 92 ++++++++++++++++++++
 6 files changed, 109 insertions(+), 6 deletions(-)

diff --git a/src/js/packages/@reactpy/app/src/index.ts b/src/js/packages/@reactpy/app/src/index.ts
index 55ebf2c10..fc3914ed5 100644
--- a/src/js/packages/@reactpy/app/src/index.ts
+++ b/src/js/packages/@reactpy/app/src/index.ts
@@ -1 +1,8 @@
-export { mountReactPy } from "@reactpy/client";
+export {
+  mountReactPy,
+  React,
+  ReactDOM,
+  jsx,
+  jsxs,
+  Fragment,
+} from "@reactpy/client";
diff --git a/src/js/packages/@reactpy/client/src/index.ts b/src/js/packages/@reactpy/client/src/index.ts
index b173a4226..cca51fc00 100644
--- a/src/js/packages/@reactpy/client/src/index.ts
+++ b/src/js/packages/@reactpy/client/src/index.ts
@@ -6,4 +6,5 @@ export * from "./vdom";
 export * from "./websocket";
 export { default as React } from "preact/compat";
 export { default as ReactDOM } from "preact/compat";
+export { jsx, jsxs, Fragment } from "preact/jsx-runtime";
 export * as preact from "preact";
diff --git a/src/reactpy/testing/backend.py b/src/reactpy/testing/backend.py
index 8cd1840ea..129d1658b 100644
--- a/src/reactpy/testing/backend.py
+++ b/src/reactpy/testing/backend.py
@@ -22,7 +22,7 @@
     list_logged_exceptions,
 )
 from reactpy.testing.utils import find_available_port
-from reactpy.types import ComponentConstructor, ReactPyConfig
+from reactpy.types import ComponentConstructor
 from reactpy.utils import Ref
 
 
@@ -48,7 +48,7 @@ def __init__(
         host: str = "127.0.0.1",
         port: int | None = None,
         timeout: float | None = None,
-        reactpy_config: ReactPyConfig | None = None,
+        **reactpy_config: Any,
     ) -> None:
         self.host = host
         self.port = port or find_available_port(host)
@@ -62,12 +62,12 @@ def __init__(
             self._app = ReactPyMiddleware(
                 app,
                 root_components=["reactpy.testing.backend.root_hotswap_component"],
-                **(reactpy_config or {}),
+                **reactpy_config,
             )
         else:
             self._app = ReactPy(
                 root_hotswap_component,
-                **(reactpy_config or {}),
+                **reactpy_config,
             )
         self.webserver = uvicorn.Server(
             uvicorn.Config(
diff --git a/src/reactpy/testing/display.py b/src/reactpy/testing/display.py
index aeaf6a34d..a06258783 100644
--- a/src/reactpy/testing/display.py
+++ b/src/reactpy/testing/display.py
@@ -57,7 +57,8 @@ async def __aenter__(self) -> DisplayFixture:
             self.page = await browser.new_page()
 
         self.page.set_default_timeout(REACTPY_TESTS_DEFAULT_TIMEOUT.current * 1000)
-
+        self.page.on("console", lambda msg: print(f"BROWSER CONSOLE: {msg.text}"))  # noqa: T201
+        self.page.on("pageerror", lambda exc: print(f"BROWSER ERROR: {exc}"))  # noqa: T201
         if not hasattr(self, "backend"):  # nocov
             self.backend = BackendFixture()
             await es.enter_async_context(self.backend)
diff --git a/src/reactpy/web/__init__.py b/src/reactpy/web/__init__.py
index bf75cd372..37f899c15 100644
--- a/src/reactpy/web/__init__.py
+++ b/src/reactpy/web/__init__.py
@@ -4,6 +4,7 @@
     module_from_string,
     module_from_url,
     reactjs_component_from_file,
+    reactjs_component_from_npm,
     reactjs_component_from_string,
     reactjs_component_from_url,
 )
@@ -14,6 +15,7 @@
     "module_from_string",
     "module_from_url",
     "reactjs_component_from_file",
+    "reactjs_component_from_npm",
     "reactjs_component_from_string",
     "reactjs_component_from_url",
 ]
diff --git a/src/reactpy/web/module.py b/src/reactpy/web/module.py
index e39be636d..9063ee35c 100644
--- a/src/reactpy/web/module.py
+++ b/src/reactpy/web/module.py
@@ -105,6 +105,98 @@ def reactjs_component_from_url(
     return _vdom_from_web_module(module, import_names, fallback, allow_children)
 
 
+@overload
+def reactjs_component_from_npm(
+    package: str,
+    import_names: str,
+    version: str = "latest",
+    file: str = "",
+    cdn: str = "https://esm.sh",
+    fallback: Any | None = ...,
+    resolve_imports: bool | None = ...,
+    resolve_imports_depth: int = ...,
+    unmount_before_update: bool = ...,
+    allow_children: bool = ...,
+) -> VdomConstructor: ...
+
+
+@overload
+def reactjs_component_from_npm(
+    package: str,
+    import_names: list[str] | tuple[str, ...],
+    version: str = "latest",
+    file: str = "",
+    cdn: str = "https://esm.sh",
+    fallback: Any | None = ...,
+    resolve_imports: bool | None = ...,
+    resolve_imports_depth: int = ...,
+    unmount_before_update: bool = ...,
+    allow_children: bool = ...,
+) -> list[VdomConstructor]: ...
+
+
+def reactjs_component_from_npm(
+    package: str,
+    import_names: str | list[str] | tuple[str, ...],
+    version: str = "latest",
+    file: str = "",
+    cdn: str = "https://esm.sh",
+    fallback: Any | None = None,
+    resolve_imports: bool | None = None,
+    resolve_imports_depth: int = 5,
+    unmount_before_update: bool = False,
+    allow_children: bool = True,
+) -> VdomConstructor | list[VdomConstructor]:
+    """Import a component from an NPM package.
+
+    Parameters:
+        package:
+            The name of the NPM package.
+        import_names:
+            One or more component names to import. If given as a string, a single component
+            will be returned. If a list is given, then a list of components will be
+            returned.
+        version:
+            The version of the package to use. Defaults to "latest".
+        file:
+            A specific file to import from the package.
+        cdn:
+            The CDN to use. Defaults to "https://esm.sh".
+        fallback:
+            What to temporarily display while the module is being loaded.
+        resolve_imports:
+            Whether to try and find all the named imports of this module.
+        resolve_imports_depth:
+            How deeply to search for those imports.
+        unmount_before_update:
+            Cause the component to be unmounted before each update. This option should
+            only be used if the imported package fails to re-render when props change.
+            Using this option has negative performance consequences since all DOM
+            elements must be changed on each render. See :issue:`461` for more info.
+        allow_children:
+            Whether or not these components can have children.
+    """
+    url = f"{cdn}/{package}@{version}"
+    if file:
+        url += f"/{file}"
+
+    if "esm.sh" in cdn:
+        if "?" in url:
+            url += "&external=react,react-dom"
+        else:
+            url += "?external=react,react-dom"
+
+    return reactjs_component_from_url(
+        url,
+        import_names,
+        fallback=fallback,
+        resolve_imports=resolve_imports,
+        resolve_imports_depth=resolve_imports_depth,
+        unmount_before_update=unmount_before_update,
+        allow_children=allow_children,
+    )
+
+
 @overload
 def reactjs_component_from_file(
     file: str | Path,

From 7d86175f4f33b5ddb6ca3679ea4cfdf67472bec9 Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Thu, 11 Dec 2025 01:39:16 -0800
Subject: [PATCH 09/21] update copilot instructions

---
 .github/copilot-instructions.md | 2 --
 1 file changed, 2 deletions(-)

diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
index dcdf54342..07d36024d 100644
--- a/.github/copilot-instructions.md
+++ b/.github/copilot-instructions.md
@@ -8,8 +8,6 @@ Always reference these instructions first and fallback to search or bash command
 
 **BUG INVESTIGATION**: When investigating whether a bug was already resolved in a previous version, always prioritize searching through `docs/source/about/changelog.rst` first before using Git history. Only search through Git history when no relevant changelog entries are found.
 
-**CODE RETRIEVAL**: Always prioritize using Serena tools (e.g., `mcp_oraios_serena_find_symbol`, `mcp_oraios_serena_search_for_pattern`) for code retrieval and analysis over standard file reading or searching tools.
-
 ## Working Effectively
 
 ### Bootstrap, Build, and Test the Repository

From 9ce3a963907bba1f35433b3ce74f2c15dd8bc755 Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Thu, 11 Dec 2025 01:39:40 -0800
Subject: [PATCH 10/21] reorganize args on `reactjs_component_from_*`

---
 src/reactpy/web/module.py | 95 ++++++++++++++++++---------------------
 1 file changed, 44 insertions(+), 51 deletions(-)

diff --git a/src/reactpy/web/module.py b/src/reactpy/web/module.py
index 9063ee35c..4dae9679d 100644
--- a/src/reactpy/web/module.py
+++ b/src/reactpy/web/module.py
@@ -38,9 +38,9 @@
 def reactjs_component_from_url(
     url: str,
     import_names: str,
-    fallback: Any | None = ...,
-    resolve_imports: bool | None = ...,
+    resolve_imports: bool = ...,
     resolve_imports_depth: int = ...,
+    fallback: Any | None = ...,
     unmount_before_update: bool = ...,
     allow_children: bool = ...,
 ) -> VdomConstructor: ...
@@ -50,9 +50,9 @@ def reactjs_component_from_url(
 def reactjs_component_from_url(
     url: str,
     import_names: list[str] | tuple[str, ...],
-    fallback: Any | None = ...,
-    resolve_imports: bool | None = ...,
+    resolve_imports: bool = ...,
     resolve_imports_depth: int = ...,
+    fallback: Any | None = ...,
     unmount_before_update: bool = ...,
     allow_children: bool = ...,
 ) -> list[VdomConstructor]: ...
@@ -61,9 +61,9 @@ def reactjs_component_from_url(
 def reactjs_component_from_url(
     url: str,
     import_names: str | list[str] | tuple[str, ...],
-    fallback: Any | None = None,
-    resolve_imports: bool | None = None,
+    resolve_imports: bool = True,
     resolve_imports_depth: int = 5,
+    fallback: Any | None = None,
     unmount_before_update: bool = False,
     allow_children: bool = True,
 ) -> VdomConstructor | list[VdomConstructor]:
@@ -76,12 +76,12 @@ def reactjs_component_from_url(
             One or more component names to import. If given as a string, a single component
             will be returned. If a list is given, then a list of components will be
             returned.
-        fallback:
-            What to temporarily display while the module is being loaded.
         resolve_imports:
             Whether to try and find all the named imports of this module.
         resolve_imports_depth:
             How deeply to search for those imports.
+        fallback:
+            What to temporarily display while the module is being loaded.
         unmount_before_update:
             Cause the component to be unmounted before each update. This option should
             only be used if the imported package fails to re-render when props change.
@@ -109,12 +109,11 @@ def reactjs_component_from_url(
 def reactjs_component_from_npm(
     package: str,
     import_names: str,
+    resolve_imports: bool = ...,
+    resolve_imports_depth: int = ...,
     version: str = "latest",
-    file: str = "",
     cdn: str = "https://esm.sh",
     fallback: Any | None = ...,
-    resolve_imports: bool | None = ...,
-    resolve_imports_depth: int = ...,
     unmount_before_update: bool = ...,
     allow_children: bool = ...,
 ) -> VdomConstructor: ...
@@ -124,12 +123,11 @@ def reactjs_component_from_npm(
 def reactjs_component_from_npm(
     package: str,
     import_names: list[str] | tuple[str, ...],
+    resolve_imports: bool = ...,
+    resolve_imports_depth: int = ...,
     version: str = "latest",
-    file: str = "",
     cdn: str = "https://esm.sh",
     fallback: Any | None = ...,
-    resolve_imports: bool | None = ...,
-    resolve_imports_depth: int = ...,
     unmount_before_update: bool = ...,
     allow_children: bool = ...,
 ) -> list[VdomConstructor]: ...
@@ -138,12 +136,11 @@ def reactjs_component_from_npm(
 def reactjs_component_from_npm(
     package: str,
     import_names: str | list[str] | tuple[str, ...],
+    resolve_imports: bool = True,
+    resolve_imports_depth: int = 5,
     version: str = "latest",
-    file: str = "",
     cdn: str = "https://esm.sh",
     fallback: Any | None = None,
-    resolve_imports: bool | None = None,
-    resolve_imports_depth: int = 5,
     unmount_before_update: bool = False,
     allow_children: bool = True,
 ) -> VdomConstructor | list[VdomConstructor]:
@@ -156,18 +153,16 @@ def reactjs_component_from_npm(
             One or more component names to import. If given as a string, a single component
             will be returned. If a list is given, then a list of components will be
             returned.
+        resolve_imports:
+            Whether to try and find all the named imports of this module.
+        resolve_imports_depth:
+            How deeply to search for those imports.
         version:
             The version of the package to use. Defaults to "latest".
-        file:
-            A specific file to import from the package.
         cdn:
             The CDN to use. Defaults to "https://esm.sh".
         fallback:
             What to temporarily display while the module is being loaded.
-        resolve_imports:
-            Whether to try and find all the named imports of this module.
-        resolve_imports_depth:
-            How deeply to search for those imports.
         unmount_before_update:
             Cause the component to be unmounted before each update. This option should
             only be used if the imported package fails to re-render when props change.
@@ -177,8 +172,6 @@ def reactjs_component_from_npm(
             Whether or not these components can have children.
     """
     url = f"{cdn}/{package}@{version}"
-    if file:
-        url += f"/{file}"
 
     if "esm.sh" in cdn:
         if "?" in url:
@@ -201,10 +194,10 @@ def reactjs_component_from_npm(
 def reactjs_component_from_file(
     file: str | Path,
     import_names: str,
+    resolve_imports: bool = ...,
+    resolve_imports_depth: int = ...,
     name: str = "",
     fallback: Any | None = ...,
-    resolve_imports: bool | None = ...,
-    resolve_imports_depth: int = ...,
     unmount_before_update: bool = ...,
     symlink: bool = ...,
     allow_children: bool = ...,
@@ -215,10 +208,10 @@ def reactjs_component_from_file(
 def reactjs_component_from_file(
     file: str | Path,
     import_names: list[str] | tuple[str, ...],
+    resolve_imports: bool = ...,
+    resolve_imports_depth: int = ...,
     name: str = "",
     fallback: Any | None = ...,
-    resolve_imports: bool | None = ...,
-    resolve_imports_depth: int = ...,
     unmount_before_update: bool = ...,
     symlink: bool = ...,
     allow_children: bool = ...,
@@ -228,10 +221,10 @@ def reactjs_component_from_file(
 def reactjs_component_from_file(
     file: str | Path,
     import_names: str | list[str] | tuple[str, ...],
+    resolve_imports: bool = True,
+    resolve_imports_depth: int = 5,
     name: str = "",
     fallback: Any | None = None,
-    resolve_imports: bool | None = None,
-    resolve_imports_depth: int = 5,
     unmount_before_update: bool = False,
     symlink: bool = False,
     allow_children: bool = True,
@@ -245,14 +238,14 @@ def reactjs_component_from_file(
             One or more component names to import. If given as a string, a single component
             will be returned. If a list is given, then a list of components will be
             returned.
-        name:
-            The human-readable name of the ReactJS package
-        fallback:
-            What to temporarily display while the module is being loaded.
         resolve_imports:
             Whether to try and find all the named imports of this module.
         resolve_imports_depth:
             How deeply to search for those imports.
+        name:
+            The human-readable name of the ReactJS package
+        fallback:
+            What to temporarily display while the module is being loaded.
         unmount_before_update:
             Cause the component to be unmounted before each update. This option should
             only be used if the imported package fails to re-render when props change.
@@ -285,10 +278,10 @@ def reactjs_component_from_file(
 def reactjs_component_from_string(
     content: str,
     import_names: str,
+    resolve_imports: bool = ...,
+    resolve_imports_depth: int = ...,
     name: str = "",
     fallback: Any | None = ...,
-    resolve_imports: bool | None = ...,
-    resolve_imports_depth: int = ...,
     unmount_before_update: bool = ...,
     allow_children: bool = ...,
 ) -> VdomConstructor: ...
@@ -298,10 +291,10 @@ def reactjs_component_from_string(
 def reactjs_component_from_string(
     content: str,
     import_names: list[str] | tuple[str, ...],
+    resolve_imports: bool = ...,
+    resolve_imports_depth: int = ...,
     name: str = "",
     fallback: Any | None = ...,
-    resolve_imports: bool | None = ...,
-    resolve_imports_depth: int = ...,
     unmount_before_update: bool = ...,
     allow_children: bool = ...,
 ) -> list[VdomConstructor]: ...
@@ -310,10 +303,10 @@ def reactjs_component_from_string(
 def reactjs_component_from_string(
     content: str,
     import_names: str | list[str] | tuple[str, ...],
+    resolve_imports: bool = True,
+    resolve_imports_depth: int = 5,
     name: str = "",
     fallback: Any | None = None,
-    resolve_imports: bool | None = None,
-    resolve_imports_depth: int = 5,
     unmount_before_update: bool = False,
     allow_children: bool = True,
 ) -> VdomConstructor | list[VdomConstructor]:
@@ -326,14 +319,14 @@ def reactjs_component_from_string(
             One or more component names to import. If given as a string, a single component
             will be returned. If a list is given, then a list of components will be
             returned.
-        name:
-            The human-readable name of the ReactJS package
-        fallback:
-            What to temporarily display while the module is being loaded.
         resolve_imports:
             Whether to try and find all the named imports of this module.
         resolve_imports_depth:
             How deeply to search for those imports.
+        name:
+            The human-readable name of the ReactJS package
+        fallback:
+            What to temporarily display while the module is being loaded.
         unmount_before_update:
             Cause the component to be unmounted before each update. This option should
             only be used if the imported package fails to re-render when props change.
@@ -362,7 +355,7 @@ def reactjs_component_from_string(
 def module_from_url(
     url: str,
     fallback: Any | None = None,
-    resolve_exports: bool | None = None,
+    resolve_exports: bool = False,
     resolve_exports_depth: int = 5,
     unmount_before_update: bool = False,
 ) -> WebModule:  # pragma: no cover
@@ -383,7 +376,7 @@ def module_from_file(
     name: str,
     file: str | Path,
     fallback: Any | None = None,
-    resolve_exports: bool | None = None,
+    resolve_exports: bool = False,
     resolve_exports_depth: int = 5,
     unmount_before_update: bool = False,
     symlink: bool = False,
@@ -407,7 +400,7 @@ def module_from_string(
     name: str,
     content: str,
     fallback: Any | None = None,
-    resolve_exports: bool | None = None,
+    resolve_exports: bool = False,
     resolve_exports_depth: int = 5,
     unmount_before_update: bool = False,
 ) -> WebModule:  # pragma: no cover
@@ -428,7 +421,7 @@ def module_from_string(
 def _module_from_url(
     url: str,
     fallback: Any | None = None,
-    resolve_imports: bool | None = None,
+    resolve_imports: bool = True,
     resolve_imports_depth: int = 5,
     unmount_before_update: bool = False,
 ) -> WebModule:
@@ -454,7 +447,7 @@ def _module_from_file(
     name: str,
     file: str | Path,
     fallback: Any | None = None,
-    resolve_imports: bool | None = None,
+    resolve_imports: bool = True,
     resolve_imports_depth: int = 5,
     unmount_before_update: bool = False,
     symlink: bool = False,
@@ -515,7 +508,7 @@ def _module_from_string(
     name: str,
     content: str,
     fallback: Any | None = None,
-    resolve_imports: bool | None = None,
+    resolve_imports: bool = True,
     resolve_imports_depth: int = 5,
     unmount_before_update: bool = False,
 ) -> WebModule:

From bb8fe0f7ebf2b9c4db5d31d9177bdb8b97372985 Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Thu, 11 Dec 2025 03:38:35 -0800
Subject: [PATCH 11/21] move reactjs re-export stubs to their own files

---
 .gitignore                                    |  2 +-
 src/build_scripts/clean_js_dir.py             | 23 +++++++-------
 src/js/packages/@reactpy/app/package.json     |  2 +-
 src/js/packages/@reactpy/app/src/index.ts     |  9 +-----
 src/js/packages/@reactpy/app/src/react-dom.ts |  6 ++++
 .../@reactpy/app/src/react-jsx-runtime.ts     |  1 +
 src/js/packages/@reactpy/app/src/react.ts     |  6 ++++
 src/js/packages/@reactpy/app/tsconfig.json    |  3 +-
 src/reactpy/web/__init__.py                   |  4 +++
 src/reactpy/web/module.py                     |  3 ++
 src/reactpy/web/utils.py                      | 18 +++++++++++
 tests/test_web/test_npm.py                    | 30 +++++++++++++++++++
 12 files changed, 85 insertions(+), 22 deletions(-)
 create mode 100644 src/js/packages/@reactpy/app/src/react-dom.ts
 create mode 100644 src/js/packages/@reactpy/app/src/react-jsx-runtime.ts
 create mode 100644 src/js/packages/@reactpy/app/src/react.ts
 create mode 100644 tests/test_web/test_npm.py

diff --git a/.gitignore b/.gitignore
index 40cd524ba..535e615ce 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,5 @@
 # --- Build Artifacts ---
-src/reactpy/static/index.js*
+src/reactpy/static/*.js*
 src/reactpy/static/morphdom/
 src/reactpy/static/pyscript/
 
diff --git a/src/build_scripts/clean_js_dir.py b/src/build_scripts/clean_js_dir.py
index 05db847e6..cdb9e276a 100644
--- a/src/build_scripts/clean_js_dir.py
+++ b/src/build_scripts/clean_js_dir.py
@@ -13,29 +13,30 @@
 
 # Get the path to the JS source directory
 js_src_dir = pathlib.Path(__file__).parent.parent / "js"
-
-# Get the paths to all `dist` folders in the JS source directory
-dist_dirs = glob.glob(str(js_src_dir / "**/dist"), recursive=True)
-
-# Get the paths to all `node_modules` folders in the JS source directory
-node_modules_dirs = glob.glob(str(js_src_dir / "**/node_modules"), recursive=True)
-
-# Get the paths to all `tsconfig.tsbuildinfo` files in the JS source directory
-tsconfig_tsbuildinfo_files = glob.glob(
-    str(js_src_dir / "**/tsconfig.tsbuildinfo"), recursive=True
-)
+static_output_dir = pathlib.Path(__file__).parent.parent / "reactpy" / "static"
 
 # Delete all `dist` folders
+dist_dirs = glob.glob(str(js_src_dir / "**/dist"), recursive=True)
 for dist_dir in dist_dirs:
     with contextlib.suppress(FileNotFoundError):
         shutil.rmtree(dist_dir)
 
 # Delete all `node_modules` folders
+node_modules_dirs = glob.glob(str(js_src_dir / "**/node_modules"), recursive=True)
 for node_modules_dir in node_modules_dirs:
     with contextlib.suppress(FileNotFoundError):
         shutil.rmtree(node_modules_dir)
 
 # Delete all `tsconfig.tsbuildinfo` files
+tsconfig_tsbuildinfo_files = glob.glob(
+    str(js_src_dir / "**/tsconfig.tsbuildinfo"), recursive=True
+)
 for tsconfig_tsbuildinfo_file in tsconfig_tsbuildinfo_files:
     with contextlib.suppress(FileNotFoundError):
         os.remove(tsconfig_tsbuildinfo_file)
+
+# Delete all `index-*.js` files
+index_js_files = glob.glob(str(static_output_dir / "index-*.js*"))
+for index_js_file in index_js_files:
+    with contextlib.suppress(FileNotFoundError):
+        os.remove(index_js_file)
diff --git a/src/js/packages/@reactpy/app/package.json b/src/js/packages/@reactpy/app/package.json
index c23e50f65..488a1742c 100644
--- a/src/js/packages/@reactpy/app/package.json
+++ b/src/js/packages/@reactpy/app/package.json
@@ -13,7 +13,7 @@
   "license": "MIT",
   "name": "@reactpy/app",
   "scripts": {
-    "build": "bun build \"src/index.ts\" --outdir=\"../../../../reactpy/static/\" --minify --sourcemap=\"linked\"",
+    "build": "bun build \"src/index.ts\" \"src/react.ts\" \"src/react-dom.ts\" \"src/react-jsx-runtime.ts\" --outdir=\"../../../../reactpy/static/\" --minify --sourcemap=\"linked\" --splitting",
     "checkTypes": "tsc --noEmit"
   }
 }
diff --git a/src/js/packages/@reactpy/app/src/index.ts b/src/js/packages/@reactpy/app/src/index.ts
index fc3914ed5..55ebf2c10 100644
--- a/src/js/packages/@reactpy/app/src/index.ts
+++ b/src/js/packages/@reactpy/app/src/index.ts
@@ -1,8 +1 @@
-export {
-  mountReactPy,
-  React,
-  ReactDOM,
-  jsx,
-  jsxs,
-  Fragment,
-} from "@reactpy/client";
+export { mountReactPy } from "@reactpy/client";
diff --git a/src/js/packages/@reactpy/app/src/react-dom.ts b/src/js/packages/@reactpy/app/src/react-dom.ts
new file mode 100644
index 000000000..55007a343
--- /dev/null
+++ b/src/js/packages/@reactpy/app/src/react-dom.ts
@@ -0,0 +1,6 @@
+import ReactDOM from "preact/compat";
+
+// @ts-ignore
+export * from "preact/compat";
+
+export default ReactDOM;
diff --git a/src/js/packages/@reactpy/app/src/react-jsx-runtime.ts b/src/js/packages/@reactpy/app/src/react-jsx-runtime.ts
new file mode 100644
index 000000000..9e7e8fc51
--- /dev/null
+++ b/src/js/packages/@reactpy/app/src/react-jsx-runtime.ts
@@ -0,0 +1 @@
+export * from "preact/jsx-runtime";
diff --git a/src/js/packages/@reactpy/app/src/react.ts b/src/js/packages/@reactpy/app/src/react.ts
new file mode 100644
index 000000000..21f104942
--- /dev/null
+++ b/src/js/packages/@reactpy/app/src/react.ts
@@ -0,0 +1,6 @@
+import React from "preact/compat";
+
+// @ts-ignore
+export * from "preact/compat";
+
+export default React;
diff --git a/src/js/packages/@reactpy/app/tsconfig.json b/src/js/packages/@reactpy/app/tsconfig.json
index e7c43004b..de3ec6378 100644
--- a/src/js/packages/@reactpy/app/tsconfig.json
+++ b/src/js/packages/@reactpy/app/tsconfig.json
@@ -2,7 +2,8 @@
   "compilerOptions": {
     "composite": true,
     "outDir": "dist",
-    "rootDir": "src"
+    "rootDir": "src",
+    "esModuleInterop": true
   },
   "extends": "../../../tsconfig.json",
   "include": ["src"],
diff --git a/src/reactpy/web/__init__.py b/src/reactpy/web/__init__.py
index 37f899c15..aed8e7e4f 100644
--- a/src/reactpy/web/__init__.py
+++ b/src/reactpy/web/__init__.py
@@ -8,6 +8,9 @@
     reactjs_component_from_string,
     reactjs_component_from_url,
 )
+from reactpy.web.utils import (
+    reactjs_import_map,
+)
 
 __all__ = [
     "export",
@@ -18,4 +21,5 @@
     "reactjs_component_from_npm",
     "reactjs_component_from_string",
     "reactjs_component_from_url",
+    "reactjs_import_map",
 ]
diff --git a/src/reactpy/web/module.py b/src/reactpy/web/module.py
index 4dae9679d..8d63818df 100644
--- a/src/reactpy/web/module.py
+++ b/src/reactpy/web/module.py
@@ -146,6 +146,9 @@ def reactjs_component_from_npm(
 ) -> VdomConstructor | list[VdomConstructor]:
     """Import a component from an NPM package.
 
+    Is is mandatory to load `reactpy.web.reactjs_import_map()` on your page before using this
+    function. It is recommended to put this within your HTML <head> content.
+
     Parameters:
         package:
             The name of the NPM package.
diff --git a/src/reactpy/web/utils.py b/src/reactpy/web/utils.py
index d6ef62dc4..ea75940ca 100644
--- a/src/reactpy/web/utils.py
+++ b/src/reactpy/web/utils.py
@@ -128,6 +128,24 @@ def resolve_module_exports_from_source(
     return names, references
 
 
+def reactjs_import_map():
+    from reactpy import config, html
+
+    base_url = config.REACTPY_PATH_PREFIX.current.strip("/")
+    return html.script(
+        {"type": "importmap"},
+        f"""
+        {{
+            "imports": {{
+                "react": "/{base_url}/static/react.js",
+                "react-dom": "/{base_url}/static/react-dom.js",
+                "react/jsx-runtime": "/{base_url}/static/react-jsx-runtime.js"
+            }}
+        }}
+        """,
+    )
+
+
 def _resolve_relative_url(base_url: str, rel_url: str) -> str:
     if not rel_url.startswith("."):
         if rel_url.startswith("/"):
diff --git a/tests/test_web/test_npm.py b/tests/test_web/test_npm.py
new file mode 100644
index 000000000..a8c890202
--- /dev/null
+++ b/tests/test_web/test_npm.py
@@ -0,0 +1,30 @@
+import pytest
+
+import reactpy
+from reactpy import html
+from reactpy.testing import BackendFixture, DisplayFixture
+from reactpy.web import reactjs_component_from_npm, reactjs_import_map
+
+
+@pytest.mark.anyio
+async def test_reactjs_component_from_npm_react_bootstrap():
+    async with BackendFixture(html_head=html.head(reactjs_import_map())) as backend:
+        async with DisplayFixture(backend=backend) as display:
+            Button = reactjs_component_from_npm(
+                "react-bootstrap", "Button", version="2.10.2"
+            )
+
+            @reactpy.component
+            def App():
+                return Button({"variant": "primary", "id": "test-button"}, "Click me")
+
+            await display.show(App)
+
+            button = await display.page.wait_for_selector("#test-button")
+            assert await button.inner_text() == "Click me"
+
+            # Check if it has the correct class for primary variant
+            # React Bootstrap buttons usually have 'btn' and 'btn-primary' classes
+            classes = await button.get_attribute("class")
+            assert "btn" in classes
+            assert "btn-primary" in classes

From 1fb71741ca6fda4072396ffdb45a04561353848b Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Thu, 11 Dec 2025 04:15:01 -0800
Subject: [PATCH 12/21] Remove legacy web template

---
 src/reactpy/web/templates/react.js | 61 ------------------------------
 1 file changed, 61 deletions(-)
 delete mode 100644 src/reactpy/web/templates/react.js

diff --git a/src/reactpy/web/templates/react.js b/src/reactpy/web/templates/react.js
deleted file mode 100644
index b4970d320..000000000
--- a/src/reactpy/web/templates/react.js
+++ /dev/null
@@ -1,61 +0,0 @@
-export * from "$CDN/$PACKAGE";
-
-import * as React from "$CDN/react$VERSION";
-import * as ReactDOM from "$CDN/react-dom$VERSION";
-
-export default ({ children, ...props }) => {
-  const [{ component }, setComponent] = React.useState({});
-  React.useEffect(() => {
-    import("$CDN/$PACKAGE").then((module) => {
-      // dynamically load the default export since we don't know if it's exported.
-      setComponent({ component: module.default });
-    });
-  });
-  return component
-    ? React.createElement(component, props, ...(children || []))
-    : null;
-};
-
-export function bind(node, config) {
-  const root = ReactDOM.createRoot(node);
-  return {
-    create: (component, props, children) =>
-      React.createElement(component, wrapEventHandlers(props), ...children),
-    render: (element) => root.render(element),
-    unmount: () => root.unmount()
-  };
-}
-
-function wrapEventHandlers(props) {
-  const newProps = Object.assign({}, props);
-  for (const [key, value] of Object.entries(props)) {
-    if (typeof value === "function" && value.isHandler) {
-      newProps[key] = makeJsonSafeEventHandler(value);
-    }
-  }
-  return newProps;
-}
-
-function makeJsonSafeEventHandler(oldHandler) {
-  // Since we can't really know what the event handlers get passed we have to check if
-  // they are JSON serializable or not. We can allow normal synthetic events to pass
-  // through since the original handler already knows how to serialize those for us.
-  return function safeEventHandler() {
-    oldHandler(
-      ...Array.from(arguments).filter((value) => {
-        if (typeof value === "object" && value.nativeEvent) {
-          // this is probably a standard React synthetic event
-          return true;
-        } else {
-          try {
-            JSON.stringify(value);
-          } catch (err) {
-            console.error("Failed to serialize some event data");
-            return false;
-          }
-          return true;
-        }
-      }),
-    );
-  };
-}

From 6982747e5a0173560f1b21d124e4c3e2ea8d7c81 Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Thu, 11 Dec 2025 05:26:41 -0800
Subject: [PATCH 13/21] create new `reactpy.reactjs` module

---
 src/reactpy/__init__.py                       |   3 +-
 src/reactpy/reactjs/__init__.py               | 353 +++++++++++
 src/reactpy/reactjs/module.py                 | 214 +++++++
 src/reactpy/reactjs/types.py                  |   7 +
 src/reactpy/reactjs/utils.py                  | 177 ++++++
 src/reactpy/types.py                          |  14 +
 src/reactpy/web/__init__.py                   |  12 -
 src/reactpy/web/module.py                     | 592 +-----------------
 src/reactpy/web/utils.py                      | 179 +-----
 tests/test_reactjs/__init__.py                |   0
 .../test_reactjs/js_fixtures/callable-prop.js |  24 +
 .../js_fixtures/component-can-have-child.js   |  27 +
 .../js_fixtures/export-resolution/index.js    |   2 +
 .../js_fixtures/export-resolution/one.js      |   5 +
 .../js_fixtures/export-resolution/two.js      |   2 +
 .../js_fixtures/exports-syntax.js             |  23 +
 .../js_fixtures/exports-two-components.js     |  20 +
 .../js_fixtures/generic-module.js             |   5 +
 .../js_fixtures/keys-properly-propagated.js   |  14 +
 .../set-flag-when-unmount-is-called.js        |  31 +
 .../test_reactjs/js_fixtures/simple-button.js |  25 +
 .../js_fixtures/subcomponent-notation.js      |  14 +
 .../test_modules.py}                          |  10 +-
 .../{test_web => test_reactjs}/test_utils.py  |  12 +-
 tests/test_web/test_module.py                 | 156 +++--
 25 files changed, 1080 insertions(+), 841 deletions(-)
 create mode 100644 src/reactpy/reactjs/__init__.py
 create mode 100644 src/reactpy/reactjs/module.py
 create mode 100644 src/reactpy/reactjs/types.py
 create mode 100644 src/reactpy/reactjs/utils.py
 create mode 100644 tests/test_reactjs/__init__.py
 create mode 100644 tests/test_reactjs/js_fixtures/callable-prop.js
 create mode 100644 tests/test_reactjs/js_fixtures/component-can-have-child.js
 create mode 100644 tests/test_reactjs/js_fixtures/export-resolution/index.js
 create mode 100644 tests/test_reactjs/js_fixtures/export-resolution/one.js
 create mode 100644 tests/test_reactjs/js_fixtures/export-resolution/two.js
 create mode 100644 tests/test_reactjs/js_fixtures/exports-syntax.js
 create mode 100644 tests/test_reactjs/js_fixtures/exports-two-components.js
 create mode 100644 tests/test_reactjs/js_fixtures/generic-module.js
 create mode 100644 tests/test_reactjs/js_fixtures/keys-properly-propagated.js
 create mode 100644 tests/test_reactjs/js_fixtures/set-flag-when-unmount-is-called.js
 create mode 100644 tests/test_reactjs/js_fixtures/simple-button.js
 create mode 100644 tests/test_reactjs/js_fixtures/subcomponent-notation.js
 rename tests/{test_web/test_npm.py => test_reactjs/test_modules.py} (70%)
 rename tests/{test_web => test_reactjs}/test_utils.py (94%)

diff --git a/src/reactpy/__init__.py b/src/reactpy/__init__.py
index fc6c5332e..3166add07 100644
--- a/src/reactpy/__init__.py
+++ b/src/reactpy/__init__.py
@@ -1,4 +1,4 @@
-from reactpy import config, logging, types, web, widgets
+from reactpy import config, logging, reactjs, types, web, widgets
 from reactpy._html import html
 from reactpy.core import hooks
 from reactpy.core.component import component
@@ -36,6 +36,7 @@
     "html",
     "logging",
     "pyscript_component",
+    "reactjs",
     "reactpy_to_string",
     "string_to_reactpy",
     "types",
diff --git a/src/reactpy/reactjs/__init__.py b/src/reactpy/reactjs/__init__.py
new file mode 100644
index 000000000..bbf428907
--- /dev/null
+++ b/src/reactpy/reactjs/__init__.py
@@ -0,0 +1,353 @@
+from __future__ import annotations
+
+import hashlib
+from pathlib import Path
+from typing import Any, overload
+
+from reactpy.reactjs.module import (
+    file_to_module,
+    import_reactjs,
+    module_to_vdom,
+    string_to_module,
+    url_to_module,
+)
+from reactpy.reactjs.types import (
+    NAME_SOURCE,
+    URL_SOURCE,
+)
+from reactpy.types import JavaScriptModule, VdomConstructor
+
+__all__ = [
+    "NAME_SOURCE",
+    "URL_SOURCE",
+    "component_from_file",
+    "component_from_npm",
+    "component_from_string",
+    "component_from_url",
+    "import_reactjs",
+]
+
+_URL_JS_MODULE_CACHE: dict[str, JavaScriptModule] = {}
+_FILE_JS_MODULE_CACHE: dict[str, JavaScriptModule] = {}
+_STRING_JS_MODULE_CACHE: dict[str, JavaScriptModule] = {}
+
+
+@overload
+def component_from_url(
+    url: str,
+    import_names: str,
+    resolve_imports: bool = ...,
+    resolve_imports_depth: int = ...,
+    fallback: Any | None = ...,
+    unmount_before_update: bool = ...,
+    allow_children: bool = ...,
+) -> VdomConstructor: ...
+
+
+@overload
+def component_from_url(
+    url: str,
+    import_names: list[str] | tuple[str, ...],
+    resolve_imports: bool = ...,
+    resolve_imports_depth: int = ...,
+    fallback: Any | None = ...,
+    unmount_before_update: bool = ...,
+    allow_children: bool = ...,
+) -> list[VdomConstructor]: ...
+
+
+def component_from_url(
+    url: str,
+    import_names: str | list[str] | tuple[str, ...],
+    resolve_imports: bool = True,
+    resolve_imports_depth: int = 5,
+    fallback: Any | None = None,
+    unmount_before_update: bool = False,
+    allow_children: bool = True,
+) -> VdomConstructor | list[VdomConstructor]:
+    """Import a component from a URL.
+
+    Parameters:
+        url:
+            The URL to import the component from.
+        import_names:
+            One or more component names to import. If given as a string, a single component
+            will be returned. If a list is given, then a list of components will be
+            returned.
+        resolve_imports:
+            Whether to try and find all the named imports of this module.
+        resolve_imports_depth:
+            How deeply to search for those imports.
+        fallback:
+            What to temporarily display while the module is being loaded.
+        unmount_before_update:
+            Cause the component to be unmounted before each update. This option should
+            only be used if the imported package fails to re-render when props change.
+            Using this option has negative performance consequences since all DOM
+            elements must be changed on each render. See :issue:`461` for more info.
+        allow_children:
+            Whether or not these components can have children.
+    """
+    key = f"{url}{resolve_imports}{resolve_imports_depth}{unmount_before_update}"
+    if key in _URL_JS_MODULE_CACHE:
+        module = _URL_JS_MODULE_CACHE[key]
+    else:
+        module = url_to_module(
+            url,
+            fallback=fallback,
+            resolve_imports=resolve_imports,
+            resolve_imports_depth=resolve_imports_depth,
+            unmount_before_update=unmount_before_update,
+        )
+        _URL_JS_MODULE_CACHE[key] = module
+    return module_to_vdom(module, import_names, fallback, allow_children)
+
+
+@overload
+def component_from_npm(
+    package: str,
+    import_names: str,
+    resolve_imports: bool = ...,
+    resolve_imports_depth: int = ...,
+    version: str = "latest",
+    cdn: str = "https://esm.sh",
+    fallback: Any | None = ...,
+    unmount_before_update: bool = ...,
+    allow_children: bool = ...,
+) -> VdomConstructor: ...
+
+
+@overload
+def component_from_npm(
+    package: str,
+    import_names: list[str] | tuple[str, ...],
+    resolve_imports: bool = ...,
+    resolve_imports_depth: int = ...,
+    version: str = "latest",
+    cdn: str = "https://esm.sh",
+    fallback: Any | None = ...,
+    unmount_before_update: bool = ...,
+    allow_children: bool = ...,
+) -> list[VdomConstructor]: ...
+
+
+def component_from_npm(
+    package: str,
+    import_names: str | list[str] | tuple[str, ...],
+    resolve_imports: bool = True,
+    resolve_imports_depth: int = 5,
+    version: str = "latest",
+    cdn: str = "https://esm.sh",
+    fallback: Any | None = None,
+    unmount_before_update: bool = False,
+    allow_children: bool = True,
+) -> VdomConstructor | list[VdomConstructor]:
+    """Import a component from an NPM package.
+
+    Is is mandatory to load `reactpy.reactjs.import_reactjs()` on your page before using this
+    function. It is recommended to put this within your HTML <head> content.
+
+    Parameters:
+        package:
+            The name of the NPM package.
+        import_names:
+            One or more component names to import. If given as a string, a single component
+            will be returned. If a list is given, then a list of components will be
+            returned.
+        resolve_imports:
+            Whether to try and find all the named imports of this module.
+        resolve_imports_depth:
+            How deeply to search for those imports.
+        version:
+            The version of the package to use. Defaults to "latest".
+        cdn:
+            The CDN to use. Defaults to "https://esm.sh".
+        fallback:
+            What to temporarily display while the module is being loaded.
+        unmount_before_update:
+            Cause the component to be unmounted before each update. This option should
+            only be used if the imported package fails to re-render when props change.
+            Using this option has negative performance consequences since all DOM
+            elements must be changed on each render. See :issue:`461` for more info.
+        allow_children:
+            Whether or not these components can have children.
+    """
+    url = f"{cdn}/{package}@{version}"
+
+    if "esm.sh" in cdn:
+        if "?" in url:
+            url += "&external=react,react-dom"
+        else:
+            url += "?external=react,react-dom"
+
+    return component_from_url(
+        url,
+        import_names,
+        fallback=fallback,
+        resolve_imports=resolve_imports,
+        resolve_imports_depth=resolve_imports_depth,
+        unmount_before_update=unmount_before_update,
+        allow_children=allow_children,
+    )
+
+
+@overload
+def component_from_file(
+    file: str | Path,
+    import_names: str,
+    resolve_imports: bool = ...,
+    resolve_imports_depth: int = ...,
+    name: str = "",
+    fallback: Any | None = ...,
+    unmount_before_update: bool = ...,
+    symlink: bool = ...,
+    allow_children: bool = ...,
+) -> VdomConstructor: ...
+
+
+@overload
+def component_from_file(
+    file: str | Path,
+    import_names: list[str] | tuple[str, ...],
+    resolve_imports: bool = ...,
+    resolve_imports_depth: int = ...,
+    name: str = "",
+    fallback: Any | None = ...,
+    unmount_before_update: bool = ...,
+    symlink: bool = ...,
+    allow_children: bool = ...,
+) -> list[VdomConstructor]: ...
+
+
+def component_from_file(
+    file: str | Path,
+    import_names: str | list[str] | tuple[str, ...],
+    resolve_imports: bool = True,
+    resolve_imports_depth: int = 5,
+    name: str = "",
+    fallback: Any | None = None,
+    unmount_before_update: bool = False,
+    symlink: bool = False,
+    allow_children: bool = True,
+) -> VdomConstructor | list[VdomConstructor]:
+    """Import a component from a file.
+
+    Parameters:
+        file:
+            The file from which the content of the web module will be created.
+        import_names:
+            One or more component names to import. If given as a string, a single component
+            will be returned. If a list is given, then a list of components will be
+            returned.
+        resolve_imports:
+            Whether to try and find all the named imports of this module.
+        resolve_imports_depth:
+            How deeply to search for those imports.
+        name:
+            The human-readable name of the ReactJS package
+        fallback:
+            What to temporarily display while the module is being loaded.
+        unmount_before_update:
+            Cause the component to be unmounted before each update. This option should
+            only be used if the imported package fails to re-render when props change.
+            Using this option has negative performance consequences since all DOM
+            elements must be changed on each render. See :issue:`461` for more info.
+        symlink:
+            Whether the web module should be saved as a symlink to the given ``file``.
+        allow_children:
+            Whether or not these components can have children.
+    """
+    name = name or hashlib.sha256(str(file).encode()).hexdigest()[:10]
+    key = f"{name}{resolve_imports}{resolve_imports_depth}{unmount_before_update}"
+    if key in _FILE_JS_MODULE_CACHE:
+        module = _FILE_JS_MODULE_CACHE[key]
+    else:
+        module = file_to_module(
+            name,
+            file,
+            fallback=fallback,
+            resolve_imports=resolve_imports,
+            resolve_imports_depth=resolve_imports_depth,
+            unmount_before_update=unmount_before_update,
+            symlink=symlink,
+        )
+        _FILE_JS_MODULE_CACHE[key] = module
+    return module_to_vdom(module, import_names, fallback, allow_children)
+
+
+@overload
+def component_from_string(
+    content: str,
+    import_names: str,
+    resolve_imports: bool = ...,
+    resolve_imports_depth: int = ...,
+    name: str = "",
+    fallback: Any | None = ...,
+    unmount_before_update: bool = ...,
+    allow_children: bool = ...,
+) -> VdomConstructor: ...
+
+
+@overload
+def component_from_string(
+    content: str,
+    import_names: list[str] | tuple[str, ...],
+    resolve_imports: bool = ...,
+    resolve_imports_depth: int = ...,
+    name: str = "",
+    fallback: Any | None = ...,
+    unmount_before_update: bool = ...,
+    allow_children: bool = ...,
+) -> list[VdomConstructor]: ...
+
+
+def component_from_string(
+    content: str,
+    import_names: str | list[str] | tuple[str, ...],
+    resolve_imports: bool = True,
+    resolve_imports_depth: int = 5,
+    name: str = "",
+    fallback: Any | None = None,
+    unmount_before_update: bool = False,
+    allow_children: bool = True,
+) -> VdomConstructor | list[VdomConstructor]:
+    """Import a component from a string.
+
+    Parameters:
+        content:
+            The contents of the web module
+        import_names:
+            One or more component names to import. If given as a string, a single component
+            will be returned. If a list is given, then a list of components will be
+            returned.
+        resolve_imports:
+            Whether to try and find all the named imports of this module.
+        resolve_imports_depth:
+            How deeply to search for those imports.
+        name:
+            The human-readable name of the ReactJS package
+        fallback:
+            What to temporarily display while the module is being loaded.
+        unmount_before_update:
+            Cause the component to be unmounted before each update. This option should
+            only be used if the imported package fails to re-render when props change.
+            Using this option has negative performance consequences since all DOM
+            elements must be changed on each render. See :issue:`461` for more info.
+        allow_children:
+            Whether or not these components can have children.
+    """
+    name = name or hashlib.sha256(content.encode()).hexdigest()[:10]
+    key = f"{name}{resolve_imports}{resolve_imports_depth}{unmount_before_update}"
+    if key in _STRING_JS_MODULE_CACHE:
+        module = _STRING_JS_MODULE_CACHE[key]
+    else:
+        module = string_to_module(
+            name,
+            content,
+            fallback=fallback,
+            resolve_imports=resolve_imports,
+            resolve_imports_depth=resolve_imports_depth,
+            unmount_before_update=unmount_before_update,
+        )
+        _STRING_JS_MODULE_CACHE[key] = module
+    return module_to_vdom(module, import_names, fallback, allow_children)
diff --git a/src/reactpy/reactjs/module.py b/src/reactpy/reactjs/module.py
new file mode 100644
index 000000000..496c09474
--- /dev/null
+++ b/src/reactpy/reactjs/module.py
@@ -0,0 +1,214 @@
+from __future__ import annotations
+
+import logging
+from pathlib import Path
+from typing import Any
+
+from reactpy import config
+from reactpy.config import REACTPY_WEB_MODULES_DIR
+from reactpy.core.vdom import Vdom
+from reactpy.reactjs.types import NAME_SOURCE, URL_SOURCE
+from reactpy.reactjs.utils import (
+    are_files_identical,
+    copy_file,
+    module_name_suffix,
+    resolve_module_exports_from_file,
+    resolve_module_exports_from_url,
+)
+from reactpy.types import ImportSourceDict, JavaScriptModule, VdomConstructor
+
+logger = logging.getLogger(__name__)
+
+
+def url_to_module(
+    url: str,
+    fallback: Any | None = None,
+    resolve_imports: bool = True,
+    resolve_imports_depth: int = 5,
+    unmount_before_update: bool = False,
+) -> JavaScriptModule:
+    return JavaScriptModule(
+        source=url,
+        source_type=URL_SOURCE,
+        default_fallback=fallback,
+        file=None,
+        export_names=(
+            resolve_module_exports_from_url(url, resolve_imports_depth)
+            if (
+                resolve_imports
+                if resolve_imports is not None
+                else config.REACTPY_DEBUG.current
+            )
+            else None
+        ),
+        unmount_before_update=unmount_before_update,
+    )
+
+
+def file_to_module(
+    name: str,
+    file: str | Path,
+    fallback: Any | None = None,
+    resolve_imports: bool = True,
+    resolve_imports_depth: int = 5,
+    unmount_before_update: bool = False,
+    symlink: bool = False,
+) -> JavaScriptModule:
+    name += module_name_suffix(name)
+
+    source_file = Path(file).resolve()
+    target_file = get_module_path(name)
+    if not source_file.exists():
+        msg = f"Source file does not exist: {source_file}"
+        raise FileNotFoundError(msg)
+
+    if not target_file.exists():
+        copy_file(target_file, source_file, symlink)
+    elif not are_files_identical(source_file, target_file):
+        logger.info(
+            f"Existing web module {name!r} will "
+            f"be replaced with {target_file.resolve()}"
+        )
+        target_file.unlink()
+        copy_file(target_file, source_file, symlink)
+
+    return JavaScriptModule(
+        source=name,
+        source_type=NAME_SOURCE,
+        default_fallback=fallback,
+        file=target_file,
+        export_names=(
+            resolve_module_exports_from_file(source_file, resolve_imports_depth)
+            if (
+                resolve_imports
+                if resolve_imports is not None
+                else config.REACTPY_DEBUG.current
+            )
+            else None
+        ),
+        unmount_before_update=unmount_before_update,
+    )
+
+
+def string_to_module(
+    name: str,
+    content: str,
+    fallback: Any | None = None,
+    resolve_imports: bool = True,
+    resolve_imports_depth: int = 5,
+    unmount_before_update: bool = False,
+) -> JavaScriptModule:
+    name += module_name_suffix(name)
+
+    target_file = get_module_path(name)
+
+    if target_file.exists() and target_file.read_text(encoding="utf-8") != content:
+        logger.info(
+            f"Existing web module {name!r} will "
+            f"be replaced with {target_file.resolve()}"
+        )
+        target_file.unlink()
+
+    target_file.parent.mkdir(parents=True, exist_ok=True)
+    target_file.write_text(content)
+
+    return JavaScriptModule(
+        source=name,
+        source_type=NAME_SOURCE,
+        default_fallback=fallback,
+        file=target_file,
+        export_names=(
+            resolve_module_exports_from_file(target_file, resolve_imports_depth)
+            if (
+                resolve_imports
+                if resolve_imports is not None
+                else config.REACTPY_DEBUG.current
+            )
+            else None
+        ),
+        unmount_before_update=unmount_before_update,
+    )
+
+
+def module_to_vdom(
+    web_module: JavaScriptModule,
+    export_names: str | list[str] | tuple[str, ...],
+    fallback: Any | None = None,
+    allow_children: bool = True,
+) -> VdomConstructor | list[VdomConstructor]:
+    """Return one or more VDOM constructors from a :class:`JavaScriptModule`
+
+    Parameters:
+        export_names:
+            One or more names to export. If given as a string, a single component
+            will be returned. If a list is given, then a list of components will be
+            returned.
+        fallback:
+            What to temporarily display while the module is being loaded.
+        allow_children:
+            Whether or not these components can have children.
+    """
+    if isinstance(export_names, str):
+        if (
+            web_module.export_names is not None
+            and export_names.split(".")[0] not in web_module.export_names
+        ):
+            msg = f"{web_module.source!r} does not export {export_names!r}"
+            raise ValueError(msg)
+        return make_module(web_module, export_names, fallback, allow_children)
+    else:
+        if web_module.export_names is not None:
+            missing = sorted(
+                {e.split(".")[0] for e in export_names}.difference(
+                    web_module.export_names
+                )
+            )
+            if missing:
+                msg = f"{web_module.source!r} does not export {missing!r}"
+                raise ValueError(msg)
+        return [
+            make_module(web_module, name, fallback, allow_children)
+            for name in export_names
+        ]
+
+
+def make_module(
+    web_module: JavaScriptModule,
+    name: str,
+    fallback: Any | None,
+    allow_children: bool,
+) -> VdomConstructor:
+    return Vdom(
+        name,
+        allow_children=allow_children,
+        import_source=ImportSourceDict(
+            source=web_module.source,
+            sourceType=web_module.source_type,
+            fallback=(fallback or web_module.default_fallback),
+            unmountBeforeUpdate=web_module.unmount_before_update,
+        ),
+    )
+
+
+def get_module_path(name: str) -> Path:
+    directory = REACTPY_WEB_MODULES_DIR.current
+    path = directory.joinpath(*name.split("/"))
+    return path.with_suffix(path.suffix)
+
+
+def import_reactjs():
+    from reactpy import config, html
+
+    base_url = config.REACTPY_PATH_PREFIX.current.strip("/")
+    return html.script(
+        {"type": "importmap"},
+        f"""
+        {{
+            "imports": {{
+                "react": "/{base_url}/static/react.js",
+                "react-dom": "/{base_url}/static/react-dom.js",
+                "react/jsx-runtime": "/{base_url}/static/react-jsx-runtime.js"
+            }}
+        }}
+        """,
+    )
diff --git a/src/reactpy/reactjs/types.py b/src/reactpy/reactjs/types.py
new file mode 100644
index 000000000..b465cf734
--- /dev/null
+++ b/src/reactpy/reactjs/types.py
@@ -0,0 +1,7 @@
+from reactpy.types import SourceType
+
+NAME_SOURCE = SourceType("NAME")
+"""A named source - usually a Javascript package name"""
+
+URL_SOURCE = SourceType("URL")
+"""A source loaded from a URL, usually a CDN"""
diff --git a/src/reactpy/reactjs/utils.py b/src/reactpy/reactjs/utils.py
new file mode 100644
index 000000000..b1f989553
--- /dev/null
+++ b/src/reactpy/reactjs/utils.py
@@ -0,0 +1,177 @@
+import filecmp
+import logging
+import re
+import shutil
+from pathlib import Path, PurePosixPath
+from urllib.parse import urlparse, urlunparse
+
+import requests
+
+logger = logging.getLogger(__name__)
+
+
+def module_name_suffix(name: str) -> str:
+    if name.startswith("@"):
+        name = name[1:]
+    head, _, tail = name.partition("@")  # handle version identifier
+    _, _, tail = tail.partition("/")  # get section after version
+    return PurePosixPath(tail or head).suffix or ".js"
+
+
+def resolve_module_exports_from_file(
+    file: Path,
+    max_depth: int,
+    is_re_export: bool = False,
+) -> set[str]:
+    if max_depth == 0:
+        logger.warning(f"Did not resolve all exports for {file} - max depth reached")
+        return set()
+    elif not file.exists():
+        logger.warning(f"Did not resolve exports for unknown file {file}")
+        return set()
+
+    export_names, references = resolve_module_exports_from_source(
+        file.read_text(encoding="utf-8"), exclude_default=is_re_export
+    )
+
+    for ref in references:
+        if urlparse(ref).scheme:  # is an absolute URL
+            export_names.update(
+                resolve_module_exports_from_url(ref, max_depth - 1, is_re_export=True)
+            )
+        else:
+            path = file.parent.joinpath(*ref.split("/"))
+            export_names.update(
+                resolve_module_exports_from_file(path, max_depth - 1, is_re_export=True)
+            )
+
+    return export_names
+
+
+def resolve_module_exports_from_url(
+    url: str,
+    max_depth: int,
+    is_re_export: bool = False,
+) -> set[str]:
+    if max_depth == 0:
+        logger.warning(f"Did not resolve all exports for {url} - max depth reached")
+        return set()
+
+    try:
+        text = requests.get(url, timeout=5).text
+    except requests.exceptions.ConnectionError as error:
+        reason = "" if error is None else " - {error.errno}"
+        logger.warning(f"Did not resolve exports for url {url} {reason}")
+        return set()
+
+    export_names, references = resolve_module_exports_from_source(
+        text, exclude_default=is_re_export
+    )
+
+    for ref in references:
+        url = resolve_relative_url(url, ref)
+        export_names.update(
+            resolve_module_exports_from_url(url, max_depth - 1, is_re_export=True)
+        )
+
+    return export_names
+
+
+def resolve_module_exports_from_source(
+    content: str, exclude_default: bool
+) -> tuple[set[str], set[str]]:
+    names: set[str] = set()
+    references: set[str] = set()
+
+    if _JS_DEFAULT_EXPORT_PATTERN.search(content):
+        names.add("default")
+
+    # Exporting functions and classes
+    names.update(_JS_FUNC_OR_CLS_EXPORT_PATTERN.findall(content))
+
+    for export in _JS_GENERAL_EXPORT_PATTERN.findall(content):
+        export = export.rstrip(";").strip()
+        # Exporting individual features
+        if export.startswith("let "):
+            names.update(let.split("=", 1)[0] for let in export[4:].split(","))
+        # Renaming exports and export list
+        elif export.startswith("{") and export.endswith("}"):
+            names.update(
+                item.split(" as ", 1)[-1] for item in export.strip("{}").split(",")
+            )
+        # Exporting destructured assignments with renaming
+        elif export.startswith("const "):
+            names.update(
+                item.split(":", 1)[0]
+                for item in export[6:].split("=", 1)[0].strip("{}").split(",")
+            )
+        # Default exports
+        elif export.startswith("default "):
+            names.add("default")
+        # Aggregating modules
+        elif export.startswith("* as "):
+            names.add(export[5:].split(" from ", 1)[0])
+        elif export.startswith("* "):
+            references.add(export[2:].split("from ", 1)[-1].strip("'\""))
+        elif export.startswith("{") and " from " in export:
+            names.update(
+                item.split(" as ", 1)[-1]
+                for item in export.split(" from ")[0].strip("{}").split(",")
+            )
+        elif not (export.startswith("function ") or export.startswith("class ")):
+            logger.warning(f"Unknown export type {export!r}")
+
+    names = {n.strip() for n in names}
+    references = {r.strip() for r in references}
+
+    if exclude_default and "default" in names:
+        names.remove("default")
+
+    return names, references
+
+
+def resolve_relative_url(base_url: str, rel_url: str) -> str:
+    if not rel_url.startswith("."):
+        if rel_url.startswith("/"):
+            # copy scheme and hostname from base_url
+            return urlunparse(urlparse(base_url)[:2] + urlparse(rel_url)[2:])
+        else:
+            return rel_url
+
+    base_url = base_url.rsplit("/", 1)[0]
+
+    if rel_url.startswith("./"):
+        return base_url + rel_url[1:]
+
+    while rel_url.startswith("../"):
+        base_url = base_url.rsplit("/", 1)[0]
+        rel_url = rel_url[3:]
+
+    return f"{base_url}/{rel_url}"
+
+
+def are_files_identical(f1: Path, f2: Path) -> bool:
+    f1 = f1.resolve()
+    f2 = f2.resolve()
+    return (
+        (f1.is_symlink() or f2.is_symlink()) and (f1.resolve() == f2.resolve())
+    ) or filecmp.cmp(str(f1), str(f2), shallow=False)
+
+
+def copy_file(target: Path, source: Path, symlink: bool) -> None:
+    target.parent.mkdir(parents=True, exist_ok=True)
+    if symlink:
+        target.symlink_to(source)
+    else:
+        shutil.copy(source, target)
+
+
+_JS_DEFAULT_EXPORT_PATTERN = re.compile(
+    r";?\s*export\s+default\s",
+)
+_JS_FUNC_OR_CLS_EXPORT_PATTERN = re.compile(
+    r";?\s*export\s+(?:function|class)\s+([a-zA-Z_$][0-9a-zA-Z_$]*)"
+)
+_JS_GENERAL_EXPORT_PATTERN = re.compile(
+    r"(?:^|;|})\s*export(?=\s+|{)(.*?)(?=;|$)", re.MULTILINE
+)
diff --git a/src/reactpy/types.py b/src/reactpy/types.py
index 21cc71b21..da747a3c4 100644
--- a/src/reactpy/types.py
+++ b/src/reactpy/types.py
@@ -10,6 +10,7 @@
     Generic,
     Literal,
     NamedTuple,
+    NewType,
     NotRequired,
     Protocol,
     TypeAlias,
@@ -1132,3 +1133,16 @@ def preventDefault(self) -> None:
 
     def stopPropagation(self) -> None:
         """Stop the event from propagating."""
+
+
+SourceType = NewType("SourceType", str)
+
+
+@dataclass(frozen=True)
+class JavaScriptModule:
+    source: str
+    source_type: SourceType
+    default_fallback: Any | None
+    export_names: set[str] | None
+    file: Path | None
+    unmount_before_update: bool
diff --git a/src/reactpy/web/__init__.py b/src/reactpy/web/__init__.py
index aed8e7e4f..f27d58ff9 100644
--- a/src/reactpy/web/__init__.py
+++ b/src/reactpy/web/__init__.py
@@ -3,13 +3,6 @@
     module_from_file,
     module_from_string,
     module_from_url,
-    reactjs_component_from_file,
-    reactjs_component_from_npm,
-    reactjs_component_from_string,
-    reactjs_component_from_url,
-)
-from reactpy.web.utils import (
-    reactjs_import_map,
 )
 
 __all__ = [
@@ -17,9 +10,4 @@
     "module_from_file",
     "module_from_string",
     "module_from_url",
-    "reactjs_component_from_file",
-    "reactjs_component_from_npm",
-    "reactjs_component_from_string",
-    "reactjs_component_from_url",
-    "reactjs_import_map",
 ]
diff --git a/src/reactpy/web/module.py b/src/reactpy/web/module.py
index 8d63818df..71c00ca2f 100644
--- a/src/reactpy/web/module.py
+++ b/src/reactpy/web/module.py
@@ -1,358 +1,28 @@
 from __future__ import annotations
 
-import filecmp
-import hashlib
-import logging
-import shutil
-from dataclasses import dataclass
 from pathlib import Path
-from typing import Any, NewType, overload
+from typing import Any, overload
 
 from reactpy._warnings import warn
-from reactpy.config import REACTPY_DEBUG, REACTPY_WEB_MODULES_DIR
-from reactpy.core.vdom import Vdom
-from reactpy.types import ImportSourceDict, VdomConstructor
-from reactpy.web.utils import (
-    module_name_suffix,
-    resolve_module_exports_from_file,
-    resolve_module_exports_from_url,
+from reactpy.reactjs.types import (
+    NAME_SOURCE,
+    URL_SOURCE,
+    SourceType,
 )
-
-logger = logging.getLogger(__name__)
-
-SourceType = NewType("SourceType", str)
-
-NAME_SOURCE = SourceType("NAME")
-"""A named source - usually a Javascript package name"""
-
-URL_SOURCE = SourceType("URL")
-"""A source loaded from a URL, usually a CDN"""
-
-
-_URL_WEB_MODULE_CACHE: dict[str, WebModule] = {}
-_FILE_WEB_MODULE_CACHE: dict[str, WebModule] = {}
-_STRING_WEB_MODULE_CACHE: dict[str, WebModule] = {}
-
-
-@overload
-def reactjs_component_from_url(
-    url: str,
-    import_names: str,
-    resolve_imports: bool = ...,
-    resolve_imports_depth: int = ...,
-    fallback: Any | None = ...,
-    unmount_before_update: bool = ...,
-    allow_children: bool = ...,
-) -> VdomConstructor: ...
-
-
-@overload
-def reactjs_component_from_url(
-    url: str,
-    import_names: list[str] | tuple[str, ...],
-    resolve_imports: bool = ...,
-    resolve_imports_depth: int = ...,
-    fallback: Any | None = ...,
-    unmount_before_update: bool = ...,
-    allow_children: bool = ...,
-) -> list[VdomConstructor]: ...
-
-
-def reactjs_component_from_url(
-    url: str,
-    import_names: str | list[str] | tuple[str, ...],
-    resolve_imports: bool = True,
-    resolve_imports_depth: int = 5,
-    fallback: Any | None = None,
-    unmount_before_update: bool = False,
-    allow_children: bool = True,
-) -> VdomConstructor | list[VdomConstructor]:
-    """Import a component from a URL.
-
-    Parameters:
-        url:
-            The URL to import the component from.
-        import_names:
-            One or more component names to import. If given as a string, a single component
-            will be returned. If a list is given, then a list of components will be
-            returned.
-        resolve_imports:
-            Whether to try and find all the named imports of this module.
-        resolve_imports_depth:
-            How deeply to search for those imports.
-        fallback:
-            What to temporarily display while the module is being loaded.
-        unmount_before_update:
-            Cause the component to be unmounted before each update. This option should
-            only be used if the imported package fails to re-render when props change.
-            Using this option has negative performance consequences since all DOM
-            elements must be changed on each render. See :issue:`461` for more info.
-        allow_children:
-            Whether or not these components can have children.
-    """
-    key = f"{url}{resolve_imports}{resolve_imports_depth}{unmount_before_update}"
-    if key in _URL_WEB_MODULE_CACHE:
-        module = _URL_WEB_MODULE_CACHE[key]
-    else:
-        module = _module_from_url(
-            url,
-            fallback=fallback,
-            resolve_imports=resolve_imports,
-            resolve_imports_depth=resolve_imports_depth,
-            unmount_before_update=unmount_before_update,
-        )
-        _URL_WEB_MODULE_CACHE[key] = module
-    return _vdom_from_web_module(module, import_names, fallback, allow_children)
-
-
-@overload
-def reactjs_component_from_npm(
-    package: str,
-    import_names: str,
-    resolve_imports: bool = ...,
-    resolve_imports_depth: int = ...,
-    version: str = "latest",
-    cdn: str = "https://esm.sh",
-    fallback: Any | None = ...,
-    unmount_before_update: bool = ...,
-    allow_children: bool = ...,
-) -> VdomConstructor: ...
-
-
-@overload
-def reactjs_component_from_npm(
-    package: str,
-    import_names: list[str] | tuple[str, ...],
-    resolve_imports: bool = ...,
-    resolve_imports_depth: int = ...,
-    version: str = "latest",
-    cdn: str = "https://esm.sh",
-    fallback: Any | None = ...,
-    unmount_before_update: bool = ...,
-    allow_children: bool = ...,
-) -> list[VdomConstructor]: ...
-
-
-def reactjs_component_from_npm(
-    package: str,
-    import_names: str | list[str] | tuple[str, ...],
-    resolve_imports: bool = True,
-    resolve_imports_depth: int = 5,
-    version: str = "latest",
-    cdn: str = "https://esm.sh",
-    fallback: Any | None = None,
-    unmount_before_update: bool = False,
-    allow_children: bool = True,
-) -> VdomConstructor | list[VdomConstructor]:
-    """Import a component from an NPM package.
-
-    Is is mandatory to load `reactpy.web.reactjs_import_map()` on your page before using this
-    function. It is recommended to put this within your HTML <head> content.
-
-    Parameters:
-        package:
-            The name of the NPM package.
-        import_names:
-            One or more component names to import. If given as a string, a single component
-            will be returned. If a list is given, then a list of components will be
-            returned.
-        resolve_imports:
-            Whether to try and find all the named imports of this module.
-        resolve_imports_depth:
-            How deeply to search for those imports.
-        version:
-            The version of the package to use. Defaults to "latest".
-        cdn:
-            The CDN to use. Defaults to "https://esm.sh".
-        fallback:
-            What to temporarily display while the module is being loaded.
-        unmount_before_update:
-            Cause the component to be unmounted before each update. This option should
-            only be used if the imported package fails to re-render when props change.
-            Using this option has negative performance consequences since all DOM
-            elements must be changed on each render. See :issue:`461` for more info.
-        allow_children:
-            Whether or not these components can have children.
-    """
-    url = f"{cdn}/{package}@{version}"
-
-    if "esm.sh" in cdn:
-        if "?" in url:
-            url += "&external=react,react-dom"
-        else:
-            url += "?external=react,react-dom"
-
-    return reactjs_component_from_url(
-        url,
-        import_names,
-        fallback=fallback,
-        resolve_imports=resolve_imports,
-        resolve_imports_depth=resolve_imports_depth,
-        unmount_before_update=unmount_before_update,
-        allow_children=allow_children,
-    )
-
-
-@overload
-def reactjs_component_from_file(
-    file: str | Path,
-    import_names: str,
-    resolve_imports: bool = ...,
-    resolve_imports_depth: int = ...,
-    name: str = "",
-    fallback: Any | None = ...,
-    unmount_before_update: bool = ...,
-    symlink: bool = ...,
-    allow_children: bool = ...,
-) -> VdomConstructor: ...
-
-
-@overload
-def reactjs_component_from_file(
-    file: str | Path,
-    import_names: list[str] | tuple[str, ...],
-    resolve_imports: bool = ...,
-    resolve_imports_depth: int = ...,
-    name: str = "",
-    fallback: Any | None = ...,
-    unmount_before_update: bool = ...,
-    symlink: bool = ...,
-    allow_children: bool = ...,
-) -> list[VdomConstructor]: ...
-
-
-def reactjs_component_from_file(
-    file: str | Path,
-    import_names: str | list[str] | tuple[str, ...],
-    resolve_imports: bool = True,
-    resolve_imports_depth: int = 5,
-    name: str = "",
-    fallback: Any | None = None,
-    unmount_before_update: bool = False,
-    symlink: bool = False,
-    allow_children: bool = True,
-) -> VdomConstructor | list[VdomConstructor]:
-    """Import a component from a file.
-
-    Parameters:
-        file:
-            The file from which the content of the web module will be created.
-        import_names:
-            One or more component names to import. If given as a string, a single component
-            will be returned. If a list is given, then a list of components will be
-            returned.
-        resolve_imports:
-            Whether to try and find all the named imports of this module.
-        resolve_imports_depth:
-            How deeply to search for those imports.
-        name:
-            The human-readable name of the ReactJS package
-        fallback:
-            What to temporarily display while the module is being loaded.
-        unmount_before_update:
-            Cause the component to be unmounted before each update. This option should
-            only be used if the imported package fails to re-render when props change.
-            Using this option has negative performance consequences since all DOM
-            elements must be changed on each render. See :issue:`461` for more info.
-        symlink:
-            Whether the web module should be saved as a symlink to the given ``file``.
-        allow_children:
-            Whether or not these components can have children.
-    """
-    name = name or hashlib.sha256(str(file).encode()).hexdigest()[:10]
-    key = f"{name}{resolve_imports}{resolve_imports_depth}{unmount_before_update}"
-    if key in _FILE_WEB_MODULE_CACHE:
-        module = _FILE_WEB_MODULE_CACHE[key]
-    else:
-        module = _module_from_file(
-            name,
-            file,
-            fallback=fallback,
-            resolve_imports=resolve_imports,
-            resolve_imports_depth=resolve_imports_depth,
-            unmount_before_update=unmount_before_update,
-            symlink=symlink,
-        )
-        _FILE_WEB_MODULE_CACHE[key] = module
-    return _vdom_from_web_module(module, import_names, fallback, allow_children)
-
-
-@overload
-def reactjs_component_from_string(
-    content: str,
-    import_names: str,
-    resolve_imports: bool = ...,
-    resolve_imports_depth: int = ...,
-    name: str = "",
-    fallback: Any | None = ...,
-    unmount_before_update: bool = ...,
-    allow_children: bool = ...,
-) -> VdomConstructor: ...
-
-
-@overload
-def reactjs_component_from_string(
-    content: str,
-    import_names: list[str] | tuple[str, ...],
-    resolve_imports: bool = ...,
-    resolve_imports_depth: int = ...,
-    name: str = "",
-    fallback: Any | None = ...,
-    unmount_before_update: bool = ...,
-    allow_children: bool = ...,
-) -> list[VdomConstructor]: ...
-
-
-def reactjs_component_from_string(
-    content: str,
-    import_names: str | list[str] | tuple[str, ...],
-    resolve_imports: bool = True,
-    resolve_imports_depth: int = 5,
-    name: str = "",
-    fallback: Any | None = None,
-    unmount_before_update: bool = False,
-    allow_children: bool = True,
-) -> VdomConstructor | list[VdomConstructor]:
-    """Import a component from a string.
-
-    Parameters:
-        content:
-            The contents of the web module
-        import_names:
-            One or more component names to import. If given as a string, a single component
-            will be returned. If a list is given, then a list of components will be
-            returned.
-        resolve_imports:
-            Whether to try and find all the named imports of this module.
-        resolve_imports_depth:
-            How deeply to search for those imports.
-        name:
-            The human-readable name of the ReactJS package
-        fallback:
-            What to temporarily display while the module is being loaded.
-        unmount_before_update:
-            Cause the component to be unmounted before each update. This option should
-            only be used if the imported package fails to re-render when props change.
-            Using this option has negative performance consequences since all DOM
-            elements must be changed on each render. See :issue:`461` for more info.
-        allow_children:
-            Whether or not these components can have children.
-    """
-    name = name or hashlib.sha256(content.encode()).hexdigest()[:10]
-    key = f"{name}{resolve_imports}{resolve_imports_depth}{unmount_before_update}"
-    if key in _STRING_WEB_MODULE_CACHE:
-        module = _STRING_WEB_MODULE_CACHE[key]
-    else:
-        module = _module_from_string(
-            name,
-            content,
-            fallback=fallback,
-            resolve_imports=resolve_imports,
-            resolve_imports_depth=resolve_imports_depth,
-            unmount_before_update=unmount_before_update,
-        )
-        _STRING_WEB_MODULE_CACHE[key] = module
-    return _vdom_from_web_module(module, import_names, fallback, allow_children)
+from reactpy.types import JavaScriptModule as WebModule
+from reactpy.types import VdomConstructor
+
+# Re-export for backward compatibility
+__all__ = [
+    "NAME_SOURCE",
+    "URL_SOURCE",
+    "SourceType",
+    "WebModule",
+    "export",
+    "module_from_file",
+    "module_from_string",
+    "module_from_url",
+]
 
 
 def module_from_url(
@@ -363,10 +33,12 @@ def module_from_url(
     unmount_before_update: bool = False,
 ) -> WebModule:  # pragma: no cover
     warn(
-        "module_from_url is deprecated, use reactjs_component_from_url instead",
+        "module_from_url is deprecated, use component_from_url instead",
         DeprecationWarning,
     )
-    return _module_from_url(
+    from reactpy.reactjs.module import url_to_module
+
+    return url_to_module(
         url,
         fallback=fallback,
         resolve_imports=resolve_exports,
@@ -385,10 +57,12 @@ def module_from_file(
     symlink: bool = False,
 ) -> WebModule:  # pragma: no cover
     warn(
-        "module_from_file is deprecated, use reactjs_component_from_file instead",
+        "module_from_file is deprecated, use component_from_file instead",
         DeprecationWarning,
     )
-    return _module_from_file(
+    from reactpy.reactjs.module import file_to_module
+
+    return file_to_module(
         name,
         file,
         fallback=fallback,
@@ -408,10 +82,12 @@ def module_from_string(
     unmount_before_update: bool = False,
 ) -> WebModule:  # pragma: no cover
     warn(
-        "module_from_string is deprecated, use reactjs_component_from_string instead",
+        "module_from_string is deprecated, use component_from_string instead",
         DeprecationWarning,
     )
-    return _module_from_string(
+    from reactpy.reactjs.module import string_to_module
+
+    return string_to_module(
         name,
         content,
         fallback=fallback,
@@ -421,142 +97,6 @@ def module_from_string(
     )
 
 
-def _module_from_url(
-    url: str,
-    fallback: Any | None = None,
-    resolve_imports: bool = True,
-    resolve_imports_depth: int = 5,
-    unmount_before_update: bool = False,
-) -> WebModule:
-    return WebModule(
-        source=url,
-        source_type=URL_SOURCE,
-        default_fallback=fallback,
-        file=None,
-        export_names=(
-            resolve_module_exports_from_url(url, resolve_imports_depth)
-            if (
-                resolve_imports
-                if resolve_imports is not None
-                else REACTPY_DEBUG.current
-            )
-            else None
-        ),
-        unmount_before_update=unmount_before_update,
-    )
-
-
-def _module_from_file(
-    name: str,
-    file: str | Path,
-    fallback: Any | None = None,
-    resolve_imports: bool = True,
-    resolve_imports_depth: int = 5,
-    unmount_before_update: bool = False,
-    symlink: bool = False,
-) -> WebModule:
-    name += module_name_suffix(name)
-
-    source_file = Path(file).resolve()
-    target_file = _web_module_path(name)
-    if not source_file.exists():
-        msg = f"Source file does not exist: {source_file}"
-        raise FileNotFoundError(msg)
-
-    if not target_file.exists():
-        _copy_file(target_file, source_file, symlink)
-    elif not _equal_files(source_file, target_file):
-        logger.info(
-            f"Existing web module {name!r} will "
-            f"be replaced with {target_file.resolve()}"
-        )
-        target_file.unlink()
-        _copy_file(target_file, source_file, symlink)
-
-    return WebModule(
-        source=name,
-        source_type=NAME_SOURCE,
-        default_fallback=fallback,
-        file=target_file,
-        export_names=(
-            resolve_module_exports_from_file(source_file, resolve_imports_depth)
-            if (
-                resolve_imports
-                if resolve_imports is not None
-                else REACTPY_DEBUG.current
-            )
-            else None
-        ),
-        unmount_before_update=unmount_before_update,
-    )
-
-
-def _equal_files(f1: Path, f2: Path) -> bool:
-    f1 = f1.resolve()
-    f2 = f2.resolve()
-    return (
-        (f1.is_symlink() or f2.is_symlink()) and (f1.resolve() == f2.resolve())
-    ) or filecmp.cmp(str(f1), str(f2), shallow=False)
-
-
-def _copy_file(target: Path, source: Path, symlink: bool) -> None:
-    target.parent.mkdir(parents=True, exist_ok=True)
-    if symlink:
-        target.symlink_to(source)
-    else:
-        shutil.copy(source, target)
-
-
-def _module_from_string(
-    name: str,
-    content: str,
-    fallback: Any | None = None,
-    resolve_imports: bool = True,
-    resolve_imports_depth: int = 5,
-    unmount_before_update: bool = False,
-) -> WebModule:
-    name += module_name_suffix(name)
-
-    target_file = _web_module_path(name)
-
-    if target_file.exists() and target_file.read_text(encoding="utf-8") != content:
-        logger.info(
-            f"Existing web module {name!r} will "
-            f"be replaced with {target_file.resolve()}"
-        )
-        target_file.unlink()
-
-    target_file.parent.mkdir(parents=True, exist_ok=True)
-    target_file.write_text(content)
-
-    return WebModule(
-        source=name,
-        source_type=NAME_SOURCE,
-        default_fallback=fallback,
-        file=target_file,
-        export_names=(
-            resolve_module_exports_from_file(target_file, resolve_imports_depth)
-            if (
-                resolve_imports
-                if resolve_imports is not None
-                else REACTPY_DEBUG.current
-            )
-            else None
-        ),
-        unmount_before_update=unmount_before_update,
-    )
-
-
-@dataclass(frozen=True)
-class WebModule:
-    source: str
-    source_type: SourceType
-    default_fallback: Any | None
-    export_names: set[str] | None
-    file: Path | None
-    unmount_before_update: bool
-
-
 @overload
 def export(
     web_module: WebModule,
@@ -582,73 +122,9 @@ def export(
     allow_children: bool = True,
 ) -> VdomConstructor | list[VdomConstructor]:  # pragma: no cover
     warn(
-        "export is deprecated, use reactjs_component_from_* functions instead",
+        "export is deprecated, use component_from_* functions instead",
         DeprecationWarning,
     )
-    return _vdom_from_web_module(web_module, export_names, fallback, allow_children)
-
-
-def _vdom_from_web_module(
-    web_module: WebModule,
-    export_names: str | list[str] | tuple[str, ...],
-    fallback: Any | None = None,
-    allow_children: bool = True,
-) -> VdomConstructor | list[VdomConstructor]:
-    """Return one or more VDOM constructors from a :class:`WebModule`
-
-    Parameters:
-        export_names:
-            One or more names to export. If given as a string, a single component
-            will be returned. If a list is given, then a list of components will be
-            returned.
-        fallback:
-            What to temporarily display while the module is being loaded.
-        allow_children:
-            Whether or not these components can have children.
-    """
-    if isinstance(export_names, str):
-        if (
-            web_module.export_names is not None
-            and export_names.split(".")[0] not in web_module.export_names
-        ):
-            msg = f"{web_module.source!r} does not export {export_names!r}"
-            raise ValueError(msg)
-        return _make_export(web_module, export_names, fallback, allow_children)
-    else:
-        if web_module.export_names is not None:
-            missing = sorted(
-                {e.split(".")[0] for e in export_names}.difference(
-                    web_module.export_names
-                )
-            )
-            if missing:
-                msg = f"{web_module.source!r} does not export {missing!r}"
-                raise ValueError(msg)
-        return [
-            _make_export(web_module, name, fallback, allow_children)
-            for name in export_names
-        ]
-
-
-def _make_export(
-    web_module: WebModule,
-    name: str,
-    fallback: Any | None,
-    allow_children: bool,
-) -> VdomConstructor:
-    return Vdom(
-        name,
-        allow_children=allow_children,
-        import_source=ImportSourceDict(
-            source=web_module.source,
-            sourceType=web_module.source_type,
-            fallback=(fallback or web_module.default_fallback),
-            unmountBeforeUpdate=web_module.unmount_before_update,
-        ),
-    )
-
+    from reactpy.reactjs.module import module_to_vdom
 
-def _web_module_path(name: str) -> Path:
-    directory = REACTPY_WEB_MODULES_DIR.current
-    path = directory.joinpath(*name.split("/"))
-    return path.with_suffix(path.suffix)
+    return module_to_vdom(web_module, export_names, fallback, allow_children)
diff --git a/src/reactpy/web/utils.py b/src/reactpy/web/utils.py
index ea75940ca..40dd3225a 100644
--- a/src/reactpy/web/utils.py
+++ b/src/reactpy/web/utils.py
@@ -1,177 +1,4 @@
-import logging
-import re
-from pathlib import Path, PurePosixPath
-from urllib.parse import urlparse, urlunparse
-
-import requests
-
-logger = logging.getLogger(__name__)
-
-
-def module_name_suffix(name: str) -> str:
-    if name.startswith("@"):
-        name = name[1:]
-    head, _, tail = name.partition("@")  # handle version identifier
-    _, _, tail = tail.partition("/")  # get section after version
-    return PurePosixPath(tail or head).suffix or ".js"
-
-
-def resolve_module_exports_from_file(
-    file: Path,
-    max_depth: int,
-    is_re_export: bool = False,
-) -> set[str]:
-    if max_depth == 0:
-        logger.warning(f"Did not resolve all exports for {file} - max depth reached")
-        return set()
-    elif not file.exists():
-        logger.warning(f"Did not resolve exports for unknown file {file}")
-        return set()
-
-    export_names, references = resolve_module_exports_from_source(
-        file.read_text(encoding="utf-8"), exclude_default=is_re_export
-    )
-
-    for ref in references:
-        if urlparse(ref).scheme:  # is an absolute URL
-            export_names.update(
-                resolve_module_exports_from_url(ref, max_depth - 1, is_re_export=True)
-            )
-        else:
-            path = file.parent.joinpath(*ref.split("/"))
-            export_names.update(
-                resolve_module_exports_from_file(path, max_depth - 1, is_re_export=True)
-            )
-
-    return export_names
-
-
-def resolve_module_exports_from_url(
-    url: str,
-    max_depth: int,
-    is_re_export: bool = False,
-) -> set[str]:
-    if max_depth == 0:
-        logger.warning(f"Did not resolve all exports for {url} - max depth reached")
-        return set()
-
-    try:
-        text = requests.get(url, timeout=5).text
-    except requests.exceptions.ConnectionError as error:
-        reason = "" if error is None else " - {error.errno}"
-        logger.warning("Did not resolve exports for url " + url + reason)
-        return set()
-
-    export_names, references = resolve_module_exports_from_source(
-        text, exclude_default=is_re_export
-    )
-
-    for ref in references:
-        url = _resolve_relative_url(url, ref)
-        export_names.update(
-            resolve_module_exports_from_url(url, max_depth - 1, is_re_export=True)
-        )
-
-    return export_names
-
-
-def resolve_module_exports_from_source(
-    content: str, exclude_default: bool
-) -> tuple[set[str], set[str]]:
-    names: set[str] = set()
-    references: set[str] = set()
-
-    if _JS_DEFAULT_EXPORT_PATTERN.search(content):
-        names.add("default")
-
-    # Exporting functions and classes
-    names.update(_JS_FUNC_OR_CLS_EXPORT_PATTERN.findall(content))
-
-    for export in _JS_GENERAL_EXPORT_PATTERN.findall(content):
-        export = export.rstrip(";").strip()
-        # Exporting individual features
-        if export.startswith("let "):
-            names.update(let.split("=", 1)[0] for let in export[4:].split(","))
-        # Renaming exports and export list
-        elif export.startswith("{") and export.endswith("}"):
-            names.update(
-                item.split(" as ", 1)[-1] for item in export.strip("{}").split(",")
-            )
-        # Exporting destructured assignments with renaming
-        elif export.startswith("const "):
-            names.update(
-                item.split(":", 1)[0]
-                for item in export[6:].split("=", 1)[0].strip("{}").split(",")
-            )
-        # Default exports
-        elif export.startswith("default "):
-            names.add("default")
-        # Aggregating modules
-        elif export.startswith("* as "):
-            names.add(export[5:].split(" from ", 1)[0])
-        elif export.startswith("* "):
-            references.add(export[2:].split("from ", 1)[-1].strip("'\""))
-        elif export.startswith("{") and " from " in export:
-            names.update(
-                item.split(" as ", 1)[-1]
-                for item in export.split(" from ")[0].strip("{}").split(",")
-            )
-        elif not (export.startswith("function ") or export.startswith("class ")):
-            logger.warning(f"Unknown export type {export!r}")
-
-    names = {n.strip() for n in names}
-    references = {r.strip() for r in references}
-
-    if exclude_default and "default" in names:
-        names.remove("default")
-
-    return names, references
-
-
-def reactjs_import_map():
-    from reactpy import config, html
-
-    base_url = config.REACTPY_PATH_PREFIX.current.strip("/")
-    return html.script(
-        {"type": "importmap"},
-        f"""
-        {{
-            "imports": {{
-                "react": "/{base_url}/static/react.js",
-                "react-dom": "/{base_url}/static/react-dom.js",
-                "react/jsx-runtime": "/{base_url}/static/react-jsx-runtime.js"
-            }}
-        }}
-        """,
-    )
-
-
-def _resolve_relative_url(base_url: str, rel_url: str) -> str:
-    if not rel_url.startswith("."):
-        if rel_url.startswith("/"):
-            # copy scheme and hostname from base_url
-            return urlunparse(urlparse(base_url)[:2] + urlparse(rel_url)[2:])
-        else:
-            return rel_url
-
-    base_url = base_url.rsplit("/", 1)[0]
-
-    if rel_url.startswith("./"):
-        return base_url + rel_url[1:]
-
-    while rel_url.startswith("../"):
-        base_url = base_url.rsplit("/", 1)[0]
-        rel_url = rel_url[3:]
-
-    return f"{base_url}/{rel_url}"
-
-
-_JS_DEFAULT_EXPORT_PATTERN = re.compile(
-    r";?\s*export\s+default\s",
-)
-_JS_FUNC_OR_CLS_EXPORT_PATTERN = re.compile(
-    r";?\s*export\s+(?:function|class)\s+([a-zA-Z_$][0-9a-zA-Z_$]*)"
-)
-_JS_GENERAL_EXPORT_PATTERN = re.compile(
-    r"(?:^|;|})\s*export(?=\s+|{)(.*?)(?=;|$)", re.MULTILINE
+# nocov
+raise ImportError(
+    "WARNING: reactpy.web.utils was not within the public API, and thus has been removed without notice."
 )
diff --git a/tests/test_reactjs/__init__.py b/tests/test_reactjs/__init__.py
new file mode 100644
index 000000000..e69de29bb
diff --git a/tests/test_reactjs/js_fixtures/callable-prop.js b/tests/test_reactjs/js_fixtures/callable-prop.js
new file mode 100644
index 000000000..d16dd333a
--- /dev/null
+++ b/tests/test_reactjs/js_fixtures/callable-prop.js
@@ -0,0 +1,24 @@
+import { h, render } from "https://unpkg.com/preact?module";
+import htm from "https://unpkg.com/htm?module";
+
+const html = htm.bind(h);
+
+export function bind(node, config) {
+  return {
+    create: (type, props, children) => h(type, props, ...children),
+    render: (element) => render(element, node),
+    unmount: () => render(null, node),
+  };
+}
+
+export function Component(props) {
+  var text = "DEFAULT";
+  if (props.setText && typeof props.setText === "function") {
+    text = props.setText("PREFIX TEXT: ");
+  }
+  return html`
+    <div id="${props.id}">
+    ${text}
+    </div>
+  `;
+}
diff --git a/tests/test_reactjs/js_fixtures/component-can-have-child.js b/tests/test_reactjs/js_fixtures/component-can-have-child.js
new file mode 100644
index 000000000..fd443b164
--- /dev/null
+++ b/tests/test_reactjs/js_fixtures/component-can-have-child.js
@@ -0,0 +1,27 @@
+import { h, render } from "https://unpkg.com/preact?module";
+import htm from "https://unpkg.com/htm?module";
+
+const html = htm.bind(h);
+
+export function bind(node, config) {
+  return {
+    create: (type, props, children) => h(type, props, ...children),
+    render: (element) => render(element, node),
+    unmount: () => render(null, node),
+  };
+}
+
+// The intention here is that Child components are passed in here so we check that the
+// children of "the-parent" are "child-1" through "child-N"
+export function Parent(props) {
+  return html`
+    <div>
+      <p>the parent</p>
+      <ul id="the-parent">${props.children}</div>
+    </div>
+  `;
+}
+
+export function Child({ index }) {
+  return html`<li id="child-${index}">child ${index}</li>`;
+}
diff --git a/tests/test_reactjs/js_fixtures/export-resolution/index.js b/tests/test_reactjs/js_fixtures/export-resolution/index.js
new file mode 100644
index 000000000..372f108bd
--- /dev/null
+++ b/tests/test_reactjs/js_fixtures/export-resolution/index.js
@@ -0,0 +1,2 @@
+export { index as Index };
+export * from "./one.js";
diff --git a/tests/test_reactjs/js_fixtures/export-resolution/one.js b/tests/test_reactjs/js_fixtures/export-resolution/one.js
new file mode 100644
index 000000000..ddea9d2cb
--- /dev/null
+++ b/tests/test_reactjs/js_fixtures/export-resolution/one.js
@@ -0,0 +1,5 @@
+export { one as One };
+// use ../ just to check that it works
+export * from "../export-resolution/two.js";
+// this default should not be exported by the * re-export in index.js
+export default 0;
diff --git a/tests/test_reactjs/js_fixtures/export-resolution/two.js b/tests/test_reactjs/js_fixtures/export-resolution/two.js
new file mode 100644
index 000000000..f01389d2e
--- /dev/null
+++ b/tests/test_reactjs/js_fixtures/export-resolution/two.js
@@ -0,0 +1,2 @@
+export { two as Two };
+export * from "https://some.external.url";
diff --git a/tests/test_reactjs/js_fixtures/exports-syntax.js b/tests/test_reactjs/js_fixtures/exports-syntax.js
new file mode 100644
index 000000000..8f9b0e612
--- /dev/null
+++ b/tests/test_reactjs/js_fixtures/exports-syntax.js
@@ -0,0 +1,23 @@
+// Copied from: https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export
+
+// Exporting individual features
+export let name1, name2, name3; // also var, const
+export let name4 = 4, name5 = 5, name6; // also var, const
+export function functionName(){...}
+export class ClassName {...}
+
+// Export list
+export { name7, name8, name9 };
+
+// Renaming exports
+export { variable1 as name10, variable2 as name11, name12 };
+
+// Exporting destructured assignments with renaming
+export const { name13, name14: bar } = o;
+
+// Aggregating modules
+export * from "https://source1.com"; // does not set the default export
+export * from "https://source2.com"; // does not set the default export
+export * as name15 from "https://source3.com"; // Draft ECMAScript® 2O21
+export { name16, name17 } from "https://source4.com";
+export { import1 as name18, import2 as name19, name20 } from "https://source5.com";
diff --git a/tests/test_reactjs/js_fixtures/exports-two-components.js b/tests/test_reactjs/js_fixtures/exports-two-components.js
new file mode 100644
index 000000000..10aa7fdbe
--- /dev/null
+++ b/tests/test_reactjs/js_fixtures/exports-two-components.js
@@ -0,0 +1,20 @@
+import { h, render } from "https://unpkg.com/preact?module";
+import htm from "https://unpkg.com/htm?module";
+
+const html = htm.bind(h);
+
+export function bind(node, config) {
+  return {
+    create: (type, props, children) => h(type, props, ...children),
+    render: (element) => render(element, node),
+    unmount: () => render(null, node),
+  };
+}
+
+export function Header1(props) {
+  return h("h1", { id: props.id }, props.text);
+}
+
+export function Header2(props) {
+  return h("h2", { id: props.id }, props.text);
+}
diff --git a/tests/test_reactjs/js_fixtures/generic-module.js b/tests/test_reactjs/js_fixtures/generic-module.js
new file mode 100644
index 000000000..634b057cf
--- /dev/null
+++ b/tests/test_reactjs/js_fixtures/generic-module.js
@@ -0,0 +1,5 @@
+import { h } from "https://unpkg.com/preact?module";
+
+export function GenericComponent(props) {
+  return h("div", { id: props.id }, props.text);
+}
diff --git a/tests/test_reactjs/js_fixtures/keys-properly-propagated.js b/tests/test_reactjs/js_fixtures/keys-properly-propagated.js
new file mode 100644
index 000000000..8d700397e
--- /dev/null
+++ b/tests/test_reactjs/js_fixtures/keys-properly-propagated.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 GridLayout from "https://esm.sh/react-grid-layout@1.5.0";
+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()
+  };
+}
diff --git a/tests/test_reactjs/js_fixtures/set-flag-when-unmount-is-called.js b/tests/test_reactjs/js_fixtures/set-flag-when-unmount-is-called.js
new file mode 100644
index 000000000..dbb1a1c99
--- /dev/null
+++ b/tests/test_reactjs/js_fixtures/set-flag-when-unmount-is-called.js
@@ -0,0 +1,31 @@
+export function bind(node, config) {
+  return {
+    create: (type, props, children) => type(props),
+    render: (element) => renderElement(element, node),
+    unmount: () => unmountElement(node),
+  };
+}
+
+export function renderElement(element, container) {
+  if (container.firstChild) {
+    container.removeChild(container.firstChild);
+  }
+  container.appendChild(element);
+}
+
+export function unmountElement(container) {
+  // We add an element to the document.body to indicate that this function was called.
+  // Thus allowing Selenium to see communicate to server-side code that this effect
+  // did indeed occur.
+  const unmountFlag = document.createElement("h1");
+  unmountFlag.setAttribute("id", "unmount-flag");
+  document.body.appendChild(unmountFlag);
+  container.innerHTML = "";
+}
+
+export function SomeComponent(props) {
+  const element = document.createElement("h1");
+  element.appendChild(document.createTextNode(props.text));
+  element.setAttribute("id", props.id);
+  return element;
+}
diff --git a/tests/test_reactjs/js_fixtures/simple-button.js b/tests/test_reactjs/js_fixtures/simple-button.js
new file mode 100644
index 000000000..2b49f505b
--- /dev/null
+++ b/tests/test_reactjs/js_fixtures/simple-button.js
@@ -0,0 +1,25 @@
+import { h, render } from "https://unpkg.com/preact?module";
+import htm from "https://unpkg.com/htm?module";
+
+const html = htm.bind(h);
+
+export function bind(node, config) {
+  return {
+    create: (type, props, children) => h(type, props, ...children),
+    render: (element) => render(element, node),
+    unmount: () => render(null, node),
+  };
+}
+
+export function SimpleButton(props) {
+  return h(
+    "button",
+    {
+      id: props.id,
+      onClick(event) {
+        props.onClick({ data: props.eventResponseData });
+      },
+    },
+    "simple button",
+  );
+}
diff --git a/tests/test_reactjs/js_fixtures/subcomponent-notation.js b/tests/test_reactjs/js_fixtures/subcomponent-notation.js
new file mode 100644
index 000000000..73527c667
--- /dev/null
+++ b/tests/test_reactjs/js_fixtures/subcomponent-notation.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 {InputGroup, Form} from "https://esm.sh/react-bootstrap@2.10.2?deps=react@19.0,react-dom@19.0,react-is@19.0&exports=InputGroup,Form";
+export {InputGroup, Form};
+
+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),
+    unmount: () => root.unmount()
+  };
+}
\ No newline at end of file
diff --git a/tests/test_web/test_npm.py b/tests/test_reactjs/test_modules.py
similarity index 70%
rename from tests/test_web/test_npm.py
rename to tests/test_reactjs/test_modules.py
index a8c890202..f14d2053c 100644
--- a/tests/test_web/test_npm.py
+++ b/tests/test_reactjs/test_modules.py
@@ -2,17 +2,15 @@
 
 import reactpy
 from reactpy import html
+from reactpy.reactjs import component_from_npm, import_reactjs
 from reactpy.testing import BackendFixture, DisplayFixture
-from reactpy.web import reactjs_component_from_npm, reactjs_import_map
 
 
 @pytest.mark.anyio
-async def test_reactjs_component_from_npm_react_bootstrap():
-    async with BackendFixture(html_head=html.head(reactjs_import_map())) as backend:
+async def test_component_from_npm_react_bootstrap():
+    async with BackendFixture(html_head=html.head(import_reactjs())) as backend:
         async with DisplayFixture(backend=backend) as display:
-            Button = reactjs_component_from_npm(
-                "react-bootstrap", "Button", version="2.10.2"
-            )
+            Button = component_from_npm("react-bootstrap", "Button", version="2.10.2")
 
             @reactpy.component
             def App():
diff --git a/tests/test_web/test_utils.py b/tests/test_reactjs/test_utils.py
similarity index 94%
rename from tests/test_web/test_utils.py
rename to tests/test_reactjs/test_utils.py
index 2f9d72618..755131f15 100644
--- a/tests/test_web/test_utils.py
+++ b/tests/test_reactjs/test_utils.py
@@ -3,14 +3,14 @@
 import pytest
 import responses
 
-from reactpy.testing import assert_reactpy_did_log
-from reactpy.web.utils import (
-    _resolve_relative_url,
+from reactpy.reactjs.utils import (
     module_name_suffix,
     resolve_module_exports_from_file,
     resolve_module_exports_from_source,
     resolve_module_exports_from_url,
+    resolve_relative_url,
 )
+from reactpy.testing import assert_reactpy_did_log
 
 JS_FIXTURES_DIR = Path(__file__).parent / "js_fixtures"
 
@@ -155,11 +155,11 @@ def test_log_on_unknown_export_type():
 
 def test_resolve_relative_url():
     assert (
-        _resolve_relative_url("https://some.url", "path/to/another.js")
+        resolve_relative_url("https://some.url", "path/to/another.js")
         == "path/to/another.js"
     )
     assert (
-        _resolve_relative_url("https://some.url", "/path/to/another.js")
+        resolve_relative_url("https://some.url", "/path/to/another.js")
         == "https://some.url/path/to/another.js"
     )
-    assert _resolve_relative_url("/some/path", "to/another.js") == "to/another.js"
+    assert resolve_relative_url("/some/path", "to/another.js") == "to/another.js"
diff --git a/tests/test_web/test_module.py b/tests/test_web/test_module.py
index 9357d1c36..aeb1a7cb8 100644
--- a/tests/test_web/test_module.py
+++ b/tests/test_web/test_module.py
@@ -4,8 +4,9 @@
 from servestatic import ServeStaticASGI
 
 import reactpy
-import reactpy.web.module
+import reactpy.reactjs
 from reactpy.executors.asgi.standalone import ReactPy
+from reactpy.reactjs import NAME_SOURCE, JavaScriptModule
 from reactpy.testing import (
     BackendFixture,
     DisplayFixture,
@@ -14,14 +15,13 @@
     poll,
 )
 from reactpy.types import InlineJavaScript
-from reactpy.web.module import NAME_SOURCE, WebModule
 
 JS_FIXTURES_DIR = Path(__file__).parent / "js_fixtures"
 
 
 async def test_that_js_module_unmount_is_called(display: DisplayFixture):
-    SomeComponent = reactpy.web.module._vdom_from_web_module(
-        reactpy.web.module._module_from_file(
+    SomeComponent = reactpy.reactjs.module_to_vdom(
+        reactpy.reactjs.file_to_module(
             "set-flag-when-unmount-is-called",
             JS_FIXTURES_DIR / "set-flag-when-unmount-is-called.js",
         ),
@@ -53,8 +53,8 @@ def ShowCurrentComponent():
 
 
 async def test_module_from_url(browser):
-    SimpleButton = reactpy.web.module._vdom_from_web_module(
-        reactpy.web.module._module_from_url(
+    SimpleButton = reactpy.reactjs.module_to_vdom(
+        reactpy.reactjs.url_to_module(
             "/static/simple-button.js", resolve_imports=False
         ),
         "SimpleButton",
@@ -75,8 +75,8 @@ def ShowSimpleButton():
 
 
 async def test_module_from_file(display: DisplayFixture):
-    SimpleButton = reactpy.web.module._vdom_from_web_module(
-        reactpy.web.module._module_from_file(
+    SimpleButton = reactpy.reactjs.module_to_vdom(
+        reactpy.reactjs.file_to_module(
             "simple-button", JS_FIXTURES_DIR / "simple-button.js"
         ),
         "SimpleButton",
@@ -101,30 +101,30 @@ def test_module_from_file_source_conflict(tmp_path):
     first_file = tmp_path / "first.js"
 
     with pytest.raises(FileNotFoundError, match=r"does not exist"):
-        reactpy.web.module._module_from_file("temp", first_file)
+        reactpy.reactjs.file_to_module("temp", first_file)
 
     first_file.touch()
 
-    reactpy.web.module._module_from_file("temp", first_file)
+    reactpy.reactjs.file_to_module("temp", first_file)
 
     second_file = tmp_path / "second.js"
     second_file.touch()
 
     # ok, same content
-    reactpy.web.module._module_from_file("temp", second_file)
+    reactpy.reactjs.file_to_module("temp", second_file)
 
     third_file = tmp_path / "third.js"
     third_file.write_text("something-different")
 
     with assert_reactpy_did_log(r"Existing web module .* will be replaced with"):
-        reactpy.web.module._module_from_file("temp", third_file)
+        reactpy.reactjs.file_to_module("temp", third_file)
 
 
 def test_web_module_from_file_symlink(tmp_path):
     file = tmp_path / "temp.js"
     file.touch()
 
-    module = reactpy.web.module._module_from_file("temp", file, symlink=True)
+    module = reactpy.reactjs.file_to_module("temp", file, symlink=True)
 
     assert module.file.resolve().read_text() == ""
 
@@ -137,44 +137,44 @@ def test_web_module_from_file_symlink_twice(tmp_path):
     file_1 = tmp_path / "temp_1.js"
     file_1.touch()
 
-    reactpy.web.module._module_from_file("temp", file_1, symlink=True)
+    reactpy.reactjs.file_to_module("temp", file_1, symlink=True)
 
     with assert_reactpy_did_not_log(r"Existing web module .* will be replaced with"):
-        reactpy.web.module._module_from_file("temp", file_1, symlink=True)
+        reactpy.reactjs.file_to_module("temp", file_1, symlink=True)
 
     file_2 = tmp_path / "temp_2.js"
     file_2.write_text("something")
 
     with assert_reactpy_did_log(r"Existing web module .* will be replaced with"):
-        reactpy.web.module._module_from_file("temp", file_2, symlink=True)
+        reactpy.reactjs.file_to_module("temp", file_2, symlink=True)
 
 
 def test_web_module_from_file_replace_existing(tmp_path):
     file1 = tmp_path / "temp1.js"
     file1.touch()
 
-    reactpy.web.module._module_from_file("temp", file1)
+    reactpy.reactjs.file_to_module("temp", file1)
 
     file2 = tmp_path / "temp2.js"
     file2.write_text("something")
 
     with assert_reactpy_did_log(r"Existing web module .* will be replaced with"):
-        reactpy.web.module._module_from_file("temp", file2)
+        reactpy.reactjs.file_to_module("temp", file2)
 
 
 def test_module_missing_exports():
-    module = WebModule("test", NAME_SOURCE, None, {"a", "b", "c"}, None, False)
+    module = JavaScriptModule("test", NAME_SOURCE, None, {"a", "b", "c"}, None, False)
 
     with pytest.raises(ValueError, match=r"does not export 'x'"):
-        reactpy.web.module._vdom_from_web_module(module, "x")
+        reactpy.reactjs.module_to_vdom(module, "x")
 
     with pytest.raises(ValueError, match=r"does not export \['x', 'y'\]"):
-        reactpy.web.module._vdom_from_web_module(module, ["x", "y"])
+        reactpy.reactjs.module_to_vdom(module, ["x", "y"])
 
 
 async def test_module_exports_multiple_components(display: DisplayFixture):
-    Header1, Header2 = reactpy.web.module._vdom_from_web_module(
-        reactpy.web.module._module_from_file(
+    Header1, Header2 = reactpy.reactjs.module_to_vdom(
+        reactpy.reactjs.file_to_module(
             "exports-two-components", JS_FIXTURES_DIR / "exports-two-components.js"
         ),
         ["Header1", "Header2"],
@@ -190,12 +190,10 @@ async def test_module_exports_multiple_components(display: DisplayFixture):
 
 
 async def test_imported_components_can_render_children(display: DisplayFixture):
-    module = reactpy.web.module._module_from_file(
+    module = reactpy.reactjs.file_to_module(
         "component-can-have-child", JS_FIXTURES_DIR / "component-can-have-child.js"
     )
-    Parent, Child = reactpy.web.module._vdom_from_web_module(
-        module, ["Parent", "Child"]
-    )
+    Parent, Child = reactpy.reactjs.module_to_vdom(module, ["Parent", "Child"])
 
     await display.show(
         lambda: Parent(
@@ -224,10 +222,10 @@ async def test_keys_properly_propagated(display: DisplayFixture):
     This property is required for certain JS components, such as the GridLayout from
     react-grid-layout.
     """
-    module = reactpy.web.module._module_from_file(
+    module = reactpy.reactjs.file_to_module(
         "keys-properly-propagated", JS_FIXTURES_DIR / "keys-properly-propagated.js"
     )
-    GridLayout = reactpy.web.module._vdom_from_web_module(module, "GridLayout")
+    GridLayout = reactpy.reactjs.module_to_vdom(module, "GridLayout")
 
     await display.show(
         lambda: GridLayout(
@@ -278,14 +276,12 @@ async def test_keys_properly_propagated(display: DisplayFixture):
 
 
 async def test_subcomponent_notation_as_str_attrs(display: DisplayFixture):
-    module = reactpy.web.module._module_from_file(
+    module = reactpy.reactjs.file_to_module(
         "subcomponent-notation",
         JS_FIXTURES_DIR / "subcomponent-notation.js",
     )
-    InputGroup, InputGroupText, FormControl, FormLabel = (
-        reactpy.web.module._vdom_from_web_module(
-            module, ["InputGroup", "InputGroup.Text", "Form.Control", "Form.Label"]
-        )
+    InputGroup, InputGroupText, FormControl, FormLabel = reactpy.reactjs.module_to_vdom(
+        module, ["InputGroup", "InputGroup.Text", "Form.Control", "Form.Label"]
     )
 
     content = reactpy.html.div(
@@ -340,13 +336,11 @@ async def test_subcomponent_notation_as_str_attrs(display: DisplayFixture):
 
 
 async def test_subcomponent_notation_as_obj_attrs(display: DisplayFixture):
-    module = reactpy.web.module._module_from_file(
+    module = reactpy.reactjs.file_to_module(
         "subcomponent-notation",
         JS_FIXTURES_DIR / "subcomponent-notation.js",
     )
-    InputGroup, Form = reactpy.web.module._vdom_from_web_module(
-        module, ["InputGroup", "Form"]
-    )
+    InputGroup, Form = reactpy.reactjs.module_to_vdom(module, ["InputGroup", "Form"])
 
     content = reactpy.html.div(
         {"id": "the-parent"},
@@ -400,10 +394,10 @@ async def test_subcomponent_notation_as_obj_attrs(display: DisplayFixture):
 
 
 async def test_callable_prop_with_javacript(display: DisplayFixture):
-    module = reactpy.web.module._module_from_file(
+    module = reactpy.reactjs.file_to_module(
         "callable-prop", JS_FIXTURES_DIR / "callable-prop.js"
     )
-    Component = reactpy.web.module._vdom_from_web_module(module, "Component")
+    Component = reactpy.reactjs.module_to_vdom(module, "Component")
 
     @reactpy.component
     def App():
@@ -420,19 +414,19 @@ def App():
     assert await my_div.inner_text() == "PREFIX TEXT: TEST 123"
 
 
-def test_reactjs_component_from_string():
-    reactpy.web.reactjs_component_from_string(
+def test_component_from_string():
+    reactpy.reactjs.component_from_string(
         "old", "Component", resolve_imports=False, name="temp"
     )
-    reactpy.web.module._STRING_WEB_MODULE_CACHE.clear()
+    reactpy.reactjs._STRING_JS_MODULE_CACHE.clear()
     with assert_reactpy_did_log(r"Existing web module .* will be replaced with"):
-        reactpy.web.reactjs_component_from_string(
+        reactpy.reactjs.component_from_string(
             "new", "Component", resolve_imports=False, name="temp"
         )
 
 
-async def test_reactjs_component_from_url(browser):
-    SimpleButton = reactpy.web.reactjs_component_from_url(
+async def test_component_from_url(browser):
+    SimpleButton = reactpy.reactjs.component_from_url(
         "/static/simple-button.js", "SimpleButton", resolve_imports=False
     )
 
@@ -450,8 +444,8 @@ def ShowSimpleButton():
             await display.page.wait_for_selector("#my-button")
 
 
-async def test_reactjs_component_from_file(display: DisplayFixture):
-    SimpleButton = reactpy.web.reactjs_component_from_file(
+async def test_component_from_file(display: DisplayFixture):
+    SimpleButton = reactpy.reactjs.component_from_file(
         JS_FIXTURES_DIR / "simple-button.js", "SimpleButton", name="simple-button"
     )
 
@@ -470,70 +464,68 @@ def ShowSimpleButton():
     await poll(lambda: is_clicked.current).until_is(True)
 
 
-def test_reactjs_component_from_url_caching():
+def test_component_from_url_caching():
     url = "https://example.com/module.js"
-    reactpy.web.module._URL_WEB_MODULE_CACHE.clear()
+    reactpy.reactjs._URL_JS_MODULE_CACHE.clear()
 
     # First import
-    reactpy.web.reactjs_component_from_url(url, "Component", resolve_imports=False)
+    reactpy.reactjs.component_from_url(url, "Component", resolve_imports=False)
     # Find the key that contains the 'url' substring
-    key = next(x for x in reactpy.web.module._URL_WEB_MODULE_CACHE.keys() if url in x)
-    module1 = reactpy.web.module._URL_WEB_MODULE_CACHE[key]
+    key = next(x for x in reactpy.reactjs._URL_JS_MODULE_CACHE.keys() if url in x)
+    module1 = reactpy.reactjs._URL_JS_MODULE_CACHE[key]
     assert module1
-    initial_length = len(reactpy.web.module._URL_WEB_MODULE_CACHE)
+    initial_length = len(reactpy.reactjs._URL_JS_MODULE_CACHE)
 
     # Second import
-    reactpy.web.reactjs_component_from_url(url, "Component", resolve_imports=False)
-    assert len(reactpy.web.module._URL_WEB_MODULE_CACHE) == initial_length
+    reactpy.reactjs.component_from_url(url, "Component", resolve_imports=False)
+    assert len(reactpy.reactjs._URL_JS_MODULE_CACHE) == initial_length
 
 
-def test_reactjs_component_from_file_caching(tmp_path):
+def test_component_from_file_caching(tmp_path):
     file = tmp_path / "test.js"
     file.write_text("export function Component() {}")
     name = "test-file-module"
-    reactpy.web.module._FILE_WEB_MODULE_CACHE.clear()
+    reactpy.reactjs._FILE_JS_MODULE_CACHE.clear()
 
-    reactpy.web.reactjs_component_from_file(file, "Component", name=name)
-    key = next(x for x in reactpy.web.module._FILE_WEB_MODULE_CACHE.keys() if name in x)
-    module1 = reactpy.web.module._FILE_WEB_MODULE_CACHE[key]
+    reactpy.reactjs.component_from_file(file, "Component", name=name)
+    key = next(x for x in reactpy.reactjs._FILE_JS_MODULE_CACHE.keys() if name in x)
+    module1 = reactpy.reactjs._FILE_JS_MODULE_CACHE[key]
     assert module1
-    initial_length = len(reactpy.web.module._FILE_WEB_MODULE_CACHE)
+    initial_length = len(reactpy.reactjs._FILE_JS_MODULE_CACHE)
 
-    reactpy.web.reactjs_component_from_file(file, "Component", name=name)
-    assert len(reactpy.web.module._FILE_WEB_MODULE_CACHE) == initial_length
+    reactpy.reactjs.component_from_file(file, "Component", name=name)
+    assert len(reactpy.reactjs._FILE_JS_MODULE_CACHE) == initial_length
 
 
-def test_reactjs_component_from_string_caching():
+def test_component_from_string_caching():
     name = "test-string-module"
     content = "export function Component() {}"
-    reactpy.web.module._STRING_WEB_MODULE_CACHE.clear()
+    reactpy.reactjs._STRING_JS_MODULE_CACHE.clear()
 
-    reactpy.web.reactjs_component_from_string(content, "Component", name=name)
-    key = next(
-        x for x in reactpy.web.module._STRING_WEB_MODULE_CACHE.keys() if name in x
-    )
-    module1 = reactpy.web.module._STRING_WEB_MODULE_CACHE[key]
+    reactpy.reactjs.component_from_string(content, "Component", name=name)
+    key = next(x for x in reactpy.reactjs._STRING_JS_MODULE_CACHE.keys() if name in x)
+    module1 = reactpy.reactjs._STRING_JS_MODULE_CACHE[key]
     assert module1
-    initial_length = len(reactpy.web.module._STRING_WEB_MODULE_CACHE)
+    initial_length = len(reactpy.reactjs._STRING_JS_MODULE_CACHE)
 
-    reactpy.web.reactjs_component_from_string(content, "Component", name=name)
-    assert len(reactpy.web.module._STRING_WEB_MODULE_CACHE) == initial_length
+    reactpy.reactjs.component_from_string(content, "Component", name=name)
+    assert len(reactpy.reactjs._STRING_JS_MODULE_CACHE) == initial_length
 
 
-def test_reactjs_component_from_string_with_no_name():
+def test_component_from_string_with_no_name():
     content = "export function Component() {}"
-    reactpy.web.module._STRING_WEB_MODULE_CACHE.clear()
+    reactpy.reactjs._STRING_JS_MODULE_CACHE.clear()
 
-    reactpy.web.reactjs_component_from_string(content, "Component")
-    initial_length = len(reactpy.web.module._STRING_WEB_MODULE_CACHE)
+    reactpy.reactjs.component_from_string(content, "Component")
+    initial_length = len(reactpy.reactjs._STRING_JS_MODULE_CACHE)
 
-    reactpy.web.reactjs_component_from_string(content, "Component")
-    assert len(reactpy.web.module._STRING_WEB_MODULE_CACHE) == initial_length
+    reactpy.reactjs.component_from_string(content, "Component")
+    assert len(reactpy.reactjs._STRING_JS_MODULE_CACHE) == initial_length
 
 
 async def test_module_without_bind(display: DisplayFixture):
-    GenericComponent = reactpy.web.module._vdom_from_web_module(
-        reactpy.web.module._module_from_file(
+    GenericComponent = reactpy.reactjs.module_to_vdom(
+        reactpy.reactjs.file_to_module(
             "generic-module", JS_FIXTURES_DIR / "generic-module.js"
         ),
         "GenericComponent",

From 72535024116cfae5bae5ba6b356f8a7716db3bf6 Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Thu, 11 Dec 2025 05:29:52 -0800
Subject: [PATCH 14/21] Add changelog

---
 docs/source/about/changelog.rst | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/docs/source/about/changelog.rst b/docs/source/about/changelog.rst
index bd3098f8e..5dcc104f2 100644
--- a/docs/source/about/changelog.rst
+++ b/docs/source/about/changelog.rst
@@ -33,9 +33,10 @@ Unreleased
 - :pull:`1269` - Added ``reactpy.pyscript_component`` that can be used to embed ReactPy components into your existing application.
 - :pull:`1264` - Added ``reactpy.use_async_effect`` hook.
 - :pull:`1281` - Added ``reactpy.Vdom`` primitive interface for creating VDOM dictionaries.
-- :pull:`1307` - Added ``reactpy.web.reactjs_component_from_file`` to import ReactJS components from a file.
-- :pull:`1307` - Added ``reactpy.web.reactjs_component_from_url`` to import ReactJS components from a URL.
-- :pull:`1307` - Added ``reactpy.web.reactjs_component_from_string`` to import ReactJS components from a string.
+- :pull:`1307` - Added ``reactpy.reactjs.component_from_file`` to import ReactJS components from a file.
+- :pull:`1307` - Added ``reactpy.reactjs.component_from_url`` to import ReactJS components from a URL.
+- :pull:`1307` - Added ``reactpy.reactjs.component_from_string`` to import ReactJS components from a string.
+- :pull:`1314` - Added ``reactpy.reactjs.component_from_npm`` to import ReactJS components from NPM.
 - :pull:`1314` - Added ``reactpy.h`` as a shorthand alias for ``reactpy.html``.
 
 **Changed**
@@ -61,14 +62,15 @@ Unreleased
 - :pull:`1281` - ``reactpy.core.vdom._EllipsisRepr`` has been moved to ``reactpy.types.EllipsisRepr``.
 - :pull:`1281` - ``reactpy.types.VdomDictConstructor`` has been renamed to ``reactpy.types.VdomConstructor``.
 - :pull:`1312` - ``REACTPY_ASYNC_RENDERING`` can now de-duplicate and cascade renders where necessary.
-- :pull:`1312` - ``REACTPY_ASYNC_RENDERING`` is now defaulted to ``True`` for up to 40x performance improvements.
+- :pull:`1312` - ``REACTPY_ASYNC_RENDERING`` is now defaulted to ``True`` for up to 40x performance improvements in environments with high concurrency.
 
 **Deprecated**
 
--:pull:`1307` - ``reactpy.web.export`` is deprecated. Use ``reactpy.web.reactjs_component_from_*`` instead.
--:pull:`1307` - ``reactpy.web.module_from_file`` is deprecated. Use ``reactpy.web.reactjs_component_from_file`` instead.
--:pull:`1307` - ``reactpy.web.module_from_url`` is deprecated. Use ``reactpy.web.reactjs_component_from_url`` instead.
--:pull:`1307` - ``reactpy.web.module_from_string`` is deprecated. Use ``reactpy.web.reactjs_component_from_string`` instead.
+-:pull:`1307` - ``reactpy.web.export`` is deprecated. Use ``reactpy.reactjs.component_from_*`` instead.
+-:pull:`1307` - ``reactpy.web.module_from_file`` is deprecated. Use ``reactpy.reactjs.component_from_file`` instead.
+-:pull:`1307` - ``reactpy.web.module_from_url`` is deprecated. Use ``reactpy.reactjs.component_from_url`` instead.
+-:pull:`1307` - ``reactpy.web.module_from_string`` is deprecated. Use ``reactpy.reactjs.component_from_string`` instead.
+-:pull:`1314` - ``reactpy.web.*`` is deprecated. Use ``reactpy.reactjs.*`` instead.
 
 **Removed**
 
@@ -94,6 +96,7 @@ Unreleased
 - :pull:`1312` - Removed ``reactpy.types.LayoutType``. Use ``reactpy.types.BaseLayout`` instead.
 - :pull:`1312` - Removed ``reactpy.types.ContextProviderType``. Use ``reactpy.types.ContextProvider`` instead.
 - :pull:`1312` - Removed ``reactpy.core.hooks._ContextProvider``. Use ``reactpy.types.ContextProvider`` instead.
+- :pull:`1314` - Removed ``reactpy.web.utils``. Use ``reactpy.reactjs.utils`` instead.
 
 **Fixed**
 

From d84ba2e2e798a703288ddb2d0bd84105e855e804 Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Thu, 11 Dec 2025 06:21:28 -0800
Subject: [PATCH 15/21] Fix missing react-dom/client export

---
 .github/copilot-instructions.md               |  11 +-
 src/js/packages/@reactpy/app/src/react-dom.ts |   3 +
 src/reactpy/reactjs/__init__.py               |   8 +-
 src/reactpy/reactjs/module.py                 |  63 +++--
 src/reactpy/reactjs/utils.py                  | 110 ++++-----
 src/reactpy/types.py                          |   2 +-
 tests/test_reactjs/test_module.py             | 215 ++++++++++++++++++
 tests/test_reactjs/test_modules.py            |  28 ---
 tests/test_reactjs/test_utils.py              |  34 +--
 9 files changed, 325 insertions(+), 149 deletions(-)
 create mode 100644 tests/test_reactjs/test_module.py
 delete mode 100644 tests/test_reactjs/test_modules.py

diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
index 07d36024d..0a93205e0 100644
--- a/.github/copilot-instructions.md
+++ b/.github/copilot-instructions.md
@@ -54,7 +54,6 @@ pip install flask sanic tornado
 -   `hatch test --cover` -- run tests with coverage reporting (used in CI)
 -   `hatch test -k test_name` -- run specific tests
 -   `hatch test tests/test_config.py` -- run specific test files
--   Note: Some tests require Playwright browser automation and may fail in headless environments
 
 **Run Python Linting and Formatting:**
 
@@ -68,7 +67,7 @@ pip install flask sanic tornado
 
 -   `hatch run javascript:check` -- Lint and type-check JavaScript (10 seconds). NEVER CANCEL. Set timeout to 30+ minutes.
 -   `hatch run javascript:fix` -- Format JavaScript code
--   `hatch run javascript:test` -- Run JavaScript tests (note: may fail in headless environments due to DOM dependencies)
+-   `hatch run javascript:test` -- Run JavaScript tests
 
 **Interactive Development Shell:**
 
@@ -323,13 +322,6 @@ Follow this step-by-step process for effective development:
 -   Network timeouts during pip install are common in CI environments
 -   Missing dependencies error: Install ASGI dependencies with `pip install orjson asgiref asgi-tools servestatic`
 
-### Test Issues:
-
--   Playwright tests may fail in headless environments -- this is expected
--   Tests requiring browser DOM should be marked appropriately
--   Use `hatch test -k "not playwright"` to skip browser-dependent tests
--   JavaScript tests may fail with "window is not defined" in Node.js environment -- this is expected
-
 ### Import Issues:
 
 -   ReactPy must be installed or src/ must be in Python path
@@ -395,7 +387,6 @@ Always ensure your changes pass local validation before pushing, as the CI pipel
 -   **All builds and tests run quickly** - if something takes more than 60 seconds, investigate the issue
 -   **Hatch environments provide full isolation** - no need to manage virtual environments manually
 -   **JavaScript packages are bundled into Python** - the build process combines JS and Python into a single distribution
--   **Browser automation tests may fail in headless environments** - this is expected behavior for Playwright tests
 -   **Documentation updates are required** when making changes to Python source code
 -   **Always update this file** when making changes to the development workflow, build process, or repository structure
 -   **All tests must always pass** - failures are never expected or allowed in a healthy development environment
diff --git a/src/js/packages/@reactpy/app/src/react-dom.ts b/src/js/packages/@reactpy/app/src/react-dom.ts
index 55007a343..17d1e16f1 100644
--- a/src/js/packages/@reactpy/app/src/react-dom.ts
+++ b/src/js/packages/@reactpy/app/src/react-dom.ts
@@ -3,4 +3,7 @@ import ReactDOM from "preact/compat";
 // @ts-ignore
 export * from "preact/compat";
 
+// @ts-ignore
+export * from "preact/compat/client";
+
 export default ReactDOM;
diff --git a/src/reactpy/reactjs/__init__.py b/src/reactpy/reactjs/__init__.py
index bbf428907..c7089c025 100644
--- a/src/reactpy/reactjs/__init__.py
+++ b/src/reactpy/reactjs/__init__.py
@@ -59,7 +59,7 @@ def component_from_url(
 def component_from_url(
     url: str,
     import_names: str | list[str] | tuple[str, ...],
-    resolve_imports: bool = True,
+    resolve_imports: bool = False,
     resolve_imports_depth: int = 5,
     fallback: Any | None = None,
     unmount_before_update: bool = False,
@@ -134,7 +134,7 @@ def component_from_npm(
 def component_from_npm(
     package: str,
     import_names: str | list[str] | tuple[str, ...],
-    resolve_imports: bool = True,
+    resolve_imports: bool = False,
     resolve_imports_depth: int = 5,
     version: str = "latest",
     cdn: str = "https://esm.sh",
@@ -222,7 +222,7 @@ def component_from_file(
 def component_from_file(
     file: str | Path,
     import_names: str | list[str] | tuple[str, ...],
-    resolve_imports: bool = True,
+    resolve_imports: bool = False,
     resolve_imports_depth: int = 5,
     name: str = "",
     fallback: Any | None = None,
@@ -304,7 +304,7 @@ def component_from_string(
 def component_from_string(
     content: str,
     import_names: str | list[str] | tuple[str, ...],
-    resolve_imports: bool = True,
+    resolve_imports: bool = False,
     resolve_imports_depth: int = 5,
     name: str = "",
     fallback: Any | None = None,
diff --git a/src/reactpy/reactjs/module.py b/src/reactpy/reactjs/module.py
index 496c09474..bbedf6fed 100644
--- a/src/reactpy/reactjs/module.py
+++ b/src/reactpy/reactjs/module.py
@@ -12,8 +12,8 @@
     are_files_identical,
     copy_file,
     module_name_suffix,
-    resolve_module_exports_from_file,
-    resolve_module_exports_from_url,
+    resolve_from_module_file,
+    resolve_from_module_url,
 )
 from reactpy.types import ImportSourceDict, JavaScriptModule, VdomConstructor
 
@@ -32,13 +32,9 @@ def url_to_module(
         source_type=URL_SOURCE,
         default_fallback=fallback,
         file=None,
-        export_names=(
-            resolve_module_exports_from_url(url, resolve_imports_depth)
-            if (
-                resolve_imports
-                if resolve_imports is not None
-                else config.REACTPY_DEBUG.current
-            )
+        import_names=(
+            resolve_from_module_url(url, resolve_imports_depth)
+            if resolve_imports
             else None
         ),
         unmount_before_update=unmount_before_update,
@@ -77,13 +73,9 @@ def file_to_module(
         source_type=NAME_SOURCE,
         default_fallback=fallback,
         file=target_file,
-        export_names=(
-            resolve_module_exports_from_file(source_file, resolve_imports_depth)
-            if (
-                resolve_imports
-                if resolve_imports is not None
-                else config.REACTPY_DEBUG.current
-            )
+        import_names=(
+            resolve_from_module_file(source_file, resolve_imports_depth)
+            if resolve_imports
             else None
         ),
         unmount_before_update=unmount_before_update,
@@ -117,13 +109,9 @@ def string_to_module(
         source_type=NAME_SOURCE,
         default_fallback=fallback,
         file=target_file,
-        export_names=(
-            resolve_module_exports_from_file(target_file, resolve_imports_depth)
-            if (
-                resolve_imports
-                if resolve_imports is not None
-                else config.REACTPY_DEBUG.current
-            )
+        import_names=(
+            resolve_from_module_file(target_file, resolve_imports_depth)
+            if resolve_imports
             else None
         ),
         unmount_before_update=unmount_before_update,
@@ -132,15 +120,15 @@ def string_to_module(
 
 def module_to_vdom(
     web_module: JavaScriptModule,
-    export_names: str | list[str] | tuple[str, ...],
+    import_names: str | list[str] | tuple[str, ...],
     fallback: Any | None = None,
     allow_children: bool = True,
 ) -> VdomConstructor | list[VdomConstructor]:
     """Return one or more VDOM constructors from a :class:`JavaScriptModule`
 
     Parameters:
-        export_names:
-            One or more names to export. If given as a string, a single component
+        import_names:
+            One or more names to import. If given as a string, a single component
             will be returned. If a list is given, then a list of components will be
             returned.
         fallback:
@@ -148,27 +136,27 @@ def module_to_vdom(
         allow_children:
             Whether or not these components can have children.
     """
-    if isinstance(export_names, str):
+    if isinstance(import_names, str):
         if (
-            web_module.export_names is not None
-            and export_names.split(".")[0] not in web_module.export_names
+            web_module.import_names is not None
+            and import_names.split(".")[0] not in web_module.import_names
         ):
-            msg = f"{web_module.source!r} does not export {export_names!r}"
+            msg = f"{web_module.source!r} does not contain {import_names!r}"
             raise ValueError(msg)
-        return make_module(web_module, export_names, fallback, allow_children)
+        return make_module(web_module, import_names, fallback, allow_children)
     else:
-        if web_module.export_names is not None:
+        if web_module.import_names is not None:
             missing = sorted(
-                {e.split(".")[0] for e in export_names}.difference(
-                    web_module.export_names
+                {e.split(".")[0] for e in import_names}.difference(
+                    web_module.import_names
                 )
             )
             if missing:
-                msg = f"{web_module.source!r} does not export {missing!r}"
+                msg = f"{web_module.source!r} does not contain {missing!r}"
                 raise ValueError(msg)
         return [
             make_module(web_module, name, fallback, allow_children)
-            for name in export_names
+            for name in import_names
         ]
 
 
@@ -197,7 +185,7 @@ def get_module_path(name: str) -> Path:
 
 
 def import_reactjs():
-    from reactpy import config, html
+    from reactpy import html
 
     base_url = config.REACTPY_PATH_PREFIX.current.strip("/")
     return html.script(
@@ -207,6 +195,7 @@ def import_reactjs():
             "imports": {{
                 "react": "/{base_url}/static/react.js",
                 "react-dom": "/{base_url}/static/react-dom.js",
+                "react-dom/client": "/{base_url}/static/react-dom.js",
                 "react/jsx-runtime": "/{base_url}/static/react-jsx-runtime.js"
             }}
         }}
diff --git a/src/reactpy/reactjs/utils.py b/src/reactpy/reactjs/utils.py
index b1f989553..cec40ab32 100644
--- a/src/reactpy/reactjs/utils.py
+++ b/src/reactpy/reactjs/utils.py
@@ -18,119 +18,125 @@ def module_name_suffix(name: str) -> str:
     return PurePosixPath(tail or head).suffix or ".js"
 
 
-def resolve_module_exports_from_file(
+def resolve_from_module_file(
     file: Path,
     max_depth: int,
-    is_re_export: bool = False,
+    is_regex_import: bool = False,
 ) -> set[str]:
     if max_depth == 0:
-        logger.warning(f"Did not resolve all exports for {file} - max depth reached")
+        logger.warning(f"Did not resolve all imports for {file} - max depth reached")
         return set()
     elif not file.exists():
-        logger.warning(f"Did not resolve exports for unknown file {file}")
+        logger.warning(f"Did not resolve imports for unknown file {file}")
         return set()
 
-    export_names, references = resolve_module_exports_from_source(
-        file.read_text(encoding="utf-8"), exclude_default=is_re_export
+    names, references = resolve_from_module_source(
+        file.read_text(encoding="utf-8"), exclude_default=is_regex_import
     )
 
     for ref in references:
         if urlparse(ref).scheme:  # is an absolute URL
-            export_names.update(
-                resolve_module_exports_from_url(ref, max_depth - 1, is_re_export=True)
+            names.update(
+                resolve_from_module_url(ref, max_depth - 1, is_regex_import=True)
             )
         else:
             path = file.parent.joinpath(*ref.split("/"))
-            export_names.update(
-                resolve_module_exports_from_file(path, max_depth - 1, is_re_export=True)
+            names.update(
+                resolve_from_module_file(path, max_depth - 1, is_regex_import=True)
             )
 
-    return export_names
+    return names
 
 
-def resolve_module_exports_from_url(
+def resolve_from_module_url(
     url: str,
     max_depth: int,
-    is_re_export: bool = False,
+    is_regex_import: bool = False,
 ) -> set[str]:
     if max_depth == 0:
-        logger.warning(f"Did not resolve all exports for {url} - max depth reached")
+        logger.warning(f"Did not resolve all imports for {url} - max depth reached")
         return set()
 
     try:
         text = requests.get(url, timeout=5).text
     except requests.exceptions.ConnectionError as error:
         reason = "" if error is None else " - {error.errno}"
-        logger.warning(f"Did not resolve exports for url {url} {reason}")
+        logger.warning(f"Did not resolve imports for url {url} {reason}")
         return set()
 
-    export_names, references = resolve_module_exports_from_source(
-        text, exclude_default=is_re_export
+    names, references = resolve_from_module_source(
+        text, exclude_default=is_regex_import
     )
 
     for ref in references:
-        url = resolve_relative_url(url, ref)
-        export_names.update(
-            resolve_module_exports_from_url(url, max_depth - 1, is_re_export=True)
-        )
+        url = normalize_url_path(url, ref)
+        names.update(resolve_from_module_url(url, max_depth - 1, is_regex_import=True))
 
-    return export_names
+    return names
 
 
-def resolve_module_exports_from_source(
+def resolve_from_module_source(
     content: str, exclude_default: bool
 ) -> tuple[set[str], set[str]]:
-    names: set[str] = set()
+    """Find names exported by the given JavaScript module content to assist with ReactPy import resolution.
+
+    Parmeters:
+        content: The content of the JavaScript module.
+    Returns:
+        A tuple where the first item is a set of exported names and the second item is a set of
+        referenced module paths.
+    """
+    all_names: set[str] = set()
     references: set[str] = set()
 
     if _JS_DEFAULT_EXPORT_PATTERN.search(content):
-        names.add("default")
+        all_names.add("default")
 
     # Exporting functions and classes
-    names.update(_JS_FUNC_OR_CLS_EXPORT_PATTERN.findall(content))
+    all_names.update(_JS_FUNC_OR_CLS_EXPORT_PATTERN.findall(content))
 
-    for export in _JS_GENERAL_EXPORT_PATTERN.findall(content):
-        export = export.rstrip(";").strip()
+    for name in _JS_GENERAL_EXPORT_PATTERN.findall(content):
+        name = name.rstrip(";").strip()
         # Exporting individual features
-        if export.startswith("let "):
-            names.update(let.split("=", 1)[0] for let in export[4:].split(","))
+        if name.startswith("let "):
+            all_names.update(let.split("=", 1)[0] for let in name[4:].split(","))
         # Renaming exports and export list
-        elif export.startswith("{") and export.endswith("}"):
-            names.update(
-                item.split(" as ", 1)[-1] for item in export.strip("{}").split(",")
+        elif name.startswith("{") and name.endswith("}"):
+            all_names.update(
+                item.split(" as ", 1)[-1] for item in name.strip("{}").split(",")
             )
         # Exporting destructured assignments with renaming
-        elif export.startswith("const "):
-            names.update(
+        elif name.startswith("const "):
+            all_names.update(
                 item.split(":", 1)[0]
-                for item in export[6:].split("=", 1)[0].strip("{}").split(",")
+                for item in name[6:].split("=", 1)[0].strip("{}").split(",")
             )
         # Default exports
-        elif export.startswith("default "):
-            names.add("default")
+        elif name.startswith("default "):
+            all_names.add("default")
         # Aggregating modules
-        elif export.startswith("* as "):
-            names.add(export[5:].split(" from ", 1)[0])
-        elif export.startswith("* "):
-            references.add(export[2:].split("from ", 1)[-1].strip("'\""))
-        elif export.startswith("{") and " from " in export:
-            names.update(
+        elif name.startswith("* as "):
+            all_names.add(name[5:].split(" from ", 1)[0])
+        elif name.startswith("* "):
+            references.add(name[2:].split("from ", 1)[-1].strip("'\""))
+        elif name.startswith("{") and " from " in name:
+            all_names.update(
                 item.split(" as ", 1)[-1]
-                for item in export.split(" from ")[0].strip("{}").split(",")
+                for item in name.split(" from ")[0].strip("{}").split(",")
             )
-        elif not (export.startswith("function ") or export.startswith("class ")):
-            logger.warning(f"Unknown export type {export!r}")
+        elif not (name.startswith("function ") or name.startswith("class ")):
+            logger.warning(f"Found unknown export type {name!r}")
 
-    names = {n.strip() for n in names}
+    all_names = {n.strip() for n in all_names}
     references = {r.strip() for r in references}
 
-    if exclude_default and "default" in names:
-        names.remove("default")
+    if exclude_default and "default" in all_names:
+        all_names.remove("default")
 
-    return names, references
+    return all_names, references
 
 
-def resolve_relative_url(base_url: str, rel_url: str) -> str:
+def normalize_url_path(base_url: str, rel_url: str) -> str:
     if not rel_url.startswith("."):
         if rel_url.startswith("/"):
             # copy scheme and hostname from base_url
diff --git a/src/reactpy/types.py b/src/reactpy/types.py
index da747a3c4..c6f9a6642 100644
--- a/src/reactpy/types.py
+++ b/src/reactpy/types.py
@@ -1143,6 +1143,6 @@ class JavaScriptModule:
     source: str
     source_type: SourceType
     default_fallback: Any | None
-    export_names: set[str] | None
+    import_names: set[str] | None
     file: Path | None
     unmount_before_update: bool
diff --git a/tests/test_reactjs/test_module.py b/tests/test_reactjs/test_module.py
new file mode 100644
index 000000000..3f75e1a22
--- /dev/null
+++ b/tests/test_reactjs/test_module.py
@@ -0,0 +1,215 @@
+import pytest
+
+import reactpy
+from reactpy import html
+from reactpy.reactjs import component_from_npm, import_reactjs
+from reactpy.testing import BackendFixture, DisplayFixture
+
+
+@pytest.mark.anyio
+async def test_component_from_npm_react_bootstrap():
+    async with BackendFixture(html_head=html.head(import_reactjs())) as backend:
+        async with DisplayFixture(backend=backend) as display:
+            Button = component_from_npm("react-bootstrap", "Button", version="2.10.2")
+
+            @reactpy.component
+            def App():
+                return Button({"variant": "primary", "id": "test-button"}, "Click me")
+
+            await display.show(App)
+
+            button = await display.page.wait_for_selector("#test-button")
+            assert await button.inner_text() == "Click me"
+
+            # Check if it has the correct class for primary variant
+            # React Bootstrap buttons usually have 'btn' and 'btn-primary' classes
+            classes = await button.get_attribute("class")
+            assert "btn" in classes
+            assert "btn-primary" in classes
+
+
+@pytest.mark.anyio
+async def test_component_from_npm_material_ui():
+    async with BackendFixture(html_head=html.head(import_reactjs())) as backend:
+        async with DisplayFixture(backend=backend) as display:
+            Button = component_from_npm("@mui/material", "Button")
+
+            @reactpy.component
+            def App():
+                return Button({"variant": "contained", "id": "test-button"}, "Click me")
+
+            await display.show(App)
+            button = await display.page.wait_for_selector("#test-button")
+            # Material UI transforms text to uppercase by default
+            assert await button.inner_text() == "CLICK ME"
+            classes = await button.get_attribute("class")
+            assert "MuiButton-root" in classes
+
+
+@pytest.mark.anyio
+async def test_component_from_npm_antd():
+    async with BackendFixture(html_head=html.head(import_reactjs())) as backend:
+        async with DisplayFixture(backend=backend) as display:
+            # Try antd v4 which might be more stable with esm.sh
+            Button = component_from_npm("antd", "Button", version="4.24.15")
+
+            @reactpy.component
+            def App():
+                return Button({"type": "primary", "id": "test-button"}, "Click me")
+
+            await display.show(App)
+            button = await display.page.wait_for_selector("#test-button")
+            assert "Click me" in await button.inner_text()
+            classes = await button.get_attribute("class")
+            assert "ant-btn" in classes
+
+
+@pytest.mark.anyio
+async def test_component_from_npm_chakra_ui():
+    async with BackendFixture(html_head=html.head(import_reactjs())) as backend:
+        async with DisplayFixture(backend=backend) as display:
+            ChakraProvider, Button = component_from_npm(
+                "@chakra-ui/react", ["ChakraProvider", "Button"], version="2.8.2"
+            )
+
+            @reactpy.component
+            def App():
+                return ChakraProvider(
+                    Button({"colorScheme": "blue", "id": "test-button"}, "Click me")
+                )
+
+            await display.show(App)
+            button = await display.page.wait_for_selector("#test-button")
+            assert await button.inner_text() == "Click me"
+            classes = await button.get_attribute("class")
+            assert "chakra-button" in classes
+
+
+@pytest.mark.anyio
+async def test_component_from_npm_semantic_ui_react():
+    async with BackendFixture(html_head=html.head(import_reactjs())) as backend:
+        async with DisplayFixture(backend=backend) as display:
+            Button = component_from_npm("semantic-ui-react", "Button")
+
+            @reactpy.component
+            def App():
+                return Button({"primary": True, "id": "test-button"}, "Click me")
+
+            await display.show(App)
+            button = await display.page.wait_for_selector("#test-button")
+            assert await button.inner_text() == "Click me"
+            classes = await button.get_attribute("class")
+            assert "ui" in classes
+            assert "button" in classes
+
+
+@pytest.mark.anyio
+async def test_component_from_npm_mantine():
+    async with BackendFixture(html_head=html.head(import_reactjs())) as backend:
+        async with DisplayFixture(backend=backend) as display:
+            MantineProvider, Button = component_from_npm(
+                "@mantine/core", ["MantineProvider", "Button"], version="7.3.0"
+            )
+
+            @reactpy.component
+            def App():
+                return MantineProvider(Button({"id": "test-button"}, "Click me"))
+
+            await display.show(App)
+            button = await display.page.wait_for_selector("#test-button")
+            assert await button.inner_text() == "Click me"
+            classes = await button.get_attribute("class")
+            assert "mantine-Button-root" in classes
+
+
+@pytest.mark.anyio
+async def test_component_from_npm_fluent_ui():
+    async with BackendFixture(html_head=html.head(import_reactjs())) as backend:
+        async with DisplayFixture(backend=backend) as display:
+            PrimaryButton = component_from_npm("@fluentui/react", "PrimaryButton")
+
+            @reactpy.component
+            def App():
+                return PrimaryButton({"id": "test-button"}, "Click me")
+
+            await display.show(App)
+            button = await display.page.wait_for_selector("#test-button")
+            assert await button.inner_text() == "Click me"
+            classes = await button.get_attribute("class")
+            assert "ms-Button" in classes
+
+
+@pytest.mark.anyio
+async def test_component_from_npm_blueprint():
+    async with BackendFixture(html_head=html.head(import_reactjs())) as backend:
+        async with DisplayFixture(backend=backend) as display:
+            Button = component_from_npm("@blueprintjs/core", "Button")
+
+            @reactpy.component
+            def App():
+                return Button({"intent": "primary", "id": "test-button"}, "Click me")
+
+            await display.show(App)
+            button = await display.page.wait_for_selector("#test-button")
+            assert await button.inner_text() == "Click me"
+            classes = await button.get_attribute("class")
+            assert any(c.startswith("bp") and "button" in c for c in classes.split())
+
+
+@pytest.mark.anyio
+async def test_component_from_npm_grommet():
+    async with BackendFixture(html_head=html.head(import_reactjs())) as backend:
+        async with DisplayFixture(backend=backend) as display:
+            Grommet, Button = component_from_npm("grommet", ["Grommet", "Button"])
+
+            @reactpy.component
+            def App():
+                return Grommet(
+                    Button({"primary": True, "label": "Click me", "id": "test-button"})
+                )
+
+            await display.show(App)
+            button = await display.page.wait_for_selector("#test-button")
+            assert await button.inner_text() == "Click me"
+
+
+@pytest.mark.anyio
+async def test_component_from_npm_evergreen():
+    async with BackendFixture(html_head=html.head(import_reactjs())) as backend:
+        async with DisplayFixture(backend=backend) as display:
+            Button = component_from_npm("evergreen-ui", "Button")
+
+            @reactpy.component
+            def App():
+                return Button(
+                    {"appearance": "primary", "id": "test-button"}, "Click me"
+                )
+
+            await display.show(App)
+            button = await display.page.wait_for_selector("#test-button")
+            assert await button.inner_text() == "Click me"
+
+
+@pytest.mark.anyio
+async def test_component_from_npm_react_spinners():
+    async with BackendFixture(html_head=html.head(import_reactjs())) as backend:
+        async with DisplayFixture(backend=backend) as display:
+            ClipLoader = component_from_npm("react-spinners", "ClipLoader")
+
+            @reactpy.component
+            def App():
+                return ClipLoader(
+                    {
+                        "color": "red",
+                        "loading": True,
+                        "size": 150,
+                        "data-testid": "loader",
+                    }
+                )
+
+            await display.show(App)
+            # react-spinners renders a span with the loader
+            # We can check if it exists. It might not have an ID we can easily set on the root if it doesn't forward props well,
+            # but let's try wrapping it.
+            loader = await display.page.wait_for_selector("span[data-testid='loader']")
+            assert await loader.is_visible()
diff --git a/tests/test_reactjs/test_modules.py b/tests/test_reactjs/test_modules.py
deleted file mode 100644
index f14d2053c..000000000
--- a/tests/test_reactjs/test_modules.py
+++ /dev/null
@@ -1,28 +0,0 @@
-import pytest
-
-import reactpy
-from reactpy import html
-from reactpy.reactjs import component_from_npm, import_reactjs
-from reactpy.testing import BackendFixture, DisplayFixture
-
-
-@pytest.mark.anyio
-async def test_component_from_npm_react_bootstrap():
-    async with BackendFixture(html_head=html.head(import_reactjs())) as backend:
-        async with DisplayFixture(backend=backend) as display:
-            Button = component_from_npm("react-bootstrap", "Button", version="2.10.2")
-
-            @reactpy.component
-            def App():
-                return Button({"variant": "primary", "id": "test-button"}, "Click me")
-
-            await display.show(App)
-
-            button = await display.page.wait_for_selector("#test-button")
-            assert await button.inner_text() == "Click me"
-
-            # Check if it has the correct class for primary variant
-            # React Bootstrap buttons usually have 'btn' and 'btn-primary' classes
-            classes = await button.get_attribute("class")
-            assert "btn" in classes
-            assert "btn-primary" in classes
diff --git a/tests/test_reactjs/test_utils.py b/tests/test_reactjs/test_utils.py
index 755131f15..006c36fdc 100644
--- a/tests/test_reactjs/test_utils.py
+++ b/tests/test_reactjs/test_utils.py
@@ -5,10 +5,10 @@
 
 from reactpy.reactjs.utils import (
     module_name_suffix,
-    resolve_module_exports_from_file,
-    resolve_module_exports_from_source,
-    resolve_module_exports_from_url,
-    resolve_relative_url,
+    normalize_url_path,
+    resolve_from_module_file,
+    resolve_from_module_source,
+    resolve_from_module_url,
 )
 from reactpy.testing import assert_reactpy_did_log
 
@@ -40,7 +40,7 @@ def test_resolve_module_exports_from_file(caplog):
         body="export {something as ExternalUrl}",
     )
     path = JS_FIXTURES_DIR / "export-resolution" / "index.js"
-    assert resolve_module_exports_from_file(path, 4) == {
+    assert resolve_from_module_file(path, 4) == {
         "Index",
         "One",
         "Two",
@@ -50,13 +50,13 @@ def test_resolve_module_exports_from_file(caplog):
 
 def test_resolve_module_exports_from_file_log_on_max_depth(caplog):
     path = JS_FIXTURES_DIR / "export-resolution" / "index.js"
-    assert resolve_module_exports_from_file(path, 0) == set()
+    assert resolve_from_module_file(path, 0) == set()
     assert len(caplog.records) == 1
     assert caplog.records[0].message.endswith("max depth reached")
 
     caplog.records.clear()
 
-    assert resolve_module_exports_from_file(path, 2) == {"Index", "One"}
+    assert resolve_from_module_file(path, 2) == {"Index", "One"}
     assert len(caplog.records) == 1
     assert caplog.records[0].message.endswith("max depth reached")
 
@@ -66,7 +66,7 @@ def test_resolve_module_exports_from_file_log_on_unknown_file_location(
 ):
     file = tmp_path / "some.js"
     file.write_text("export * from './does-not-exist.js';")
-    resolve_module_exports_from_file(file, 2)
+    resolve_from_module_file(file, 2)
     assert len(caplog.records) == 1
     assert caplog.records[0].message.startswith(
         "Did not resolve exports for unknown file"
@@ -96,7 +96,7 @@ def test_resolve_module_exports_from_url():
         body="export const Fourth = 4;",
     )
 
-    assert resolve_module_exports_from_url("https://some.url/first.js", 4) == {
+    assert resolve_from_module_url("https://some.url/first.js", 4) == {
         "First",
         "Second",
         "Third",
@@ -105,13 +105,13 @@ def test_resolve_module_exports_from_url():
 
 
 def test_resolve_module_exports_from_url_log_on_max_depth(caplog):
-    assert resolve_module_exports_from_url("https://some.url", 0) == set()
+    assert resolve_from_module_url("https://some.url", 0) == set()
     assert len(caplog.records) == 1
     assert caplog.records[0].message.endswith("max depth reached")
 
 
 def test_resolve_module_exports_from_url_log_on_bad_response(caplog):
-    assert resolve_module_exports_from_url("https://some.url", 1) == set()
+    assert resolve_from_module_url("https://some.url", 1) == set()
     assert len(caplog.records) == 1
     assert caplog.records[0].message.startswith("Did not resolve exports for url")
 
@@ -128,13 +128,13 @@ def test_resolve_module_exports_from_url_log_on_bad_response(caplog):
     ],
 )
 def test_resolve_module_default_exports_from_source(text):
-    names, references = resolve_module_exports_from_source(text, exclude_default=False)
+    names, references = resolve_from_module_source(text, exclude_default=False)
     assert names == {"default"} and not references
 
 
 def test_resolve_module_exports_from_source():
     fixture_file = JS_FIXTURES_DIR / "exports-syntax.js"
-    names, references = resolve_module_exports_from_source(
+    names, references = resolve_from_module_source(
         fixture_file.read_text(), exclude_default=False
     )
     assert names == (
@@ -148,18 +148,18 @@ def test_resolve_module_exports_from_source():
 
 def test_log_on_unknown_export_type():
     with assert_reactpy_did_log(match_message="Unknown export type "):
-        assert resolve_module_exports_from_source(
+        assert resolve_from_module_source(
             "export something unknown;", exclude_default=False
         ) == (set(), set())
 
 
 def test_resolve_relative_url():
     assert (
-        resolve_relative_url("https://some.url", "path/to/another.js")
+        normalize_url_path("https://some.url", "path/to/another.js")
         == "path/to/another.js"
     )
     assert (
-        resolve_relative_url("https://some.url", "/path/to/another.js")
+        normalize_url_path("https://some.url", "/path/to/another.js")
         == "https://some.url/path/to/another.js"
     )
-    assert resolve_relative_url("/some/path", "to/another.js") == "to/another.js"
+    assert normalize_url_path("/some/path", "to/another.js") == "to/another.js"

From f6d7a075b785500e417cf7fc017020dac654927a Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Thu, 11 Dec 2025 06:35:19 -0800
Subject: [PATCH 16/21] fix tests

---
 src/reactpy/testing/logs.py      | 2 +-
 src/reactpy/web/utils.py         | 3 +--
 tests/test_reactjs/test_utils.py | 6 +++---
 tests/test_web/test_module.py    | 4 ++--
 4 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/reactpy/testing/logs.py b/src/reactpy/testing/logs.py
index e9337b19c..38470ea4f 100644
--- a/src/reactpy/testing/logs.py
+++ b/src/reactpy/testing/logs.py
@@ -175,4 +175,4 @@ def _raise_log_message_error(
         conditions.append(f"exception type {error_type}")
     if match_error:
         conditions.append(f"error message pattern {match_error!r}")
-    raise LogAssertionError(prefix + " " + " and ".join(conditions))
+    raise LogAssertionError(f"{prefix} " + " and ".join(conditions))
diff --git a/src/reactpy/web/utils.py b/src/reactpy/web/utils.py
index 40dd3225a..8786501f4 100644
--- a/src/reactpy/web/utils.py
+++ b/src/reactpy/web/utils.py
@@ -1,4 +1,3 @@
-# nocov
-raise ImportError(
+raise ImportError(  # nocov
     "WARNING: reactpy.web.utils was not within the public API, and thus has been removed without notice."
 )
diff --git a/tests/test_reactjs/test_utils.py b/tests/test_reactjs/test_utils.py
index 006c36fdc..c22ad80a0 100644
--- a/tests/test_reactjs/test_utils.py
+++ b/tests/test_reactjs/test_utils.py
@@ -69,7 +69,7 @@ def test_resolve_module_exports_from_file_log_on_unknown_file_location(
     resolve_from_module_file(file, 2)
     assert len(caplog.records) == 1
     assert caplog.records[0].message.startswith(
-        "Did not resolve exports for unknown file"
+        "Did not resolve imports for unknown file"
     )
 
 
@@ -113,7 +113,7 @@ def test_resolve_module_exports_from_url_log_on_max_depth(caplog):
 def test_resolve_module_exports_from_url_log_on_bad_response(caplog):
     assert resolve_from_module_url("https://some.url", 1) == set()
     assert len(caplog.records) == 1
-    assert caplog.records[0].message.startswith("Did not resolve exports for url")
+    assert caplog.records[0].message.startswith("Did not resolve imports for url")
 
 
 @pytest.mark.parametrize(
@@ -147,7 +147,7 @@ def test_resolve_module_exports_from_source():
 
 
 def test_log_on_unknown_export_type():
-    with assert_reactpy_did_log(match_message="Unknown export type "):
+    with assert_reactpy_did_log(match_message="Found unknown export "):
         assert resolve_from_module_source(
             "export something unknown;", exclude_default=False
         ) == (set(), set())
diff --git a/tests/test_web/test_module.py b/tests/test_web/test_module.py
index aeb1a7cb8..97579379b 100644
--- a/tests/test_web/test_module.py
+++ b/tests/test_web/test_module.py
@@ -165,10 +165,10 @@ def test_web_module_from_file_replace_existing(tmp_path):
 def test_module_missing_exports():
     module = JavaScriptModule("test", NAME_SOURCE, None, {"a", "b", "c"}, None, False)
 
-    with pytest.raises(ValueError, match=r"does not export 'x'"):
+    with pytest.raises(ValueError, match=r"does not contain 'x'"):
         reactpy.reactjs.module_to_vdom(module, "x")
 
-    with pytest.raises(ValueError, match=r"does not export \['x', 'y'\]"):
+    with pytest.raises(ValueError, match=r"does not contain \['x', 'y'\]"):
         reactpy.reactjs.module_to_vdom(module, ["x", "y"])
 
 

From 520de9b0d6a48bbc096bfb44dd8cd782c556c407 Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Thu, 11 Dec 2025 07:26:06 -0800
Subject: [PATCH 17/21] Fix javascript component children (Fix #1262)

---
 src/js/packages/@reactpy/client/src/vdom.tsx  |  99 ++++++++++-
 tests/test_reactjs/__init__.py                |  91 ++++++++++
 tests/test_reactjs/test_modules.py            |  91 ++++++++++
 ...est_module.py => test_modules_from_npm.py} | 163 ++++++++++++++++++
 tests/test_web/test_module.py                 |   2 +
 5 files changed, 439 insertions(+), 7 deletions(-)
 create mode 100644 tests/test_reactjs/test_modules.py
 rename tests/test_reactjs/{test_module.py => test_modules_from_npm.py} (55%)

diff --git a/src/js/packages/@reactpy/client/src/vdom.tsx b/src/js/packages/@reactpy/client/src/vdom.tsx
index b94ba3003..54999bf1f 100644
--- a/src/js/packages/@reactpy/client/src/vdom.tsx
+++ b/src/js/packages/@reactpy/client/src/vdom.tsx
@@ -8,6 +8,7 @@ import type {
   ReactPyModule,
   BindImportSource,
   ReactPyModuleBinding,
+  ImportSourceBinding,
 } from "./types";
 import log from "./logger";
 
@@ -75,13 +76,15 @@ function createImportSourceElement(props: {
     if (
       !isImportSourceEqual(props.currentImportSource, props.model.importSource)
     ) {
-      log.error(
-        "Parent element import source " +
-          stringifyImportSource(props.currentImportSource) +
-          " does not match child's import source " +
-          stringifyImportSource(props.model.importSource),
-      );
-      return null;
+      return props.binding.create("reactpy-child", {
+        ref: (node: ReactPyChild | null) => {
+          if (node) {
+            node.client = props.client;
+            node.model = props.model;
+            node.requestUpdate();
+          }
+        },
+      });
     } else {
       type = getComponentFromModule(
         props.module,
@@ -270,3 +273,85 @@ function generic_reactjs_bind(node: HTMLElement) {
     unmount: () => preact.render(null, node),
   };
 }
+
+class ReactPyChild extends HTMLElement {
+  mountPoint: HTMLDivElement;
+  binding: ImportSourceBinding | null = null;
+  _client: ReactPyClientInterface | null = null;
+  _model: ReactPyVdom | null = null;
+  currentImportSource: ReactPyVdomImportSource | null = null;
+
+  constructor() {
+    super();
+    this.mountPoint = document.createElement("div");
+    this.mountPoint.style.display = "contents";
+  }
+
+  connectedCallback() {
+    this.appendChild(this.mountPoint);
+  }
+
+  set client(value: ReactPyClientInterface) {
+    this._client = value;
+  }
+
+  set model(value: ReactPyVdom) {
+    this._model = value;
+  }
+
+  requestUpdate() {
+    this.update();
+  }
+
+  async update() {
+    if (!this._client || !this._model || !this._model.importSource) {
+      return;
+    }
+
+    const newImportSource = this._model.importSource;
+
+    if (
+      !this.binding ||
+      !this.currentImportSource ||
+      !isImportSourceEqual(this.currentImportSource, newImportSource)
+    ) {
+      if (this.binding) {
+        this.binding.unmount();
+        this.binding = null;
+      }
+
+      this.currentImportSource = newImportSource;
+
+      try {
+        const bind = await loadImportSource(newImportSource, this._client);
+        if (this.isConnected) {
+          this.binding = bind(this.mountPoint);
+          if (this.binding) {
+            this.binding.render(this._model);
+          }
+        }
+      } catch (error) {
+        console.error("Failed to load import source", error);
+      }
+    } else {
+      if (this.binding) {
+        this.binding.render(this._model);
+      }
+    }
+  }
+
+  disconnectedCallback() {
+    if (this.binding) {
+      this.binding.unmount();
+      this.binding = null;
+      this.currentImportSource = null;
+    }
+  }
+}
+
+if (
+  typeof customElements !== "undefined" &&
+  !customElements.get("reactpy-child")
+) {
+  customElements.define("reactpy-child", ReactPyChild);
+}
diff --git a/tests/test_reactjs/__init__.py b/tests/test_reactjs/__init__.py
index e69de29bb..ad1f106fd 100644
--- a/tests/test_reactjs/__init__.py
+++ b/tests/test_reactjs/__init__.py
@@ -0,0 +1,91 @@
+import pytest
+
+import reactpy
+from reactpy import html
+from reactpy.reactjs import component_from_string, import_reactjs
+from reactpy.testing import BackendFixture, DisplayFixture
+
+
+@pytest.mark.anyio
+async def test_nested_client_side_components():
+    async with BackendFixture(html_head=html.head(import_reactjs())) as backend:
+        async with DisplayFixture(backend=backend) as display:
+            # Module A
+            ComponentA = component_from_string(
+                """
+                import React from "react";
+                export function ComponentA({ children }) {
+                    return React.createElement("div", { id: "component-a" }, children);
+                }
+                """,
+                "ComponentA",
+                name="module-a",
+            )
+
+            # Module B
+            ComponentB = component_from_string(
+                """
+                import React from "react";
+                export function ComponentB({ children }) {
+                    return React.createElement("div", { id: "component-b" }, children);
+                }
+                """,
+                "ComponentB",
+                name="module-b",
+            )
+
+            @reactpy.component
+            def App():
+                return ComponentA(
+                    ComponentB(
+                        reactpy.html.div({"id": "server-side"}, "Server Side Content")
+                    )
+                )
+
+            await display.show(App)
+
+            # Check that all components are rendered
+            await display.page.wait_for_selector("#component-a")
+            await display.page.wait_for_selector("#component-b")
+            await display.page.wait_for_selector("#server-side")
+
+
+@pytest.mark.anyio
+async def test_interleaved_client_server_components():
+    async with BackendFixture(html_head=html.head(import_reactjs())) as backend:
+        async with DisplayFixture(backend=backend) as display:
+            # Module C
+            ComponentC = component_from_string(
+                """
+                import React from "react";
+                export function ComponentC({ children }) {
+                    return React.createElement("div", { id: "component-c", className: "component-c" }, children);
+                }
+                """,
+                "ComponentC",
+                name="module-c",
+            )
+
+            @reactpy.component
+            def App():
+                return reactpy.html.div(
+                    {"id": "root-server"},
+                    ComponentC(
+                        reactpy.html.div(
+                            {"id": "nested-server"},
+                            ComponentC(
+                                reactpy.html.span({"id": "deep-server"}, "Deep Content")
+                            ),
+                        )
+                    ),
+                )
+
+            await display.show(App)
+
+            await display.page.wait_for_selector("#root-server")
+            await display.page.wait_for_selector(".component-c")
+            await display.page.wait_for_selector("#nested-server")
+            # We need to check that there are two component-c elements
+            elements = await display.page.query_selector_all(".component-c")
+            assert len(elements) == 2
+            await display.page.wait_for_selector("#deep-server")
diff --git a/tests/test_reactjs/test_modules.py b/tests/test_reactjs/test_modules.py
new file mode 100644
index 000000000..ad1f106fd
--- /dev/null
+++ b/tests/test_reactjs/test_modules.py
@@ -0,0 +1,91 @@
+import pytest
+
+import reactpy
+from reactpy import html
+from reactpy.reactjs import component_from_string, import_reactjs
+from reactpy.testing import BackendFixture, DisplayFixture
+
+
+@pytest.mark.anyio
+async def test_nested_client_side_components():
+    async with BackendFixture(html_head=html.head(import_reactjs())) as backend:
+        async with DisplayFixture(backend=backend) as display:
+            # Module A
+            ComponentA = component_from_string(
+                """
+                import React from "react";
+                export function ComponentA({ children }) {
+                    return React.createElement("div", { id: "component-a" }, children);
+                }
+                """,
+                "ComponentA",
+                name="module-a",
+            )
+
+            # Module B
+            ComponentB = component_from_string(
+                """
+                import React from "react";
+                export function ComponentB({ children }) {
+                    return React.createElement("div", { id: "component-b" }, children);
+                }
+                """,
+                "ComponentB",
+                name="module-b",
+            )
+
+            @reactpy.component
+            def App():
+                return ComponentA(
+                    ComponentB(
+                        reactpy.html.div({"id": "server-side"}, "Server Side Content")
+                    )
+                )
+
+            await display.show(App)
+
+            # Check that all components are rendered
+            await display.page.wait_for_selector("#component-a")
+            await display.page.wait_for_selector("#component-b")
+            await display.page.wait_for_selector("#server-side")
+
+
+@pytest.mark.anyio
+async def test_interleaved_client_server_components():
+    async with BackendFixture(html_head=html.head(import_reactjs())) as backend:
+        async with DisplayFixture(backend=backend) as display:
+            # Module C
+            ComponentC = component_from_string(
+                """
+                import React from "react";
+                export function ComponentC({ children }) {
+                    return React.createElement("div", { id: "component-c", className: "component-c" }, children);
+                }
+                """,
+                "ComponentC",
+                name="module-c",
+            )
+
+            @reactpy.component
+            def App():
+                return reactpy.html.div(
+                    {"id": "root-server"},
+                    ComponentC(
+                        reactpy.html.div(
+                            {"id": "nested-server"},
+                            ComponentC(
+                                reactpy.html.span({"id": "deep-server"}, "Deep Content")
+                            ),
+                        )
+                    ),
+                )
+
+            await display.show(App)
+
+            await display.page.wait_for_selector("#root-server")
+            await display.page.wait_for_selector(".component-c")
+            await display.page.wait_for_selector("#nested-server")
+            # We need to check that there are two component-c elements
+            elements = await display.page.query_selector_all(".component-c")
+            assert len(elements) == 2
+            await display.page.wait_for_selector("#deep-server")
diff --git a/tests/test_reactjs/test_module.py b/tests/test_reactjs/test_modules_from_npm.py
similarity index 55%
rename from tests/test_reactjs/test_module.py
rename to tests/test_reactjs/test_modules_from_npm.py
index 3f75e1a22..99bb7d6e2 100644
--- a/tests/test_reactjs/test_module.py
+++ b/tests/test_reactjs/test_modules_from_npm.py
@@ -213,3 +213,166 @@ def App():
             # but let's try wrapping it.
             loader = await display.page.wait_for_selector("span[data-testid='loader']")
             assert await loader.is_visible()
+
+
+@pytest.mark.anyio
+async def test_nested_npm_components():
+    async with BackendFixture(html_head=html.head(import_reactjs())) as backend:
+        async with DisplayFixture(backend=backend) as display:
+            # Use Chakra UI Provider and Box, and nest a React Bootstrap Button inside
+            ChakraProvider, Box = component_from_npm(
+                "@chakra-ui/react", ["ChakraProvider", "Box"], version="2.8.2"
+            )
+            BootstrapButton = component_from_npm(
+                "react-bootstrap", "Button", version="2.10.2"
+            )
+
+            @reactpy.component
+            def App():
+                return ChakraProvider(
+                    Box(
+                        {
+                            "id": "chakra-box",
+                            "p": 4,
+                            "color": "white",
+                            "bg": "blue.500",
+                        },
+                        BootstrapButton(
+                            {"variant": "light", "id": "bootstrap-button"},
+                            "Nested Button",
+                        ),
+                    )
+                )
+
+            await display.show(App)
+
+            box = await display.page.wait_for_selector("#chakra-box")
+            assert await box.is_visible()
+
+            button = await display.page.wait_for_selector("#bootstrap-button")
+            assert await button.inner_text() == "Nested Button"
+            classes = await button.get_attribute("class")
+            assert "btn" in classes
+
+
+@pytest.mark.anyio
+async def test_interleaved_npm_and_server_components():
+    async with BackendFixture(html_head=html.head(import_reactjs())) as backend:
+        async with DisplayFixture(backend=backend) as display:
+            Card = component_from_npm("antd", "Card", version="4.24.15")
+            Button = component_from_npm("@mui/material", "Button")
+
+            @reactpy.component
+            def App():
+                return Card(
+                    {"title": "Antd Card", "id": "antd-card"},
+                    html.div(
+                        {
+                            "id": "server-div",
+                            "style": {"padding": "10px", "border": "1px solid red"},
+                        },
+                        "Server Side Div",
+                        Button(
+                            {"variant": "contained", "id": "mui-button"}, "MUI Button"
+                        ),
+                    ),
+                )
+
+            await display.show(App)
+
+            card = await display.page.wait_for_selector("#antd-card")
+            assert await card.is_visible()
+
+            server_div = await display.page.wait_for_selector("#server-div")
+            assert await server_div.is_visible()
+            assert "Server Side Div" in await server_div.inner_text()
+
+            button = await display.page.wait_for_selector("#mui-button")
+            assert "MUI BUTTON" in await button.inner_text()  # MUI capitalizes
+
+
+@pytest.mark.anyio
+async def test_complex_nested_material_ui():
+    async with BackendFixture(html_head=html.head(import_reactjs())) as backend:
+        async with DisplayFixture(backend=backend) as display:
+            # Import multiple components from @mui/material
+            # Note: component_from_npm can take a list of names
+            mui_components = component_from_npm(
+                "@mui/material",
+                ["Button", "Card", "CardContent", "Typography", "Box", "Stack"],
+            )
+            Button, Card, CardContent, Typography, Box, Stack = mui_components
+
+            @reactpy.component
+            def App():
+                return Box(
+                    {
+                        "sx": {
+                            "padding": "20px",
+                            "backgroundColor": "#f5f5f5",
+                            "height": "100vh",
+                        }
+                    },
+                    Stack(
+                        {"spacing": 2, "direction": "column", "alignItems": "center"},
+                        Typography(
+                            {"variant": "h4", "component": "h1", "gutterBottom": True},
+                            "Complex Nested UI Test",
+                        ),
+                        Card(
+                            {"sx": {"minWidth": 300, "maxWidth": 500}},
+                            CardContent(
+                                Typography(
+                                    {
+                                        "sx": {"fontSize": 14},
+                                        "color": "text.secondary",
+                                        "gutterBottom": True,
+                                    },
+                                    "Word of the Day",
+                                ),
+                                Typography(
+                                    {"variant": "h5", "component": "div"},
+                                    "be-nev-o-lent",
+                                ),
+                                Typography(
+                                    {"sx": {"mb": 1.5}, "color": "text.secondary"},
+                                    "adjective",
+                                ),
+                                Typography(
+                                    {"variant": "body2"}, "well meaning and kindly."
+                                ),
+                            ),
+                            Box(
+                                {
+                                    "sx": {
+                                        "padding": "10px",
+                                        "display": "flex",
+                                        "justifyContent": "flex-end",
+                                    }
+                                },
+                                Button(
+                                    {
+                                        "size": "small",
+                                        "variant": "contained",
+                                        "id": "learn-more-btn",
+                                    },
+                                    "Learn More",
+                                ),
+                            ),
+                        ),
+                    ),
+                )
+
+            await display.show(App)
+
+            # Check if the button is visible and has correct text
+            btn = await display.page.wait_for_selector("#learn-more-btn")
+            assert await btn.is_visible()
+            # Material UI transforms text to uppercase by default
+            assert "LEARN MORE" in await btn.inner_text()
+
+            # Check if Card is rendered (it usually has MuiCard-root class)
+            # We can't easily select by ID as we didn't put one on Card, but we can check structure if needed.
+            # But let's just check if the text "be-nev-o-lent" is visible
+            text = await display.page.wait_for_selector("text=be-nev-o-lent")
+            assert await text.is_visible()
diff --git a/tests/test_web/test_module.py b/tests/test_web/test_module.py
index 97579379b..ae751b69e 100644
--- a/tests/test_web/test_module.py
+++ b/tests/test_web/test_module.py
@@ -1,3 +1,5 @@
+# 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.
 from pathlib import Path
 
 import pytest

From b72df1831514b0e582fece324133f4eb676ed928 Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Thu, 11 Dec 2025 07:28:34 -0800
Subject: [PATCH 18/21] Add changelog

---
 docs/source/about/changelog.rst | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/source/about/changelog.rst b/docs/source/about/changelog.rst
index 5dcc104f2..6ea0fd6b0 100644
--- a/docs/source/about/changelog.rst
+++ b/docs/source/about/changelog.rst
@@ -103,6 +103,7 @@ Unreleased
 - :pull:`1239` - Fixed a bug where script elements would not render to the DOM as plain text.
 - :pull:`1271` - Fixed a bug where the ``key`` property provided within server-side ReactPy code was failing to propagate to the front-end JavaScript components.
 - :pull:`1254` - Fixed a bug where ``RuntimeError("Hook stack is in an invalid state")`` errors could be generated when using a webserver that reuses threads.
+- :pull:`1314` - Allow for ReactPy and ReactJS components to be arbitrarily inserted onto the page with any possible hierarchy.
 
 
 v1.1.0

From 1b31051163d1e876e2b6ab7e68712b9c23d87c6f Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Thu, 11 Dec 2025 07:52:42 -0800
Subject: [PATCH 19/21] Bump reactpy client

---
 src/js/packages/@reactpy/client/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/js/packages/@reactpy/client/package.json b/src/js/packages/@reactpy/client/package.json
index d8e2fcefd..bef8fa4b5 100644
--- a/src/js/packages/@reactpy/client/package.json
+++ b/src/js/packages/@reactpy/client/package.json
@@ -31,5 +31,5 @@
     "checkTypes": "tsc --noEmit"
   },
   "type": "module",
-  "version": "1.0.2"
+  "version": "1.0.3"
 }

From 428a06df53c7c67f8e5791fe81c9a39e3d5154ed Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Thu, 11 Dec 2025 07:53:08 -0800
Subject: [PATCH 20/21] Remove serena

---
 .serena/.gitignore                       |  1 -
 .serena/memories/code_style.md           |  8 ---
 .serena/memories/development_workflow.md | 12 ----
 .serena/memories/project_overview.md     | 16 -----
 .serena/memories/suggested_commands.md   | 17 -----
 .serena/project.yml                      | 84 ------------------------
 6 files changed, 138 deletions(-)
 delete mode 100644 .serena/.gitignore
 delete mode 100644 .serena/memories/code_style.md
 delete mode 100644 .serena/memories/development_workflow.md
 delete mode 100644 .serena/memories/project_overview.md
 delete mode 100644 .serena/memories/suggested_commands.md
 delete mode 100644 .serena/project.yml

diff --git a/.serena/.gitignore b/.serena/.gitignore
deleted file mode 100644
index 14d86ad62..000000000
--- a/.serena/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-/cache
diff --git a/.serena/memories/code_style.md b/.serena/memories/code_style.md
deleted file mode 100644
index cd9ad1ecd..000000000
--- a/.serena/memories/code_style.md
+++ /dev/null
@@ -1,8 +0,0 @@
-# Code Style & Conventions
-
-- **Formatting**: Enforced by `hatch fmt`.
-- **Type Hints**: Required, checked by `hatch run python:type_check`.
-- **JS Linting**: Enforced by `hatch run javascript:check`.
-- **Tests**: All tests must pass. Failures not allowed.
-- **Documentation**: Must be updated with code changes.
-- **Changelog**: Required for significant changes.
diff --git a/.serena/memories/development_workflow.md b/.serena/memories/development_workflow.md
deleted file mode 100644
index e2d0cc191..000000000
--- a/.serena/memories/development_workflow.md
+++ /dev/null
@@ -1,12 +0,0 @@
-# Development Workflow
-
-1. **Bootstrap**: Install Python 3.9+, Hatch, Bun.
-2. **Changes**: Modify code.
-3. **Format**: `hatch fmt`.
-4. **Type Check**: `hatch run python:type_check`.
-5. **JS Check**: `hatch run javascript:check` (if JS changed).
-6. **Test**: `hatch test`.
-7. **Validate**: Manual component/server tests.
-8. **Build JS**: `hatch run javascript:build` (if JS changed).
-9. **Docs**: Update if Python source changed.
-10. **Changelog**: Add entry in `docs/source/about/changelog.rst`.
diff --git a/.serena/memories/project_overview.md b/.serena/memories/project_overview.md
deleted file mode 100644
index b36012911..000000000
--- a/.serena/memories/project_overview.md
+++ /dev/null
@@ -1,16 +0,0 @@
-# ReactPy Overview
-
-## Purpose
-ReactPy builds UIs in Python without JS, using React-like components and a Python-to-JS bridge.
-
-## Tech Stack
-- **Python**: 3.9+
-- **Build**: Hatch
-- **JS Runtime**: Bun
-- **Deps**: fastjsonschema, requests, lxml, anyio
-
-## Structure
-- `src/reactpy/`: Python source (core, web, executors).
-- `src/js/`: JS packages (client, app).
-- `tests/`: Test suite.
-- `docs/`: Documentation.
diff --git a/.serena/memories/suggested_commands.md b/.serena/memories/suggested_commands.md
deleted file mode 100644
index 66f252da4..000000000
--- a/.serena/memories/suggested_commands.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# Suggested Commands (Hatch)
-
-## Python
-- **Test**: `hatch test` (All must pass)
-- **Coverage**: `hatch test --cover`
-- **Format**: `hatch fmt`
-- **Check Format**: `hatch fmt --check`
-- **Type Check**: `hatch run python:type_check`
-- **Build**: `hatch build --clean`
-
-## JavaScript
-- **Build**: `hatch run javascript:build` (Rebuild after JS changes)
-- **Check**: `hatch run javascript:check`
-- **Fix**: `hatch run javascript:fix`
-
-## Shell
-- **Dev Shell**: `hatch shell`
diff --git a/.serena/project.yml b/.serena/project.yml
deleted file mode 100644
index fa4652a00..000000000
--- a/.serena/project.yml
+++ /dev/null
@@ -1,84 +0,0 @@
-# list of languages for which language servers are started; choose from:
-#   al               bash             clojure          cpp              csharp           csharp_omnisharp
-#   dart             elixir           elm              erlang           fortran          go
-#   haskell          java             julia            kotlin           lua              markdown
-#   nix              perl             php              python           python_jedi      r
-#   rego             ruby             ruby_solargraph  rust             scala            swift
-#   terraform        typescript       typescript_vts   yaml             zig
-# Note:
-#   - For C, use cpp
-#   - For JavaScript, use typescript
-# Special requirements:
-#   - csharp: Requires the presence of a .sln file in the project folder.
-# When using multiple languages, the first language server that supports a given file will be used for that file.
-# The first language is the default language and the respective language server will be used as a fallback.
-# Note that when using the JetBrains backend, language servers are not used and this list is correspondingly ignored.
-languages:
-- python
-
-# the encoding used by text files in the project
-# For a list of possible encodings, see https://docs.python.org/3.11/library/codecs.html#standard-encodings
-encoding: "utf-8"
-
-# whether to use the project's gitignore file to ignore files
-# Added on 2025-04-07
-ignore_all_files_in_gitignore: true
-
-# list of additional paths to ignore
-# same syntax as gitignore, so you can use * and **
-# Was previously called `ignored_dirs`, please update your config if you are using that.
-# Added (renamed) on 2025-04-07
-ignored_paths: []
-
-# whether the project is in read-only mode
-# If set to true, all editing tools will be disabled and attempts to use them will result in an error
-# Added on 2025-04-18
-read_only: false
-
-# list of tool names to exclude. We recommend not excluding any tools, see the readme for more details.
-# Below is the complete list of tools for convenience.
-# To make sure you have the latest list of tools, and to view their descriptions, 
-# execute `uv run scripts/print_tool_overview.py`.
-#
-#  * `activate_project`: Activates a project by name.
-#  * `check_onboarding_performed`: Checks whether project onboarding was already performed.
-#  * `create_text_file`: Creates/overwrites a file in the project directory.
-#  * `delete_lines`: Deletes a range of lines within a file.
-#  * `delete_memory`: Deletes a memory from Serena's project-specific memory store.
-#  * `execute_shell_command`: Executes a shell command.
-#  * `find_referencing_code_snippets`: Finds code snippets in which the symbol at the given location is referenced.
-#  * `find_referencing_symbols`: Finds symbols that reference the symbol at the given location (optionally filtered by type).
-#  * `find_symbol`: Performs a global (or local) search for symbols with/containing a given name/substring (optionally filtered by type).
-#  * `get_current_config`: Prints the current configuration of the agent, including the active and available projects, tools, contexts, and modes.
-#  * `get_symbols_overview`: Gets an overview of the top-level symbols defined in a given file.
-#  * `initial_instructions`: Gets the initial instructions for the current project.
-#     Should only be used in settings where the system prompt cannot be set,
-#     e.g. in clients you have no control over, like Claude Desktop.
-#  * `insert_after_symbol`: Inserts content after the end of the definition of a given symbol.
-#  * `insert_at_line`: Inserts content at a given line in a file.
-#  * `insert_before_symbol`: Inserts content before the beginning of the definition of a given symbol.
-#  * `list_dir`: Lists files and directories in the given directory (optionally with recursion).
-#  * `list_memories`: Lists memories in Serena's project-specific memory store.
-#  * `onboarding`: Performs onboarding (identifying the project structure and essential tasks, e.g. for testing or building).
-#  * `prepare_for_new_conversation`: Provides instructions for preparing for a new conversation (in order to continue with the necessary context).
-#  * `read_file`: Reads a file within the project directory.
-#  * `read_memory`: Reads the memory with the given name from Serena's project-specific memory store.
-#  * `remove_project`: Removes a project from the Serena configuration.
-#  * `replace_lines`: Replaces a range of lines within a file with new content.
-#  * `replace_symbol_body`: Replaces the full definition of a symbol.
-#  * `restart_language_server`: Restarts the language server, may be necessary when edits not through Serena happen.
-#  * `search_for_pattern`: Performs a search for a pattern in the project.
-#  * `summarize_changes`: Provides instructions for summarizing the changes made to the codebase.
-#  * `switch_modes`: Activates modes by providing a list of their names
-#  * `think_about_collected_information`: Thinking tool for pondering the completeness of collected information.
-#  * `think_about_task_adherence`: Thinking tool for determining whether the agent is still on track with the current task.
-#  * `think_about_whether_you_are_done`: Thinking tool for determining whether the task is truly completed.
-#  * `write_memory`: Writes a named memory (for future reference) to Serena's project-specific memory store.
-excluded_tools: []
-
-# initial prompt for the project. It will always be given to the LLM upon activating the project
-# (contrary to the memories, which are loaded on demand).
-initial_prompt: ""
-
-project_name: "reactpy"
-included_optional_tools: []

From 99665f2253b28a5bac6625fb67cb465cdaa2adcf Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Thu, 11 Dec 2025 08:23:48 -0800
Subject: [PATCH 21/21] Mark reactjs tests as flaky

---
 tests/test_reactjs/test_modules_from_npm.py | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/tests/test_reactjs/test_modules_from_npm.py b/tests/test_reactjs/test_modules_from_npm.py
index 99bb7d6e2..61c51f515 100644
--- a/tests/test_reactjs/test_modules_from_npm.py
+++ b/tests/test_reactjs/test_modules_from_npm.py
@@ -7,6 +7,7 @@
 
 
 @pytest.mark.anyio
+@pytest.mark.flaky(reruns=5, reruns_delay=2)
 async def test_component_from_npm_react_bootstrap():
     async with BackendFixture(html_head=html.head(import_reactjs())) as backend:
         async with DisplayFixture(backend=backend) as display:
@@ -29,6 +30,7 @@ def App():
 
 
 @pytest.mark.anyio
+@pytest.mark.flaky(reruns=5, reruns_delay=2)
 async def test_component_from_npm_material_ui():
     async with BackendFixture(html_head=html.head(import_reactjs())) as backend:
         async with DisplayFixture(backend=backend) as display:
@@ -47,6 +49,7 @@ def App():
 
 
 @pytest.mark.anyio
+@pytest.mark.flaky(reruns=5, reruns_delay=2)
 async def test_component_from_npm_antd():
     async with BackendFixture(html_head=html.head(import_reactjs())) as backend:
         async with DisplayFixture(backend=backend) as display:
@@ -65,6 +68,7 @@ def App():
 
 
 @pytest.mark.anyio
+@pytest.mark.flaky(reruns=5, reruns_delay=2)
 async def test_component_from_npm_chakra_ui():
     async with BackendFixture(html_head=html.head(import_reactjs())) as backend:
         async with DisplayFixture(backend=backend) as display:
@@ -86,6 +90,7 @@ def App():
 
 
 @pytest.mark.anyio
+@pytest.mark.flaky(reruns=5, reruns_delay=2)
 async def test_component_from_npm_semantic_ui_react():
     async with BackendFixture(html_head=html.head(import_reactjs())) as backend:
         async with DisplayFixture(backend=backend) as display:
@@ -104,6 +109,7 @@ def App():
 
 
 @pytest.mark.anyio
+@pytest.mark.flaky(reruns=5, reruns_delay=2)
 async def test_component_from_npm_mantine():
     async with BackendFixture(html_head=html.head(import_reactjs())) as backend:
         async with DisplayFixture(backend=backend) as display:
@@ -123,6 +129,7 @@ def App():
 
 
 @pytest.mark.anyio
+@pytest.mark.flaky(reruns=5, reruns_delay=2)
 async def test_component_from_npm_fluent_ui():
     async with BackendFixture(html_head=html.head(import_reactjs())) as backend:
         async with DisplayFixture(backend=backend) as display:
@@ -140,6 +147,7 @@ def App():
 
 
 @pytest.mark.anyio
+@pytest.mark.flaky(reruns=5, reruns_delay=2)
 async def test_component_from_npm_blueprint():
     async with BackendFixture(html_head=html.head(import_reactjs())) as backend:
         async with DisplayFixture(backend=backend) as display:
@@ -157,6 +165,7 @@ def App():
 
 
 @pytest.mark.anyio
+@pytest.mark.flaky(reruns=5, reruns_delay=2)
 async def test_component_from_npm_grommet():
     async with BackendFixture(html_head=html.head(import_reactjs())) as backend:
         async with DisplayFixture(backend=backend) as display:
@@ -174,6 +183,7 @@ def App():
 
 
 @pytest.mark.anyio
+@pytest.mark.flaky(reruns=5, reruns_delay=2)
 async def test_component_from_npm_evergreen():
     async with BackendFixture(html_head=html.head(import_reactjs())) as backend:
         async with DisplayFixture(backend=backend) as display:
@@ -191,6 +201,7 @@ def App():
 
 
 @pytest.mark.anyio
+@pytest.mark.flaky(reruns=5, reruns_delay=2)
 async def test_component_from_npm_react_spinners():
     async with BackendFixture(html_head=html.head(import_reactjs())) as backend:
         async with DisplayFixture(backend=backend) as display:
@@ -216,6 +227,7 @@ def App():
 
 
 @pytest.mark.anyio
+@pytest.mark.flaky(reruns=5, reruns_delay=2)
 async def test_nested_npm_components():
     async with BackendFixture(html_head=html.head(import_reactjs())) as backend:
         async with DisplayFixture(backend=backend) as display:
@@ -256,6 +268,7 @@ def App():
 
 
 @pytest.mark.anyio
+@pytest.mark.flaky(reruns=5, reruns_delay=2)
 async def test_interleaved_npm_and_server_components():
     async with BackendFixture(html_head=html.head(import_reactjs())) as backend:
         async with DisplayFixture(backend=backend) as display:
@@ -292,6 +305,7 @@ def App():
 
 
 @pytest.mark.anyio
+@pytest.mark.flaky(reruns=5, reruns_delay=2)
 async def test_complex_nested_material_ui():
     async with BackendFixture(html_head=html.head(import_reactjs())) as backend:
         async with DisplayFixture(backend=backend) as display: