rewrite @reactpy/client

Author: Archmonger

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

@@ -0,0 +1,83 @@
+import logger from "./logger";
+import {
+  ReactPyClientInterface,
+  ReactPyModule,
+  GenericReactPyClientProps,
+  ReactPyUrls,
+} from "./types";
+import { createReconnectingWebSocket } from "./websocket";
+
+export abstract class BaseReactPyClient implements ReactPyClientInterface {
+  private readonly handlers: { [key: string]: ((message: any) => void)[] } = {};
+  protected readonly ready: Promise<void>;
+  private resolveReady: (value: undefined) => void;
+
+  constructor() {
+    this.resolveReady = () => {};
+    this.ready = new Promise((resolve) => (this.resolveReady = resolve));
+  }
+
+  onMessage(type: string, handler: (message: any) => void): () => void {
+    (this.handlers[type] || (this.handlers[type] = [])).push(handler);
+    this.resolveReady(undefined);
+    return () => {
+      this.handlers[type] = this.handlers[type].filter((h) => h !== handler);
+    };
+  }
+
+  abstract sendMessage(message: any): void;
+  abstract loadModule(moduleName: string): Promise<ReactPyModule>;
+
+  /**
+   * Handle an incoming message.
+   *
+   * This should be called by subclasses when a message is received.
+   *
+   * @param message The message to handle. The message must have a `type` property.
+   */
+  protected handleIncoming(message: any): void {
+    if (!message.type) {
+      logger.warn("Received message without type", message);
+      return;
+    }
+
+    const messageHandlers: ((m: any) => void)[] | undefined =
+      this.handlers[message.type];
+    if (!messageHandlers) {
+      logger.warn("Received message without handler", message);
+      return;
+    }
+
+    messageHandlers.forEach((h) => h(message));
+  }
+}
+
+export class ReactPyClient
+  extends BaseReactPyClient
+  implements ReactPyClientInterface
+{
+  urls: ReactPyUrls;
+  socket: { current?: WebSocket };
+  mountElement: HTMLElement;
+
+  constructor(props: GenericReactPyClientProps) {
+    super();
+
+    this.urls = props.urls;
+    this.mountElement = props.mountElement;
+    this.socket = createReconnectingWebSocket({
+      url: this.urls.componentUrl,
+      readyPromise: this.ready,
+      ...props.reconnectOptions,
+      onMessage: async ({ data }) => this.handleIncoming(JSON.parse(data)),
+    });
+  }
+
+  sendMessage(message: any): void {
+    this.socket.current?.send(JSON.stringify(message));
+  }
+
+  loadModule(moduleName: string): Promise<ReactPyModule> {
+    return import(`${this.urls.jsModules}/${moduleName}`);
+  }
+}

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

@@ -1,29 +1,26 @@
+import { set as setJsonPointer } from "json-pointer";
 import React, {
-  createElement,
+  ChangeEvent,
   createContext,
-  useState,
-  useRef,
-  useContext,
-  useEffect,
+  createElement,
   Fragment,
   MutableRefObject,
-  ChangeEvent,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
 } from "preact/compat";
-// @ts-ignore
-import { set as setJsonPointer } from "json-pointer";
 import {
-  ReactPyVdom,
-  ReactPyComponent,
-  createChildren,
-  createAttributes,
-  loadImportSource,
   ImportSourceBinding,
-} from "./reactpy-vdom";
-import { ReactPyClient } from "./reactpy-client";
+  ReactPyComponent,
+  ReactPyVdom,
+  ReactPyClientInterface,
+} from "./types";
+import { createAttributes, createChildren, loadImportSource } from "./vdom";
 
-const ClientContext = createContext<ReactPyClient>(null as any);
+const ClientContext = createContext<ReactPyClientInterface>(null as any);
 
-export function Layout(props: { client: ReactPyClient }): JSX.Element {
+export function Layout(props: { client: ReactPyClientInterface }): JSX.Element {
   const currentModel: ReactPyVdom = useState({ tagName: "" })[0];
   const forceUpdate = useForceUpdate();
 

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

@@ -1,5 +1,6 @@
+export * from "./client";
 export * from "./components";
-export * from "./messages";
 export * from "./mount";
-export * from "./reactpy-client";
-export * from "./reactpy-vdom";
+export * from "./types";
+export * from "./vdom";
+export * from "./websocket";

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

@@ -1,5 +1,6 @@
 export default {
   log: (...args: any[]): void => console.log("[ReactPy]", ...args),
+  info: (...args: any[]): void => console.info("[ReactPy]", ...args),
   warn: (...args: any[]): void => console.warn("[ReactPy]", ...args),
   error: (...args: any[]): void => console.error("[ReactPy]", ...args),
 };

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

@@ -1,8 +1,37 @@
-import React from "preact/compat";
-import { render } from "preact/compat";
+import { default as React, default as ReactDOM } from "preact/compat";
+import { ReactPyClient } from "./client";
 import { Layout } from "./components";
-import { ReactPyClient } from "./reactpy-client";
+import { MountProps } from "./types";
 
-export function mount(element: HTMLElement, client: ReactPyClient): void {
-  render(<Layout client={client} />, element);
+export function mount(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}`);
+
+  // Embed the initial HTTP path into the WebSocket URL
+  componentUrl.searchParams.append("http_pathname", window.location.pathname);
+  if (window.location.search) {
+    componentUrl.searchParams.append("http_search", window.location.search);
+  }
+
+  // Configure a new ReactPy client
+  const client = new ReactPyClient({
+    urls: {
+      componentUrl: componentUrl,
+      query: document.location.search,
+      jsModules: `${window.location.origin}/${props.jsModulesPath}`,
+    },
+    reconnectOptions: {
+      startInterval: props.reconnectStartInterval || 750,
+      maxInterval: props.reconnectMaxInterval || 60000,
+      backoffMultiplier: props.reconnectBackoffMultiplier || 1.25,
+      maxRetries: props.reconnectMaxRetries || 150,
+    },
+    mountElement: props.mountElement,
+  });
+
+  // Start rendering the component
+  // eslint-disable-next-line react/no-deprecated
+  ReactDOM.render(<Layout client={client} />, props.mountElement);
 }