@reactpy/client 0.3.2 → 1.0.1

package/dist/vdom.js

@@ -0,0 +1,174 @@
+import eventToObject from "event-to-object";
+import log from "./logger";
+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")) {
+            log.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)) {
+            log.error("Parent element import source " +
+                stringifyImportSource(props.currentImportSource) +
+                " does not match child's import source " +
+                stringifyImportSource(props.model.importSource));
+            return null;
+        }
+        else {
+            type = getComponentFromModule(props.module, props.model.tagName, props.model.importSource);
+            if (!type) {
+                // Error message logged within getComponentFromModule
+                return null;
+            }
+        }
+    }
+    else {
+        type = props.model.tagName;
+    }
+    return props.binding.create(type, createAttributes(props.model, props.client), createChildren(props.model, (child) => createImportSourceElement({
+        ...props,
+        model: child,
+    })));
+}
+function getComponentFromModule(module, componentName, importSource) {
+    /*  Gets the component with the provided name from the provided module.
+  
+    Built specifically to work on inifinitely deep nested components.
+    For example, component "My.Nested.Component" is accessed from
+    ModuleA like so: ModuleA["My"]["Nested"]["Component"].
+    */
+    const componentParts = componentName.split(".");
+    let Component = null;
+    for (let i = 0; i < componentParts.length; i++) {
+        const iterAttr = componentParts[i];
+        Component = i == 0 ? module[iterAttr] : Component[iterAttr];
+        if (!Component) {
+            if (i == 0) {
+                log.error("Module from source " +
+                    stringifyImportSource(importSource) +
+                    ` does not export ${iterAttr}`);
+            }
+            else {
+                console.error(`Component ${componentParts.slice(0, i).join(".")} from source ` +
+                    stringifyImportSource(importSource) +
+                    ` does not have subcomponent ${iterAttr}`);
+            }
+            break;
+        }
+    }
+    return Component;
+}
+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))),
+        ...Object.fromEntries(Object.entries(model.inlineJavaScript || {}).map(([name, inlineJavaScript]) => createInlineJavaScript(name, inlineJavaScript))),
+    }));
+}
+function createEventHandler(client, name, { target, preventDefault, stopPropagation }) {
+    const eventHandler = function (...args) {
+        const data = Array.from(args).map((value) => {
+            const event = value;
+            if (preventDefault) {
+                event.preventDefault();
+            }
+            if (stopPropagation) {
+                event.stopPropagation();
+            }
+            // Convert JavaScript objects to plain JSON, if needed
+            if (typeof event === "object") {
+                return eventToObject(event);
+            }
+            else {
+                return event;
+            }
+        });
+        client.sendMessage({ type: "layout-event", data, target });
+    };
+    eventHandler.isHandler = true;
+    return [name, eventHandler];
+}
+function createInlineJavaScript(name, inlineJavaScript) {
+    /* Function that will execute the string-like InlineJavaScript
+    via eval in the most appropriate way */
+    const wrappedExecutable = function (...args) {
+        function handleExecution(...args) {
+            const evalResult = eval(inlineJavaScript);
+            if (typeof evalResult == "function") {
+                return evalResult(...args);
+            }
+        }
+        if (args.length > 0 && args[0] instanceof Event) {
+            /* If being triggered by an event, set the event's current
+            target to "this". This ensures that inline
+            javascript statements such as the following work:
+            html.button({"onclick": 'this.value = "Clicked!"'}, "Click Me")*/
+            return handleExecution.call(args[0].currentTarget, ...args);
+        }
+        else {
+            /* If not being triggered by an event, do not set "this" and
+            just call normally */
+            return handleExecution(...args);
+        }
+    };
+    wrappedExecutable.isHandler = false;
+    return [name, wrappedExecutable];
+}
+//# sourceMappingURL=vdom.js.map

package/dist/vdom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vdom.js","sourceRoot":"","sources":["../src/vdom.tsx"],"names":[],"mappings":"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"}

package/dist/websocket.d.ts

@@ -0,0 +1,6 @@
+import type { CreateReconnectingWebSocketProps } from "./types";
+export declare function createReconnectingWebSocket(props: CreateReconnectingWebSocketProps): {
+    current?: WebSocket;
+};
+export declare function nextInterval(currentInterval: number, backoffMultiplier: number, maxInterval: number): number;
+//# sourceMappingURL=websocket.d.ts.map

package/dist/websocket.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"websocket.d.ts","sourceRoot":"","sources":["../src/websocket.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gCAAgC,EAAE,MAAM,SAAS,CAAC;AAGhE,wBAAgB,2BAA2B,CACzC,KAAK,EAAE,gCAAgC;cAOb,SAAS;EAkDpC;AAED,wBAAgB,YAAY,CAC1B,eAAe,EAAE,MAAM,EACvB,iBAAiB,EAAE,MAAM,EACzB,WAAW,EAAE,MAAM,GAClB,MAAM,CAOR"}

package/dist/websocket.js

@@ -0,0 +1,57 @@
+import log from "./logger";
+export function createReconnectingWebSocket(props) {
+    const { interval, maxInterval, maxRetries, backoffMultiplier } = props;
+    let retries = 0;
+    let currentInterval = interval;
+    let everConnected = false;
+    const closed = false;
+    const socket = {};
+    const connect = () => {
+        if (closed) {
+            return;
+        }
+        socket.current = new WebSocket(props.url);
+        socket.current.onopen = () => {
+            everConnected = true;
+            log.info("Connected!");
+            currentInterval = interval;
+            retries = 0;
+            if (props.onOpen) {
+                props.onOpen();
+            }
+        };
+        socket.current.onmessage = (event) => {
+            if (props.onMessage) {
+                props.onMessage(event);
+            }
+        };
+        socket.current.onclose = () => {
+            if (props.onClose) {
+                props.onClose();
+            }
+            if (!everConnected) {
+                log.info("Failed to connect!");
+                return;
+            }
+            log.info("Disconnected!");
+            if (retries >= maxRetries) {
+                log.info("Connection max retries exhausted!");
+                return;
+            }
+            log.info(`Reconnecting in ${(currentInterval / 1000).toPrecision(4)} seconds...`);
+            setTimeout(connect, currentInterval);
+            currentInterval = nextInterval(currentInterval, backoffMultiplier, maxInterval);
+            retries++;
+        };
+    };
+    props.readyPromise.then(() => log.info("Starting client...")).then(connect);
+    return socket;
+}
+export function nextInterval(currentInterval, backoffMultiplier, maxInterval) {
+    return Math.min(
+    // increase interval by backoff multiplier
+    currentInterval * backoffMultiplier, 
+    // don't exceed max interval
+    maxInterval);
+}
+//# sourceMappingURL=websocket.js.map

package/dist/websocket.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"websocket.js","sourceRoot":"","sources":["../src/websocket.ts"],"names":[],"mappings":"AACA,OAAO,GAAG,MAAM,UAAU,CAAC;AAE3B,MAAM,UAAU,2BAA2B,CACzC,KAAuC;IAEvC,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,UAAU,EAAE,iBAAiB,EAAE,GAAG,KAAK,CAAC;IACvE,IAAI,OAAO,GAAG,CAAC,CAAC;IAChB,IAAI,eAAe,GAAG,QAAQ,CAAC;IAC/B,IAAI,aAAa,GAAG,KAAK,CAAC;IAC1B,MAAM,MAAM,GAAG,KAAK,CAAC;IACrB,MAAM,MAAM,GAA4B,EAAE,CAAC;IAE3C,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,IAAI,MAAM,EAAE,CAAC;YACX,OAAO;QACT,CAAC;QACD,MAAM,CAAC,OAAO,GAAG,IAAI,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAC1C,MAAM,CAAC,OAAO,CAAC,MAAM,GAAG,GAAG,EAAE;YAC3B,aAAa,GAAG,IAAI,CAAC;YACrB,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;YACvB,eAAe,GAAG,QAAQ,CAAC;YAC3B,OAAO,GAAG,CAAC,CAAC;YACZ,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;gBACjB,KAAK,CAAC,MAAM,EAAE,CAAC;YACjB,CAAC;QACH,CAAC,CAAC;QACF,MAAM,CAAC,OAAO,CAAC,SAAS,GAAG,CAAC,KAAK,EAAE,EAAE;YACnC,IAAI,KAAK,CAAC,SAAS,EAAE,CAAC;gBACpB,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;YACzB,CAAC;QACH,CAAC,CAAC;QACF,MAAM,CAAC,OAAO,CAAC,OAAO,GAAG,GAAG,EAAE;YAC5B,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;gBAClB,KAAK,CAAC,OAAO,EAAE,CAAC;YAClB,CAAC;YACD,IAAI,CAAC,aAAa,EAAE,CAAC;gBACnB,GAAG,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;gBAC/B,OAAO;YACT,CAAC;YACD,GAAG,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;YAC1B,IAAI,OAAO,IAAI,UAAU,EAAE,CAAC;gBAC1B,GAAG,CAAC,IAAI,CAAC,mCAAmC,CAAC,CAAC;gBAC9C,OAAO;YACT,CAAC;YACD,GAAG,CAAC,IAAI,CACN,mBAAmB,CAAC,eAAe,GAAG,IAAI,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,aAAa,CACxE,CAAC;YACF,UAAU,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC;YACrC,eAAe,GAAG,YAAY,CAC5B,eAAe,EACf,iBAAiB,EACjB,WAAW,CACZ,CAAC;YACF,OAAO,EAAE,CAAC;QACZ,CAAC,CAAC;IACJ,CAAC,CAAC;IAEF,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAE5E,OAAO,MAAM,CAAC;AAChB,CAAC;AAED,MAAM,UAAU,YAAY,CAC1B,eAAuB,EACvB,iBAAyB,EACzB,WAAmB;IAEnB,OAAO,IAAI,CAAC,GAAG;IACb,0CAA0C;IAC1C,eAAe,GAAG,iBAAiB;IACnC,4BAA4B;IAC5B,WAAW,CACZ,CAAC;AACJ,CAAC"}

package/package.json

@@ -1,34 +1,35 @@
 {
-  "author": "Ryan Morshead",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "description": "A client for ReactPy implemented in React",
-  "license": "MIT",
-  "name": "@reactpy/client",
-  "type": "module",
-  "version": "0.3.2",
+  "author": "Mark Bakhit",
+  "contributors": [
+    "Ryan Morshead"
+  ],
   "dependencies": {
-    "event-to-object": "file:../event-to-object",
-    "json-pointer": "^0.6.2"
+    "json-pointer": "^0.6.2",
+    "preact": "^10.27.2",
+    "event-to-object": "file:./packages/event-to-object"
   },
+  "description": "A client for ReactPy implemented in React",
   "devDependencies": {
-    "@types/json-pointer": "^1.0.31",
-    "@types/react": "^17.0",
-    "@types/react-dom": "^17.0",
-    "typescript": "^4.9.5"
-  },
-  "peerDependencies": {
-    "react": ">=16 <18",
-    "react-dom": ">=16 <18"
+    "@types/json-pointer": "^1.0.34",
+    "typescript": "^5.9.3"
   },
+  "keywords": [
+    "react",
+    "reactive",
+    "python",
+    "reactpy"
+  ],
+  "license": "MIT",
+  "main": "dist/index.js",
+  "name": "@reactpy/client",
   "repository": {
     "type": "git",
     "url": "https://github.com/reactive-python/reactpy"
   },
   "scripts": {
     "build": "tsc -b",
-    "test": "npm run check:tests",
-    "check:tests": "echo 'no tests'",
-    "check:types": "tsc --noEmit"
-  }
+    "checkTypes": "tsc --noEmit"
+  },
+  "type": "module",
+  "version": "1.0.1"
 }

package/src/client.ts

@@ -0,0 +1,83 @@
+import logger from "./logger";
+import type {
+  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.jsModulesPath}${moduleName}`);
+  }
+}

package/src/components.tsx

@@ -1,29 +1,18 @@
-import React, {
-  createElement,
-  createContext,
-  useState,
-  useRef,
-  useContext,
-  useEffect,
-  Fragment,
-  MutableRefObject,
-  ChangeEvent,
-} from "react";
-// @ts-ignore
 import { set as setJsonPointer } from "json-pointer";
-import {
-  ReactPyVdom,
-  ReactPyComponent,
-  createChildren,
-  createAttributes,
-  loadImportSource,
+import type { ChangeEvent, MutableRefObject } from "preact/compat";
+import { createContext, createElement, Fragment, type JSX } from "preact";
+import { useContext, useEffect, useRef, useState } from "preact/hooks";
+import type {
   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();
 
@@ -70,7 +59,7 @@ export function Element({ model }: { model: ReactPyVdom }): JSX.Element | null {
 }
 
 function StandardElement({ model }: { model: ReactPyVdom }) {
-  const client = React.useContext(ClientContext);
+  const client = 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.
@@ -86,16 +75,18 @@ function StandardElement({ model }: { model: ReactPyVdom }) {
 function UserInputElement({ model }: { model: ReactPyVdom }): JSX.Element {
   const client = useContext(ClientContext);
   const props = createAttributes(model, client);
-  const [value, setValue] = React.useState(props.value);
+  const [value, setValue] = useState(props.value);
 
   // honor changes to value from the client via props
-  React.useEffect(() => setValue(props.value), [props.value]);
+  useEffect(() => setValue(props.value), [props.value]);
 
   const givenOnChange = props.onChange;
   if (typeof givenOnChange === "function") {
     props.onChange = (event: ChangeEvent<any>) => {
       // immediately update the value to give the user feedback
-      setValue(event.target.value);
+      if (event.target) {
+        setValue((event.target as HTMLInputElement).value);
+      }
       // allow the client to respond (and possibly change the value)
       givenOnChange(event);
     };
@@ -117,31 +108,34 @@ function UserInputElement({ model }: { model: ReactPyVdom }): JSX.Element {
 function ScriptElement({ model }: { model: ReactPyVdom }) {
   const ref = useRef<HTMLDivElement | null>(null);
 
-  React.useEffect(() => {
+  useEffect(() => {
+    // Don't run if the parent element is missing
     if (!ref.current) {
       return;
     }
+
+    // Create the script element
+    const scriptElement: HTMLScriptElement = document.createElement("script");
+    for (const [k, v] of Object.entries(model.attributes || {})) {
+      scriptElement.setAttribute(k, v);
+    }
+
+    // Add the script content as text
     const scriptContent = model?.children?.filter(
       (value): value is string => typeof value == "string",
     )[0];
-
-    let scriptElement: HTMLScriptElement;
-    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();
-      }
+    if (scriptContent) {
+      scriptElement.appendChild(document.createTextNode(scriptContent));
     }
-  }, [model.key, ref.current]);
+
+    // Append the script element to the parent element
+    ref.current.appendChild(scriptElement);
+
+    // Remove the script element when the component is unmounted
+    return () => {
+      ref.current?.removeChild(scriptElement);
+    };
+  }, [model.key]);
 
   return <div ref={ref} />;
 }
@@ -179,10 +173,10 @@ function useImportSource(model: ReactPyVdom): MutableRefObject<any> {
   const vdomImportSource = model.importSource;
   const vdomImportSourceJsonString = JSON.stringify(vdomImportSource);
   const mountPoint = useRef<HTMLElement>(null);
-  const client = React.useContext(ClientContext);
+  const client = useContext(ClientContext);
   const [binding, setBinding] = useState<ImportSourceBinding | null>(null);
 
-  React.useEffect(() => {
+  useEffect(() => {
     let unmounted = false;
 
     if (vdomImportSource) {

package/src/index.ts

@@ -1,5 +1,9 @@
+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";
+export { default as React } from "preact/compat";
+export { default as ReactDOM } from "preact/compat";
+export * as preact from "preact";

package/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),
 };

package/src/mount.tsx

@@ -1,8 +1,40 @@
-import React from "react";
-import { render } from "react-dom";
+import { render } from "preact";
+import { ReactPyClient } from "./client";
 import { Layout } from "./components";
-import { ReactPyClient } from "./reactpy-client";
+import type { MountProps } from "./types";
 
-export function mount(element: HTMLElement, client: ReactPyClient): void {
-  render(<Layout client={client} />, element);
+export function mountReactPy(props: MountProps) {
+  // WebSocket route for component rendering
+  const wsProtocol = `ws${window.location.protocol === "https:" ? "s" : ""}:`;
+  const wsOrigin = `${wsProtocol}//${window.location.host}`;
+  const componentUrl = new URL(
+    `${wsOrigin}${props.pathPrefix}${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_query_string",
+      window.location.search,
+    );
+  }
+
+  // Configure a new ReactPy client
+  const client = new ReactPyClient({
+    urls: {
+      componentUrl: componentUrl,
+      jsModulesPath: `${window.location.origin}${props.pathPrefix}modules/`,
+    },
+    reconnectOptions: {
+      interval: props.reconnectInterval || 750,
+      maxInterval: props.reconnectMaxInterval || 60000,
+      maxRetries: props.reconnectMaxRetries || 150,
+      backoffMultiplier: props.reconnectBackoffMultiplier || 1.25,
+    },
+    mountElement: props.mountElement,
+  });
+
+  // Start rendering the component
+  render(<Layout client={client} />, props.mountElement);
 }