@mml-io/observable-dom 0.0.42

package/build/index.d.ts

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

package/build/index.js

@@ -0,0 +1,601 @@
+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, {
+  JSDOMRunner: () => JSDOMRunner,
+  JSDOMRunnerFactory: () => JSDOMRunnerFactory,
+  ObservableDom: () => ObservableDom
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/utils.ts
+function virtualDomElementToStatic(el) {
+  return {
+    nodeId: el.nodeId,
+    tag: el.tag,
+    attributes: el.attributes,
+    childNodes: el.childNodes.map((child) => virtualDomElementToStatic(child)),
+    textContent: el.textContent
+  };
+}
+
+// src/ObservableDom.ts
+var ObservableDom = class {
+  constructor(observableDOMParameters, callback, runnerFactory) {
+    this.nodeToNodeId = /* @__PURE__ */ new Map();
+    this.nodeIdToNode = /* @__PURE__ */ new Map();
+    this.realElementToVirtualElement = /* @__PURE__ */ new Map();
+    this.ignoreTextNodes = true;
+    this.nextNodeId = 1;
+    this.htmlPath = observableDOMParameters.htmlPath;
+    this.ignoreTextNodes = observableDOMParameters.ignoreTextNodes;
+    this.callback = callback;
+    this.documentTimeIntervalTimer = setInterval(() => {
+      this.callback({
+        documentTime: this.getDocumentTime()
+      });
+    }, observableDOMParameters.pingIntervalMilliseconds || 5e3);
+    this.domRunner = runnerFactory(
+      observableDOMParameters.htmlPath,
+      observableDOMParameters.htmlContents,
+      observableDOMParameters.params,
+      (domRunnerMessage) => {
+        if (domRunnerMessage.loaded) {
+          this.createVirtualDomElementWithChildren(
+            this.domRunner.getDocument(),
+            null
+          );
+          const snapshot = virtualDomElementToStatic(
+            this.getVirtualDomElementForRealElementOrThrow(
+              this.domRunner.getDocument()
+            )
+          );
+          this.callback({
+            snapshot,
+            documentTime: this.getDocumentTime()
+          });
+        } else if (domRunnerMessage.mutationList) {
+          this.processModificationList(domRunnerMessage.mutationList);
+        } else if (domRunnerMessage.logMessage) {
+          this.callback({
+            logMessage: domRunnerMessage.logMessage,
+            documentTime: this.getDocumentTime()
+          });
+        }
+      }
+    );
+  }
+  addIPCWebsocket(webSocket) {
+    return this.domRunner.addIPCWebsocket(webSocket);
+  }
+  addConnectedUserId(connectionId) {
+    this.domRunner.getWindow().dispatchEvent(
+      new (this.domRunner.getWindow()).CustomEvent("connected", {
+        detail: { connectionId }
+      })
+    );
+  }
+  removeConnectedUserId(connectionId) {
+    this.domRunner.getWindow().dispatchEvent(
+      new (this.domRunner.getWindow()).CustomEvent("disconnected", {
+        detail: { connectionId }
+      })
+    );
+  }
+  processModificationList(mutationList) {
+    const documentEl = this.domRunner.getDocument();
+    const documentVirtualDomElement = this.realElementToVirtualElement.get(documentEl);
+    if (!documentVirtualDomElement) {
+      throw new Error(`document not created in processModificationList`);
+    }
+    if (mutationList.length > 1) {
+      console.error(
+        "More than one mutation record received. It is possible that intermediate states are incorrect."
+      );
+    }
+    for (const mutation of mutationList) {
+      if (this.isIgnoredElement(mutation.target)) {
+        continue;
+      }
+      if (mutation.type === "attributes" && // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      this.isIgnoredAttribute(mutation.target, mutation.attributeName)) {
+        continue;
+      }
+      this.addKnownNodesInMutation(mutation);
+      const firstNonIgnoredPreviousSibling = mutation.previousSibling ? this.getFirstNonIgnoredPreviousSibling(mutation.previousSibling) : null;
+      const targetElement = this.getVirtualDomElementForRealElementOrThrow(
+        mutation.target
+      );
+      const addedNodes = [];
+      for (const node of mutation.addedNodes) {
+        if (this.isIgnoredElement(node)) {
+          continue;
+        }
+        const virtualDomElement = this.getVirtualDomElementForRealElementOrThrow(
+          node
+        );
+        addedNodes.push(virtualDomElementToStatic(virtualDomElement));
+      }
+      const removedNodeIds = [];
+      for (const node of mutation.removedNodes) {
+        if (this.isIgnoredElement(node)) {
+          continue;
+        }
+        const virtualDomElement = this.getVirtualDomElementForRealElementOrThrow(
+          node
+        );
+        removedNodeIds.push(virtualDomElement.nodeId);
+      }
+      const mutationRecord = {
+        type: mutation.type,
+        targetId: targetElement.nodeId,
+        addedNodes,
+        removedNodeIds,
+        previousSiblingId: firstNonIgnoredPreviousSibling !== null ? this.getVirtualDomElementForRealElementOrThrow(firstNonIgnoredPreviousSibling).nodeId : null,
+        attribute: mutation.attributeName ? {
+          attributeName: mutation.attributeName,
+          value: mutation.target.getAttribute(mutation.attributeName)
+        } : null
+      };
+      this.callback({
+        mutation: mutationRecord,
+        documentTime: this.getDocumentTime()
+      });
+      this.removeKnownNodesInMutation(mutation);
+    }
+  }
+  addKnownNodesInMutation(mutation) {
+    const targetNode = mutation.target;
+    const virtualDomElement = this.realElementToVirtualElement.get(targetNode);
+    if (!virtualDomElement) {
+      throw new Error(
+        "Unknown node in addKnownNodesInMutation:" + targetNode + "," + mutation.type
+      );
+    }
+    if (mutation.type === "childList") {
+      let previousSibling = mutation.previousSibling;
+      let index = 0;
+      while (previousSibling && this.isIgnoredElement(previousSibling)) {
+        previousSibling = previousSibling.previousSibling;
+      }
+      if (previousSibling) {
+        const previousSiblingElement = this.realElementToVirtualElement.get(
+          previousSibling
+        );
+        if (!previousSiblingElement) {
+          throw new Error("Unknown previous sibling");
+        }
+        index = virtualDomElement.childNodes.indexOf(previousSiblingElement);
+        if (index === -1) {
+          throw new Error("Previous sibling is not currently a child of the parent element");
+        }
+        index += 1;
+      }
+      mutation.addedNodes.forEach((node) => {
+        const asElementOrText = node;
+        const childVirtualDomElement = this.createVirtualDomElementWithChildren(
+          asElementOrText,
+          virtualDomElement
+        );
+        if (childVirtualDomElement) {
+          if (virtualDomElement.childNodes.indexOf(childVirtualDomElement) === -1) {
+            virtualDomElement.childNodes.splice(index, 0, childVirtualDomElement);
+            index++;
+          }
+        }
+      });
+    } else if (mutation.type === "attributes") {
+      const attributeName = mutation.attributeName;
+      if (this.isIgnoredAttribute(targetNode, attributeName)) {
+        return;
+      }
+      const attributeValue = targetNode.getAttribute(attributeName);
+      if (attributeValue === null) {
+        delete virtualDomElement.attributes[attributeName];
+      } else {
+        virtualDomElement.attributes[attributeName] = attributeValue;
+      }
+    } else if (mutation.type === "characterData") {
+      virtualDomElement.textContent = targetNode.textContent ? targetNode.textContent : void 0;
+    }
+  }
+  removeKnownNodesInMutation(mutation) {
+    const targetNode = mutation.target;
+    const virtualDomElement = this.realElementToVirtualElement.get(targetNode);
+    if (!virtualDomElement) {
+      throw new Error("Unknown node in mutation list:" + targetNode + ", " + mutation.type);
+    }
+    if (mutation.type === "childList") {
+      for (const node of mutation.removedNodes) {
+        const asElementOrText = node;
+        if (this.isIgnoredElement(asElementOrText)) {
+          continue;
+        }
+        const childDomElement = this.realElementToVirtualElement.get(asElementOrText);
+        if (!childDomElement) {
+          console.warn(this.htmlPath, "Unknown node in removeKnownNodesInMutation");
+          continue;
+        } else {
+          this.removeVirtualDomElement(childDomElement);
+          const index = virtualDomElement.childNodes.indexOf(childDomElement);
+          virtualDomElement.childNodes.splice(index, 1);
+        }
+      }
+      return;
+    }
+  }
+  removeVirtualDomElement(virtualDomElement) {
+    this.nodeIdToNode.delete(virtualDomElement.nodeId);
+    this.nodeToNodeId.delete(virtualDomElement);
+    this.realElementToVirtualElement.delete(virtualDomElement.realElement);
+    for (const child of virtualDomElement.childNodes) {
+      this.removeVirtualDomElement(child);
+    }
+  }
+  createVirtualDomElementWithChildren(node, parent) {
+    const virtualElement = this.createVirtualDomElement(node, parent);
+    if (!virtualElement) {
+      return null;
+    }
+    if (node.childNodes) {
+      for (let i = 0; i < node.childNodes.length; i++) {
+        const child = node.childNodes[i];
+        const childVirtualElement = this.createVirtualDomElementWithChildren(
+          child,
+          virtualElement
+        );
+        if (childVirtualElement) {
+          virtualElement.childNodes.push(childVirtualElement);
+        }
+      }
+    }
+    return virtualElement;
+  }
+  createVirtualDomElement(node, parent) {
+    if (this.isIgnoredElement(node)) {
+      return null;
+    }
+    const existingValue = this.realElementToVirtualElement.get(node);
+    if (existingValue !== void 0) {
+      throw new Error("Node already has a virtual element: " + node.nodeName);
+    }
+    if (!node) {
+      throw new Error("Cannot assign node id to null");
+    }
+    const attributes = {};
+    if (node.attributes) {
+      const asHTMLElement = node;
+      for (const key of asHTMLElement.getAttributeNames()) {
+        const value = asHTMLElement.getAttribute(key);
+        if (value === null) {
+          throw new Error("Null attribute value for key: " + key);
+        }
+        if (!this.isIgnoredAttribute(node, key)) {
+          attributes[key] = value;
+        }
+      }
+    }
+    const nodeId = this.nextNodeId++;
+    const virtualElement = {
+      nodeId,
+      tag: node.nodeName,
+      attributes,
+      childNodes: [],
+      realElement: node,
+      parent
+    };
+    if (node instanceof this.domRunner.getWindow().Text && node.textContent) {
+      virtualElement.textContent = node.textContent;
+    }
+    this.nodeToNodeId.set(virtualElement, nodeId);
+    this.nodeIdToNode.set(nodeId, virtualElement);
+    this.realElementToVirtualElement.set(node, virtualElement);
+    return virtualElement;
+  }
+  getFirstNonIgnoredPreviousSibling(node) {
+    let currentNode = node;
+    if (!this.isIgnoredElement(currentNode)) {
+      return currentNode;
+    }
+    while (currentNode && currentNode.previousSibling) {
+      currentNode = currentNode.previousSibling;
+      if (!this.isIgnoredElement(currentNode)) {
+        return currentNode;
+      }
+    }
+    return null;
+  }
+  getVirtualDomElementForRealElementOrThrow(realElement) {
+    const virtualElement = this.realElementToVirtualElement.get(realElement);
+    if (!virtualElement) {
+      throw new Error(`Virtual element not found for real element`);
+    }
+    return virtualElement;
+  }
+  isIgnoredElement(node) {
+    if (this.ignoreTextNodes && node instanceof this.domRunner.getWindow().Text) {
+      return true;
+    } else if (node instanceof this.domRunner.getWindow().HTMLScriptElement) {
+      return true;
+    } else if (node instanceof this.domRunner.getWindow().Comment) {
+      return true;
+    }
+    return false;
+  }
+  isIgnoredAttribute(node, attributeName) {
+    return attributeName.startsWith("on");
+  }
+  dispatchRemoteEventFromConnectionId(connectionId, remoteEvent) {
+    const domNode = this.nodeIdToNode.get(remoteEvent.nodeId);
+    if (!domNode) {
+      console.error("Unknown node ID in remote event: " + remoteEvent.nodeId);
+      return;
+    }
+    if (domNode instanceof this.domRunner.getWindow().Text) {
+      console.warn("Cannot dispatch remote event to text node");
+      return;
+    }
+    this.domRunner.dispatchRemoteEventFromConnectionId(
+      connectionId,
+      domNode.realElement,
+      remoteEvent
+    );
+  }
+  dispose() {
+    clearInterval(this.documentTimeIntervalTimer);
+    this.domRunner.dispose();
+  }
+  getDocumentTime() {
+    return this.domRunner.getDocumentTime();
+  }
+};
+
+// src/JSDOMRunner.ts
+var import_vm = __toESM(require("vm"));
+var import_jsdom = require("jsdom");
+var monkeyPatchedMutationRecordCallbacks = /* @__PURE__ */ new Set();
+function installMutationObserverMonkeyPatch() {
+  const MutationRecordExports = require("jsdom/lib/jsdom/living/generated/MutationRecord");
+  const originalCreateImpl = MutationRecordExports.createImpl;
+  MutationRecordExports.createImpl = (...args) => {
+    for (const callback of monkeyPatchedMutationRecordCallbacks) {
+      callback();
+    }
+    return originalCreateImpl.call(null, ...args);
+  };
+}
+var monkeyPatchInstalled = false;
+var JSDOMRunnerFactory = (htmlPath, htmlContents, params, callback) => {
+  return new JSDOMRunner(htmlPath, htmlContents, params, callback);
+};
+var RejectionResourceLoader = class extends import_jsdom.ResourceLoader {
+  fetch(url) {
+    console.error("RejectionResourceLoader.fetch", url);
+    return null;
+  }
+};
+var JSDOMRunner = class {
+  constructor(htmlPath, htmlContents, params, callback) {
+    this.ipcWebsockets = /* @__PURE__ */ new Set();
+    this.ipcListeners = /* @__PURE__ */ new Set();
+    this.documentStartTime = Date.now();
+    this.isLoaded = false;
+    this.logBuffer = [];
+    this.htmlPath = htmlPath;
+    this.callback = callback;
+    if (!monkeyPatchInstalled) {
+      installMutationObserverMonkeyPatch();
+      monkeyPatchInstalled = true;
+    }
+    this.monkeyPatchMutationRecordCallback = () => {
+      const records = this.mutationObserver.takeRecords();
+      if (records.length > 1) {
+        throw new Error(
+          "The monkey patching should have prevented more than one record being handled at a time"
+        );
+      } else if (records.length > 0) {
+        this.callback({
+          mutationList: records
+        });
+      }
+    };
+    monkeyPatchedMutationRecordCallbacks.add(this.monkeyPatchMutationRecordCallback);
+    this.jsDom = new import_jsdom.JSDOM(htmlContents, {
+      runScripts: "dangerously",
+      resources: new RejectionResourceLoader(),
+      url: this.htmlPath,
+      virtualConsole: this.createVirtualConsole(),
+      beforeParse: (window) => {
+        this.domWindow = window;
+        const timeline = {};
+        Object.defineProperty(timeline, "currentTime", {
+          get: () => {
+            return this.getDocumentTime();
+          }
+        });
+        window.document.timeline = timeline;
+        window.params = JSON.parse(JSON.stringify(params));
+        const oldDocumentAddEventListener = window.document.addEventListener;
+        window.document.addEventListener = (...args) => {
+          const [eventName, listener] = args;
+          if (eventName === "ipc") {
+            this.ipcListeners.add(listener);
+          }
+          return oldDocumentAddEventListener.call(window.document, ...args);
+        };
+        const oldDocumentRemoveEventListener = window.document.addEventListener;
+        window.document.removeEventListener = (...args) => {
+          const [eventName, listener] = args;
+          if (eventName === "ipc") {
+            this.ipcListeners.delete(listener);
+          }
+          return oldDocumentRemoveEventListener.call(window.document, ...args);
+        };
+        this.mutationObserver = new window.MutationObserver((mutationList) => {
+          this.callback({
+            mutationList
+          });
+        });
+        window.addEventListener("load", () => {
+          this.mutationObserver.observe(window.document, {
+            attributes: true,
+            childList: true,
+            subtree: true,
+            characterData: true
+          });
+          this.isLoaded = true;
+          this.callback({
+            loaded: true
+          });
+          this.flushLogBuffer();
+        });
+      }
+    });
+  }
+  flushLogBuffer() {
+    for (const logMessage of this.logBuffer) {
+      this.callback({
+        logMessage
+      });
+    }
+    this.logBuffer = [];
+  }
+  log(message) {
+    if (!this.isLoaded) {
+      this.logBuffer.push(message);
+      return;
+    }
+    this.callback({
+      logMessage: message
+    });
+  }
+  getDocument() {
+    return this.domWindow.document;
+  }
+  getWindow() {
+    return this.domWindow;
+  }
+  addIPCWebsocket(webSocket) {
+    if (this.ipcListeners.size === 0) {
+      console.error("ipc requested, but no ipc listeners registered on document:", this.htmlPath);
+      webSocket.close();
+      return;
+    }
+    this.ipcWebsockets.add(webSocket);
+    const event = new this.domWindow.CustomEvent("ipc", {
+      detail: {
+        webSocket
+      }
+    });
+    for (const ipcListener of this.ipcListeners) {
+      ipcListener(event);
+    }
+    webSocket.addEventListener("close", () => {
+      this.ipcWebsockets.delete(webSocket);
+    });
+    return;
+  }
+  dispose() {
+    const records = this.mutationObserver.takeRecords();
+    this.callback({
+      mutationList: records
+    });
+    monkeyPatchedMutationRecordCallbacks.delete(this.monkeyPatchMutationRecordCallback);
+    this.mutationObserver.disconnect();
+    this.jsDom.window.close();
+  }
+  getDocumentTime() {
+    return Date.now() - this.documentStartTime;
+  }
+  dispatchRemoteEventFromConnectionId(connectionId, domNode, remoteEvent) {
+    const bubbles = remoteEvent.bubbles || false;
+    const remoteEventObject = new this.domWindow.CustomEvent(remoteEvent.name, {
+      bubbles,
+      detail: { ...remoteEvent.params, connectionId }
+    });
+    const eventTypeLowerCase = remoteEvent.name.toLowerCase();
+    if (eventTypeLowerCase !== "click") {
+      const handlerAttributeName = "on" + eventTypeLowerCase;
+      const handlerAttributeValue = domNode.getAttribute(handlerAttributeName);
+      if (handlerAttributeValue) {
+        const script = handlerAttributeValue;
+        const vmContext = this.jsDom.getInternalVMContext();
+        try {
+          const invoke = import_vm.default.runInContext(`(function(event){ ${script} })`, vmContext);
+          Reflect.apply(invoke, domNode, [remoteEventObject]);
+        } catch (e) {
+          console.error("Error running event handler:", e);
+        }
+      }
+    }
+    domNode.dispatchEvent(remoteEventObject);
+  }
+  createVirtualConsole() {
+    const virtualConsole = new import_jsdom.VirtualConsole();
+    virtualConsole.on("jsdomError", (...args) => {
+      this.log({
+        level: "system",
+        content: args
+      });
+    });
+    virtualConsole.on("error", (...args) => {
+      this.log({
+        level: "error",
+        content: args
+      });
+    });
+    virtualConsole.on("warn", (...args) => {
+      this.log({
+        level: "warn",
+        content: args
+      });
+    });
+    virtualConsole.on("log", (...args) => {
+      this.log({
+        level: "log",
+        content: args
+      });
+    });
+    virtualConsole.on("info", (...args) => {
+      this.log({
+        level: "info",
+        content: args
+      });
+    });
+    return virtualConsole;
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  JSDOMRunner,
+  JSDOMRunnerFactory,
+  ObservableDom
+});
+//# sourceMappingURL=index.js.map