initial implementation of reactjy_component_from_npm

Author: Archmonger

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";

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";

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(

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)

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",
 ]

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,