@3plate/graph-vue 0.1.9 → 0.1.12

package/README.md

@@ -159,14 +159,14 @@ function addNode() {
 
 ## Props
 
-| Prop | Type | Description |
-|------|------|-------------|
-| `nodes` | `N[]` | Array of node objects |
-| `edges` | `E[]` | Array of edge objects |
-| `history` | `Update<N, E>[]` | History frames for time-travel |
+| Prop        | Type              | Description                     |
+|-------------|-------------------|---------------------------------|
+| `nodes`     | `N[]`             | Array of node objects           |
+| `edges`     | `E[]`             | Array of edge objects           |
+| `history`   | `Update<N, E>[]`  | History updates for time-travel |
 | `ingestion` | `IngestionConfig` | WebSocket or file source config |
-| `options` | `APIOptions` | Graph and canvas options |
-| `events` | `EventsOptions` | Event handlers |
+| `options`   | `APIOptions`      | Graph and canvas options        |
+| `events`    | `EventsOptions`   | Event handlers                  |
 
 ### Playground Component
 
@@ -215,7 +215,7 @@ const examples = {
 ## Features
 
 - **Reactive updates** — Props changes are efficiently diffed and applied
-- **Incremental history** — Appended history frames are applied incrementally
+- **Incremental history** — Appended history updates are applied incrementally
 - **Style updates** — Theme and type changes are applied without re-render
 - **Color mode** — Light/dark mode changes are applied instantly
 - **Cleanup** — Resources are properly cleaned up on unmount

package/dist/{index.mjs → index.cjs}

@@ -1,7 +1,34 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __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.ts
-import { defineComponent, ref, onMounted, onUnmounted, watch, h } from "vue";
-import { graph } from "@3plate/graph-core";
-var Graph = defineComponent({
+var import_vue = require("vue");
+var import_graph_core = require("@3plate/graph-core");
+var Graph = (0, import_vue.defineComponent)({
   name: "Graph",
   props: {
     /** Initial nodes */
@@ -36,13 +63,13 @@ var Graph = defineComponent({
     }
   },
   setup(props) {
-    const rootRef = ref(null);
-    const apiRef = ref(null);
+    const rootRef = (0, import_vue.ref)(null);
+    const apiRef = (0, import_vue.ref)(null);
     const rootId = `graph-${Math.random().toString(36).slice(2, 11)}`;
-    onMounted(async () => {
+    (0, import_vue.onMounted)(async () => {
       if (!rootRef.value) return;
       rootRef.value.id = rootId;
-      const api = await graph({
+      const api = await (0, import_graph_core.graph)({
         root: rootId,
         nodes: props.nodes,
         edges: props.edges,
@@ -53,7 +80,7 @@ var Graph = defineComponent({
       });
       apiRef.value = api;
     });
-    onUnmounted(() => {
+    (0, import_vue.onUnmounted)(() => {
       if (apiRef.value) {
         apiRef.value.destroy();
         apiRef.value = null;
@@ -65,7 +92,7 @@ var Graph = defineComponent({
         }
       }
     });
-    watch(
+    (0, import_vue.watch)(
       () => [props.nodes, props.edges, props.history, props.options],
       () => {
         if (!apiRef.value) return;
@@ -73,7 +100,7 @@ var Graph = defineComponent({
       },
       { deep: true }
     );
-    return () => h("div", {
+    return () => (0, import_vue.h)("div", {
       ref: rootRef,
       style: { width: "100%", height: "100%" }
     });
@@ -81,9 +108,9 @@ var Graph = defineComponent({
 });
 
 // src/Playground.ts
-import { defineComponent as defineComponent2, ref as ref2, onMounted as onMounted2, onUnmounted as onUnmounted2, watch as watch2, h as h2 } from "vue";
-import { Playground as PlaygroundClass } from "@3plate/graph-core";
-var Playground = defineComponent2({
+var import_vue2 = require("vue");
+var import_graph_core2 = require("@3plate/graph-core");
+var Playground = (0, import_vue2.defineComponent)({
   name: "Playground",
   props: {
     /** Examples to display */
@@ -98,14 +125,14 @@ var Playground = defineComponent2({
     }
   },
   setup(props) {
-    const rootRef = ref2(null);
-    const playgroundRef = ref2(null);
+    const rootRef = (0, import_vue2.ref)(null);
+    const playgroundRef = (0, import_vue2.ref)(null);
     const rootId = `playground-${Math.random().toString(36).slice(2, 11)}`;
-    const prevExamples = ref2({});
-    onMounted2(async () => {
+    const prevExamples = (0, import_vue2.ref)({});
+    (0, import_vue2.onMounted)(async () => {
       if (!rootRef.value) return;
       rootRef.value.id = rootId;
-      const playground = new PlaygroundClass({
+      const playground = new import_graph_core2.Playground({
         root: rootId,
         examples: props.examples,
         defaultExample: props.defaultExample
@@ -114,10 +141,10 @@ var Playground = defineComponent2({
       prevExamples.value = { ...props.examples };
       await playground.init();
     });
-    onUnmounted2(() => {
+    (0, import_vue2.onUnmounted)(() => {
       playgroundRef.value = null;
     });
-    watch2(
+    (0, import_vue2.watch)(
       () => props.examples,
       (current) => {
         if (!playgroundRef.value) return;
@@ -139,7 +166,7 @@ var Playground = defineComponent2({
       },
       { deep: true }
     );
-    return () => h2("div", {
+    return () => (0, import_vue2.h)("div", {
       ref: rootRef,
       style: { width: "100%", height: "100%" }
     });
@@ -181,7 +208,8 @@ function shallowEqualSource(a, b) {
   }
   return false;
 }
-export {
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
   Graph,
   Playground
-};
+});

package/dist/{index.d.mts → index.d.cts}

@@ -1,6 +1,6 @@
 import * as _3plate_graph_core from '@3plate/graph-core';
 import { Update, IngestionConfig, APIArguments, PlaygroundOptions } from '@3plate/graph-core';
-export { API, APIArguments, IngestionConfig, Update } from '@3plate/graph-core';
+export { API, APIArguments, APIOptions, CanvasTheme, ColorMode, EdgeProps, EdgeTheme, EventsOptions, HistoryMessage, IngestMessage, IngestionConfig, NewEdge, NewNode, NodeAlign, NodeProps, NodeTheme, Orientation, PortProps, PortStyle, PortTheme, RenderNode, SnapshotMessage, ThemeVars, Update, UpdateMessage, WebSocketStatus, WebSocketStatusListener } from '@3plate/graph-core';
 import * as vue from 'vue';
 import { PropType } from 'vue';
 

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as _3plate_graph_core from '@3plate/graph-core';
 import { Update, IngestionConfig, APIArguments, PlaygroundOptions } from '@3plate/graph-core';
-export { API, APIArguments, IngestionConfig, Update } from '@3plate/graph-core';
+export { API, APIArguments, APIOptions, CanvasTheme, ColorMode, EdgeProps, EdgeTheme, EventsOptions, HistoryMessage, IngestMessage, IngestionConfig, NewEdge, NewNode, NodeAlign, NodeProps, NodeTheme, Orientation, PortProps, PortStyle, PortTheme, RenderNode, SnapshotMessage, ThemeVars, Update, UpdateMessage, WebSocketStatus, WebSocketStatusListener } from '@3plate/graph-core';
 import * as vue from 'vue';
 import { PropType } from 'vue';
 

package/dist/index.js

@@ -1,34 +1,7 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-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 __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.ts
-var import_vue = require("vue");
-var import_graph_core = require("@3plate/graph-core");
-var Graph = (0, import_vue.defineComponent)({
+import { defineComponent, ref, onMounted, onUnmounted, watch, h } from "vue";
+import { graph } from "@3plate/graph-core";
+var Graph = defineComponent({
   name: "Graph",
   props: {
     /** Initial nodes */
@@ -63,13 +36,13 @@ var Graph = (0, import_vue.defineComponent)({
     }
   },
   setup(props) {
-    const rootRef = (0, import_vue.ref)(null);
-    const apiRef = (0, import_vue.ref)(null);
+    const rootRef = ref(null);
+    const apiRef = ref(null);
     const rootId = `graph-${Math.random().toString(36).slice(2, 11)}`;
-    (0, import_vue.onMounted)(async () => {
+    onMounted(async () => {
       if (!rootRef.value) return;
       rootRef.value.id = rootId;
-      const api = await (0, import_graph_core.graph)({
+      const api = await graph({
         root: rootId,
         nodes: props.nodes,
         edges: props.edges,
@@ -80,7 +53,7 @@ var Graph = (0, import_vue.defineComponent)({
       });
       apiRef.value = api;
     });
-    (0, import_vue.onUnmounted)(() => {
+    onUnmounted(() => {
       if (apiRef.value) {
         apiRef.value.destroy();
         apiRef.value = null;
@@ -92,7 +65,7 @@ var Graph = (0, import_vue.defineComponent)({
         }
       }
     });
-    (0, import_vue.watch)(
+    watch(
       () => [props.nodes, props.edges, props.history, props.options],
       () => {
         if (!apiRef.value) return;
@@ -100,7 +73,7 @@ var Graph = (0, import_vue.defineComponent)({
       },
       { deep: true }
     );
-    return () => (0, import_vue.h)("div", {
+    return () => h("div", {
       ref: rootRef,
       style: { width: "100%", height: "100%" }
     });
@@ -108,9 +81,9 @@ var Graph = (0, import_vue.defineComponent)({
 });
 
 // src/Playground.ts
-var import_vue2 = require("vue");
-var import_graph_core2 = require("@3plate/graph-core");
-var Playground = (0, import_vue2.defineComponent)({
+import { defineComponent as defineComponent2, ref as ref2, onMounted as onMounted2, onUnmounted as onUnmounted2, watch as watch2, h as h2 } from "vue";
+import { Playground as PlaygroundClass } from "@3plate/graph-core";
+var Playground = defineComponent2({
   name: "Playground",
   props: {
     /** Examples to display */
@@ -125,14 +98,14 @@ var Playground = (0, import_vue2.defineComponent)({
     }
   },
   setup(props) {
-    const rootRef = (0, import_vue2.ref)(null);
-    const playgroundRef = (0, import_vue2.ref)(null);
+    const rootRef = ref2(null);
+    const playgroundRef = ref2(null);
     const rootId = `playground-${Math.random().toString(36).slice(2, 11)}`;
-    const prevExamples = (0, import_vue2.ref)({});
-    (0, import_vue2.onMounted)(async () => {
+    const prevExamples = ref2({});
+    onMounted2(async () => {
       if (!rootRef.value) return;
       rootRef.value.id = rootId;
-      const playground = new import_graph_core2.Playground({
+      const playground = new PlaygroundClass({
         root: rootId,
         examples: props.examples,
         defaultExample: props.defaultExample
@@ -141,10 +114,10 @@ var Playground = (0, import_vue2.defineComponent)({
       prevExamples.value = { ...props.examples };
       await playground.init();
     });
-    (0, import_vue2.onUnmounted)(() => {
+    onUnmounted2(() => {
       playgroundRef.value = null;
     });
-    (0, import_vue2.watch)(
+    watch2(
       () => props.examples,
       (current) => {
         if (!playgroundRef.value) return;
@@ -166,7 +139,7 @@ var Playground = (0, import_vue2.defineComponent)({
       },
       { deep: true }
     );
-    return () => (0, import_vue2.h)("div", {
+    return () => h2("div", {
       ref: rootRef,
       style: { width: "100%", height: "100%" }
     });
@@ -208,8 +181,7 @@ function shallowEqualSource(a, b) {
   }
   return false;
 }
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
+export {
   Graph,
   Playground
-});
+};

package/package.json

@@ -1,15 +1,23 @@
 {
   "name": "@3plate/graph-vue",
-  "version": "0.1.9",
+  "version": "0.1.12",
+  "type": "module",
   "license": "GPL-3.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/3plt/graph",
     "directory": "packages/vue"
   },
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
   "files": [
     "dist"
   ],
@@ -20,7 +28,7 @@
     "vue": "^3.3.0"
   },
   "dependencies": {
-    "@3plate/graph-core": "0.1.9"
+    "@3plate/graph-core": "0.1.12"
   },
   "devDependencies": {
     "tsup": "^8.5.1",