automagically bind react and react-dom if missing from page

Archmonger · Archmonger · commit dfb9612baaad · 2025-12-14T23:15:21.000-08:00
diff --git a/src/js/packages/@reactpy/client/src/bind.tsx b/src/js/packages/@reactpy/client/src/bind.tsx
@@ -6,14 +6,11 @@ export async function infer_bind_from_environment() {
     const React = await import("react");
     // @ts-ignore
     const ReactDOM = await import("react-dom/client");
-
-    console.log(
-      "ReactPy detected 'ReactJS' to bind your JavaScript components.",
-    );
     return (node: HTMLElement) => reactjs_bind(node, React, ReactDOM);
   } catch {
-    console.debug(
-      "ReactPy did not detect a component binding function or a suitable 'importmap'. Using ReactPy's internal framework (Preact) to bind your JavaScript components.",
+    console.error(
+      "Unknown error occurred: 'react' is missing within this ReactPy environment! \
+      Your JavaScript components may not work as expected!",
     );
     return (node: HTMLElement) => local_preact_bind(node);
   }
diff --git a/src/reactpy/executors/utils.py b/src/reactpy/executors/utils.py
@@ -64,16 +64,41 @@ def server_side_component_html(
 ) -> str:
     return (
         f'<div id="{element_id}" class="{class_}"></div>'
+        "<script>"
+        'if (!document.querySelector("#reactpy-importmap")) {'
+        "   console.debug("
+        '     "ReactPy did not detect a suitable JavaScript import map. Falling back to ReactPy\'s internal framework (Preact)."'
+        "   );"
+        '   const im = document.createElement("script");'
+        '   im.type = "importmap";'
+        f"  im.textContent = '{default_import_map()}';"
+        '   im.id = "reactpy-importmap";'
+        "   document.head.appendChild(im);"
+        "   delete im;"
+        "}"
+        "</script>"
         '<script type="module" crossorigin="anonymous">'
         f'import {{ mountReactPy }} from "{REACTPY_PATH_PREFIX.current}static/index.js";'
         "mountReactPy({"
-        f' mountElement: document.getElementById("{element_id}"),'
-        f' pathPrefix: "{REACTPY_PATH_PREFIX.current}",'
-        f' componentPath: "{component_path}",'
-        f" reconnectInterval: {REACTPY_RECONNECT_INTERVAL.current},"
-        f" reconnectMaxInterval: {REACTPY_RECONNECT_MAX_INTERVAL.current},"
-        f" reconnectMaxRetries: {REACTPY_RECONNECT_MAX_RETRIES.current},"
-        f" reconnectBackoffMultiplier: {REACTPY_RECONNECT_BACKOFF_MULTIPLIER.current},"
+        f'  mountElement: document.getElementById("{element_id}"),'
+        f'  pathPrefix: "{REACTPY_PATH_PREFIX.current}",'
+        f'  componentPath: "{component_path}",'
+        f"  reconnectInterval: {REACTPY_RECONNECT_INTERVAL.current},"
+        f"  reconnectMaxInterval: {REACTPY_RECONNECT_MAX_INTERVAL.current},"
+        f"  reconnectMaxRetries: {REACTPY_RECONNECT_MAX_RETRIES.current},"
+        f"  reconnectBackoffMultiplier: {REACTPY_RECONNECT_BACKOFF_MULTIPLIER.current},"
         "});"
         "</script>"
     )
+
+
+def default_import_map() -> str:
+    path_prefix = REACTPY_PATH_PREFIX.current.strip("/")
+    return f"""{{
+                "imports": {{
+                    "react": "/{path_prefix}/static/preact.js",
+                    "react-dom": "/{path_prefix}/static/preact-dom.js",
+                    "react-dom/client": "/{path_prefix}/static/preact-dom.js",
+                    "react/jsx-runtime": "/{path_prefix}/static/preact-jsx-runtime.js"
+                }}
+            }}""".replace("\n", "").replace(" ", "")
diff --git a/src/reactpy/reactjs/module.py b/src/reactpy/reactjs/module.py
@@ -4,7 +4,6 @@
 from pathlib import Path, PurePosixPath
 from typing import Any, Literal
 
-from reactpy import config
 from reactpy.config import REACTPY_DEBUG, REACTPY_WEB_MODULES_DIR
 from reactpy.core.vdom import Vdom
 from reactpy.reactjs.types import NAME_SOURCE, URL_SOURCE
@@ -15,7 +14,7 @@
     resolve_names_from_file,
     resolve_names_from_url,
 )
-from reactpy.types import ImportSourceDict, JavaScriptModule, VdomConstructor
+from reactpy.types import ImportSourceDict, JavaScriptModule, VdomConstructor, VdomDict
 
 logger = logging.getLogger(__name__)
 
@@ -183,7 +182,7 @@ def import_reactjs(
     framework: Literal["preact", "react"] | None = None,
     version: str | None = None,
     use_local: bool = False,
-):
+) -> VdomDict:
     """
     Return an import map script tag for ReactJS or Preact.
     Parameters:
@@ -205,6 +204,7 @@ def import_reactjs(
         A VDOM script tag containing the import map.
     """
     from reactpy import html
+    from reactpy.executors.utils import default_import_map
 
     if use_local and (framework or version):  # nocov
         raise ValueError("use_local cannot be used with framework or version")
@@ -215,55 +215,41 @@ def import_reactjs(
 
     # Import map for ReactPy's local framework (re-exported/bundled/minified version of Preact)
     if use_local:
-        prefix = f"/{config.REACTPY_PATH_PREFIX.current.strip('/')}/static/{framework}"
         return html.script(
-            {"type": "importmap"},
-            f"""
-            {{
-                "imports": {{
-                    "react": "{prefix}.js",
-                    "react-dom": "{prefix}-dom.js",
-                    "react-dom/client": "{prefix}-dom.js",
-                    "react/jsx-runtime": "{prefix}-jsx-runtime.js"
-                }}
-            }}
-            """,
+            {"type": "importmap", "id": "reactpy-importmap"},
+            default_import_map(),
         )
 
     # Import map for ReactJS from esm.sh
     if framework == "react":
         version = version or "19"
         postfix = "?dev" if REACTPY_DEBUG.current else ""
         return html.script(
-            {"type": "importmap"},
-            f"""
-            {{
+            {"type": "importmap", "id": "reactpy-importmap"},
+            f"""{{
                 "imports": {{
                     "react": "https://esm.sh/react@{version}{postfix}",
                     "react-dom": "https://esm.sh/react-dom@{version}{postfix}",
                     "react-dom/client": "https://esm.sh/react-dom@{version}/client{postfix}",
                     "react/jsx-runtime": "https://esm.sh/react@{version}/jsx-runtime{postfix}"
                 }}
-            }}
-            """,
+            }}""".replace("\n", "").replace(" ", ""),
         )
 
     # Import map for Preact from esm.sh
     if framework == "preact":
         version = version or "10"
         postfix = "?dev" if REACTPY_DEBUG.current else ""
         return html.script(
-            {"type": "importmap"},
-            f"""
-            {{
+            {"type": "importmap", "id": "reactpy-importmap"},
+            f"""{{
                 "imports": {{
                     "react": "https://esm.sh/preact@{version}/compat{postfix}",
                     "react-dom": "https://esm.sh/preact@{version}/compat{postfix}",
                     "react-dom/client": "https://esm.sh/preact@{version}/compat/client{postfix}",
                     "react/jsx-runtime": "https://esm.sh/preact@{version}/compat/jsx-runtime{postfix}"
                 }}
-            }}
-            """,
+            }}""".replace("\n", "").replace(" ", ""),
         )
 
 
diff --git a/tests/test_reactjs/test_modules_from_npm.py b/tests/test_reactjs/test_modules_from_npm.py
@@ -6,6 +6,8 @@
 from reactpy.reactjs import component_from_npm, import_reactjs
 from reactpy.testing import GITHUB_ACTIONS, BackendFixture, DisplayFixture
 
+MISSING_IMPORT_MAP_MSG = "ReactPy did not detect a suitable import map on your page."
+
 
 @pytest.fixture(scope="module")
 async def display(browser):
@@ -16,7 +18,7 @@ async def display(browser):
 
 
 @pytest.mark.flaky(reruns=10 if GITHUB_ACTIONS else 1)
-async def test_component_from_npm_react_bootstrap(display: DisplayFixture):
+async def test_component_from_npm_react_bootstrap(display: DisplayFixture, caplog):
     Button = component_from_npm("react-bootstrap", "Button", version="2")
 
     @reactpy.component
@@ -33,9 +35,12 @@ def App():
     await expect(button).to_contain_class("btn")
     await expect(button).to_contain_class("btn-primary")
 
+    # Ensure missing import map was NOT logged
+    assert MISSING_IMPORT_MAP_MSG not in " ".join(x.msg for x in caplog.records)
+
 
 @pytest.mark.flaky(reruns=10 if GITHUB_ACTIONS else 1)
-async def test_component_from_npm_react_bootstrap_with_local_framework(browser):
+async def test_component_from_npm_react_bootstrap_with_local_framework(browser, caplog):
     Button = component_from_npm("react-bootstrap", "Button", version="2")
 
     @reactpy.component
@@ -56,6 +61,33 @@ def App():
             await expect(button).to_contain_class("btn")
             await expect(button).to_contain_class("btn-primary")
 
+            # Ensure missing import map was NOT logged
+            assert MISSING_IMPORT_MAP_MSG not in " ".join(x.msg for x in caplog.records)
+
+
+@pytest.mark.flaky(reruns=10 if GITHUB_ACTIONS else 1)
+async def test_component_from_npm_without_explicit_reactjs_import(browser, caplog):
+    Button = component_from_npm("react-bootstrap", "Button", version="2")
+
+    @reactpy.component
+    def App():
+        return Button({"variant": "primary", "id": "test-button"}, "Click me")
+
+    async with BackendFixture() as backend:
+        async with DisplayFixture(backend=backend, browser=browser) as display:
+            await display.show(App)
+
+            button = display.page.locator("#test-button")
+            await expect(button).to_have_text("Click me")
+
+            # Check if it has the correct class for primary variant
+            # React Bootstrap buttons usually have 'btn' and 'btn-primary' classes
+            await expect(button).to_contain_class("btn")
+            await expect(button).to_contain_class("btn-primary")
+
+            # Check if missing import map was logged
+            assert MISSING_IMPORT_MAP_MSG in " ".join(x.msg for x in caplog.records)
+
 
 @pytest.mark.flaky(reruns=10 if GITHUB_ACTIONS else 1)
 async def test_component_from_npm_material_ui(display: DisplayFixture):
