Prepared the client for offline handling

Author: Archmonger

src/js/package.json

@@ -1,10 +1,7 @@
 {
-	"description": "reactpy-django client",
-	"main": "src/index.ts",
+	"description": "ReactPy-Django Client",
+	"main": "src/index.tsx",
 	"type": "module",
-	"files": [
-		"src/**/*.js"
-	],
 	"scripts": {
 		"build": "rollup --config",
 		"format": "prettier --ignore-path .gitignore --write ."

src/js/rollup.config.mjs

@@ -4,7 +4,7 @@ import replace from "@rollup/plugin-replace";
 import typescript from "@rollup/plugin-typescript";
 
 export default {
-	input: "src/index.ts",
+	input: "src/index.tsx",
 	output: {
 		file: "../reactpy_django/static/reactpy_django/client.js",
 		format: "esm",

src/js/src/client.ts

@@ -12,6 +12,9 @@ export class ReactPyDjangoClient
 {
 	urls: ReactPyUrls;
 	socket: { current?: WebSocket };
+	mountElement: HTMLElement | null = null;
+	prerenderElement: HTMLElement | null = null;
+	offlineElement: HTMLElement | null = null;
 
 	constructor(props: ReactPyDjangoClientProps) {
 		super();
@@ -23,6 +26,9 @@ export class ReactPyDjangoClient
 				this.handleIncoming(JSON.parse(data)),
 			...props.reconnectOptions,
 		});
+		this.mountElement = props.mountElement;
+		this.prerenderElement = props.prerenderElement;
+		this.offlineElement = props.offlineElement;
 	}
 
 	sendMessage(message: any): void {

src/js/src/index.ts renamed to src/js/src/index.tsx

@@ -1,5 +1,8 @@
-import { mount } from "./mount";
+
 import { ReactPyDjangoClient } from "./client";
+import React from "react";
+import { render } from "react-dom";
+import { Layout } from "@reactpy/client/src/components";
 
 export function mountComponent(
 	mountElement: HTMLElement,
@@ -59,8 +62,24 @@ export function mountComponent(
 			backoffMultiplier: reconnectBackoffMultiplier,
 			maxRetries: reconnectMaxRetries,
 		},
+		mountElement: mountElement,
+		prerenderElement: document.getElementById(
+			mountElement.id + "-prerender"
+		),
+		offlineElement: document.getElementById(mountElement.id + "-offline"),
 	});
 
+
+	// Replace the prerender element with the real element on the first layout update
+	if (client.prerenderElement) {
+		client.onMessage("layout-update", ({ path, model }) => {
+			if (client.prerenderElement) {
+				client.prerenderElement.replaceWith(client.mountElement);
+				client.prerenderElement = null;
+			}
+		});
+	}
+
 	// Start rendering the component
-	mount(mountElement, client);
+	render(<Layout client={client} />, client.mountElement);
 }

src/js/src/mount.tsx

@@ -14,4 +14,7 @@ export type ReactPyUrls = {
 export type ReactPyDjangoClientProps = {
 	urls: ReactPyUrls;
 	reconnectOptions: ReconnectOptions;
+	mountElement: HTMLElement | null;
+	prerenderElement: HTMLElement | null;
+	offlineElement: HTMLElement | null;
 };

src/js/src/types.ts

@@ -32,14 +32,14 @@ export function createReconnectingWebSocket(props: {
 		};
 		socket.current.onmessage = props.onMessage;
 		socket.current.onclose = () => {
+			if (props.onClose) {
+				props.onClose();
+			}
 			if (!everConnected) {
 				console.info("ReactPy failed to connect!");
 				return;
 			}
 			console.info("ReactPy disconnected!");
-			if (props.onClose) {
-				props.onClose();
-			}
 			if (retries >= maxRetries) {
 				console.info("ReactPy connection max retries exhausted!");
 				return;

src/js/src/utils.ts

@@ -1,9 +1,10 @@
 {
     "compilerOptions": {
-        "target": "ES2017",
+        "target": "ES2022",
         "module": "esnext",
         "moduleResolution": "node",
         "jsx": "react",
+        "allowSyntheticDefaultImports": true
     },
     "paths": {
         "react": [