@reactpy/client 0.2.0 → 0.3.0

package/dist/components.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { ReactPyVdom } from "./reactpy-vdom";
+import { ReactPyClient } from "./reactpy-client";
+export declare function Layout(props: {
+    client: ReactPyClient;
+}): JSX.Element;
+export declare function Element({ model }: {
+    model: ReactPyVdom;
+}): JSX.Element | null;
+//# sourceMappingURL=components.d.ts.map

package/dist/components.d.ts.map

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,168 @@
+import React, { createElement, createContext, useState, useRef, useContext, useEffect, Fragment, } from "react";
+// @ts-ignore
+import { set as setJsonPointer } from "json-pointer";
+import { createChildren, createAttributes, loadImportSource, } from "./reactpy-vdom";
+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();
+    }), [currentModel, props.client]);
+    return (React.createElement(ClientContext.Provider, { value: props.client },
+        React.createElement(Element, { model: currentModel })));
+}
+export function Element({ model }) {
+    if (model.error !== undefined) {
+        if (model.error) {
+            return React.createElement("pre", null, model.error);
+        }
+        else {
+            return null;
+        }
+    }
+    let SpecializedElement;
+    if (model.tagName in SPECIAL_ELEMENTS) {
+        SpecializedElement =
+            SPECIAL_ELEMENTS[model.tagName];
+    }
+    else if (model.importSource) {
+        SpecializedElement = ImportedElement;
+    }
+    else {
+        SpecializedElement = StandardElement;
+    }
+    return React.createElement(SpecializedElement, { model: model });
+}
+function StandardElement({ model }) {
+    const client = React.useContext(ClientContext);
+    // Use createElement here to avoid warning about variable numbers of children not
+    // having keys. Warning about this must now be the responsibility of the client
+    // providing the models instead of the client rendering them.
+    return createElement(model.tagName === "" ? Fragment : model.tagName, createAttributes(model, client), ...createChildren(model, (child) => {
+        return React.createElement(Element, { model: child, key: child.key });
+    }));
+}
+function UserInputElement({ model }) {
+    const client = useContext(ClientContext);
+    const props = createAttributes(model, client);
+    const [value, setValue] = React.useState(props.value);
+    // honor changes to value from the client via props
+    React.useEffect(() => setValue(props.value), [props.value]);
+    const givenOnChange = props.onChange;
+    if (typeof givenOnChange === "function") {
+        props.onChange = (event) => {
+            // immediately update the value to give the user feedback
+            setValue(event.target.value);
+            // allow the client to respond (and possibly change the value)
+            givenOnChange(event);
+        };
+    }
+    // Use createElement here to avoid warning about variable numbers of children not
+    // having keys. Warning about this must now be the responsibility of the client
+    // providing the models instead of the client rendering them.
+    return createElement(model.tagName, 
+    // overwrite
+    { ...props, value }, ...createChildren(model, (child) => (React.createElement(Element, { model: child, key: child.key }))));
+}
+function ScriptElement({ model }) {
+    const ref = useRef(null);
+    React.useEffect(() => {
+        if (!ref.current) {
+            return;
+        }
+        const scriptContent = model?.children?.filter((value) => typeof value == "string")[0];
+        let scriptElement;
+        if (model.attributes) {
+            scriptElement = document.createElement("script");
+            for (const [k, v] of Object.entries(model.attributes)) {
+                scriptElement.setAttribute(k, v);
+            }
+            if (scriptContent) {
+                scriptElement.appendChild(document.createTextNode(scriptContent));
+            }
+            ref.current.appendChild(scriptElement);
+        }
+        else if (scriptContent) {
+            const scriptResult = eval(scriptContent);
+            if (typeof scriptResult == "function") {
+                return scriptResult();
+            }
+        }
+    }, [model.key, ref.current]);
+    return React.createElement("div", { ref: ref });
+}
+function ImportedElement({ model }) {
+    const importSourceVdom = model.importSource;
+    const importSourceRef = useImportSource(model);
+    if (!importSourceVdom) {
+        return null;
+    }
+    const importSourceFallback = importSourceVdom.fallback;
+    if (!importSourceVdom) {
+        // display a fallback if one was given
+        if (!importSourceFallback) {
+            return null;
+        }
+        else if (typeof importSourceFallback === "string") {
+            return React.createElement("div", null, importSourceFallback);
+        }
+        else {
+            return React.createElement(StandardElement, { model: importSourceFallback });
+        }
+    }
+    else {
+        return React.createElement("div", { ref: importSourceRef });
+    }
+}
+function useForceUpdate() {
+    const [, setState] = useState(false);
+    return () => setState((old) => !old);
+}
+function useImportSource(model) {
+    const vdomImportSource = model.importSource;
+    const mountPoint = useRef(null);
+    const client = React.useContext(ClientContext);
+    const [binding, setBinding] = useState(null);
+    React.useEffect(() => {
+        let unmounted = false;
+        if (vdomImportSource) {
+            loadImportSource(vdomImportSource, client).then((bind) => {
+                if (!unmounted && mountPoint.current) {
+                    setBinding(bind(mountPoint.current));
+                }
+            });
+        }
+        return () => {
+            unmounted = true;
+            if (binding &&
+                vdomImportSource &&
+                !vdomImportSource.unmountBeforeUpdate) {
+                binding.unmount();
+            }
+        };
+    }, [client, vdomImportSource, setBinding, mountPoint.current]);
+    // this effect must run every time in case the model has changed
+    useEffect(() => {
+        if (!(binding && vdomImportSource)) {
+            return;
+        }
+        binding.render(model);
+        if (vdomImportSource.unmountBeforeUpdate) {
+            return binding.unmount;
+        }
+    });
+    return mountPoint;
+}
+const SPECIAL_ELEMENTS = {
+    input: UserInputElement,
+    script: ScriptElement,
+    select: UserInputElement,
+    textarea: UserInputElement,
+};

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./components";
+export * from "./messages";
+export * from "./mount";
+export * from "./reactpy-client";
+export * from "./reactpy-vdom";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC"}

package/dist/index.js

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

package/dist/logger.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    log: (...args: any[]) => void;
+    warn: (...args: any[]) => void;
+    error: (...args: any[]) => void;
+};
+export default _default;
+//# sourceMappingURL=logger.d.ts.map

package/dist/logger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"logger.d.ts","sourceRoot":"","sources":["../src/logger.ts"],"names":[],"mappings":";mBACiB,GAAG,EAAE,KAAG,IAAI;oBACX,GAAG,EAAE,KAAG,IAAI;qBACX,GAAG,EAAE,KAAG,IAAI;;AAH/B,wBAIE"}

package/dist/logger.js

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

package/dist/messages.d.ts

@@ -0,0 +1,15 @@
+import { ReactPyVdom } from "./reactpy-vdom";
+export type LayoutUpdateMessage = {
+    type: "layout-update";
+    path: string;
+    model: ReactPyVdom;
+};
+export type LayoutEventMessage = {
+    type: "layout-event";
+    target: string;
+    data: any;
+};
+export type IncomingMessage = LayoutUpdateMessage;
+export type OutgoingMessage = LayoutEventMessage;
+export type Message = IncomingMessage | OutgoingMessage;
+//# sourceMappingURL=messages.d.ts.map

package/dist/messages.d.ts.map

@@ -0,0 +1 @@
+{"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/messages.js

@@ -0,0 +1 @@
+export {};

package/dist/mount.d.ts

@@ -0,0 +1,3 @@
+import { ReactPyClient } from "./reactpy-client";
+export declare function mount(element: HTMLElement, client: ReactPyClient): void;
+//# sourceMappingURL=mount.d.ts.map

package/dist/mount.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mount.d.ts","sourceRoot":"","sources":["../src/mount.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,wBAAgB,KAAK,CAAC,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,aAAa,GAAG,IAAI,CAEvE"}

package/dist/mount.js

@@ -0,0 +1,6 @@
+import React from "react";
+import { render } from "react-dom";
+import { Layout } from "./components";
+export function mount(element, client) {
+    render(React.createElement(Layout, { client: client }), element);
+}

package/dist/reactpy-client.d.ts

@@ -0,0 +1,92 @@
+import { ReactPyModule } from "./reactpy-vdom";
+/**
+ * A client for communicating with a ReactPy server.
+ */
+export interface ReactPyClient {
+    /**
+     * 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(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: any) => void;
+    /**
+     * 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;
+};
+/**
+ * The location of the server.
+ *
+ * This is used to determine the location of the server's API endpoints. All endpoints
+ * are expected to be found at the base URL, with the following paths:
+ *
+ * - `_reactpy/stream/${route}${query}`: The websocket endpoint for the stream.
+ * - `_reactpy/modules`: The directory containing the dynamically loaded modules.
+ * - `_reactpy/assets`: The directory containing the static assets.
+ */
+type LocationProps = {
+    /**
+     * The base URL of the server.
+     *
+     * @default - document.location.origin
+     */
+    url: string;
+    /**
+     * The route to the page being rendered.
+     *
+     * @default - document.location.pathname
+     */
+    route: string;
+    /**
+     * The query string of the page being rendered.
+     *
+     * @default - document.location.search
+     */
+    query: string;
+};
+type ReconnectProps = {
+    maxInterval?: number;
+    maxRetries?: number;
+    backoffRate?: number;
+    intervalJitter?: number;
+};
+export declare class SimpleReactPyClient extends BaseReactPyClient implements ReactPyClient {
+    private readonly urls;
+    private readonly socket;
+    constructor(props: SimpleReactPyClientProps);
+    sendMessage(message: any): void;
+    loadModule(moduleName: string): Promise<ReactPyModule>;
+}
+export {};
+//# sourceMappingURL=reactpy-client.d.ts.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,127 @@
+import logger from "./logger";
+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;
+    socket;
+    constructor(props) {
+        super();
+        this.urls = getServerUrls(props.serverLocation || {
+            url: document.location.origin,
+            route: document.location.pathname,
+            query: document.location.search,
+        });
+        this.socket = createReconnectingWebSocket({
+            readyPromise: this.ready,
+            url: this.urls.stream,
+            onMessage: async ({ data }) => this.handleIncoming(JSON.parse(data)),
+            ...props.reconnectOptions,
+        });
+    }
+    sendMessage(message) {
+        this.socket.current?.send(JSON.stringify(message));
+    }
+    loadModule(moduleName) {
+        return import(`${this.urls.modules}/${moduleName}`);
+    }
+}
+function getServerUrls(props) {
+    const base = new URL(`${props.url || document.location.origin}/_reactpy`);
+    const modules = `${base}/modules`;
+    const assets = `${base}/assets`;
+    const streamProtocol = `ws${base.protocol === "https:" ? "s" : ""}`;
+    const streamPath = rtrim(`${base.pathname}/stream${props.route || ""}`, "/");
+    const stream = `${streamProtocol}://${base.host}${streamPath}${props.query}`;
+    return { base, modules, assets, stream };
+}
+function createReconnectingWebSocket(props) {
+    const { maxInterval = 60000, maxRetries = 50, backoffRate = 1.1, intervalJitter = 0.1, } = props;
+    const startInterval = 750;
+    let retries = 0;
+    let interval = startInterval;
+    const closed = false;
+    let everConnected = false;
+    const socket = {};
+    const connect = () => {
+        if (closed) {
+            return;
+        }
+        socket.current = new WebSocket(props.url);
+        socket.current.onopen = () => {
+            everConnected = true;
+            logger.log("client connected");
+            interval = startInterval;
+            retries = 0;
+            if (props.onOpen) {
+                props.onOpen();
+            }
+        };
+        socket.current.onmessage = props.onMessage;
+        socket.current.onclose = () => {
+            if (!everConnected) {
+                logger.log("failed to connect");
+                return;
+            }
+            logger.log("client disconnected");
+            if (props.onClose) {
+                props.onClose();
+            }
+            if (retries >= maxRetries) {
+                return;
+            }
+            const thisInterval = addJitter(interval, intervalJitter);
+            logger.log(`reconnecting in ${(thisInterval / 1000).toPrecision(4)} seconds...`);
+            setTimeout(connect, thisInterval);
+            interval = nextInterval(interval, backoffRate, maxInterval);
+            retries++;
+        };
+    };
+    props.readyPromise.then(() => logger.log("starting client...")).then(connect);
+    return socket;
+}
+function nextInterval(currentInterval, backoffRate, maxInterval) {
+    return Math.min(currentInterval *
+        // increase interval by backoff rate
+        backoffRate, 
+    // don't exceed max interval
+    maxInterval);
+}
+function addJitter(interval, jitter) {
+    return interval + (Math.random() * jitter * interval * 2 - jitter * interval);
+}
+function rtrim(text, trim) {
+    return text.replace(new RegExp(`${trim}+$`), "");
+}

package/dist/reactpy-vdom.d.ts

@@ -0,0 +1,54 @@
+import { ComponentType } from "react";
+import { ReactPyClient } from "./reactpy-client";
+export declare function loadImportSource(vdomImportSource: ReactPyVdomImportSource, client: ReactPyClient): Promise<BindImportSource>;
+export declare function createChildren<Child>(model: ReactPyVdom, createChild: (child: ReactPyVdom) => Child): (Child | string)[];
+export declare function createAttributes(model: ReactPyVdom, client: ReactPyClient): {
+    [key: string]: any;
+};
+export type ReactPyComponent = ComponentType<{
+    model: ReactPyVdom;
+}>;
+export type ReactPyVdom = {
+    tagName: string;
+    key?: string;
+    attributes?: {
+        [key: string]: string;
+    };
+    children?: (ReactPyVdom | string)[];
+    error?: string;
+    eventHandlers?: {
+        [key: string]: ReactPyVdomEventHandler;
+    };
+    importSource?: ReactPyVdomImportSource;
+};
+export type ReactPyVdomEventHandler = {
+    target: string;
+    preventDefault?: boolean;
+    stopPropagation?: boolean;
+};
+export type ReactPyVdomImportSource = {
+    source: string;
+    sourceType?: "URL" | "NAME";
+    fallback?: string | ReactPyVdom;
+    unmountBeforeUpdate?: boolean;
+};
+export type ReactPyModule = {
+    bind: (node: HTMLElement, context: ReactPyModuleBindingContext) => ReactPyModuleBinding;
+} & {
+    [key: string]: any;
+};
+export type ReactPyModuleBindingContext = {
+    sendMessage: ReactPyClient["sendMessage"];
+    onMessage: ReactPyClient["onMessage"];
+};
+export type ReactPyModuleBinding = {
+    create: (type: any, props?: any, children?: (any | string | ReactPyVdom)[]) => any;
+    render: (element: any) => void;
+    unmount: () => void;
+};
+export type BindImportSource = (node: HTMLElement) => ImportSourceBinding | null;
+export type ImportSourceBinding = {
+    render: (model: ReactPyVdom) => void;
+    unmount: () => void;
+};
+//# sourceMappingURL=reactpy-vdom.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"reactpy-vdom.d.ts","sourceRoot":"","sources":["../src/reactpy-vdom.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGjD,wBAAsB,gBAAgB,CACpC,gBAAgB,EAAE,uBAAuB,EACzC,MAAM,EAAE,aAAa,GACpB,OAAO,CAAC,gBAAgB,CAAC,CA2C3B;AA+DD,wBAAgB,cAAc,CAAC,KAAK,EAClC,KAAK,EAAE,WAAW,EAClB,WAAW,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,KAAK,GACzC,CAAC,KAAK,GAAG,MAAM,CAAC,EAAE,CAapB;AAED,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,WAAW,EAClB,MAAM,EAAE,aAAa,GACpB;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,CAcxB;AA0DD,MAAM,MAAM,gBAAgB,GAAG,aAAa,CAAC;IAAE,KAAK,EAAE,WAAW,CAAA;CAAE,CAAC,CAAC;AAErE,MAAM,MAAM,WAAW,GAAG;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IACvC,QAAQ,CAAC,EAAE,CAAC,WAAW,GAAG,MAAM,CAAC,EAAE,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,uBAAuB,CAAA;KAAE,CAAC;IAC3D,YAAY,CAAC,EAAE,uBAAuB,CAAC;CACxC,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IAChC,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,CACJ,IAAI,EAAE,WAAW,EACjB,OAAO,EAAE,2BAA2B,KACjC,oBAAoB,CAAC;CAC3B,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,CAAC;AAE3B,MAAM,MAAM,2BAA2B,GAAG;IACxC,WAAW,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IAC1C,SAAS,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;CACvC,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,MAAM,EAAE,CACN,IAAI,EAAE,GAAG,EACT,KAAK,CAAC,EAAE,GAAG,EACX,QAAQ,CAAC,EAAE,CAAC,GAAG,GAAG,MAAM,GAAG,WAAW,CAAC,EAAE,KACtC,GAAG,CAAC;IACT,MAAM,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,CAC7B,IAAI,EAAE,WAAW,KACd,mBAAmB,GAAG,IAAI,CAAC;AAEhC,MAAM,MAAM,mBAAmB,GAAG;IAChC,MAAM,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACrC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC"}

package/dist/reactpy-vdom.js

@@ -0,0 +1,140 @@
+import serializeEvent from "event-to-object";
+export async function loadImportSource(vdomImportSource, client) {
+    let module;
+    if (vdomImportSource.sourceType === "URL") {
+        module = await import(vdomImportSource.source);
+    }
+    else {
+        module = await client.loadModule(vdomImportSource.source);
+    }
+    if (typeof module.bind !== "function") {
+        throw new Error(`${vdomImportSource.source} did not export a function 'bind'`);
+    }
+    return (node) => {
+        const binding = module.bind(node, {
+            sendMessage: client.sendMessage,
+            onMessage: client.onMessage,
+        });
+        if (!(typeof binding.create === "function" &&
+            typeof binding.render === "function" &&
+            typeof binding.unmount === "function")) {
+            console.error(`${vdomImportSource.source} returned an impropper binding`);
+            return null;
+        }
+        return {
+            render: (model) => binding.render(createImportSourceElement({
+                client,
+                module,
+                binding,
+                model,
+                currentImportSource: vdomImportSource,
+            })),
+            unmount: binding.unmount,
+        };
+    };
+}
+function createImportSourceElement(props) {
+    let type;
+    if (props.model.importSource) {
+        if (!isImportSourceEqual(props.currentImportSource, props.model.importSource)) {
+            console.error("Parent element import source " +
+                stringifyImportSource(props.currentImportSource) +
+                " does not match child's import source " +
+                stringifyImportSource(props.model.importSource));
+            return null;
+        }
+        else if (!props.module[props.model.tagName]) {
+            console.error("Module from source " +
+                stringifyImportSource(props.currentImportSource) +
+                ` does not export ${props.model.tagName}`);
+            return null;
+        }
+        else {
+            type = props.module[props.model.tagName];
+        }
+    }
+    else {
+        type = props.model.tagName;
+    }
+    return props.binding.create(type, createAttributes(props.model, props.client), createChildren(props.model, (child) => createImportSourceElement({
+        ...props,
+        model: child,
+    })));
+}
+function isImportSourceEqual(source1, source2) {
+    return (source1.source === source2.source &&
+        source1.sourceType === source2.sourceType);
+}
+function stringifyImportSource(importSource) {
+    return JSON.stringify({
+        source: importSource.source,
+        sourceType: importSource.sourceType,
+    });
+}
+export function createChildren(model, createChild) {
+    if (!model.children) {
+        return [];
+    }
+    else {
+        return model.children.map((child) => {
+            switch (typeof child) {
+                case "object":
+                    return createChild(child);
+                case "string":
+                    return child;
+            }
+        });
+    }
+}
+export function createAttributes(model, client) {
+    return Object.fromEntries(Object.entries({
+        // Normal HTML attributes
+        ...model.attributes,
+        // Construct event handlers
+        ...Object.fromEntries(Object.entries(model.eventHandlers || {}).map(([name, handler]) => createEventHandler(client, name, handler))),
+        // Convert snake_case to camelCase names
+    }).map(normalizeAttribute));
+}
+function createEventHandler(client, name, { target, preventDefault, stopPropagation }) {
+    return [
+        name,
+        function (...args) {
+            const data = Array.from(args).map((value) => {
+                if (!(typeof value === "object" && value.nativeEvent)) {
+                    return value;
+                }
+                const event = value;
+                if (preventDefault) {
+                    event.preventDefault();
+                }
+                if (stopPropagation) {
+                    event.stopPropagation();
+                }
+                return serializeEvent(event.nativeEvent);
+            });
+            client.sendMessage({ type: "layout-event", data, target });
+        },
+    ];
+}
+function normalizeAttribute([key, value]) {
+    let normKey = key;
+    let normValue = value;
+    if (key === "style" && typeof value === "object") {
+        normValue = Object.fromEntries(Object.entries(value).map(([k, v]) => [snakeToCamel(k), v]));
+    }
+    else if (key.startsWith("data_") ||
+        key.startsWith("aria_") ||
+        DASHED_HTML_ATTRS.includes(key)) {
+        normKey = key.split("_").join("-");
+    }
+    else {
+        normKey = snakeToCamel(key);
+    }
+    return [normKey, normValue];
+}
+function snakeToCamel(str) {
+    return str.replace(/([_][a-z])/g, (group) => group.toUpperCase().replace("_", ""));
+}
+// see list of HTML attributes with dashes in them:
+// https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes#attribute_list
+const DASHED_HTML_ATTRS = ["accept_charset", "http_equiv"];

package/package.json

@@ -6,16 +6,15 @@
   "license": "MIT",
   "name": "@reactpy/client",
   "type": "module",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "dependencies": {
-    "event-to-object": "^0.1.0",
+    "event-to-object": "^0.1.2",
     "json-pointer": "^0.6.2"
   },
   "devDependencies": {
     "@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;
         }