first attempt at pyscript components with server-side parent components

Author: Archmonger

src/reactpy_django/components.py

@@ -4,18 +4,29 @@
 import os
 from typing import Any, Callable, Sequence, Union, cast, overload
 from urllib.parse import urlencode
+from uuid import uuid4
 from warnings import warn
 
+import orjson
 from django.contrib.staticfiles.finders import find
 from django.core.cache import caches
 from django.http import HttpRequest
+from django.templatetags.static import static
 from django.urls import reverse
 from django.views import View
 from reactpy import component, hooks, html, utils
-from reactpy.types import Key, VdomDict
+from reactpy.types import ComponentType, Key, VdomDict
 
 from reactpy_django.exceptions import ViewNotRegisteredError
-from reactpy_django.utils import generate_obj_name, import_module, render_view
+from reactpy_django.utils import (
+    PYSCRIPT_TAG,
+    extend_pyscript_config,
+    generate_obj_name,
+    import_module,
+    render_pyscript_template,
+    render_view,
+    vdom_or_component_to_string,
+)
 
 
 # Type hints for:
@@ -27,8 +38,7 @@ def view_to_component(
     compatibility: bool = False,
     transforms: Sequence[Callable[[VdomDict], Any]] = (),
     strict_parsing: bool = True,
-) -> Any:
-    ...
+) -> Any: ...
 
 
 # Type hints for:
@@ -39,8 +49,7 @@ def view_to_component(
     compatibility: bool = False,
     transforms: Sequence[Callable[[VdomDict], Any]] = (),
     strict_parsing: bool = True,
-) -> Callable[[Callable], Any]:
-    ...
+) -> Callable[[Callable], Any]: ...
 
 
 def view_to_component(
@@ -148,6 +157,24 @@ def django_js(static_path: str, key: Key | None = None):
     return _django_js(static_path=static_path, key=key)
 
 
+def python_to_pyscript(
+    file_path: str,
+    *extra_packages: str,
+    extra_props: dict[str, Any] | None = None,
+    initial: str | VdomDict | ComponentType = "",
+    config: str | dict = "",
+    root: str = "root",
+):
+    return _python_to_pyscript(
+        file_path,
+        *extra_packages,
+        extra_props=extra_props,
+        initial=initial,
+        config=config,
+        root=root,
+    )
+
+
 @component
 def _view_to_component(
     view: Callable | View | str,
@@ -284,3 +311,44 @@ def _cached_static_contents(static_path: str) -> str:
         )
 
     return file_contents
+
+
+@component
+def _python_to_pyscript(
+    file_path: str,
+    *extra_packages: str,
+    extra_props: dict[str, Any] | None = None,
+    initial: str | VdomDict | ComponentType = "",
+    config: str | dict = "",
+    root: str = "root",
+):
+    uuid = uuid4().hex.replace("-", "")
+    initial = vdom_or_component_to_string(initial, uuid=uuid)
+    executor = render_pyscript_template(file_path, uuid, root)
+    new_config = extend_pyscript_config(config, extra_packages)
+
+    return html.div(
+        html.link(
+            {"rel": "stylesheet", "href": static("reactpy_django/pyscript/core.css")}
+        ),
+        html.script(
+            {
+                "type": "module",
+                "src": static(
+                    "reactpy_django/pyscript/core.js",
+                ),
+            }
+        ),
+        html.div((extra_props or {}) | {"id": f"pyscript-{uuid}"}, initial),
+        PYSCRIPT_TAG(
+            {
+                "async": "",
+                "config": orjson.dumps(new_config).decode(),
+                "id": f"script-{uuid}",
+            },
+            executor,
+        ),
+        html.script(
+            f"if (document.querySelector('#pyscript-{uuid}') && document.querySelector('#pyscript-{uuid}').childElementCount != 0 && document.querySelector('#script-{uuid}')) document.querySelector('#script-{uuid}').remove();"
+        ),
+    )

src/reactpy_django/pyscript/__init__.py

@@ -33,18 +33,18 @@ def apply_update(update, root_model):
         else:
             root_model.update(update["model"])
 
-    def render_model(self, layout, model):
-        container = js.document.getElementById("UUID")
+    def render(self, layout, model):
+        container = js.document.getElementById("pyscript-UUID")
         container.innerHTML = ""
-        self._render_model(layout, container, model)
+        self.build_element_tree(layout, container, model)
 
-    def _render_model(self, layout, parent, model):
+    def build_element_tree(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)
+                    self.build_element_tree(layout, parent, child)
                 return
             tag = model["tagName"]
             attributes = model.get("attributes", {})
@@ -59,28 +59,22 @@ def _render_model(self, layout, parent, model):
             for event_name, event_handler_model in model.get(
                 "eventHandlers", {}
             ).items():
-                self._create_event_handler(
+                self.create_event_handler(
                     layout, element, event_name, event_handler_model
                 )
             for child in children:
-                self._render_model(layout, element, child)
+                self.build_element_tree(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):
+    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,
-                    }
-                )
+                layout.deliver({"type": "layout-event", "target": target, "data": args})
             )
 
         event_name = event_name.lstrip("on_").lower().replace("_", "")
@@ -92,7 +86,7 @@ async def run(self):
             while True:
                 update = await layout.render()
                 self.apply_update(update, root_model)
-                self.render_model(layout, root_model)
+                self.render(layout, root_model)
 
 
 asyncio.create_task(LayoutManagerUUID().run())

src/reactpy_django/pyscript/executor.py renamed to src/reactpy_django/pyscript_template.py

@@ -1,6 +1,7 @@
 {% 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 %}
+{% if reactpy_class %}<div id="pyscript-{{reactpy_uuid}}" class="{{reactpy_class}}">{{reactpy_initial_html}}</div>
+{% endif %}
+{% if not reactpy_class %}<div id="pyscript-{{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,24 +1,17 @@
 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, ComponentType, VdomDict
-from reactpy.utils import vdom_to_html
 
 from reactpy_django import config as reactpy_config
-from reactpy_django import models, pyscript
+from reactpy_django import models
 from reactpy_django.exceptions import (
     ComponentCarrierError,
     ComponentDoesNotExistError,
@@ -27,7 +20,14 @@
     OfflineComponentMissing,
 )
 from reactpy_django.types import ComponentParams
-from reactpy_django.utils import SyncLayout, strtobool, validate_component_args
+from reactpy_django.utils import (
+    extend_pyscript_config,
+    prerender_component,
+    render_pyscript_template,
+    strtobool,
+    validate_component_args,
+    vdom_or_component_to_string,
+)
 
 try:
     RESOLVED_WEB_MODULES_PATH = reverse("reactpy:web_modules", args=["/"]).strip("/")
@@ -36,10 +36,6 @@
 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(
@@ -211,31 +207,6 @@ def validate_host(host: str):
         raise InvalidHostError(msg)
 
 
-def prerender_component(
-    user_component: ComponentConstructor, args, kwargs, uuid, request: HttpRequest
-):
-    search = request.GET.urlencode()
-    scope = getattr(request, "scope", {})
-    scope["reactpy"] = {"id": str(uuid)}
-
-    with SyncLayout(
-        ConnectionContext(
-            user_component(*args, **kwargs),
-            value=Connection(
-                scope=scope,
-                location=Location(
-                    pathname=request.path, search=f"?{search}" if search else ""
-                ),
-                carrier=request,
-            ),
-        )
-    ) as layout:
-        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,
@@ -247,43 +218,13 @@ def pyscript_component(
 ):
     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)
+    initial = vdom_or_component_to_string(initial, request=request, uuid=uuid)
+    executor = render_pyscript_template(file_path, uuid, root)
+    new_config = extend_pyscript_config(config, extra_packages)
 
     return {
         "reactpy_executor": executor,
         "reactpy_uuid": uuid,
         "reactpy_initial_html": initial,
-        "reactpy_config": orjson.dumps(pyscript_config).decode(),
+        "reactpy_config": orjson.dumps(new_config).decode(),
     }