@reactpy/client 0.2.1 → 0.3.0

package/dist/components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../src/components.tsx"],"names":[],"mappings":";AAcA,OAAO,EACL,WAAW,EAMZ,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAIjD,wBAAgB,MAAM,CAAC,KAAK,EAAE;IAAE,MAAM,EAAE,aAAa,CAAA;CAAE,GAAG,GAAG,CAAC,OAAO,CAyBpE;AAED,wBAAgB,OAAO,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,WAAW,CAAA;CAAE,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAoB7E"}
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../src/components.tsx"],"names":[],"mappings":";AAaA,OAAO,EACL,WAAW,EAMZ,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAIjD,wBAAgB,MAAM,CAAC,KAAK,EAAE;IAAE,MAAM,EAAE,aAAa,CAAA;CAAE,GAAG,GAAG,CAAC,OAAO,CAsBpE;AAED,wBAAgB,OAAO,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,WAAW,CAAA;CAAE,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAoB7E"}

package/dist/components.js

@@ -6,19 +6,15 @@ const ClientContext = createContext(null);
 export function Layout(props) {
     const currentModel = useState({ tagName: "" })[0];
     const forceUpdate = useForceUpdate();
-    useEffect(() => {
-        props.client.onMessage("layout-update", ({ path, model }) => {
-            if (path === "") {
-                Object.assign(currentModel, model);
-            }
-            else {
-                setJsonPointer(currentModel, path, model);
-            }
-            forceUpdate();
-        });
-        props.client.start();
-        return () => props.client.stop();
-    }, [currentModel, props.client]);
+    useEffect(() => props.client.onMessage("layout-update", ({ path, model }) => {
+        if (path === "") {
+            Object.assign(currentModel, model);
+        }
+        else {
+            setJsonPointer(currentModel, path, model);
+        }
+        forceUpdate();
+    }), [currentModel, props.client]);
     return (React.createElement(ClientContext.Provider, { value: props.client },
         React.createElement(Element, { model: currentModel })));
 }
@@ -94,7 +90,7 @@ function ScriptElement({ model }) {
             ref.current.appendChild(scriptElement);
         }
         else if (scriptContent) {
-            let scriptResult = eval(scriptContent);
+            const scriptResult = eval(scriptContent);
             if (typeof scriptResult == "function") {
                 return scriptResult();
             }

package/dist/messages.d.ts

@@ -1,13 +1,4 @@
 import { ReactPyVdom } from "./reactpy-vdom";
-export interface IMessage {
-    type: string;
-}
-export type ConnectionOpenMessage = {
-    type: "connection-open";
-};
-export type ConnectionCloseMessage = {
-    type: "connection-close";
-};
 export type LayoutUpdateMessage = {
     type: "layout-update";
     path: string;
@@ -18,7 +9,7 @@ export type LayoutEventMessage = {
     target: string;
     data: any;
 };
-export type IncomingMessage = LayoutUpdateMessage | ConnectionOpenMessage | ConnectionCloseMessage;
+export type IncomingMessage = LayoutUpdateMessage;
 export type OutgoingMessage = LayoutEventMessage;
 export type Message = IncomingMessage | OutgoingMessage;
 //# sourceMappingURL=messages.d.ts.map

package/dist/messages.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"messages.d.ts","sourceRoot":"","sources":["../src/messages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,MAAM,qBAAqB,GAAG;IAClC,IAAI,EAAE,iBAAiB,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,IAAI,EAAE,kBAAkB,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,EAAE,eAAe,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,WAAW,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,cAAc,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,GAAG,CAAC;CACX,CAAC;AAEF,MAAM,MAAM,eAAe,GACvB,mBAAmB,GACnB,qBAAqB,GACrB,sBAAsB,CAAC;AAC3B,MAAM,MAAM,eAAe,GAAG,kBAAkB,CAAC;AACjD,MAAM,MAAM,OAAO,GAAG,eAAe,GAAG,eAAe,CAAC"}
+{"version":3,"file":"messages.d.ts","sourceRoot":"","sources":["../src/messages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,EAAE,eAAe,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,WAAW,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,cAAc,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,GAAG,CAAC;CACX,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,mBAAmB,CAAC;AAClD,MAAM,MAAM,eAAe,GAAG,kBAAkB,CAAC;AACjD,MAAM,MAAM,OAAO,GAAG,eAAe,GAAG,eAAe,CAAC"}

package/dist/reactpy-client.d.ts

@@ -1,33 +1,46 @@
-import { OutgoingMessage, IncomingMessage } from "./messages";
 import { ReactPyModule } from "./reactpy-vdom";
 /**
  * A client for communicating with a ReactPy server.
  */
 export interface ReactPyClient {
-    /**
-     * Connect to the server and start receiving messages.
-     *
-     * Message handlers should be registered before calling this method in order to
-     * garuntee that messages are not missed.
-     */
-    start: () => void;
-    /**
-     * Disconnect from the server and stop receiving messages.
-     */
-    stop: () => void;
     /**
      * Register a handler for a message type.
+     *
+     * The first time this is called, the client will be considered ready.
+     *
+     * @param type The type of message to handle.
+     * @param handler The handler to call when a message of the given type is received.
+     * @returns A function to unregister the handler.
      */
-    onMessage: <M extends IncomingMessage>(type: M["type"], handler: (message: M) => void) => void;
+    onMessage(type: string, handler: (message: any) => void): () => void;
     /**
      * Send a message to the server.
+     *
+     * @param message The message to send. Messages must have a `type` property.
      */
-    sendMessage: (message: OutgoingMessage) => void;
+    sendMessage: (message: any) => void;
     /**
-     * Dynamically load a module from the server.
+     * Load a module from the server.
+     * @param moduleName The name of the module to load.
+     * @returns A promise that resolves to the module.
      */
     loadModule: (moduleName: string) => Promise<ReactPyModule>;
 }
+export declare class BaseReactPyClient implements Partial<ReactPyClient> {
+    private readonly handlers;
+    protected readonly ready: Promise<void>;
+    private resolveReady;
+    constructor();
+    onMessage(type: string, handler: (message: any) => void): () => void;
+    /**
+     * 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;
+}
 export type SimpleReactPyClientProps = {
     serverLocation?: LocationProps;
     reconnectOptions?: ReconnectProps;
@@ -68,19 +81,12 @@ type ReconnectProps = {
     backoffRate?: number;
     intervalJitter?: number;
 };
-export declare class SimpleReactPyClient implements ReactPyClient {
-    private resolveShouldOpen;
-    private resolveShouldClose;
+export declare class SimpleReactPyClient extends BaseReactPyClient implements ReactPyClient {
     private readonly urls;
-    private readonly handlers;
     private readonly socket;
     constructor(props: SimpleReactPyClientProps);
-    start(): void;
-    stop(): void;
-    onMessage<M extends IncomingMessage>(type: M["type"], handler: (message: M) => void): void;
-    sendMessage(message: OutgoingMessage): void;
+    sendMessage(message: any): void;
     loadModule(moduleName: string): Promise<ReactPyModule>;
-    private handleIncoming;
 }
 export {};
 //# sourceMappingURL=reactpy-client.d.ts.map

package/dist/reactpy-client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"reactpy-client.d.ts","sourceRoot":"","sources":["../src/reactpy-client.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAG/C;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B;;;;;OAKG;IACH,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB;;OAEG;IACH,SAAS,EAAE,CAAC,CAAC,SAAS,eAAe,EACnC,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,EACf,OAAO,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,IAAI,KAC1B,IAAI,CAAC;IACV;;OAEG;IACH,WAAW,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;IAChD;;OAEG;IACH,UAAU,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC,aAAa,CAAC,CAAC;CAC5D;AAED,MAAM,MAAM,wBAAwB,GAAG;IACrC,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,gBAAgB,CAAC,EAAE,cAAc,CAAC;CACnC,CAAC;AAEF;;;;;;;;;GASG;AACH,KAAK,aAAa,GAAG;IACnB;;;;OAIG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,KAAK,cAAc,GAAG;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,qBAAa,mBAAoB,YAAW,aAAa;IACvD,OAAO,CAAC,iBAAiB,CAA2B;IACpD,OAAO,CAAC,kBAAkB,CAA2B;IACrD,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAa;IAClC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAEvB;IACF,OAAO,CAAC,QAAQ,CAAC,MAAM,CAA0B;gBAErC,KAAK,EAAE,wBAAwB;IAmC3C,KAAK,IAAI,IAAI;IAKb,IAAI,IAAI,IAAI;IAKZ,SAAS,CAAC,CAAC,SAAS,eAAe,EACjC,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,EACf,OAAO,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,IAAI,GAC5B,IAAI;IAIP,WAAW,CAAC,OAAO,EAAE,eAAe,GAAG,IAAI;IAI3C,UAAU,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO,CAAC,aAAa,CAAC;IAItD,OAAO,CAAC,cAAc;CAevB"}
+{"version":3,"file":"reactpy-client.d.ts","sourceRoot":"","sources":["../src/reactpy-client.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAG/C;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B;;;;;;;;OAQG;IACH,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,GAAG,MAAM,IAAI,CAAC;IAErE;;;;OAIG;IACH,WAAW,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IAEpC;;;;OAIG;IACH,UAAU,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC,aAAa,CAAC,CAAC;CAC5D;AAED,qBAAa,iBAAkB,YAAW,OAAO,CAAC,aAAa,CAAC;IAC9D,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAqD;IAC9E,SAAS,CAAC,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC;IACxC,OAAO,CAAC,YAAY,CAA6B;;IAOjD,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,GAAG,MAAM,IAAI;IAQpE;;;;;;OAMG;IACH,SAAS,CAAC,cAAc,CAAC,OAAO,EAAE,GAAG,GAAG,IAAI;CAe7C;AAED,MAAM,MAAM,wBAAwB,GAAG;IACrC,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,gBAAgB,CAAC,EAAE,cAAc,CAAC;CACnC,CAAC;AAEF;;;;;;;;;GASG;AACH,KAAK,aAAa,GAAG;IACnB;;;;OAIG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,KAAK,cAAc,GAAG;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,qBAAa,mBACX,SAAQ,iBACR,YAAW,aAAa;IAExB,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAa;IAClC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAA0B;gBAErC,KAAK,EAAE,wBAAwB;IAmB3C,WAAW,CAAC,OAAO,EAAE,GAAG,GAAG,IAAI;IAI/B,UAAU,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO,CAAC,aAAa,CAAC;CAGvD"}

package/dist/reactpy-client.js

@@ -1,68 +1,62 @@
 import logger from "./logger";
-export class SimpleReactPyClient {
-    resolveShouldOpen;
-    resolveShouldClose;
+export class BaseReactPyClient {
+    handlers = {};
+    ready;
+    resolveReady;
+    constructor() {
+        this.resolveReady = () => { };
+        this.ready = new Promise((resolve) => (this.resolveReady = resolve));
+    }
+    onMessage(type, handler) {
+        (this.handlers[type] || (this.handlers[type] = [])).push(handler);
+        this.resolveReady(undefined);
+        return () => {
+            this.handlers[type] = this.handlers[type].filter((h) => h !== handler);
+        };
+    }
+    /**
+     * 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.
+     */
+    handleIncoming(message) {
+        if (!message.type) {
+            logger.warn("Received message without type", message);
+            return;
+        }
+        const messageHandlers = this.handlers[message.type];
+        if (!messageHandlers) {
+            logger.warn("Received message without handler", message);
+            return;
+        }
+        messageHandlers.forEach((h) => h(message));
+    }
+}
+export class SimpleReactPyClient extends BaseReactPyClient {
     urls;
-    handlers;
     socket;
     constructor(props) {
-        this.handlers = {
-            "connection-open": [],
-            "connection-close": [],
-            "layout-update": [],
-        };
+        super();
         this.urls = getServerUrls(props.serverLocation || {
             url: document.location.origin,
             route: document.location.pathname,
             query: document.location.search,
         });
-        this.resolveShouldOpen = () => {
-            throw new Error("Could not start client");
-        };
-        this.resolveShouldClose = () => {
-            throw new Error("Could not stop client");
-        };
-        const shouldOpen = new Promise((r) => (this.resolveShouldOpen = r));
-        const shouldClose = new Promise((r) => (this.resolveShouldClose = r));
-        this.socket = startReconnectingWebSocket({
-            shouldOpen,
-            shouldClose,
+        this.socket = createReconnectingWebSocket({
+            readyPromise: this.ready,
             url: this.urls.stream,
-            onOpen: () => this.handleIncoming({ type: "connection-open" }),
             onMessage: async ({ data }) => this.handleIncoming(JSON.parse(data)),
-            onClose: () => this.handleIncoming({ type: "connection-close" }),
             ...props.reconnectOptions,
         });
     }
-    start() {
-        logger.log("starting client...");
-        this.resolveShouldOpen(undefined);
-    }
-    stop() {
-        logger.log("stopping client...");
-        this.resolveShouldClose(undefined);
-    }
-    onMessage(type, handler) {
-        this.handlers[type].push(handler);
-    }
     sendMessage(message) {
         this.socket.current?.send(JSON.stringify(message));
     }
     loadModule(moduleName) {
         return import(`${this.urls.modules}/${moduleName}`);
     }
-    handleIncoming(message) {
-        if (!message.type) {
-            logger.warn("Received message without type", message);
-            return;
-        }
-        const messageHandlers = this.handlers[message.type];
-        if (!messageHandlers) {
-            logger.warn("Received message without handler", message);
-            return;
-        }
-        messageHandlers.forEach((h) => h(message));
-    }
 }
 function getServerUrls(props) {
     const base = new URL(`${props.url || document.location.origin}/_reactpy`);
@@ -73,12 +67,12 @@ function getServerUrls(props) {
     const stream = `${streamProtocol}://${base.host}${streamPath}${props.query}`;
     return { base, modules, assets, stream };
 }
-function startReconnectingWebSocket(props) {
+function createReconnectingWebSocket(props) {
     const { maxInterval = 60000, maxRetries = 50, backoffRate = 1.1, intervalJitter = 0.1, } = props;
     const startInterval = 750;
     let retries = 0;
     let interval = startInterval;
-    let closed = false;
+    const closed = false;
     let everConnected = false;
     const socket = {};
     const connect = () => {
@@ -91,7 +85,9 @@ function startReconnectingWebSocket(props) {
             logger.log("client connected");
             interval = startInterval;
             retries = 0;
-            props.onOpen();
+            if (props.onOpen) {
+                props.onOpen();
+            }
         };
         socket.current.onmessage = props.onMessage;
         socket.current.onclose = () => {
@@ -100,7 +96,9 @@ function startReconnectingWebSocket(props) {
                 return;
             }
             logger.log("client disconnected");
-            props.onClose();
+            if (props.onClose) {
+                props.onClose();
+            }
             if (retries >= maxRetries) {
                 return;
             }
@@ -111,11 +109,7 @@ function startReconnectingWebSocket(props) {
             retries++;
         };
     };
-    props.shouldOpen.then(connect);
-    props.shouldClose.then(() => {
-        closed = true;
-        socket.current?.close();
-    });
+    props.readyPromise.then(() => logger.log("starting client...")).then(connect);
     return socket;
 }
 function nextInterval(currentInterval, backoffRate, maxInterval) {

package/dist/reactpy-vdom.js

@@ -98,8 +98,8 @@ export function createAttributes(model, client) {
 function createEventHandler(client, name, { target, preventDefault, stopPropagation }) {
     return [
         name,
-        function () {
-            const data = Array.from(arguments).map((value) => {
+        function (...args) {
+            const data = Array.from(args).map((value) => {
                 if (!(typeof value === "object" && value.nativeEvent)) {
                     return value;
                 }

package/package.json

@@ -6,7 +6,7 @@
   "license": "MIT",
   "name": "@reactpy/client",
   "type": "module",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "dependencies": {
     "event-to-object": "^0.1.2",
     "json-pointer": "^0.6.2"
@@ -15,7 +15,6 @@
     "@types/json-pointer": "^1.0.31",
     "@types/react": "^17.0",
     "@types/react-dom": "^17.0",
-    "prettier": "^3.0.0-alpha.6",
     "typescript": "^4.9.5"
   },
   "peerDependencies": {
@@ -28,9 +27,7 @@
   },
   "scripts": {
     "build": "tsc -b",
-    "format": "prettier --write .",
     "test": "npm run check:tests",
-    "check:format": "prettier --check .",
     "check:tests": "echo 'no tests'",
     "check:types": "tsc --noEmit"
   }

package/src/components.tsx

@@ -11,7 +11,6 @@ import React, {
 } from "react";
 // @ts-ignore
 import { set as setJsonPointer } from "json-pointer";
-import { LayoutUpdateMessage } from "./messages";
 import {
   ReactPyVdom,
   ReactPyComponent,
@@ -28,21 +27,18 @@ export function Layout(props: { client: ReactPyClient }): JSX.Element {
   const currentModel: ReactPyVdom = useState({ tagName: "" })[0];
   const forceUpdate = useForceUpdate();
 
-  useEffect(() => {
-    props.client.onMessage<LayoutUpdateMessage>(
-      "layout-update",
-      ({ path, model }) => {
+  useEffect(
+    () =>
+      props.client.onMessage("layout-update", ({ path, model }) => {
         if (path === "") {
           Object.assign(currentModel, model);
         } else {
           setJsonPointer(currentModel, path, model);
         }
         forceUpdate();
-      },
-    );
-    props.client.start();
-    return () => props.client.stop();
-  }, [currentModel, props.client]);
+      }),
+    [currentModel, props.client],
+  );
 
   return (
     <ClientContext.Provider value={props.client}>
@@ -140,7 +136,7 @@ function ScriptElement({ model }: { model: ReactPyVdom }) {
       }
       ref.current.appendChild(scriptElement);
     } else if (scriptContent) {
-      let scriptResult = eval(scriptContent);
+      const scriptResult = eval(scriptContent);
       if (typeof scriptResult == "function") {
         return scriptResult();
       }

package/src/messages.ts

@@ -1,17 +1,5 @@
 import { ReactPyVdom } from "./reactpy-vdom";
 
-export interface IMessage {
-  type: string;
-}
-
-export type ConnectionOpenMessage = {
-  type: "connection-open";
-};
-
-export type ConnectionCloseMessage = {
-  type: "connection-close";
-};
-
 export type LayoutUpdateMessage = {
   type: "layout-update";
   path: string;
@@ -24,9 +12,6 @@ export type LayoutEventMessage = {
   data: any;
 };
 
-export type IncomingMessage =
-  | LayoutUpdateMessage
-  | ConnectionOpenMessage
-  | ConnectionCloseMessage;
+export type IncomingMessage = LayoutUpdateMessage;
 export type OutgoingMessage = LayoutEventMessage;
 export type Message = IncomingMessage | OutgoingMessage;

package/src/reactpy-client.ts

@@ -1,4 +1,3 @@
-import { OutgoingMessage, IncomingMessage } from "./messages";
 import { ReactPyModule } from "./reactpy-vdom";
 import logger from "./logger";
 
@@ -6,34 +5,74 @@ import logger from "./logger";
  * A client for communicating with a ReactPy server.
  */
 export interface ReactPyClient {
-  /**
-   * Connect to the server and start receiving messages.
-   *
-   * Message handlers should be registered before calling this method in order to
-   * garuntee that messages are not missed.
-   */
-  start: () => void;
-  /**
-   * Disconnect from the server and stop receiving messages.
-   */
-  stop: () => void;
   /**
    * Register a handler for a message type.
+   *
+   * The first time this is called, the client will be considered ready.
+   *
+   * @param type The type of message to handle.
+   * @param handler The handler to call when a message of the given type is received.
+   * @returns A function to unregister the handler.
    */
-  onMessage: <M extends IncomingMessage>(
-    type: M["type"],
-    handler: (message: M) => void,
-  ) => void;
+  onMessage(type: string, handler: (message: any) => void): () => void;
+
   /**
    * Send a message to the server.
+   *
+   * @param message The message to send. Messages must have a `type` property.
    */
-  sendMessage: (message: OutgoingMessage) => void;
+  sendMessage: (message: any) => void;
+
   /**
-   * Dynamically load a module from the server.
+   * Load a module from the server.
+   * @param moduleName The name of the module to load.
+   * @returns A promise that resolves to the module.
    */
   loadModule: (moduleName: string) => Promise<ReactPyModule>;
 }
 
+export class BaseReactPyClient implements Partial<ReactPyClient> {
+  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);
+    };
+  }
+
+  /**
+   * 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 type SimpleReactPyClientProps = {
   serverLocation?: LocationProps;
   reconnectOptions?: ReconnectProps;
@@ -77,21 +116,15 @@ type ReconnectProps = {
   intervalJitter?: number;
 };
 
-export class SimpleReactPyClient implements ReactPyClient {
-  private resolveShouldOpen: (value: unknown) => void;
-  private resolveShouldClose: (value: unknown) => void;
+export class SimpleReactPyClient
+  extends BaseReactPyClient
+  implements ReactPyClient
+{
   private readonly urls: ServerUrls;
-  private readonly handlers: {
-    [key in IncomingMessage["type"]]: ((message: any) => void)[];
-  };
   private readonly socket: { current?: WebSocket };
 
   constructor(props: SimpleReactPyClientProps) {
-    this.handlers = {
-      "connection-open": [],
-      "connection-close": [],
-      "layout-update": [],
-    };
+    super();
 
     this.urls = getServerUrls(
       props.serverLocation || {
@@ -101,66 +134,21 @@ export class SimpleReactPyClient implements ReactPyClient {
       },
     );
 
-    this.resolveShouldOpen = () => {
-      throw new Error("Could not start client");
-    };
-    this.resolveShouldClose = () => {
-      throw new Error("Could not stop client");
-    };
-    const shouldOpen = new Promise((r) => (this.resolveShouldOpen = r));
-    const shouldClose = new Promise((r) => (this.resolveShouldClose = r));
-
-    this.socket = startReconnectingWebSocket({
-      shouldOpen,
-      shouldClose,
+    this.socket = createReconnectingWebSocket({
+      readyPromise: this.ready,
       url: this.urls.stream,
-      onOpen: () => this.handleIncoming({ type: "connection-open" }),
       onMessage: async ({ data }) => this.handleIncoming(JSON.parse(data)),
-      onClose: () => this.handleIncoming({ type: "connection-close" }),
       ...props.reconnectOptions,
     });
   }
 
-  start(): void {
-    logger.log("starting client...");
-    this.resolveShouldOpen(undefined);
-  }
-
-  stop(): void {
-    logger.log("stopping client...");
-    this.resolveShouldClose(undefined);
-  }
-
-  onMessage<M extends IncomingMessage>(
-    type: M["type"],
-    handler: (message: M) => void,
-  ): void {
-    this.handlers[type].push(handler);
-  }
-
-  sendMessage(message: OutgoingMessage): void {
+  sendMessage(message: any): void {
     this.socket.current?.send(JSON.stringify(message));
   }
 
   loadModule(moduleName: string): Promise<ReactPyModule> {
     return import(`${this.urls.modules}/${moduleName}`);
   }
-
-  private handleIncoming(message: IncomingMessage): 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));
-  }
 }
 
 type ServerUrls = {
@@ -182,14 +170,13 @@ function getServerUrls(props: LocationProps): ServerUrls {
   return { base, modules, assets, stream };
 }
 
-function startReconnectingWebSocket(
+function createReconnectingWebSocket(
   props: {
-    shouldOpen: Promise<any>;
-    shouldClose: Promise<any>;
     url: string;
-    onOpen: () => void;
+    readyPromise: Promise<void>;
+    onOpen?: () => void;
     onMessage: (message: MessageEvent<any>) => void;
-    onClose: () => void;
+    onClose?: () => void;
   } & ReconnectProps,
 ) {
   const {
@@ -202,7 +189,7 @@ function startReconnectingWebSocket(
   const startInterval = 750;
   let retries = 0;
   let interval = startInterval;
-  let closed = false;
+  const closed = false;
   let everConnected = false;
   const socket: { current?: WebSocket } = {};
 
@@ -216,7 +203,9 @@ function startReconnectingWebSocket(
       logger.log("client connected");
       interval = startInterval;
       retries = 0;
-      props.onOpen();
+      if (props.onOpen) {
+        props.onOpen();
+      }
     };
     socket.current.onmessage = props.onMessage;
     socket.current.onclose = () => {
@@ -226,7 +215,9 @@ function startReconnectingWebSocket(
       }
 
       logger.log("client disconnected");
-      props.onClose();
+      if (props.onClose) {
+        props.onClose();
+      }
 
       if (retries >= maxRetries) {
         return;
@@ -242,11 +233,7 @@ function startReconnectingWebSocket(
     };
   };
 
-  props.shouldOpen.then(connect);
-  props.shouldClose.then(() => {
-    closed = true;
-    socket.current?.close();
-  });
+  props.readyPromise.then(() => logger.log("starting client...")).then(connect);
 
   return socket;
 }

package/src/reactpy-vdom.tsx

@@ -155,8 +155,8 @@ function createEventHandler(
 ): [string, () => void] {
   return [
     name,
-    function () {
-      const data = Array.from(arguments).map((value) => {
+    function (...args: any[]) {
+      const data = Array.from(args).map((value) => {
         if (!(typeof value === "object" && value.nativeEvent)) {
           return value;
         }