@mml-io/networked-dom-document 0.0.0-experimental-d240bbd-20230807

package/build/index.js

@@ -0,0 +1,1145 @@
+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 __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 __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
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  EditableNetworkedDOM: () => EditableNetworkedDOM,
+  NetworkedDOM: () => NetworkedDOM,
+  defaultWebsocketSubProtocol: () => defaultWebsocketSubProtocol,
+  networkedDOMProtocolSubProtocol_v0_1: () => networkedDOMProtocolSubProtocol_v0_1
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/NetworkedDOM.ts
+var import_rfc6902 = require("rfc6902");
+
+// src/diffing.ts
+var rfc6902 = __toESM(require("rfc6902"));
+var visibleToAttrName = "visible-to";
+var hiddenFromAttrName = "hidden-from";
+function diffFromApplicationOfStaticVirtualDOMMutationRecordToConnection(mutation, parentNode, connectionId, visibleNodesForConnection) {
+  const virtualDOMElement = mutation.target;
+  switch (mutation.type) {
+    case "snapshot": {
+      const nodeDescription = describeNodeWithChildrenForConnectionId(
+        virtualDOMElement,
+        connectionId,
+        visibleNodesForConnection
+      );
+      if (!nodeDescription) {
+        return null;
+      }
+      const diff = {
+        type: "snapshot",
+        snapshot: nodeDescription,
+        documentTime: 0
+      };
+      return diff;
+    }
+    case "attributes": {
+      const visible = visibleNodesForConnection.has(virtualDOMElement.nodeId);
+      if (!parentNode) {
+        throw new Error("Node has no parent");
+      }
+      const parentNodeId = parentNode.nodeId;
+      const shouldBeVisible = shouldShowNodeToConnectionId(virtualDOMElement, connectionId) && visibleNodesForConnection.has(parentNodeId);
+      const attributeName = mutation.attributeName;
+      if (visible && shouldBeVisible) {
+        let newValue = null;
+        if (virtualDOMElement.attributes[attributeName] !== void 0) {
+          newValue = virtualDOMElement.attributes[attributeName];
+        }
+        const diff = {
+          type: "attributeChange",
+          nodeId: virtualDOMElement.nodeId,
+          attribute: attributeName,
+          newValue
+        };
+        return diff;
+      } else if (!visible && shouldBeVisible) {
+        visibleNodesForConnection.add(virtualDOMElement.nodeId);
+        const index = parentNode.childNodes.indexOf(virtualDOMElement);
+        if (index === -1) {
+          throw new Error("Node not found in parent's children");
+        }
+        let previousNodeId = null;
+        if (index > 0) {
+          previousNodeId = getNodeIdOfPreviousVisibleSibling(
+            parentNode,
+            index - 1,
+            visibleNodesForConnection
+          );
+        }
+        const nodeDescription = describeNodeWithChildrenForConnectionId(
+          virtualDOMElement,
+          connectionId,
+          visibleNodesForConnection
+        );
+        if (!nodeDescription) {
+          throw new Error("Node description not found");
+        }
+        const diff = {
+          type: "childrenChanged",
+          nodeId: parentNodeId,
+          previousNodeId,
+          addedNodes: [nodeDescription],
+          removedNodes: []
+        };
+        return diff;
+      } else if (visible && !shouldBeVisible) {
+        removeNodeAndChildrenFromVisibleNodes(virtualDOMElement, visibleNodesForConnection);
+        const diff = {
+          type: "childrenChanged",
+          nodeId: parentNodeId,
+          previousNodeId: null,
+          addedNodes: [],
+          removedNodes: [virtualDOMElement.nodeId]
+        };
+        return diff;
+      } else if (!visible && !shouldBeVisible) {
+        return null;
+      }
+      break;
+    }
+    case "characterData": {
+      const diff = {
+        type: "textChanged",
+        nodeId: virtualDOMElement.nodeId,
+        text: virtualDOMElement.textContent || ""
+      };
+      return diff;
+    }
+    case "childList": {
+      let previousSibling = mutation.previousSibling;
+      let previousNodeId = null;
+      if (previousSibling) {
+        let previousIndex = virtualDOMElement.childNodes.indexOf(previousSibling);
+        while (previousIndex !== -1) {
+          previousSibling = virtualDOMElement.childNodes[previousIndex];
+          if (visibleNodesForConnection.has(previousSibling.nodeId)) {
+            previousNodeId = previousSibling.nodeId;
+            break;
+          }
+          previousIndex--;
+        }
+      }
+      const diff = {
+        type: "childrenChanged",
+        nodeId: virtualDOMElement.nodeId,
+        previousNodeId,
+        addedNodes: [],
+        removedNodes: []
+      };
+      mutation.addedNodes.forEach((childVirtualDOMElement) => {
+        const describedNode = describeNodeWithChildrenForConnectionId(
+          childVirtualDOMElement,
+          connectionId,
+          visibleNodesForConnection
+        );
+        if (!describedNode) {
+          return;
+        }
+        diff.addedNodes.push(describedNode);
+      });
+      mutation.removedNodes.forEach((childVirtualDOMElement) => {
+        if (visibleNodesForConnection.has(childVirtualDOMElement.nodeId)) {
+          removeNodeAndChildrenFromVisibleNodes(childVirtualDOMElement, visibleNodesForConnection);
+          diff.removedNodes.push(childVirtualDOMElement.nodeId);
+        }
+      });
+      if (diff.addedNodes.length > 0 || diff.removedNodes.length > 0) {
+        return diff;
+      }
+      return null;
+    }
+    default:
+      console.error("Unknown mutation type: " + mutation.type);
+      break;
+  }
+  return null;
+}
+function getNodeIdOfPreviousVisibleSibling(parentVirtualElement, candidateIndex, visibleNodesForConnection) {
+  if (candidateIndex > 0) {
+    let previousSiblingIndex = candidateIndex;
+    while (previousSiblingIndex >= 0) {
+      const previousSibling = parentVirtualElement.childNodes[previousSiblingIndex];
+      if (visibleNodesForConnection.has(previousSibling.nodeId)) {
+        return previousSibling.nodeId;
+      }
+      previousSiblingIndex--;
+    }
+  }
+  return null;
+}
+function shouldShowNodeToConnectionId(virtualDOMElement, connectionId) {
+  const visibleToAttr = virtualDOMElement.attributes[visibleToAttrName];
+  const hiddenFromAttr = virtualDOMElement.attributes[hiddenFromAttrName];
+  const connectionIdString = connectionId.toString();
+  if (visibleToAttr !== void 0) {
+    const visibleToList = visibleToAttr.split(" ");
+    const explicityVisible = visibleToList.includes(connectionIdString);
+    if (!explicityVisible) {
+      return false;
+    }
+  }
+  if (hiddenFromAttr !== void 0) {
+    const hiddenFromList = hiddenFromAttr.split(" ");
+    const explicityHidden = hiddenFromList.includes(connectionIdString);
+    if (explicityHidden) {
+      return false;
+    }
+  }
+  return true;
+}
+function describeNodeWithChildrenForConnectionId(virtualDOMElement, connectionId, visibleNodesForConnection) {
+  if (!shouldShowNodeToConnectionId(virtualDOMElement, connectionId)) {
+    return null;
+  }
+  let emittedTagName = virtualDOMElement.tag;
+  if (emittedTagName === "#document") {
+    emittedTagName = "DIV";
+  }
+  if (emittedTagName === "#text") {
+    const textNode = {
+      type: "text",
+      nodeId: virtualDOMElement.nodeId,
+      text: virtualDOMElement.textContent || ""
+    };
+    visibleNodesForConnection.add(textNode.nodeId);
+    return textNode;
+  } else {
+    const node = {
+      type: "element",
+      nodeId: virtualDOMElement.nodeId,
+      tag: emittedTagName,
+      attributes: virtualDOMElement.attributes,
+      children: [],
+      text: virtualDOMElement.textContent
+    };
+    visibleNodesForConnection.add(node.nodeId);
+    for (const child of virtualDOMElement.childNodes) {
+      const childNodeDescription = describeNodeWithChildrenForConnectionId(
+        child,
+        connectionId,
+        visibleNodesForConnection
+      );
+      if (childNodeDescription) {
+        node.children.push(childNodeDescription);
+      }
+    }
+    return node;
+  }
+}
+function removeNodeAndChildrenFromVisibleNodes(virtualDOMElement, visibleNodesForConnection) {
+  visibleNodesForConnection.delete(virtualDOMElement.nodeId);
+  for (const child of virtualDOMElement.childNodes) {
+    if (!visibleNodesForConnection.has(child.nodeId)) {
+      console.error("Inner child of removed element was not visible", child.nodeId);
+    }
+    removeNodeAndChildrenFromVisibleNodes(child, visibleNodesForConnection);
+  }
+}
+function findParentNodeOfNodeId(virtualDOMElement, targetNodeId) {
+  for (const child of virtualDOMElement.childNodes) {
+    if (child.nodeId === targetNodeId) {
+      return virtualDOMElement;
+    } else {
+      const foundParentId = findParentNodeOfNodeId(child, targetNodeId);
+      if (foundParentId) {
+        return foundParentId;
+      }
+    }
+  }
+  return null;
+}
+function virtualDOMDiffToVirtualDOMMutationRecord(virtualStructure, domDiff) {
+  const pointer = rfc6902.Pointer.fromJSON(domDiff.path);
+  const grandParentTokens = pointer.tokens.slice(0, pointer.tokens.length - 2);
+  const lastToken = pointer.tokens[pointer.tokens.length - 1];
+  const secondLastToken = pointer.tokens[pointer.tokens.length - 2];
+  if (lastToken === "textContent") {
+    const nodePointer = new rfc6902.Pointer(pointer.tokens.slice(0, pointer.tokens.length - 1));
+    const node = nodePointer.get(virtualStructure);
+    return [
+      {
+        type: "characterData",
+        target: node,
+        addedNodes: [],
+        removedNodes: [],
+        attributeName: null,
+        previousSibling: null
+      }
+    ];
+  }
+  if (secondLastToken === "attributes") {
+    const nodePointer = new rfc6902.Pointer(grandParentTokens);
+    const node = nodePointer.get(virtualStructure);
+    return [
+      {
+        type: "attributes",
+        target: node,
+        addedNodes: [],
+        removedNodes: [],
+        attributeName: lastToken,
+        previousSibling: null
+      }
+    ];
+  }
+  if (secondLastToken === "childNodes") {
+    const nodePointer = new rfc6902.Pointer(grandParentTokens);
+    const node = nodePointer.get(virtualStructure);
+    let previousSibling = null;
+    if (lastToken === "-") {
+    } else {
+      const index = parseInt(lastToken, 10);
+      if (index === 0) {
+        previousSibling = null;
+      } else {
+        previousSibling = node.childNodes[index - 1];
+      }
+    }
+    const addedNodes = [];
+    const removedNodes = [];
+    switch (domDiff.op) {
+      case "add": {
+        addedNodes.push(domDiff.value);
+        return [
+          {
+            type: "childList",
+            target: node,
+            addedNodes,
+            removedNodes,
+            previousSibling,
+            attributeName: null
+          }
+        ];
+      }
+      case "remove": {
+        const removedNode = pointer.get(virtualStructure);
+        removedNodes.push(removedNode);
+        return [
+          {
+            type: "childList",
+            target: node,
+            addedNodes,
+            removedNodes,
+            previousSibling,
+            attributeName: null
+          }
+        ];
+      }
+      case "replace": {
+        const removedNode = pointer.get(virtualStructure);
+        removedNodes.push(removedNode);
+        addedNodes.push(domDiff.value);
+        return [
+          {
+            type: "childList",
+            target: node,
+            addedNodes: [],
+            removedNodes,
+            previousSibling,
+            attributeName: null
+          },
+          {
+            type: "childList",
+            target: node,
+            addedNodes,
+            removedNodes: [],
+            previousSibling,
+            attributeName: null
+          }
+        ];
+      }
+    }
+  }
+  if (domDiff.op === "replace" && domDiff.path === "") {
+    const node = domDiff.value;
+    return [
+      {
+        type: "snapshot",
+        target: node,
+        addedNodes: [],
+        removedNodes: [],
+        previousSibling: null,
+        attributeName: null
+      }
+    ];
+  }
+  console.error("Unhandled JSON diff:", JSON.stringify(domDiff, null, 2));
+  throw new Error("Unhandled diff type");
+}
+function calculateStaticVirtualDOMDiff(originalState, latestState) {
+  const jsonPatchDiffs = rfc6902.createPatch(
+    originalState,
+    latestState,
+    (a, b, ptr) => {
+      if (a.tag !== b.tag) {
+        return [{ op: "replace", path: ptr.toString(), value: b }];
+      }
+      return;
+    }
+  );
+  const nodeIdRemappings = [];
+  const virtualDOMDiffs = [];
+  for (const diff of jsonPatchDiffs) {
+    if (diff.op === "replace" && diff.path.endsWith("/nodeId")) {
+      const pointer = rfc6902.Pointer.fromJSON(diff.path);
+      const value = pointer.get(originalState);
+      nodeIdRemappings.push({
+        internalNodeId: diff.value,
+        clientFacingNodeId: value
+      });
+    } else {
+      virtualDOMDiffs.push(diff);
+    }
+  }
+  return remapDuplicatedNodeIdsInOperations(
+    {
+      originalState,
+      nodeIdRemappings,
+      virtualDOMDiffs
+    },
+    latestState
+  );
+}
+function getHighestNodeId(node) {
+  let highest = node.nodeId;
+  for (const child of node.childNodes) {
+    highest = Math.max(highest, getHighestNodeId(child));
+  }
+  return highest;
+}
+function getRemovedNodeIds(before, diff) {
+  const removedIds = /* @__PURE__ */ new Set();
+  function addNode(node) {
+    removedIds.add(node.nodeId);
+    for (const child of node.childNodes) {
+      addNode(child);
+    }
+  }
+  if (diff.op === "replace" || diff.op === "remove") {
+    const removedNode = rfc6902.Pointer.fromJSON(diff.path).get(before);
+    addNode(removedNode);
+  }
+  return removedIds;
+}
+function getNodeIdsFromNodeAndChildren(node) {
+  const nodeIds = /* @__PURE__ */ new Set();
+  function addNode(node2) {
+    nodeIds.add(node2.nodeId);
+    for (const child of node2.childNodes) {
+      addNode(child);
+    }
+  }
+  addNode(node);
+  return nodeIds;
+}
+function remapDuplicatedNodeIdsInOperations(virtualDOMDiffStruct, latestState) {
+  const { originalState, nodeIdRemappings, virtualDOMDiffs } = virtualDOMDiffStruct;
+  const highestNodeIdAcrossStartAndEnd = Math.max(
+    getHighestNodeId(originalState),
+    getHighestNodeId(latestState)
+  );
+  let nextNodeId = highestNodeIdAcrossStartAndEnd + 1;
+  const before = JSON.parse(JSON.stringify(originalState));
+  function checkAndReplaceNodeIdsIfAlreadyInUse(node, addingNodeIds, removedIds) {
+    if (existingNodeIds.has(node.nodeId) && removedIds && !removedIds.has(node.nodeId)) {
+      const newNodeId = nextNodeId++;
+      nodeIdRemappings.push({
+        internalNodeId: node.nodeId,
+        clientFacingNodeId: newNodeId
+      });
+      node.nodeId = newNodeId;
+      addingNodeIds.add(newNodeId);
+    } else {
+      addingNodeIds.add(node.nodeId);
+    }
+    for (const child of node.childNodes) {
+      checkAndReplaceNodeIdsIfAlreadyInUse(child, addingNodeIds, removedIds);
+    }
+  }
+  const existingNodeIds = getNodeIdsFromNodeAndChildren(before);
+  for (const diff of virtualDOMDiffs) {
+    const pointer = rfc6902.Pointer.fromJSON(diff.path);
+    const secondLastToken = pointer.tokens[pointer.tokens.length - 2];
+    if (secondLastToken !== "childNodes") {
+      continue;
+    }
+    const removedIds = getRemovedNodeIds(before, diff);
+    const addingNodeIds = /* @__PURE__ */ new Set();
+    if (diff.op === "replace" || diff.op === "add") {
+      checkAndReplaceNodeIdsIfAlreadyInUse(diff.value, addingNodeIds, removedIds);
+    }
+    removedIds.forEach((removedId) => {
+      existingNodeIds.delete(removedId);
+    });
+    addingNodeIds.forEach((addingNodeId) => {
+      existingNodeIds.add(addingNodeId);
+    });
+    const patchErrors = rfc6902.applyPatch(before, [diff]);
+    if (patchErrors.length !== 1 || patchErrors[0] !== null) {
+      throw new Error("Patch failed");
+    }
+  }
+  return virtualDOMDiffStruct;
+}
+
+// src/NetworkedDOM.ts
+var networkedDOMProtocolSubProtocol_v0_1 = "networked-dom-v0.1";
+var defaultWebsocketSubProtocol = networkedDOMProtocolSubProtocol_v0_1;
+var _NetworkedDOM = class {
+  constructor(observableDOMFactory, htmlPath, htmlContents, oldInstanceDocumentRoot, onLoad, params = {}, ignoreTextNodes = true, logCallback) {
+    // Map from the node ids that the DOM uses internally to the node ids that clients refer to.
+    this.internalNodeIdToClientNodeId = /* @__PURE__ */ new Map();
+    // Map from the node ids that clients refer to to the node ids that the DOM uses internally.
+    this.clientNodeIdToInternalNodeId = /* @__PURE__ */ new Map();
+    this.currentConnectionId = 1;
+    this.connectionIdToWebSocketContext = /* @__PURE__ */ new Map();
+    this.webSocketToConnectionId = /* @__PURE__ */ new Map();
+    this.visibleNodeIdsByConnectionId = /* @__PURE__ */ new Map();
+    this.initialLoad = true;
+    this.disposed = false;
+    this.nodeIdToNode = /* @__PURE__ */ new Map();
+    this.nodeIdToParentNodeId = /* @__PURE__ */ new Map();
+    this.documentEffectiveStartTime = Date.now();
+    this.latestDocumentTime = 0;
+    this.pingCounter = 1;
+    this.maximumNodeId = 0;
+    this.htmlPath = htmlPath;
+    this.ignoreTextNodes = ignoreTextNodes;
+    this.logCallback = logCallback || this.defaultLogCallback;
+    this.observableDOM = observableDOMFactory(
+      {
+        htmlPath,
+        htmlContents,
+        params,
+        ignoreTextNodes,
+        pingIntervalMilliseconds: 5e3
+      },
+      (message, observableDOM) => {
+        this.observableDOM = observableDOM;
+        if (message.documentTime) {
+          this.documentEffectiveStartTime = Date.now() - message.documentTime;
+          this.latestDocumentTime = message.documentTime;
+        }
+        if (message.snapshot) {
+          this.documentRoot = message.snapshot;
+          const clonedSnapshot = JSON.parse(JSON.stringify(message.snapshot));
+          if (!this.initialLoad) {
+            throw new Error("Received snapshot after initial load");
+          }
+          this.initialLoad = false;
+          let domDiff = null;
+          if (oldInstanceDocumentRoot) {
+            domDiff = calculateStaticVirtualDOMDiff(oldInstanceDocumentRoot, clonedSnapshot);
+            for (const remapping of domDiff.nodeIdRemappings) {
+              this.addRemappedNodeId(remapping.clientFacingNodeId, remapping.internalNodeId);
+            }
+          }
+          this.addAndRemapNodeFromInstance(this.documentRoot, -1);
+          onLoad(domDiff, this);
+        } else if (message.mutation) {
+          if (this.initialLoad) {
+            throw new Error("Received mutation before initial load");
+          }
+          const mutation = this.addKnownNodesInMutation(message.mutation);
+          this.processModification(mutation);
+          this.removeKnownNodesInMutation(mutation);
+        } else if (message.logMessage) {
+          if (this.logCallback) {
+            this.logCallback(message.logMessage);
+          }
+        } else {
+          if (message.documentTime) {
+            this.sendPings();
+            return;
+          }
+          console.error("Unknown message type from observableDOM", message);
+        }
+      }
+    );
+  }
+  defaultLogCallback(message) {
+    const getLogFn = (level) => {
+      switch (level) {
+        case "system":
+          return console.error;
+        case "error":
+          return console.error;
+        case "warn":
+          return console.warn;
+        case "log":
+          return console.log;
+        case "info":
+          return console.info;
+        default:
+          return console.log;
+      }
+    };
+    const logFn = getLogFn(message.level);
+    logFn(`${message.level.toUpperCase()} (${this.htmlPath}):`, ...message.content);
+  }
+  addRemappedNodeId(clientFacingNodeId, internalNodeId) {
+    this.internalNodeIdToClientNodeId.set(internalNodeId, clientFacingNodeId);
+    this.clientNodeIdToInternalNodeId.set(clientFacingNodeId, internalNodeId);
+    this.maximumNodeId = Math.max(this.maximumNodeId, Math.max(clientFacingNodeId, internalNodeId));
+  }
+  sendPings() {
+    const ping = this.pingCounter++;
+    if (this.pingCounter > 1e3) {
+      this.pingCounter = 1;
+    }
+    const pingMessage = [
+      {
+        type: "ping",
+        ping,
+        documentTime: this.getDocumentTime()
+      }
+    ];
+    const stringified = JSON.stringify(pingMessage);
+    this.connectionIdToWebSocketContext.forEach((webSocketContext) => {
+      webSocketContext.webSocket.send(stringified);
+    });
+  }
+  getInitialSnapshot(connectionId, documentVirtualDOMElement) {
+    const visibleNodesForConnection = this.visibleNodeIdsByConnectionId.get(connectionId);
+    if (!visibleNodesForConnection) {
+      const err = new Error(
+        `visibleNodesForConnection not found for connectionId in getInitialSnapshot: ${connectionId}`
+      );
+      console.error(err);
+      throw err;
+    }
+    const domSnapshot = describeNodeWithChildrenForConnectionId(
+      documentVirtualDOMElement,
+      connectionId,
+      visibleNodesForConnection
+    );
+    if (!domSnapshot) {
+      throw new Error(`domSnapshot was not generated`);
+    }
+    return {
+      type: "snapshot",
+      snapshot: domSnapshot,
+      documentTime: Date.now() - this.documentEffectiveStartTime
+    };
+  }
+  getDocumentTime() {
+    return this.latestDocumentTime;
+  }
+  addExistingWebsockets(websockets, existingWebsocketMap, domDiff) {
+    const connectionIds = [];
+    for (const websocket of websockets) {
+      let existingId = null;
+      if (existingWebsocketMap !== null) {
+        existingId = existingWebsocketMap.get(websocket);
+      }
+      const { connectionId } = this.registerWebsocket(websocket, existingId);
+      connectionIds.push(connectionId);
+    }
+    if (domDiff) {
+      const diffsByConnectionId = new Map(
+        connectionIds.map((connectionId) => [connectionId, []])
+      );
+      for (const connectionId of connectionIds) {
+        this.getInitialSnapshot(connectionId, domDiff.originalState);
+      }
+      for (const virtualDOMDiff of domDiff.virtualDOMDiffs) {
+        const mutationRecordLikes = virtualDOMDiffToVirtualDOMMutationRecord(
+          domDiff.originalState,
+          virtualDOMDiff
+        );
+        if (virtualDOMDiff.path === "" && virtualDOMDiff.op === "replace") {
+        } else {
+          const patchResults = (0, import_rfc6902.applyPatch)(domDiff.originalState, [virtualDOMDiff]);
+          for (const patchResult of patchResults) {
+            if (patchResult !== null) {
+              console.error("Patching virtual dom structure resulted in error", patchResult);
+              throw patchResult;
+            }
+          }
+        }
+        for (const mutationRecordLike of mutationRecordLikes) {
+          const targetNodeId = mutationRecordLike.target.nodeId;
+          const virtualElementParent = findParentNodeOfNodeId(domDiff.originalState, targetNodeId);
+          diffsByConnectionId.forEach((diffs, connectionId) => {
+            const mutationDiff = diffFromApplicationOfStaticVirtualDOMMutationRecordToConnection(
+              mutationRecordLike,
+              virtualElementParent,
+              connectionId,
+              // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+              this.visibleNodeIdsByConnectionId.get(connectionId)
+            );
+            if (mutationDiff) {
+              diffs.push(mutationDiff);
+            }
+          });
+        }
+      }
+      diffsByConnectionId.forEach((diffs, connectionId) => {
+        if (diffs.length === 0) {
+          diffs.push({
+            type: "childrenChanged",
+            nodeId: this.documentRoot.nodeId,
+            previousNodeId: null,
+            addedNodes: [],
+            removedNodes: []
+          });
+        }
+        const asServerMessages = diffs;
+        const firstDiff = diffs[0];
+        firstDiff.documentTime = this.getDocumentTime();
+        const serializedDiffs = JSON.stringify(asServerMessages, null, 4);
+        const webSocketContext = this.connectionIdToWebSocketContext.get(connectionId);
+        if (!webSocketContext) {
+          throw new Error(`webSocketContext not found in addExistingWebsockets`);
+        }
+        webSocketContext.webSocket.send(serializedDiffs);
+      });
+    } else {
+      const documentVirtualDOMElement = this.documentRoot;
+      if (!documentVirtualDOMElement) {
+        throw new Error(`documentVirtualDOMElement not found in getInitialSnapshot`);
+      }
+      for (const connectionId of connectionIds) {
+        const webSocketContext = this.connectionIdToWebSocketContext.get(connectionId);
+        if (!webSocketContext) {
+          throw new Error(`webSocketContext not found in addExistingWebsockets`);
+        }
+        const asServerMessages = [
+          this.getInitialSnapshot(connectionId, documentVirtualDOMElement)
+        ];
+        const serializedSnapshotMessage = JSON.stringify(asServerMessages);
+        webSocketContext.webSocket.send(serializedSnapshotMessage);
+      }
+    }
+    for (const connectionId of connectionIds) {
+      this.observableDOM.addConnectedUserId(connectionId);
+    }
+  }
+  findParentNodeOfNodeId(targetNodeId) {
+    const parentNodeId = this.nodeIdToParentNodeId.get(targetNodeId);
+    if (parentNodeId === void 0) {
+      throw new Error("Parent node ID not found");
+    }
+    return this.getStaticVirtualDOMElementByInternalNodeIdOrThrow(parentNodeId);
+  }
+  registerWebsocket(webSocket, existingConnectionId = null) {
+    let connectionId;
+    if (existingConnectionId !== null) {
+      connectionId = existingConnectionId;
+      this.currentConnectionId = Math.max(this.currentConnectionId, connectionId + 1);
+    } else {
+      connectionId = this.currentConnectionId++;
+    }
+    const webSocketContext = {
+      webSocket,
+      messageListener: (messageEvent) => {
+        const string = String(messageEvent.data);
+        let parsed;
+        try {
+          parsed = JSON.parse(string);
+        } catch (e) {
+          console.error(`Error parsing message from websocket: ${string}`);
+          console.trace();
+          return;
+        }
+        if (_NetworkedDOM.IsPongMessage(parsed)) {
+          return;
+        }
+        this.dispatchRemoteEvent(webSocket, parsed);
+      }
+    };
+    this.connectionIdToWebSocketContext.set(connectionId, webSocketContext);
+    this.visibleNodeIdsByConnectionId.set(connectionId, /* @__PURE__ */ new Set());
+    this.webSocketToConnectionId.set(webSocket, connectionId);
+    webSocket.addEventListener("message", webSocketContext.messageListener);
+    return { connectionId };
+  }
+  static handleWebsocketSubprotocol(protocols) {
+    const protocolsSet = new Set(protocols);
+    for (const protocol of _NetworkedDOM.SupportedWebsocketSubProtocolsPreferenceOrder) {
+      if (protocolsSet.has(protocol)) {
+        return protocol;
+      }
+    }
+    return false;
+  }
+  addWebSocket(webSocket) {
+    if (this.initialLoad) {
+      throw new Error("addWebSocket called before initial load - unsupported at this time");
+    }
+    if (this.disposed) {
+      console.error("addWebSocket called on disposed NetworkedDOM");
+      throw new Error("This NetworkedDOM has been disposed");
+    }
+    if (webSocket.protocol) {
+      if (_NetworkedDOM.SupportedWebsocketSubProtocolsPreferenceOrder.indexOf(webSocket.protocol) === -1) {
+        const errorMessageString = `Unsupported websocket subprotocol: ${webSocket.protocol}`;
+        const errorMessage = [
+          {
+            type: "error",
+            message: errorMessageString
+          }
+        ];
+        webSocket.send(JSON.stringify(errorMessage));
+        webSocket.close();
+        return;
+      }
+    } else {
+      const warningMessageString = `No websocket subprotocol specified. Please specify a subprotocol to ensure compatibility with networked-dom servers. Assuming subprotocol "${defaultWebsocketSubProtocol}" for this connection.`;
+      const warningMessage = [
+        {
+          type: "warning",
+          message: warningMessageString
+        }
+      ];
+      webSocket.send(JSON.stringify(warningMessage));
+    }
+    const { connectionId } = this.registerWebsocket(webSocket);
+    const documentVirtualDOMElement = this.documentRoot;
+    if (!documentVirtualDOMElement) {
+      throw new Error(`documentVirtualDOMElement not found in getInitialSnapshot`);
+    }
+    const asServerMessages = [
+      this.getInitialSnapshot(connectionId, documentVirtualDOMElement)
+    ];
+    const serializedSnapshotMessage = JSON.stringify(asServerMessages);
+    webSocket.send(serializedSnapshotMessage);
+    this.observableDOM.addConnectedUserId(connectionId);
+  }
+  removeWebSocket(webSocket) {
+    const connectionId = this.webSocketToConnectionId.get(webSocket);
+    if (!connectionId) {
+      return;
+    }
+    this.observableDOM.removeConnectedUserId(connectionId);
+    const webSocketContext = this.connectionIdToWebSocketContext.get(connectionId);
+    if (!webSocketContext) {
+      throw new Error("Missing context for websocket");
+    }
+    webSocket.removeEventListener("message", webSocketContext.messageListener);
+    this.connectionIdToWebSocketContext.delete(connectionId);
+    this.visibleNodeIdsByConnectionId.delete(connectionId);
+    this.webSocketToConnectionId.delete(webSocket);
+  }
+  dispose() {
+    this.disposed = true;
+    this.observableDOM.dispose();
+    for (const [webSocket, connectionId] of this.webSocketToConnectionId) {
+      const webSocketContext = this.connectionIdToWebSocketContext.get(connectionId);
+      if (!webSocketContext) {
+        throw new Error("Missing context for websocket");
+      }
+      webSocket.removeEventListener("message", webSocketContext.messageListener);
+      this.connectionIdToWebSocketContext.delete(connectionId);
+      this.visibleNodeIdsByConnectionId.delete(connectionId);
+      this.webSocketToConnectionId.delete(webSocket);
+    }
+  }
+  processModification(mutationRecord) {
+    const documentVirtualDOMElement = this.documentRoot;
+    if (!documentVirtualDOMElement) {
+      throw new Error(`document not created in processModification`);
+    }
+    for (const [, visibleNodesForConnection] of this.visibleNodeIdsByConnectionId) {
+      visibleNodesForConnection.add(documentVirtualDOMElement.nodeId);
+    }
+    const diffsByConnectionId = new Map(
+      Array.from(this.connectionIdToWebSocketContext.keys()).map((connectionId) => [
+        connectionId,
+        []
+      ])
+    );
+    diffsByConnectionId.forEach((diffs, connectionId) => {
+      const parentNode = this.findParentNodeOfNodeId(mutationRecord.target.nodeId);
+      if (mutationRecord.type === "attributes" && !parentNode) {
+        console.error("parentNode not found for attribute mutationRecord", mutationRecord);
+        console.error("this.documentRoot", JSON.stringify(this.documentRoot, null, 2));
+      }
+      const diff = diffFromApplicationOfStaticVirtualDOMMutationRecordToConnection(
+        mutationRecord,
+        parentNode,
+        connectionId,
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        this.visibleNodeIdsByConnectionId.get(connectionId)
+      );
+      if (diff) {
+        diffs.push(diff);
+      }
+    });
+    diffsByConnectionId.forEach((diffs, connectionId) => {
+      if (diffs.length > 0) {
+        const asServerMessages = diffs;
+        const serializedDiffs = JSON.stringify(asServerMessages, null, 4);
+        const webSocketContext = this.connectionIdToWebSocketContext.get(connectionId);
+        if (!webSocketContext) {
+          throw new Error(`webSocketContext not found in processModificationList`);
+        }
+        webSocketContext.webSocket.send(serializedDiffs);
+      }
+    });
+  }
+  removeKnownNodesInMutation(mutation) {
+    const virtualDOMElement = mutation.target;
+    if (mutation.type === "childList") {
+      mutation.removedNodes.forEach((childDOMElement) => {
+        this.removeVirtualDOMElement(childDOMElement);
+        const index = virtualDOMElement.childNodes.indexOf(childDOMElement);
+        virtualDOMElement.childNodes.splice(index, 1);
+      });
+      return;
+    }
+  }
+  removeVirtualDOMElement(virtualDOMElement) {
+    this.nodeIdToNode.delete(virtualDOMElement.nodeId);
+    this.nodeIdToParentNodeId.delete(virtualDOMElement.nodeId);
+    for (const child of virtualDOMElement.childNodes) {
+      this.removeVirtualDOMElement(child);
+    }
+  }
+  static IsPongMessage(message) {
+    return message.type === "pong";
+  }
+  dispatchRemoteEvent(webSocket, remoteEvent) {
+    if (this.disposed) {
+      console.error("Cannot dispatch remote event after dispose");
+      throw new Error("This NetworkedDOM has been disposed");
+    }
+    const connectionId = this.webSocketToConnectionId.get(webSocket);
+    if (!connectionId) {
+      console.error("Unknown web socket dispatched event:", webSocket);
+      return;
+    }
+    const visibleNodes = this.visibleNodeIdsByConnectionId.get(connectionId);
+    if (!visibleNodes) {
+      console.error("No visible nodes for connection: " + connectionId);
+      return;
+    }
+    if (!visibleNodes.has(remoteEvent.nodeId)) {
+      console.error("Node not visible for connection: " + remoteEvent.nodeId);
+      return;
+    }
+    const remappedNode = this.clientNodeIdToInternalNodeId.get(remoteEvent.nodeId);
+    if (remappedNode) {
+      remoteEvent.nodeId = remappedNode;
+    }
+    this.observableDOM.dispatchRemoteEventFromConnectionId(connectionId, remoteEvent);
+  }
+  getStaticVirtualDOMElementByInternalNodeIdOrThrow(internalNodeId) {
+    const remappedId = this.internalNodeIdToClientNodeId.get(internalNodeId);
+    if (remappedId !== void 0) {
+      const node2 = this.nodeIdToNode.get(remappedId);
+      if (!node2) {
+        throw new Error("Remapped node not found with nodeId " + remappedId);
+      }
+      return node2;
+    }
+    const node = this.nodeIdToNode.get(internalNodeId);
+    if (!node) {
+      throw new Error("Node not found with nodeId:" + internalNodeId);
+    }
+    return node;
+  }
+  addKnownNodesInMutation(mutation) {
+    const target = this.getStaticVirtualDOMElementByInternalNodeIdOrThrow(mutation.targetId);
+    if (mutation.attribute) {
+      if (mutation.attribute.value !== null) {
+        target.attributes[mutation.attribute.attributeName] = mutation.attribute.value;
+      } else {
+        delete target.attributes[mutation.attribute.attributeName];
+      }
+    }
+    const previousSibling = mutation.previousSiblingId ? this.getStaticVirtualDOMElementByInternalNodeIdOrThrow(mutation.previousSiblingId) : null;
+    if (mutation.type === "childList") {
+      let index = 0;
+      if (previousSibling) {
+        index = target.childNodes.indexOf(previousSibling);
+        if (index === -1) {
+          throw new Error("Previous sibling is not currently a child of the parent element");
+        }
+        index += 1;
+      }
+      mutation.addedNodes.forEach((childVirtualDOMElement) => {
+        this.addAndRemapNodeFromInstance(childVirtualDOMElement, target.nodeId);
+        if (target.childNodes.indexOf(childVirtualDOMElement) === -1) {
+          target.childNodes.splice(index, 0, childVirtualDOMElement);
+          index++;
+        }
+      });
+    } else if (mutation.type === "attributes") {
+      const attributePair = mutation.attribute;
+      if (attributePair.value === null) {
+        delete target.attributes[attributePair.attributeName];
+      } else {
+        target.attributes[attributePair.attributeName] = attributePair.value;
+      }
+    } else if (mutation.type === "characterData") {
+      throw new Error("characterData not supported");
+    }
+    const record = {
+      type: mutation.type,
+      target,
+      addedNodes: mutation.addedNodes,
+      removedNodes: mutation.removedNodeIds.map((nodeId) => {
+        return this.getStaticVirtualDOMElementByInternalNodeIdOrThrow(nodeId);
+      }),
+      previousSibling: mutation.previousSiblingId ? this.getStaticVirtualDOMElementByInternalNodeIdOrThrow(mutation.previousSiblingId) : null,
+      attributeName: mutation.attribute ? mutation.attribute.attributeName : null
+    };
+    return record;
+  }
+  getSnapshot() {
+    return this.documentRoot;
+  }
+  addAndRemapNodeFromInstance(node, parentNodeId) {
+    const remappedNodeId = this.internalNodeIdToClientNodeId.get(node.nodeId);
+    if (remappedNodeId !== void 0) {
+      node.nodeId = remappedNodeId;
+    } else {
+      const existingClientReference = this.clientNodeIdToInternalNodeId.get(node.nodeId);
+      if (existingClientReference) {
+        const newNodeId = ++this.maximumNodeId;
+        this.addRemappedNodeId(newNodeId, node.nodeId);
+        node.nodeId = newNodeId;
+      }
+    }
+    if (this.nodeIdToNode.has(node.nodeId)) {
+      throw new Error("Node already exists with id " + node.nodeId);
+    }
+    this.nodeIdToNode.set(node.nodeId, node);
+    this.nodeIdToParentNodeId.set(node.nodeId, parentNodeId);
+    this.maximumNodeId = Math.max(this.maximumNodeId, node.nodeId);
+    for (const childNode of node.childNodes) {
+      this.addAndRemapNodeFromInstance(childNode, node.nodeId);
+    }
+  }
+  getWebsocketConnectionIdMap() {
+    return new Map(this.webSocketToConnectionId);
+  }
+};
+var NetworkedDOM = _NetworkedDOM;
+// First to last in order of preference
+NetworkedDOM.SupportedWebsocketSubProtocolsPreferenceOrder = [
+  networkedDOMProtocolSubProtocol_v0_1
+];
+
+// src/EditableNetworkedDOM.ts
+var EditableNetworkedDOM = class {
+  constructor(htmlPath, observableDOMFactory, ignoreTextNodes = true, logCallback) {
+    this.params = {};
+    this.websockets = /* @__PURE__ */ new Set();
+    this.loadedState = null;
+    this.htmlPath = htmlPath;
+    this.observableDOMFactory = observableDOMFactory;
+    this.ignoreTextNodes = ignoreTextNodes;
+    this.logCallback = logCallback;
+  }
+  isLoaded() {
+    return this.loadedState !== null;
+  }
+  load(htmlContents, params) {
+    if (params !== void 0) {
+      this.params = params;
+    }
+    let oldInstanceRoot = null;
+    let existingWebsocketMap = null;
+    if (this.loadedState) {
+      const oldInstance = this.loadedState.networkedDOM;
+      existingWebsocketMap = oldInstance.getWebsocketConnectionIdMap();
+      oldInstance.dispose();
+      oldInstanceRoot = oldInstance.getSnapshot();
+    }
+    this.loadedState = null;
+    let didLoad = false;
+    const networkedDOM = new NetworkedDOM(
+      this.observableDOMFactory,
+      this.htmlPath,
+      htmlContents,
+      oldInstanceRoot,
+      (domDiff, networkedDOM2) => {
+        didLoad = true;
+        if (this.loadedState) {
+          this.loadedState.loaded = true;
+        }
+        networkedDOM2.addExistingWebsockets(
+          Array.from(this.websockets),
+          existingWebsocketMap,
+          domDiff
+        );
+      },
+      this.params,
+      this.ignoreTextNodes,
+      this.logCallback
+    );
+    this.loadedState = {
+      htmlContents,
+      networkedDOM,
+      loaded: didLoad
+    };
+  }
+  reload() {
+    if (this.loadedState) {
+      this.load(this.loadedState.htmlContents, this.params);
+    } else {
+      console.warn("EditableNetworkedDOM.reload called whilst not loaded");
+    }
+  }
+  dispose() {
+    for (const ws of this.websockets) {
+      ws.close();
+    }
+    this.websockets.clear();
+    if (this.loadedState) {
+      this.loadedState.networkedDOM.dispose();
+    }
+    this.loadedState = null;
+  }
+  addWebSocket(webSocket) {
+    this.websockets.add(webSocket);
+    if (this.loadedState && this.loadedState.loaded) {
+      this.loadedState.networkedDOM.addWebSocket(webSocket);
+    }
+  }
+  removeWebSocket(webSocket) {
+    this.websockets.delete(webSocket);
+    if (this.loadedState && this.loadedState.loaded) {
+      this.loadedState.networkedDOM.removeWebSocket(webSocket);
+    }
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  EditableNetworkedDOM,
+  NetworkedDOM,
+  defaultWebsocketSubProtocol,
+  networkedDOMProtocolSubProtocol_v0_1
+});
+//# sourceMappingURL=index.js.map