From 443238835b735fae9fc725914aca6cd65f0c4045 Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Thu, 14 Sep 2023 22:15:18 -0700
Subject: [PATCH] Functional preloading implementation

---
 src/js/package-lock.json                      | 101 +++++++++++++++---
 src/js/package.json                           |   3 +
 src/js/src/index.ts                           |   2 +-
 src/js/src/mount.tsx                          |  18 ++++
 src/js/tsconfig.json                          |   9 ++
 src/reactpy_django/config.py                  |   5 +
 .../templates/reactpy/component.html          |   2 +-
 src/reactpy_django/templatetags/reactpy.py    |  23 ++--
 tests/test_app/components.py                  |  39 -------
 tests/test_app/preload/__init__.py            |   0
 tests/test_app/preload/components.py          |  42 ++++++++
 tests/test_app/settings.py                    |   4 +
 tests/test_app/templates/preload.html         |  13 ++-
 13 files changed, 196 insertions(+), 65 deletions(-)
 create mode 100644 src/js/src/mount.tsx
 create mode 100644 tests/test_app/preload/__init__.py
 create mode 100644 tests/test_app/preload/components.py

diff --git a/src/js/package-lock.json b/src/js/package-lock.json
index 84321d16..f4ffe4f8 100644
--- a/src/js/package-lock.json
+++ b/src/js/package-lock.json
@@ -13,8 +13,11 @@
 				"@rollup/plugin-commonjs": "^24.0.1",
 				"@rollup/plugin-node-resolve": "^15.0.1",
 				"@rollup/plugin-replace": "^5.0.2",
+				"@types/react": "^17.0",
+				"@types/react-dom": "^17.0",
 				"prettier": "^3.0.2",
-				"rollup": "^3.28.1"
+				"rollup": "^3.28.1",
+				"typescript": "^4.9.5"
 			}
 		},
 		"node_modules/@jridgewell/sourcemap-codec": {
@@ -158,12 +161,44 @@
 			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.0.tgz",
 			"integrity": "sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ=="
 		},
+		"node_modules/@types/prop-types": {
+			"version": "15.7.5",
+			"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
+			"integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==",
+			"dev": true
+		},
+		"node_modules/@types/react": {
+			"version": "17.0.65",
+			"resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.65.tgz",
+			"integrity": "sha512-oxur785xZYHvnI7TRS61dXbkIhDPnGfsXKv0cNXR/0ml4SipRIFpSMzA7HMEfOywFwJ5AOnPrXYTEiTRUQeGlQ==",
+			"dev": true,
+			"dependencies": {
+				"@types/prop-types": "*",
+				"@types/scheduler": "*",
+				"csstype": "^3.0.2"
+			}
+		},
+		"node_modules/@types/react-dom": {
+			"version": "17.0.20",
+			"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.20.tgz",
+			"integrity": "sha512-4pzIjSxDueZZ90F52mU3aPoogkHIoSIDG+oQ+wQK7Cy2B9S+MvOqY0uEA/qawKz381qrEDkvpwyt8Bm31I8sbA==",
+			"dev": true,
+			"dependencies": {
+				"@types/react": "^17"
+			}
+		},
 		"node_modules/@types/resolve": {
 			"version": "1.20.2",
 			"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
 			"integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==",
 			"dev": true
 		},
+		"node_modules/@types/scheduler": {
+			"version": "0.16.3",
+			"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
+			"integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==",
+			"dev": true
+		},
 		"node_modules/balanced-match": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -197,6 +232,12 @@
 			"integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==",
 			"dev": true
 		},
+		"node_modules/csstype": {
+			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
+			"integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==",
+			"dev": true
+		},
 		"node_modules/deepmerge": {
 			"version": "4.2.2",
 			"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
@@ -389,7 +430,7 @@
 		"node_modules/object-assign": {
 			"version": "4.1.1",
 			"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-			"integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+			"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
 			"peer": true,
 			"engines": {
 				"node": ">=0.10.0"
@@ -521,16 +562,15 @@
 			"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
 		},
 		"node_modules/typescript": {
-			"version": "5.1.6",
-			"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.1.6.tgz",
-			"integrity": "sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==",
-			"peer": true,
+			"version": "4.9.5",
+			"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+			"integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
 			"bin": {
 				"tsc": "bin/tsc",
 				"tsserver": "bin/tsserver"
 			},
 			"engines": {
-				"node": ">=14.17"
+				"node": ">=4.2.0"
 			}
 		},
 		"node_modules/wrappy": {
@@ -618,12 +658,44 @@
 			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.0.tgz",
 			"integrity": "sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ=="
 		},
+		"@types/prop-types": {
+			"version": "15.7.5",
+			"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
+			"integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==",
+			"dev": true
+		},
+		"@types/react": {
+			"version": "17.0.65",
+			"resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.65.tgz",
+			"integrity": "sha512-oxur785xZYHvnI7TRS61dXbkIhDPnGfsXKv0cNXR/0ml4SipRIFpSMzA7HMEfOywFwJ5AOnPrXYTEiTRUQeGlQ==",
+			"dev": true,
+			"requires": {
+				"@types/prop-types": "*",
+				"@types/scheduler": "*",
+				"csstype": "^3.0.2"
+			}
+		},
+		"@types/react-dom": {
+			"version": "17.0.20",
+			"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.20.tgz",
+			"integrity": "sha512-4pzIjSxDueZZ90F52mU3aPoogkHIoSIDG+oQ+wQK7Cy2B9S+MvOqY0uEA/qawKz381qrEDkvpwyt8Bm31I8sbA==",
+			"dev": true,
+			"requires": {
+				"@types/react": "^17"
+			}
+		},
 		"@types/resolve": {
 			"version": "1.20.2",
 			"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
 			"integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==",
 			"dev": true
 		},
+		"@types/scheduler": {
+			"version": "0.16.3",
+			"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
+			"integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==",
+			"dev": true
+		},
 		"balanced-match": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -651,6 +723,12 @@
 			"integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==",
 			"dev": true
 		},
+		"csstype": {
+			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
+			"integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==",
+			"dev": true
+		},
 		"deepmerge": {
 			"version": "4.2.2",
 			"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
@@ -806,7 +884,7 @@
 		"object-assign": {
 			"version": "4.1.1",
 			"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-			"integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+			"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
 			"peer": true
 		},
 		"once": {
@@ -895,10 +973,9 @@
 			"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
 		},
 		"typescript": {
-			"version": "5.1.6",
-			"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.1.6.tgz",
-			"integrity": "sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==",
-			"peer": true
+			"version": "4.9.5",
+			"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+			"integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g=="
 		},
 		"wrappy": {
 			"version": "1.0.2",
diff --git a/src/js/package.json b/src/js/package.json
index 40596a0d..0c61ec46 100644
--- a/src/js/package.json
+++ b/src/js/package.json
@@ -13,6 +13,9 @@
 		"@rollup/plugin-commonjs": "^24.0.1",
 		"@rollup/plugin-node-resolve": "^15.0.1",
 		"@rollup/plugin-replace": "^5.0.2",
+		"@types/react": "^17.0",
+		"@types/react-dom": "^17.0",
+		"typescript": "^4.9.5",
 		"prettier": "^3.0.2",
 		"rollup": "^3.28.1"
 	},
diff --git a/src/js/src/index.ts b/src/js/src/index.ts
index 53d67c6f..56a85aac 100644
--- a/src/js/src/index.ts
+++ b/src/js/src/index.ts
@@ -1,4 +1,4 @@
-import { mount } from "@reactpy/client";
+import { mount } from "./mount";
 import { ReactPyDjangoClient } from "./client";
 
 export function mountComponent(
diff --git a/src/js/src/mount.tsx b/src/js/src/mount.tsx
new file mode 100644
index 00000000..feefd298
--- /dev/null
+++ b/src/js/src/mount.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import { render } from "react-dom";
+import { Layout } from "@reactpy/client/src/components";
+import { ReactPyDjangoClient } from "./client";
+
+export function mount(element: HTMLElement, client: ReactPyDjangoClient): void {
+  const preloadElement = document.getElementById(element.id + "-preload");
+  if (preloadElement) {
+    element.hidden = true;
+    client.onMessage("layout-update", ({ path, model }) => {
+      if (preloadElement) {
+        preloadElement.replaceWith(element);
+        element.hidden = false;
+      }
+    });
+  }
+  render(<Layout client={client} />, element);
+}
diff --git a/src/js/tsconfig.json b/src/js/tsconfig.json
index 7da4aa77..7e5ec6cb 100644
--- a/src/js/tsconfig.json
+++ b/src/js/tsconfig.json
@@ -3,5 +3,14 @@
         "target": "ES2017",
         "module": "esnext",
         "moduleResolution": "node",
+        "jsx": "react",
     },
+    "paths": {
+        "react": [
+            "./node_modules/preact/compat/"
+        ],
+        "react-dom": [
+            "./node_modules/preact/compat/"
+        ]
+    }
 }
diff --git a/src/reactpy_django/config.py b/src/reactpy_django/config.py
index dc350e2a..0e448c6f 100644
--- a/src/reactpy_django/config.py
+++ b/src/reactpy_django/config.py
@@ -107,3 +107,8 @@
     "REACTPY_RECONNECT_BACKOFF_MULTIPLIER",
     1.25,  # Default to 25% backoff per connection attempt
 )
+REACTPY_PRELOAD_DEFAULT: bool = getattr(
+    settings,
+    "REACTPY_PRELOAD_DEFAULT",
+    False,
+)
diff --git a/src/reactpy_django/templates/reactpy/component.html b/src/reactpy_django/templates/reactpy/component.html
index 418223b0..80e57304 100644
--- a/src/reactpy_django/templates/reactpy/component.html
+++ b/src/reactpy_django/templates/reactpy/component.html
@@ -5,7 +5,7 @@
 {% endif %}
 
 {% if not reactpy_failure %}
-{% if reactpy_preload %}<div id="{{ reactpy_uuid }}-preload">{{ reactpy_preload|safe }}</div>{% endif %}
+{% if reactpy_preload_html %}<div id="{{ reactpy_uuid }}-preload">{{ reactpy_preload_html|safe }}</div>{% endif %}
 <div id="{{ reactpy_uuid }}" class="{{ reactpy_class }}"></div>
 <script type="module" crossorigin="anonymous">
   import { mountComponent } from "{% static 'reactpy_django/client.js' %}";
diff --git a/src/reactpy_django/templatetags/reactpy.py b/src/reactpy_django/templatetags/reactpy.py
index 8801ea5b..396ec398 100644
--- a/src/reactpy_django/templatetags/reactpy.py
+++ b/src/reactpy_django/templatetags/reactpy.py
@@ -9,6 +9,7 @@
 from django.http import HttpRequest
 from django.urls import NoReverseMatch, reverse
 from reactpy.backend.hooks import ConnectionContext
+from reactpy.backend.types import Connection
 from reactpy.core.types import ComponentConstructor
 from reactpy.utils import vdom_to_html
 
@@ -35,7 +36,7 @@ def component(
     dotted_path: str,
     *args,
     host: str | None = None,
-    preload: str = "False",
+    preload: str = str(config.REACTPY_PRELOAD_DEFAULT),
     **kwargs,
 ):
     """This tag is used to embed an existing ReactPy component into your HTML template.
@@ -71,8 +72,7 @@ def component(
     class_ = kwargs.pop("class", "")
     component_has_args = args or kwargs
     user_component: ComponentConstructor | None = None
-    preload = strtobool(preload)
-    _preloaded_html = ""
+    _preload_html = ""
 
     # Validate the host
     if host and config.REACTPY_DEBUG_MODE:
@@ -108,8 +108,8 @@ def component(
             )
             return failure_context(dotted_path, e)
 
-    # Preload if requested
-    if preload:
+    # Preload the component, if requested
+    if strtobool(preload):
         if not is_local:
             msg = "Cannot preload non-local components."
             _logger.error(msg)
@@ -125,7 +125,7 @@ def component(
             "request context processor in settings.py:TEMPLATES['OPTIONS']['context_processors']?"
             _logger.error(msg)
             return failure_context(dotted_path, ComponentDoesNotExistError(msg))
-        _preloaded_html = preload_component(user_component, args, kwargs, request)
+        _preload_html = preload_component(user_component, args, kwargs, request)
 
     # Return the template rendering context
     return {
@@ -141,7 +141,7 @@ def component(
         "reactpy_reconnect_max_interval": config.REACTPY_RECONNECT_MAX_INTERVAL,
         "reactpy_reconnect_backoff_multiplier": config.REACTPY_RECONNECT_BACKOFF_MULTIPLIER,
         "reactpy_reconnect_max_retries": config.REACTPY_RECONNECT_MAX_RETRIES,
-        "reactpy_preload": _preloaded_html,
+        "reactpy_preload_html": _preload_html,
     }
 
 
@@ -175,7 +175,14 @@ def preload_component(
     user_component: ComponentConstructor, args, kwargs, request: HttpRequest
 ):
     with SyncLayout(
-        ConnectionContext(user_component(*args, **kwargs), value=request)
+        ConnectionContext(
+            user_component(*args, **kwargs),
+            value=Connection(
+                scope=getattr(request, "scope", {}),
+                location=request.path,
+                carrier=request,
+            ),
+        )
     ) as layout:
         vdom_tree = layout.render()["model"]
 
diff --git a/tests/test_app/components.py b/tests/test_app/components.py
index 58ad61d7..ec53c031 100644
--- a/tests/test_app/components.py
+++ b/tests/test_app/components.py
@@ -1,7 +1,6 @@
 import asyncio
 import inspect
 from pathlib import Path
-from time import sleep
 
 import reactpy_django
 from channels.db import database_sync_to_async
@@ -618,41 +617,3 @@ def broken_postprocessor_query():
     mtm = relational_parent.data.many_to_many.all()
 
     return html.div(f"This should have failed! Something went wrong: {mtm}")
-
-
-@component
-def preload_string():
-    scope = reactpy_django.hooks.use_scope()
-
-    sleep(1)
-    return (
-        "Render Stage: Final"
-        if scope.get("type") == "websocket"
-        else "Render Stage: Preload"
-    )
-
-
-@component
-def preload_vdom():
-    scope = reactpy_django.hooks.use_scope()
-
-    if scope.get("type") == "http":
-        return html.div("Render Stage: Preload")
-
-    sleep(1)
-    return html.div("Render Stage: Final")
-
-
-@component
-def preload_component():
-    scope = reactpy_django.hooks.use_scope()
-
-    @component
-    def inner(value):
-        return html.div(value)
-
-    if scope.get("type") == "http":
-        return inner("Render Stage: Preload")
-
-    sleep(1)
-    return inner("Render Stage: Final")
diff --git a/tests/test_app/preload/__init__.py b/tests/test_app/preload/__init__.py
new file mode 100644
index 00000000..e69de29b
diff --git a/tests/test_app/preload/components.py b/tests/test_app/preload/components.py
new file mode 100644
index 00000000..7aee80da
--- /dev/null
+++ b/tests/test_app/preload/components.py
@@ -0,0 +1,42 @@
+from time import sleep
+
+import reactpy_django
+from reactpy import component, html
+
+
+@component
+def preload_string():
+    scope = reactpy_django.hooks.use_scope()
+
+    sleep(1)
+    return (
+        "preload_string: Fully Rendered"
+        if scope.get("type") == "websocket"
+        else "preload_string: Preloaded"
+    )
+
+
+@component
+def preload_vdom():
+    scope = reactpy_django.hooks.use_scope()
+
+    if scope.get("type") == "http":
+        return html.div("preload_vdom: Preloaded")
+
+    sleep(1)
+    return html.div("preload_vdom: Fully Rendered")
+
+
+@component
+def preload_component():
+    scope = reactpy_django.hooks.use_scope()
+
+    @component
+    def inner(value):
+        return html.div(value)
+
+    if scope.get("type") == "http":
+        return inner("preload_component: Preloaded")
+
+    sleep(1)
+    return inner("preload_component: Fully Rendered ")
diff --git a/tests/test_app/settings.py b/tests/test_app/settings.py
index df552e42..2979b050 100644
--- a/tests/test_app/settings.py
+++ b/tests/test_app/settings.py
@@ -177,6 +177,10 @@
             "handlers": ["console"],
             "level": LOG_LEVEL,
         },
+        "reactpy": {
+            "handlers": ["console"],
+            "level": LOG_LEVEL,
+        },
     },
 }
 
diff --git a/tests/test_app/templates/preload.html b/tests/test_app/templates/preload.html
index e753cced..4a172974 100644
--- a/tests/test_app/templates/preload.html
+++ b/tests/test_app/templates/preload.html
@@ -12,13 +12,18 @@
 
 <body>
     <h1>ReactPy Preload Test Page</h1>
-
     <hr>
-    {% component "test_app.components.preload_string" class="preload-string" preload="true" %}
+    <div id="preload_string">
+        {% component "test_app.preload.components.preload_string" class="preload-string" preload="true" %}
+    </div>
     <hr>
-    {% component "test_app.components.preload_vdom" class="preload-vdom" preload="true" %}
+    <div id="preload_vdom">
+        {% component "test_app.preload.components.preload_vdom" class="preload-vdom" preload="true" %}
+    </div>
     <hr>
-    {% component "test_app.components.preload_component" class="preload-component" preload="true" %}
+    <div clas="preload_component">
+        {% component "test_app.preload.components.preload_component" class="preload-component" preload="true" %}
+    </div>
     <hr>
 </body>