From 14b92ee71fbba6029b188002950d7c6aa6a50edf Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Thu, 14 Sep 2023 18:57:28 -0700
Subject: [PATCH 01/20] Quick draft of preloading

---
 .../templates/reactpy/component.html          |  8 ++--
 src/reactpy_django/templatetags/reactpy.py    | 39 ++++++++++++++++++-
 src/reactpy_django/utils.py                   | 18 +++++++++
 tests/test_app/components.py                  | 39 +++++++++++++++++++
 tests/test_app/templates/preload.html         | 25 ++++++++++++
 tests/test_app/urls.py                        | 10 +++--
 tests/test_app/views.py                       |  4 ++
 7 files changed, 135 insertions(+), 8 deletions(-)
 create mode 100644 tests/test_app/templates/preload.html

diff --git a/src/reactpy_django/templates/reactpy/component.html b/src/reactpy_django/templates/reactpy/component.html
index 75a65dbe..418223b0 100644
--- a/src/reactpy_django/templates/reactpy/component.html
+++ b/src/reactpy_django/templates/reactpy/component.html
@@ -1,9 +1,11 @@
 {% load static %}
-{% if reactpy_failure %}
-{% if reactpy_debug_mode %}
+
+{% if reactpy_failure and reactpy_debug_mode %}
 <b>{% firstof reactpy_error "UnknownError" %}:</b> "{% firstof reactpy_dotted_path "UnknownPath" %}"
 {% endif %}
-{% else %}
+
+{% if not reactpy_failure %}
+{% if reactpy_preload %}<div id="{{ reactpy_uuid }}-preload">{{ reactpy_preload|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 82640ced..8801ea5b 100644
--- a/src/reactpy_django/templatetags/reactpy.py
+++ b/src/reactpy_django/templatetags/reactpy.py
@@ -1,5 +1,6 @@
 from __future__ import annotations
 
+from distutils.util import strtobool
 from logging import getLogger
 from uuid import uuid4
 
@@ -7,7 +8,9 @@
 from django import template
 from django.http import HttpRequest
 from django.urls import NoReverseMatch, reverse
+from reactpy.backend.hooks import ConnectionContext
 from reactpy.core.types import ComponentConstructor
+from reactpy.utils import vdom_to_html
 
 from reactpy_django import config, models
 from reactpy_django.exceptions import (
@@ -16,7 +19,7 @@
     InvalidHostError,
 )
 from reactpy_django.types import ComponentParams
-from reactpy_django.utils import validate_component_args
+from reactpy_django.utils import SyncLayout, validate_component_args
 
 try:
     RESOLVED_WEB_MODULES_PATH = reverse("reactpy:web_modules", args=["/"]).strip("/")
@@ -32,6 +35,7 @@ def component(
     dotted_path: str,
     *args,
     host: str | None = None,
+    preload: str = "False",
     **kwargs,
 ):
     """This tag is used to embed an existing ReactPy component into your HTML template.
@@ -67,6 +71,8 @@ def component(
     class_ = kwargs.pop("class", "")
     component_has_args = args or kwargs
     user_component: ComponentConstructor | None = None
+    preload = strtobool(preload)
+    _preloaded_html = ""
 
     # Validate the host
     if host and config.REACTPY_DEBUG_MODE:
@@ -102,6 +108,25 @@ def component(
             )
             return failure_context(dotted_path, e)
 
+    # Preload if requested
+    if preload:
+        if not is_local:
+            msg = "Cannot preload non-local components."
+            _logger.error(msg)
+            return failure_context(dotted_path, ComponentDoesNotExistError(msg))
+        if not user_component:
+            msg = "Cannot preload component that is not registered."
+            _logger.error(msg)
+            return failure_context(dotted_path, ComponentDoesNotExistError(msg))
+        if not request:
+            msg = (
+                "Cannot preload component without a HTTP request. Are you missing the "
+            )
+            "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)
+
     # Return the template rendering context
     return {
         "reactpy_class": class_,
@@ -116,6 +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,
     }
 
 
@@ -143,3 +169,14 @@ def validate_host(host: str):
         )
         _logger.error(msg)
         raise InvalidHostError(msg)
+
+
+def preload_component(
+    user_component: ComponentConstructor, args, kwargs, request: HttpRequest
+):
+    with SyncLayout(
+        ConnectionContext(user_component(*args, **kwargs), value=request)
+    ) as layout:
+        vdom_tree = layout.render()["model"]
+
+    return vdom_to_html(vdom_tree)
diff --git a/src/reactpy_django/utils.py b/src/reactpy_django/utils.py
index 755b3a05..5d408068 100644
--- a/src/reactpy_django/utils.py
+++ b/src/reactpy_django/utils.py
@@ -11,6 +11,7 @@
 from inspect import iscoroutinefunction
 from typing import Any, Callable, Sequence
 
+from asgiref.sync import async_to_sync
 from channels.db import database_sync_to_async
 from django.db.models import ManyToManyField, ManyToOneRel, prefetch_related_objects
 from django.db.models.base import Model
@@ -20,6 +21,7 @@
 from django.utils import timezone
 from django.utils.encoding import smart_str
 from django.views import View
+from reactpy.core.layout import Layout
 from reactpy.types import ComponentConstructor
 
 from reactpy_django.exceptions import ComponentDoesNotExistError, ComponentParamError
@@ -352,3 +354,19 @@ def delete_expired_sessions(immediate: bool = False):
                 "This may indicate a performance issue with your system, cache, or database.",
                 clean_duration.total_seconds(),
             )
+
+
+class SyncLayout(Layout):
+    """Sync adapter for ReactPy's `Layout`. Allows it to be used in Django template tags.
+    This can be removed when Django supports async template tags.
+    """
+
+    def __enter__(self):
+        async_to_sync(self.__aenter__)()
+        return self
+
+    def __exit__(self, *_):
+        async_to_sync(self.__aexit__)(*_)
+
+    def render(self):
+        return async_to_sync(super().render)()
diff --git a/tests/test_app/components.py b/tests/test_app/components.py
index ec53c031..58ad61d7 100644
--- a/tests/test_app/components.py
+++ b/tests/test_app/components.py
@@ -1,6 +1,7 @@
 import asyncio
 import inspect
 from pathlib import Path
+from time import sleep
 
 import reactpy_django
 from channels.db import database_sync_to_async
@@ -617,3 +618,41 @@ 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/templates/preload.html b/tests/test_app/templates/preload.html
new file mode 100644
index 00000000..e753cced
--- /dev/null
+++ b/tests/test_app/templates/preload.html
@@ -0,0 +1,25 @@
+{% load static %} {% load reactpy %}
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <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>
+</head>
+
+<body>
+    <h1>ReactPy Preload Test Page</h1>
+
+    <hr>
+    {% component "test_app.components.preload_string" class="preload-string" preload="true" %}
+    <hr>
+    {% component "test_app.components.preload_vdom" class="preload-vdom" preload="true" %}
+    <hr>
+    {% component "test_app.components.preload_component" class="preload-component" preload="true" %}
+    <hr>
+</body>
+
+</html>
diff --git a/tests/test_app/urls.py b/tests/test_app/urls.py
index ea185971..c40105ca 100644
--- a/tests/test_app/urls.py
+++ b/tests/test_app/urls.py
@@ -20,7 +20,7 @@
 from django.contrib import admin
 from django.urls import include, path
 
-from .views import base_template, host_port_roundrobin_template, host_port_template
+from . import views
 
 
 class AccessUser:
@@ -30,11 +30,13 @@ class AccessUser:
 admin.site.has_permission = lambda r: setattr(r, "user", AccessUser()) or True  # type: ignore
 
 urlpatterns = [
-    path("", base_template),
-    path("port/<int:port>/", host_port_template),
+    path("", views.base_template),
+    path("port/<int:port>/", views.host_port_template),
     path(
-        "roundrobin/<int:port1>/<int:port2>/<int:count>/", host_port_roundrobin_template
+        "roundrobin/<int:port1>/<int:port2>/<int:count>/",
+        views.host_port_roundrobin_template,
     ),
+    path("preload/", views.preload),
     path("", include("test_app.performance.urls")),
     path("reactpy/", include("reactpy_django.http.urls")),
     path("admin/", admin.site.urls),
diff --git a/tests/test_app/views.py b/tests/test_app/views.py
index 689d8f8c..d240d8ba 100644
--- a/tests/test_app/views.py
+++ b/tests/test_app/views.py
@@ -174,3 +174,7 @@ def view_to_component_kwargs(request, success="false"):
             "status": success,
         },
     )
+
+
+def preload(request):
+    return render(request, "preload.html", {})

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 02/20] 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>
 

From d1fe1c403b4f5eecea5a659fcda689300ba4495a Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Thu, 14 Sep 2023 22:45:29 -0700
Subject: [PATCH 03/20] use_origin and use_connection support

---
 src/reactpy_django/hooks.py | 26 ++++++++++++++++++--------
 src/reactpy_django/types.py |  3 ++-
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/reactpy_django/hooks.py b/src/reactpy_django/hooks.py
index c60bbf1c..f74f53d8 100644
--- a/src/reactpy_django/hooks.py
+++ b/src/reactpy_django/hooks.py
@@ -48,14 +48,24 @@ def use_origin() -> str | None:
     this will be None."""
     scope = _use_scope()
     try:
-        return next(
-            (
-                header[1].decode("utf-8")
-                for header in scope["headers"]
-                if header[0] == b"origin"
-            ),
-            None,
-        )
+        if scope["type"] == "websocket":
+            return next(
+                (
+                    header[1].decode("utf-8")
+                    for header in scope["headers"]
+                    if header[0] == b"origin"
+                ),
+                None,
+            )
+        if scope["type"] == "http":
+            host = next(
+                (
+                    header[1].decode("utf-8")
+                    for header in scope["headers"]
+                    if header[0] == b"host"
+                )
+            )
+            return f"{scope['scheme']}://{host}" if host else None
     except Exception:
         return None
 
diff --git a/src/reactpy_django/types.py b/src/reactpy_django/types.py
index 233fe432..251efc15 100644
--- a/src/reactpy_django/types.py
+++ b/src/reactpy_django/types.py
@@ -16,6 +16,7 @@
 
 from django.db.models.base import Model
 from django.db.models.query import QuerySet
+from django.http import HttpRequest
 from django.views.generic import View
 from reactpy.types import Connection as _Connection
 from typing_extensions import ParamSpec
@@ -50,7 +51,7 @@ class ComponentWebsocket:
     dotted_path: str
 
 
-Connection = _Connection[ComponentWebsocket]
+Connection = _Connection[ComponentWebsocket | HttpRequest]
 
 
 @dataclass

From 48418fe55ea557fc7b1f9c86931477cf646cfeca Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Thu, 14 Sep 2023 22:58:44 -0700
Subject: [PATCH 04/20] use_location support

---
 src/reactpy_django/templatetags/reactpy.py | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/reactpy_django/templatetags/reactpy.py b/src/reactpy_django/templatetags/reactpy.py
index 396ec398..7f0a64d8 100644
--- a/src/reactpy_django/templatetags/reactpy.py
+++ b/src/reactpy_django/templatetags/reactpy.py
@@ -9,7 +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.backend.types import Connection, Location
 from reactpy.core.types import ComponentConstructor
 from reactpy.utils import vdom_to_html
 
@@ -174,12 +174,15 @@ def validate_host(host: str):
 def preload_component(
     user_component: ComponentConstructor, args, kwargs, request: HttpRequest
 ):
+    search = request.GET.urlencode()
     with SyncLayout(
         ConnectionContext(
             user_component(*args, **kwargs),
             value=Connection(
                 scope=getattr(request, "scope", {}),
-                location=request.path,
+                location=Location(
+                    pathname=request.path, search=f"?{search}" if search else ""
+                ),
                 carrier=request,
             ),
         )

From 7177cfe9eb53bdedebf5b6810c51aece29a3861f Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Thu, 14 Sep 2023 22:59:42 -0700
Subject: [PATCH 05/20] fix types

---
 src/reactpy_django/hooks.py | 3 ++-
 src/reactpy_django/types.py | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/reactpy_django/hooks.py b/src/reactpy_django/hooks.py
index f74f53d8..8115de56 100644
--- a/src/reactpy_django/hooks.py
+++ b/src/reactpy_django/hooks.py
@@ -67,7 +67,8 @@ def use_origin() -> str | None:
             )
             return f"{scope['scheme']}://{host}" if host else None
     except Exception:
-        return None
+        _logger.info("Failed to get origin")
+    return None
 
 
 def use_scope() -> dict[str, Any]:
diff --git a/src/reactpy_django/types.py b/src/reactpy_django/types.py
index 251efc15..3c77a1eb 100644
--- a/src/reactpy_django/types.py
+++ b/src/reactpy_django/types.py
@@ -51,7 +51,7 @@ class ComponentWebsocket:
     dotted_path: str
 
 
-Connection = _Connection[ComponentWebsocket | HttpRequest]
+Connection = _Connection[Union[ComponentWebsocket, HttpRequest]]
 
 
 @dataclass

From b394e0a61e986dddb2f16af0bdc789150648c74d Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Thu, 14 Sep 2023 23:18:49 -0700
Subject: [PATCH 06/20] ComponentCarrierError

---
 src/reactpy_django/exceptions.py           | 4 ++++
 src/reactpy_django/templatetags/reactpy.py | 5 +++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/reactpy_django/exceptions.py b/src/reactpy_django/exceptions.py
index 5cdcb719..49c6fef3 100644
--- a/src/reactpy_django/exceptions.py
+++ b/src/reactpy_django/exceptions.py
@@ -8,3 +8,7 @@ class ComponentDoesNotExistError(AttributeError):
 
 class InvalidHostError(ValueError):
     ...
+
+
+class ComponentCarrierError(ValueError):
+    ...
diff --git a/src/reactpy_django/templatetags/reactpy.py b/src/reactpy_django/templatetags/reactpy.py
index 7f0a64d8..41d2414a 100644
--- a/src/reactpy_django/templatetags/reactpy.py
+++ b/src/reactpy_django/templatetags/reactpy.py
@@ -15,6 +15,7 @@
 
 from reactpy_django import config, models
 from reactpy_django.exceptions import (
+    ComponentCarrierError,
     ComponentDoesNotExistError,
     ComponentParamError,
     InvalidHostError,
@@ -121,10 +122,10 @@ def component(
         if not request:
             msg = (
                 "Cannot preload component without a HTTP request. Are you missing the "
+                "request context processor in settings.py:TEMPLATES['OPTIONS']['context_processors']?"
             )
-            "request context processor in settings.py:TEMPLATES['OPTIONS']['context_processors']?"
             _logger.error(msg)
-            return failure_context(dotted_path, ComponentDoesNotExistError(msg))
+            return failure_context(dotted_path, ComponentCarrierError(msg))
         _preload_html = preload_component(user_component, args, kwargs, request)
 
     # Return the template rendering context

From 36cd46789ada7ccb070d45aa8141dbfb68ff5d51 Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Fri, 15 Sep 2023 00:16:41 -0700
Subject: [PATCH 07/20] add tests

---
 tests/test_app/preload/components.py    |  6 ++---
 tests/test_app/preload/urls.py          |  7 ++++++
 tests/test_app/preload/views.py         |  5 ++++
 tests/test_app/settings.py              |  1 +
 tests/test_app/templates/preload.html   |  2 +-
 tests/test_app/tests/test_components.py | 32 +++++++++++++++++++++++++
 tests/test_app/urls.py                  |  2 +-
 tests/test_app/views.py                 |  4 ----
 8 files changed, 49 insertions(+), 10 deletions(-)
 create mode 100644 tests/test_app/preload/urls.py
 create mode 100644 tests/test_app/preload/views.py

diff --git a/tests/test_app/preload/components.py b/tests/test_app/preload/components.py
index 7aee80da..abca35cf 100644
--- a/tests/test_app/preload/components.py
+++ b/tests/test_app/preload/components.py
@@ -8,7 +8,7 @@
 def preload_string():
     scope = reactpy_django.hooks.use_scope()
 
-    sleep(1)
+    sleep(0.5)
     return (
         "preload_string: Fully Rendered"
         if scope.get("type") == "websocket"
@@ -23,7 +23,6 @@ def preload_vdom():
     if scope.get("type") == "http":
         return html.div("preload_vdom: Preloaded")
 
-    sleep(1)
     return html.div("preload_vdom: Fully Rendered")
 
 
@@ -38,5 +37,4 @@ def inner(value):
     if scope.get("type") == "http":
         return inner("preload_component: Preloaded")
 
-    sleep(1)
-    return inner("preload_component: Fully Rendered ")
+    return inner("preload_component: Fully Rendered")
diff --git a/tests/test_app/preload/urls.py b/tests/test_app/preload/urls.py
new file mode 100644
index 00000000..50fcf956
--- /dev/null
+++ b/tests/test_app/preload/urls.py
@@ -0,0 +1,7 @@
+from django.urls import path
+
+from .views import preload
+
+urlpatterns = [
+    path("preload/", preload),
+]
diff --git a/tests/test_app/preload/views.py b/tests/test_app/preload/views.py
new file mode 100644
index 00000000..16f4f32e
--- /dev/null
+++ b/tests/test_app/preload/views.py
@@ -0,0 +1,5 @@
+from django.shortcuts import render
+
+
+def preload(request):
+    return render(request, "preload.html", {})
diff --git a/tests/test_app/settings.py b/tests/test_app/settings.py
index 2979b050..6d4574c3 100644
--- a/tests/test_app/settings.py
+++ b/tests/test_app/settings.py
@@ -159,6 +159,7 @@
     "django.contrib.staticfiles.finders.AppDirectoriesFinder",
 ]
 
+
 # Logging
 LOG_LEVEL = "WARNING"
 if DEBUG and ("test" not in sys.argv):
diff --git a/tests/test_app/templates/preload.html b/tests/test_app/templates/preload.html
index 4a172974..c23d85b7 100644
--- a/tests/test_app/templates/preload.html
+++ b/tests/test_app/templates/preload.html
@@ -21,7 +21,7 @@ <h1>ReactPy Preload Test Page</h1>
         {% component "test_app.preload.components.preload_vdom" class="preload-vdom" preload="true" %}
     </div>
     <hr>
-    <div clas="preload_component">
+    <div id="preload_component">
         {% component "test_app.preload.components.preload_component" class="preload-component" preload="true" %}
     </div>
     <hr>
diff --git a/tests/test_app/tests/test_components.py b/tests/test_app/tests/test_components.py
index d05ab46c..a7a9be98 100644
--- a/tests/test_app/tests/test_components.py
+++ b/tests/test_app/tests/test_components.py
@@ -4,6 +4,7 @@
 import sys
 from distutils.util import strtobool
 from functools import partial
+from time import sleep
 
 from channels.testing import ChannelsLiveServerTestCase
 from channels.testing.live import make_application
@@ -375,3 +376,34 @@ def test_broken_postprocessor_query(self):
         broken_component = self.page.locator("#broken_postprocessor_query pre")
         broken_component.wait_for()
         self.assertIn("SynchronousOnlyOperation:", broken_component.text_content())
+
+    def test_preload(self):
+        """Verify if round-robin host selection is working."""
+        new_page = self.browser.new_page()
+        try:
+            new_page.goto(f"{self.live_server_url}/preload/")
+            string = new_page.locator("#preload_string")
+            vdom = new_page.locator("#preload_vdom")
+            component = new_page.locator("#preload_component")
+
+            string.wait_for()
+            vdom.wait_for()
+            component.wait_for()
+
+            # Check if the preload occurred
+            self.assertEqual(string.all_inner_texts(), ["preload_string: Preloaded"])
+            self.assertEqual(vdom.all_inner_texts(), ["preload_vdom: Preloaded"])
+            self.assertEqual(
+                component.all_inner_texts(), ["preload_component: Preloaded"]
+            )
+
+            sleep(1)
+            self.assertEqual(
+                string.all_inner_texts(), ["preload_string: Fully Rendered"]
+            )
+            self.assertEqual(vdom.all_inner_texts(), ["preload_vdom: Fully Rendered"])
+            self.assertEqual(
+                component.all_inner_texts(), ["preload_component: Fully Rendered"]
+            )
+        finally:
+            new_page.close()
diff --git a/tests/test_app/urls.py b/tests/test_app/urls.py
index c40105ca..33f4eb38 100644
--- a/tests/test_app/urls.py
+++ b/tests/test_app/urls.py
@@ -36,7 +36,7 @@ class AccessUser:
         "roundrobin/<int:port1>/<int:port2>/<int:count>/",
         views.host_port_roundrobin_template,
     ),
-    path("preload/", views.preload),
+    path("", include("test_app.preload.urls")),
     path("", include("test_app.performance.urls")),
     path("reactpy/", include("reactpy_django.http.urls")),
     path("admin/", admin.site.urls),
diff --git a/tests/test_app/views.py b/tests/test_app/views.py
index d240d8ba..689d8f8c 100644
--- a/tests/test_app/views.py
+++ b/tests/test_app/views.py
@@ -174,7 +174,3 @@ def view_to_component_kwargs(request, success="false"):
             "status": success,
         },
     )
-
-
-def preload(request):
-    return render(request, "preload.html", {})

From deb0365cc437829f4fcea9396dda3c2330afdcdf Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Fri, 15 Sep 2023 00:16:45 -0700
Subject: [PATCH 08/20] add changelog

---
 CHANGELOG.md | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c0c95928..a6b7fb6d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -32,6 +32,14 @@ Using the following categories, list your changes in this order:
 
 <!--changelog-start-->
 
+## [Unreleased]
+
+### Added
+
+-   ReactPy components can now use SEO compatible rendering!
+    -   `settings.py:REACTPY_PRELOAD_DEFAULT` can be set to `True` to enable this behavior by default
+    -   Or, you can enable it on individual components via the template tag: `{% component "..." preload="True" %}`
+
 ## [3.5.1] - 2023-09-07
 
 ### Added

From 43d06c3bf4414eb5e7bfc83fa1b67876f0b2a052 Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Fri, 15 Sep 2023 00:21:11 -0700
Subject: [PATCH 09/20] migrate docs changes from my other branch to this one

---
 docs/src/assets/css/admonition.css | 30 +++++++++++++++---------------
 docs/src/assets/css/code.css       |  2 +-
 docs/src/assets/css/main.css       |  4 ++--
 docs/src/assets/css/navbar.css     | 24 ++++++++++++++++++++----
 docs/src/assets/css/sidebar.css    |  2 +-
 mkdocs.yml                         |  2 +-
 6 files changed, 40 insertions(+), 24 deletions(-)

diff --git a/docs/src/assets/css/admonition.css b/docs/src/assets/css/admonition.css
index f71fa55a..7813830c 100644
--- a/docs/src/assets/css/admonition.css
+++ b/docs/src/assets/css/admonition.css
@@ -1,20 +1,20 @@
 [data-md-color-scheme="slate"] {
 	--admonition-border-color: transparent;
 	--admonition-expanded-border-color: rgba(255, 255, 255, 0.1);
-	--note-bg-color: rgb(43 110 98/ 0.2);
+	--note-bg-color: rgba(43, 110, 98, 0.2);
 	--terminal-bg-color: #0c0c0c;
 	--terminal-title-bg-color: #000;
-	--deep-dive-bg-color: rgb(43 52 145 / 0.2);
+	--deep-dive-bg-color: rgba(43, 52, 145, 0.2);
 	--you-will-learn-bg-color: #353a45;
-	--pitfall-bg-color: rgb(182 87 0 / 0.2);
+	--pitfall-bg-color: rgba(182, 87, 0, 0.2);
 }
 [data-md-color-scheme="default"] {
 	--admonition-border-color: rgba(0, 0, 0, 0.08);
 	--admonition-expanded-border-color: var(--admonition-border-color);
-	--note-bg-color: rgb(244 251 249);
-	--terminal-bg-color: rgb(64 71 86);
-	--terminal-title-bg-color: rgb(35 39 47);
-	--deep-dive-bg-color: rgb(243 244 253);
+	--note-bg-color: rgb(244, 251, 249);
+	--terminal-bg-color: rgb(64, 71, 86);
+	--terminal-title-bg-color: rgb(35, 39, 47);
+	--deep-dive-bg-color: rgb(243, 244, 253);
 	--you-will-learn-bg-color: rgb(246, 247, 249);
 	--pitfall-bg-color: rgb(254, 245, 231);
 }
@@ -81,12 +81,12 @@ React Name: "Note"
 	font-size: 1rem;
 	background: transparent;
 	padding-bottom: 0;
-	color: rgb(68 172 153);
+	color: rgb(68, 172, 153);
 }
 
 .md-typeset .note .admonition-title:before {
 	font-size: 1.1rem;
-	background: rgb(68 172 153);
+	background: rgb(68, 172, 153);
 }
 
 .md-typeset .note > .admonition-title:before,
@@ -109,12 +109,12 @@ React Name: "Pitfall"
 	font-size: 1rem;
 	background: transparent;
 	padding-bottom: 0;
-	color: rgb(219 125 39);
+	color: rgb(219, 125, 39);
 }
 
 .md-typeset .warning .admonition-title:before {
 	font-size: 1.1rem;
-	background: rgb(219 125 39);
+	background: rgb(219, 125, 39);
 }
 
 /* 
@@ -131,12 +131,12 @@ React Name: "Deep Dive"
 	font-size: 1rem;
 	background: transparent;
 	padding-bottom: 0;
-	color: rgb(136 145 236);
+	color: rgb(136, 145, 236);
 }
 
 .md-typeset .info .admonition-title:before {
 	font-size: 1.1rem;
-	background: rgb(136 145 236);
+	background: rgb(136, 145, 236);
 }
 
 /* 
@@ -152,11 +152,11 @@ React Name: "Terminal"
 
 .md-typeset .example .admonition-title {
 	background: var(--terminal-title-bg-color);
-	color: rgb(246 247 249);
+	color: rgb(246, 247, 249);
 }
 
 .md-typeset .example .admonition-title:before {
-	background: rgb(246 247 249);
+	background: rgb(246, 247, 249);
 }
 
 .md-typeset .admonition.example code {
diff --git a/docs/src/assets/css/code.css b/docs/src/assets/css/code.css
index d1556dc0..c5465498 100644
--- a/docs/src/assets/css/code.css
+++ b/docs/src/assets/css/code.css
@@ -9,7 +9,7 @@
 	--md-code-hl-color: #ffffcf1c;
 	--md-code-bg-color: #16181d;
 	--md-code-hl-comment-color: hsla(var(--md-hue), 75%, 90%, 0.43);
-	--code-tab-color: rgb(52 58 70);
+	--code-tab-color: rgb(52, 58, 70);
 	--md-code-hl-name-color: #aadafc;
 	--md-code-hl-string-color: hsl(21 49% 63% / 1);
 	--md-code-hl-keyword-color: hsl(289.67deg 35% 60%);
diff --git a/docs/src/assets/css/main.css b/docs/src/assets/css/main.css
index 500ae4be..da5a74c4 100644
--- a/docs/src/assets/css/main.css
+++ b/docs/src/assets/css/main.css
@@ -3,7 +3,7 @@
 	--reactpy-color: #58b962;
 	--reactpy-color-dark: #42914a;
 	--reactpy-color-darker: #34743b;
-	--reactpy-color-opacity-10: rgb(88 185 98 / 10%);
+	--reactpy-color-opacity-10: rgba(88, 185, 98, 0.1);
 }
 
 [data-md-color-accent="red"] {
@@ -12,7 +12,7 @@
 }
 
 [data-md-color-scheme="slate"] {
-	--md-default-bg-color: rgb(35 39 47);
+	--md-default-bg-color: rgb(35, 39, 47);
 	--md-default-bg-color--light: hsla(var(--md-hue), 15%, 16%, 0.54);
 	--md-default-bg-color--lighter: hsla(var(--md-hue), 15%, 16%, 0.26);
 	--md-default-bg-color--lightest: hsla(var(--md-hue), 15%, 16%, 0.07);
diff --git a/docs/src/assets/css/navbar.css b/docs/src/assets/css/navbar.css
index 4f0db7fa..33e8b14f 100644
--- a/docs/src/assets/css/navbar.css
+++ b/docs/src/assets/css/navbar.css
@@ -1,9 +1,11 @@
 [data-md-color-scheme="slate"] {
 	--md-header-border-color: rgb(255 255 255 / 5%);
+	--md-version-bg-color: #ffffff0d;
 }
 
 [data-md-color-scheme="default"] {
 	--md-header-border-color: rgb(0 0 0 / 7%);
+	--md-version-bg-color: #ae58ee2e;
 }
 
 .md-header {
@@ -28,12 +30,20 @@
 }
 
 .md-version__list {
-	margin: 0.2rem -0.8rem;
+	margin: 0;
+	left: 0;
+	right: 0;
+	top: 2.5rem;
 }
 
-[dir="ltr"] .md-header__title.md-header__title--active {
-	margin: 0;
-	transition: margin 0.35s ease;
+.md-version {
+	background: var(--md-version-bg-color);
+	border-radius: 999px;
+	padding: 0 0.8rem;
+	margin: 0.3rem 0;
+	height: 1.8rem;
+	display: flex;
+	font-size: 0.7rem;
 }
 
 /* Mobile Styling */
@@ -97,6 +107,12 @@
 	.md-header__topic {
 		position: relative;
 	}
+	.md-header__title--active .md-header__topic {
+		transform: none;
+		opacity: 1;
+		pointer-events: auto;
+		z-index: 4;
+	}
 
 	/* Search */
 	.md-search {
diff --git a/docs/src/assets/css/sidebar.css b/docs/src/assets/css/sidebar.css
index aeadf3b5..bf197138 100644
--- a/docs/src/assets/css/sidebar.css
+++ b/docs/src/assets/css/sidebar.css
@@ -28,7 +28,7 @@
 	}
 
 	.md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link {
-		color: rgb(133 142 159);
+		color: rgb(133, 142, 159);
 		margin: 0.5rem;
 	}
 
diff --git a/mkdocs.yml b/mkdocs.yml
index e4e19c65..9269b109 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -112,7 +112,7 @@ watch:
 
 site_name: ReactPy-Django
 site_author: Archmonger
-site_description: It's React, but in Python. Now for Django developers.
+site_description: It's React, but in Python. Now with Django integration.
 copyright: Copyright &copy; 2023 Reactive Python.<div class="legal-footer-right">This project has no affiliation to ReactJS or Meta Platforms, Inc.</div>
 repo_url: https://github.com/reactive-python/reactpy-django
 site_url: https://reactive-python.github.io/reactpy-django

From aebbd57a9009264de4ae69358a07ed033294602b Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Fri, 15 Sep 2023 00:36:38 -0700
Subject: [PATCH 10/20] Update pull request template

---
 .github/pull_request_template.md | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
index f237e91d..7e988149 100644
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -1,5 +1,3 @@
-*By submitting this pull request you agree that all contributions to this project are made under the MIT license.*
-
 ## Description
 
 A summary of the changes.
@@ -8,6 +6,9 @@ A summary of the changes.
 
 Please update this checklist as you complete each item:
 
--   [ ] Tests have been included for all bug fixes or added functionality.
--   [ ] The changelog has been updated with any significant changes, if necessary.
--   [ ] GitHub Issues which may be closed by this PR have been linked.
+-   [ ] Tests have been developed for bug fixes or new functionality.
+-   [ ] The changelog has been updated, if necessary.
+-   [ ] Documentation has been updated, if necessary.
+-   [ ] GitHub Issues closed by this PR have been linked.
+
+<sub>By submitting this pull request you agree that all contributions comply with this project's open source license(s).</sub>

From df6bc006de0cb6a53bcda34da38863d62ea213e6 Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Fri, 15 Sep 2023 02:39:15 -0700
Subject: [PATCH 11/20] config docs

---
 CHANGELOG.md                               | 2 +-
 docs/src/dictionary.txt                    | 3 +++
 docs/src/reference/settings.md             | 5 +++--
 src/reactpy_django/checks.py               | 9 +++++++++
 src/reactpy_django/config.py               | 4 ++--
 src/reactpy_django/templatetags/reactpy.py | 2 +-
 6 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a6b7fb6d..c98429fb 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -37,7 +37,7 @@ Using the following categories, list your changes in this order:
 ### Added
 
 -   ReactPy components can now use SEO compatible rendering!
-    -   `settings.py:REACTPY_PRELOAD_DEFAULT` can be set to `True` to enable this behavior by default
+    -   `settings.py:REACTPY_PRELOAD` can be set to `True` to enable this behavior by default
     -   Or, you can enable it on individual components via the template tag: `{% component "..." preload="True" %}`
 
 ## [3.5.1] - 2023-09-07
diff --git a/docs/src/dictionary.txt b/docs/src/dictionary.txt
index d3d2eb25..bba6d271 100644
--- a/docs/src/dictionary.txt
+++ b/docs/src/dictionary.txt
@@ -37,3 +37,6 @@ frontends
 misconfiguration
 misconfigurations
 backhaul
+preload
+preloading
+preloaded
diff --git a/docs/src/reference/settings.md b/docs/src/reference/settings.md
index 9f108a0d..c17014ad 100644
--- a/docs/src/reference/settings.md
+++ b/docs/src/reference/settings.md
@@ -30,9 +30,10 @@ These are ReactPy-Django's default settings values. You can modify these values
 | `#!python REACTPY_AUTH_BACKEND` | `#!python "django.contrib.auth.backends.ModelBackend"` | `#!python "example_project.auth.MyModelBackend"` | Dotted path to the Django authentication backend to use for ReactPy components. This is only needed if:<br/> 1. You are using `#!python AuthMiddlewareStack` and...<br/> 2. You are using Django's `#!python AUTHENTICATION_BACKENDS` setting and...<br/> 3. Your Django user model does not define a `#!python backend` attribute. |
 | `#!python REACTPY_BACKHAUL_THREAD` | `#!python False` | `#!python True` | Whether to render ReactPy components in a dedicated thread. This allows the web server to process traffic during ReactPy rendering. Vastly improves throughput with web servers such as [`hypercorn`](https://pgjones.gitlab.io/hypercorn/) and [`uvicorn`](https://www.uvicorn.org/). |
 | `#!python REACTPY_DEFAULT_HOSTS` | `#!python None` | `#!python ["localhost:8000", "localhost:8001", "localhost:8002/subdir" ]` | The default host(s) that can render your ReactPy components. ReactPy will use these hosts in a round-robin fashion, allowing for easy distributed computing. You can use the `#!python host` argument in your [template tag](../reference/template-tag.md#component) as a manual override. |
-| `#!python REACTPY_RECONNECT_INTERVAL` | `#!python 750` | `#!python 100`, `#!python 2500`, `#!python 6000` | Milliseconds between client reconnection attempts. This value will gradually increase if `#!python REACTPY_RECONNECT_BACKOFF_MULTIPLIER` is greater than `#!python 1`. |
+| `#!python REACTPY_RECONNECT_INTERVAL` | `#!python 750` | `#!python 100`, `#!python 2500`, `#!python 6000` | Milliseconds between client reconnection attempts. |
+| `#!python REACTPY_RECONNECT_BACKOFF_MULTIPLIER` | `#!python 1.25` | `#!python 1`, `#!python 1.5`, `#!python 3` | On each reconnection attempt, the `#!python REACTPY_RECONNECT_INTERVAL` will be multiplied by this value to increase the time between attempts. You can keep time between each reconnection the same by setting this to `#!python 1`. |
 | `#!python REACTPY_RECONNECT_MAX_INTERVAL` | `#!python 60000` | `#!python 10000`, `#!python 25000`, `#!python 900000` | Maximum milliseconds between client reconnection attempts. This allows setting an upper bound on how high `#!python REACTPY_RECONNECT_BACKOFF_MULTIPLIER` can increase the time between reconnection attempts. |
 | `#!python REACTPY_RECONNECT_MAX_RETRIES` | `#!python 150` | `#!python 0`, `#!python 5`, `#!python 300` | Maximum number of reconnection attempts before the client gives up. |
-| `#!python REACTPY_RECONNECT_BACKOFF_MULTIPLIER` | `#!python 1.25` | `#!python 1`, `#!python 1.5`, `#!python 3` | Multiplier for the time between client reconnection attempts. On each reconnection attempt, the `#!python REACTPY_RECONNECT_INTERVAL` will be multiplied by this to increase the time between attempts. You can keep time between each reconnection the same by setting this to `#!python 1`. |
+| `#!python REACTPY_PRELOAD` | `#!python False` | `#!python True` | Changes the default value for preloading behavior. Preload allows for SEO compatibility by performing an initial static HTML render on your components. You can use the `#!python preload` argument in your [template tag](../reference/template-tag.md#component) as a manual override. During preloading, there are some key differences in behavior:<br/>1. Only the component's first render is preloaded.<br/>2. All `#!python connection` related hooks use HTTP.<br/>3. `#!python html.script` is executed during both preload and render.<br/>4. Component is non-interactive until a WebSocket connection is formed. |
 
 <!--config-table-end-->
diff --git a/src/reactpy_django/checks.py b/src/reactpy_django/checks.py
index 0025008b..c17ca7a2 100644
--- a/src/reactpy_django/checks.py
+++ b/src/reactpy_django/checks.py
@@ -473,4 +473,13 @@ def reactpy_errors(app_configs, **kwargs):
             )
         )
 
+    if not isinstance(config.REACTPY_PRELOAD, bool):
+        errors.append(
+            Error(
+                "Invalid type for REACTPY_PRELOAD.",
+                hint="REACTPY_PRELOAD should be a boolean.",
+                id="reactpy_django.E021",
+            )
+        )
+
     return errors
diff --git a/src/reactpy_django/config.py b/src/reactpy_django/config.py
index 0e448c6f..3cd3d021 100644
--- a/src/reactpy_django/config.py
+++ b/src/reactpy_django/config.py
@@ -107,8 +107,8 @@
     "REACTPY_RECONNECT_BACKOFF_MULTIPLIER",
     1.25,  # Default to 25% backoff per connection attempt
 )
-REACTPY_PRELOAD_DEFAULT: bool = getattr(
+REACTPY_PRELOAD: bool = getattr(
     settings,
-    "REACTPY_PRELOAD_DEFAULT",
+    "REACTPY_PRELOAD",
     False,
 )
diff --git a/src/reactpy_django/templatetags/reactpy.py b/src/reactpy_django/templatetags/reactpy.py
index 41d2414a..72fc85cf 100644
--- a/src/reactpy_django/templatetags/reactpy.py
+++ b/src/reactpy_django/templatetags/reactpy.py
@@ -37,7 +37,7 @@ def component(
     dotted_path: str,
     *args,
     host: str | None = None,
-    preload: str = str(config.REACTPY_PRELOAD_DEFAULT),
+    preload: str = str(config.REACTPY_PRELOAD),
     **kwargs,
 ):
     """This tag is used to embed an existing ReactPy component into your HTML template.

From 1f3f2778a258a1bf48021e13a69f31da4e31c387 Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Fri, 15 Sep 2023 03:26:51 -0700
Subject: [PATCH 12/20] Add settings categories

---
 .../learn/add-reactpy-to-a-django-project.md  |  2 ++
 docs/src/reference/settings.md                | 34 +++++++++++++------
 docs/src/reference/template-tag.md            |  2 +-
 3 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/docs/src/learn/add-reactpy-to-a-django-project.md b/docs/src/learn/add-reactpy-to-a-django-project.md
index 7d7c949f..311bc3c3 100644
--- a/docs/src/learn/add-reactpy-to-a-django-project.md
+++ b/docs/src/learn/add-reactpy-to-a-django-project.md
@@ -53,6 +53,8 @@ Add `#!python "reactpy_django"` to [`INSTALLED_APPS`](https://docs.djangoproject
 
 ??? note "Configure ReactPy settings (Optional)"
 
+    {% include "../reference/settings.md" start="<!--intro-start-->" end="<!--intro-end-->"  %}
+
     {% include "../reference/settings.md" start="<!--config-table-start-->" end="<!--config-table-end-->"  %}
 
 ## Step 3: Configure `urls.py`
diff --git a/docs/src/reference/settings.md b/docs/src/reference/settings.md
index c17014ad..2d3afcf7 100644
--- a/docs/src/reference/settings.md
+++ b/docs/src/reference/settings.md
@@ -2,7 +2,11 @@
 
 <p class="intro" markdown>
 
-Your **Django project's** `settings.py` can modify the behavior of ReactPy.
+<!--intro-start-->
+
+These are ReactPy-Django's default settings values. You can modify these values in your **Django project's** `settings.py` to change the behavior of ReactPy.
+
+<!--intro-end-->
 
 </p>
 
@@ -14,26 +18,34 @@ Your **Django project's** `settings.py` can modify the behavior of ReactPy.
 
 ---
 
-## Primary Configuration
-
 <!--config-table-start-->
 
-These are ReactPy-Django's default settings values. You can modify these values in your **Django project's** `settings.py` to change the behavior of ReactPy.
+## General Settings
 
 | Setting | Default Value | Example Value(s) | Description |
 | --- | --- | --- | --- |
-| `#!python REACTPY_CACHE` | `#!python "default"` | `#!python "my-reactpy-cache"` | Cache used to store ReactPy web modules. ReactPy benefits from a fast, well indexed cache. We recommend installing [`redis`](https://redis.io/) or [`python-diskcache`](https://grantjenks.com/docs/diskcache/tutorial.html#djangocache). |
-| `#!python REACTPY_DATABASE` | `#!python "default"` | `#!python "my-reactpy-database"` | Database used to store ReactPy session data. ReactPy requires a multiprocessing-safe and thread-safe database. If configuring `#!python REACTPY_DATABASE`, it is mandatory to enable our database router like such:<br/>`#!python DATABASE_ROUTERS = ["reactpy_django.database.Router", ...]` |
-| `#!python REACTPY_SESSION_MAX_AGE` | `#!python 259200` | `#!python 0`, `#!python 60`, `#!python 96000` | Maximum seconds to store ReactPy session data, such as `#!python args` and `#!python kwargs` passed into your component template tag. Use `#!python 0` to not store any session data. |
-| `#!python REACTPY_URL_PREFIX` | `#!python "reactpy/"` | `#!python "rp/"`, `#!python "render/reactpy/"` | The prefix to be used for all ReactPy WebSocket and HTTP URLs. |
-| `#!python REACTPY_DEFAULT_QUERY_POSTPROCESSOR` | `#!python "reactpy_django.utils.django_query_postprocessor"` | `#!python None`, `#!python "example_project.my_query_postprocessor"` | Dotted path to the default `#!python reactpy_django.hooks.use_query` postprocessor function. Postprocessor functions can be async or sync, and the parameters must contain the arg `#!python data`. Set `#!python REACTPY_DEFAULT_QUERY_POSTPROCESSOR` to `#!python None` to globally disable the default postprocessor. |
+| `#!python REACTPY_URL_PREFIX` | `#!python "reactpy/"` | `#!python "rp/"`, `#!python "render/reactpy/"` | The prefix used for all ReactPy WebSocket and HTTP URLs. |
+| `#!python REACTPY_DEFAULT_QUERY_POSTPROCESSOR` | `#!python "reactpy_django.utils.django_query_postprocessor"` | `#!python "example_project.postprocessor"`, `#!python None` | Dotted path to the default `#!python reactpy_django.hooks.use_query` postprocessor function. Postprocessor functions can be async or sync, and the function must contain a `#!python data` parameter. Set `#!python REACTPY_DEFAULT_QUERY_POSTPROCESSOR` to `#!python None` to globally disable the default postprocessor. |
 | `#!python REACTPY_AUTH_BACKEND` | `#!python "django.contrib.auth.backends.ModelBackend"` | `#!python "example_project.auth.MyModelBackend"` | Dotted path to the Django authentication backend to use for ReactPy components. This is only needed if:<br/> 1. You are using `#!python AuthMiddlewareStack` and...<br/> 2. You are using Django's `#!python AUTHENTICATION_BACKENDS` setting and...<br/> 3. Your Django user model does not define a `#!python backend` attribute. |
-| `#!python REACTPY_BACKHAUL_THREAD` | `#!python False` | `#!python True` | Whether to render ReactPy components in a dedicated thread. This allows the web server to process traffic during ReactPy rendering. Vastly improves throughput with web servers such as [`hypercorn`](https://pgjones.gitlab.io/hypercorn/) and [`uvicorn`](https://www.uvicorn.org/). |
+
+## Performance Settings
+
+| Setting | Default Value | Example Value(s) | Description |
+| --- | --- | --- | --- |
+| `#!python REACTPY_DATABASE` | `#!python "default"` | `#!python "my-reactpy-database"` | Multiprocessing-safe database used to store ReactPy session data. If configuring `#!python REACTPY_DATABASE`, it is mandatory to enable our database router like such:<br/>`#!python DATABASE_ROUTERS = ["reactpy_django.database.Router", ...]` |
+| `#!python REACTPY_CACHE` | `#!python "default"` | `#!python "my-reactpy-cache"` | Cache used for ReactPy JavaScript modules. We recommend installing [`redis`](https://redis.io/) or [`python-diskcache`](https://grantjenks.com/docs/diskcache/tutorial.html#djangocache). |
+| `#!python REACTPY_BACKHAUL_THREAD` | `#!python False` | `#!python True` | Configures whether ReactPy components are rendered in a dedicated thread. This allows the web server to process traffic during ReactPy rendering. Vastly improves throughput with web servers such as [`hypercorn`](https://pgjones.gitlab.io/hypercorn/) and [`uvicorn`](https://www.uvicorn.org/). |
 | `#!python REACTPY_DEFAULT_HOSTS` | `#!python None` | `#!python ["localhost:8000", "localhost:8001", "localhost:8002/subdir" ]` | The default host(s) that can render your ReactPy components. ReactPy will use these hosts in a round-robin fashion, allowing for easy distributed computing. You can use the `#!python host` argument in your [template tag](../reference/template-tag.md#component) as a manual override. |
+| `#!python REACTPY_PRELOAD` | `#!python False` | `#!python True` | Default value for preloading behavior, which allows for SEO compatibility by performing an initial static render of your components. You can use the `#!python preload` argument in your [template tag](../reference/template-tag.md#component) as a manual override. During preloading, there are some key differences in behavior:<br/>1. Only the component's first render is preloaded.<br/>2. All `#!python connection` related hooks use HTTP.<br/>3. `#!python html.script` is executed during both preload and render.<br/>4. Component is non-interactive until a WebSocket connection is formed. |
+
+## Stability Settings
+
+| Setting | Default Value | Example Value(s) | Description |
+| --- | --- | --- | --- |
 | `#!python REACTPY_RECONNECT_INTERVAL` | `#!python 750` | `#!python 100`, `#!python 2500`, `#!python 6000` | Milliseconds between client reconnection attempts. |
 | `#!python REACTPY_RECONNECT_BACKOFF_MULTIPLIER` | `#!python 1.25` | `#!python 1`, `#!python 1.5`, `#!python 3` | On each reconnection attempt, the `#!python REACTPY_RECONNECT_INTERVAL` will be multiplied by this value to increase the time between attempts. You can keep time between each reconnection the same by setting this to `#!python 1`. |
 | `#!python REACTPY_RECONNECT_MAX_INTERVAL` | `#!python 60000` | `#!python 10000`, `#!python 25000`, `#!python 900000` | Maximum milliseconds between client reconnection attempts. This allows setting an upper bound on how high `#!python REACTPY_RECONNECT_BACKOFF_MULTIPLIER` can increase the time between reconnection attempts. |
 | `#!python REACTPY_RECONNECT_MAX_RETRIES` | `#!python 150` | `#!python 0`, `#!python 5`, `#!python 300` | Maximum number of reconnection attempts before the client gives up. |
-| `#!python REACTPY_PRELOAD` | `#!python False` | `#!python True` | Changes the default value for preloading behavior. Preload allows for SEO compatibility by performing an initial static HTML render on your components. You can use the `#!python preload` argument in your [template tag](../reference/template-tag.md#component) as a manual override. During preloading, there are some key differences in behavior:<br/>1. Only the component's first render is preloaded.<br/>2. All `#!python connection` related hooks use HTTP.<br/>3. `#!python html.script` is executed during both preload and render.<br/>4. Component is non-interactive until a WebSocket connection is formed. |
+| `#!python REACTPY_SESSION_MAX_AGE` | `#!python 259200` | `#!python 0`, `#!python 60`, `#!python 96000` | Maximum seconds to store ReactPy component sessions. This includes data such as `#!python args` and `#!python kwargs` passed into your component template tag. Use `#!python 0` to not store any session data. |
 
 <!--config-table-end-->
diff --git a/docs/src/reference/template-tag.md b/docs/src/reference/template-tag.md
index 6f20be36..39032d01 100644
--- a/docs/src/reference/template-tag.md
+++ b/docs/src/reference/template-tag.md
@@ -81,7 +81,7 @@ This template tag can be used to insert any number of ReactPy components onto yo
 
     1. If your host address are completely separate ( `origin1.com != origin2.com` ) you will need to [configure CORS headers](https://pypi.org/project/django-cors-headers/) on your main application during deployment.
     2. You will not need to register ReactPy HTTP or WebSocket paths on any applications that do not perform any component rendering.
-    3. Your component will only be able to access `#!python *args`/`#!python **kwargs` you provide to the template tag if your applications share a common database.
+    3. Your component will only be able to access your template tag's `#!python *args`/`#!python **kwargs` if your applications share a common database.
 
 <!--multiple-components-start-->
 

From 4f28fd939c01361a4f9c054bfd56857ac1b8eb2c Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Fri, 15 Sep 2023 16:21:36 -0700
Subject: [PATCH 13/20] preload -> prerender

---
 CHANGELOG.md                                  |  4 +--
 docs/src/dictionary.txt                       |  3 --
 docs/src/reference/settings.md                |  2 +-
 src/js/src/mount.tsx                          |  8 ++---
 src/reactpy_django/checks.py                  |  6 ++--
 src/reactpy_django/config.py                  |  4 +--
 .../templates/reactpy/component.html          |  2 +-
 src/reactpy_django/templatetags/reactpy.py    | 20 ++++++-------
 tests/test_app/preload/urls.py                |  7 -----
 tests/test_app/preload/views.py               |  5 ----
 .../{preload => prerender}/__init__.py        |  0
 .../{preload => prerender}/components.py      | 18 +++++------
 tests/test_app/prerender/urls.py              |  7 +++++
 tests/test_app/prerender/views.py             |  5 ++++
 tests/test_app/templates/preload.html         | 30 -------------------
 tests/test_app/templates/prerender.html       | 30 +++++++++++++++++++
 tests/test_app/tests/test_components.py       | 26 ++++++++--------
 tests/test_app/urls.py                        |  2 +-
 18 files changed, 89 insertions(+), 90 deletions(-)
 delete mode 100644 tests/test_app/preload/urls.py
 delete mode 100644 tests/test_app/preload/views.py
 rename tests/test_app/{preload => prerender}/__init__.py (100%)
 rename tests/test_app/{preload => prerender}/components.py (55%)
 create mode 100644 tests/test_app/prerender/urls.py
 create mode 100644 tests/test_app/prerender/views.py
 delete mode 100644 tests/test_app/templates/preload.html
 create mode 100644 tests/test_app/templates/prerender.html

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c98429fb..f8b89781 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -37,8 +37,8 @@ Using the following categories, list your changes in this order:
 ### Added
 
 -   ReactPy components can now use SEO compatible rendering!
-    -   `settings.py:REACTPY_PRELOAD` can be set to `True` to enable this behavior by default
-    -   Or, you can enable it on individual components via the template tag: `{% component "..." preload="True" %}`
+    -   `settings.py:REACTPY_PRERENDER` can be set to `True` to enable this behavior by default
+    -   Or, you can enable it on individual components via the template tag: `{% component "..." prerender="True" %}`
 
 ## [3.5.1] - 2023-09-07
 
diff --git a/docs/src/dictionary.txt b/docs/src/dictionary.txt
index bba6d271..d3d2eb25 100644
--- a/docs/src/dictionary.txt
+++ b/docs/src/dictionary.txt
@@ -37,6 +37,3 @@ frontends
 misconfiguration
 misconfigurations
 backhaul
-preload
-preloading
-preloaded
diff --git a/docs/src/reference/settings.md b/docs/src/reference/settings.md
index 2d3afcf7..c8bb9f6e 100644
--- a/docs/src/reference/settings.md
+++ b/docs/src/reference/settings.md
@@ -36,7 +36,7 @@ These are ReactPy-Django's default settings values. You can modify these values
 | `#!python REACTPY_CACHE` | `#!python "default"` | `#!python "my-reactpy-cache"` | Cache used for ReactPy JavaScript modules. We recommend installing [`redis`](https://redis.io/) or [`python-diskcache`](https://grantjenks.com/docs/diskcache/tutorial.html#djangocache). |
 | `#!python REACTPY_BACKHAUL_THREAD` | `#!python False` | `#!python True` | Configures whether ReactPy components are rendered in a dedicated thread. This allows the web server to process traffic during ReactPy rendering. Vastly improves throughput with web servers such as [`hypercorn`](https://pgjones.gitlab.io/hypercorn/) and [`uvicorn`](https://www.uvicorn.org/). |
 | `#!python REACTPY_DEFAULT_HOSTS` | `#!python None` | `#!python ["localhost:8000", "localhost:8001", "localhost:8002/subdir" ]` | The default host(s) that can render your ReactPy components. ReactPy will use these hosts in a round-robin fashion, allowing for easy distributed computing. You can use the `#!python host` argument in your [template tag](../reference/template-tag.md#component) as a manual override. |
-| `#!python REACTPY_PRELOAD` | `#!python False` | `#!python True` | Default value for preloading behavior, which allows for SEO compatibility by performing an initial static render of your components. You can use the `#!python preload` argument in your [template tag](../reference/template-tag.md#component) as a manual override. During preloading, there are some key differences in behavior:<br/>1. Only the component's first render is preloaded.<br/>2. All `#!python connection` related hooks use HTTP.<br/>3. `#!python html.script` is executed during both preload and render.<br/>4. Component is non-interactive until a WebSocket connection is formed. |
+| `#!python REACTPY_PRERENDER` | `#!python False` | `#!python True` | Default value for pre-rendering behavior, which allows for SEO compatibility by performing an initial static render of your components. You can use the `#!python prerender` argument in your [template tag](../reference/template-tag.md#component) as a manual override. During pre-rendering, there are some key differences in behavior:<br/>1. Only the component's first render is pre-rendered.<br/>2. All `#!python connection` related hooks use HTTP.<br/>3. `#!python html.script` is executed during both pre-render and render.<br/>4. Component is non-interactive until a WebSocket connection is formed. |
 
 ## Stability Settings
 
diff --git a/src/js/src/mount.tsx b/src/js/src/mount.tsx
index feefd298..4d7cdcb3 100644
--- a/src/js/src/mount.tsx
+++ b/src/js/src/mount.tsx
@@ -4,12 +4,12 @@ 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) {
+  const prerenderElement = document.getElementById(element.id + "-prerender");
+  if (prerenderElement) {
     element.hidden = true;
     client.onMessage("layout-update", ({ path, model }) => {
-      if (preloadElement) {
-        preloadElement.replaceWith(element);
+      if (prerenderElement) {
+        prerenderElement.replaceWith(element);
         element.hidden = false;
       }
     });
diff --git a/src/reactpy_django/checks.py b/src/reactpy_django/checks.py
index c17ca7a2..489888eb 100644
--- a/src/reactpy_django/checks.py
+++ b/src/reactpy_django/checks.py
@@ -473,11 +473,11 @@ def reactpy_errors(app_configs, **kwargs):
             )
         )
 
-    if not isinstance(config.REACTPY_PRELOAD, bool):
+    if not isinstance(config.REACTPY_PRERENDER, bool):
         errors.append(
             Error(
-                "Invalid type for REACTPY_PRELOAD.",
-                hint="REACTPY_PRELOAD should be a boolean.",
+                "Invalid type for REACTPY_PRERENDER.",
+                hint="REACTPY_PRERENDER should be a boolean.",
                 id="reactpy_django.E021",
             )
         )
diff --git a/src/reactpy_django/config.py b/src/reactpy_django/config.py
index 3cd3d021..56011c83 100644
--- a/src/reactpy_django/config.py
+++ b/src/reactpy_django/config.py
@@ -107,8 +107,8 @@
     "REACTPY_RECONNECT_BACKOFF_MULTIPLIER",
     1.25,  # Default to 25% backoff per connection attempt
 )
-REACTPY_PRELOAD: bool = getattr(
+REACTPY_PRERENDER: bool = getattr(
     settings,
-    "REACTPY_PRELOAD",
+    "REACTPY_PRERENDER",
     False,
 )
diff --git a/src/reactpy_django/templates/reactpy/component.html b/src/reactpy_django/templates/reactpy/component.html
index 80e57304..1a6b4669 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_html %}<div id="{{ reactpy_uuid }}-preload">{{ reactpy_preload_html|safe }}</div>{% endif %}
+{% if reactpy_prerender_html %}<div id="{{ reactpy_uuid }}-prerender">{{ reactpy_prerender_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 72fc85cf..8a4c89c7 100644
--- a/src/reactpy_django/templatetags/reactpy.py
+++ b/src/reactpy_django/templatetags/reactpy.py
@@ -37,7 +37,7 @@ def component(
     dotted_path: str,
     *args,
     host: str | None = None,
-    preload: str = str(config.REACTPY_PRELOAD),
+    prerender: str = str(config.REACTPY_PRERENDER),
     **kwargs,
 ):
     """This tag is used to embed an existing ReactPy component into your HTML template.
@@ -73,7 +73,7 @@ def component(
     class_ = kwargs.pop("class", "")
     component_has_args = args or kwargs
     user_component: ComponentConstructor | None = None
-    _preload_html = ""
+    _prerender_html = ""
 
     # Validate the host
     if host and config.REACTPY_DEBUG_MODE:
@@ -109,24 +109,24 @@ def component(
             )
             return failure_context(dotted_path, e)
 
-    # Preload the component, if requested
-    if strtobool(preload):
+    # Pre-render the component, if requested
+    if strtobool(prerender):
         if not is_local:
-            msg = "Cannot preload non-local components."
+            msg = "Cannot pre-render non-local components."
             _logger.error(msg)
             return failure_context(dotted_path, ComponentDoesNotExistError(msg))
         if not user_component:
-            msg = "Cannot preload component that is not registered."
+            msg = "Cannot pre-render component that is not registered."
             _logger.error(msg)
             return failure_context(dotted_path, ComponentDoesNotExistError(msg))
         if not request:
             msg = (
-                "Cannot preload component without a HTTP request. Are you missing the "
+                "Cannot pre-render component without a HTTP request. Are you missing the "
                 "request context processor in settings.py:TEMPLATES['OPTIONS']['context_processors']?"
             )
             _logger.error(msg)
             return failure_context(dotted_path, ComponentCarrierError(msg))
-        _preload_html = preload_component(user_component, args, kwargs, request)
+        _prerender_html = prerender_component(user_component, args, kwargs, request)
 
     # Return the template rendering context
     return {
@@ -142,7 +142,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_html": _preload_html,
+        "reactpy_prerender_html": _prerender_html,
     }
 
 
@@ -172,7 +172,7 @@ def validate_host(host: str):
         raise InvalidHostError(msg)
 
 
-def preload_component(
+def prerender_component(
     user_component: ComponentConstructor, args, kwargs, request: HttpRequest
 ):
     search = request.GET.urlencode()
diff --git a/tests/test_app/preload/urls.py b/tests/test_app/preload/urls.py
deleted file mode 100644
index 50fcf956..00000000
--- a/tests/test_app/preload/urls.py
+++ /dev/null
@@ -1,7 +0,0 @@
-from django.urls import path
-
-from .views import preload
-
-urlpatterns = [
-    path("preload/", preload),
-]
diff --git a/tests/test_app/preload/views.py b/tests/test_app/preload/views.py
deleted file mode 100644
index 16f4f32e..00000000
--- a/tests/test_app/preload/views.py
+++ /dev/null
@@ -1,5 +0,0 @@
-from django.shortcuts import render
-
-
-def preload(request):
-    return render(request, "preload.html", {})
diff --git a/tests/test_app/preload/__init__.py b/tests/test_app/prerender/__init__.py
similarity index 100%
rename from tests/test_app/preload/__init__.py
rename to tests/test_app/prerender/__init__.py
diff --git a/tests/test_app/preload/components.py b/tests/test_app/prerender/components.py
similarity index 55%
rename from tests/test_app/preload/components.py
rename to tests/test_app/prerender/components.py
index abca35cf..0ae4af0e 100644
--- a/tests/test_app/preload/components.py
+++ b/tests/test_app/prerender/components.py
@@ -5,29 +5,29 @@
 
 
 @component
-def preload_string():
+def prerender_string():
     scope = reactpy_django.hooks.use_scope()
 
     sleep(0.5)
     return (
-        "preload_string: Fully Rendered"
+        "prerender_string: Fully Rendered"
         if scope.get("type") == "websocket"
-        else "preload_string: Preloaded"
+        else "prerender_string: Prerendered"
     )
 
 
 @component
-def preload_vdom():
+def prerender_vdom():
     scope = reactpy_django.hooks.use_scope()
 
     if scope.get("type") == "http":
-        return html.div("preload_vdom: Preloaded")
+        return html.div("prerender_vdom: Prerendered")
 
-    return html.div("preload_vdom: Fully Rendered")
+    return html.div("prerender_vdom: Fully Rendered")
 
 
 @component
-def preload_component():
+def prerender_component():
     scope = reactpy_django.hooks.use_scope()
 
     @component
@@ -35,6 +35,6 @@ def inner(value):
         return html.div(value)
 
     if scope.get("type") == "http":
-        return inner("preload_component: Preloaded")
+        return inner("prerender_component: Prerendered")
 
-    return inner("preload_component: Fully Rendered")
+    return inner("prerender_component: Fully Rendered")
diff --git a/tests/test_app/prerender/urls.py b/tests/test_app/prerender/urls.py
new file mode 100644
index 00000000..6f5a8f22
--- /dev/null
+++ b/tests/test_app/prerender/urls.py
@@ -0,0 +1,7 @@
+from django.urls import path
+
+from .views import prerender
+
+urlpatterns = [
+    path("prerender/", prerender),
+]
diff --git a/tests/test_app/prerender/views.py b/tests/test_app/prerender/views.py
new file mode 100644
index 00000000..059fad42
--- /dev/null
+++ b/tests/test_app/prerender/views.py
@@ -0,0 +1,5 @@
+from django.shortcuts import render
+
+
+def prerender(request):
+    return render(request, "prerender.html", {})
diff --git a/tests/test_app/templates/preload.html b/tests/test_app/templates/preload.html
deleted file mode 100644
index c23d85b7..00000000
--- a/tests/test_app/templates/preload.html
+++ /dev/null
@@ -1,30 +0,0 @@
-{% load static %} {% load reactpy %}
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <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>
-</head>
-
-<body>
-    <h1>ReactPy Preload Test Page</h1>
-    <hr>
-    <div id="preload_string">
-        {% component "test_app.preload.components.preload_string" class="preload-string" preload="true" %}
-    </div>
-    <hr>
-    <div id="preload_vdom">
-        {% component "test_app.preload.components.preload_vdom" class="preload-vdom" preload="true" %}
-    </div>
-    <hr>
-    <div id="preload_component">
-        {% component "test_app.preload.components.preload_component" class="preload-component" preload="true" %}
-    </div>
-    <hr>
-</body>
-
-</html>
diff --git a/tests/test_app/templates/prerender.html b/tests/test_app/templates/prerender.html
new file mode 100644
index 00000000..03befec5
--- /dev/null
+++ b/tests/test_app/templates/prerender.html
@@ -0,0 +1,30 @@
+{% load static %} {% load reactpy %}
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <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>
+</head>
+
+<body>
+    <h1>ReactPy Prerender Test Page</h1>
+    <hr>
+    <div id="prerender_string">
+        {% component "test_app.prerender.components.prerender_string" class="prerender-string" prerender="true" %}
+    </div>
+    <hr>
+    <div id="prerender_vdom">
+        {% component "test_app.prerender.components.prerender_vdom" class="prerender-vdom" prerender="true" %}
+    </div>
+    <hr>
+    <div id="prerender_component">
+        {% component "test_app.prerender.components.prerender_component" class="prerender-component" prerender="true" %}
+    </div>
+    <hr>
+</body>
+
+</html>
diff --git a/tests/test_app/tests/test_components.py b/tests/test_app/tests/test_components.py
index a7a9be98..36f3f164 100644
--- a/tests/test_app/tests/test_components.py
+++ b/tests/test_app/tests/test_components.py
@@ -377,33 +377,35 @@ def test_broken_postprocessor_query(self):
         broken_component.wait_for()
         self.assertIn("SynchronousOnlyOperation:", broken_component.text_content())
 
-    def test_preload(self):
+    def test_prerender(self):
         """Verify if round-robin host selection is working."""
         new_page = self.browser.new_page()
         try:
-            new_page.goto(f"{self.live_server_url}/preload/")
-            string = new_page.locator("#preload_string")
-            vdom = new_page.locator("#preload_vdom")
-            component = new_page.locator("#preload_component")
+            new_page.goto(f"{self.live_server_url}/prerender/")
+            string = new_page.locator("#prerender_string")
+            vdom = new_page.locator("#prerender_vdom")
+            component = new_page.locator("#prerender_component")
 
             string.wait_for()
             vdom.wait_for()
             component.wait_for()
 
-            # Check if the preload occurred
-            self.assertEqual(string.all_inner_texts(), ["preload_string: Preloaded"])
-            self.assertEqual(vdom.all_inner_texts(), ["preload_vdom: Preloaded"])
+            # Check if the prerender occurred
             self.assertEqual(
-                component.all_inner_texts(), ["preload_component: Preloaded"]
+                string.all_inner_texts(), ["prerender_string: Prerendered"]
+            )
+            self.assertEqual(vdom.all_inner_texts(), ["prerender_vdom: Prerendered"])
+            self.assertEqual(
+                component.all_inner_texts(), ["prerender_component: Prerendered"]
             )
 
             sleep(1)
             self.assertEqual(
-                string.all_inner_texts(), ["preload_string: Fully Rendered"]
+                string.all_inner_texts(), ["prerender_string: Fully Rendered"]
             )
-            self.assertEqual(vdom.all_inner_texts(), ["preload_vdom: Fully Rendered"])
+            self.assertEqual(vdom.all_inner_texts(), ["prerender_vdom: Fully Rendered"])
             self.assertEqual(
-                component.all_inner_texts(), ["preload_component: Fully Rendered"]
+                component.all_inner_texts(), ["prerender_component: Fully Rendered"]
             )
         finally:
             new_page.close()
diff --git a/tests/test_app/urls.py b/tests/test_app/urls.py
index 33f4eb38..f7f4a3f0 100644
--- a/tests/test_app/urls.py
+++ b/tests/test_app/urls.py
@@ -36,7 +36,7 @@ class AccessUser:
         "roundrobin/<int:port1>/<int:port2>/<int:count>/",
         views.host_port_roundrobin_template,
     ),
-    path("", include("test_app.preload.urls")),
+    path("", include("test_app.prerender.urls")),
     path("", include("test_app.performance.urls")),
     path("reactpy/", include("reactpy_django.http.urls")),
     path("admin/", admin.site.urls),

From b3b9b650cde9dc9f28246f9295921b0eb4539a9a Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Fri, 15 Sep 2023 16:47:38 -0700
Subject: [PATCH 14/20] ComponentPreloader -> RootComponentFinder

---
 CHANGELOG.md                         | 4 ++++
 docs/python/template-tag-bad-view.py | 2 +-
 docs/src/reference/template-tag.md   | 8 ++++----
 docs/src/reference/utils.md          | 4 ++--
 src/reactpy_django/apps.py           | 4 ++--
 src/reactpy_django/utils.py          | 4 ++--
 6 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f8b89781..f8f0ec63 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -40,6 +40,10 @@ Using the following categories, list your changes in this order:
     -   `settings.py:REACTPY_PRERENDER` can be set to `True` to enable this behavior by default
     -   Or, you can enable it on individual components via the template tag: `{% component "..." prerender="True" %}`
 
+### Changed
+
+-   Renamed undocumented utility function `reactpy_django.utils.ComponentPreloader` to `reactpy_django.utils.RootComponentFinder`.
+
 ## [3.5.1] - 2023-09-07
 
 ### Added
diff --git a/docs/python/template-tag-bad-view.py b/docs/python/template-tag-bad-view.py
index a798abb0..00d0d9f7 100644
--- a/docs/python/template-tag-bad-view.py
+++ b/docs/python/template-tag-bad-view.py
@@ -2,5 +2,5 @@
 
 
 def example_view(request):
-    context_vars = {"dont_do_this": "example_project.my_app.components.hello_world"}
+    context_vars = {"my_variable": "example_project.my_app.components.hello_world"}
     return render(request, "my-template.html", context_vars)
diff --git a/docs/src/reference/template-tag.md b/docs/src/reference/template-tag.md
index 39032d01..21da4a85 100644
--- a/docs/src/reference/template-tag.md
+++ b/docs/src/reference/template-tag.md
@@ -37,11 +37,11 @@ This template tag can be used to insert any number of ReactPy components onto yo
 
 <!--context-start-->
 
-??? warning "Do not use context variables for the ReactPy component name"
+??? warning "Do not use context variables for the component path"
 
-    Our preprocessor relies on the template tag containing a string.
+    The ReactPy component finder (`#!python reactpy_django.utils.RootComponentFinder`) requires that your component path is a string.
 
-    **Do not** use Django template/context variables for the component path. Failure to follow this warning can result in unexpected behavior.
+    **Do not** use Django template/context variables for the component path. Failure to follow this warning can result in unexpected behavior, such as components that will not render.
 
     For example, **do not** do the following:
 
@@ -52,7 +52,7 @@ This template tag can be used to insert any number of ReactPy components onto yo
         {% component "example_project.my_app.components.hello_world" recipient="World" %}
 
         <!-- This is bad -->
-        {% component dont_do_this recipient="World" %}
+        {% component my_variable recipient="World" %}
         ```
 
     === "views.py"
diff --git a/docs/src/reference/utils.md b/docs/src/reference/utils.md
index d71facc2..9b771f0d 100644
--- a/docs/src/reference/utils.md
+++ b/docs/src/reference/utils.md
@@ -52,9 +52,9 @@ This function is used manually register a root component with ReactPy.
     {% include "../../python/register-component.py" %}
     ```
 
-??? warning "Only use this within `#!python AppConfig.ready()`"
+??? warning "Only use this within `#!python MyAppConfig.ready()`"
 
-    You should always call `#!python register_component` within a Django [`#!python AppConfig.ready()` method](https://docs.djangoproject.com/en/4.2/ref/applications/#django.apps.AppConfig.ready). This ensures you will retain multiprocessing compatibility, such as with ASGI web server workers.
+    You should always call `#!python register_component` within a Django [`#!python MyAppConfig.ready()` method](https://docs.djangoproject.com/en/4.2/ref/applications/#django.apps.AppConfig.ready). This ensures you will retain multiprocessing compatibility, such as with ASGI web server workers.
 
 ??? question "Do I need to use this?"
 
diff --git a/src/reactpy_django/apps.py b/src/reactpy_django/apps.py
index 67a39cb2..f0f2c455 100644
--- a/src/reactpy_django/apps.py
+++ b/src/reactpy_django/apps.py
@@ -1,6 +1,6 @@
 from django.apps import AppConfig
 
-from reactpy_django.utils import ComponentPreloader
+from reactpy_django.utils import RootComponentFinder
 
 
 class ReactPyConfig(AppConfig):
@@ -8,4 +8,4 @@ class ReactPyConfig(AppConfig):
 
     def ready(self):
         # Populate the ReactPy component registry when Django is ready
-        ComponentPreloader().run()
+        RootComponentFinder().run()
diff --git a/src/reactpy_django/utils.py b/src/reactpy_django/utils.py
index 5d408068..e06df1ce 100644
--- a/src/reactpy_django/utils.py
+++ b/src/reactpy_django/utils.py
@@ -119,8 +119,8 @@ def import_dotted_path(dotted_path: str) -> Callable:
     return getattr(module, component_name)
 
 
-class ComponentPreloader:
-    """Preloads all ReactPy components found within Django templates.
+class RootComponentFinder:
+    """Searches Django templates to find and register all root components.
     This should only be `run` once on startup to maintain synchronization during mulitprocessing.
     """
 

From da99b8c048d126638b01590d309cf38ada474f01 Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Fri, 15 Sep 2023 17:08:41 -0700
Subject: [PATCH 15/20] settings docs word smithing

---
 docs/src/reference/settings.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/src/reference/settings.md b/docs/src/reference/settings.md
index c8bb9f6e..1063a9c9 100644
--- a/docs/src/reference/settings.md
+++ b/docs/src/reference/settings.md
@@ -36,7 +36,7 @@ These are ReactPy-Django's default settings values. You can modify these values
 | `#!python REACTPY_CACHE` | `#!python "default"` | `#!python "my-reactpy-cache"` | Cache used for ReactPy JavaScript modules. We recommend installing [`redis`](https://redis.io/) or [`python-diskcache`](https://grantjenks.com/docs/diskcache/tutorial.html#djangocache). |
 | `#!python REACTPY_BACKHAUL_THREAD` | `#!python False` | `#!python True` | Configures whether ReactPy components are rendered in a dedicated thread. This allows the web server to process traffic during ReactPy rendering. Vastly improves throughput with web servers such as [`hypercorn`](https://pgjones.gitlab.io/hypercorn/) and [`uvicorn`](https://www.uvicorn.org/). |
 | `#!python REACTPY_DEFAULT_HOSTS` | `#!python None` | `#!python ["localhost:8000", "localhost:8001", "localhost:8002/subdir" ]` | The default host(s) that can render your ReactPy components. ReactPy will use these hosts in a round-robin fashion, allowing for easy distributed computing. You can use the `#!python host` argument in your [template tag](../reference/template-tag.md#component) as a manual override. |
-| `#!python REACTPY_PRERENDER` | `#!python False` | `#!python True` | Default value for pre-rendering behavior, which allows for SEO compatibility by performing an initial static render of your components. You can use the `#!python prerender` argument in your [template tag](../reference/template-tag.md#component) as a manual override. During pre-rendering, there are some key differences in behavior:<br/>1. Only the component's first render is pre-rendered.<br/>2. All `#!python connection` related hooks use HTTP.<br/>3. `#!python html.script` is executed during both pre-render and render.<br/>4. Component is non-interactive until a WebSocket connection is formed. |
+| `#!python REACTPY_PRERENDER` | `#!python False` | `#!python True` | Configures whether to statically pre-render your components, which enables SEO compatibility. You can use the `#!python prerender` argument in your [template tag](../reference/template-tag.md#component) as a manual override. During pre-rendering, there are some key differences in behavior:<br/>1. Only the component's first render is pre-rendered.<br/>2. All `#!python connection` related hooks use HTTP.<br/>3. `#!python html.script` is executed during both pre-render and render.<br/>4. Component is non-interactive until a WebSocket connection is formed. |
 
 ## Stability Settings
 
@@ -46,6 +46,6 @@ These are ReactPy-Django's default settings values. You can modify these values
 | `#!python REACTPY_RECONNECT_BACKOFF_MULTIPLIER` | `#!python 1.25` | `#!python 1`, `#!python 1.5`, `#!python 3` | On each reconnection attempt, the `#!python REACTPY_RECONNECT_INTERVAL` will be multiplied by this value to increase the time between attempts. You can keep time between each reconnection the same by setting this to `#!python 1`. |
 | `#!python REACTPY_RECONNECT_MAX_INTERVAL` | `#!python 60000` | `#!python 10000`, `#!python 25000`, `#!python 900000` | Maximum milliseconds between client reconnection attempts. This allows setting an upper bound on how high `#!python REACTPY_RECONNECT_BACKOFF_MULTIPLIER` can increase the time between reconnection attempts. |
 | `#!python REACTPY_RECONNECT_MAX_RETRIES` | `#!python 150` | `#!python 0`, `#!python 5`, `#!python 300` | Maximum number of reconnection attempts before the client gives up. |
-| `#!python REACTPY_SESSION_MAX_AGE` | `#!python 259200` | `#!python 0`, `#!python 60`, `#!python 96000` | Maximum seconds to store ReactPy component sessions. This includes data such as `#!python args` and `#!python kwargs` passed into your component template tag. Use `#!python 0` to not store any session data. |
+| `#!python REACTPY_SESSION_MAX_AGE` | `#!python 259200` | `#!python 0`, `#!python 60`, `#!python 96000` | Maximum seconds to store ReactPy component sessions. This includes data such as `#!python *args` and `#!python **kwargs` passed into your component template tag. Use `#!python 0` to not store any session data. |
 
 <!--config-table-end-->

From 69732ba97f50588203df7a75bdfa429a983b1f4e Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Fri, 15 Sep 2023 17:10:53 -0700
Subject: [PATCH 16/20] remove django pinned docs URLs

---
 docs/src/reference/utils.md |  2 +-
 tests/test_app/asgi.py      |  3 ---
 tests/test_app/settings.py  | 18 ------------------
 tests/test_app/urls.py      |  3 ---
 4 files changed, 1 insertion(+), 25 deletions(-)

diff --git a/docs/src/reference/utils.md b/docs/src/reference/utils.md
index 9b771f0d..e5c10057 100644
--- a/docs/src/reference/utils.md
+++ b/docs/src/reference/utils.md
@@ -54,7 +54,7 @@ This function is used manually register a root component with ReactPy.
 
 ??? warning "Only use this within `#!python MyAppConfig.ready()`"
 
-    You should always call `#!python register_component` within a Django [`#!python MyAppConfig.ready()` method](https://docs.djangoproject.com/en/4.2/ref/applications/#django.apps.AppConfig.ready). This ensures you will retain multiprocessing compatibility, such as with ASGI web server workers.
+    You should always call `#!python register_component` within a Django [`#!python MyAppConfig.ready()` method](https://docs.djangoproject.com/en/dev/ref/applications/#django.apps.AppConfig.ready). This ensures you will retain multiprocessing compatibility, such as with ASGI web server workers.
 
 ??? question "Do I need to use this?"
 
diff --git a/tests/test_app/asgi.py b/tests/test_app/asgi.py
index e372e42f..044dee20 100644
--- a/tests/test_app/asgi.py
+++ b/tests/test_app/asgi.py
@@ -2,9 +2,6 @@
 ASGI config for test_app project.
 
 It exposes the ASGI callable as a module-level variable named ``application``.
-
-For more information on this file, see
-https://docs.djangoproject.com/en/3.2/howto/deployment/asgi/
 """
 
 import os
diff --git a/tests/test_app/settings.py b/tests/test_app/settings.py
index 6d4574c3..ca445379 100644
--- a/tests/test_app/settings.py
+++ b/tests/test_app/settings.py
@@ -1,15 +1,3 @@
-"""
-Django settings for test_app project.
-
-Generated by 'django-admin startproject' using Django 3.2.3.
-
-For more information on this file, see
-https://docs.djangoproject.com/en/3.2/topics/settings/
-
-For the full list of settings and their values, see
-https://docs.djangoproject.com/en/3.2/ref/settings/
-"""
-
 import os
 import sys
 from pathlib import Path
@@ -19,7 +7,6 @@
 SRC_DIR = BASE_DIR.parent / "src"
 
 # Quick-start development settings - unsuitable for production
-# See https://docs.djangoproject.com/en/3.2/howto/deployment/checklist/
 
 # SECURITY WARNING: keep the secret key used in production secret!
 SECRET_KEY = "django-insecure-n!bd1#+7ufw5#9ipayu9k(lyu@za$c2ajbro7es(v8_7w1$=&c"
@@ -73,7 +60,6 @@
 sys.path.append(str(SRC_DIR))
 
 # Database
-# https://docs.djangoproject.com/en/3.2/ref/settings/#databases
 # WARNING: There are overrides in `test_components.py` that require no in-memory
 # databases are used for testing. Make sure all SQLite databases are on disk.
 DATABASES = {
@@ -118,7 +104,6 @@
 }
 
 # Password validation
-# https://docs.djangoproject.com/en/3.2/ref/settings/#auth-password-validators
 AUTH_PASSWORD_VALIDATORS = [
     {
         "NAME": "django.contrib.auth.password_validation.UserAttributeSimilarityValidator",
@@ -135,7 +120,6 @@
 ]
 
 # Internationalization
-# https://docs.djangoproject.com/en/3.2/topics/i18n/
 LANGUAGE_CODE = "en-us"
 TIME_ZONE = "UTC"
 USE_I18N = True
@@ -144,12 +128,10 @@
 
 
 # Default primary key field type
-# https://docs.djangoproject.com/en/3.2/ref/settings/#default-auto-field
 DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField"
 STATIC_ROOT = os.path.join(BASE_DIR, "static-deploy")
 
 # Static Files (CSS, JavaScript, Images)
-# https://docs.djangoproject.com/en/3.2/howto/static-files/
 STATIC_URL = "/static/"
 STATICFILES_DIRS = [
     os.path.join(BASE_DIR, "test_app", "static"),
diff --git a/tests/test_app/urls.py b/tests/test_app/urls.py
index f7f4a3f0..fea71309 100644
--- a/tests/test_app/urls.py
+++ b/tests/test_app/urls.py
@@ -1,8 +1,5 @@
 """test_app URL Configuration
 
-The `urlpatterns` list routes URLs to views. For more information please see:
-    https://docs.djangoproject.com/en/3.2/topics/http/urls/
-
 Examples:
 
 Function views

From d2988d01d4c45361cbefdae7f2b6d982d36fc434 Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Fri, 15 Sep 2023 17:35:56 -0700
Subject: [PATCH 17/20] template tag docs

---
 docs/src/reference/settings.md             | 4 ++--
 docs/src/reference/template-tag.md         | 5 +++--
 src/reactpy_django/templatetags/reactpy.py | 5 +++++
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/docs/src/reference/settings.md b/docs/src/reference/settings.md
index 1063a9c9..8cad2b2b 100644
--- a/docs/src/reference/settings.md
+++ b/docs/src/reference/settings.md
@@ -35,8 +35,8 @@ These are ReactPy-Django's default settings values. You can modify these values
 | `#!python REACTPY_DATABASE` | `#!python "default"` | `#!python "my-reactpy-database"` | Multiprocessing-safe database used to store ReactPy session data. If configuring `#!python REACTPY_DATABASE`, it is mandatory to enable our database router like such:<br/>`#!python DATABASE_ROUTERS = ["reactpy_django.database.Router", ...]` |
 | `#!python REACTPY_CACHE` | `#!python "default"` | `#!python "my-reactpy-cache"` | Cache used for ReactPy JavaScript modules. We recommend installing [`redis`](https://redis.io/) or [`python-diskcache`](https://grantjenks.com/docs/diskcache/tutorial.html#djangocache). |
 | `#!python REACTPY_BACKHAUL_THREAD` | `#!python False` | `#!python True` | Configures whether ReactPy components are rendered in a dedicated thread. This allows the web server to process traffic during ReactPy rendering. Vastly improves throughput with web servers such as [`hypercorn`](https://pgjones.gitlab.io/hypercorn/) and [`uvicorn`](https://www.uvicorn.org/). |
-| `#!python REACTPY_DEFAULT_HOSTS` | `#!python None` | `#!python ["localhost:8000", "localhost:8001", "localhost:8002/subdir" ]` | The default host(s) that can render your ReactPy components. ReactPy will use these hosts in a round-robin fashion, allowing for easy distributed computing. You can use the `#!python host` argument in your [template tag](../reference/template-tag.md#component) as a manual override. |
-| `#!python REACTPY_PRERENDER` | `#!python False` | `#!python True` | Configures whether to statically pre-render your components, which enables SEO compatibility. You can use the `#!python prerender` argument in your [template tag](../reference/template-tag.md#component) as a manual override. During pre-rendering, there are some key differences in behavior:<br/>1. Only the component's first render is pre-rendered.<br/>2. All `#!python connection` related hooks use HTTP.<br/>3. `#!python html.script` is executed during both pre-render and render.<br/>4. Component is non-interactive until a WebSocket connection is formed. |
+| `#!python REACTPY_DEFAULT_HOSTS` | `#!python None` | `#!python ["localhost:8000", "localhost:8001", "localhost:8002/subdir"]` | The default host(s) that can render your ReactPy components. ReactPy will use these hosts in a round-robin fashion, allowing for easy distributed computing. You can use the `#!python host` argument in your [template tag](../reference/template-tag.md#component) as a manual override. |
+| `#!python REACTPY_PRERENDER` | `#!python False` | `#!python True` | Configures whether to pre-render your components, which enables SEO compatibility and increases perceived responsiveness. You can use the `#!python prerender` argument in your [template tag](../reference/template-tag.md#component) as a manual override. During pre-rendering, there are some key differences in behavior:<br/>1. Only the component's first render is pre-rendered.<br/>2. All `#!python connection` related hooks use HTTP.<br/>3. `#!python html.script` is executed during both pre-render and render.<br/>4. Component is non-interactive until a WebSocket connection is formed. |
 
 ## Stability Settings
 
diff --git a/docs/src/reference/template-tag.md b/docs/src/reference/template-tag.md
index 21da4a85..b9b9017f 100644
--- a/docs/src/reference/template-tag.md
+++ b/docs/src/reference/template-tag.md
@@ -25,8 +25,9 @@ This template tag can be used to insert any number of ReactPy components onto yo
     | `#!python dotted_path` | `#!python str` | The dotted path to the component to render. | N/A |
     | `#!python *args` | `#!python Any` | The positional arguments to provide to the component. | N/A |
     | `#!python class` | `#!python str | None` | The HTML class to apply to the top-level component div. | `#!python None` |
-    | `#!python key` | `#!python str | None` | Force the component's root node to use a [specific key value](https://reactpy.dev/docs/guides/creating-interfaces/rendering-data/index.html#organizing-items-with-keys). Using `#!python key` within a template tag is effectively useless. | `#!python None` |
-    | `#!python host` | `#!python str | None` | The host to use for the ReactPy connections. If set to `#!python None`, the host will be automatically configured.<br/>Example values include: `localhost:8000`, `example.com`, `example.com/subdir` | `#!python None` |
+    | `#!python key` | `#!python Any` | Force the component's root node to use a [specific key value](https://reactpy.dev/docs/guides/creating-interfaces/rendering-data/index.html#organizing-items-with-keys). Using `#!python key` within a template tag is effectively useless. | `#!python None` |
+    | `#!python host` | `#!python str | None` | The host to use for the ReactPy connections. If unset, the host will be automatically configured.<br/>Example values include: `localhost:8000`, `example.com`, `example.com/subdir` | `#!python None` |
+    | `#!python prerender` | `#!python str` | If `#!python "True"`, the component will pre-rendered, which enables SEO compatibility and increases perceived responsiveness. | `#!python "False"` |
     | `#!python **kwargs` | `#!python Any` | The keyword arguments to provide to the component. | N/A |
 
     <font size="4">**Returns**</font>
diff --git a/src/reactpy_django/templatetags/reactpy.py b/src/reactpy_django/templatetags/reactpy.py
index 8a4c89c7..d9e0bf5e 100644
--- a/src/reactpy_django/templatetags/reactpy.py
+++ b/src/reactpy_django/templatetags/reactpy.py
@@ -47,9 +47,14 @@ def component(
         *args: The positional arguments to provide to the component.
 
     Keyword Args:
+        class: The HTML class to apply to the top-level component div.
+        key: Force the component's root node to use a specific key value. Using \
+            key within a template tag is effectively useless.
         host: The host to use for the ReactPy connections. If set to `None`, \
             the host will be automatically configured. \
             Example values include: `localhost:8000`, `example.com`, `example.com/subdir`
+        prerender: Configures whether to pre-render this component, which \
+            enables SEO compatibility and increases perceived responsiveness.
         **kwargs: The keyword arguments to provide to the component.
 
     Example ::

From eb200aeecd5353b2e1e7dd0e54a6a80a09f2fe4c Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Fri, 15 Sep 2023 17:46:51 -0700
Subject: [PATCH 18/20] change setup.py metadata

---
 setup.py | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/setup.py b/setup.py
index 9fecde36..72d854ed 100644
--- a/setup.py
+++ b/setup.py
@@ -49,25 +49,33 @@ def list2cmdline(cmd_list):
     "python_requires": ">=3.9",
     "packages": find_packages(str(src_dir)),
     "package_dir": {"": "src"},
-    "description": "Control the web with Python",
-    "author": "Ryan Morshead",
-    "author_email": "ryan.morshead@gmail.com",
+    "description": "It's React, but in Python. Now with Django integration.",
+    "author": "Mark Bakhit",
+    "author_email": "archiethemonger@gmail.com",
     "url": "https://github.com/reactive-python/reactpy-django",
     "license": "MIT",
     "platforms": "Linux, Mac OS X, Windows",
-    "keywords": ["interactive", "widgets", "DOM", "React"],
+    "keywords": [
+        "interactive",
+        "reactive",
+        "widgets",
+        "DOM",
+        "React",
+        "ReactJS",
+        "ReactPy",
+    ],
     "include_package_data": True,
     "zip_safe": False,
     "classifiers": [
         "Framework :: Django",
         "Framework :: Django :: 4.0",
+        "Programming Language :: Python :: 3.9",
+        "Programming Language :: Python :: 3.10",
+        "Programming Language :: Python :: 3.11",
         "Operating System :: OS Independent",
         "Intended Audience :: Developers",
         "Intended Audience :: Science/Research",
         "Topic :: Multimedia :: Graphics",
-        "Programming Language :: Python :: 3.9",
-        "Programming Language :: Python :: 3.10",
-        "Programming Language :: Python :: 3.11",
         "Environment :: Web Environment",
     ],
 }

From 0adf90f136bde6da6e5cbb8401a2bcd735d5d6e2 Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Fri, 15 Sep 2023 18:23:10 -0700
Subject: [PATCH 19/20] fix Windows python build

---
 docs/src/about/code.md |  2 +-
 docs/src/about/docs.md |  2 +-
 setup.py               | 11 +++++------
 3 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/docs/src/about/code.md b/docs/src/about/code.md
index b163d01c..b4790d5b 100644
--- a/docs/src/about/code.md
+++ b/docs/src/about/code.md
@@ -35,7 +35,7 @@ Then, by running the command below you can:
 -   Download, build, and install Javascript dependencies
 
 ```bash linenums="0"
-pip install -e . -r requirements.txt
+pip install -e . -r requirements.txt --verbose --upgrade
 ```
 
 !!! warning "Pitfall"
diff --git a/docs/src/about/docs.md b/docs/src/about/docs.md
index 6c2f413b..5dbd35dd 100644
--- a/docs/src/about/docs.md
+++ b/docs/src/about/docs.md
@@ -28,7 +28,7 @@ Then, by running the command below you can:
 -   Self-host a test server for the documentation
 
 ```bash linenums="0"
-pip install -e . -r requirements.txt --upgrade
+pip install -r requirements.txt --upgrade
 ```
 
 Finally, to verify that everything is working properly, you can manually run the docs preview web server.
diff --git a/setup.py b/setup.py
index 72d854ed..9174e81a 100644
--- a/setup.py
+++ b/setup.py
@@ -9,7 +9,7 @@
 from logging import StreamHandler, getLogger
 from pathlib import Path
 
-from setuptools import find_packages, setup
+from setuptools import find_namespace_packages, setup
 from setuptools.command.develop import develop
 from setuptools.command.sdist import sdist
 
@@ -47,7 +47,7 @@ def list2cmdline(cmd_list):
 package = {
     "name": name,
     "python_requires": ">=3.9",
-    "packages": find_packages(str(src_dir)),
+    "packages": find_namespace_packages(str(src_dir)),
     "package_dir": {"": "src"},
     "description": "It's React, but in Python. Now with Django integration.",
     "author": "Mark Bakhit",
@@ -137,9 +137,8 @@ def run(self):
                 log.info(f"> {list2cmdline(args_list)}")
                 subprocess.run(args_list, cwd=js_dir, check=True)
             except Exception:
-                log.error("Failed to update NPM")
                 log.error(traceback.format_exc())
-                raise
+                log.error("Failed to update NPM, continuing anyway...")
 
             log.info("Installing Javascript...")
             try:
@@ -147,8 +146,8 @@ def run(self):
                 log.info(f"> {list2cmdline(args_list)}")
                 subprocess.run(args_list, cwd=js_dir, check=True)
             except Exception:
-                log.error("Failed to install Javascript")
                 log.error(traceback.format_exc())
+                log.error("Failed to install Javascript")
                 raise
 
             log.info("Building Javascript...")
@@ -157,8 +156,8 @@ def run(self):
                 log.info(f"> {list2cmdline(args_list)}")
                 subprocess.run(args_list, cwd=js_dir, check=True)
             except Exception:
-                log.error("Failed to build Javascript")
                 log.error(traceback.format_exc())
+                log.error("Failed to build Javascript")
                 raise
 
             log.info("Successfully built Javascript")

From cf407de71774da03a3625b57e19ec29166050ed6 Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Fri, 15 Sep 2023 18:42:50 -0700
Subject: [PATCH 20/20] add whitespace in settings

---
 docs/src/reference/settings.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/reference/settings.md b/docs/src/reference/settings.md
index 8cad2b2b..3a013ed7 100644
--- a/docs/src/reference/settings.md
+++ b/docs/src/reference/settings.md
@@ -36,7 +36,7 @@ These are ReactPy-Django's default settings values. You can modify these values
 | `#!python REACTPY_CACHE` | `#!python "default"` | `#!python "my-reactpy-cache"` | Cache used for ReactPy JavaScript modules. We recommend installing [`redis`](https://redis.io/) or [`python-diskcache`](https://grantjenks.com/docs/diskcache/tutorial.html#djangocache). |
 | `#!python REACTPY_BACKHAUL_THREAD` | `#!python False` | `#!python True` | Configures whether ReactPy components are rendered in a dedicated thread. This allows the web server to process traffic during ReactPy rendering. Vastly improves throughput with web servers such as [`hypercorn`](https://pgjones.gitlab.io/hypercorn/) and [`uvicorn`](https://www.uvicorn.org/). |
 | `#!python REACTPY_DEFAULT_HOSTS` | `#!python None` | `#!python ["localhost:8000", "localhost:8001", "localhost:8002/subdir"]` | The default host(s) that can render your ReactPy components. ReactPy will use these hosts in a round-robin fashion, allowing for easy distributed computing. You can use the `#!python host` argument in your [template tag](../reference/template-tag.md#component) as a manual override. |
-| `#!python REACTPY_PRERENDER` | `#!python False` | `#!python True` | Configures whether to pre-render your components, which enables SEO compatibility and increases perceived responsiveness. You can use the `#!python prerender` argument in your [template tag](../reference/template-tag.md#component) as a manual override. During pre-rendering, there are some key differences in behavior:<br/>1. Only the component's first render is pre-rendered.<br/>2. All `#!python connection` related hooks use HTTP.<br/>3. `#!python html.script` is executed during both pre-render and render.<br/>4. Component is non-interactive until a WebSocket connection is formed. |
+| `#!python REACTPY_PRERENDER` | `#!python False` | `#!python True` | Configures whether to pre-render your components, which enables SEO compatibility and increases perceived responsiveness. You can use the `#!python prerender` argument in your [template tag](../reference/template-tag.md#component) as a manual override. During pre-rendering, there are some key differences in behavior:<br/> 1. Only the component's first render is pre-rendered.<br/> 2. All `#!python connection` related hooks use HTTP.<br/> 3. `#!python html.script` is executed during both pre-render and render.<br/> 4. Component is non-interactive until a WebSocket connection is formed. |
 
 ## Stability Settings