@reactpy/client 1.0.1 → 1.0.2

package/dist/index.js

@@ -6,5 +6,6 @@ export * from "./vdom";
 export * from "./websocket";
 export { default as React } from "preact/compat";
 export { default as ReactDOM } from "preact/compat";
+export { jsx, jsxs, Fragment } from "preact/jsx-runtime";
 export * as preact from "preact";
 //# sourceMappingURL=index.js.map

package/package.json

@@ -4,14 +4,14 @@
     "Ryan Morshead"
   ],
   "dependencies": {
-    "json-pointer": "^0.6.2",
-    "preact": "^10.27.2",
-    "event-to-object": "file:./packages/event-to-object"
+    "json-pointer": "catalog:",
+    "preact": "catalog:",
+    "event-to-object": "catalog:"
   },
   "description": "A client for ReactPy implemented in React",
   "devDependencies": {
-    "@types/json-pointer": "^1.0.34",
-    "typescript": "^5.9.3"
+    "@types/json-pointer": "catalog:",
+    "typescript": "catalog:"
   },
   "keywords": [
     "react",
@@ -31,5 +31,5 @@
     "checkTypes": "tsc --noEmit"
   },
   "type": "module",
-  "version": "1.0.1"
+  "version": "1.0.2"
 }

package/src/bind.tsx

@@ -0,0 +1,59 @@
+import * as preact from "preact";
+
+export async function infer_bind_from_environment() {
+  try {
+    // @ts-ignore
+    const React = await import("react");
+    // @ts-ignore
+    const ReactDOM = await import("react-dom/client");
+    return (node: HTMLElement) => reactjs_bind(node, React, ReactDOM);
+  } catch {
+    console.error(
+      "Unknown error occurred: 'react' is missing within this ReactPy environment! \
+      Your JavaScript components may not work as expected!",
+    );
+    return (node: HTMLElement) => local_preact_bind(node);
+  }
+}
+
+function local_preact_bind(node: HTMLElement) {
+  return {
+    create: (type: any, props: any, children?: any[]) =>
+      preact.createElement(type, props, ...(children || [])),
+    render: (element: any) => {
+      preact.render(element, node);
+    },
+    unmount: () => preact.render(null, node),
+  };
+}
+
+const roots = new WeakMap<HTMLElement, any>();
+
+function reactjs_bind(node: HTMLElement, React: any, ReactDOM: any) {
+  let root: any = null;
+  return {
+    create: (type: any, props: any, children?: any[]) =>
+      React.createElement(type, props, ...(children || [])),
+    render: (element: any) => {
+      if (!root) {
+        if (!roots.get(node)) {
+          root = ReactDOM.createRoot(node);
+          roots.set(node, root);
+        } else {
+          root = roots.get(node);
+        }
+      }
+
+      root.render(element);
+    },
+    unmount: () => {
+      if (root) {
+        root.unmount();
+        if (roots.get(node) === root) {
+          roots.delete(node);
+        }
+        root = null;
+      }
+    },
+  };
+}

package/src/components.tsx

@@ -1,18 +1,24 @@
 import { set as setJsonPointer } from "json-pointer";
-import type { ChangeEvent, MutableRefObject } from "preact/compat";
-import { createContext, createElement, Fragment, type JSX } from "preact";
+import type { MutableRefObject } from "preact/compat";
+import {
+  createContext,
+  createElement,
+  Fragment,
+  type JSX,
+  type TargetedEvent,
+} from "preact";
 import { useContext, useEffect, useRef, useState } from "preact/hooks";
 import type {
   ImportSourceBinding,
   ReactPyComponent,
   ReactPyVdom,
-  ReactPyClientInterface,
 } from "./types";
 import { createAttributes, createChildren, loadImportSource } from "./vdom";
+import type { ReactPyClient } from "./client";
 
-const ClientContext = createContext<ReactPyClientInterface>(null as any);
+const ClientContext = createContext<ReactPyClient>(null as any);
 
-export function Layout(props: { client: ReactPyClientInterface }): JSX.Element {
+export function Layout(props: { client: ReactPyClient }): JSX.Element {
   const currentModel: ReactPyVdom = useState({ tagName: "" })[0];
   const forceUpdate = useForceUpdate();
 
@@ -67,7 +73,7 @@ function StandardElement({ model }: { model: ReactPyVdom }) {
     model.tagName === "" ? Fragment : model.tagName,
     createAttributes(model, client),
     ...createChildren(model, (child) => {
-      return <Element model={child} key={child.key} />;
+      return <Element model={child} key={child.attributes?.key} />;
     }),
   );
 }
@@ -82,7 +88,7 @@ function UserInputElement({ model }: { model: ReactPyVdom }): JSX.Element {
 
   const givenOnChange = props.onChange;
   if (typeof givenOnChange === "function") {
-    props.onChange = (event: ChangeEvent<any>) => {
+    props.onChange = (event: TargetedEvent<any>) => {
       // immediately update the value to give the user feedback
       if (event.target) {
         setValue((event.target as HTMLInputElement).value);
@@ -100,7 +106,7 @@ function UserInputElement({ model }: { model: ReactPyVdom }): JSX.Element {
     // overwrite
     { ...props, value },
     ...createChildren(model, (child) => (
-      <Element model={child} key={child.key} />
+      <Element model={child} key={child.attributes?.key} />
     )),
   );
 }
@@ -135,7 +141,7 @@ function ScriptElement({ model }: { model: ReactPyVdom }) {
     return () => {
       ref.current?.removeChild(scriptElement);
     };
-  }, [model.key]);
+  }, [model.attributes?.key]);
 
   return <div ref={ref} />;
 }
@@ -175,14 +181,18 @@ function useImportSource(model: ReactPyVdom): MutableRefObject<any> {
   const mountPoint = useRef<HTMLElement>(null);
   const client = useContext(ClientContext);
   const [binding, setBinding] = useState<ImportSourceBinding | null>(null);
+  const bindingSource = useRef<string | null>(null);
 
   useEffect(() => {
     let unmounted = false;
+    let currentBinding: ImportSourceBinding | null = null;
 
     if (vdomImportSource) {
       loadImportSource(vdomImportSource, client).then((bind) => {
         if (!unmounted && mountPoint.current) {
-          setBinding(bind(mountPoint.current));
+          currentBinding = bind(mountPoint.current);
+          bindingSource.current = vdomImportSourceJsonString;
+          setBinding(currentBinding);
         }
       });
     }
@@ -190,11 +200,11 @@ function useImportSource(model: ReactPyVdom): MutableRefObject<any> {
     return () => {
       unmounted = true;
       if (
-        binding &&
+        currentBinding &&
         vdomImportSource &&
         !vdomImportSource.unmountBeforeUpdate
       ) {
-        binding.unmount();
+        currentBinding.unmount();
       }
     };
   }, [client, vdomImportSourceJsonString, setBinding, mountPoint.current]);
@@ -204,6 +214,9 @@ function useImportSource(model: ReactPyVdom): MutableRefObject<any> {
     if (!(binding && vdomImportSource)) {
       return;
     }
+    if (bindingSource.current !== vdomImportSourceJsonString) {
+      return;
+    }
     binding.render(model);
     if (vdomImportSource.unmountBeforeUpdate) {
       return binding.unmount;

package/src/index.ts

@@ -6,4 +6,5 @@ export * from "./vdom";
 export * from "./websocket";
 export { default as React } from "preact/compat";
 export { default as ReactDOM } from "preact/compat";
+export { jsx, jsxs, Fragment } from "preact/jsx-runtime";
 export * as preact from "preact";

package/src/types.ts

@@ -48,7 +48,6 @@ export type ReactPyComponent = ComponentType<{ model: ReactPyVdom }>;
 
 export type ReactPyVdom = {
   tagName: string;
-  key?: string;
   attributes?: { [key: string]: string };
   children?: (ReactPyVdom | string)[];
   error?: string;

package/src/vdom.tsx

@@ -1,5 +1,5 @@
-import type { ReactPyClientInterface } from "./types";
 import eventToObject from "event-to-object";
+import { Fragment } from "preact";
 import type {
   ReactPyVdom,
   ReactPyVdomImportSource,
@@ -7,12 +7,15 @@ import type {
   ReactPyModule,
   BindImportSource,
   ReactPyModuleBinding,
+  ImportSourceBinding,
 } from "./types";
+import { infer_bind_from_environment } from "./bind";
 import log from "./logger";
+import type { ReactPyClient } from "./client";
 
 export async function loadImportSource(
   vdomImportSource: ReactPyVdomImportSource,
-  client: ReactPyClientInterface,
+  client: ReactPyClient,
 ): Promise<BindImportSource> {
   let module: ReactPyModule;
   if (vdomImportSource.sourceType === "URL") {
@@ -20,14 +23,14 @@ export async function loadImportSource(
   } else {
     module = await client.loadModule(vdomImportSource.source);
   }
-  if (typeof module.bind !== "function") {
-    throw new Error(
-      `${vdomImportSource.source} did not export a function 'bind'`,
-    );
+
+  let { bind } = module;
+  if (typeof bind !== "function") {
+    bind = await infer_bind_from_environment();
   }
 
   return (node: HTMLElement) => {
-    const binding = module.bind(node, {
+    const binding = bind(node, {
       sendMessage: client.sendMessage,
       onMessage: client.onMessage,
     });
@@ -59,7 +62,7 @@ export async function loadImportSource(
 }
 
 function createImportSourceElement(props: {
-  client: ReactPyClientInterface;
+  client: ReactPyClient;
   module: ReactPyModule;
   binding: ReactPyModuleBinding;
   model: ReactPyVdom;
@@ -70,13 +73,15 @@ function createImportSourceElement(props: {
     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;
+      return props.binding.create("reactpy-child", {
+        ref: (node: ReactPyChild | null) => {
+          if (node) {
+            node.client = props.client;
+            node.model = props.model;
+            node.requestUpdate();
+          }
+        },
+      });
     } else {
       type = getComponentFromModule(
         props.module,
@@ -89,7 +94,7 @@ function createImportSourceElement(props: {
       }
     }
   } else {
-    type = props.model.tagName;
+    type = props.model.tagName === "" ? Fragment : props.model.tagName;
   }
   return props.binding.create(
     type,
@@ -176,7 +181,7 @@ export function createChildren<Child>(
 
 export function createAttributes(
   model: ReactPyVdom,
-  client: ReactPyClientInterface,
+  client: ReactPyClient,
 ): { [key: string]: any } {
   return Object.fromEntries(
     Object.entries({
@@ -199,7 +204,7 @@ export function createAttributes(
 }
 
 function createEventHandler(
-  client: ReactPyClientInterface,
+  client: ReactPyClient,
   name: string,
   { target, preventDefault, stopPropagation }: ReactPyVdomEventHandler,
 ): [string, () => void] {
@@ -254,3 +259,93 @@ function createInlineJavaScript(
   wrappedExecutable.isHandler = false;
   return [name, wrappedExecutable];
 }
+
+class ReactPyChild extends HTMLElement {
+  mountPoint: HTMLDivElement;
+  binding: ImportSourceBinding | null = null;
+  _client: ReactPyClient | null = null;
+  _model: ReactPyVdom | null = null;
+  currentImportSource: ReactPyVdomImportSource | null = null;
+
+  constructor() {
+    super();
+    this.mountPoint = document.createElement("div");
+    this.mountPoint.style.display = "contents";
+  }
+
+  connectedCallback() {
+    this.appendChild(this.mountPoint);
+  }
+
+  set client(value: ReactPyClient) {
+    this._client = value;
+  }
+
+  set model(value: ReactPyVdom) {
+    this._model = value;
+  }
+
+  requestUpdate() {
+    this.update();
+  }
+
+  async update() {
+    if (!this._client || !this._model || !this._model.importSource) {
+      return;
+    }
+
+    const newImportSource = this._model.importSource;
+
+    if (
+      !this.binding ||
+      !this.currentImportSource ||
+      !isImportSourceEqual(this.currentImportSource, newImportSource)
+    ) {
+      if (this.binding) {
+        this.binding.unmount();
+        this.binding = null;
+      }
+
+      this.currentImportSource = newImportSource;
+
+      try {
+        const bind = await loadImportSource(newImportSource, this._client);
+        if (
+          this.isConnected &&
+          this.currentImportSource &&
+          isImportSourceEqual(this.currentImportSource, newImportSource)
+        ) {
+          const oldBinding = this.binding as ImportSourceBinding | null;
+          if (oldBinding) {
+            oldBinding.unmount();
+          }
+          this.binding = bind(this.mountPoint);
+          if (this.binding) {
+            this.binding.render(this._model);
+          }
+        }
+      } catch (error) {
+        console.error("Failed to load import source", error);
+      }
+    } else {
+      if (this.binding) {
+        this.binding.render(this._model);
+      }
+    }
+  }
+
+  disconnectedCallback() {
+    if (this.binding) {
+      this.binding.unmount();
+      this.binding = null;
+      this.currentImportSource = null;
+    }
+  }
+}
+
+if (
+  typeof customElements !== "undefined" &&
+  !customElements.get("reactpy-child")
+) {
+  customElements.define("reactpy-child", ReactPyChild);
+}

package/dist/client.d.ts

@@ -1,29 +0,0 @@
-import type { ReactPyClientInterface, ReactPyModule, GenericReactPyClientProps, ReactPyUrls } from "./types";
-export declare abstract class BaseReactPyClient implements ReactPyClientInterface {
-    private readonly handlers;
-    protected readonly ready: Promise<void>;
-    private resolveReady;
-    constructor();
-    onMessage(type: string, handler: (message: any) => void): () => void;
-    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;
-}
-export declare class ReactPyClient extends BaseReactPyClient implements ReactPyClientInterface {
-    urls: ReactPyUrls;
-    socket: {
-        current?: WebSocket;
-    };
-    mountElement: HTMLElement;
-    constructor(props: GenericReactPyClientProps);
-    sendMessage(message: any): void;
-    loadModule(moduleName: string): Promise<ReactPyModule>;
-}
-//# sourceMappingURL=client.d.ts.map

package/dist/client.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,sBAAsB,EACtB,aAAa,EACb,yBAAyB,EACzB,WAAW,EACZ,MAAM,SAAS,CAAC;AAGjB,8BAAsB,iBAAkB,YAAW,sBAAsB;IACvE,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,QAAQ,CAAC,WAAW,CAAC,OAAO,EAAE,GAAG,GAAG,IAAI;IACxC,QAAQ,CAAC,UAAU,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO,CAAC,aAAa,CAAC;IAE/D;;;;;;OAMG;IACH,SAAS,CAAC,cAAc,CAAC,OAAO,EAAE,GAAG,GAAG,IAAI;CAe7C;AAED,qBAAa,aACX,SAAQ,iBACR,YAAW,sBAAsB;IAEjC,IAAI,EAAE,WAAW,CAAC;IAClB,MAAM,EAAE;QAAE,OAAO,CAAC,EAAE,SAAS,CAAA;KAAE,CAAC;IAChC,YAAY,EAAE,WAAW,CAAC;gBAEd,KAAK,EAAE,yBAAyB;IAa5C,WAAW,CAAC,OAAO,EAAE,GAAG,GAAG,IAAI;IAI/B,UAAU,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO,CAAC,aAAa,CAAC;CAGvD"}

package/dist/client.js

@@ -1,60 +0,0 @@
-import logger from "./logger";
-import { createReconnectingWebSocket } from "./websocket";
-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 ReactPyClient extends BaseReactPyClient {
-    urls;
-    socket;
-    mountElement;
-    constructor(props) {
-        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) {
-        this.socket.current?.send(JSON.stringify(message));
-    }
-    loadModule(moduleName) {
-        return import(`${this.urls.jsModulesPath}${moduleName}`);
-    }
-}
-//# sourceMappingURL=client.js.map

package/dist/client.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"client.js","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,UAAU,CAAC;AAO9B,OAAO,EAAE,2BAA2B,EAAE,MAAM,aAAa,CAAC;AAE1D,MAAM,OAAgB,iBAAiB;IACpB,QAAQ,GAAkD,EAAE,CAAC;IAC3D,KAAK,CAAgB;IAChC,YAAY,CAA6B;IAEjD;QACE,IAAI,CAAC,YAAY,GAAG,GAAG,EAAE,GAAE,CAAC,CAAC;QAC7B,IAAI,CAAC,KAAK,GAAG,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,CAAC,CAAC;IACvE,CAAC;IAED,SAAS,CAAC,IAAY,EAAE,OAA+B;QACrD,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAClE,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;QAC7B,OAAO,GAAG,EAAE;YACV,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,OAAO,CAAC,CAAC;QACzE,CAAC,CAAC;IACJ,CAAC;IAKD;;;;;;OAMG;IACO,cAAc,CAAC,OAAY;QACnC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;YAClB,MAAM,CAAC,IAAI,CAAC,+BAA+B,EAAE,OAAO,CAAC,CAAC;YACtD,OAAO;QACT,CAAC;QAED,MAAM,eAAe,GACnB,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QAC9B,IAAI,CAAC,eAAe,EAAE,CAAC;YACrB,MAAM,CAAC,IAAI,CAAC,kCAAkC,EAAE,OAAO,CAAC,CAAC;YACzD,OAAO;QACT,CAAC;QAED,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC;IAC7C,CAAC;CACF;AAED,MAAM,OAAO,aACX,SAAQ,iBAAiB;IAGzB,IAAI,CAAc;IAClB,MAAM,CAA0B;IAChC,YAAY,CAAc;IAE1B,YAAY,KAAgC;QAC1C,KAAK,EAAE,CAAC;QAER,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC;QACvB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,YAAY,CAAC;QACvC,IAAI,CAAC,MAAM,GAAG,2BAA2B,CAAC;YACxC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,YAAY;YAC3B,YAAY,EAAE,IAAI,CAAC,KAAK;YACxB,GAAG,KAAK,CAAC,gBAAgB;YACzB,SAAS,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;SACrE,CAAC,CAAC;IACL,CAAC;IAED,WAAW,CAAC,OAAY;QACtB,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC;IACrD,CAAC;IAED,UAAU,CAAC,UAAkB;QAC3B,OAAO,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,GAAG,UAAU,EAAE,CAAC,CAAC;IAC3D,CAAC;CACF"}

package/dist/components.d.ts

@@ -1,9 +0,0 @@
-import { type JSX } from "preact";
-import type { ReactPyVdom, ReactPyClientInterface } from "./types";
-export declare function Layout(props: {
-    client: ReactPyClientInterface;
-}): JSX.Element;
-export declare function Element({ model }: {
-    model: ReactPyVdom;
-}): JSX.Element | null;
-//# sourceMappingURL=components.d.ts.map

package/dist/components.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../src/components.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA0C,KAAK,GAAG,EAAE,MAAM,QAAQ,CAAC;AAE1E,OAAO,KAAK,EAGV,WAAW,EACX,sBAAsB,EACvB,MAAM,SAAS,CAAC;AAKjB,wBAAgB,MAAM,CAAC,KAAK,EAAE;IAAE,MAAM,EAAE,sBAAsB,CAAA;CAAE,GAAG,GAAG,CAAC,OAAO,CAsB7E;AAED,wBAAgB,OAAO,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,WAAW,CAAA;CAAE,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAoB7E"}