Use the ReactPy core's PyScript hooks (new PR, coming soon in v2.0.0b12), and mark Django template tag output as HTML-safe

Author: Archmonger

pyproject.toml

@@ -67,6 +67,7 @@ artifacts = ["/src/reactpy_django/static/"]
 
 [tool.hatch.metadata]
 license-files = { paths = ["LICENSE.md"] }
+allow-direct-references = true
 
 [tool.hatch.envs.default]
 installer = "uv"

src/reactpy_django/pyscript/__init__.py

@@ -1,2 +1,2 @@
 <div id="pyscript-{{pyscript_uuid}}" class="pyscript" data-uuid="{{pyscript_uuid}}">{{pyscript_initial_html}}</div>
-<py-script async>{{pyscript_executor}}</py-script>
+<script type="py">{{pyscript_executor}}</script>

src/reactpy_django/pyscript/component_template.py

@@ -5,4 +5,4 @@
 <link rel="stylesheet" href="{% static 'reactpy_django/pyscript-hide-debug.css' %}" />
 {% endif %}
 <script type="module" async crossorigin="anonymous" src="{% static 'reactpy_django/pyscript/core.js' %}"></script>
-<py-script async config='{{pyscript_config}}'>{{pyscript_layout_handler}}</py-script>
+<script type="py" config='{{pyscript_config}}'>{{pyscript_layout_handler}}</script>

src/reactpy_django/pyscript/layout_handler.py

@@ -5,7 +5,10 @@
 from uuid import uuid4
 
 from django import template
+from django.templatetags.static import static
 from django.urls import NoReverseMatch, reverse
+from django.utils.safestring import mark_safe
+from reactpy.executors.pyscript.utils import PYSCRIPT_LAYOUT_HANDLER, extend_pyscript_config, pyscript_executor_html
 
 from reactpy_django import config as reactpy_config
 from reactpy_django.exceptions import (
@@ -15,8 +18,8 @@
     InvalidHostError,
     OfflineComponentMissingError,
 )
-from reactpy_django.pyscript.utils import PYSCRIPT_LAYOUT_HANDLER, extend_pyscript_config, render_pyscript_template
 from reactpy_django.utils import (
+    fetch_cached_python_file,
     prerender_component,
     reactpy_to_string,
     save_component_params,
@@ -178,11 +181,10 @@ def component(
         "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,
+        "reactpy_prerender_html": mark_safe(_prerender_html),
+        "reactpy_offline_html": mark_safe(_offline_html),
     }
 
-
 @register.inclusion_tag("reactpy/pyscript_component.html", takes_context=True)
 def pyscript_component(
     context: template.RequestContext,
@@ -208,12 +210,12 @@ def pyscript_component(
     uuid = uuid4().hex
     request: HttpRequest | None = context.get("request")
     initial = reactpy_to_string(initial, request=request, uuid=uuid)
-    executor = render_pyscript_template(file_paths, uuid, root)
+    executor = pyscript_executor_html(file_paths, uuid, root, fetch_cached_python_file)
 
     return {
-        "pyscript_executor": executor,
+        "pyscript_executor": mark_safe(executor),
         "pyscript_uuid": uuid,
-        "pyscript_initial_html": initial,
+        "pyscript_initial_html": mark_safe(initial),
     }
 
 
@@ -239,8 +241,12 @@ def pyscript_setup(
     from reactpy_django.config import DJANGO_DEBUG
 
     return {
-        "pyscript_config": extend_pyscript_config(extra_py, extra_js, config),
-        "pyscript_layout_handler": PYSCRIPT_LAYOUT_HANDLER,
+        "pyscript_config": mark_safe(
+            extend_pyscript_config(
+                extra_py, extra_js, config, {static("reactpy_django/morphdom/morphdom-esm.js"): "morphdom"}
+            )
+        ),
+        "pyscript_layout_handler": mark_safe(PYSCRIPT_LAYOUT_HANDLER),
         "django_debug": DJANGO_DEBUG,
     }
 

src/reactpy_django/pyscript/utils.py

@@ -13,6 +13,7 @@
 from fnmatch import fnmatch
 from functools import wraps
 from importlib import import_module
+from pathlib import Path
 from typing import TYPE_CHECKING, Any, Callable
 from uuid import UUID, uuid4
 
@@ -531,3 +532,22 @@ def del_html_head_body_transform(vdom: VdomDict) -> VdomDict:
     if vdom["tagName"] in {"html", "body", "head"}:
         return {"tagName": "", "children": vdom.setdefault("children", [])}
     return vdom
+
+
+def fetch_cached_python_file(file_path: str, minify: bool = True) -> str:
+    from reactpy.executors.pyscript.utils import minify_python
+
+    from reactpy_django.config import REACTPY_CACHE
+
+    # Try to get user code from cache
+    cache_key = create_cache_key("pyscript", file_path)
+    last_modified_time = os.stat(file_path).st_mtime
+    file_contents: str = caches[REACTPY_CACHE].get(cache_key, version=int(last_modified_time))
+    if file_contents:
+        return file_contents
+
+    file_contents = Path(file_path).read_text(encoding="utf-8").strip()
+    if minify:
+        file_contents = minify_python(file_contents)
+    caches[REACTPY_CACHE].set(cache_key, file_contents, version=int(last_modified_time))
+    return file_contents