reactpy 2.0.0b6__tar.gz → 2.0.0b8__tar.gz

{reactpy-2.0.0b6 → reactpy-2.0.0b8}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: reactpy
-Version: 2.0.0b6
+Version: 2.0.0b8
 Summary: It's React, but in Python.
 Project-URL: Changelog, https://reactpy.dev/docs/about/changelog.html
 Project-URL: Documentation, https://reactpy.dev/

{reactpy-2.0.0b6 → reactpy-2.0.0b8}/pyproject.toml

@@ -1,6 +1,6 @@
 [build-system]
 build-backend = "hatchling.build"
-requires = ["hatchling", "hatch-build-scripts"]
+requires = ["hatchling", "hatch-build-scripts", "hatch"]
 
 ##############################
 # >>> Hatch Build Config <<< #
@@ -71,28 +71,34 @@ installer = "uv"
 reactpy = "reactpy._console.cli:entry_point"
 
 [[tool.hatch.build.hooks.build-scripts.scripts]]
-# Note: `hatch` can't be called within `build-scripts` when installing packages in editable mode, so we have to write the commands long-form
-commands = [
-  'python "src/build_scripts/clean_js_dir.py"',
-  'bun install --cwd "src/js/packages/event-to-object"',
-  'bun run --cwd "src/js/packages/event-to-object" build',
-  'bun install --cwd "src/js/packages/@reactpy/client"',
-  'bun run --cwd "src/js/packages/@reactpy/client" build',
-  'bun install --cwd "src/js/packages/@reactpy/app"',
-  'bun run --cwd "src/js/packages/@reactpy/app" build',
-  'python "src/build_scripts/copy_dir.py" "src/js/node_modules/@pyscript/core/dist" "src/reactpy/static/pyscript"',
-  'python "src/build_scripts/copy_dir.py" "src/js/node_modules/morphdom/dist" "src/reactpy/static/morphdom"',
-]
+commands = []
 artifacts = []
 
 #############################
 # >>> Hatch Test Runner <<< #
 #############################
+[tool.hatch.envs.hatch-test.scripts]
+run = [
+  'hatch --env default run "src/build_scripts/install_playwright.py"',
+  "hatch --env default run javascript:build --dev",
+  "hatch --env default build -t wheel",
+  "pytest{env:HATCH_TEST_ARGS:} {args} --max-worker-restart 10",
+]
+run-cov = [
+  'hatch --env default run "src/build_scripts/install_playwright.py"',
+  "hatch --env default run javascript:build --dev",
+  "hatch --env default build -t wheel",
+  'hatch --env default run "src/build_scripts/delete_old_coverage.py"',
+  "coverage run -m pytest{env:HATCH_TEST_ARGS:} {args} --max-worker-restart 10",
+]
+cov-combine = "coverage combine"
+cov-report = "coverage report"
 
 [tool.hatch.envs.hatch-test]
 extra-dependencies = [
   "pytest-sugar",
   "pytest-asyncio",
+  "pytest-timeout",
   "responses",
   "exceptiongroup",
   "jsonpointer",
@@ -115,8 +121,10 @@ filterwarnings = """
 testpaths = "tests"
 xfail_strict = true
 asyncio_mode = "auto"
-asyncio_default_fixture_loop_scope = "function"
+asyncio_default_fixture_loop_scope = "session"
+asyncio_default_test_loop_scope = "session"
 log_cli_level = "INFO"
+timeout = 120
 
 #######################################
 # >>> Hatch Documentation Scripts <<< #
@@ -162,6 +170,7 @@ extra-dependencies = [
   "types-requests",
   "types-lxml",
   "jsonpointer",
+  "pytest",
 ]
 
 [tool.hatch.envs.python.scripts]
@@ -177,40 +186,39 @@ detached = true
 [tool.hatch.envs.javascript.scripts]
 check = [
   'hatch run javascript:build',
-  'bun install --cwd "src/js"',
   'bun run --cwd "src/js" lint',
   'bun run --cwd "src/js/packages/event-to-object" checkTypes',
   'bun run --cwd "src/js/packages/@reactpy/client" checkTypes',
   'bun run --cwd "src/js/packages/@reactpy/app" checkTypes',
 ]
 fix = ['bun install --cwd "src/js"', 'bun run --cwd "src/js" format']
-test = ['hatch run javascript:build_event_to_object', 'bun test']
+test = ['hatch run javascript:build_event_to_object --dev', 'bun test']
 build = [
   'hatch run "src/build_scripts/clean_js_dir.py"',
   'bun install --cwd "src/js"',
-  'hatch run javascript:build_event_to_object',
-  'hatch run javascript:build_client',
-  'hatch run javascript:build_app',
+  'hatch run javascript:build_event_to_object {args}',
+  'hatch run javascript:build_client {args}',
+  'hatch run javascript:build_app {args}',
+  'hatch --env default run "src/build_scripts/copy_dir.py" "src/js/node_modules/@pyscript/core/dist" "src/reactpy/static/pyscript"',
+  'hatch --env default run "src/build_scripts/copy_dir.py" "src/js/node_modules/morphdom/dist" "src/reactpy/static/morphdom"',
+
 ]
 build_event_to_object = [
-  'bun install --cwd "src/js/packages/event-to-object"',
-  'bun run --cwd "src/js/packages/event-to-object" build',
-]
-build_client = [
-  'bun install --cwd "src/js/packages/@reactpy/client"',
-  'bun run --cwd "src/js/packages/@reactpy/client" build',
-]
-build_app = [
-  'bun install --cwd "src/js/packages/@reactpy/app"',
-  'bun run --cwd "src/js/packages/@reactpy/app" build',
+  'hatch run "src/build_scripts/build_js_event_to_object.py" {args}',
 ]
+build_client = ['hatch run "src/build_scripts/build_js_client.py" {args}']
+build_app = ['hatch run "src/build_scripts/build_js_app.py" {args}']
 publish_event_to_object = [
   'hatch run javascript:build_event_to_object',
-  'cd "src/js/packages/event-to-object" && bun publish --access public',
+  # FIXME: using npm publish to fix lack of "Trusted Publishing" in Bun
+  # Ref: https://github.com/oven-sh/bun/issues/15601
+  'cd "src/js/packages/event-to-object" && bunx npm@11.8.0 publish --provenance --access public',
 ]
 publish_client = [
   'hatch run javascript:build_client',
-  'cd "src/js/packages/@reactpy/client" && bun publish --access public',
+  # FIXME: using npm publish to fix lack of "Trusted Publishing" in Bun
+  # Ref: https://github.com/oven-sh/bun/issues/15601
+  'cd "src/js/packages/@reactpy/client" && bunx npm@11.8.0 publish --provenance --access public',
 ]
 
 #########################
@@ -228,8 +236,8 @@ omit = [
   "src/reactpy/__init__.py",
   "src/reactpy/_console/*",
   "src/reactpy/__main__.py",
-  "src/reactpy/pyscript/layout_handler.py",
-  "src/reactpy/pyscript/component_template.py",
+  "src/reactpy/executors/pyscript/layout_handler.py",
+  "src/reactpy/executors/pyscript/component_template.py",
 ]
 
 [tool.coverage.report]

reactpy-2.0.0b8/src/build_scripts/build_js_app.py

@@ -0,0 +1,29 @@
+# /// script
+# requires-python = ">=3.11"
+# dependencies = []
+# ///
+import pathlib
+import subprocess
+import sys
+
+dev_mode = "--dev" in sys.argv
+root_dir = pathlib.Path(__file__).parent.parent.parent
+build_commands = [
+    [
+        "bun",
+        "install",
+        "--cwd",
+        "src/js/packages/@reactpy/app",
+    ],
+    [
+        "bun",
+        "run",
+        "--cwd",
+        "src/js/packages/@reactpy/app",
+        "buildDev" if dev_mode else "build",
+    ],
+]
+
+for command in build_commands:
+    print(f"Running command: '{command}'...")  # noqa: T201
+    subprocess.run(command, check=True, cwd=root_dir)  # noqa: S603

reactpy-2.0.0b8/src/build_scripts/build_js_client.py

@@ -0,0 +1,29 @@
+# /// script
+# requires-python = ">=3.11"
+# dependencies = []
+# ///
+import pathlib
+import subprocess
+import sys
+
+dev_mode = "--dev" in sys.argv
+root_dir = pathlib.Path(__file__).parent.parent.parent
+build_commands = [
+    [
+        "bun",
+        "install",
+        "--cwd",
+        "src/js/packages/@reactpy/client",
+    ],
+    [
+        "bun",
+        "run",
+        "--cwd",
+        "src/js/packages/@reactpy/client",
+        "build",
+    ],
+]
+
+for command in build_commands:
+    print(f"Running command: '{command}'...")  # noqa: T201
+    subprocess.run(command, check=True, cwd=root_dir)  # noqa: S603

reactpy-2.0.0b8/src/build_scripts/build_js_event_to_object.py

@@ -0,0 +1,29 @@
+# /// script
+# requires-python = ">=3.11"
+# dependencies = []
+# ///
+import pathlib
+import subprocess
+import sys
+
+dev_mode = "--dev" in sys.argv
+root_dir = pathlib.Path(__file__).parent.parent.parent
+build_commands = [
+    [
+        "bun",
+        "install",
+        "--cwd",
+        "src/js/packages/event-to-object",
+    ],
+    [
+        "bun",
+        "run",
+        "--cwd",
+        "src/js/packages/event-to-object",
+        "build",
+    ],
+]
+
+for command in build_commands:
+    print(f"Running command: '{command}'...")  # noqa: T201
+    subprocess.run(command, check=True, cwd=root_dir)  # noqa: S603

{reactpy-2.0.0b6 → reactpy-2.0.0b8}/src/build_scripts/clean_js_dir.py

@@ -11,6 +11,8 @@ import os
 import pathlib
 import shutil
 
+print("Cleaning JS source directory...")  # noqa: T201
+
 # Get the path to the JS source directory
 js_src_dir = pathlib.Path(__file__).parent.parent / "js"
 static_output_dir = pathlib.Path(__file__).parent.parent / "reactpy" / "static"

{reactpy-2.0.0b6 → reactpy-2.0.0b8}/src/build_scripts/copy_dir.py

@@ -31,6 +31,7 @@ if __name__ == "__main__":
     root_dir = Path(__file__).parent.parent.parent
     src = Path(root_dir / sys.argv[1])
     dest = Path(root_dir / sys.argv[2])
+    print(f"Copying files from '{sys.argv[1]}' to '{sys.argv[2]}'...")  # noqa: T201
 
     if not src.exists():
         logging.error("Source directory %s does not exist", src)

reactpy-2.0.0b8/src/build_scripts/delete_old_coverage.py

@@ -0,0 +1,21 @@
+# /// script
+# requires-python = ">=3.11"
+# dependencies = []
+# ///
+
+import logging
+from glob import glob
+from pathlib import Path
+
+# Delete old `.coverage*` files in the project root
+print("Deleting old coverage files...")  # noqa: T201
+root_dir = Path(__file__).parent.parent.parent
+coverage_files = glob(str(root_dir / ".coverage*"))
+
+for path in coverage_files:
+    coverage_file = Path(path)
+    if coverage_file.exists():
+        try:
+            coverage_file.unlink()
+        except Exception as e:
+            logging.error(f"Failed to delete {coverage_file}: {e}")

reactpy-2.0.0b8/src/build_scripts/install_playwright.py

@@ -0,0 +1,17 @@
+# /// script
+# requires-python = ">=3.11"
+# dependencies = []
+# ///
+
+import subprocess
+
+print("Installing Playwright browsers...")  # noqa: T201
+
+# Install Chromium browser for Playwright, and fail if it cannot be installed
+subprocess.run(["playwright", "install", "chromium"], check=True)  # noqa: S607
+
+# Try to install system dependencies. We don't generate an exception if this fails
+# as *nix systems (such as WSL) return a failure code if there are *any* dependencies
+# that could be cleaned up via `sudo apt autoremove`. This occurs even if we weren't
+# the ones to install those dependencies in the first place.
+subprocess.run(["playwright", "install-deps", "chromium"], check=False)  # noqa: S607

{reactpy-2.0.0b6 → reactpy-2.0.0b8}/src/js/package.json

@@ -1,7 +1,8 @@
 {
   "workspaces": [
-    "packages/*",
-    "packages/@reactpy/*"
+    "packages/event-to-object",
+    "packages/@reactpy/app",
+    "packages/@reactpy/client"
   ],
   "catalog": {
     "preact": "^10.27.2",

{reactpy-2.0.0b6 → reactpy-2.0.0b8}/src/js/tsconfig.json

@@ -15,12 +15,6 @@
     "moduleResolution": "bundler",
     "noEmitOnError": true,
     "noUnusedLocals": true,
-    "paths": {
-      "react": ["./node_modules/preact/compat/"],
-      "react-dom": ["./node_modules/preact/compat/"],
-      "react-dom/*": ["./node_modules/preact/compat/*"],
-      "react/jsx-runtime": ["./node_modules/preact/jsx-runtime"]
-    },
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "sourceMap": true,

{reactpy-2.0.0b6 → reactpy-2.0.0b8}/src/reactpy/__init__.py

@@ -19,11 +19,11 @@ from reactpy.core.hooks import (
     use_state,
 )
 from reactpy.core.vdom import Vdom
-from reactpy.pyscript.components import pyscript_component
+from reactpy.executors.pyscript.components import pyscript_component
 from reactpy.utils import Ref, reactpy_to_string, string_to_reactpy
 
 __author__ = "The Reactive Python Team"
-__version__ = "2.0.0b6"
+__version__ = "2.0.0b8"
 
 __all__ = [
     "Ref",

{reactpy-2.0.0b6 → reactpy-2.0.0b8}/src/reactpy/config.py

@@ -77,7 +77,7 @@ set of publicly available APIs for working with the client.
 
 REACTPY_TESTS_DEFAULT_TIMEOUT = Option(
     "REACTPY_TESTS_DEFAULT_TIMEOUT",
-    10.0,
+    15.0,
     mutable=False,
     validator=float,
 )

{reactpy-2.0.0b6 → reactpy-2.0.0b8}/src/reactpy/core/_thread_local.py

@@ -8,7 +8,7 @@ _StateType = TypeVar("_StateType")
 
 class ThreadLocal(Generic[_StateType]):  # nocov
     """Utility for managing per-thread state information. This is only used in
-    environments where ContextVars are not available, such as the `pyodide`
+    environments where ContextVars are not available, such as the `pyscript`
     executor."""
 
     def __init__(self, default: Callable[[], _StateType]):

{reactpy-2.0.0b6 → reactpy-2.0.0b8}/src/reactpy/core/hooks.py

@@ -84,11 +84,7 @@ class _CurrentState(Generic[_Type]):
         self,
         initial_value: _Type | Callable[[], _Type],
     ) -> None:
-        if callable(initial_value):
-            self.value = initial_value()
-        else:
-            self.value = initial_value
-
+        self.value = initial_value() if callable(initial_value) else initial_value
         hook = HOOK_STACK.current_hook()
 
         def dispatch(new: _Type | Callable[[_Type], _Type]) -> None:
@@ -186,7 +182,6 @@ def use_effect(
 def use_async_effect(
     function: None = None,
     dependencies: Sequence[Any] | ellipsis | None = ...,
-    shutdown_timeout: float = 0.1,
 ) -> Callable[[_EffectApplyFunc], None]: ...
 
 
@@ -194,14 +189,12 @@ def use_async_effect(
 def use_async_effect(
     function: _AsyncEffectFunc,
     dependencies: Sequence[Any] | ellipsis | None = ...,
-    shutdown_timeout: float = 0.1,
 ) -> None: ...
 
 
 def use_async_effect(
     function: _AsyncEffectFunc | None = None,
     dependencies: Sequence[Any] | ellipsis | None = ...,
-    shutdown_timeout: float = 0.1,
 ) -> Callable[[_AsyncEffectFunc], None] | None:
     """
     A hook that manages an asynchronous side effect in a React-like component.
@@ -218,9 +211,6 @@ def use_async_effect(
             of any value in the given sequence changes (i.e. their :func:`id` is
             different). By default these are inferred based on local variables that are
             referenced by the given function.
-        shutdown_timeout:
-            The amount of time (in seconds) to wait for the effect to complete before
-            forcing a shutdown.
 
     Returns:
         If not function is provided, a decorator. Otherwise ``None``.
@@ -236,26 +226,37 @@ def use_async_effect(
             # always clean up the previous effect's resources
             run_effect_cleanup(cleanup_func)
 
-            # Execute the effect in a background task
+            # Execute the effect and store the clean-up function.
+            # We run this in a task so it can be cancelled if the stop signal
+            # is set before the effect completes.
             task = asyncio.create_task(func())
 
-            # Wait until we get the signal to stop this effect
-            await stop.wait()
+            # Wait for either the effect to complete or the stop signal
+            stop_task = asyncio.create_task(stop.wait())
+            done, _ = await asyncio.wait(
+                [task, stop_task],
+                return_when=asyncio.FIRST_COMPLETED,
+            )
 
-            # If renders are queued back-to-back, the effect might not have
-            # completed. So, we give the task a small amount of time to finish.
-            # If it manages to finish, we can obtain a clean-up function.
-            results, _ = await asyncio.wait([task], timeout=shutdown_timeout)
-            if results:
-                cleanup_func.current = results.pop().result()
+            # If the effect completed first, store the cleanup function
+            if task in done:
+                cleanup_func.current = task.result()
+                # Cancel the stop task since we don't need it anymore
+                stop_task.cancel()
+                with contextlib.suppress(asyncio.CancelledError):
+                    await stop_task
+                # Now wait for the stop signal to run cleanup
+                await stop.wait()
+            else:
+                # Stop signal came first - cancel the effect task
+                task.cancel()
+                with contextlib.suppress(asyncio.CancelledError):
+                    await task
 
             # Run the clean-up function when the effect is stopped,
             # if it hasn't been run already by a new effect
             run_effect_cleanup(cleanup_func)
 
-            # Cancel the task if it's still running
-            task.cancel()
-
         return memoize(lambda: hook.add_effect(effect))
 
     # Handle decorator usage
@@ -434,10 +435,7 @@ def use_callback(
     def setup(function: _CallbackFunc) -> _CallbackFunc:
         return memoize(lambda: function)
 
-    if function is not None:
-        return setup(function)
-    else:
-        return setup
+    return setup(function) if function is not None else setup
 
 
 class _LambdaCaller(Protocol):
@@ -553,17 +551,16 @@ def _try_to_infer_closure_values(
     func: Callable[..., Any] | None,
     values: Sequence[Any] | ellipsis | None,
 ) -> Sequence[Any] | None:
-    if values is ...:
-        if isinstance(func, FunctionType):
-            return (
-                [cell.cell_contents for cell in func.__closure__]
-                if func.__closure__
-                else []
-            )
-        else:
-            return None
-    else:
+    if values is not ...:
         return values
+    if isinstance(func, FunctionType):
+        return (
+            [cell.cell_contents for cell in func.__closure__]
+            if func.__closure__
+            else []
+        )
+    else:
+        return None
 
 
 def strictly_equal(x: Any, y: Any) -> bool:

{reactpy-2.0.0b6 → reactpy-2.0.0b8}/src/reactpy/executors/asgi/pyscript.py

@@ -13,8 +13,11 @@ from reactpy import html
 from reactpy.executors.asgi.middleware import ReactPyMiddleware
 from reactpy.executors.asgi.standalone import ReactPy, ReactPyApp
 from reactpy.executors.asgi.types import AsgiWebsocketScope
+from reactpy.executors.pyscript.utils import (
+    pyscript_component_html,
+    pyscript_setup_html,
+)
 from reactpy.executors.utils import vdom_head_to_html
-from reactpy.pyscript.utils import pyscript_component_html, pyscript_setup_html
 from reactpy.types import ReactPyConfig, VdomDict
 
 

{reactpy-2.0.0b6 → reactpy-2.0.0b8}/src/reactpy/executors/asgi/standalone.py

@@ -23,8 +23,8 @@ from reactpy.executors.asgi.types import (
     AsgiV3WebsocketApp,
     AsgiWebsocketScope,
 )
+from reactpy.executors.pyscript.utils import pyscript_setup_html
 from reactpy.executors.utils import server_side_component_html, vdom_head_to_html
-from reactpy.pyscript.utils import pyscript_setup_html
 from reactpy.types import (
     PyScriptOptions,
     ReactPyConfig,

{reactpy-2.0.0b6/src/reactpy → reactpy-2.0.0b8/src/reactpy/executors}/pyscript/component_template.py

@@ -2,7 +2,7 @@
 # type: ignore
 import asyncio
 
-from reactpy.pyscript.layout_handler import ReactPyLayoutHandler
+from reactpy.executors.pyscript.layout_handler import ReactPyLayoutHandler
 
 
 # User component is inserted below by regex replacement

{reactpy-2.0.0b6/src/reactpy → reactpy-2.0.0b8/src/reactpy/executors}/pyscript/components.py

@@ -4,7 +4,7 @@ from pathlib import Path
 from typing import TYPE_CHECKING
 
 from reactpy import component, hooks
-from reactpy.pyscript.utils import pyscript_component_html
+from reactpy.executors.pyscript.utils import pyscript_component_html
 from reactpy.types import Component, Key
 from reactpy.utils import string_to_reactpy
 

{reactpy-2.0.0b6 → reactpy-2.0.0b8}/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(" ", "")

{reactpy-2.0.0b6 → reactpy-2.0.0b8}/src/reactpy/reactjs/__init__.py

@@ -110,7 +110,7 @@ def component_from_npm(
     resolve_imports: bool = ...,
     resolve_imports_depth: int = ...,
     version: str = "latest",
-    cdn: str = "https://esm.sh",
+    cdn: str = "https://esm.sh/v135",
     fallback: Any | None = ...,
     unmount_before_update: bool = ...,
     allow_children: bool = ...,
@@ -124,7 +124,7 @@ def component_from_npm(
     resolve_imports: bool = ...,
     resolve_imports_depth: int = ...,
     version: str = "latest",
-    cdn: str = "https://esm.sh",
+    cdn: str = "https://esm.sh/v135",
     fallback: Any | None = ...,
     unmount_before_update: bool = ...,
     allow_children: bool = ...,
@@ -137,7 +137,7 @@ def component_from_npm(
     resolve_imports: bool = False,
     resolve_imports_depth: int = 5,
     version: str = "latest",
-    cdn: str = "https://esm.sh",
+    cdn: str = "https://esm.sh/v135",
     fallback: Any | None = None,
     unmount_before_update: bool = False,
     allow_children: bool = True,
@@ -175,10 +175,8 @@ def component_from_npm(
     url = f"{cdn}/{package}@{version}"
 
     if "esm.sh" in cdn:
-        if "?" in url:
-            url += "&external=react,react-dom"
-        else:
-            url += "?external=react,react-dom"
+        url += "&" if "?" in url else "?"
+        url += "external=react,react-dom,react/jsx-runtime&bundle&target=es2020"
 
     return component_from_url(
         url,