@3plate/graph-react 0.1.6 → 0.1.9

package/dist/index.d.mts

@@ -1,2 +1,35 @@
+import React from 'react';
+import { Update, IngestionConfig, 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>[];
+    /** Ingestion source configuration (alternative to nodes/edges/history) */
+    ingestion?: IngestionConfig;
+    /** 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,35 @@
+import React from 'react';
+import { Update, IngestionConfig, 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>[];
+    /** Ingestion source configuration (alternative to nodes/edges/history) */
+    ingestion?: IngestionConfig;
+    /** 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,163 @@
 "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)}`);
+  (0, import_react.useEffect)(() => {
+    if (!rootRef.current || apiRef.current) return;
+    rootRef.current.id = rootIdRef.current;
+    (0, import_graph_core.graph)({
+      root: rootIdRef.current,
+      nodes: props.nodes,
+      edges: props.edges,
+      history: props.history,
+      ingestion: props.ingestion,
+      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;
+    apiRef.current.applyProps(props);
+  }, [props.nodes, props.edges, props.history, props.options]);
+  return /* @__PURE__ */ import_react.default.createElement("div", { ref: rootRef, style: { width: "100%", height: "100%" } });
+}
+
+// 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,125 @@
+// 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)}`);
+  useEffect(() => {
+    if (!rootRef.current || apiRef.current) return;
+    rootRef.current.id = rootIdRef.current;
+    graph({
+      root: rootIdRef.current,
+      nodes: props.nodes,
+      edges: props.edges,
+      history: props.history,
+      ingestion: props.ingestion,
+      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;
+    apiRef.current.applyProps(props);
+  }, [props.nodes, props.edges, props.history, props.options]);
+  return /* @__PURE__ */ React.createElement("div", { ref: rootRef, style: { width: "100%", height: "100%" } });
+}
+
+// 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.6",
+  "version": "0.1.9",
   "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.6"
+    "@3plate/graph-core": "0.1.9"
   },
   "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"
   }
 }