fully functional server-side parent component

Author: Archmonger

src/reactpy_django/components.py

@@ -322,33 +322,23 @@ def _python_to_pyscript(
     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 kill off any previous PyScript instances
+        # such as when a component is re-rendered due to WebSocket disconnection.
+        # There may be a better way to do this, but it's not clear at the moment
+        set_rendered(True)
+        return None
+
     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}",
-            },
+            {"async": "", "config": orjson.dumps(new_config).decode()},
             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

@@ -89,4 +89,6 @@ async def run(self):
                 self.render(layout, root_model)
 
 
-asyncio.create_task(LayoutManagerUUID().run())
+# 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

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

@@ -1,6 +1,3 @@
-{% 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="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 %}

src/reactpy_django/templates/reactpy/pyscript_component.html

@@ -0,0 +1,4 @@
+{% load static %}
+<link rel="stylesheet" href="{% static 'reactpy_django/pyscript/core.css' %}" />
+<link rel="stylesheet" href="{% static 'reactpy_django/pyscript-custom.css' %}" />
+<script type="module" async src="{% static 'reactpy_django/pyscript/core.js' %}"></script>

src/reactpy_django/templates/reactpy/pyscript_static_files.html

@@ -228,3 +228,8 @@ def pyscript_component(
         "reactpy_initial_html": initial,
         "reactpy_config": orjson.dumps(new_config).decode(),
     }
+
+
+@register.inclusion_tag("reactpy/pyscript_static_files.html")
+def pyscript_static_files():
+    return {}

src/reactpy_django/templatetags/reactpy.py

@@ -55,9 +55,9 @@
     + rf"({_OFFLINE_KWARG_PATTERN}|{_GENERIC_KWARG_PATTERN})*?"
     + r"\s*%}"
 )
-PYSCRIPT_TEMPLATE = (Path(__file__).parent / "pyscript_template.py").read_text(
-    encoding="utf-8"
-)
+PYSCRIPT_COMPONENT_TEMPLATE = (
+    Path(__file__).parent / "pyscript" / "component_template.py"
+).read_text(encoding="utf-8")
 PYSCRIPT_TAG = make_vdom_constructor("py-script")
 PYSCRIPT_DEFAULT_CONFIG = {
     "packages": [
@@ -458,7 +458,7 @@ def vdom_or_component_to_string(
 def render_pyscript_template(file_path: str, uuid: str, root: str):
     """Inserts the user's code into our PyScript template using pattern matching."""
     # Create a valid PyScript executor by replacing the template values
-    executor = PYSCRIPT_TEMPLATE.replace("UUID", uuid)
+    executor = PYSCRIPT_COMPONENT_TEMPLATE.replace("UUID", uuid)
     executor = executor.replace("return root()", f"return {root}()")
 
     # Insert the user code into the template

src/reactpy_django/utils.py

@@ -1,4 +1,4 @@
-from reactpy import component, html
+from reactpy import component, html, use_state
 from reactpy_django.components import python_to_pyscript
 
 
@@ -8,3 +8,26 @@ def embed():
         {"className": "embeddable"},
         python_to_pyscript("./test_app/pyscript/components/child_embed.py"),
     )
+
+
+@component
+def toggeable_embed():
+    state, set_state = use_state(False)
+
+    if not state:
+        return html.div(
+            {"className": "embeddable"},
+            html.button(
+                {"onClick": lambda x: set_state(not state)},
+                "Click to show/hide",
+            ),
+        )
+
+    return html.div(
+        {"className": "embeddable"},
+        html.button(
+            {"onClick": lambda x: set_state(not state)},
+            "Click to show/hide",
+        ),
+        python_to_pyscript("./test_app/pyscript/components/child_embed.py"),
+    )

tests/test_app/pyscript/components/child.py

@@ -8,6 +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 %}
 </head>
 
 <body>
@@ -19,6 +20,8 @@ <h1>ReactPy PyScript Test Page</h1>
     <hr>
     {% component "test_app.pyscript.components.child.embed" %}
     <hr>
+    {% component "test_app.pyscript.components.child.toggeable_embed" %}
+    <hr>
 </body>
 
 </html>