@eventcatalog/core 2.3.3 → 2.4.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @eventcatalog/core
 
+## 2.4.0
+
+### Minor Changes
+
+- 3a4b8ec: feat(c0re): add semantic version support, referencing services or messages can now be done with semver
+
+## 2.3.4
+
+### Patch Changes
+
+- a99057e: feat(core): added ability to drag nodes in visualizer
+
 ## 2.3.3
 
 ### Patch Changes

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eventcatalog/core",
   "type": "module",
-  "version": "2.3.3",
+  "version": "2.4.0",
   "publishConfig": {
     "access": "public"
   },
@@ -55,9 +55,10 @@
     "rapidoc": "^9.3.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "reactflow": "^11.11.3",
+    "reactflow": "^11.11.4",
     "rehype-slug": "^6.0.0",
     "remark-gfm": "^3.0.1",
+    "semver": "7.6.3",
     "tailwindcss": "^3.4.3",
     "typescript": "^5.4.5",
     "unist-util-visit": "^5.0.0"

package/src/components/MDX/NodeGraph/NodeGraph.tsx

@@ -1,6 +1,15 @@
 import { useEffect, useMemo, useState } from 'react';
 import { createPortal } from 'react-dom';
-import ReactFlow, { Background, ConnectionLineType, Controls, Panel, ReactFlowProvider, type Edge, type Node } from 'reactflow';
+import ReactFlow, {
+  Background,
+  ConnectionLineType,
+  Controls,
+  Panel,
+  ReactFlowProvider,
+  useNodesState,
+  type Edge,
+  type Node,
+} from 'reactflow';
 import 'reactflow/dist/style.css';
 import ServiceNode from './Nodes/Service';
 import EventNode from './Nodes/Event';
@@ -29,21 +38,18 @@ const getVisualiserUrlForCollection = (collectionItem: CollectionEntry<Collectio
 };
 
 // const NodeGraphBuilder = ({ title, subtitle, includeBackground = true, includeControls = true }: Props) => {
-const NodeGraphBuilder = ({ nodes, edges, title, includeBackground = true, linkTo = 'docs' }: Props) => {
-  // const { fitView, viewportInitialized } = useReactFlow();
+const NodeGraphBuilder = ({ nodes: initialNodes, edges, title, includeBackground = true, linkTo = 'docs' }: Props) => {
+  const [nodes, _, onNodesChange] = useNodesState(initialNodes);
 
-  // const nodeTypes = useMemo(() => ({ service: ServiceNode, event: EventNode, command: CommandNode }), []);
   const nodeTypes = useMemo(() => ({ services: ServiceNode, events: EventNode, commands: CommandNode }), []);
   const nodeOrigin = [0.5, 0.5];
 
   const handleNodeClick = (_: any, node: Node) => {
     if (node.type === 'events' || node.type === 'commands') {
-      // return (window.location.href = linkTo === 'docs' ? getDocUrlForCollection(node.data.message) : getVisualiserUrlForCollection(node.data.message));
       navigate(linkTo === 'docs' ? getDocUrlForCollection(node.data.message) : getVisualiserUrlForCollection(node.data.message));
     }
     if (node.type === 'services') {
       navigate(linkTo === 'docs' ? getDocUrlForCollection(node.data.service) : getVisualiserUrlForCollection(node.data.service));
-      // return (window.location.href = linkTo === 'docs' ? getDocUrlForCollection(node.data.service) : getVisualiserUrlForCollection(node.data.service));
     }
   };
 
@@ -55,6 +61,7 @@ const NodeGraphBuilder = ({ nodes, edges, title, includeBackground = true, linkT
       edges={edges}
       fitView
       nodesDraggable
+      onNodesChange={onNodesChange}
       connectionLineType={ConnectionLineType.SmoothStep}
       // @ts-ignore
       nodeOrigin={nodeOrigin}

package/src/content/config.ts

@@ -80,7 +80,7 @@ const commands = defineCollection({
 
 const pointer = z.object({
   id: z.string(),
-  version: z.string(),
+  version: z.string().optional().default('latest'),
 });
 
 const services = defineCollection({

package/src/utils/commands/node-graph.ts

@@ -13,7 +13,7 @@ interface Props {
 }
 
 export const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simple' }: Props) => {
-  const flow = defaultFlow || createDagreGraph({ ranksep: 180, nodesep: 50 });
+  const flow = defaultFlow || createDagreGraph({ ranksep: 300, nodesep: 50 });
   const nodes = [] as any,
     edges = [] as any;
 

package/src/utils/commands.ts

@@ -2,6 +2,7 @@ import { getCollection } from 'astro:content';
 import type { CollectionEntry } from 'astro:content';
 import path from 'path';
 import { getVersionForCollectionItem } from './collections/util';
+import { satisfies } from 'semver';
 
 const PROJECT_DIR = process.env.PROJECT_DIR || process.cwd();
 
@@ -29,16 +30,16 @@ export const getCommands = async ({ getAllVersions = true }: Props = {}): Promis
     const producers = services.filter((service) => {
       if (!service.data.sends) return false;
       return service.data.sends.find((item) => {
-        if (item.version) return item.id === command.data.id && item.version === command.data.version;
-        return item.id == command.data.id;
+        if (item.version) return item.id === command.data.id && satisfies(command.data.version, item.version);
+        return item.id == command.data.id; // ??
       });
     });
 
     const consumers = services.filter((service) => {
       if (!service.data.receives) return false;
       return service.data.receives.find((item) => {
-        if (item.version) return item.id === command.data.id && item.version === command.data.version;
-        return item.id == command.data.id;
+        if (item.version) return item.id === command.data.id && satisfies(command.data.version, item.version);
+        return item.id == command.data.id; // ??
       });
     });
 

package/src/utils/events/node-graph.ts

@@ -14,7 +14,7 @@ interface Props {
 }
 
 export const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simple' }: Props) => {
-  const flow = defaultFlow || createDagreGraph({ ranksep: 180, nodesep: 50 });
+  const flow = defaultFlow || createDagreGraph({ ranksep: 300, nodesep: 50 });
   const nodes = [] as any,
     edges = [] as any;
 

package/src/utils/events.ts

@@ -2,6 +2,7 @@ import { getCollection } from 'astro:content';
 import type { CollectionEntry } from 'astro:content';
 import path from 'path';
 import { getVersionForCollectionItem } from './collections/util';
+import { satisfies } from 'semver';
 
 const PROJECT_DIR = process.env.PROJECT_DIR || process.cwd();
 
@@ -30,14 +31,14 @@ export const getEvents = async ({ getAllVersions = true }: Props = {}): Promise<
     const producers = services.filter((service) => {
       if (!service.data.sends) return false;
       return service.data.sends.find((item) => {
-        return item.id === event.data.id && item.version === event.data.version;
+        return item.id === event.data.id && satisfies(event.data.version, item.version);
       });
     });
 
     const consumers = services.filter((service) => {
       if (!service.data.receives) return false;
       return service.data.receives.find((item) => {
-        return item.id === event.data.id && item.version === event.data.version;
+        return item.id === event.data.id && satisfies(event.data.version, item.version);
 
         // If no version has been found, then get try find the latest one
         // return item.id == event.data.id

package/src/utils/services/node-graph.ts

@@ -15,7 +15,7 @@ interface Props {
 }
 
 export const getNodesAndEdges = async ({ id, defaultFlow, version, mode = 'simple', renderAllEdges = false }: Props) => {
-  const flow = defaultFlow || createDagreGraph({ ranksep: 200, nodesep: 50 });
+  const flow = defaultFlow || createDagreGraph({ ranksep: 300, nodesep: 50 });
   const nodes = [] as any,
     edges = [] as any;
 
@@ -40,16 +40,13 @@ export const getNodesAndEdges = async ({ id, defaultFlow, version, mode = 'simpl
   const messages = [...events, ...commands];
 
   const receivesHydrated = receivesRaw
-    .map((message) => {
-      return getVersion(messages, message.id, message.version);
-    })
+    .map((message) => getVersion(messages, message.id, message.version))
+    .flat()
     .filter((e) => e !== undefined);
 
   const sendsHydrated = sendsRaw
-    .map((message) => {
-      return getVersion(messages, message.id, message.version);
-      // return messages.find((message) => message.data.id === messageId);
-    })
+    .map((message) => getVersion(messages, message.id, message.version))
+    .flat()
     .filter((e) => e !== undefined);
 
   const receives = (receivesHydrated as CollectionEntry<'events' | 'commands'>[]) || [];

package/src/utils/services/services.ts

@@ -1,16 +1,23 @@
-import { getVersionForCollectionItem, getVersions } from '@utils/collections/util';
+import { getVersionForCollectionItem } from '@utils/collections/util';
 import { getCollection } from 'astro:content';
 import type { CollectionEntry } from 'astro:content';
 import path from 'path';
+import { satisfies, validRange } from 'semver';
 
 const PROJECT_DIR = process.env.PROJECT_DIR || process.cwd();
 
 export type Service = CollectionEntry<'services'>;
 
-export const getVersion = (collection: CollectionEntry<'events' | 'commands'>[], id: string, version?: string) => {
+export const getVersion = (
+  collection: CollectionEntry<'events' | 'commands'>[],
+  id: string,
+  version?: string
+): CollectionEntry<'events' | 'commands'>[] => {
   const data = collection;
-  if (version) {
-    return data.find((event) => event.data.version === version && event.data.id === id);
+  const semverRange = validRange(version);
+
+  if (semverRange) {
+    return data.filter((msg) => msg.data.id == id).filter((msg) => satisfies(msg.data.version, semverRange));
   }
 
   const filteredEvents = data.filter((event) => event.data.id === id);
@@ -21,7 +28,7 @@ export const getVersion = (collection: CollectionEntry<'events' | 'commands'>[],
   });
 
   // latest version
-  return sorted[sorted.length - 1];
+  return [sorted[sorted.length - 1]];
 };
 
 interface Props {
@@ -42,24 +49,17 @@ export const getServices = async ({ getAllVersions = true }: Props = {}): Promis
   return services.map((service) => {
     const { latestVersion, versions } = getVersionForCollectionItem(service, services);
 
-    // const receives = service.data.receives || [];
     const sendsMessages = service.data.sends || [];
     const receivesMessages = service.data.receives || [];
 
     const sends = sendsMessages
-      .map((message) => {
-        const event = getVersion(allMessages, message.id, message.version);
-        // const event = allMessages.find((_message) => _message.data.id === message.id && _message.data.version === message.version);
-        return event;
-      })
+      .map((message) => getVersion(allMessages, message.id, message.version))
+      .flat()
       .filter((e) => e !== undefined);
 
     const receives = receivesMessages
-      .map((message) => {
-        const event = getVersion(allMessages, message.id, message.version);
-        // const event = allMessages.find((_message) => _message.data.id === message.id && _message.data.version === message.version);
-        return event;
-      })
+      .map((message) => getVersion(allMessages, message.id, message.version))
+      .flat()
       .filter((e) => e !== undefined);
 
     return {