Client-Side Python Components (#1269)

- Add template tags for rendering pyscript components
- Add `pyscript_component` component to embed pyscript components into standard ReactPy server-side applications
- Create new ASGI app that can run standalone client-side ReactPy
- Convert all ASGI dependencies into an optional `reactpy[asgi]` parameter to minimize client-side install size
- Start throwing 404 errors when static files are not found

Author: Archmonger

.gitignore

@@ -1,5 +1,7 @@
 # --- Build Artifacts ---
-src/reactpy/static/*
+src/reactpy/static/index.js*
+src/reactpy/static/morphdom/
+src/reactpy/static/pyscript/
 
 # --- Jupyter ---
 *.ipynb_checkpoints

docs/source/about/changelog.rst

@@ -16,10 +16,12 @@ Unreleased
 ----------
 
 **Added**
-- :pull:`1113` - Added ``reactpy.ReactPy`` that can be used to run ReactPy in standalone mode.
-- :pull:`1113` - Added ``reactpy.ReactPyMiddleware`` that can be used to run ReactPy with any ASGI compatible framework.
-- :pull:`1113` - Added ``reactpy.jinja.Component`` that can be used alongside ``ReactPyMiddleware`` to embed several ReactPy components into your existing application.
-- :pull:`1113` - Added ``standard``, ``uvicorn``, ``jinja`` installation extras (for example ``pip install reactpy[standard]``).
+- :pull:`1113` - Added ``reactpy.executors.asgi.ReactPy`` that can be used to run ReactPy in standalone mode via ASGI.
+- :pull:`1269` - Added ``reactpy.executors.asgi.ReactPyPyodide`` that can be used to run ReactPy in standalone mode via ASGI, but rendered entirely client-sided.
+- :pull:`1113` - Added ``reactpy.executors.asgi.ReactPyMiddleware`` that can be used to utilize ReactPy within any ASGI compatible framework.
+- :pull:`1113` :pull:`1269` - Added ``reactpy.templatetags.Jinja`` that can be used alongside ``ReactPyMiddleware`` to embed several ReactPy components into your existing application. This includes the following template tags: ``{% component %}``, ``{% pyscript_component %}``, and ``{% pyscript_setup %}``.
+- :pull:`1269` - Added ``reactpy.pyscript_component`` that can be used to embed ReactPy components into your existing application.
+- :pull:`1113` - Added ``uvicorn`` and ``jinja`` installation extras (for example ``pip install reactpy[jinja]``).
 - :pull:`1113` - Added support for Python 3.12 and 3.13.
 - :pull:`1264` - Added ``reactpy.use_async_effect`` hook.
 - :pull:`1267` - Added ``shutdown_timeout`` parameter to the ``reactpy.use_async_effect`` hook.

pyproject.toml

@@ -13,8 +13,8 @@ readme = "README.md"
 keywords = ["react", "javascript", "reactpy", "component"]
 license = "MIT"
 authors = [
-  { name = "Ryan Morshead", email = "[email protected]" },
   { name = "Mark Bakhit", email = "[email protected]" },
+  { name = "Ryan Morshead", email = "[email protected]" },
 ]
 requires-python = ">=3.9"
 classifiers = [
@@ -28,24 +28,24 @@ classifiers = [
   "Programming Language :: Python :: Implementation :: PyPy",
 ]
 dependencies = [
-  "exceptiongroup >=1.0",
-  "typing-extensions >=3.10",
-  "anyio >=3",
-  "jsonpatch >=1.32",
   "fastjsonschema >=2.14.5",
   "requests >=2",
-  "colorlog >=6",
-  "asgiref >=3",
   "lxml >=4",
-  "servestatic >=3.0.0",
-  "orjson >=3",
-  "asgi-tools",
+  "anyio >=3",
+  "typing-extensions >=3.10",
 ]
 dynamic = ["version"]
 urls.Changelog = "https://reactpy.dev/docs/about/changelog.html"
 urls.Documentation = "https://reactpy.dev/"
 urls.Source = "https://github.com/reactive-python/reactpy"
 
+[project.optional-dependencies]
+all = ["reactpy[asgi,jinja,uvicorn,testing]"]
+asgi = ["asgiref", "asgi-tools", "servestatic", "orjson", "pip"]
+jinja = ["jinja2-simple-tags", "jinja2 >=3"]
+uvicorn = ["uvicorn[standard]"]
+testing = ["playwright"]
+
 [tool.hatch.version]
 path = "src/reactpy/__init__.py"
 
@@ -75,32 +75,24 @@ commands = [
   '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/packages/@reactpy/app/dist" "src/reactpy/static"',
+  'python "src/build_scripts/copy_dir.py" "src/js/packages/@reactpy/app/node_modules/@pyscript/core/dist" "src/reactpy/static/pyscript"',
+  'python "src/build_scripts/copy_dir.py" "src/js/packages/@reactpy/app/node_modules/morphdom/dist" "src/reactpy/static/morphdom"',
 ]
 artifacts = []
 
-[project.optional-dependencies]
-all = ["reactpy[jinja,uvicorn,testing]"]
-standard = ["reactpy[jinja,uvicorn]"]
-jinja = ["jinja2-simple-tags", "jinja2 >=3"]
-uvicorn = ["uvicorn[standard]"]
-testing = ["playwright"]
-
 
 #############################
 # >>> Hatch Test Runner <<< #
 #############################
 
 [tool.hatch.envs.hatch-test]
 extra-dependencies = [
+  "reactpy[all]",
   "pytest-sugar",
   "pytest-asyncio",
   "responses",
-  "playwright",
+  "exceptiongroup",
   "jsonpointer",
-  "uvicorn[standard]",
-  "jinja2-simple-tags",
-  "jinja2",
   "starlette",
 ]
 
@@ -160,6 +152,7 @@ serve = [
 
 [tool.hatch.envs.python]
 extra-dependencies = [
+  "reactpy[all]",
   "ruff",
   "toml",
   "mypy==1.8",
@@ -240,6 +233,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",
 ]
 
 [tool.coverage.report]
@@ -325,6 +320,7 @@ lint.unfixable = [
 
 [tool.ruff.lint.isort]
 known-first-party = ["reactpy"]
+known-third-party = ["js"]
 
 [tool.ruff.lint.per-file-ignores]
 # Tests can use magic values, assertions, and relative imports

src/js/packages/@reactpy/app/bun.lockb

@@ -8,10 +8,12 @@
     "preact": "^10.25.4"
   },
   "devDependencies": {
-    "typescript": "^5.7.3"
+    "typescript": "^5.7.3",
+    "@pyscript/core": "^0.6",
+    "morphdom": "^2"
   },
   "scripts": {
-    "build": "bun build \"src/index.ts\" --outdir=\"dist\" --minify --sourcemap=\"linked\"",
+    "build": "bun build \"src/index.ts\" --outdir=\"../../../../reactpy/static/\" --minify --sourcemap=\"linked\"",
     "checkTypes": "tsc --noEmit"
   }
 }

src/js/packages/@reactpy/app/package.json

@@ -8,7 +8,7 @@ export function mountReactPy(props: MountProps) {
   const wsProtocol = `ws${window.location.protocol === "https:" ? "s" : ""}:`;
   const wsOrigin = `${wsProtocol}//${window.location.host}`;
   const componentUrl = new URL(
-    `${wsOrigin}${props.pathPrefix}${props.appendComponentPath || ""}`,
+    `${wsOrigin}${props.pathPrefix}${props.componentPath || ""}`,
   );
 
   // Embed the initial HTTP path into the WebSocket URL

src/js/packages/@reactpy/client/src/mount.tsx

@@ -35,7 +35,7 @@ export type GenericReactPyClientProps = {
 export type MountProps = {
   mountElement: HTMLElement;
   pathPrefix: string;
-  appendComponentPath?: string;
+  componentPath?: string;
   reconnectInterval?: number;
   reconnectMaxInterval?: number;
   reconnectMaxRetries?: number;

src/js/packages/@reactpy/client/src/types.ts

@@ -1,7 +1,5 @@
-from reactpy import asgi, config, logging, types, web, widgets
+from reactpy import config, logging, types, web, widgets
 from reactpy._html import html
-from reactpy.asgi.middleware import ReactPyMiddleware
-from reactpy.asgi.standalone import ReactPy
 from reactpy.core import hooks
 from reactpy.core.component import component
 from reactpy.core.events import event
@@ -22,17 +20,15 @@
 )
 from reactpy.core.layout import Layout
 from reactpy.core.vdom import vdom
+from reactpy.pyscript.components import pyscript_component
 from reactpy.utils import Ref, html_to_vdom, vdom_to_html
 
 __author__ = "The Reactive Python Team"
 __version__ = "2.0.0a1"
 
 __all__ = [
     "Layout",
-    "ReactPy",
-    "ReactPyMiddleware",
     "Ref",
-    "asgi",
     "component",
     "config",
     "create_context",
@@ -41,6 +37,7 @@
     "html",
     "html_to_vdom",
     "logging",
+    "pyscript_component",
     "types",
     "use_async_effect",
     "use_callback",

src/reactpy/__init__.py

@@ -16,7 +16,6 @@
     overload,
 )
 
-from asgiref import typing as asgi_types
 from typing_extensions import TypeAlias
 
 from reactpy.config import REACTPY_DEBUG
@@ -25,9 +24,11 @@
 from reactpy.utils import Ref
 
 if not TYPE_CHECKING:
-    # make flake8 think that this variable exists
     ellipsis = type(...)
 
+if TYPE_CHECKING:
+    from asgiref import typing as asgi_types
+
 
 __all__ = [
     "use_async_effect",
@@ -339,7 +340,7 @@ def use_connection() -> Connection[Any]:
 
 def use_scope() -> asgi_types.HTTPScope | asgi_types.WebSocketScope:
     """Get the current :class:`~reactpy.types.Connection`'s scope."""
-    return use_connection().scope
+    return use_connection().scope  # type: ignore
 
 
 def use_location() -> Location:

src/reactpy/core/hooks.py

@@ -0,0 +1,5 @@
+from reactpy.executors.asgi.middleware import ReactPyMiddleware
+from reactpy.executors.asgi.pyscript import ReactPyPyscript
+from reactpy.executors.asgi.standalone import ReactPy
+
+__all__ = ["ReactPy", "ReactPyMiddleware", "ReactPyPyscript"]

src/reactpy/asgi/__init__.py src/reactpy/executors/__init__.py

@@ -11,29 +11,26 @@
 from typing import Any
 
 import orjson
-from asgi_tools import ResponseWebSocket
+from asgi_tools import ResponseText, ResponseWebSocket
 from asgiref import typing as asgi_types
 from asgiref.compatibility import guarantee_single_callable
 from servestatic import ServeStaticASGI
 from typing_extensions import Unpack
 
 from reactpy import config
-from reactpy.asgi.utils import check_path, import_components, process_settings
 from reactpy.core.hooks import ConnectionContext
 from reactpy.core.layout import Layout
 from reactpy.core.serve import serve_layout
-from reactpy.types import (
+from reactpy.executors.asgi.types import (
     AsgiApp,
     AsgiHttpApp,
     AsgiLifespanApp,
     AsgiWebsocketApp,
     AsgiWebsocketReceive,
     AsgiWebsocketSend,
-    Connection,
-    Location,
-    ReactPyConfig,
-    RootComponentConstructor,
 )
+from reactpy.executors.utils import check_path, import_components, process_settings
+from reactpy.types import Connection, Location, ReactPyConfig, RootComponentConstructor
 
 _logger = logging.getLogger(__name__)
 
@@ -81,8 +78,6 @@ def __init__(
         self.dispatcher_pattern = re.compile(
             f"^{self.dispatcher_path}(?P<dotted_path>[a-zA-Z0-9_.]+)/$"
         )
-        self.js_modules_pattern = re.compile(f"^{self.web_modules_path}.*")
-        self.static_pattern = re.compile(f"^{self.static_path}.*")
 
         # User defined ASGI apps
         self.extra_http_routes: dict[str, AsgiHttpApp] = {}
@@ -95,7 +90,7 @@ def __init__(
 
         # Directory attributes
         self.web_modules_dir = config.REACTPY_WEB_MODULES_DIR.current
-        self.static_dir = Path(__file__).parent.parent / "static"
+        self.static_dir = Path(__file__).parent.parent.parent / "static"
 
         # Initialize the sub-applications
         self.component_dispatch_app = ComponentDispatchApp(parent=self)
@@ -134,14 +129,14 @@ def match_dispatch_path(self, scope: asgi_types.WebSocketScope) -> bool:
         return bool(re.match(self.dispatcher_pattern, scope["path"]))
 
     def match_static_path(self, scope: asgi_types.HTTPScope) -> bool:
-        return bool(re.match(self.static_pattern, scope["path"]))
+        return scope["path"].startswith(self.static_path)
 
     def match_web_modules_path(self, scope: asgi_types.HTTPScope) -> bool:
-        return bool(re.match(self.js_modules_pattern, scope["path"]))
+        return scope["path"].startswith(self.web_modules_path)
 
     def match_extra_paths(self, scope: asgi_types.Scope) -> AsgiApp | None:
-        # Custom defined routes are unused within middleware to encourage users to handle
-        # routing within their root ASGI application.
+        # Custom defined routes are unused by default to encourage users to handle
+        # routing within their ASGI framework of choice.
         return None
 
 
@@ -224,7 +219,7 @@ async def run_dispatcher(self) -> None:
                 self.scope["query_string"].decode(), strict_parsing=True
             )
             connection = Connection(
-                scope=self.scope,
+                scope=self.scope,  # type: ignore
                 location=Location(
                     path=ws_query_string.get("http_pathname", [""])[0],
                     query_string=ws_query_string.get("http_query_string", [""])[0],
@@ -263,7 +258,7 @@ async def __call__(
         """ASGI app for ReactPy static files."""
         if not self._static_file_server:
             self._static_file_server = ServeStaticASGI(
-                self.parent.asgi_app,
+                Error404App(),
                 root=self.parent.static_dir,
                 prefix=self.parent.static_path,
             )
@@ -285,10 +280,21 @@ async def __call__(
         """ASGI app for ReactPy web modules."""
         if not self._static_file_server:
             self._static_file_server = ServeStaticASGI(
-                self.parent.asgi_app,
+                Error404App(),
                 root=self.parent.web_modules_dir,
                 prefix=self.parent.web_modules_path,
                 autorefresh=True,
             )
 
         await self._static_file_server(scope, receive, send)
+
+
+class Error404App:
+    async def __call__(
+        self,
+        scope: asgi_types.HTTPScope,
+        receive: asgi_types.ASGIReceiveCallable,
+        send: asgi_types.ASGISendCallable,
+    ) -> None:
+        response = ResponseText("Resource not found on this server.", status_code=404)
+        await response(scope, receive, send)  # type: ignore