@reactpy/client 0.1.0 → 0.2.0

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

package/src/mount.js

@@ -1,105 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import { Layout } from "./components.js";
-
-export function mountLayout(mountElement, layoutProps) {
-  ReactDOM.render(React.createElement(Layout, layoutProps), mountElement);
-}
-
-export function mountLayoutWithWebSocket(
-  element,
-  endpoint,
-  loadImportSource,
-  maxReconnectTimeout
-) {
-  mountLayoutWithReconnectingWebSocket(
-    element,
-    endpoint,
-    loadImportSource,
-    maxReconnectTimeout
-  );
-}
-
-function mountLayoutWithReconnectingWebSocket(
-  element,
-  endpoint,
-  loadImportSource,
-  maxReconnectTimeout,
-  mountState = {
-    everMounted: false,
-    reconnectAttempts: 0,
-    reconnectTimeoutRange: 0,
-  }
-) {
-  const socket = new WebSocket(endpoint);
-
-  const updateHookPromise = new LazyPromise();
-
-  socket.onopen = (event) => {
-    console.info(`ReactPy WebSocket connected.`);
-
-    if (mountState.everMounted) {
-      ReactDOM.unmountComponentAtNode(element);
-    }
-    _resetOpenMountState(mountState);
-
-    mountLayout(element, {
-      loadImportSource,
-      saveUpdateHook: updateHookPromise.resolve,
-      sendEvent: (event) => socket.send(JSON.stringify(event)),
-    });
-  };
-
-  socket.onmessage = (event) => {
-    const message = JSON.parse(event.data);
-    updateHookPromise.promise.then((update) => update(message));
-  };
-
-  socket.onclose = (event) => {
-    if (!maxReconnectTimeout) {
-      console.info(`ReactPy WebSocket connection lost.`);
-      return;
-    }
-
-    const reconnectTimeout = _nextReconnectTimeout(
-      maxReconnectTimeout,
-      mountState
-    );
-
-    console.info(
-      `ReactPy WebSocket connection lost. Reconnecting in ${reconnectTimeout} seconds...`
-    );
-
-    setTimeout(function () {
-      mountState.reconnectAttempts++;
-      mountLayoutWithReconnectingWebSocket(
-        element,
-        endpoint,
-        loadImportSource,
-        maxReconnectTimeout,
-        mountState
-      );
-    }, reconnectTimeout * 1000);
-  };
-}
-
-function _resetOpenMountState(mountState) {
-  mountState.everMounted = true;
-  mountState.reconnectAttempts = 0;
-  mountState.reconnectTimeoutRange = 0;
-}
-
-function _nextReconnectTimeout(maxReconnectTimeout, mountState) {
-  const timeout =
-    Math.floor(Math.random() * mountState.reconnectTimeoutRange) || 1;
-  mountState.reconnectTimeoutRange =
-    (mountState.reconnectTimeoutRange + 5) % maxReconnectTimeout;
-  return timeout;
-}
-
-function LazyPromise() {
-  this.promise = new Promise((resolve, reject) => {
-    this.resolve = resolve;
-    this.reject = reject;
-  });
-}

package/src/server.js

@@ -1,46 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import { mountLayoutWithWebSocket } from "./mount.js";
-
-export function mountWithLayoutServer(
-  element,
-  serverInfo,
-  maxReconnectTimeout
-) {
-  const loadImportSource = (source, sourceType) =>
-    import(
-      sourceType == "NAME" ? serverInfo.path.module(source) : source
-    ).catch((error) => {
-      // Added a catch to silence a build warning caller so we just re-throw.
-      // The caller is actually responsible for catching this error.
-      throw error;
-    });
-
-  mountLayoutWithWebSocket(
-    element,
-    serverInfo.path.stream,
-    loadImportSource,
-    maxReconnectTimeout
-  );
-}
-
-export function LayoutServerInfo({ host, port, path, query, secure }) {
-  const wsProtocol = `ws${secure ? "s" : ""}`;
-  const wsBaseUrl = `${wsProtocol}://${host}:${port}`;
-
-  let pathName = path || new URL(document.baseURI).pathname;
-  if (pathName.endsWith("/")) {
-    pathName = pathName.slice(0, -1);
-  }
-
-  if (query) {
-    query = `?${query}`;
-  } else {
-    query = "";
-  }
-
-  this.path = {
-    stream: `${wsBaseUrl}/_reactpy/stream${pathName}${query}`,
-    module: (source) => `/_reactpy/modules/${source}`,
-  };
-}