@mml-io/networked-dom-web 0.0.42

package/build/index.d.ts

@@ -0,0 +1 @@
+export * from "../src/index";

package/build/index.js

@@ -0,0 +1,447 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  DOMSanitizer: () => DOMSanitizer,
+  NetworkedDOMWebsocket: () => NetworkedDOMWebsocket,
+  NetworkedDOMWebsocketStatus: () => NetworkedDOMWebsocketStatus
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/DOMSanitizer.ts
+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");
+  }
+};
+
+// src/NetworkedDOMWebsocket.ts
+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 NetworkedDOMWebsocket = 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;
+    }
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DOMSanitizer,
+  NetworkedDOMWebsocket,
+  NetworkedDOMWebsocketStatus
+});
+//# sourceMappingURL=index.js.map

package/build/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/index.ts", "../src/DOMSanitizer.ts", "../src/NetworkedDOMWebsocket.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"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAO,IAAM,eAAN,MAAmB;AAAA,EACxB,OAAO,SAAS,MAAmB;AACjC,QAAI,KAAK,mBAAmB;AAC1B,iBAAW,QAAQ,KAAK,kBAAkB,GAAG;AAC3C,YAAI,CAAC,aAAa,qBAAqB,IAAI,GAAG;AAC5C,eAAK,gBAAgB,IAAI;AAAA,QAC3B;AAAA,MACF;AAAA,IACF;AACA,QAAI,KAAK,aAAa,UAAU;AAE9B,WAAK,YAAY;AAAA,IACnB,OAAO;AACL,UAAI,KAAK,mBAAmB;AAC1B,mBAAW,QAAQ,KAAK,kBAAkB,GAAG;AAC3C,cAAI,CAAC,aAAa,sBAAsB,IAAI,GAAG;AAC7C,iBAAK,gBAAgB,IAAI;AAAA,UAC3B;AAAA,QACF;AAAA,MACF;AACA,eAAS,IAAI,GAAG,IAAI,KAAK,WAAW,QAAQ,KAAK;AAC/C,qBAAa,SAAS,KAAK,WAAW,CAAC,CAAgB;AAAA,MACzD;AAAA,IACF;AAAA,EACF;AAAA,EAEA,OAAO,aAAa,GAAoB;AACtC,WAAO,KAAK,OAAO,KAAK;AAAA,EAC1B;AAAA,EAEA,OAAO,aAAa,GAAW;AAC7B,WAAO,KAAK,OAAO,KAAK;AAAA,EAC1B;AAAA,EAEA,OAAO,qBAAqB,YAA6B;AACvD,UAAM,IAAI,WAAW,CAAC;AACtB,QAAI,EAAE,aAAa,aAAa,CAAC,KAAK,MAAM,OAAO,MAAM,MAAM;AAC7D,aAAO;AAAA,IACT;AAEA,aAAS,IAAI,GAAG,IAAI,WAAW,QAAQ,KAAK;AAC1C,YAAMA,KAAI,WAAW,CAAC;AACtB,UACE,EACE,aAAa,aAAaA,EAAC,KAC3B,aAAa,aAAaA,EAAC,KAC3BA,OAAM,OACNA,OAAM,OACNA,OAAM,OACNA,OAAM,MAER;AACA,eAAO;AAAA,MACT;AAAA,IACF;AAEA,WAAO;AAAA,EACT;AAAA,EAEA,OAAO,sBAAsB,WAAmB;AAC9C,QAAI,CAAC,aAAa,qBAAqB,SAAS,GAAG;AACjD,cAAQ,KAAK,0BAA0B,SAAS;AAChD,aAAO;AAAA,IACT;AAGA,WAAO,CAAC,UAAU,WAAW,IAAI;AAAA,EACnC;AACF;;;ACxDA,IAAM,oBAAoB;AAE1B,IAAM,kCAAkC;AACxC,IAAM,iCAAiC;AACvC,IAAM,oCAAoC;AAInC,IAAK,8BAAL,kBAAKC,iCAAL;AACL,EAAAA,0DAAA;AACA,EAAAA,0DAAA;AACA,EAAAA,0DAAA;AACA,EAAAA,0DAAA;AAJU,SAAAA;AAAA,GAAA;AAOL,IAAM,wBAAN,MAA4B;AAAA,EAmBjC,YACE,KACA,kBACA,eACA,cACA,sBACA;AAxBF,SAAQ,cAAc,oBAAI,IAAkB;AAC5C,SAAQ,cAAc,oBAAI,IAAkB;AAC5C,SAAQ,YAA8B;AACtC,SAAQ,cAAkC;AAO1C,SAAQ,UAAU;AAClB,SAAQ,cAAc;AACtB,SAAQ,SAA6C;AAanD,SAAK,MAAM;AACX,SAAK,mBAAmB;AACxB,SAAK,gBAAgB;AACrB,SAAK,eACH,iBACC,MAAM;AAAA,IAEP;AACF,SAAK,uBACH,yBACC,MAAM;AAAA,IAEP;AACF,SAAK,UAAU,kBAAsC;AACrD,SAAK,gCAAgC;AAAA,EACvC;AAAA,EA1BA,OAAc,gBAAgB,KAAwB;AACpD,WAAO,IAAI,UAAU,KAAK,CAAC,iBAAiB,CAAC;AAAA,EAC/C;AAAA,EA0BQ,UAAU,QAAqC;AACrD,QAAI,KAAK,WAAW,QAAQ;AAC1B,WAAK,SAAS;AACd,WAAK,qBAAqB,MAAM;AAAA,IAClC;AAAA,EACF;AAAA,EAEQ,2BAA2B,SAAqC;AACtE,WAAO,IAAI,QAAQ,CAAC,SAAS,WAAW;AACtC,YAAM,YAAY,WAAW,MAAM;AACjC,eAAO,IAAI,MAAM,gCAAgC,CAAC;AAAA,MACpD,GAAG,OAAO;AACV,YAAM,YAAY,KAAK,iBAAiB,KAAK,GAAG;AAChD,gBAAU,iBAAiB,QAAQ,MAAM;AACvC,qBAAa,SAAS;AAEtB,aAAK,YAAY;AAEjB,kBAAU,iBAAiB,WAAW,CAAC,UAAU;AAC/C,cAAI,cAAc,KAAK,WAAW;AAChC,oBAAQ,IAAI,kEAAkE;AAC9E,sBAAU,MAAM;AAChB;AAAA,UACF;AACA,eAAK,+BAA+B,KAAK;AAAA,QAC3C,CAAC;AAED,cAAM,mBAAmB,YAAY;AACnC,gBAAM,cAAc,KAAK,gBAAgB;AACzC,eAAK,cAAc;AACnB,cAAI,KAAK,SAAS;AAEhB,iBAAK,UAAU,oBAAwC;AACvD;AAAA,UACF;AACA,cAAI,CAAC,aAAa;AAEhB,kBAAM,KAAK,gBAAgB;AAAA,UAC7B;AAEA,eAAK,UAAU,oBAAwC;AACvD,eAAK,gCAAgC;AAAA,QACvC;AAEA,kBAAU,iBAAiB,SAAS,CAAC,MAAM;AACzC,cAAI,cAAc,KAAK,WAAW;AAChC,oBAAQ,KAAK,gEAAgE;AAC7E;AAAA,UACF;AACA,kBAAQ,IAAI,+BAA+B,CAAC;AAC5C,2BAAiB;AAAA,QACnB,CAAC;AACD,kBAAU,iBAAiB,SAAS,CAAC,MAAM;AACzC,cAAI,cAAc,KAAK,WAAW;AAChC,oBAAQ,IAAI,gEAAgE;AAC5E;AAAA,UACF;AACA,kBAAQ,MAAM,+BAA+B,CAAC;AAC9C,2BAAiB;AAAA,QACnB,CAAC;AAED,gBAAQ,SAAS;AAAA,MACnB,CAAC;AACD,gBAAU,iBAAiB,SAAS,CAAC,MAAM;AACzC,qBAAa,SAAS;AACtB,eAAO,CAAC;AAAA,MACV,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AAAA,EAEA,MAAc,kBAAiC;AAC7C,YAAQ,KAAK,4BAA4B,KAAK,4BAA4B,KAAK,eAAe;AAC9F,UAAM,IAAI,QAAQ,CAAC,YAAY,WAAW,SAAS,KAAK,WAAW,CAAC;AACpE,SAAK,cAAc,KAAK;AAAA;AAAA,MAEtB,KAAK,eAAe,MAAM,KAAK,OAAO,IAAI;AAAA,MAC1C;AAAA,IACF;AAAA,EACF;AAAA,EAEA,MAAc,kCAAkC;AAC9C,QAAI,KAAK,SAAS;AAChB;AAAA,IACF;AAEA,WAAO,MAAM;AACX,UAAI,KAAK,SAAS;AAChB;AAAA,MACF;AACA,UAAI;AACF,cAAM,KAAK,2BAA2B,iCAAiC;AACvE;AAAA,MACF,SAAS,GAAP;AAEA,aAAK,UAAU,oBAAwC;AACvD,cAAM,KAAK,gBAAgB;AAAA,MAC7B;AAAA,IACF;AAAA,EACF;AAAA,EAEQ,+BAA+B,OAAqB;AAC1D,UAAM,WAAW,KAAK,MAAM,MAAM,IAAI;AACtC,eAAW,WAAW,UAAU;AAC9B,UAAI,QAAQ,SAAS,SAAS;AAC5B,gBAAQ,MAAM,qBAAqB,OAAO;AAAA,MAC5C,WAAW,QAAQ,SAAS,WAAW;AACrC,gBAAQ,KAAK,uBAAuB,OAAO;AAAA,MAC7C,OAAO;AACL,YAAI,QAAQ,cAAc;AACxB,cAAI,KAAK,cAAc;AACrB,iBAAK,aAAa,QAAQ,YAAY;AAAA,UACxC;AAAA,QACF;AACA,YAAI,QAAQ,SAAS,YAAY;AAE/B,eAAK,cAAc;AACnB,eAAK,UAAU,iBAAqC;AAEpD,cAAI,KAAK,aAAa;AACpB,iBAAK,YAAY,OAAO;AACxB,iBAAK,cAAc;AACnB,iBAAK,YAAY,MAAM;AACvB,iBAAK,YAAY,MAAM;AAAA,UACzB;AAIA,gBAAM,UAAU,KAAK,iBAAiB,QAAQ,QAAQ;AACtD,cAAI,CAAC,SAAS;AACZ,kBAAM,IAAI,MAAM,8BAA8B;AAAA,UAChD;AACA,cAAI,EAAE,mBAAmB,cAAc;AACrC,kBAAM,IAAI,MAAM,wCAAwC;AAAA,UAC1D;AACA,eAAK,cAAc;AAEnB,eAAK,cAAc,OAAO,OAAO;AAAA,QACnC,WAAW,QAAQ,SAAS,mBAAmB;AAC7C,eAAK,sBAAsB,OAAO;AAAA,QACpC,WAAW,QAAQ,SAAS,mBAAmB;AAC7C,eAAK,sBAAsB,OAAO;AAAA,QACpC,WAAW,QAAQ,SAAS,eAAe;AACzC,eAAK,kBAAkB,OAAO;AAAA,QAChC,WAAW,QAAQ,SAAS,QAAQ;AAClC,eAAK,KAAK;AAAA,YACR,MAAM;AAAA,YACN,MAAM,QAAQ;AAAA,UAChB,CAAC;AAAA,QACH,OAAO;AACL,kBAAQ,KAAK,wBAAwB,OAAO;AAAA,QAC9C;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EAEO,OAAO;AACZ,SAAK,UAAU;AACf,QAAI,KAAK,cAAc,MAAM;AAC3B,WAAK,UAAU,MAAM;AACrB,WAAK,YAAY;AAAA,IACnB;AAAA,EACF;AAAA,EAEO,YAAY,SAAsB,OAA8C;AACrF,UAAM,SAAS,KAAK,YAAY,IAAI,OAAO;AAC3C,QAAI,WAAW,UAAa,WAAW,MAAM;AAC3C,YAAM,IAAI,MAAM,mBAAmB;AAAA,IACrC;AAEA,YAAQ;AAAA,MACN,gCAAgC,MAAM,kBAAkB,gBAAgB,QAAQ;AAAA,IAClF;AAEA,UAAM,uBAAqD;AAAA,MACzD,GAAG,MAAM;AAAA,IACX;AACA,WAAO,qBAAqB;AAE5B,UAAM,cAA2B;AAAA,MAC/B,MAAM;AAAA,MACN;AAAA,MACA,MAAM,MAAM;AAAA,MACZ,SAAS,MAAM;AAAA,MACf,QAAQ;AAAA,IACV;AAEA,SAAK,KAAK,WAAW;AAAA,EACvB;AAAA,EAEQ,KAAK,mBAAkC;AAC7C,QAAI,CAAC,KAAK,WAAW;AACnB,YAAM,IAAI,MAAM,sBAAsB;AAAA,IACxC;AACA,SAAK,UAAU,KAAK,KAAK,UAAU,iBAAiB,CAAC;AAAA,EACvD;AAAA,EAEQ,kBAAkB,SAA0B;AAClD,UAAM,EAAE,QAAQ,KAAK,IAAI;AAEzB,QAAI,WAAW,UAAa,WAAW,MAAM;AAC3C,cAAQ,KAAK,kCAAkC;AAC/C;AAAA,IACF;AACA,UAAM,OAAO,KAAK,YAAY,IAAI,MAAM;AACxC,QAAI,CAAC,MAAM;AACT,YAAM,IAAI,MAAM,uCAAuC;AAAA,IACzD;AACA,QAAI,EAAE,gBAAgB,OAAO;AAC3B,YAAM,IAAI,MAAM,iDAAiD;AAAA,IACnE;AACA,SAAK,cAAc;AAAA,EACrB;AAAA,EAEQ,sBAAsB,SAA8B;AAC1D,UAAM,EAAE,QAAQ,YAAY,cAAc,eAAe,IAAI;AAC7D,QAAI,WAAW,UAAa,WAAW,MAAM;AAC3C,cAAQ,KAAK,sCAAsC;AACnD;AAAA,IACF;AACA,UAAM,SAAS,KAAK,YAAY,IAAI,MAAM;AAC1C,QAAI,CAAC,QAAQ;AACX,YAAM,IAAI,MAAM,6CAA6C;AAAA,IAC/D;AACA,QAAI,CAAC,OAAO,aAAa;AACvB,cAAQ,MAAM,2BAA2B,MAAM;AAAA,IACjD;AACA,QAAI,EAAE,kBAAkB,cAAc;AACpC,YAAM,IAAI,MAAM,uDAAuD;AAAA,IACzE;AACA,QAAI;AACJ,QAAI,gBAAgB;AAClB,wBAAkB,KAAK,YAAY,IAAI,cAAc;AACrD,UAAI,CAAC,iBAAiB;AACpB,cAAM,IAAI,MAAM,uDAAuD;AAAA,MACzE;AAAA,IACF;AAEA,eAAW,aAAa,YAAY;AAClC,YAAM,eAAe,KAAK,iBAAiB,SAAS;AACpD,UAAI,cAAc;AAChB,YAAI,iBAAiB;AACnB,gBAAM,cAAc,gBAAgB;AACpC,cAAI,aAAa;AACf,mBAAO,aAAa,cAAc,WAAW;AAAA,UAC/C,OAAO;AACL,mBAAO,OAAO,YAAY;AAAA,UAC5B;AAAA,QACF,OAAO;AACL,iBAAO,OAAO,YAAY;AAAA,QAC5B;AAAA,MACF;AAAA,IACF;AACA,eAAW,eAAe,cAAc;AACtC,YAAM,eAAe,KAAK,YAAY,IAAI,WAAW;AACrD,UAAI,CAAC,cAAc;AACjB,cAAM,IAAI,MAAM,4BAA4B,aAAa;AAAA,MAC3D;AACA,WAAK,YAAY,OAAO,YAAY;AACpC,WAAK,YAAY,OAAO,WAAW;AACnC,aAAO,YAAY,YAAY;AAC/B,UAAI,wBAAwB,aAAa;AAEvC,aAAK,sBAAsB,YAAY;AAAA,MACzC;AAAA,IACF;AAAA,EACF;AAAA,EAEQ,sBAAsB,QAAqB;AACjD,aAAS,IAAI,GAAG,IAAI,OAAO,SAAS,QAAQ,KAAK;AAC/C,YAAM,QAAQ,OAAO,SAAS,CAAC;AAC/B,YAAM,UAAU,KAAK,YAAY,IAAI,KAAoB;AACzD,UAAI,CAAC,SAAS;AACZ,gBAAQ,MAAM,4CAA4C,KAAK;AAAA,MACjE,OAAO;AACL,aAAK,YAAY,OAAO,KAAK;AAC7B,aAAK,YAAY,OAAO,OAAO;AAAA,MACjC;AACA,WAAK,sBAAsB,KAAoB;AAAA,IACjD;AAAA,EACF;AAAA,EAEQ,sBAAsB,SAA+B;AAC3D,UAAM,EAAE,QAAQ,WAAW,SAAS,IAAI;AACxC,QAAI,WAAW,UAAa,WAAW,MAAM;AAC3C,cAAQ,KAAK,sCAAsC;AACnD;AAAA,IACF;AACA,UAAM,UAAU,KAAK,YAAY,IAAI,MAAM;AAC3C,QAAI,SAAS;AACX,UAAI,mBAAmB,aAAa;AAClC,YAAI,aAAa,MAAM;AACrB,kBAAQ,gBAAgB,SAAS;AAAA,QACnC,OAAO;AACL,cAAI,aAAa,sBAAsB,SAAS,GAAG;AACjD,oBAAQ,aAAa,WAAW,QAAQ;AAAA,UAC1C;AAAA,QACF;AAAA,MACF,OAAO;AACL,gBAAQ,MAAM,+DAA+D,OAAO;AAAA,MACtF;AAAA,IACF,OAAO;AACL,cAAQ,MAAM,8CAA8C;AAAA,IAC9D;AAAA,EACF;AAAA,EAEQ,iBAAiB,SAAuC;AAC9D,QAAI,QAAQ,SAAS,QAAQ;AAC3B,YAAM,EAAE,QAAAC,SAAQ,MAAAC,MAAK,IAAI;AACzB,YAAM,WAAW,SAAS,eAAe,EAAE;AAC3C,eAAS,cAAcA;AACvB,WAAK,YAAY,IAAID,SAAQ,QAAQ;AACrC,WAAK,YAAY,IAAI,UAAUA,OAAM;AACrC,aAAO;AAAA,IACT;AACA,UAAM,EAAE,KAAK,QAAQ,YAAY,UAAU,KAAK,IAAI;AACpD,QAAI,WAAW,UAAa,WAAW,MAAM;AAC3C,cAAQ,KAAK,yCAAyC,OAAO;AAC7D,aAAO;AAAA,IACT;AACA,QAAI,KAAK,YAAY,IAAI,MAAM,GAAG;AAChC,cAAQ;AAAA,QACN;AAAA,QACA;AAAA,QACA,KAAK,YAAY,IAAI,MAAM;AAAA,MAC7B;AAAA,IACF;AACA,QAAI,QAAQ,SAAS;AACnB,YAAM,WAAW,SAAS,eAAe,EAAE;AAC3C,eAAS,cAAc,QAAQ;AAC/B,WAAK,YAAY,IAAI,QAAQ,QAAQ;AACrC,WAAK,YAAY,IAAI,UAAU,MAAM;AACrC,aAAO;AAAA,IACT;AAEA,UAAM,UAAU,SAAS,cAAc,GAAG;AAC1C,SAAK,YAAY,IAAI,QAAQ,OAAO;AACpC,SAAK,YAAY,IAAI,SAAS,MAAM;AACpC,eAAW,OAAO,YAAY;AAC5B,UAAI,aAAa,sBAAsB,GAAG,GAAG;AAC3C,cAAM,QAAQ,WAAW,GAAG;AAC5B,gBAAQ,aAAa,KAAK,KAAK;AAAA,MACjC;AAAA,IACF;AACA,QAAI,UAAU;AACZ,iBAAW,SAAS,UAAU;AAC5B,cAAM,eAAe,KAAK,iBAAiB,KAAK;AAChD,YAAI,cAAc;AAChB,kBAAQ,OAAO,YAAY;AAAA,QAC7B;AAAA,MACF;AAAA,IACF;AACA,WAAO;AAAA,EACT;AAAA,EAEQ,gBAAgB;AACtB,SAAK,YAAY,MAAM;AACvB,SAAK,YAAY,MAAM;AACvB,QAAI,KAAK,aAAa;AACpB,WAAK,YAAY,OAAO;AACxB,WAAK,cAAc;AAAA,IACrB;AAAA,EACF;AACF;",
+  "names": ["c", "NetworkedDOMWebsocketStatus", "nodeId", "text"]
+}

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@mml-io/networked-dom-web",
+  "version": "0.0.42",
+  "main": "./build/index.js",
+  "types": "./build/index.d.ts",
+  "files": [
+    "/build",
+    "/src"
+  ],
+  "scripts": {
+    "type-check": "tsc --noEmit",
+    "build": "node ./build.js --build",
+    "iterate": "node ./build.js --watch",
+    "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",
+    "test": "jest",
+    "test-iterate": "jest --watch"
+  },
+  "dependencies": {
+    "@mml-io/networked-dom-protocol": "^0.0.42"
+  },
+  "devDependencies": {
+    "jest-canvas-mock": "2.5.0",
+    "jest-environment-jsdom": "29.5.0",
+    "jest-expect-message": "1.1.3"
+  }
+}

package/src/DOMSanitizer.ts

@@ -0,0 +1,69 @@
+export class DOMSanitizer {
+  static sanitise(node: HTMLElement) {
+    if (node.getAttributeNames) {
+      for (const attr of node.getAttributeNames()) {
+        if (!DOMSanitizer.IsValidAttributeName(attr)) {
+          node.removeAttribute(attr);
+        }
+      }
+    }
+    if (node.nodeName === "SCRIPT") {
+      // set text to empty string
+      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] as HTMLElement);
+      }
+    }
+  }
+
+  static IsASCIIDigit(c: string): boolean {
+    return c >= "0" && c <= "9";
+  }
+
+  static IsASCIIAlpha(c: string) {
+    return c >= "a" && c <= "z";
+  }
+
+  static IsValidAttributeName(characters: string): boolean {
+    const c = characters[0];
+    if (!(DOMSanitizer.IsASCIIAlpha(c) || c === ":" || c === "_")) {
+      return false;
+    }
+
+    for (let i = 1; i < characters.length; i++) {
+      const c = characters[i];
+      if (
+        !(
+          DOMSanitizer.IsASCIIDigit(c) ||
+          DOMSanitizer.IsASCIIAlpha(c) ||
+          c === ":" ||
+          c === "_" ||
+          c === "-" ||
+          c === "."
+        )
+      ) {
+        return false;
+      }
+    }
+
+    return true;
+  }
+
+  static shouldAcceptAttribute(attribute: string) {
+    if (!DOMSanitizer.IsValidAttributeName(attribute)) {
+      console.warn("Invalid attribute name", attribute);
+      return false;
+    }
+
+    // TODO - this might be overly restrictive - apologies to someone that finds this because you have a non-event attribute filtered by this
+    return !attribute.startsWith("on");
+  }
+}

package/src/NetworkedDOMWebsocket.ts

@@ -0,0 +1,433 @@
+import {
+  AttributeChangedDiff,
+  ChildrenChangedDiff,
+  ClientMessage,
+  NodeDescription,
+  RemoteEvent,
+  ServerMessage,
+  TextChangedDiff,
+} from "@mml-io/networked-dom-protocol";
+
+import { DOMSanitizer } from "./DOMSanitizer";
+
+const websocketProtocol = "networked-dom-v0.1";
+
+const startingBackoffTimeMilliseconds = 100;
+const maximumBackoffTimeMilliseconds = 10000;
+const maximumWebsocketConnectionTimeout = 5000;
+
+export type NetworkedDOMWebsocketFactory = (url: string) => WebSocket;
+
+export enum NetworkedDOMWebsocketStatus {
+  Connecting,
+  Connected,
+  Reconnecting,
+  Disconnected,
+}
+
+export class NetworkedDOMWebsocket {
+  private idToElement = new Map<number, Node>();
+  private elementToId = new Map<Node, number>();
+  private websocket: WebSocket | null = null;
+  private currentRoot: HTMLElement | null = null;
+
+  private url: string;
+  private websocketFactory: NetworkedDOMWebsocketFactory;
+  private parentElement: HTMLElement;
+  private timeCallback: (time: number) => void;
+  private statusUpdateCallback: (status: NetworkedDOMWebsocketStatus) => void;
+  private stopped = false;
+  private backoffTime = startingBackoffTimeMilliseconds;
+  private status: NetworkedDOMWebsocketStatus | null = null;
+
+  public static createWebSocket(url: string): WebSocket {
+    return new WebSocket(url, [websocketProtocol]);
+  }
+
+  constructor(
+    url: string,
+    websocketFactory: NetworkedDOMWebsocketFactory,
+    parentElement: HTMLElement,
+    timeCallback?: (time: number) => void,
+    statusUpdateCallback?: (status: NetworkedDOMWebsocketStatus) => void,
+  ) {
+    this.url = url;
+    this.websocketFactory = websocketFactory;
+    this.parentElement = parentElement;
+    this.timeCallback =
+      timeCallback ||
+      (() => {
+        // no-op
+      });
+    this.statusUpdateCallback =
+      statusUpdateCallback ||
+      (() => {
+        // no-op
+      });
+    this.setStatus(NetworkedDOMWebsocketStatus.Connecting);
+    this.startWebSocketConnectionAttempt();
+  }
+
+  private setStatus(status: NetworkedDOMWebsocketStatus) {
+    if (this.status !== status) {
+      this.status = status;
+      this.statusUpdateCallback(status);
+    }
+  }
+
+  private createWebsocketWithTimeout(timeout: number): Promise<WebSocket> {
+    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 closing is expected. The client closed the websocket.
+            this.setStatus(NetworkedDOMWebsocketStatus.Disconnected);
+            return;
+          }
+          if (!hadContents) {
+            // 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.
+            await this.waitBackoffTime();
+          }
+          // The websocket closed unexpectedly. Try to reconnect.
+          this.setStatus(NetworkedDOMWebsocketStatus.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);
+      });
+    });
+  }
+
+  private async waitBackoffTime(): Promise<void> {
+    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,
+    );
+  }
+
+  private async startWebSocketConnectionAttempt() {
+    if (this.stopped) {
+      return;
+    }
+    // eslint-disable-next-line no-constant-condition
+    while (true) {
+      if (this.stopped) {
+        return;
+      }
+      try {
+        await this.createWebsocketWithTimeout(maximumWebsocketConnectionTimeout);
+        break;
+      } catch (e) {
+        // Connection failed, retry with backoff
+        this.setStatus(NetworkedDOMWebsocketStatus.Reconnecting);
+        await this.waitBackoffTime();
+      }
+    }
+  }
+
+  private handleIncomingWebsocketMessage(event: MessageEvent) {
+    const messages = JSON.parse(event.data) as Array<ServerMessage>;
+    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 websocket is successfully connected. Reset the backoff time.
+          this.backoffTime = startingBackoffTimeMilliseconds;
+          this.setStatus(NetworkedDOMWebsocketStatus.Connected);
+
+          if (this.currentRoot) {
+            this.currentRoot.remove();
+            this.currentRoot = null;
+            this.elementToId.clear();
+            this.idToElement.clear();
+          }
+
+          // create a tree of DOM elements
+          // NOTE: the MLElement contructors are not executed during this stage
+          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;
+          // appending to the tree causes MElements to be constructed
+          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);
+        }
+      }
+    }
+  }
+
+  public stop() {
+    this.stopped = true;
+    if (this.websocket !== null) {
+      this.websocket.close();
+      this.websocket = null;
+    }
+  }
+
+  public handleEvent(element: HTMLElement, event: CustomEvent<{ element: HTMLElement }>) {
+    const nodeId = this.elementToId.get(element);
+    if (nodeId === undefined || nodeId === null) {
+      throw new Error("Element not found");
+    }
+
+    console.log(
+      `Sending event to websocket: "${event.type}" on node: ${nodeId} type: ${element.tagName}`,
+    );
+
+    const detailWithoutElement: Partial<typeof event.detail> = {
+      ...event.detail,
+    };
+    delete detailWithoutElement.element;
+
+    const remoteEvent: RemoteEvent = {
+      type: "event",
+      nodeId,
+      name: event.type,
+      bubbles: event.bubbles,
+      params: detailWithoutElement,
+    };
+
+    this.send(remoteEvent);
+  }
+
+  private send(fromClientMessage: ClientMessage) {
+    if (!this.websocket) {
+      throw new Error("No websocket created");
+    }
+    this.websocket.send(JSON.stringify(fromClientMessage));
+  }
+
+  private handleTextChanged(message: TextChangedDiff) {
+    const { nodeId, text } = message;
+
+    if (nodeId === undefined || 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;
+  }
+
+  private handleChildrenChanged(message: ChildrenChangedDiff) {
+    const { nodeId, addedNodes, removedNodes, previousNodeId } = message;
+    if (nodeId === undefined || 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) {
+        // If child is capable of supporting children then remove any that exist
+        this.removeChildElementIds(childElement);
+      }
+    }
+  }
+
+  private removeChildElementIds(parent: HTMLElement) {
+    for (let i = 0; i < parent.children.length; i++) {
+      const child = parent.children[i];
+      const childId = this.elementToId.get(child as HTMLElement);
+      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 as HTMLElement);
+    }
+  }
+
+  private handleAttributeChange(message: AttributeChangedDiff) {
+    const { nodeId, attribute, newValue } = message;
+    if (nodeId === undefined || 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");
+    }
+  }
+
+  private handleNewElement(message: NodeDescription): Node | null {
+    if (message.type === "text") {
+      const { nodeId, text } = message;
+      const textNode = document.createTextNode("");
+      textNode.textContent = text;
+      this.idToElement.set(nodeId, textNode);
+      this.elementToId.set(textNode, nodeId);
+      return textNode;
+    }
+    const { tag, nodeId, attributes, children, text } = message;
+    if (nodeId === undefined || 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;
+  }
+
+  private clearContents() {
+    this.idToElement.clear();
+    this.elementToId.clear();
+    if (this.currentRoot) {
+      this.currentRoot.remove();
+      this.currentRoot = null;
+    }
+  }
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from "./NetworkedDOMWebsocket";
+export * from "./DOMSanitizer";