@mml-io/networked-dom-web-client 0.0.42

package/build/index.js

@@ -0,0 +1,519 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+// ../networked-dom-web/build/index.js
+var require_build = __commonJS({
+  "../networked-dom-web/build/index.js"(exports, module2) {
+    var __defProp2 = Object.defineProperty;
+    var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
+    var __getOwnPropNames2 = Object.getOwnPropertyNames;
+    var __hasOwnProp2 = Object.prototype.hasOwnProperty;
+    var __export = (target, all) => {
+      for (var name in all)
+        __defProp2(target, name, { get: all[name], enumerable: true });
+    };
+    var __copyProps2 = (to, from, except, desc) => {
+      if (from && typeof from === "object" || typeof from === "function") {
+        for (let key of __getOwnPropNames2(from))
+          if (!__hasOwnProp2.call(to, key) && key !== except)
+            __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
+      }
+      return to;
+    };
+    var __toCommonJS = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
+    var src_exports = {};
+    __export(src_exports, {
+      DOMSanitizer: () => DOMSanitizer,
+      NetworkedDOMWebsocket: () => NetworkedDOMWebsocket2,
+      NetworkedDOMWebsocketStatus: () => NetworkedDOMWebsocketStatus
+    });
+    module2.exports = __toCommonJS(src_exports);
+    var DOMSanitizer = class {
+      static sanitise(node) {
+        if (node.getAttributeNames) {
+          for (const attr of node.getAttributeNames()) {
+            if (!DOMSanitizer.IsValidAttributeName(attr)) {
+              node.removeAttribute(attr);
+            }
+          }
+        }
+        if (node.nodeName === "SCRIPT") {
+          node.innerText = "";
+        } else {
+          if (node.getAttributeNames) {
+            for (const attr of node.getAttributeNames()) {
+              if (!DOMSanitizer.shouldAcceptAttribute(attr)) {
+                node.removeAttribute(attr);
+              }
+            }
+          }
+          for (let i = 0; i < node.childNodes.length; i++) {
+            DOMSanitizer.sanitise(node.childNodes[i]);
+          }
+        }
+      }
+      static IsASCIIDigit(c) {
+        return c >= "0" && c <= "9";
+      }
+      static IsASCIIAlpha(c) {
+        return c >= "a" && c <= "z";
+      }
+      static IsValidAttributeName(characters) {
+        const c = characters[0];
+        if (!(DOMSanitizer.IsASCIIAlpha(c) || c === ":" || c === "_")) {
+          return false;
+        }
+        for (let i = 1; i < characters.length; i++) {
+          const c2 = characters[i];
+          if (!(DOMSanitizer.IsASCIIDigit(c2) || DOMSanitizer.IsASCIIAlpha(c2) || c2 === ":" || c2 === "_" || c2 === "-" || c2 === ".")) {
+            return false;
+          }
+        }
+        return true;
+      }
+      static shouldAcceptAttribute(attribute) {
+        if (!DOMSanitizer.IsValidAttributeName(attribute)) {
+          console.warn("Invalid attribute name", attribute);
+          return false;
+        }
+        return !attribute.startsWith("on");
+      }
+    };
+    var websocketProtocol = "networked-dom-v0.1";
+    var startingBackoffTimeMilliseconds = 100;
+    var maximumBackoffTimeMilliseconds = 1e4;
+    var maximumWebsocketConnectionTimeout = 5e3;
+    var NetworkedDOMWebsocketStatus = /* @__PURE__ */ ((NetworkedDOMWebsocketStatus2) => {
+      NetworkedDOMWebsocketStatus2[NetworkedDOMWebsocketStatus2["Connecting"] = 0] = "Connecting";
+      NetworkedDOMWebsocketStatus2[NetworkedDOMWebsocketStatus2["Connected"] = 1] = "Connected";
+      NetworkedDOMWebsocketStatus2[NetworkedDOMWebsocketStatus2["Reconnecting"] = 2] = "Reconnecting";
+      NetworkedDOMWebsocketStatus2[NetworkedDOMWebsocketStatus2["Disconnected"] = 3] = "Disconnected";
+      return NetworkedDOMWebsocketStatus2;
+    })(NetworkedDOMWebsocketStatus || {});
+    var NetworkedDOMWebsocket2 = class {
+      constructor(url, websocketFactory, parentElement, timeCallback, statusUpdateCallback) {
+        this.idToElement = /* @__PURE__ */ new Map();
+        this.elementToId = /* @__PURE__ */ new Map();
+        this.websocket = null;
+        this.currentRoot = null;
+        this.stopped = false;
+        this.backoffTime = startingBackoffTimeMilliseconds;
+        this.status = null;
+        this.url = url;
+        this.websocketFactory = websocketFactory;
+        this.parentElement = parentElement;
+        this.timeCallback = timeCallback || (() => {
+        });
+        this.statusUpdateCallback = statusUpdateCallback || (() => {
+        });
+        this.setStatus(
+          0
+          /* Connecting */
+        );
+        this.startWebSocketConnectionAttempt();
+      }
+      static createWebSocket(url) {
+        return new WebSocket(url, [websocketProtocol]);
+      }
+      setStatus(status) {
+        if (this.status !== status) {
+          this.status = status;
+          this.statusUpdateCallback(status);
+        }
+      }
+      createWebsocketWithTimeout(timeout) {
+        return new Promise((resolve, reject) => {
+          const timeoutId = setTimeout(() => {
+            reject(new Error("websocket connection timed out"));
+          }, timeout);
+          const websocket = this.websocketFactory(this.url);
+          websocket.addEventListener("open", () => {
+            clearTimeout(timeoutId);
+            this.websocket = websocket;
+            websocket.addEventListener("message", (event) => {
+              if (websocket !== this.websocket) {
+                console.log("Ignoring websocket message event because it is no longer current");
+                websocket.close();
+                return;
+              }
+              this.handleIncomingWebsocketMessage(event);
+            });
+            const onWebsocketClose = async () => {
+              const hadContents = this.currentRoot !== null;
+              this.clearContents();
+              if (this.stopped) {
+                this.setStatus(
+                  3
+                  /* Disconnected */
+                );
+                return;
+              }
+              if (!hadContents) {
+                await this.waitBackoffTime();
+              }
+              this.setStatus(
+                2
+                /* Reconnecting */
+              );
+              this.startWebSocketConnectionAttempt();
+            };
+            websocket.addEventListener("close", (e) => {
+              if (websocket !== this.websocket) {
+                console.warn("Ignoring websocket close event because it is no longer current");
+                return;
+              }
+              console.log("NetworkedDOMWebsocket close", e);
+              onWebsocketClose();
+            });
+            websocket.addEventListener("error", (e) => {
+              if (websocket !== this.websocket) {
+                console.log("Ignoring websocket error event because it is no longer current");
+                return;
+              }
+              console.error("NetworkedDOMWebsocket error", e);
+              onWebsocketClose();
+            });
+            resolve(websocket);
+          });
+          websocket.addEventListener("error", (e) => {
+            clearTimeout(timeoutId);
+            reject(e);
+          });
+        });
+      }
+      async waitBackoffTime() {
+        console.warn(`Websocket connection to '${this.url}' failed: retrying in ${this.backoffTime}ms`);
+        await new Promise((resolve) => setTimeout(resolve, this.backoffTime));
+        this.backoffTime = Math.min(
+          // Introduce a small amount of randomness to prevent clients from retrying in lockstep
+          this.backoffTime * (1.5 + Math.random() * 0.5),
+          maximumBackoffTimeMilliseconds
+        );
+      }
+      async startWebSocketConnectionAttempt() {
+        if (this.stopped) {
+          return;
+        }
+        while (true) {
+          if (this.stopped) {
+            return;
+          }
+          try {
+            await this.createWebsocketWithTimeout(maximumWebsocketConnectionTimeout);
+            break;
+          } catch (e) {
+            this.setStatus(
+              2
+              /* Reconnecting */
+            );
+            await this.waitBackoffTime();
+          }
+        }
+      }
+      handleIncomingWebsocketMessage(event) {
+        const messages = JSON.parse(event.data);
+        for (const message of messages) {
+          if (message.type === "error") {
+            console.error("Error from server", message);
+          } else if (message.type === "warning") {
+            console.warn("Warning from server", message);
+          } else {
+            if (message.documentTime) {
+              if (this.timeCallback) {
+                this.timeCallback(message.documentTime);
+              }
+            }
+            if (message.type === "snapshot") {
+              this.backoffTime = startingBackoffTimeMilliseconds;
+              this.setStatus(
+                1
+                /* Connected */
+              );
+              if (this.currentRoot) {
+                this.currentRoot.remove();
+                this.currentRoot = null;
+                this.elementToId.clear();
+                this.idToElement.clear();
+              }
+              const element = this.handleNewElement(message.snapshot);
+              if (!element) {
+                throw new Error("Snapshot element not created");
+              }
+              if (!(element instanceof HTMLElement)) {
+                throw new Error("Snapshot element is not an HTMLElement");
+              }
+              this.currentRoot = element;
+              this.parentElement.append(element);
+            } else if (message.type === "attributeChange") {
+              this.handleAttributeChange(message);
+            } else if (message.type === "childrenChanged") {
+              this.handleChildrenChanged(message);
+            } else if (message.type === "textChanged") {
+              this.handleTextChanged(message);
+            } else if (message.type === "ping") {
+              this.send({
+                type: "pong",
+                pong: message.ping
+              });
+            } else {
+              console.warn("unknown message type", message);
+            }
+          }
+        }
+      }
+      stop() {
+        this.stopped = true;
+        if (this.websocket !== null) {
+          this.websocket.close();
+          this.websocket = null;
+        }
+      }
+      handleEvent(element, event) {
+        const nodeId = this.elementToId.get(element);
+        if (nodeId === void 0 || nodeId === null) {
+          throw new Error("Element not found");
+        }
+        console.log(
+          `Sending event to websocket: "${event.type}" on node: ${nodeId} type: ${element.tagName}`
+        );
+        const detailWithoutElement = {
+          ...event.detail
+        };
+        delete detailWithoutElement.element;
+        const remoteEvent = {
+          type: "event",
+          nodeId,
+          name: event.type,
+          bubbles: event.bubbles,
+          params: detailWithoutElement
+        };
+        this.send(remoteEvent);
+      }
+      send(fromClientMessage) {
+        if (!this.websocket) {
+          throw new Error("No websocket created");
+        }
+        this.websocket.send(JSON.stringify(fromClientMessage));
+      }
+      handleTextChanged(message) {
+        const { nodeId, text } = message;
+        if (nodeId === void 0 || nodeId === null) {
+          console.warn("No nodeId in textChanged message");
+          return;
+        }
+        const node = this.idToElement.get(nodeId);
+        if (!node) {
+          throw new Error("No node found for textChanged message");
+        }
+        if (!(node instanceof Text)) {
+          throw new Error("Node for textChanged message is not a Text node");
+        }
+        node.textContent = text;
+      }
+      handleChildrenChanged(message) {
+        const { nodeId, addedNodes, removedNodes, previousNodeId } = message;
+        if (nodeId === void 0 || nodeId === null) {
+          console.warn("No nodeId in childrenChanged message");
+          return;
+        }
+        const parent = this.idToElement.get(nodeId);
+        if (!parent) {
+          throw new Error("No parent found for childrenChanged message");
+        }
+        if (!parent.isConnected) {
+          console.error("Parent is not connected", parent);
+        }
+        if (!(parent instanceof HTMLElement)) {
+          throw new Error("Parent is not an HTMLElement (that supports children)");
+        }
+        let previousElement;
+        if (previousNodeId) {
+          previousElement = this.idToElement.get(previousNodeId);
+          if (!previousElement) {
+            throw new Error("No previous element found for childrenChanged message");
+          }
+        }
+        for (const addedNode of addedNodes) {
+          const childElement = this.handleNewElement(addedNode);
+          if (childElement) {
+            if (previousElement) {
+              const nextElement = previousElement.nextSibling;
+              if (nextElement) {
+                parent.insertBefore(childElement, nextElement);
+              } else {
+                parent.append(childElement);
+              }
+            } else {
+              parent.append(childElement);
+            }
+          }
+        }
+        for (const removedNode of removedNodes) {
+          const childElement = this.idToElement.get(removedNode);
+          if (!childElement) {
+            throw new Error(`Child element not found: ${removedNode}`);
+          }
+          this.elementToId.delete(childElement);
+          this.idToElement.delete(removedNode);
+          parent.removeChild(childElement);
+          if (childElement instanceof HTMLElement) {
+            this.removeChildElementIds(childElement);
+          }
+        }
+      }
+      removeChildElementIds(parent) {
+        for (let i = 0; i < parent.children.length; i++) {
+          const child = parent.children[i];
+          const childId = this.elementToId.get(child);
+          if (!childId) {
+            console.error("Inner child of removed element had no id", child);
+          } else {
+            this.elementToId.delete(child);
+            this.idToElement.delete(childId);
+          }
+          this.removeChildElementIds(child);
+        }
+      }
+      handleAttributeChange(message) {
+        const { nodeId, attribute, newValue } = message;
+        if (nodeId === void 0 || nodeId === null) {
+          console.warn("No nodeId in attributeChange message");
+          return;
+        }
+        const element = this.idToElement.get(nodeId);
+        if (element) {
+          if (element instanceof HTMLElement) {
+            if (newValue === null) {
+              element.removeAttribute(attribute);
+            } else {
+              if (DOMSanitizer.shouldAcceptAttribute(attribute)) {
+                element.setAttribute(attribute, newValue);
+              }
+            }
+          } else {
+            console.error("Element is not an HTMLElement and cannot support attributes", element);
+          }
+        } else {
+          console.error("No element found for attributeChange message");
+        }
+      }
+      handleNewElement(message) {
+        if (message.type === "text") {
+          const { nodeId: nodeId2, text: text2 } = message;
+          const textNode = document.createTextNode("");
+          textNode.textContent = text2;
+          this.idToElement.set(nodeId2, textNode);
+          this.elementToId.set(textNode, nodeId2);
+          return textNode;
+        }
+        const { tag, nodeId, attributes, children, text } = message;
+        if (nodeId === void 0 || nodeId === null) {
+          console.warn("No nodeId in handleNewElement message", message);
+          return null;
+        }
+        if (this.idToElement.has(nodeId)) {
+          console.error(
+            "Received nodeId to add that is already present",
+            nodeId,
+            this.idToElement.get(nodeId)
+          );
+        }
+        if (tag === "#text") {
+          const textNode = document.createTextNode("");
+          textNode.textContent = text || null;
+          this.idToElement.set(nodeId, textNode);
+          this.elementToId.set(textNode, nodeId);
+          return textNode;
+        }
+        const element = document.createElement(tag);
+        this.idToElement.set(nodeId, element);
+        this.elementToId.set(element, nodeId);
+        for (const key in attributes) {
+          if (DOMSanitizer.shouldAcceptAttribute(key)) {
+            const value = attributes[key];
+            element.setAttribute(key, value);
+          }
+        }
+        if (children) {
+          for (const child of children) {
+            const childElement = this.handleNewElement(child);
+            if (childElement) {
+              element.append(childElement);
+            }
+          }
+        }
+        return element;
+      }
+      clearContents() {
+        this.idToElement.clear();
+        this.elementToId.clear();
+        if (this.currentRoot) {
+          this.currentRoot.remove();
+          this.currentRoot = null;
+        }
+      }
+    };
+  }
+});
+
+// src/index.ts
+var import_networked_dom_web = __toESM(require_build());
+var thisScript = document.currentScript;
+var scriptUrl = new URL(thisScript.src);
+(function() {
+  const websocketUrl = scriptUrl.searchParams.get("websocketUrl");
+  if (!websocketUrl) {
+    console.error("websocketUrl not set");
+    return;
+  }
+  window.addEventListener("load", () => {
+    const documentWebsocketUrls = websocketUrl.split(",");
+    for (const documentWebsocketUrl of documentWebsocketUrls) {
+      let overriddenHandler = null;
+      const eventHandler = (element, event) => {
+        if (!overriddenHandler) {
+          throw new Error("overriddenHandler not set");
+        }
+        overriddenHandler(element, event);
+      };
+      const remoteDocumentHolder = document.createElement("div");
+      document.body.append(remoteDocumentHolder);
+      remoteDocumentHolder.addEventListener("click", (event) => {
+        eventHandler(event.target, event);
+        return false;
+      });
+      const websocket = new import_networked_dom_web.NetworkedDOMWebsocket(
+        documentWebsocketUrl,
+        import_networked_dom_web.NetworkedDOMWebsocket.createWebSocket,
+        remoteDocumentHolder
+      );
+      overriddenHandler = (element, event) => {
+        websocket.handleEvent(element, event);
+      };
+    }
+  });
+})();
+//# sourceMappingURL=/index.js.map

package/build/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../networked-dom-web/src/index.ts", "../../networked-dom-web/src/DOMSanitizer.ts", "../../networked-dom-web/src/NetworkedDOMWebsocket.ts", "../src/index.ts"],
+  "sourcesContent": ["export * from \"./NetworkedDOMWebsocket\";\nexport * from \"./DOMSanitizer\";\n", "export class DOMSanitizer {\n  static sanitise(node: HTMLElement) {\n    if (node.getAttributeNames) {\n      for (const attr of node.getAttributeNames()) {\n        if (!DOMSanitizer.IsValidAttributeName(attr)) {\n          node.removeAttribute(attr);\n        }\n      }\n    }\n    if (node.nodeName === \"SCRIPT\") {\n      // set text to empty string\n      node.innerText = \"\";\n    } else {\n      if (node.getAttributeNames) {\n        for (const attr of node.getAttributeNames()) {\n          if (!DOMSanitizer.shouldAcceptAttribute(attr)) {\n            node.removeAttribute(attr);\n          }\n        }\n      }\n      for (let i = 0; i < node.childNodes.length; i++) {\n        DOMSanitizer.sanitise(node.childNodes[i] as HTMLElement);\n      }\n    }\n  }\n\n  static IsASCIIDigit(c: string): boolean {\n    return c >= \"0\" && c <= \"9\";\n  }\n\n  static IsASCIIAlpha(c: string) {\n    return c >= \"a\" && c <= \"z\";\n  }\n\n  static IsValidAttributeName(characters: string): boolean {\n    const c = characters[0];\n    if (!(DOMSanitizer.IsASCIIAlpha(c) || c === \":\" || c === \"_\")) {\n      return false;\n    }\n\n    for (let i = 1; i < characters.length; i++) {\n      const c = characters[i];\n      if (\n        !(\n          DOMSanitizer.IsASCIIDigit(c) ||\n          DOMSanitizer.IsASCIIAlpha(c) ||\n          c === \":\" ||\n          c === \"_\" ||\n          c === \"-\" ||\n          c === \".\"\n        )\n      ) {\n        return false;\n      }\n    }\n\n    return true;\n  }\n\n  static shouldAcceptAttribute(attribute: string) {\n    if (!DOMSanitizer.IsValidAttributeName(attribute)) {\n      console.warn(\"Invalid attribute name\", attribute);\n      return false;\n    }\n\n    // TODO - this might be overly restrictive - apologies to someone that finds this because you have a non-event attribute filtered by this\n    return !attribute.startsWith(\"on\");\n  }\n}\n", "import {\n  AttributeChangedDiff,\n  ChildrenChangedDiff,\n  ClientMessage,\n  NodeDescription,\n  RemoteEvent,\n  ServerMessage,\n  TextChangedDiff,\n} from \"@mml-io/networked-dom-protocol\";\n\nimport { DOMSanitizer } from \"./DOMSanitizer\";\n\nconst websocketProtocol = \"networked-dom-v0.1\";\n\nconst startingBackoffTimeMilliseconds = 100;\nconst maximumBackoffTimeMilliseconds = 10000;\nconst maximumWebsocketConnectionTimeout = 5000;\n\nexport type NetworkedDOMWebsocketFactory = (url: string) => WebSocket;\n\nexport enum NetworkedDOMWebsocketStatus {\n  Connecting,\n  Connected,\n  Reconnecting,\n  Disconnected,\n}\n\nexport class NetworkedDOMWebsocket {\n  private idToElement = new Map<number, Node>();\n  private elementToId = new Map<Node, number>();\n  private websocket: WebSocket | null = null;\n  private currentRoot: HTMLElement | null = null;\n\n  private url: string;\n  private websocketFactory: NetworkedDOMWebsocketFactory;\n  private parentElement: HTMLElement;\n  private timeCallback: (time: number) => void;\n  private statusUpdateCallback: (status: NetworkedDOMWebsocketStatus) => void;\n  private stopped = false;\n  private backoffTime = startingBackoffTimeMilliseconds;\n  private status: NetworkedDOMWebsocketStatus | null = null;\n\n  public static createWebSocket(url: string): WebSocket {\n    return new WebSocket(url, [websocketProtocol]);\n  }\n\n  constructor(\n    url: string,\n    websocketFactory: NetworkedDOMWebsocketFactory,\n    parentElement: HTMLElement,\n    timeCallback?: (time: number) => void,\n    statusUpdateCallback?: (status: NetworkedDOMWebsocketStatus) => void,\n  ) {\n    this.url = url;\n    this.websocketFactory = websocketFactory;\n    this.parentElement = parentElement;\n    this.timeCallback =\n      timeCallback ||\n      (() => {\n        // no-op\n      });\n    this.statusUpdateCallback =\n      statusUpdateCallback ||\n      (() => {\n        // no-op\n      });\n    this.setStatus(NetworkedDOMWebsocketStatus.Connecting);\n    this.startWebSocketConnectionAttempt();\n  }\n\n  private setStatus(status: NetworkedDOMWebsocketStatus) {\n    if (this.status !== status) {\n      this.status = status;\n      this.statusUpdateCallback(status);\n    }\n  }\n\n  private createWebsocketWithTimeout(timeout: number): Promise<WebSocket> {\n    return new Promise((resolve, reject) => {\n      const timeoutId = setTimeout(() => {\n        reject(new Error(\"websocket connection timed out\"));\n      }, timeout);\n      const websocket = this.websocketFactory(this.url);\n      websocket.addEventListener(\"open\", () => {\n        clearTimeout(timeoutId);\n\n        this.websocket = websocket;\n\n        websocket.addEventListener(\"message\", (event) => {\n          if (websocket !== this.websocket) {\n            console.log(\"Ignoring websocket message event because it is no longer current\");\n            websocket.close();\n            return;\n          }\n          this.handleIncomingWebsocketMessage(event);\n        });\n\n        const onWebsocketClose = async () => {\n          const hadContents = this.currentRoot !== null;\n          this.clearContents();\n          if (this.stopped) {\n            // This closing is expected. The client closed the websocket.\n            this.setStatus(NetworkedDOMWebsocketStatus.Disconnected);\n            return;\n          }\n          if (!hadContents) {\n            // The websocket did not deliver any contents. It may have been successfully opened, but immediately closed. This client should back off to prevent this happening in a rapid loop.\n            await this.waitBackoffTime();\n          }\n          // The websocket closed unexpectedly. Try to reconnect.\n          this.setStatus(NetworkedDOMWebsocketStatus.Reconnecting);\n          this.startWebSocketConnectionAttempt();\n        };\n\n        websocket.addEventListener(\"close\", (e) => {\n          if (websocket !== this.websocket) {\n            console.warn(\"Ignoring websocket close event because it is no longer current\");\n            return;\n          }\n          console.log(\"NetworkedDOMWebsocket close\", e);\n          onWebsocketClose();\n        });\n        websocket.addEventListener(\"error\", (e) => {\n          if (websocket !== this.websocket) {\n            console.log(\"Ignoring websocket error event because it is no longer current\");\n            return;\n          }\n          console.error(\"NetworkedDOMWebsocket error\", e);\n          onWebsocketClose();\n        });\n\n        resolve(websocket);\n      });\n      websocket.addEventListener(\"error\", (e) => {\n        clearTimeout(timeoutId);\n        reject(e);\n      });\n    });\n  }\n\n  private async waitBackoffTime(): Promise<void> {\n    console.warn(`Websocket connection to '${this.url}' failed: retrying in ${this.backoffTime}ms`);\n    await new Promise((resolve) => setTimeout(resolve, this.backoffTime));\n    this.backoffTime = Math.min(\n      // Introduce a small amount of randomness to prevent clients from retrying in lockstep\n      this.backoffTime * (1.5 + Math.random() * 0.5),\n      maximumBackoffTimeMilliseconds,\n    );\n  }\n\n  private async startWebSocketConnectionAttempt() {\n    if (this.stopped) {\n      return;\n    }\n    // eslint-disable-next-line no-constant-condition\n    while (true) {\n      if (this.stopped) {\n        return;\n      }\n      try {\n        await this.createWebsocketWithTimeout(maximumWebsocketConnectionTimeout);\n        break;\n      } catch (e) {\n        // Connection failed, retry with backoff\n        this.setStatus(NetworkedDOMWebsocketStatus.Reconnecting);\n        await this.waitBackoffTime();\n      }\n    }\n  }\n\n  private handleIncomingWebsocketMessage(event: MessageEvent) {\n    const messages = JSON.parse(event.data) as Array<ServerMessage>;\n    for (const message of messages) {\n      if (message.type === \"error\") {\n        console.error(\"Error from server\", message);\n      } else if (message.type === \"warning\") {\n        console.warn(\"Warning from server\", message);\n      } else {\n        if (message.documentTime) {\n          if (this.timeCallback) {\n            this.timeCallback(message.documentTime);\n          }\n        }\n        if (message.type === \"snapshot\") {\n          // This websocket is successfully connected. Reset the backoff time.\n          this.backoffTime = startingBackoffTimeMilliseconds;\n          this.setStatus(NetworkedDOMWebsocketStatus.Connected);\n\n          if (this.currentRoot) {\n            this.currentRoot.remove();\n            this.currentRoot = null;\n            this.elementToId.clear();\n            this.idToElement.clear();\n          }\n\n          // create a tree of DOM elements\n          // NOTE: the MLElement contructors are not executed during this stage\n          const element = this.handleNewElement(message.snapshot);\n          if (!element) {\n            throw new Error(\"Snapshot element not created\");\n          }\n          if (!(element instanceof HTMLElement)) {\n            throw new Error(\"Snapshot element is not an HTMLElement\");\n          }\n          this.currentRoot = element;\n          // appending to the tree causes MElements to be constructed\n          this.parentElement.append(element);\n        } else if (message.type === \"attributeChange\") {\n          this.handleAttributeChange(message);\n        } else if (message.type === \"childrenChanged\") {\n          this.handleChildrenChanged(message);\n        } else if (message.type === \"textChanged\") {\n          this.handleTextChanged(message);\n        } else if (message.type === \"ping\") {\n          this.send({\n            type: \"pong\",\n            pong: message.ping,\n          });\n        } else {\n          console.warn(\"unknown message type\", message);\n        }\n      }\n    }\n  }\n\n  public stop() {\n    this.stopped = true;\n    if (this.websocket !== null) {\n      this.websocket.close();\n      this.websocket = null;\n    }\n  }\n\n  public handleEvent(element: HTMLElement, event: CustomEvent<{ element: HTMLElement }>) {\n    const nodeId = this.elementToId.get(element);\n    if (nodeId === undefined || nodeId === null) {\n      throw new Error(\"Element not found\");\n    }\n\n    console.log(\n      `Sending event to websocket: \"${event.type}\" on node: ${nodeId} type: ${element.tagName}`,\n    );\n\n    const detailWithoutElement: Partial<typeof event.detail> = {\n      ...event.detail,\n    };\n    delete detailWithoutElement.element;\n\n    const remoteEvent: RemoteEvent = {\n      type: \"event\",\n      nodeId,\n      name: event.type,\n      bubbles: event.bubbles,\n      params: detailWithoutElement,\n    };\n\n    this.send(remoteEvent);\n  }\n\n  private send(fromClientMessage: ClientMessage) {\n    if (!this.websocket) {\n      throw new Error(\"No websocket created\");\n    }\n    this.websocket.send(JSON.stringify(fromClientMessage));\n  }\n\n  private handleTextChanged(message: TextChangedDiff) {\n    const { nodeId, text } = message;\n\n    if (nodeId === undefined || nodeId === null) {\n      console.warn(\"No nodeId in textChanged message\");\n      return;\n    }\n    const node = this.idToElement.get(nodeId);\n    if (!node) {\n      throw new Error(\"No node found for textChanged message\");\n    }\n    if (!(node instanceof Text)) {\n      throw new Error(\"Node for textChanged message is not a Text node\");\n    }\n    node.textContent = text;\n  }\n\n  private handleChildrenChanged(message: ChildrenChangedDiff) {\n    const { nodeId, addedNodes, removedNodes, previousNodeId } = message;\n    if (nodeId === undefined || nodeId === null) {\n      console.warn(\"No nodeId in childrenChanged message\");\n      return;\n    }\n    const parent = this.idToElement.get(nodeId);\n    if (!parent) {\n      throw new Error(\"No parent found for childrenChanged message\");\n    }\n    if (!parent.isConnected) {\n      console.error(\"Parent is not connected\", parent);\n    }\n    if (!(parent instanceof HTMLElement)) {\n      throw new Error(\"Parent is not an HTMLElement (that supports children)\");\n    }\n    let previousElement;\n    if (previousNodeId) {\n      previousElement = this.idToElement.get(previousNodeId);\n      if (!previousElement) {\n        throw new Error(\"No previous element found for childrenChanged message\");\n      }\n    }\n\n    for (const addedNode of addedNodes) {\n      const childElement = this.handleNewElement(addedNode);\n      if (childElement) {\n        if (previousElement) {\n          const nextElement = previousElement.nextSibling;\n          if (nextElement) {\n            parent.insertBefore(childElement, nextElement);\n          } else {\n            parent.append(childElement);\n          }\n        } else {\n          parent.append(childElement);\n        }\n      }\n    }\n    for (const removedNode of removedNodes) {\n      const childElement = this.idToElement.get(removedNode);\n      if (!childElement) {\n        throw new Error(`Child element not found: ${removedNode}`);\n      }\n      this.elementToId.delete(childElement);\n      this.idToElement.delete(removedNode);\n      parent.removeChild(childElement);\n      if (childElement instanceof HTMLElement) {\n        // If child is capable of supporting children then remove any that exist\n        this.removeChildElementIds(childElement);\n      }\n    }\n  }\n\n  private removeChildElementIds(parent: HTMLElement) {\n    for (let i = 0; i < parent.children.length; i++) {\n      const child = parent.children[i];\n      const childId = this.elementToId.get(child as HTMLElement);\n      if (!childId) {\n        console.error(\"Inner child of removed element had no id\", child);\n      } else {\n        this.elementToId.delete(child);\n        this.idToElement.delete(childId);\n      }\n      this.removeChildElementIds(child as HTMLElement);\n    }\n  }\n\n  private handleAttributeChange(message: AttributeChangedDiff) {\n    const { nodeId, attribute, newValue } = message;\n    if (nodeId === undefined || nodeId === null) {\n      console.warn(\"No nodeId in attributeChange message\");\n      return;\n    }\n    const element = this.idToElement.get(nodeId);\n    if (element) {\n      if (element instanceof HTMLElement) {\n        if (newValue === null) {\n          element.removeAttribute(attribute);\n        } else {\n          if (DOMSanitizer.shouldAcceptAttribute(attribute)) {\n            element.setAttribute(attribute, newValue);\n          }\n        }\n      } else {\n        console.error(\"Element is not an HTMLElement and cannot support attributes\", element);\n      }\n    } else {\n      console.error(\"No element found for attributeChange message\");\n    }\n  }\n\n  private handleNewElement(message: NodeDescription): Node | null {\n    if (message.type === \"text\") {\n      const { nodeId, text } = message;\n      const textNode = document.createTextNode(\"\");\n      textNode.textContent = text;\n      this.idToElement.set(nodeId, textNode);\n      this.elementToId.set(textNode, nodeId);\n      return textNode;\n    }\n    const { tag, nodeId, attributes, children, text } = message;\n    if (nodeId === undefined || nodeId === null) {\n      console.warn(\"No nodeId in handleNewElement message\", message);\n      return null;\n    }\n    if (this.idToElement.has(nodeId)) {\n      console.error(\n        \"Received nodeId to add that is already present\",\n        nodeId,\n        this.idToElement.get(nodeId),\n      );\n    }\n    if (tag === \"#text\") {\n      const textNode = document.createTextNode(\"\");\n      textNode.textContent = text || null;\n      this.idToElement.set(nodeId, textNode);\n      this.elementToId.set(textNode, nodeId);\n      return textNode;\n    }\n\n    const element = document.createElement(tag);\n    this.idToElement.set(nodeId, element);\n    this.elementToId.set(element, nodeId);\n    for (const key in attributes) {\n      if (DOMSanitizer.shouldAcceptAttribute(key)) {\n        const value = attributes[key];\n        element.setAttribute(key, value);\n      }\n    }\n    if (children) {\n      for (const child of children) {\n        const childElement = this.handleNewElement(child);\n        if (childElement) {\n          element.append(childElement);\n        }\n      }\n    }\n    return element;\n  }\n\n  private clearContents() {\n    this.idToElement.clear();\n    this.elementToId.clear();\n    if (this.currentRoot) {\n      this.currentRoot.remove();\n      this.currentRoot = null;\n    }\n  }\n}\n", "import { NetworkedDOMWebsocket } from \"@mml-io/networked-dom-web\";\n\nconst thisScript = document.currentScript as HTMLScriptElement;\nconst scriptUrl = new URL(thisScript.src);\n\n(function () {\n  const websocketUrl = scriptUrl.searchParams.get(\"websocketUrl\");\n  if (!websocketUrl) {\n    console.error(\"websocketUrl not set\");\n    return;\n  }\n  window.addEventListener(\"load\", () => {\n    const documentWebsocketUrls = websocketUrl.split(\",\");\n\n    for (const documentWebsocketUrl of documentWebsocketUrls) {\n      let overriddenHandler: ((element: HTMLElement, event: CustomEvent) => void) | null = null;\n      const eventHandler = (element: HTMLElement, event: CustomEvent) => {\n        if (!overriddenHandler) {\n          throw new Error(\"overriddenHandler not set\");\n        }\n        overriddenHandler(element, event);\n      };\n      const remoteDocumentHolder = document.createElement(\"div\");\n      document.body.append(remoteDocumentHolder);\n\n      remoteDocumentHolder.addEventListener(\"click\", (event: Event) => {\n        eventHandler(event.target as HTMLElement, event as CustomEvent);\n        return false;\n      });\n\n      const websocket = new NetworkedDOMWebsocket(\n        documentWebsocketUrl,\n        NetworkedDOMWebsocket.createWebSocket,\n        remoteDocumentHolder,\n      );\n      overriddenHandler = (element: HTMLElement, event: CustomEvent) => {\n        websocket.handleEvent(element, event);\n      };\n    }\n  });\n})();\n"],
+  "mappings": "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",
+  "names": ["NetworkedDOMWebsocket", "module", "c", "NetworkedDOMWebsocketStatus", "nodeId", "text"]
+}

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@mml-io/networked-dom-web-client",
+  "version": "0.0.42",
+  "files": [
+    "/build",
+    "/src"
+  ],
+  "main": "build/index.js",
+  "scripts": {
+    "type-check": "tsc --noEmit",
+    "build": "node ./build.js --build",
+    "iterate": "cross-env PORT=28892 node ./build.js --serve",
+    "npm-publish": "npm run build && publish-if-not-exists --access=public",
+    "lint": "eslint \"./src/**/*.{js,jsx,ts,tsx}\" --max-warnings 0",
+    "lint-fix": "eslint \"./src/**/*.{js,jsx,ts,tsx}\" --fix"
+  },
+  "dependencies": {
+    "@mml-io/networked-dom-web": "^0.0.42"
+  }
+}

package/src/index.ts

@@ -0,0 +1,41 @@
+import { NetworkedDOMWebsocket } from "@mml-io/networked-dom-web";
+
+const thisScript = document.currentScript as HTMLScriptElement;
+const scriptUrl = new URL(thisScript.src);
+
+(function () {
+  const websocketUrl = scriptUrl.searchParams.get("websocketUrl");
+  if (!websocketUrl) {
+    console.error("websocketUrl not set");
+    return;
+  }
+  window.addEventListener("load", () => {
+    const documentWebsocketUrls = websocketUrl.split(",");
+
+    for (const documentWebsocketUrl of documentWebsocketUrls) {
+      let overriddenHandler: ((element: HTMLElement, event: CustomEvent) => void) | null = null;
+      const eventHandler = (element: HTMLElement, event: CustomEvent) => {
+        if (!overriddenHandler) {
+          throw new Error("overriddenHandler not set");
+        }
+        overriddenHandler(element, event);
+      };
+      const remoteDocumentHolder = document.createElement("div");
+      document.body.append(remoteDocumentHolder);
+
+      remoteDocumentHolder.addEventListener("click", (event: Event) => {
+        eventHandler(event.target as HTMLElement, event as CustomEvent);
+        return false;
+      });
+
+      const websocket = new NetworkedDOMWebsocket(
+        documentWebsocketUrl,
+        NetworkedDOMWebsocket.createWebSocket,
+        remoteDocumentHolder,
+      );
+      overriddenHandler = (element: HTMLElement, event: CustomEvent) => {
+        websocket.handleEvent(element, event);
+      };
+    }
+  });
+})();