@reactpy/client 0.1.0 → 0.2.1

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"];

package/src/event-to-object.js

@@ -1,240 +0,0 @@
-export function serializeEvent(event) {
-  const data = {};
-
-  if (event.type in eventTransforms) {
-    Object.assign(data, eventTransforms[event.type](event));
-  }
-
-  data.target = serializeDomElement(event.target);
-  data.currentTarget =
-    event.target === event.currentTarget
-      ? data.target
-      : serializeDomElement(event.currentTarget);
-  data.relatedTarget = serializeDomElement(event.relatedTarget);
-
-  return data;
-}
-
-function serializeDomElement(element) {
-  let elementData = null;
-  if (element) {
-    elementData = defaultElementTransform(element);
-    if (element.tagName in elementTransforms) {
-      elementTransforms[element.tagName].forEach((trans) =>
-        Object.assign(elementData, trans(element))
-      );
-    }
-  }
-  return elementData;
-}
-
-const elementTransformCategories = {
-  hasValue: (element) => ({
-    value: element.value,
-  }),
-  hasCurrentTime: (element) => ({
-    currentTime: element.currentTime,
-  }),
-  hasFiles: (element) => {
-    if (element?.type === "file") {
-      return {
-        files: Array.from(element.files).map((file) => ({
-          lastModified: file.lastModified,
-          name: file.name,
-          size: file.size,
-          type: file.type,
-        })),
-      };
-    } else {
-      return {};
-    }
-  },
-  hasElements: (element) => {
-    const { elements } = element;
-    const indices = [...Array(elements.length).keys()];
-    return {
-      elements: indices.map((index) => serializeDomElement(elements[index])),
-    };
-  },
-  hasName: (element) => {
-    const { name } = element;
-    // In some edge cases, "name" may not be a string. For example, in the case of
-    // `<form><input name="name"></form>`, the "name" attribute of the `<form>` will
-    // be the `<input>` element.
-    return typeof name === "string" ? { name } : {};
-  },
-};
-
-function defaultElementTransform(element) {
-  return { boundingClientRect: element.getBoundingClientRect() };
-}
-
-const elementTagCategories = {
-  hasValue: [
-    "BUTTON",
-    "INPUT",
-    "OPTION",
-    "LI",
-    "METER",
-    "PROGRESS",
-    "PARAM",
-    "SELECT",
-    "TEXTAREA",
-  ],
-  hasCurrentTime: ["AUDIO", "VIDEO"],
-  hasFiles: ["INPUT"],
-  hasElements: ["FORM"],
-  hasName: [
-    "BUTTON",
-    "FORM",
-    "FIELDSET",
-    "IFRAME",
-    "INPUT",
-    "KEYGEN",
-    "OBJECT",
-    "OUTPUT",
-    "SELECT",
-    "TEXTAREA",
-    "MAP",
-    "META",
-    "PARAM",
-  ],
-};
-
-const elementTransforms = {};
-
-Object.keys(elementTagCategories).forEach((category) => {
-  elementTagCategories[category].forEach((type) => {
-    const transforms =
-      elementTransforms[type] || (elementTransforms[type] = []);
-    transforms.push(elementTransformCategories[category]);
-  });
-});
-
-function EventTransformCategories() {
-  this.clipboard = (event) => ({
-    clipboardData: event.clipboardData,
-  });
-  this.composition = (event) => ({
-    data: event.data,
-  });
-  this.keyboard = (event) => ({
-    altKey: event.altKey,
-    charCode: event.charCode,
-    ctrlKey: event.ctrlKey,
-    key: event.key,
-    keyCode: event.keyCode,
-    locale: event.locale,
-    location: event.location,
-    metaKey: event.metaKey,
-    repeat: event.repeat,
-    shiftKey: event.shiftKey,
-    which: event.which,
-  });
-  this.mouse = (event) => ({
-    altKey: event.altKey,
-    button: event.button,
-    buttons: event.buttons,
-    clientX: event.clientX,
-    clientY: event.clientY,
-    ctrlKey: event.ctrlKey,
-    metaKey: event.metaKey,
-    pageX: event.pageX,
-    pageY: event.pageY,
-    screenX: event.screenX,
-    screenY: event.screenY,
-    shiftKey: event.shiftKey,
-  });
-  this.pointer = (event) => ({
-    ...this.mouse(event),
-    pointerId: event.pointerId,
-    width: event.width,
-    height: event.height,
-    pressure: event.pressure,
-    tiltX: event.tiltX,
-    tiltY: event.tiltY,
-    pointerType: event.pointerType,
-    isPrimary: event.isPrimary,
-  });
-  this.selection = () => {
-    return { selectedText: window.getSelection().toString() };
-  };
-  this.touch = (event) => ({
-    altKey: event.altKey,
-    ctrlKey: event.ctrlKey,
-    metaKey: event.metaKey,
-    shiftKey: event.shiftKey,
-  });
-  this.ui = (event) => ({
-    detail: event.detail,
-  });
-  this.wheel = (event) => ({
-    deltaMode: event.deltaMode,
-    deltaX: event.deltaX,
-    deltaY: event.deltaY,
-    deltaZ: event.deltaZ,
-  });
-  this.animation = (event) => ({
-    animationName: event.animationName,
-    pseudoElement: event.pseudoElement,
-    elapsedTime: event.elapsedTime,
-  });
-  this.transition = (event) => ({
-    propertyName: event.propertyName,
-    pseudoElement: event.pseudoElement,
-    elapsedTime: event.elapsedTime,
-  });
-}
-
-const eventTypeCategories = {
-  clipboard: ["copy", "cut", "paste"],
-  composition: ["compositionend", "compositionstart", "compositionupdate"],
-  keyboard: ["keydown", "keypress", "keyup"],
-  mouse: [
-    "click",
-    "contextmenu",
-    "doubleclick",
-    "drag",
-    "dragend",
-    "dragenter",
-    "dragexit",
-    "dragleave",
-    "dragover",
-    "dragstart",
-    "drop",
-    "mousedown",
-    "mouseenter",
-    "mouseleave",
-    "mousemove",
-    "mouseout",
-    "mouseover",
-    "mouseup",
-  ],
-  pointer: [
-    "pointerdown",
-    "pointermove",
-    "pointerup",
-    "pointercancel",
-    "gotpointercapture",
-    "lostpointercapture",
-    "pointerenter",
-    "pointerleave",
-    "pointerover",
-    "pointerout",
-  ],
-  selection: ["select"],
-  touch: ["touchcancel", "touchend", "touchmove", "touchstart"],
-  ui: ["scroll"],
-  wheel: ["wheel"],
-  animation: ["animationstart", "animationend", "animationiteration"],
-  transition: ["transitionend"],
-};
-
-const eventTransforms = {};
-
-const eventTransformCategories = new EventTransformCategories();
-Object.keys(eventTypeCategories).forEach((category) => {
-  eventTypeCategories[category].forEach((type) => {
-    eventTransforms[type] = eventTransformCategories[category];
-  });
-});

package/src/import-source.js

@@ -1,134 +0,0 @@
-import React from "react";
-
-import { LayoutContext } from "./contexts.js";
-
-import {
-  createElementAttributes,
-  createElementChildren,
-} from "./element-utils.js";
-
-export function useImportSource(modelImportSource) {
-  const layoutContext = React.useContext(LayoutContext);
-  const [importSource, setImportSource] = React.useState(null);
-
-  React.useEffect(() => {
-    let unmounted = false;
-
-    loadModelImportSource(layoutContext, modelImportSource).then((src) => {
-      if (!unmounted) {
-        setImportSource(src);
-      }
-    });
-
-    return () => {
-      unmounted = true;
-    };
-  }, [layoutContext, modelImportSource, setImportSource]);
-
-  return importSource;
-}
-
-function loadModelImportSource(layoutContext, importSource) {
-  return layoutContext
-    .loadImportSource(importSource.source, importSource.sourceType)
-    .then((module) => {
-      if (typeof module.bind === "function") {
-        return {
-          data: importSource,
-          bind: (node) => {
-            const shortImportSource = {
-              source: importSource.source,
-              sourceType: importSource.sourceType,
-            };
-            const binding = module.bind(node, layoutContext);
-            if (
-              typeof binding.create === "function" &&
-              typeof binding.render === "function" &&
-              typeof binding.unmount === "function"
-            ) {
-              return {
-                render: (model) =>
-                  binding.render(
-                    createElementFromModuleBinding(
-                      layoutContext,
-                      importSource,
-                      module,
-                      binding,
-                      model
-                    )
-                  ),
-                unmount: binding.unmount,
-              };
-            } else {
-              console.error(
-                `${importSource.source} returned an impropper binding`
-              );
-            }
-          },
-        };
-      } else {
-        console.error(
-          `${importSource.source} did not export a function 'bind'`
-        );
-      }
-    });
-}
-
-function createElementFromModuleBinding(
-  layoutContext,
-  currentImportSource,
-  module,
-  binding,
-  model
-) {
-  let type;
-  if (model.importSource) {
-    if (!isImportSourceEqual(currentImportSource, model.importSource)) {
-      console.error(
-        "Parent element import source " +
-          stringifyImportSource(currentImportSource) +
-          " does not match child's import source " +
-          stringifyImportSource(model.importSource)
-      );
-      return null;
-    } else if (!module[model.tagName]) {
-      console.error(
-        "Module from source " +
-          stringifyImportSource(currentImportSource) +
-          ` does not export ${model.tagName}`
-      );
-      return null;
-    } else {
-      type = module[model.tagName];
-    }
-  } else {
-    type = model.tagName;
-  }
-  return binding.create(
-    type,
-    createElementAttributes(model, layoutContext.sendEvent),
-    createElementChildren(model, (child) =>
-      createElementFromModuleBinding(
-        layoutContext,
-        currentImportSource,
-        module,
-        binding,
-        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,
-  });
-}

package/src/index.js

@@ -1,4 +0,0 @@
-export * from "./mount.js";
-export * from "./contexts.js";
-export * from "./components.js";
-export * from "./server.js";