Enormous rework of (mostly frontend) code.

Author: twavv

packages/webio/dist/mux.bundle.js

@@ -0,0 +1,29 @@
+{
+  "name": "julia-webio",
+  "version": "0.1.0",
+  "description": "Supporting Javascript files for WebIO.jl Julia package",
+  "repository": "https://github.com/shashi/WebIO.jl",
+  "author": "Shashi Gowda",
+  "license": "MIT",
+  "jupyterlab": {
+    "extension": "jupyterlab_entry.js"
+  },
+  "dependencies": {
+    "@babel/core": "^7.1.2",
+    "@babel/polyfill": "^7.0.0",
+    "@types/debug": "0.0.30",
+    "debug": "^4.0.1"
+  },
+  "devDependencies": {
+    "babel-loader": "^8.0.4",
+    "@babel/preset-env": "^7.1.0",
+    "ts-loader": "^5.2.1",
+    "tsc": "^1.20150623.0",
+    "typescript": "^3.1.1",
+    "webpack": "^4.6",
+    "webpack-cli": "^2.1"
+  },
+  "scripts": {
+    "build": "webpack"
+  }
+}

packages/webio/dist/mux.bundle.js.map

@@ -0,0 +1,235 @@
+import debug from "debug";
+const log = debug("WebIO:DomNode")
+
+import WebIONode, {WebIODomElement, WebIONodeDataBase, WebIONodeParams, WebIONodeType} from "./Node";
+import WebIOScope from "./Scope";
+import {createWebIOEventListener} from "./events";
+import createNode from "./createNode";
+
+const enum DomNamespace {
+  // "html" should actually be "http://www.w3.org/1999/xhtml" but it's okay
+  HTML = "html",
+  SVG = "http://www.w3.org/2000/svg",
+}
+
+/**
+ * A map of style (CSS) attributes to the associated value.
+ */
+interface StylesMap {
+  [attributeName: string]: string;
+}
+
+/**
+ * A map of event names to listeners (or function definitions of listeners).
+ */
+interface EventsMap {
+  [eventName: string]: string | EventListener;
+}
+
+/**
+ * A map of (DOM?) attributes to their values (or null if they should be unset).
+ */
+interface AttributesMap {
+  [attributeName: string]: string | null;
+}
+
+/**
+ * A map of namespaced (DOM) attributes to their values (or null if they should
+ * be unset).
+ *
+ * This doesn't seem to be implemented on the Julia side of things.
+ */
+interface AttributesNSMap {
+  [attributeName: string]: {
+    namespace: DomNamespace;
+    value: string | null;
+  }
+}
+
+/**
+ * Props associated with WebIO DOM nodes.
+ */
+interface DomNodeProps {
+  style?: StylesMap;
+  events?: EventsMap;
+  attributes?: AttributesMap;
+  attributesNS?: AttributesNSMap;
+  setInnerHtml?: string;
+
+  /**
+   * Miscellaneous attributes that will be set on the DOM element.
+   */
+  [otherProp: string]: any;
+}
+
+/**
+ * Data associated with a DOM node.
+ */
+export interface DomNodeData extends WebIONodeDataBase {
+  nodeType: WebIONodeType.DOM;
+
+  /**
+   * Information about the type of DOM node (e.g. a <div /> or SVG document).
+   */
+  instanceArgs: {
+    namespace: DomNamespace;
+    tag: string;
+  }
+  props: DomNodeProps;
+}
+
+class WebIODomNode extends WebIONode {
+  readonly element: WebIODomElement;
+  children: Array<WebIOScope | WebIODomNode>;
+  private eventListeners: {[eventType: string]: EventListenerOrEventListenerObject | undefined} = {};
+
+  private static createElement(data: DomNodeData) {
+    const {namespace, tag} = data.instanceArgs;
+    switch (namespace) {
+      case DomNamespace.HTML:
+        return document.createElement(tag);
+      case DomNamespace.SVG:
+        return document.createElementNS(DomNamespace.SVG, tag);
+      default:
+        throw new Error(`Unknown DOM namespace: ${namespace}.`);
+    }
+  }
+
+  constructor(nodeData: DomNodeData, options: WebIONodeParams) {
+    super(nodeData, options);
+    log("Creating WebIODomNode", {nodeData, options});
+    this.element = WebIODomNode.createElement(nodeData);
+    this.applyProps(nodeData.props);
+
+    // Create children and append to this node's element.
+    this.children = nodeData.children.map((nodeData) => (
+      createNode(nodeData, {webIO: this.webIO, scope: this.scope})
+    ));
+    for (const child of this.children) {
+      this.element.appendChild(child.element);
+    }
+  }
+
+  /**
+   * Apply "props" to the underlying DOM element.
+   *
+   * @param props - The props to apply.
+   */
+  applyProps(props: DomNodeProps) {
+    log("applyProps", props);
+    const {style, events, attributes, attributesNS, setInnerHtml, ...rest} = props;
+    style && this.applyStyles(style);
+    events && this.applyEvents(events);
+    attributes && this.applyAttributes(attributes);
+    attributesNS && this.applyAttributesNS(attributesNS);
+    setInnerHtml && this.setInnerHTML(setInnerHtml);
+    this.applyMiscellaneousProps(rest);
+  }
+
+  /**
+   * Apply all props that don't have special meaning.
+   *
+   * This should really be refactored so that all these "miscellaneous" props
+   * are delivered in a separate object (e.g. have props.miscProps on the same
+   * level as props.style and props.events et al.).
+   * @param props - The object of miscellaneous props and their values.
+   */
+  applyMiscellaneousProps(props: {[propName: string]: any}) {
+    log("applyMiscellaneousProps", props);
+    for (const propName of Object.keys(props)) {
+      (this.element as any)[propName] = props[propName];
+    }
+  }
+
+  applyStyles(styles: StylesMap) {
+    for (const attributeName of Object.keys(styles)) {
+      this.element.style[attributeName as any] = styles[attributeName];
+    }
+  }
+
+  /**
+   * Apply (add/remove) event listeners to the underlying DOM element.
+   *
+   * @param events - A map object from event names to event listeners. If an
+   *    event name is specified (e.g. `click`) that didn't exist before, the
+   *    associated handler (e.g. `events["click"]`) is added as a listener; if
+   *    the event name has already been specified (even if the listener function
+   *    changed!), then nothing happens; if the event name is absent (or null) in
+   *    the map, then any previously setup listeners (if any) are removed.
+   */
+  applyEvents(events: EventsMap) {
+    for (const eventName of Object.keys(events)) {
+      const oldListener = this.eventListeners[eventName];
+      const newListenerSource = events[eventName];
+      const newListener = newListenerSource && createWebIOEventListener(
+        this.element,
+        newListenerSource,
+        this.scope,
+      );
+
+      if (oldListener && !newListener) {
+        // We want to just remove the old listener.
+        this.element.removeEventListener(eventName, oldListener);
+        delete this.eventListeners[eventName];
+      } else if (!oldListener && newListener) {
+        this.element.addEventListener(eventName, newListener);
+        this.eventListeners[eventName] = newListener;
+      }
+
+      // If the listener is just changed, we don't really handle that.
+    }
+  }
+
+  /**
+   * Apply DOM attributes to the underlying DOM element.
+   *
+   * @param attributes - The map of attributes to apply.
+   */
+  applyAttributes(attributes: AttributesMap) {
+    for (const key of Object.keys(attributes)) {
+      const value = attributes[key];
+      if (value === null) {
+        this.element.removeAttribute(key);
+      } else {
+        this.element.setAttribute(key, value);
+      }
+    }
+  }
+
+  /**
+   * Apply namespaced DOM attributes to the underlying DOM element.
+   *
+   * @param attributes - The `{attributeName: {namespace, value}}` map to apply.
+   */
+  applyAttributesNS(attributes: AttributesNSMap) {
+    for (const key of Object.keys(attributes)) {
+      const {namespace, value} = attributes[key];
+      if (value === null) {
+        this.element.removeAttributeNS(namespace, key);
+      } else {
+        this.element.setAttributeNS(namespace, key, value);
+      }
+    }
+  }
+
+  /**
+   * Set the value associated with the node's element.
+   *
+   * This generally only works with `<input />` elements.
+   *
+   * @param value
+   * @throws Will throw an error if the element doesn't have a `value` attribute.
+   */
+  setValue(value: any) {
+    if ("value" in this.element) {
+      // If the value hasn't changed, don't re-set it.
+      if (this.element.value !== value) {
+        this.element.value = value;
+      }
+    } else {
+      throw new Error("Cannot set value on an HTMLElement that doesn't support it.");
+    }
+  }
+}
+
+export default WebIODomNode;

packages/webio/package-lock.json

@@ -0,0 +1,113 @@
+import debug from "debug";
+const log = debug("WebIO:Node");
+
+import WebIO from "./WebIO";
+import WebIOScope, {ScopeNodeData} from "./Scope";
+import WebIODomNode, {DomNodeData} from "./DomNode";
+
+/**
+ * Union of all WebIO supported DOM elements.
+ *
+ * Note: we can't use the base Element type for typing purposes because Element
+ * includes more abstract things than HTML/SVG Elements (that does always have
+ * the style property, for example).
+ * We also need HTMLInputElement to stop TypeScript from complaining that
+ * `value` doesn't exist on an input element, even though it's technically a
+ * sub-type of HTMLElement; TypeScript will still force us to make sure that the
+ * type of the element is compatible before accessing the value attribute though.
+ */
+export type WebIODomElement = HTMLElement | SVGElement | HTMLInputElement;
+
+// This was originally designed thinking that a Scope was a type of node,
+// but the thinking on that has changed.
+// And now, I'm thinking it has changed back.
+export type WebIONodeData = DomNodeData | ScopeNodeData;
+export const enum WebIONodeType {
+  DOM = "DOM",
+  SCOPE = "Scope", // this one is capitalized for whatever reason
+}
+
+/**
+ * Abstract base interface for "node data."
+ *
+ * "Node data" is the data used to construct `WebIONode` instances and is the
+ * data that is passed over the comm from Julia to the browser.
+ */
+export interface WebIONodeDataBase {
+  type: "node";
+  nodeType: WebIONodeType;
+  children: WebIONodeData[];
+}
+
+export interface WebIONodeParams {
+  scope?: WebIOScope;
+  webIO: WebIO;
+}
+
+/**
+ * A high-level "point-of-entry" under which WebIO "things" are rendered.
+ *
+ * A `WebIONode` has a root DOM element and some functionality for managing the
+ * attributes (DOM attributes, CSS styles, event listeners, etc.) that are
+ * applied to it.
+ */
+abstract class WebIONode {
+  abstract readonly element: WebIODomElement;
+  abstract children: Array<WebIOScope | WebIODomNode>;
+  readonly scope?: WebIOScope;
+  readonly webIO: WebIO;
+
+  protected constructor(
+    private readonly nodeData: WebIONodeData,
+    options: WebIONodeParams,
+  ) {
+    const {scope, webIO} = options;
+    this.scope = scope;
+    this.webIO = webIO;
+  }
+
+  /**
+   * Set the `innerHTML` attribute of the node's element.
+   *
+   * This method will guarantee the execution of `<script />`s which is not done
+   * by simply setting `element.innerHTML = ...`.
+   *
+   * @param html - The HTML string to use; any special HTML characters (`<`, `>`, `&`, etc.)
+   *    should be &-escaped as appropriate (e.g. to set the displayed text to "foo&bar",
+   *    `html` should be `foo&amp;bar`).
+   */
+  setInnerHTML(html: string) {
+    // In the original WebIO, we like to replace </script> with </_script> because the whole shebang
+    // is executed inside a <script></script> block (and we don't want to close it too early).
+    html = html.replace(/<\/_script>/g, "</script>");
+
+    log("setInnerHTML", html);
+    this.element.innerHTML = html;
+
+    // If the HTML contained any <script> tags, these are NOT executed when we assign the DOM
+    // innerHTML attribute, so we have to find-and-replace them to force them to execute.
+    // We do this weird array coercion because getElementsByTagName returns a
+    // HTMLCollection object, which updates as the contents of element update
+    // (creating an infinite loop).
+    const scripts = [...(this.element.getElementsByTagName("script") as any as HTMLScriptElement[])];
+    scripts.forEach((oldScript) => {
+      const newScript = document.createElement("script");
+
+      // Copy all attributes.
+      // Unfortunately, attributes is a NamedNodeMap which doesn't have very
+      // ES6-like methods of manipulation
+      for (let i = 0; i < oldScript.attributes.length; ++i) {
+        const {name, value} = oldScript.attributes[i];
+        newScript.setAttribute(name, value)
+      }
+
+      // Copy script content
+      newScript.appendChild(document.createTextNode(oldScript.innerHTML));
+
+      // Replace inside DOM
+      oldScript.parentNode!.replaceChild(oldScript, newScript);
+    });
+  }
+}
+
+export default WebIONode;