functional standalone app and static apps, broken dispatcher

Author: Archmonger

pyproject.toml

@@ -37,6 +37,7 @@ dependencies = [
   "colorlog >=6",
   "asgiref >=3",
   "lxml >=4",
+  "servestatic >= 3.0.0",
 ]
 dynamic = ["version"]
 urls.Changelog = "https://reactpy.dev/docs/about/changelog.html"
@@ -69,7 +70,7 @@ commands = [
   'bun run --cwd "src/js/packages/@reactpy/client" build',
   'bun install --cwd "src/js/packages/@reactpy/app"',
   'bun run --cwd "src/js/packages/@reactpy/app" build',
-  'python "src/build_scripts/copy_dir.py" "src/js/packages/@reactpy/app/dist" "src/reactpy/static"',
+  'python "src/build_scripts/copy_dir.py" "src/js/packages/@reactpy/app/dist" "src/reactpy/static" ".*\.js(\.map)?$"',
 ]
 artifacts = []
 

src/js/packages/@reactpy/app/package.json

@@ -11,7 +11,7 @@
     "typescript": "^5.7.3"
   },
   "scripts": {
-    "build": "bun build \"src/index.html\" --outdir=\"dist\" --minify --sourcemap=\"linked\" --experimental-html --public-path=\"reactpy/static/\"",
+    "build": "bun build \"src/index.ts\" --outdir=\"dist\" --minify --sourcemap=\"linked\"",
     "checkTypes": "tsc --noEmit"
   }
 }

src/js/packages/@reactpy/app/src/index.html

@@ -1 +1 @@
-export { mount } from "@reactpy/client";
+export { mountReactPy } from "@reactpy/client";

src/js/packages/@reactpy/app/src/index.ts

@@ -3,11 +3,11 @@ import { ReactPyClient } from "./client";
 import { Layout } from "./components";
 import { MountProps } from "./types";
 
-export function mount(props: MountProps) {
+export function mountReactPy(props: MountProps) {
   // WebSocket route for component rendering
   const wsProtocol = `ws${window.location.protocol === "https:" ? "s" : ""}:`;
-  let wsOrigin = `${wsProtocol}//${window.location.host}`;
-  let componentUrl = new URL(`${wsOrigin}/${props.componentPath}`);
+  const wsOrigin = `${wsProtocol}//${window.location.host}`;
+  const componentUrl = new URL(`${wsOrigin}/${props.pathPrefix}/`);
 
   // Embed the initial HTTP path into the WebSocket URL
   componentUrl.searchParams.append("http_pathname", window.location.pathname);
@@ -20,10 +20,10 @@ export function mount(props: MountProps) {
     urls: {
       componentUrl: componentUrl,
       query: document.location.search,
-      jsModules: `${window.location.origin}/${props.jsModulesPath}`,
+      jsModules: `${window.location.origin}/${props.pathPrefix}/modules/`,
     },
     reconnectOptions: {
-      startInterval: props.reconnectStartInterval || 750,
+      interval: props.reconnectInterval || 750,
       maxInterval: props.reconnectMaxInterval || 60000,
       backoffMultiplier: props.reconnectBackoffMultiplier || 1.25,
       maxRetries: props.reconnectMaxRetries || 150,

src/js/packages/@reactpy/client/src/mount.tsx

@@ -3,7 +3,7 @@ import { ComponentType } from "react";
 // #### CONNECTION TYPES ####
 
 export type ReconnectOptions = {
-  startInterval: number;
+  interval: number;
   maxInterval: number;
   maxRetries: number;
   backoffMultiplier: number;
@@ -15,7 +15,7 @@ export type CreateReconnectingWebSocketProps = {
   onMessage: (message: MessageEvent<any>) => void;
   onOpen?: () => void;
   onClose?: () => void;
-  startInterval: number;
+  interval: number;
   maxInterval: number;
   maxRetries: number;
   backoffMultiplier: number;
@@ -35,9 +35,8 @@ export type GenericReactPyClientProps = {
 
 export type MountProps = {
   mountElement: HTMLElement;
-  componentPath: string;
-  jsModulesPath: string;
-  reconnectStartInterval?: number;
+  pathPrefix: string;
+  reconnectInterval?: number;
   reconnectMaxInterval?: number;
   reconnectMaxRetries?: number;
   reconnectBackoffMultiplier?: number;

src/js/packages/@reactpy/client/src/types.ts

@@ -4,9 +4,9 @@ import log from "./logger";
 export function createReconnectingWebSocket(
   props: CreateReconnectingWebSocketProps,
 ) {
-  const { startInterval, maxInterval, maxRetries, backoffMultiplier } = props;
+  const { interval, maxInterval, maxRetries, backoffMultiplier } = props;
   let retries = 0;
-  let interval = startInterval;
+  let currentInterval = interval;
   let everConnected = false;
   const closed = false;
   const socket: { current?: WebSocket } = {};
@@ -18,8 +18,8 @@ export function createReconnectingWebSocket(
     socket.current = new WebSocket(props.url);
     socket.current.onopen = () => {
       everConnected = true;
-      log.info("ReactPy connected!");
-      interval = startInterval;
+      log.info("Connected!");
+      currentInterval = interval;
       retries = 0;
       if (props.onOpen) {
         props.onOpen();
@@ -31,26 +31,28 @@ export function createReconnectingWebSocket(
         props.onClose();
       }
       if (!everConnected) {
-        log.info("ReactPy failed to connect!");
+        log.info("Failed to connect!");
         return;
       }
-      log.info("ReactPy disconnected!");
+      log.info("Disconnected!");
       if (retries >= maxRetries) {
-        log.info("ReactPy connection max retries exhausted!");
+        log.info("Connection max retries exhausted!");
         return;
       }
       log.info(
-        `ReactPy reconnecting in ${(interval / 1000).toPrecision(4)} seconds...`,
+        `Reconnecting in ${(currentInterval / 1000).toPrecision(4)} seconds...`,
+      );
+      setTimeout(connect, currentInterval);
+      currentInterval = nextInterval(
+        currentInterval,
+        backoffMultiplier,
+        maxInterval,
       );
-      setTimeout(connect, interval);
-      interval = nextInterval(interval, backoffMultiplier, maxInterval);
       retries++;
     };
   };
 
-  props.readyPromise
-    .then(() => log.info("Starting ReactPy client..."))
-    .then(connect);
+  props.readyPromise.then(() => log.info("Starting client...")).then(connect);
 
   return socket;
 }