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: