@reactpy/client 0.1.0 → 0.2.1

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 () {
+            const data = Array.from(arguments).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

@@ -1,35 +1,37 @@
 {
   "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.2.1",
   "dependencies": {
-    "htm": "^3.0.3",
+    "event-to-object": "^0.1.2",
     "json-pointer": "^0.6.2"
   },
-  "description": "A client for ReactPy implemented in React",
   "devDependencies": {
-    "jsdom": "16.5.0",
-    "lodash": "^4.17.21",
-    "prettier": "^2.5.1",
-    "uvu": "^0.5.1"
+    "@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"
   },
-  "files": [
-    "src/**/*.js"
-  ],
-  "license": "MIT",
-  "main": "src/index.js",
-  "name": "@reactpy/client",
   "peerDependencies": {
-    "react": ">=16",
-    "react-dom": ">=16"
+    "react": ">=16 <18",
+    "react-dom": ">=16 <18"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/reactive-python/reactpy"
   },
   "scripts": {
-    "check-format": "prettier --check ./src ./tests",
-    "format": "prettier --write ./src ./tests",
-    "test": "uvu tests"
-  },
-  "type": "module",
-  "version": "0.1.0"
+    "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

@@ -0,0 +1,231 @@
+import React, {
+  createElement,
+  createContext,
+  useState,
+  useRef,
+  useContext,
+  useEffect,
+  Fragment,
+  MutableRefObject,
+  ChangeEvent,
+} from "react";
+// @ts-ignore
+import { set as setJsonPointer } from "json-pointer";
+import { LayoutUpdateMessage } from "./messages";
+import {
+  ReactPyVdom,
+  ReactPyComponent,
+  createChildren,
+  createAttributes,
+  loadImportSource,
+  ImportSourceBinding,
+} from "./reactpy-vdom";
+import { ReactPyClient } from "./reactpy-client";
+
+const ClientContext = createContext<ReactPyClient>(null as any);
+
+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 }) => {
+        if (path === "") {
+          Object.assign(currentModel, model);
+        } else {
+          setJsonPointer(currentModel, path, model);
+        }
+        forceUpdate();
+      },
+    );
+    props.client.start();
+    return () => props.client.stop();
+  }, [currentModel, props.client]);
+
+  return (
+    <ClientContext.Provider value={props.client}>
+      <Element model={currentModel} />
+    </ClientContext.Provider>
+  );
+}
+
+export function Element({ model }: { model: ReactPyVdom }): JSX.Element | null {
+  if (model.error !== undefined) {
+    if (model.error) {
+      return <pre>{model.error}</pre>;
+    } else {
+      return null;
+    }
+  }
+
+  let SpecializedElement: ReactPyComponent;
+  if (model.tagName in SPECIAL_ELEMENTS) {
+    SpecializedElement =
+      SPECIAL_ELEMENTS[model.tagName as keyof typeof SPECIAL_ELEMENTS];
+  } else if (model.importSource) {
+    SpecializedElement = ImportedElement;
+  } else {
+    SpecializedElement = StandardElement;
+  }
+
+  return <SpecializedElement model={model} />;
+}
+
+function StandardElement({ model }: { model: ReactPyVdom }) {
+  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 <Element model={child} key={child.key} />;
+    }),
+  );
+}
+
+function UserInputElement({ model }: { model: ReactPyVdom }): JSX.Element {
+  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: ChangeEvent<any>) => {
+      // 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) => (
+      <Element model={child} key={child.key} />
+    )),
+  );
+}
+
+function ScriptElement({ model }: { model: ReactPyVdom }) {
+  const ref = useRef<HTMLDivElement | null>(null);
+
+  React.useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+    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) {
+      let scriptResult = eval(scriptContent);
+      if (typeof scriptResult == "function") {
+        return scriptResult();
+      }
+    }
+  }, [model.key, ref.current]);
+
+  return <div ref={ref} />;
+}
+
+function ImportedElement({ model }: { model: ReactPyVdom }) {
+  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 <div>{importSourceFallback}</div>;
+    } else {
+      return <StandardElement model={importSourceFallback} />;
+    }
+  } else {
+    return <div ref={importSourceRef} />;
+  }
+}
+
+function useForceUpdate() {
+  const [, setState] = useState(false);
+  return () => setState((old) => !old);
+}
+
+function useImportSource(model: ReactPyVdom): MutableRefObject<any> {
+  const vdomImportSource = model.importSource;
+
+  const mountPoint = useRef<HTMLElement>(null);
+  const client = React.useContext(ClientContext);
+  const [binding, setBinding] = useState<ImportSourceBinding | null>(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/src/index.ts

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

package/src/logger.ts

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

package/src/messages.ts

@@ -0,0 +1,32 @@
+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;
+  model: ReactPyVdom;
+};
+
+export type LayoutEventMessage = {
+  type: "layout-event";
+  target: string;
+  data: any;
+};
+
+export type IncomingMessage =
+  | LayoutUpdateMessage
+  | ConnectionOpenMessage
+  | ConnectionCloseMessage;
+export type OutgoingMessage = LayoutEventMessage;
+export type Message = IncomingMessage | OutgoingMessage;

package/src/mount.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import { render } from "react-dom";
+import { Layout } from "./components";
+import { ReactPyClient } from "./reactpy-client";
+
+export function mount(element: HTMLElement, client: ReactPyClient): void {
+  render(<Layout client={client} />, element);
+}