@reactpy/client 0.1.0 → 0.2.0

package/src/reactpy-vdom.tsx

@@ -0,0 +1,261 @@
+import React, { ComponentType } from "react";
+import { ReactPyClient } from "./reactpy-client";
+import serializeEvent from "event-to-object";
+
+export async function loadImportSource(
+  vdomImportSource: ReactPyVdomImportSource,
+  client: ReactPyClient,
+): Promise<BindImportSource> {
+  let module: ReactPyModule;
+  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: HTMLElement) => {
+    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: {
+  client: ReactPyClient;
+  module: ReactPyModule;
+  binding: ReactPyModuleBinding;
+  model: ReactPyVdom;
+  currentImportSource: ReactPyVdomImportSource;
+}): any {
+  let type: any;
+  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: ReactPyVdomImportSource,
+  source2: ReactPyVdomImportSource,
+) {
+  return (
+    source1.source === source2.source &&
+    source1.sourceType === source2.sourceType
+  );
+}
+
+function stringifyImportSource(importSource: ReactPyVdomImportSource) {
+  return JSON.stringify({
+    source: importSource.source,
+    sourceType: importSource.sourceType,
+  });
+}
+
+export function createChildren<Child>(
+  model: ReactPyVdom,
+  createChild: (child: ReactPyVdom) => Child,
+): (Child | string)[] {
+  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: ReactPyVdom,
+  client: ReactPyClient,
+): { [key: string]: any } {
+  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: ReactPyClient,
+  name: string,
+  { target, preventDefault, stopPropagation }: ReactPyVdomEventHandler,
+): [string, () => void] {
+  return [
+    name,
+    function () {
+      const data = Array.from(arguments).map((value) => {
+        if (!(typeof value === "object" && value.nativeEvent)) {
+          return value;
+        }
+        const event = value as React.SyntheticEvent<any>;
+        if (preventDefault) {
+          event.preventDefault();
+        }
+        if (stopPropagation) {
+          event.stopPropagation();
+        }
+        return serializeEvent(event.nativeEvent);
+      });
+      client.sendMessage({ type: "layout-event", data, target });
+    },
+  ];
+}
+
+function normalizeAttribute([key, value]: [string, any]): [string, any] {
+  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: string): string {
+  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"];
+
+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;
+};

package/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "../../../tsconfig.package.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src",
+    "composite": true
+  },
+  "include": ["src"],
+  "references": [
+    {
+      "path": "../../event-to-object"
+    }
+  ]
+}

package/src/components.js

@@ -1,220 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import htm from "htm";
-import { set as setJsonPointer } from "json-pointer";
-
-import { useImportSource } from "./import-source.js";
-import { LayoutContext } from "./contexts.js";
-
-import {
-  createElementAttributes,
-  createElementChildren,
-} from "./element-utils.js";
-
-const html = htm.bind(React.createElement);
-
-export function Layout({ saveUpdateHook, sendEvent, loadImportSource }) {
-  const currentModel = React.useState({})[0];
-  const forceUpdate = useForceUpdate();
-
-  const patchModel = React.useCallback(
-    ({ path, model }) => {
-      if (!path) {
-        Object.assign(currentModel, model);
-      } else {
-        setJsonPointer(currentModel, path, model);
-      }
-      forceUpdate();
-    },
-    [currentModel]
-  );
-
-  React.useEffect(() => saveUpdateHook(patchModel), [patchModel]);
-
-  if (!Object.keys(currentModel).length) {
-    return html`<${React.Fragment} />`;
-  }
-
-  return html`
-    <${LayoutContext.Provider} value=${{ sendEvent, loadImportSource }}>
-      <${Element} model=${currentModel} />
-    <//>
-  `;
-}
-
-export function Element({ model }) {
-  if (model.error !== undefined) {
-    if (model.error) {
-      return html`<pre>${model.error}</pre>`;
-    } else {
-      return null;
-    }
-  } else if (model.tagName == "script") {
-    return html`<${ScriptElement} model=${model} />`;
-  } else if (["input", "select", "textarea"].includes(model.tagName)) {
-    return html`<${UserInputElement} model=${model} />`;
-  } else if (model.importSource) {
-    return html`<${ImportedElement} model=${model} />`;
-  } else {
-    return html`<${StandardElement} model=${model} />`;
-  }
-}
-
-function StandardElement({ model }) {
-  const layoutContext = React.useContext(LayoutContext);
-
-  let type;
-  if (model.tagName == "") {
-    type = React.Fragment;
-  } else {
-    type = model.tagName;
-  }
-
-  // Use createElement here to avoid warning about variable numbers of children not
-  // having keys. Warning about this must now be the responsibility of the server
-  // providing the models instead of the client rendering them.
-  return React.createElement(
-    type,
-    createElementAttributes(model, layoutContext.sendEvent),
-    ...createElementChildren(
-      model,
-      (model) => html`<${Element} key=${model.key} model=${model} />`
-    )
-  );
-}
-
-// Element with a value attribute controlled by user input
-function UserInputElement({ model }) {
-  const ref = React.useRef();
-  const layoutContext = React.useContext(LayoutContext);
-
-  const props = createElementAttributes(model, layoutContext.sendEvent);
-
-  // Because we handle events asynchronously, we must leave the value uncontrolled in
-  // order to allow all changes committed by the user to be recorded in the order they
-  // occur. If we don't the user may commit multiple changes before we render next
-  // causing the content of prior changes to be overwritten by subsequent changes.
-  let value = props.value;
-  delete props.value;
-
-  // Instead of controlling the value, we set it in an effect.
-  React.useEffect(() => {
-    if (value !== undefined) {
-      ref.current.value = value;
-    }
-  }, [ref.current, value]);
-
-  // Track a buffer of observed values in order to avoid flicker
-  const observedValues = React.useState([])[0];
-  if (observedValues) {
-    if (value === observedValues[0]) {
-      observedValues.shift();
-      value = observedValues[observedValues.length - 1];
-    } else {
-      observedValues.length = 0;
-    }
-  }
-
-  const givenOnChange = props.onChange;
-  if (typeof givenOnChange === "function") {
-    props.onChange = (event) => {
-      observedValues.push(event.target.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 server
-  // providing the models instead of the client rendering them.
-  return React.createElement(
-    model.tagName,
-    {
-      ...props,
-      ref: (target) => {
-        ref.current = target;
-      },
-    },
-    ...createElementChildren(
-      model,
-      (model) => html`<${Element} key=${model.key} model=${model} />`
-    )
-  );
-}
-
-function ScriptElement({ model }) {
-  const ref = React.useRef();
-  React.useEffect(() => {
-    if (model?.children?.length > 1) {
-      console.error("Too many children for 'script' element.");
-    }
-
-    let scriptContent = model?.children?.[0];
-
-    let scriptElement;
-    if (model.attributes) {
-      scriptElement = document.createElement("script");
-      for (const [k, v] of Object.entries(model.attributes)) {
-        scriptElement.setAttribute(k, v);
-      }
-      scriptElement.appendChild(document.createTextNode(scriptContent));
-      ref.current.appendChild(scriptElement);
-    } else {
-      let scriptResult = eval(scriptContent);
-      if (typeof scriptResult == "function") {
-        return scriptResult();
-      }
-    }
-  }, [model.key]);
-  return html`<div ref=${ref} />`;
-}
-
-function ImportedElement({ model }) {
-  const layoutContext = React.useContext(LayoutContext);
-
-  const importSourceFallback = model.importSource.fallback;
-  const importSource = useImportSource(model.importSource);
-
-  if (!importSource) {
-    // display a fallback if one was given
-    if (!importSourceFallback) {
-      return html`<div />`;
-    } else if (typeof importSourceFallback === "string") {
-      return html`<div>${importSourceFallback}</div>`;
-    } else {
-      return html`<${StandardElement} model=${importSourceFallback} />`;
-    }
-  } else {
-    return html`<${_ImportedElement}
-      model=${model}
-      importSource=${importSource}
-    />`;
-  }
-}
-
-function _ImportedElement({ model, importSource }) {
-  const layoutContext = React.useContext(LayoutContext);
-  const mountPoint = React.useRef(null);
-  const sourceBinding = React.useRef(null);
-
-  React.useEffect(() => {
-    sourceBinding.current = importSource.bind(mountPoint.current);
-    if (!importSource.data.unmountBeforeUpdate) {
-      return sourceBinding.current.unmount;
-    }
-  }, []);
-
-  // this effect must run every time in case the model has changed
-  React.useEffect(() => {
-    sourceBinding.current.render(model);
-    if (importSource.data.unmountBeforeUpdate) {
-      return sourceBinding.current.unmount;
-    }
-  });
-
-  return html`<div ref=${mountPoint} />`;
-}
-
-function useForceUpdate() {
-  const [, updateState] = React.useState();
-  return React.useCallback(() => updateState({}), []);
-}

package/src/contexts.js

@@ -1,6 +0,0 @@
-import React from "react";
-
-export const LayoutContext = React.createContext({
-  sendEvent: undefined,
-  loadImportSource: undefined,
-});

package/src/element-utils.js

@@ -1,82 +0,0 @@
-import { serializeEvent } from "./event-to-object.js";
-
-export function createElementChildren(model, createElement) {
-  if (!model.children) {
-    return [];
-  } else {
-    return model.children
-      .filter((x) => x) // filter nulls
-      .map((child) => {
-        switch (typeof child) {
-          case "object":
-            return createElement(child);
-          case "string":
-            return child;
-        }
-      });
-  }
-}
-
-export function createElementAttributes(model, sendEvent) {
-  const attributes = Object.assign({}, model.attributes);
-
-  if (model.eventHandlers) {
-    for (const [eventName, eventSpec] of Object.entries(model.eventHandlers)) {
-      attributes[eventName] = createEventHandler(sendEvent, eventSpec);
-    }
-  }
-
-  return Object.fromEntries(Object.entries(attributes).map(normalizeAttribute));
-}
-
-function createEventHandler(sendEvent, eventSpec) {
-  return function () {
-    const data = Array.from(arguments).map((value) => {
-      if (typeof value === "object" && value.nativeEvent) {
-        if (eventSpec["preventDefault"]) {
-          value.preventDefault();
-        }
-        if (eventSpec["stopPropagation"]) {
-          value.stopPropagation();
-        }
-        return serializeEvent(value);
-      } else {
-        return value;
-      }
-    });
-    sendEvent({
-      data: data,
-      target: eventSpec["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.replaceAll("_", "-");
-  } 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"];