@3plate/graph-core 0.1.7 → 0.1.9

package/dist/index.js

@@ -3626,6 +3626,225 @@ var Updater = class _Updater {
   }
 };
 
+// src/api/ingest.ts
+var Ingest = class {
+  constructor(api) {
+    this.api = api;
+  }
+  /**
+   * Apply an incoming ingest message to the API.
+   * - snapshot: rebuild state from nodes/edges (clears prior history)
+   * - update: apply incremental update
+   * - history: initialize from a set of frames (clears prior history)
+   */
+  async apply(msg) {
+    switch (msg.type) {
+      case "snapshot": {
+        await this.api.replaceSnapshot(msg.nodes, msg.edges, msg.description);
+        break;
+      }
+      case "update": {
+        await this.api.update((u) => {
+          if (msg.addNodes) u.addNodes(...msg.addNodes);
+          if (msg.removeNodes) u.deleteNodes(...msg.removeNodes);
+          if (msg.updateNodes) u.updateNodes(...msg.updateNodes);
+          if (msg.addEdges) u.addEdges(...msg.addEdges);
+          if (msg.removeEdges) u.deleteEdges(...msg.removeEdges);
+          if (msg.updateEdges) u.updateEdges(...msg.updateEdges);
+          if (msg.description) u.describe(msg.description);
+        });
+        break;
+      }
+      case "history": {
+        await this.api.replaceHistory(msg.frames);
+        break;
+      }
+    }
+  }
+};
+
+// src/api/sources/WebSocketSource.ts
+var WebSocketSource = class {
+  url;
+  ws = null;
+  onMessage;
+  onStatus;
+  reconnectMs;
+  closedByUser = false;
+  connectStartTime = null;
+  totalTimeoutMs = 1e4;
+  totalTimeoutTimer = null;
+  constructor(url, onMessage, onStatus, reconnectMs = 1500) {
+    this.url = url;
+    this.onMessage = onMessage;
+    this.onStatus = onStatus;
+    this.reconnectMs = reconnectMs;
+  }
+  connect() {
+    this.closedByUser = false;
+    this.connectStartTime = Date.now();
+    this.startTotalTimeout();
+    this.open();
+  }
+  disconnect() {
+    this.closedByUser = true;
+    this.clearTotalTimeout();
+    if (this.ws) {
+      try {
+        this.ws.close();
+      } catch {
+      }
+      this.ws = null;
+    }
+    this.onStatus?.("closed");
+  }
+  startTotalTimeout() {
+    this.clearTotalTimeout();
+    this.totalTimeoutTimer = window.setTimeout(() => {
+      if (!this.closedByUser && this.ws?.readyState !== WebSocket.OPEN) {
+        this.closedByUser = true;
+        if (this.ws) {
+          try {
+            this.ws.close();
+          } catch {
+          }
+          this.ws = null;
+        }
+        this.clearTotalTimeout();
+        this.onStatus?.("error", new Error("Connection timeout after 10 seconds"));
+      }
+    }, this.totalTimeoutMs);
+  }
+  clearTotalTimeout() {
+    if (this.totalTimeoutTimer !== null) {
+      clearTimeout(this.totalTimeoutTimer);
+      this.totalTimeoutTimer = null;
+    }
+    this.connectStartTime = null;
+  }
+  open() {
+    if (this.connectStartTime && Date.now() - this.connectStartTime >= this.totalTimeoutMs) {
+      if (!this.closedByUser) {
+        this.closedByUser = true;
+        this.clearTotalTimeout();
+        this.onStatus?.("error", new Error("Connection timeout after 10 seconds"));
+      }
+      return;
+    }
+    this.onStatus?.(this.ws ? "reconnecting" : "connecting");
+    const ws = new WebSocket(this.url);
+    this.ws = ws;
+    ws.onopen = () => {
+      this.clearTotalTimeout();
+      this.onStatus?.("connected");
+    };
+    ws.onerror = (e) => {
+      this.onStatus?.("error", e);
+    };
+    ws.onclose = () => {
+      if (this.closedByUser) {
+        this.onStatus?.("closed");
+        return;
+      }
+      if (this.connectStartTime && Date.now() - this.connectStartTime >= this.totalTimeoutMs) {
+        this.closedByUser = true;
+        this.clearTotalTimeout();
+        this.onStatus?.("error", new Error("Connection timeout after 10 seconds"));
+        return;
+      }
+      this.onStatus?.("reconnecting");
+      setTimeout(() => this.open(), this.reconnectMs);
+    };
+    ws.onmessage = (ev) => {
+      const data = typeof ev.data === "string" ? ev.data : "";
+      const lines = data.split("\n").map((l) => l.trim()).filter(Boolean);
+      for (const line of lines) {
+        try {
+          const obj = JSON.parse(line);
+          this.onMessage(obj);
+        } catch {
+        }
+      }
+    };
+  }
+};
+
+// src/api/sources/FileSource.ts
+var FileSource = class {
+  url;
+  onMessage;
+  onStatus;
+  timer = null;
+  lastETag = null;
+  lastContent = "";
+  intervalMs = 1e3;
+  closed = false;
+  constructor(url, onMessage, onStatus, intervalMs = 1e3) {
+    this.url = url;
+    this.onMessage = onMessage;
+    this.onStatus = onStatus;
+    this.intervalMs = intervalMs;
+  }
+  async connect() {
+    this.closed = false;
+    this.lastETag = null;
+    this.lastContent = "";
+    this.onStatus?.("opened");
+    this.startPolling();
+  }
+  close() {
+    this.closed = true;
+    if (this.timer) {
+      window.clearInterval(this.timer);
+      this.timer = null;
+    }
+    this.onStatus?.("closed");
+  }
+  startPolling() {
+    if (this.timer) window.clearInterval(this.timer);
+    this.timer = window.setInterval(() => this.poll(), this.intervalMs);
+    this.poll();
+  }
+  async poll() {
+    if (this.closed) return;
+    try {
+      this.onStatus?.("reading");
+      const headers = {};
+      if (this.lastETag) {
+        headers["If-None-Match"] = this.lastETag;
+      }
+      const response = await fetch(this.url, { headers });
+      if (response.status === 304) {
+        return;
+      }
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      }
+      const etag = response.headers.get("ETag");
+      if (etag) {
+        this.lastETag = etag;
+      }
+      const content = await response.text();
+      if (content === this.lastContent) {
+        return;
+      }
+      const lines = content.split("\n").map((l) => l.trim()).filter(Boolean);
+      const lastContentLines = this.lastContent.split("\n").map((l) => l.trim()).filter(Boolean);
+      const newLines = lines.slice(lastContentLines.length);
+      for (const line of newLines) {
+        try {
+          const obj = JSON.parse(line);
+          this.onMessage(obj);
+        } catch {
+        }
+      }
+      this.lastContent = content;
+    } catch (e) {
+      this.onStatus?.("error", e);
+    }
+  }
+};
+
 // src/api/api.ts
 var log11 = logger("api");
 var API = class {
@@ -3644,11 +3863,16 @@ var API = class {
   nextNodeId;
   nextEdgeId;
   events;
+  ingest;
+  ingestionSource;
+  ingestionConfig;
+  prevProps = {};
   root;
   constructor(args) {
     this.root = args.root;
     this.options = applyDefaults(args.options);
     this.events = args.events || {};
+    this.ingestionConfig = args.ingestion;
     this.reset();
     this.canvas = new Canvas(this, {
       ...this.options.canvas,
@@ -3662,6 +3886,15 @@ var API = class {
     } else {
       this.history = [];
     }
+    this.prevProps = {
+      nodes: args.nodes,
+      edges: args.edges,
+      history: args.history,
+      options: args.options
+    };
+    if (this.ingestionConfig) {
+      this.ingest = new Ingest(this);
+    }
   }
   reset() {
     let graph2 = new Graph({ options: this.options.graph });
@@ -3684,10 +3917,50 @@ var API = class {
     if (!root) throw new Error("root element not found");
     root.appendChild(this.canvas.container);
     await this.applyHistory();
+    if (this.ingestionConfig && this.ingest) {
+      this.connectIngestion();
+    }
     if (this.events.onInit) {
       this.events.onInit();
     }
   }
+  /** Connect to the configured ingestion source */
+  connectIngestion() {
+    if (!this.ingestionConfig || !this.ingest) return;
+    const handleMessage = (msg) => {
+      this.ingest.apply(msg);
+    };
+    switch (this.ingestionConfig.type) {
+      case "websocket":
+        this.ingestionSource = new WebSocketSource(
+          this.ingestionConfig.url,
+          handleMessage,
+          void 0,
+          this.ingestionConfig.reconnectMs
+        );
+        this.ingestionSource.connect();
+        break;
+      case "file":
+        this.ingestionSource = new FileSource(
+          this.ingestionConfig.url,
+          handleMessage,
+          void 0,
+          this.ingestionConfig.intervalMs
+        );
+        this.ingestionSource.connect();
+        break;
+    }
+  }
+  /** Disconnect from the ingestion source */
+  disconnectIngestion() {
+    if (!this.ingestionSource) return;
+    if (this.ingestionSource instanceof WebSocketSource) {
+      this.ingestionSource.disconnect();
+    } else if (this.ingestionSource instanceof FileSource) {
+      this.ingestionSource.close();
+    }
+    this.ingestionSource = void 0;
+  }
   async applyHistory() {
     for (const update of this.history)
       await this.applyUpdate(update);
@@ -4150,154 +4423,117 @@ var API = class {
   setColorMode(colorMode) {
     this.canvas?.setColorMode(colorMode);
   }
-  /** Cleanup resources when the graph is destroyed */
-  destroy() {
-    this.canvas?.destroy();
-  }
-};
-
-// src/api/ingest.ts
-var Ingest = class {
-  constructor(api) {
-    this.api = api;
-  }
   /**
-   * Apply an incoming ingest message to the API.
-   * - snapshot: rebuild state from nodes/edges (clears prior history)
-   * - update: apply incremental update
-   * - history: initialize from a set of frames (clears prior history)
+   * Apply prop changes by diffing against previously applied props.
+   * This is a convenience method for framework wrappers that centralizes
+   * the logic for detecting and applying changes to nodes, edges, history, and options.
+   * The API stores the previous props internally, so you just pass the new props.
+   *
+   * @param props - The new props to apply
    */
-  async apply(msg) {
-    switch (msg.type) {
-      case "snapshot": {
-        await this.api.replaceSnapshot(msg.nodes, msg.edges, msg.description);
-        break;
-      }
-      case "update": {
-        await this.api.update((u) => {
-          if (msg.addNodes) u.addNodes(...msg.addNodes);
-          if (msg.removeNodes) u.deleteNodes(...msg.removeNodes);
-          if (msg.updateNodes) u.updateNodes(...msg.updateNodes);
-          if (msg.addEdges) u.addEdges(...msg.addEdges);
-          if (msg.removeEdges) u.deleteEdges(...msg.removeEdges);
-          if (msg.updateEdges) u.updateEdges(...msg.updateEdges);
-          if (msg.description) u.describe(msg.description);
-        });
-        break;
-      }
-      case "history": {
-        await this.api.replaceHistory(msg.frames);
-        break;
+  applyProps(props) {
+    const prev = this.prevProps;
+    const nodesChanged = !shallowEqualArray(props.nodes, prev.nodes);
+    const edgesChanged = !shallowEqualArray(props.edges, prev.edges);
+    if (nodesChanged || edgesChanged) {
+      if (props.nodes) {
+        this.replaceSnapshot(props.nodes, props.edges || [], void 0);
       }
     }
-  }
-};
-
-// src/api/sources/WebSocketSource.ts
-var WebSocketSource = class {
-  url;
-  ws = null;
-  onMessage;
-  onStatus;
-  reconnectMs;
-  closedByUser = false;
-  connectStartTime = null;
-  totalTimeoutMs = 1e4;
-  totalTimeoutTimer = null;
-  constructor(url, onMessage, onStatus, reconnectMs = 1500) {
-    this.url = url;
-    this.onMessage = onMessage;
-    this.onStatus = onStatus;
-    this.reconnectMs = reconnectMs;
-  }
-  connect() {
-    this.closedByUser = false;
-    this.connectStartTime = Date.now();
-    this.startTotalTimeout();
-    this.open();
-  }
-  disconnect() {
-    this.closedByUser = true;
-    this.clearTotalTimeout();
-    if (this.ws) {
-      try {
-        this.ws.close();
-      } catch {
+    if (!nodesChanged && !edgesChanged && props.history !== prev.history) {
+      if (props.history === void 0) {
+        if (props.nodes) {
+          this.replaceSnapshot(props.nodes, props.edges || [], void 0);
+        }
+      } else if (prev.history && isHistoryPrefix(prev.history, props.history)) {
+        const prevLength = prev.history.length;
+        const newFrames = props.history.slice(prevLength);
+        for (const frame of newFrames) {
+          this.update((u) => {
+            if (frame.addNodes) u.addNodes(...frame.addNodes);
+            if (frame.removeNodes) u.deleteNodes(...frame.removeNodes);
+            if (frame.updateNodes) u.updateNodes(...frame.updateNodes);
+            if (frame.addEdges) u.addEdges(...frame.addEdges);
+            if (frame.removeEdges) u.deleteEdges(...frame.removeEdges);
+            if (frame.updateEdges) u.updateEdges(...frame.updateEdges);
+            if (frame.description) u.describe(frame.description);
+          });
+        }
+      } else {
+        this.replaceHistory(props.history);
       }
-      this.ws = null;
     }
-    this.onStatus?.("closed");
+    const prevCanvas = prev.options?.canvas;
+    const currCanvas = props.options?.canvas;
+    const colorModeChanged = prevCanvas?.colorMode !== currCanvas?.colorMode;
+    if (colorModeChanged && currCanvas?.colorMode) {
+      this.setColorMode(currCanvas.colorMode);
+    }
+    const themeChanged = prevCanvas?.theme !== currCanvas?.theme;
+    const nodeTypesChanged = prevCanvas?.nodeTypes !== currCanvas?.nodeTypes;
+    const edgeTypesChanged = prevCanvas?.edgeTypes !== currCanvas?.edgeTypes;
+    if (themeChanged || nodeTypesChanged || edgeTypesChanged) {
+      this.updateStyles({
+        theme: currCanvas?.theme,
+        nodeTypes: currCanvas?.nodeTypes,
+        edgeTypes: currCanvas?.edgeTypes
+      });
+    }
+    this.prevProps = {
+      nodes: props.nodes,
+      edges: props.edges,
+      history: props.history,
+      options: props.options
+    };
   }
-  startTotalTimeout() {
-    this.clearTotalTimeout();
-    this.totalTimeoutTimer = window.setTimeout(() => {
-      if (!this.closedByUser && this.ws?.readyState !== WebSocket.OPEN) {
-        this.closedByUser = true;
-        if (this.ws) {
-          try {
-            this.ws.close();
-          } catch {
-          }
-          this.ws = null;
+  /** Cleanup resources when the graph is destroyed */
+  destroy() {
+    this.disconnectIngestion();
+    this.canvas?.destroy();
+  }
+};
+function shallowEqualArray(a, b) {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) {
+    if (a[i] !== b[i]) {
+      if (typeof a[i] === "object" && a[i] !== null && typeof b[i] === "object" && b[i] !== null) {
+        const aObj = a[i];
+        const bObj = b[i];
+        const aKeys = Object.keys(aObj);
+        const bKeys = Object.keys(bObj);
+        if (aKeys.length !== bKeys.length) return false;
+        for (const key of aKeys) {
+          if (aObj[key] !== bObj[key]) return false;
         }
-        this.clearTotalTimeout();
-        this.onStatus?.("error", new Error("Connection timeout after 10 seconds"));
+      } else {
+        return false;
       }
-    }, this.totalTimeoutMs);
-  }
-  clearTotalTimeout() {
-    if (this.totalTimeoutTimer !== null) {
-      clearTimeout(this.totalTimeoutTimer);
-      this.totalTimeoutTimer = null;
     }
-    this.connectStartTime = null;
   }
-  open() {
-    if (this.connectStartTime && Date.now() - this.connectStartTime >= this.totalTimeoutMs) {
-      if (!this.closedByUser) {
-        this.closedByUser = true;
-        this.clearTotalTimeout();
-        this.onStatus?.("error", new Error("Connection timeout after 10 seconds"));
-      }
-      return;
+  return true;
+}
+function isHistoryPrefix(oldHistory, newHistory) {
+  if (newHistory.length < oldHistory.length) return false;
+  for (let i = 0; i < oldHistory.length; i++) {
+    if (!shallowEqualUpdate(oldHistory[i], newHistory[i])) {
+      return false;
     }
-    this.onStatus?.(this.ws ? "reconnecting" : "connecting");
-    const ws = new WebSocket(this.url);
-    this.ws = ws;
-    ws.onopen = () => {
-      this.clearTotalTimeout();
-      this.onStatus?.("connected");
-    };
-    ws.onerror = (e) => {
-      this.onStatus?.("error", e);
-    };
-    ws.onclose = () => {
-      if (this.closedByUser) {
-        this.onStatus?.("closed");
-        return;
-      }
-      if (this.connectStartTime && Date.now() - this.connectStartTime >= this.totalTimeoutMs) {
-        this.closedByUser = true;
-        this.clearTotalTimeout();
-        this.onStatus?.("error", new Error("Connection timeout after 10 seconds"));
-        return;
-      }
-      this.onStatus?.("reconnecting");
-      setTimeout(() => this.open(), this.reconnectMs);
-    };
-    ws.onmessage = (ev) => {
-      const data = typeof ev.data === "string" ? ev.data : "";
-      const lines = data.split("\n").map((l) => l.trim()).filter(Boolean);
-      for (const line of lines) {
-        try {
-          const obj = JSON.parse(line);
-          this.onMessage(obj);
-        } catch {
-        }
-      }
-    };
   }
-};
+  return true;
+}
+function shallowEqualUpdate(a, b) {
+  if (a === b) return true;
+  if (a.description !== b.description) return false;
+  if (!shallowEqualArray(a.addNodes, b.addNodes)) return false;
+  if (!shallowEqualArray(a.removeNodes, b.removeNodes)) return false;
+  if (!shallowEqualArray(a.updateNodes, b.updateNodes)) return false;
+  if (!shallowEqualArray(a.addEdges, b.addEdges)) return false;
+  if (!shallowEqualArray(a.removeEdges, b.removeEdges)) return false;
+  if (!shallowEqualArray(a.updateEdges, b.updateEdges)) return false;
+  return true;
+}
 
 // src/api/sources/FileSystemSource.ts
 var FileSystemSource = class {
@@ -4361,82 +4597,6 @@ var FileSystemSource = class {
   }
 };
 
-// src/api/sources/FileSource.ts
-var FileSource = class {
-  url;
-  onMessage;
-  onStatus;
-  timer = null;
-  lastETag = null;
-  lastContent = "";
-  intervalMs = 1e3;
-  closed = false;
-  constructor(url, onMessage, onStatus, intervalMs = 1e3) {
-    this.url = url;
-    this.onMessage = onMessage;
-    this.onStatus = onStatus;
-    this.intervalMs = intervalMs;
-  }
-  async connect() {
-    this.closed = false;
-    this.lastETag = null;
-    this.lastContent = "";
-    this.onStatus?.("opened");
-    this.startPolling();
-  }
-  close() {
-    this.closed = true;
-    if (this.timer) {
-      window.clearInterval(this.timer);
-      this.timer = null;
-    }
-    this.onStatus?.("closed");
-  }
-  startPolling() {
-    if (this.timer) window.clearInterval(this.timer);
-    this.timer = window.setInterval(() => this.poll(), this.intervalMs);
-    this.poll();
-  }
-  async poll() {
-    if (this.closed) return;
-    try {
-      this.onStatus?.("reading");
-      const headers = {};
-      if (this.lastETag) {
-        headers["If-None-Match"] = this.lastETag;
-      }
-      const response = await fetch(this.url, { headers });
-      if (response.status === 304) {
-        return;
-      }
-      if (!response.ok) {
-        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-      }
-      const etag = response.headers.get("ETag");
-      if (etag) {
-        this.lastETag = etag;
-      }
-      const content = await response.text();
-      if (content === this.lastContent) {
-        return;
-      }
-      const lines = content.split("\n").map((l) => l.trim()).filter(Boolean);
-      const lastContentLines = this.lastContent.split("\n").map((l) => l.trim()).filter(Boolean);
-      const newLines = lines.slice(lastContentLines.length);
-      for (const line of newLines) {
-        try {
-          const obj = JSON.parse(line);
-          this.onMessage(obj);
-        } catch {
-        }
-      }
-      this.lastContent = content;
-    } catch (e) {
-      this.onStatus?.("error", e);
-    }
-  }
-};
-
 // src/playground/playground.ts
 import styles2 from "./styles.css?raw";
 var Playground = class {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@3plate/graph-core",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "type": "module",
   "license": "GPL-3.0",
   "repository": {