@3plate/graph-react 0.1.5 → 0.1.7

package/dist/index.d.mts

@@ -1,2 +1,33 @@
+import React from 'react';
+import { Update, APIArguments, PlaygroundOptions } from '@3plate/graph-core';
 
-export {  }
+type GraphProps<N, E> = {
+    /** Initial nodes */
+    nodes?: N[];
+    /** Initial edges */
+    edges?: E[];
+    /** Initial history */
+    history?: Update<N, E>[];
+    /** Options */
+    options?: APIArguments<N, E>['options'];
+    /** Events */
+    events?: APIArguments<N, E>['events'];
+};
+/**
+ * Graph component - renders a graph visualization
+ * Intelligently handles prop changes by diffing nodes, edges, and history
+ */
+declare function Graph<N, E>(props: GraphProps<N, E>): React.JSX.Element;
+
+type PlaygroundProps = {
+    /** Examples to display */
+    examples: PlaygroundOptions['examples'];
+    /** Default example key */
+    defaultExample?: string;
+};
+/**
+ * Playground component - renders the interactive playground with examples
+ */
+declare function Playground(props: PlaygroundProps): React.JSX.Element;
+
+export { Graph, type GraphProps, Playground, type PlaygroundProps };

package/dist/index.d.ts

@@ -1,2 +1,33 @@
+import React from 'react';
+import { Update, APIArguments, PlaygroundOptions } from '@3plate/graph-core';
 
-export {  }
+type GraphProps<N, E> = {
+    /** Initial nodes */
+    nodes?: N[];
+    /** Initial edges */
+    edges?: E[];
+    /** Initial history */
+    history?: Update<N, E>[];
+    /** Options */
+    options?: APIArguments<N, E>['options'];
+    /** Events */
+    events?: APIArguments<N, E>['events'];
+};
+/**
+ * Graph component - renders a graph visualization
+ * Intelligently handles prop changes by diffing nodes, edges, and history
+ */
+declare function Graph<N, E>(props: GraphProps<N, E>): React.JSX.Element;
+
+type PlaygroundProps = {
+    /** Examples to display */
+    examples: PlaygroundOptions['examples'];
+    /** Default example key */
+    defaultExample?: string;
+};
+/**
+ * Playground component - renders the interactive playground with examples
+ */
+declare function Playground(props: PlaygroundProps): React.JSX.Element;
+
+export { Graph, type GraphProps, Playground, type PlaygroundProps };

package/dist/index.js

@@ -1 +1,271 @@
 "use strict";
+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 index_exports = {};
+__export(index_exports, {
+  Graph: () => Graph,
+  Playground: () => Playground
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/Graph.tsx
+var import_react = __toESM(require("react"));
+var import_graph_core = require("@3plate/graph-core");
+function Graph(props) {
+  const rootRef = (0, import_react.useRef)(null);
+  const apiRef = (0, import_react.useRef)(null);
+  const rootIdRef = (0, import_react.useRef)(`graph-${Math.random().toString(36).slice(2, 11)}`);
+  const prevPropsRef = (0, import_react.useRef)({});
+  (0, import_react.useEffect)(() => {
+    if (!rootRef.current || apiRef.current) return;
+    rootRef.current.id = rootIdRef.current;
+    prevPropsRef.current = {
+      nodes: props.nodes,
+      edges: props.edges,
+      history: props.history,
+      options: props.options
+    };
+    (0, import_graph_core.graph)({
+      root: rootIdRef.current,
+      nodes: props.nodes,
+      edges: props.edges,
+      history: props.history,
+      options: props.options,
+      events: props.events
+    }).then((api) => {
+      apiRef.current = api;
+    });
+    return () => {
+      if (apiRef.current) {
+        apiRef.current.destroy();
+        apiRef.current = null;
+      }
+      if (rootRef.current) {
+        const canvas = rootRef.current.querySelector("canvas, svg");
+        if (canvas) {
+          canvas.remove();
+        }
+      }
+    };
+  }, []);
+  (0, import_react.useEffect)(() => {
+    if (!apiRef.current) return;
+    const api = apiRef.current;
+    const prev = prevPropsRef.current;
+    const nodesChanged = !shallowEqual(props.nodes, prev.nodes);
+    const edgesChanged = !shallowEqual(props.edges, prev.edges);
+    if (nodesChanged || edgesChanged) {
+      if (props.nodes) {
+        api.replaceSnapshot(props.nodes, props.edges || [], void 0);
+      }
+      prevPropsRef.current = { ...prevPropsRef.current, nodes: props.nodes, edges: props.edges };
+      return;
+    }
+    if (props.history !== prev.history) {
+      if (props.history === void 0) {
+        if (props.nodes) {
+          api.replaceSnapshot(props.nodes, props.edges || [], void 0);
+        }
+        prevPropsRef.current = { ...prevPropsRef.current, history: props.history };
+        return;
+      }
+      if (prev.history && isHistoryAppended(prev.history, props.history)) {
+        const prevLength = prev.history.length;
+        const newFrames = props.history.slice(prevLength);
+        for (const frame of newFrames) {
+          api.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 {
+        api.replaceHistory(props.history);
+      }
+      prevPropsRef.current = { ...prevPropsRef.current, history: props.history };
+    }
+  }, [props.nodes, props.edges, props.history]);
+  (0, import_react.useEffect)(() => {
+    if (!apiRef.current) return;
+    const api = apiRef.current;
+    const prev = prevPropsRef.current.options;
+    const curr = props.options;
+    const prevCanvas = prev?.canvas;
+    const currCanvas = curr?.canvas;
+    const colorModeChanged = prevCanvas?.colorMode !== currCanvas?.colorMode;
+    if (colorModeChanged && currCanvas?.colorMode) {
+      api.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) {
+      api.updateStyles({
+        theme: currCanvas?.theme,
+        nodeTypes: currCanvas?.nodeTypes,
+        edgeTypes: currCanvas?.edgeTypes
+      });
+    }
+    prevPropsRef.current = { ...prevPropsRef.current, options: props.options };
+  }, [props.options]);
+  return /* @__PURE__ */ import_react.default.createElement("div", { ref: rootRef, style: { width: "100%", height: "100%" } });
+}
+function shallowEqual(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;
+        }
+      } else {
+        return false;
+      }
+    }
+  }
+  return true;
+}
+function isHistoryAppended(oldHistory, newHistory) {
+  if (newHistory.length < oldHistory.length) return false;
+  for (let i = 0; i < oldHistory.length; i++) {
+    if (!shallowEqualUpdates(oldHistory[i], newHistory[i])) {
+      return false;
+    }
+  }
+  return true;
+}
+function shallowEqualUpdates(a, b) {
+  if (a === b) return true;
+  if (a.description !== b.description) return false;
+  if (!shallowEqual(a.addNodes, b.addNodes)) return false;
+  if (!shallowEqual(a.removeNodes, b.removeNodes)) return false;
+  if (!shallowEqual(a.updateNodes, b.updateNodes)) return false;
+  if (!shallowEqual(a.addEdges, b.addEdges)) return false;
+  if (!shallowEqual(a.removeEdges, b.removeEdges)) return false;
+  if (!shallowEqual(a.updateEdges, b.updateEdges)) return false;
+  return true;
+}
+
+// src/Playground.tsx
+var import_react2 = __toESM(require("react"));
+var import_graph_core2 = require("@3plate/graph-core");
+function Playground(props) {
+  const rootRef = (0, import_react2.useRef)(null);
+  const playgroundRef = (0, import_react2.useRef)(null);
+  const rootIdRef = (0, import_react2.useRef)(`playground-${Math.random().toString(36).slice(2, 11)}`);
+  const prevExamplesRef = (0, import_react2.useRef)({});
+  (0, import_react2.useEffect)(() => {
+    if (!rootRef.current || playgroundRef.current) return;
+    rootRef.current.id = rootIdRef.current;
+    const playground = new import_graph_core2.Playground({
+      root: rootIdRef.current,
+      examples: props.examples,
+      defaultExample: props.defaultExample
+    });
+    playgroundRef.current = playground;
+    prevExamplesRef.current = { ...props.examples };
+    playground.init();
+    return () => {
+      playgroundRef.current = null;
+    };
+  }, []);
+  (0, import_react2.useEffect)(() => {
+    if (!playgroundRef.current) return;
+    const playground = playgroundRef.current;
+    const prev = prevExamplesRef.current;
+    const current = props.examples;
+    const allKeys = /* @__PURE__ */ new Set([...Object.keys(prev), ...Object.keys(current)]);
+    for (const key of allKeys) {
+      const prevExample = prev[key];
+      const currentExample = current[key];
+      if (!prevExample && currentExample) {
+        playground.addExample(key, currentExample);
+      } else if (prevExample && !currentExample) {
+        playground.removeExample(key);
+      } else if (prevExample && currentExample && !shallowEqualExample(prevExample, currentExample)) {
+        playground.addExample(key, currentExample);
+      }
+    }
+    prevExamplesRef.current = { ...current };
+  }, [props.examples]);
+  return /* @__PURE__ */ import_react2.default.createElement("div", { ref: rootRef, style: { width: "100%", height: "100%" } });
+}
+function shallowEqualExample(a, b) {
+  if (a === b) return true;
+  if (a.name !== b.name) return false;
+  if (a.description !== b.description) return false;
+  if (!shallowEqualArray(a.nodes, b.nodes)) return false;
+  if (!shallowEqualArray(a.edges, b.edges)) return false;
+  if (!shallowEqualOptions(a.options, b.options)) return false;
+  if (!shallowEqualSource(a.source, b.source)) return false;
+  return true;
+}
+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]) return false;
+  }
+  return true;
+}
+function shallowEqualOptions(a, b) {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  return a === b;
+}
+function shallowEqualSource(a, b) {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  if (a.type !== b.type) return false;
+  if (a.type === "file" && b.type === "file") {
+    return a.path === b.path;
+  }
+  if (a.type === "websocket" && b.type === "websocket") {
+    return a.url === b.url;
+  }
+  return false;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Graph,
+  Playground
+});

package/dist/index.mjs

@@ -0,0 +1,233 @@
+// src/Graph.tsx
+import React, { useEffect, useRef } from "react";
+import { graph } from "@3plate/graph-core";
+function Graph(props) {
+  const rootRef = useRef(null);
+  const apiRef = useRef(null);
+  const rootIdRef = useRef(`graph-${Math.random().toString(36).slice(2, 11)}`);
+  const prevPropsRef = useRef({});
+  useEffect(() => {
+    if (!rootRef.current || apiRef.current) return;
+    rootRef.current.id = rootIdRef.current;
+    prevPropsRef.current = {
+      nodes: props.nodes,
+      edges: props.edges,
+      history: props.history,
+      options: props.options
+    };
+    graph({
+      root: rootIdRef.current,
+      nodes: props.nodes,
+      edges: props.edges,
+      history: props.history,
+      options: props.options,
+      events: props.events
+    }).then((api) => {
+      apiRef.current = api;
+    });
+    return () => {
+      if (apiRef.current) {
+        apiRef.current.destroy();
+        apiRef.current = null;
+      }
+      if (rootRef.current) {
+        const canvas = rootRef.current.querySelector("canvas, svg");
+        if (canvas) {
+          canvas.remove();
+        }
+      }
+    };
+  }, []);
+  useEffect(() => {
+    if (!apiRef.current) return;
+    const api = apiRef.current;
+    const prev = prevPropsRef.current;
+    const nodesChanged = !shallowEqual(props.nodes, prev.nodes);
+    const edgesChanged = !shallowEqual(props.edges, prev.edges);
+    if (nodesChanged || edgesChanged) {
+      if (props.nodes) {
+        api.replaceSnapshot(props.nodes, props.edges || [], void 0);
+      }
+      prevPropsRef.current = { ...prevPropsRef.current, nodes: props.nodes, edges: props.edges };
+      return;
+    }
+    if (props.history !== prev.history) {
+      if (props.history === void 0) {
+        if (props.nodes) {
+          api.replaceSnapshot(props.nodes, props.edges || [], void 0);
+        }
+        prevPropsRef.current = { ...prevPropsRef.current, history: props.history };
+        return;
+      }
+      if (prev.history && isHistoryAppended(prev.history, props.history)) {
+        const prevLength = prev.history.length;
+        const newFrames = props.history.slice(prevLength);
+        for (const frame of newFrames) {
+          api.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 {
+        api.replaceHistory(props.history);
+      }
+      prevPropsRef.current = { ...prevPropsRef.current, history: props.history };
+    }
+  }, [props.nodes, props.edges, props.history]);
+  useEffect(() => {
+    if (!apiRef.current) return;
+    const api = apiRef.current;
+    const prev = prevPropsRef.current.options;
+    const curr = props.options;
+    const prevCanvas = prev?.canvas;
+    const currCanvas = curr?.canvas;
+    const colorModeChanged = prevCanvas?.colorMode !== currCanvas?.colorMode;
+    if (colorModeChanged && currCanvas?.colorMode) {
+      api.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) {
+      api.updateStyles({
+        theme: currCanvas?.theme,
+        nodeTypes: currCanvas?.nodeTypes,
+        edgeTypes: currCanvas?.edgeTypes
+      });
+    }
+    prevPropsRef.current = { ...prevPropsRef.current, options: props.options };
+  }, [props.options]);
+  return /* @__PURE__ */ React.createElement("div", { ref: rootRef, style: { width: "100%", height: "100%" } });
+}
+function shallowEqual(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;
+        }
+      } else {
+        return false;
+      }
+    }
+  }
+  return true;
+}
+function isHistoryAppended(oldHistory, newHistory) {
+  if (newHistory.length < oldHistory.length) return false;
+  for (let i = 0; i < oldHistory.length; i++) {
+    if (!shallowEqualUpdates(oldHistory[i], newHistory[i])) {
+      return false;
+    }
+  }
+  return true;
+}
+function shallowEqualUpdates(a, b) {
+  if (a === b) return true;
+  if (a.description !== b.description) return false;
+  if (!shallowEqual(a.addNodes, b.addNodes)) return false;
+  if (!shallowEqual(a.removeNodes, b.removeNodes)) return false;
+  if (!shallowEqual(a.updateNodes, b.updateNodes)) return false;
+  if (!shallowEqual(a.addEdges, b.addEdges)) return false;
+  if (!shallowEqual(a.removeEdges, b.removeEdges)) return false;
+  if (!shallowEqual(a.updateEdges, b.updateEdges)) return false;
+  return true;
+}
+
+// src/Playground.tsx
+import React2, { useEffect as useEffect2, useRef as useRef2 } from "react";
+import { Playground as PlaygroundClass } from "@3plate/graph-core";
+function Playground(props) {
+  const rootRef = useRef2(null);
+  const playgroundRef = useRef2(null);
+  const rootIdRef = useRef2(`playground-${Math.random().toString(36).slice(2, 11)}`);
+  const prevExamplesRef = useRef2({});
+  useEffect2(() => {
+    if (!rootRef.current || playgroundRef.current) return;
+    rootRef.current.id = rootIdRef.current;
+    const playground = new PlaygroundClass({
+      root: rootIdRef.current,
+      examples: props.examples,
+      defaultExample: props.defaultExample
+    });
+    playgroundRef.current = playground;
+    prevExamplesRef.current = { ...props.examples };
+    playground.init();
+    return () => {
+      playgroundRef.current = null;
+    };
+  }, []);
+  useEffect2(() => {
+    if (!playgroundRef.current) return;
+    const playground = playgroundRef.current;
+    const prev = prevExamplesRef.current;
+    const current = props.examples;
+    const allKeys = /* @__PURE__ */ new Set([...Object.keys(prev), ...Object.keys(current)]);
+    for (const key of allKeys) {
+      const prevExample = prev[key];
+      const currentExample = current[key];
+      if (!prevExample && currentExample) {
+        playground.addExample(key, currentExample);
+      } else if (prevExample && !currentExample) {
+        playground.removeExample(key);
+      } else if (prevExample && currentExample && !shallowEqualExample(prevExample, currentExample)) {
+        playground.addExample(key, currentExample);
+      }
+    }
+    prevExamplesRef.current = { ...current };
+  }, [props.examples]);
+  return /* @__PURE__ */ React2.createElement("div", { ref: rootRef, style: { width: "100%", height: "100%" } });
+}
+function shallowEqualExample(a, b) {
+  if (a === b) return true;
+  if (a.name !== b.name) return false;
+  if (a.description !== b.description) return false;
+  if (!shallowEqualArray(a.nodes, b.nodes)) return false;
+  if (!shallowEqualArray(a.edges, b.edges)) return false;
+  if (!shallowEqualOptions(a.options, b.options)) return false;
+  if (!shallowEqualSource(a.source, b.source)) return false;
+  return true;
+}
+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]) return false;
+  }
+  return true;
+}
+function shallowEqualOptions(a, b) {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  return a === b;
+}
+function shallowEqualSource(a, b) {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  if (a.type !== b.type) return false;
+  if (a.type === "file" && b.type === "file") {
+    return a.path === b.path;
+  }
+  if (a.type === "websocket" && b.type === "websocket") {
+    return a.url === b.url;
+  }
+  return false;
+}
+export {
+  Graph,
+  Playground
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@3plate/graph-react",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "license": "GPL-3.0",
   "repository": {
     "type": "git",
@@ -21,16 +21,23 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@3plate/graph-core": "0.1.5"
+    "@3plate/graph-core": "0.1.7"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.5.2",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
+    "jsdom": "^25.0.1",
     "tsup": "^8.5.1",
-    "typescript": "^5.9.3"
+    "typescript": "^5.9.3",
+    "vitest": "^2.1.8"
   },
   "scripts": {
     "build": "tsup src/index.ts --format cjs,esm --dts --external react --external react-dom",
-    "dev": "tsup src/index.ts --format cjs,esm --dts --watch --external react --external react-dom"
+    "dev": "tsup src/index.ts --format cjs,esm --dts --watch --external react --external react-dom",
+    "test": "vitest run",
+    "test:watch": "vitest"
   }
 }