Use morphdom to modify the DOM

Author: Archmonger

.gitignore

@@ -1,6 +1,7 @@
 # ReactPy-Django Build Artifacts
 src/reactpy_django/static/reactpy_django/client.js
 src/reactpy_django/static/reactpy_django/pyscript
+src/reactpy_django/static/reactpy_django/morphdom
 
 # Django #
 logs

setup.py

@@ -123,6 +123,14 @@ def run(self):
             for file in pyscript_dist.iterdir():
                 shutil.copy(file, pyscript_static_dir / file.name)
 
+            log.info("Copying Morphdom distribution")
+            morphdom_dist = js_dir / "node_modules" / "morphdom" / "dist"
+            morphdom_static_dir = static_dir / "morphdom"
+            if not morphdom_static_dir.exists():
+                morphdom_static_dir.mkdir()
+            for file in morphdom_dist.iterdir():
+                shutil.copy(file, morphdom_static_dir / file.name)
+
             log.info("Successfully built Javascript")
             super().run()
 

src/js/package-lock.json

@@ -23,6 +23,7 @@
     "@pyscript/core": "^0.4.48",
     "@reactpy/client": "^0.3.1",
     "@rollup/plugin-typescript": "^11.1.6",
+    "morphdom": "^2.7.3",
     "tslib": "^2.6.2"
   }
 }

src/js/package.json

@@ -26,13 +26,18 @@ def apply_update(update, root_model):
     def render(self, layout, model):
         """Submit ReactPy's internal DOM model into the HTML DOM."""
         import js
+        from pyscript.js_modules import morphdom
 
+        # Create a new container to render the layout into
         container = js.document.getElementById(f"pyscript-{self.uuid}")
+        temp_container = container.cloneNode(False)
+        self.build_element_tree(layout, temp_container, model)
 
-        # FIXME: The current implementation completely recreates the DOM on every render.
-        # This is not ideal, and should be optimized in the future.
-        container.innerHTML = ""
-        self.build_element_tree(layout, container, model)
+        # Use morphdom to update the DOM
+        morphdom.default(container, temp_container)
+
+        # Remove the cloned container to prevent memory leaks
+        temp_container.remove()
 
     def build_element_tree(self, layout, parent, model):
         """Recursively build an element tree, starting from the root component."""

src/reactpy_django/pyscript/layout_handler.py

@@ -4,5 +4,5 @@
 {% 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>
+<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>

src/reactpy_django/templates/reactpy/pyscript_setup.html

@@ -25,6 +25,7 @@
 from django.db.models.query import QuerySet
 from django.http import HttpRequest, HttpResponse
 from django.template import engines
+from django.templatetags.static import static
 from django.utils.encoding import smart_str
 from django.views import View
 from reactpy import vdom_to_html
@@ -62,13 +63,7 @@
 PYSCRIPT_LAYOUT_HANDLER = (
     Path(__file__).parent / "pyscript" / "layout_handler.py"
 ).read_text(encoding="utf-8")
-PYSCRIPT_DEFAULT_CONFIG = {
-    "packages": [
-        f"reactpy=={reactpy.__version__}",
-        f"jsonpointer=={jsonpointer.__version__}",
-        "ssl",
-    ]
-}
+PYSCRIPT_DEFAULT_CONFIG: dict[str, Any] = {}
 
 
 async def render_view(
@@ -503,6 +498,22 @@ def render_pyscript_template(file_paths: Sequence[str], uuid: str, root: str):
 
 def extend_pyscript_config(config: dict | str, extra_packages: Sequence) -> str:
     """Extends ReactPy's default PyScript config with user provided values."""
+    if not PYSCRIPT_DEFAULT_CONFIG:
+        # Need to perform this lazily in order to wait for static files to be available
+        PYSCRIPT_DEFAULT_CONFIG.update(
+            {
+                "packages": [
+                    f"reactpy=={reactpy.__version__}",
+                    f"jsonpointer=={jsonpointer.__version__}",
+                    "ssl",
+                ],
+                "js_modules": {
+                    "main": {
+                        static("reactpy_django/morphdom/morphdom-esm.js"): "morphdom"
+                    }
+                },
+            }
+        )
     pyscript_config = deepcopy(PYSCRIPT_DEFAULT_CONFIG)
     pyscript_config["packages"].extend(extra_packages)
     if config and isinstance(config, str):

src/reactpy_django/utils.py

@@ -8,7 +8,7 @@
 assert npm.call(["install"], cwd=str(js_dir)) == 0
 assert npm.call(["run", "build"], cwd=str(js_dir)) == 0
 
-# Make sure the the PyScript distribution is always available
+# Make sure the current PyScript distribution is always available
 pyscript_dist = js_dir / "node_modules" / "@pyscript" / "core" / "dist"
 pyscript_static_dir = (
     Path(__file__).parent.parent.parent
@@ -22,3 +22,18 @@
     pyscript_static_dir.mkdir()
 for file in pyscript_dist.iterdir():
     shutil.copy(file, pyscript_static_dir / file.name)
+
+# Make sure the current Morphdom distrubiton is always available
+morphdom_dist = js_dir / "node_modules" / "morphdom" / "dist"
+morphdom_static_dir = (
+    Path(__file__).parent.parent.parent
+    / "src"
+    / "reactpy_django"
+    / "static"
+    / "reactpy_django"
+    / "morphdom"
+)
+if not morphdom_static_dir.exists():
+    morphdom_static_dir.mkdir()
+for file in morphdom_dist.iterdir():
+    shutil.copy(file, morphdom_static_dir / file.name)