functional pyscript prototype

Author: Archmonger

src/reactpy_django/pyscript/__init__.py

@@ -0,0 +1,98 @@
+"""Code within this module is designed to be run directly by PyScript, and is not
+intended to be run in a Django environment.
+
+Our template tag performs string substitutions to turn this file into valid PyScript."""
+
+import asyncio
+
+import js
+from jsonpointer import set_pointer
+from pyodide.ffi.wrappers import add_event_listener
+from reactpy.core.layout import Layout
+
+
+# User component is inserted below by regex replacement
+def user_workspace_UUID():
+    """Encapsulate the user's code with a completely unique function (workspace)
+    to prevent overlapping imports and variable names between different components."""
+
+    def root(): ...
+
+    return root()
+
+
+# ReactPy layout rendering starts here
+class LayoutManagerUUID:
+    """Encapsulate an entire layout manager with a completely unique class to prevent
+    rendering bugs caused by the PyScript global interpreter."""
+
+    @staticmethod
+    def apply_update(update, root_model):
+        if update["path"]:
+            set_pointer(root_model, update["path"], update["model"])
+        else:
+            root_model.update(update["model"])
+
+    def render_model(self, layout, model):
+        container = js.document.getElementById("UUID")
+        container.innerHTML = ""
+        self._render_model(layout, container, model)
+
+    def _render_model(self, layout, parent, model):
+        if isinstance(model, str):
+            parent.appendChild(js.document.createTextNode(model))
+        elif isinstance(model, dict):
+            if not model["tagName"]:
+                for child in model.get("children", []):
+                    self._render_model(layout, parent, child)
+                return
+            tag = model["tagName"]
+            attributes = model.get("attributes", {})
+            children = model.get("children", [])
+            element = js.document.createElement(tag)
+            for key, value in attributes.items():
+                if key == "style":
+                    for style_key, style_value in value.items():
+                        setattr(element.style, style_key, style_value)
+                else:
+                    element.setAttribute(key, value)
+            for event_name, event_handler_model in model.get(
+                "eventHandlers", {}
+            ).items():
+                self._create_event_handler(
+                    layout, element, event_name, event_handler_model
+                )
+            for child in children:
+                self._render_model(layout, element, child)
+            parent.appendChild(element)
+        else:
+            raise ValueError(f"Unknown model type: {type(model)}")
+
+    @staticmethod
+    def _create_event_handler(layout, element, event_name, event_handler_model):
+        target = event_handler_model["target"]
+
+        def event_handler(*args):
+            asyncio.create_task(
+                layout.deliver(
+                    {
+                        "type": "layout-event",
+                        "target": target,
+                        "data": args,
+                    }
+                )
+            )
+
+        event_name = event_name.lstrip("on_").lower().replace("_", "")
+        add_event_listener(element, event_name, event_handler)
+
+    async def run(self):
+        root_model = {}
+        async with Layout(user_workspace_UUID()) as layout:
+            while True:
+                update = await layout.render()
+                self.apply_update(update, root_model)
+                self.render_model(layout, root_model)
+
+
+asyncio.create_task(LayoutManagerUUID().run())

src/reactpy_django/pyscript/executor.py

@@ -0,0 +1,6 @@
+{% load static %}
+<link rel="stylesheet" href="{% static 'reactpy_django/pyscript/core.css' %}" />
+<script type="module" src="{% static 'reactpy_django/pyscript/core.js' %}"></script>
+{% if reactpy_class %}<div id="{{reactpy_uuid}}" class="{{reactpy_class}}">{{reactpy_initial_html}}</div>{% endif %}
+{% if not reactpy_class %}<div id="{{reactpy_uuid}}">{{reactpy_initial_html}}</div>{% endif %}
+<py-script async config='{{ reactpy_config }}'>{{ reactpy_executor }}</py-script>

src/reactpy_django/templates/reactpy/pyscript_component.html

@@ -1,18 +1,24 @@
 from __future__ import annotations
 
+import textwrap
 from logging import getLogger
+from pathlib import Path
 from uuid import uuid4
 
 import dill as pickle
+import jsonpointer
+import orjson
+import reactpy
 from django import template
 from django.http import HttpRequest
 from django.urls import NoReverseMatch, reverse
 from reactpy.backend.hooks import ConnectionContext
 from reactpy.backend.types import Connection, Location
-from reactpy.core.types import ComponentConstructor
+from reactpy.core.types import ComponentConstructor, ComponentType, VdomDict
 from reactpy.utils import vdom_to_html
 
-from reactpy_django import config, models
+from reactpy_django import config as reactpy_config
+from reactpy_django import models, pyscript
 from reactpy_django.exceptions import (
     ComponentCarrierError,
     ComponentDoesNotExistError,
@@ -30,14 +36,18 @@
 register = template.Library()
 _logger = getLogger(__name__)
 
+pyscript_template = (Path(pyscript.__file__).parent / "executor.py").read_text(
+    encoding="utf-8"
+)
+
 
 @register.inclusion_tag("reactpy/component.html", takes_context=True)
 def component(
     context: template.RequestContext,
     dotted_path: str,
     *args,
     host: str | None = None,
-    prerender: str = str(config.REACTPY_PRERENDER),
+    prerender: str = str(reactpy_config.REACTPY_PRERENDER),
     offline: str = "",
     **kwargs,
 ):
@@ -73,7 +83,11 @@ def component(
     perceived_host = (request.get_host() if request else "").strip("/")
     host = (
         host
-        or (next(config.REACTPY_DEFAULT_HOSTS) if config.REACTPY_DEFAULT_HOSTS else "")
+        or (
+            next(reactpy_config.REACTPY_DEFAULT_HOSTS)
+            if reactpy_config.REACTPY_DEFAULT_HOSTS
+            else ""
+        )
     ).strip("/")
     is_local = not host or host.startswith(perceived_host)
     uuid = str(uuid4())
@@ -84,22 +98,22 @@ def component(
     _offline_html = ""
 
     # Validate the host
-    if host and config.REACTPY_DEBUG_MODE:
+    if host and reactpy_config.REACTPY_DEBUG_MODE:
         try:
             validate_host(host)
         except InvalidHostError as e:
             return failure_context(dotted_path, e)
 
     # Fetch the component
     if is_local:
-        user_component = config.REACTPY_REGISTERED_COMPONENTS.get(dotted_path)
+        user_component = reactpy_config.REACTPY_REGISTERED_COMPONENTS.get(dotted_path)
         if not user_component:
             msg = f"Component '{dotted_path}' is not registered as a root component. "
             _logger.error(msg)
             return failure_context(dotted_path, ComponentDoesNotExistError(msg))
 
     # Validate the component args & kwargs
-    if is_local and config.REACTPY_DEBUG_MODE:
+    if is_local and reactpy_config.REACTPY_DEBUG_MODE:
         try:
             validate_component_args(user_component, *args, **kwargs)
         except ComponentParamError as e:
@@ -140,7 +154,7 @@ def component(
 
     # Fetch the offline component's HTML, if requested
     if offline:
-        offline_component = config.REACTPY_REGISTERED_COMPONENTS.get(offline)
+        offline_component = reactpy_config.REACTPY_REGISTERED_COMPONENTS.get(offline)
         if not offline_component:
             msg = f"Cannot render offline component '{offline}'. It is not registered as a component."
             _logger.error(msg)
@@ -159,13 +173,13 @@ def component(
         "reactpy_class": class_,
         "reactpy_uuid": uuid,
         "reactpy_host": host or perceived_host,
-        "reactpy_url_prefix": config.REACTPY_URL_PREFIX,
+        "reactpy_url_prefix": reactpy_config.REACTPY_URL_PREFIX,
         "reactpy_component_path": f"{dotted_path}/{uuid}/{int(has_args)}/",
         "reactpy_resolved_web_modules_path": RESOLVED_WEB_MODULES_PATH,
-        "reactpy_reconnect_interval": config.REACTPY_RECONNECT_INTERVAL,
-        "reactpy_reconnect_max_interval": config.REACTPY_RECONNECT_MAX_INTERVAL,
-        "reactpy_reconnect_backoff_multiplier": config.REACTPY_RECONNECT_BACKOFF_MULTIPLIER,
-        "reactpy_reconnect_max_retries": config.REACTPY_RECONNECT_MAX_RETRIES,
+        "reactpy_reconnect_interval": reactpy_config.REACTPY_RECONNECT_INTERVAL,
+        "reactpy_reconnect_max_interval": reactpy_config.REACTPY_RECONNECT_MAX_INTERVAL,
+        "reactpy_reconnect_backoff_multiplier": reactpy_config.REACTPY_RECONNECT_BACKOFF_MULTIPLIER,
+        "reactpy_reconnect_max_retries": reactpy_config.REACTPY_RECONNECT_MAX_RETRIES,
         "reactpy_prerender_html": _prerender_html,
         "reactpy_offline_html": _offline_html,
     }
@@ -174,7 +188,7 @@ def component(
 def failure_context(dotted_path: str, error: Exception):
     return {
         "reactpy_failure": True,
-        "reactpy_debug_mode": config.REACTPY_DEBUG_MODE,
+        "reactpy_debug_mode": reactpy_config.REACTPY_DEBUG_MODE,
         "reactpy_dotted_path": dotted_path,
         "reactpy_error": type(error).__name__,
     }
@@ -219,3 +233,57 @@ def prerender_component(
         vdom_tree = layout.render()["model"]
 
     return vdom_to_html(vdom_tree)
+
+
+# TODO: Add micropython support
+@register.inclusion_tag("reactpy/pyscript_component.html", takes_context=True)
+def pyscript_component(
+    context: template.RequestContext,
+    file_path: str,
+    *extra_packages: str,
+    initial: str | VdomDict | ComponentType = "",
+    config: str | dict = "",
+    root: str = "root",
+):
+    uuid = uuid4().hex
+    request: HttpRequest | None = context.get("request")
+    pyscript_config = {
+        "packages": [
+            f"reactpy=={reactpy.__version__}",
+            f"jsonpointer=={jsonpointer.__version__}",
+            "ssl",
+            *extra_packages,
+        ]
+    }
+    if config and isinstance(config, str):
+        pyscript_config.update(orjson.loads(config))
+    elif isinstance(config, dict):
+        pyscript_config.update(config)
+
+    # Convert the user provided initial HTML to a string, if needed
+    if isinstance(initial, dict):
+        initial = vdom_to_html(initial)
+    elif hasattr(initial, "render"):
+        if not request:
+            raise ValueError(
+                "Cannot render a component without a HTTP request. Are you missing the request "
+                "context processor in settings.py:TEMPLATES['OPTIONS']['context_processors']?"
+            )
+        initial = prerender_component(initial, [], {}, uuid, request)
+
+    # Create a valid PyScript executor by replacing the template values
+    executor = pyscript_template.replace("UUID", uuid)
+    executor = executor.replace("return root()", f"return {root}()")
+
+    # Insert the user code into the template
+    user_code = Path(file_path).read_text(encoding="utf-8")
+    user_code = user_code.strip().replace("\t", "    ")  # Normalize the code text
+    user_code = textwrap.indent(user_code, "    ")  # Add indentation to match template
+    executor = executor.replace("    def root(): ...", user_code)
+
+    return {
+        "reactpy_executor": executor,
+        "reactpy_uuid": uuid,
+        "reactpy_initial_html": initial,
+        "reactpy_config": orjson.dumps(pyscript_config).decode(),
+    }

src/reactpy_django/templatetags/reactpy.py

@@ -0,0 +1,15 @@
+from reactpy import component, html, use_state
+
+
+@component
+def root():
+    value, set_value = use_state(0)
+    return html.article(
+        html.div(
+            {"class": "grid"},
+            html.button({"on_click": lambda event: set_value(value + 1)}, "+"),
+            html.button({"on_click": lambda event: set_value(value - 1)}, "-"),
+        ),
+        "Current value",
+        html.pre({"style": {"font-style": "bold"}}, str(value)),
+    )

tests/test_app/pyscript/__init__.py

@@ -0,0 +1,6 @@
+from reactpy import component, html
+
+
+@component
+def root():
+    return html.div("hello world")

tests/test_app/pyscript/components/__init__.py

@@ -0,0 +1,7 @@
+from django.urls import re_path
+
+from test_app.pyscript.views import pyscript
+
+urlpatterns = [
+    re_path(r"^pyscript/(?P<path>.*)/?$", pyscript),
+]

tests/test_app/pyscript/components/counter.py

@@ -0,0 +1,5 @@
+from django.shortcuts import render
+
+
+def pyscript(request, path=None):
+    return render(request, "pyscript.html", {})

tests/test_app/pyscript/components/hello_world.py

@@ -0,0 +1,22 @@
+{% load static %} {% load reactpy %}
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}" />
+    <title>ReactPy</title>
+</head>
+
+<body>
+    <h1>ReactPy PyScript Test Page</h1>
+    <hr>
+    {% pyscript_component "./test_app/pyscript/components/hello_world.py" %}
+    <hr>
+    {% pyscript_component "./test_app/pyscript/components/counter.py" %}
+    <hr>
+</body>
+
+</html>

tests/test_app/pyscript/urls.py

@@ -14,6 +14,7 @@
     1. Import the include() function: from django.urls import include, path
     2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
 """
+
 from django.contrib import admin
 from django.urls import include, path
 
@@ -30,6 +31,7 @@
     path("", include("test_app.prerender.urls")),
     path("", include("test_app.performance.urls")),
     path("", include("test_app.router.urls")),
+    path("", include("test_app.pyscript.urls")),
     path("", include("test_app.offline.urls")),
     path("", include("test_app.channel_layers.urls")),
     path("reactpy/", include("reactpy_django.http.urls")),