reusable layout manager

Author: Archmonger

src/reactpy_django/components.py

@@ -158,18 +158,14 @@ def django_js(static_path: str, key: Key | None = None):
 
 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,
     )
 
@@ -315,32 +311,26 @@ def _cached_static_contents(static_path: str) -> str:
 @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",
 ):
     rendered, set_rendered = hooks.use_state(False)
     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)
 
     if not rendered:
         # FIXME: This is needed to properly re-render PyScript instances such as
         # when a component is re-rendered due to WebSocket disconnection.
         # There may be a better way to do this in the future.
         # While this solution allows re-creating PyScript components, it also
         # results in a browser memory leak. It currently unclear how to properly
-        # clean up unused code (def user_workspace_UUID) from PyScript.
+        # clean up unused code (user_workspace_UUID) from PyScript.
         set_rendered(True)
         return None
 
     return html.div(
         html.div((extra_props or {}) | {"id": f"pyscript-{uuid}"}, initial),
-        pyscript(
-            {"async": "", "config": orjson.dumps(new_config).decode()},
-            executor,
-        ),
+        pyscript({"async": ""}, executor),
     )

src/reactpy_django/config.py

@@ -7,7 +7,7 @@
 from django.core.cache import DEFAULT_CACHE_ALIAS
 from django.db import DEFAULT_DB_ALIAS
 from django.views import View
-from reactpy.config import REACTPY_DEBUG_MODE
+from reactpy.config import REACTPY_DEBUG_MODE as _REACTPY_DEBUG_MODE
 from reactpy.core.types import ComponentConstructor
 
 from reactpy_django.types import (
@@ -17,7 +17,8 @@
 from reactpy_django.utils import import_dotted_path
 
 # Non-configurable values
-REACTPY_DEBUG_MODE.set_current(getattr(settings, "DEBUG"))
+_REACTPY_DEBUG_MODE.set_current(getattr(settings, "DEBUG"))
+REACTPY_DEBUG_MODE = _REACTPY_DEBUG_MODE.current
 REACTPY_REGISTERED_COMPONENTS: dict[str, ComponentConstructor] = {}
 REACTPY_FAILED_COMPONENTS: set[str] = set()
 REACTPY_REGISTERED_IFRAME_VIEWS: dict[str, Callable | View] = {}

src/reactpy_django/pyscript/component_template.py

@@ -3,12 +3,10 @@
 
 Our template tag performs string substitutions to turn this file into valid PyScript."""
 
-import asyncio
+from typing import TYPE_CHECKING
 
-import js
-from jsonpointer import set_pointer
-from pyodide.ffi.wrappers import add_event_listener
-from reactpy.core.layout import Layout
+if TYPE_CHECKING:
+    from reactpy_django.pyscript.layout_manager import ReactPyLayoutManager
 
 
 # User component is inserted below by regex replacement
@@ -21,74 +19,6 @@ 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(self, layout, model):
-        container = js.document.getElementById("pyscript-UUID")
-        container.innerHTML = ""
-        self.build_element_tree(layout, container, 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.build_element_tree(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.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):
-        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(layout, root_model)
-
-
 # PyScript allows top-level await, which allows us to not throw errors on components
 # that terminate early (such as hook-less components)
-await LayoutManagerUUID().run()  # noqa: F704
+await ReactPyLayoutManager("UUID").run(user_workspace_UUID)  # noqa: F704

src/reactpy_django/pyscript/layout_manager.py

@@ -0,0 +1,77 @@
+import asyncio
+from typing import Coroutine
+
+import js
+from jsonpointer import set_pointer
+from pyodide.ffi.wrappers import add_event_listener
+from reactpy.core.layout import Layout
+
+
+class ReactPyLayoutManager:
+    """Encapsulate the entire layout manager with a class to prevent overlapping
+    variable names between user code."""
+
+    def __init__(self, uuid):
+        self.uuid = uuid
+
+    @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(self, layout, model):
+        container = js.document.getElementById(f"pyscript-{self.uuid}")
+        container.innerHTML = ""
+        self.build_element_tree(layout, container, 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.build_element_tree(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.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):
+        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, workspace_function: Coroutine):
+        root_model = {}
+        async with Layout(workspace_function()) as layout:
+            while True:
+                update = await layout.render()
+                self.apply_update(update, root_model)
+                self.render(layout, root_model)

src/reactpy_django/static/reactpy_django/pyscript-custom.css

@@ -0,0 +1,3 @@
+py-script {
+    display: none;
+}

src/reactpy_django/static/reactpy_django/pyscript-hide-debug.css

@@ -0,0 +1,3 @@
+.py-error {
+    display: none;
+}

src/reactpy_django/templates/reactpy/pyscript_component.html

@@ -1,4 +1,4 @@
-{% if reactpy_class %}<div id="pyscript-{{reactpy_uuid}}" class="{{reactpy_class}}">{{reactpy_initial_html}}</div>
+{% if reactpy_class %}<div id="pyscript-{{pyscript_uuid}}" class="{{pyscript_class}}">{{pyscript_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>
+{% if not reactpy_class %}<div id="pyscript-{{pyscript_uuid}}">{{pyscript_initial_html}}</div>{% endif %}
+<py-script async>{{pyscript_executor}}</py-script>

src/reactpy_django/templates/reactpy/pyscript_static_files.html renamed to src/reactpy_django/templates/reactpy/pyscript_setup.html

@@ -1,4 +1,8 @@
 {% load static %}
 <link rel="stylesheet" href="{% static 'reactpy_django/pyscript/core.css' %}" />
 <link rel="stylesheet" href="{% static 'reactpy_django/pyscript-custom.css' %}" />
+{% if not reactpy_debug_mode %}
+<link rel="stylesheet" href="{% static 'reactpy_django/pyscript-hide-debug.css' %}" />
+{% endif %}
 <script type="module" async src="{% static 'reactpy_django/pyscript/core.js' %}"></script>
+<py-script async config='{{pyscript_config}}'>{{pyscript_layout_manager}}</py-script>

src/reactpy_django/templatetags/reactpy.py

@@ -4,7 +4,6 @@
 from uuid import uuid4
 
 import dill as pickle
-import orjson
 from django import template
 from django.http import HttpRequest
 from django.urls import NoReverseMatch, reverse
@@ -21,6 +20,7 @@
 )
 from reactpy_django.types import ComponentParams
 from reactpy_django.utils import (
+    PYSCRIPT_LAYOUT_MANAGER,
     extend_pyscript_config,
     prerender_component,
     render_pyscript_template,
@@ -211,25 +211,29 @@ def validate_host(host: str):
 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")
     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(new_config).decode(),
+        "pyscript_executor": executor,
+        "pyscript_uuid": uuid,
+        "pyscript_initial_html": initial,
     }
 
 
-@register.inclusion_tag("reactpy/pyscript_static_files.html")
-def pyscript_static_files():
-    return {}
+@register.inclusion_tag("reactpy/pyscript_setup.html")
+def pyscript_setup(
+    *extra_packages: str,
+    config: str | dict = "",
+):
+    print(reactpy_config.REACTPY_DEBUG_MODE)
+    return {
+        "pyscript_config": extend_pyscript_config(config, extra_packages),
+        "pyscript_layout_manager": PYSCRIPT_LAYOUT_MANAGER,
+        "reactpy_debug_mode": reactpy_config.REACTPY_DEBUG_MODE,
+    }

src/reactpy_django/utils.py

@@ -57,6 +57,9 @@
 PYSCRIPT_COMPONENT_TEMPLATE = (
     Path(__file__).parent / "pyscript" / "component_template.py"
 ).read_text(encoding="utf-8")
+PYSCRIPT_LAYOUT_MANAGER = (
+    Path(__file__).parent / "pyscript" / "layout_manager.py"
+).read_text(encoding="utf-8")
 PYSCRIPT_DEFAULT_CONFIG = {
     "packages": [
         f"reactpy=={reactpy.__version__}",
@@ -468,12 +471,12 @@ def render_pyscript_template(file_path: str, uuid: str, root: str):
     return executor
 
 
-def extend_pyscript_config(config: dict | str, extra_packages: Sequence) -> dict:
+def extend_pyscript_config(config: dict | str, extra_packages: Sequence) -> str:
     """Extends the default PyScript configuration with user configuration."""
     pyscript_config = deepcopy(PYSCRIPT_DEFAULT_CONFIG)
     pyscript_config["packages"].extend(extra_packages)
     if config and isinstance(config, str):
         pyscript_config.update(orjson.loads(config))
     elif isinstance(config, dict):
         pyscript_config.update(config)
-    return pyscript_config
+    return orjson.dumps(pyscript_config).decode("utf-8")

tests/test_app/templates/pyscript.html

@@ -8,7 +8,7 @@
     <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>
-    {% pyscript_static_files %}
+    {% pyscript_setup %}
 </head>
 
 <body>