@eventcatalog/core 2.14.3 → 2.15.0

package/dist/watcher.cjs

@@ -0,0 +1,223 @@
+"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/watcher.js
+var watcher_exports = {};
+__export(watcher_exports, {
+  watch: () => watch
+});
+module.exports = __toCommonJS(watcher_exports);
+var import_watcher = __toESM(require("@parcel/watcher"), 1);
+var import_node_fs2 = __toESM(require("fs"), 1);
+
+// src/map-catalog-to-astro.js
+var import_node_path = __toESM(require("path"), 1);
+var COLLECTION_KEYS = [
+  "events",
+  "commands",
+  "services",
+  "users",
+  "teams",
+  "domains",
+  "flows",
+  "pages",
+  "changelogs",
+  "queries",
+  "channels"
+];
+function mapCatalogToAstro({ filePath, astroDir, projectDir }) {
+  const relativeFilePath = removeBasePath(filePath, projectDir);
+  if (!isCatalogRelated(relativeFilePath)) {
+    return [];
+  }
+  const baseTargetPaths = getBaseTargetPaths(relativeFilePath);
+  const relativeTargetPath = getRelativeTargetPath(relativeFilePath);
+  return baseTargetPaths.map(
+    (base) => import_node_path.default.join(astroDir, base, relativeTargetPath.replace("index.md", "index.mdx").replace("changelog.md", "changelog.mdx"))
+  );
+}
+function removeBasePath(fullPath, basePath) {
+  const relativePath = import_node_path.default.relative(basePath, fullPath);
+  return relativePath.startsWith("..") ? fullPath : relativePath;
+}
+function isCollectionKey(key) {
+  return COLLECTION_KEYS.includes(key);
+}
+function isCatalogRelated(filePath) {
+  const filePathArr = filePath.split(import_node_path.default.sep).filter(Boolean);
+  if ([
+    "eventcatalog.config.js",
+    // config file at root
+    "eventcatalog.styles.css",
+    // custom styles file at root
+    "components",
+    // custom components
+    "public",
+    // public assets
+    ...COLLECTION_KEYS
+  ].includes(filePathArr[0])) {
+    return true;
+  }
+  return false;
+}
+function getBaseTargetPaths(filePath) {
+  const filePathArr = filePath.split(import_node_path.default.sep).filter(Boolean);
+  if (isCollectionKey(filePathArr[0])) {
+    if (filePathArr[filePathArr.length - 1] == "changelog.md") {
+      return [import_node_path.default.join("src", "content", "changelogs")];
+    }
+    if (filePathArr[filePathArr.length - 1].match(/\.md$/)) {
+      return [import_node_path.default.join("src", "content")];
+    }
+    const hasExtension = (str) => /\.[a-zA-Z0-9]{2,}$/.test(str);
+    if (hasExtension(filePath)) {
+      return [import_node_path.default.join("public", "generated"), import_node_path.default.join("src", "catalog-files")];
+    }
+    return [import_node_path.default.join("public", "generated"), import_node_path.default.join("src", "catalog-files"), import_node_path.default.join("src", "content")];
+  }
+  if (filePathArr[0] == "components") {
+    return [import_node_path.default.join("src", "custom-defined-components")];
+  }
+  if (filePathArr[0] == "public") {
+    return [import_node_path.default.join("public")];
+  }
+  return [import_node_path.default.join("/")];
+}
+function getRelativeTargetPath(filePath) {
+  const filePathArr = filePath.split(import_node_path.default.sep).filter(Boolean);
+  if (filePathArr[0] == "public" || filePathArr[0] == "components") {
+    filePathArr.shift();
+  }
+  const relativePath = [];
+  for (let i = filePathArr.length - 1; i >= 0; i--) {
+    relativePath.unshift(filePathArr[i]);
+    if (isCollectionKey(filePathArr[i])) break;
+  }
+  return import_node_path.default.join(...relativePath);
+}
+
+// src/watcher.js
+var import_rimraf = require("rimraf");
+
+// src/eventcatalog-config-file-utils.js
+var import_promises = require("fs/promises");
+var import_node_fs = require("fs");
+var import_promises2 = require("fs/promises");
+var import_node_path2 = __toESM(require("path"), 1);
+var import_uuid = require("uuid");
+var import_gray_matter = __toESM(require("gray-matter"), 1);
+function addPropertyToFrontMatter(input, newProperty, newValue) {
+  const file = (0, import_gray_matter.default)(input);
+  return import_gray_matter.default.stringify(file.content, { ...file.data, [newProperty]: newValue });
+}
+
+// src/watcher.js
+async function watch(projectDirectory, catalogDirectory, callback = void 0) {
+  const subscription = await import_watcher.default.subscribe(
+    projectDirectory,
+    compose(
+      /**
+       * @param {Error|null} err
+       * @param {Event[]} events
+       * @returns {unknown}
+       */
+      (err, events) => {
+        if (err) {
+          return;
+        }
+        for (let event of events) {
+          const { path: filePath, type } = event;
+          const astroPaths = mapCatalogToAstro({
+            filePath,
+            astroDir: catalogDirectory,
+            projectDir: projectDirectory
+          });
+          for (const astroPath of astroPaths) {
+            switch (type) {
+              case "create":
+              case "update":
+                try {
+                  if (astroPath.endsWith(".mdx")) {
+                    const content = import_node_fs2.default.readFileSync(astroPath, "utf-8");
+                    const frontmatter = addPropertyToFrontMatter(content, "pathToFile", filePath);
+                    import_node_fs2.default.writeFileSync(astroPath, frontmatter);
+                  }
+                } catch (error) {
+                }
+                if (import_node_fs2.default.statSync(filePath).isDirectory()) import_node_fs2.default.mkdirSync(astroPath, { recursive: true });
+                else retryEPERM(import_node_fs2.default.cpSync)(filePath, astroPath);
+                break;
+              case "delete":
+                retryEPERM(import_rimraf.rimrafSync)(astroPath);
+                break;
+            }
+          }
+        }
+      },
+      callback
+    ),
+    {
+      ignore: [`**/${catalogDirectory}/!(${projectDirectory})**`]
+    }
+  );
+  return () => subscription.unsubscribe();
+}
+function compose(...fns) {
+  return function(err, events) {
+    fns.filter(Boolean).forEach((fn, i) => {
+      try {
+        fn(err, events);
+      } catch (error) {
+        console.error({ error });
+        throw error;
+      }
+    });
+  };
+}
+var MAX_RETRIES = 5;
+var DELAY_MS = 100;
+function retryEPERM(fn) {
+  return (...args) => {
+    let retries = 0;
+    while (retries < MAX_RETRIES) {
+      try {
+        return fn(...args);
+      } catch (err) {
+        if (err.code !== "EPERM") throw err;
+        setTimeout(() => {
+        }, DELAY_MS);
+        retries += 1;
+      }
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  watch
+});

package/dist/watcher.d.cts

@@ -0,0 +1,21 @@
+/**
+ * @typedef {Object} Event
+ * @property {string} path
+ * @property {"create"|"update"|"delete"} type
+ *
+ * @typedef {(err: Error | null, events: Event[]) => unknown} SubscribeCallback
+ */
+/**
+ *
+ * @param {string} projectDirectory
+ * @param {string} catalogDirectory
+ * @param {SubscribeCallback|undefined} callback
+ */
+declare function watch(projectDirectory: string, catalogDirectory: string, callback?: SubscribeCallback | undefined): Promise<() => Promise<void>>;
+type Event = {
+    path: string;
+    type: "create" | "update" | "delete";
+};
+type SubscribeCallback = (err: Error | null, events: Event[]) => unknown;
+
+export { type Event, type SubscribeCallback, watch };

package/dist/watcher.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @typedef {Object} Event
+ * @property {string} path
+ * @property {"create"|"update"|"delete"} type
+ *
+ * @typedef {(err: Error | null, events: Event[]) => unknown} SubscribeCallback
+ */
+/**
+ *
+ * @param {string} projectDirectory
+ * @param {string} catalogDirectory
+ * @param {SubscribeCallback|undefined} callback
+ */
+declare function watch(projectDirectory: string, catalogDirectory: string, callback?: SubscribeCallback | undefined): Promise<() => Promise<void>>;
+type Event = {
+    path: string;
+    type: "create" | "update" | "delete";
+};
+type SubscribeCallback = (err: Error | null, events: Event[]) => unknown;
+
+export { type Event, type SubscribeCallback, watch };

package/dist/watcher.js

@@ -0,0 +1,8 @@
+import {
+  watch
+} from "./chunk-7HYM3M5I.js";
+import "./chunk-E7TXTI7G.js";
+import "./chunk-PK2EQVPD.js";
+export {
+  watch
+};

package/{src → eventcatalog/src}/components/MDX/NodeGraph/NodeGraph.tsx

@@ -11,9 +11,6 @@ import ReactFlow, {
   type Edge,
   type Node,
   useReactFlow,
-  getBezierPath,
-  BaseEdge,
-  SmoothStepEdge,
 } from 'reactflow';
 import 'reactflow/dist/style.css';
 
@@ -34,7 +31,7 @@ import DownloadButton from './DownloadButton';
 import { buildUrl } from '@utils/url-builder';
 import ChannelNode from './Nodes/Channel';
 import { CogIcon } from '@heroicons/react/20/solid';
-
+import { useEventCatalogVisualiser } from 'src/hooks/eventcatalog-visualizer';
 interface Props {
   nodes: any;
   edges: any;
@@ -85,7 +82,7 @@ const NodeGraphBuilder = ({
   const [isSettingsOpen, setIsSettingsOpen] = useState(false);
   const [isAnimated, setIsAnimated] = useState(false);
   const [animateMessages, setAnimateMessages] = useState(false);
-
+  const { hideChannels, toggleChannelsVisibility } = useEventCatalogVisualiser({ nodes, edges, setNodes, setEdges });
   const { fitView } = useReactFlow();
 
   const resetNodesAndEdges = useCallback(() => {
@@ -162,16 +159,6 @@ const NodeGraphBuilder = ({
     [nodes, edges, setNodes, setEdges, resetNodesAndEdges, fitView]
   );
 
-  const toggleAnimation = () => {
-    setIsAnimated(!isAnimated);
-    setEdges((eds) =>
-      eds.map((edge) => ({
-        ...edge,
-        animated: !isAnimated,
-      }))
-    );
-  };
-
   const toggleAnimateMessages = () => {
     setAnimateMessages(!animateMessages);
     localStorage.setItem('EventCatalog:animateMessages', JSON.stringify(!animateMessages));
@@ -196,6 +183,10 @@ const NodeGraphBuilder = ({
     );
   }, [animateMessages]);
 
+  useEffect(() => {
+    fitView({ duration: 800 });
+  }, [nodes, edges]);
+
   const handlePaneClick = useCallback(() => {
     setIsSettingsOpen(false);
     resetNodesAndEdges();
@@ -319,6 +310,27 @@ const NodeGraphBuilder = ({
               </div>
               <p className="text-[10px] text-gray-500">Animate events, queries and commands.</p>
             </div>
+            <div>
+              <div className="flex items-center justify-between">
+                <label htmlFor="message-animation-toggle" className="text-sm font-medium text-gray-700">
+                  Hide Channels
+                </label>
+                <button
+                  id="message-animation-toggle"
+                  onClick={toggleChannelsVisibility}
+                  className={`${
+                    hideChannels ? 'bg-purple-600' : 'bg-gray-200'
+                  } relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2`}
+                >
+                  <span
+                    className={`${
+                      hideChannels ? 'translate-x-6' : 'translate-x-1'
+                    } inline-block h-4 w-4 transform rounded-full bg-white transition-transform`}
+                  />
+                </button>
+              </div>
+              <p className="text-[10px] text-gray-500">Show or hide channels in the visualizer.</p>
+            </div>
           </div>
         </div>
       )}
@@ -341,29 +353,6 @@ const NodeGraphBuilder = ({
                 </li>
               ))}
             </ul>
-            {/* <span className="font-bold">Key</span> */}
-            {/* <ul className="m-0 p-0">
-              <li className="flex space-x-2 items-center text-[10px]">
-                <span className="w-2 h-2 bg-orange-500 block" />
-                <span className="block">Events</span>
-              </li>
-              <li className="flex space-x-2 items-center text-[10px]">
-                <span className="w-2 h-2 bg-pink-500 block" />
-                <span className="block">Service</span>
-              </li>
-              <li className="flex space-x-2 items-center text-[10px]">
-                <span className="w-2 h-2 bg-blue-500 block" />
-                <span className="block">Command</span>
-              </li>
-              <li className="flex space-x-2 items-center text-[10px]">
-                <span className="w-2 h-2 bg-green-500 block" />
-                <span className="block">Query</span>
-              </li>
-              <li className="flex space-x-2 items-center text-[10px]">
-                <span className="w-2 h-2 bg-gray-500 block" />
-                <span className="block">Channel</span>
-              </li>
-            </ul> */}
           </div>
         </Panel>
       )}

package/eventcatalog/src/hooks/eventcatalog-visualizer.ts

@@ -0,0 +1,89 @@
+import { useCallback, useMemo, useState, useEffect } from 'react';
+import { type Edge, type Node } from 'reactflow';
+import {
+  createEdge,
+  generatedIdForEdge,
+  generateIdForNode,
+  getEdgeLabelForMessageAsSource,
+  getEdgeLabelForServiceAsTarget,
+  getNodesAndEdgesFromDagre,
+} from '@utils/node-graphs/utils/utils';
+
+interface EventCatalogVisualizerProps {
+  nodes: Node[];
+  edges: Edge[];
+  setNodes: (nodes: Node[]) => void;
+  setEdges: (edges: Edge[]) => void;
+}
+
+export const useEventCatalogVisualiser = ({ nodes, edges, setNodes, setEdges }: EventCatalogVisualizerProps) => {
+  const [hideChannels, setHideChannels] = useState(false);
+  const [initialNodes] = useState(nodes);
+  const [initialEdges] = useState(edges);
+
+  // Initialize hideChannels from localStorage
+  useEffect(() => {
+    const storedHideChannels = localStorage.getItem('EventCatalog:hideChannels');
+    if (storedHideChannels !== null) {
+      setHideChannels(storedHideChannels === 'true');
+    }
+  }, []);
+
+  const toggleChannelsVisibility = useCallback(() => {
+    setHideChannels((prev) => {
+      const newValue = !prev;
+      localStorage.setItem('EventCatalog:hideChannels', JSON.stringify(newValue));
+      return newValue;
+    });
+  }, []);
+
+  const channels = useMemo(() => nodes.filter((node) => node.type === 'channels'), [nodes]);
+  const updatedNodes = useMemo(() => nodes.filter((node) => node.type !== 'channels'), [nodes]);
+
+  const updatedEdges = useMemo(() => {
+    return edges.reduce<Edge[]>((acc, edge) => {
+      const { source, target, data } = edge;
+      const targetIsChannel = channels.some((channel) => channel.id === target);
+      const sourceIsChannel = channels.some((channel) => channel.id === source);
+
+      if (!sourceIsChannel && !targetIsChannel) {
+        return [...acc, edge];
+      }
+
+      if (sourceIsChannel) {
+        const edgeLabel =
+          data.target.collection === 'services'
+            ? getEdgeLabelForMessageAsSource(data.source)
+            : getEdgeLabelForServiceAsTarget(data.target);
+
+        return [
+          ...acc,
+          createEdge({
+            id: generatedIdForEdge(data.source, data.target),
+            source: generateIdForNode(data.source),
+            target: generateIdForNode(data.target),
+            label: edgeLabel,
+          }),
+        ];
+      }
+
+      return [...acc, edge];
+    }, []);
+  }, [edges, channels]);
+
+  useEffect(() => {
+    if (hideChannels) {
+      const { nodes: newNodes, edges: newEdges } = getNodesAndEdgesFromDagre({ nodes: updatedNodes, edges: updatedEdges });
+      setNodes(newNodes);
+      setEdges(newEdges);
+    } else {
+      setNodes(initialNodes);
+      setEdges(initialEdges);
+    }
+  }, [hideChannels]);
+
+  return {
+    hideChannels,
+    toggleChannelsVisibility,
+  };
+};

package/{src → eventcatalog/src}/utils/node-graphs/message-node-graph.ts

@@ -9,6 +9,8 @@ import {
   generatedIdForEdge,
   generateIdForNode,
   getChannelNodesAndEdges,
+  getEdgeLabelForMessageAsSource,
+  getEdgeLabelForServiceAsTarget,
 } from './utils/utils';
 import { MarkerType } from 'reactflow';
 import { findMatchingNodes } from '@utils/collections/util';
@@ -26,33 +28,6 @@ interface Props {
   collection?: CollectionEntry<CollectionMessageTypes>[];
 }
 
-const getEdgeLabelForServiceAsTarget = (data: CollectionEntry<CollectionMessageTypes>) => {
-  const type = data.collection;
-  switch (type) {
-    case 'commands':
-      return 'invokes';
-    case 'events':
-      return 'publishes event';
-    case 'queries':
-      return 'requests';
-    default:
-      return 'sends to';
-  }
-};
-const getEdgeLabelForMessageAsSource = (data: CollectionEntry<CollectionMessageTypes>) => {
-  const type = data.collection;
-  switch (type) {
-    case 'commands':
-      return 'accepts';
-    case 'events':
-      return 'subscribed by';
-    case 'queries':
-      return 'accepts';
-    default:
-      return 'sends to';
-  }
-};
-
 const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simple', collection = [] }: Props) => {
   const flow = defaultFlow || createDagreGraph({ ranksep: 300, nodesep: 50 });
   const nodes = [] as any,

package/{src → eventcatalog/src}/utils/node-graphs/utils/utils.ts

@@ -2,7 +2,7 @@ import { getCollection, type CollectionEntry } from 'astro:content';
 import { MarkerType, Position, type Edge, type Node } from 'reactflow';
 import dagre from 'dagre';
 import { getItemsFromCollectionByIdAndSemverOrLatest } from '@utils/collections/util';
-import type { CollectionTypes } from '@types';
+import type { CollectionMessageTypes, CollectionTypes } from '@types';
 
 export const generateIdForNode = (node: CollectionEntry<CollectionTypes>) => {
   return `${node.data.id}-${node.data.version}`;
@@ -14,6 +14,33 @@ export const generatedIdForEdge = (source: CollectionEntry<CollectionTypes>, tar
   return `${source.data.id}-${source.data.version}-${target.data.id}-${target.data.version}`;
 };
 
+export const getEdgeLabelForServiceAsTarget = (data: CollectionEntry<CollectionMessageTypes>) => {
+  const type = data.collection;
+  switch (type) {
+    case 'commands':
+      return 'invokes';
+    case 'events':
+      return 'publishes event';
+    case 'queries':
+      return 'requests';
+    default:
+      return 'sends to';
+  }
+};
+export const getEdgeLabelForMessageAsSource = (data: CollectionEntry<CollectionMessageTypes>) => {
+  const type = data.collection;
+  switch (type) {
+    case 'commands':
+      return 'accepts';
+    case 'events':
+      return 'subscribed by';
+    case 'queries':
+      return 'accepts';
+    default:
+      return 'sends to';
+  }
+};
+
 export const calculatedNodes = (flow: dagre.graphlib.Graph, nodes: Node[]) => {
   return nodes.map((node: any) => {
     const { x, y } = flow.node(node.id);
@@ -107,7 +134,7 @@ export const getChannelNodesAndEdges = ({
         target: channelId,
         label: '',
         // label: sourceToChannelLabel,
-        data: { message: edgeMessage },
+        data: { message: edgeMessage, source: edgeMessage, channel, target },
       })
     );
 
@@ -119,10 +146,40 @@ export const getChannelNodesAndEdges = ({
         source: channelId,
         target: generateIdForNode(target),
         label: channelToTargetLabel,
-        data: { message: edgeMessage },
+        data: { message: edgeMessage, source, channel, target },
       })
     );
   });
 
   return { nodes, edges };
 };
+
+type DagreGraph = any;
+
+export const getNodesAndEdgesFromDagre = ({
+  nodes,
+  edges,
+  defaultFlow,
+}: {
+  nodes: Node[];
+  edges: Edge[];
+  defaultFlow?: DagreGraph;
+}) => {
+  const flow = defaultFlow || createDagreGraph({ ranksep: 300, nodesep: 50 });
+
+  nodes.forEach((node: any) => {
+    flow.setNode(node.id, { width: 150, height: 100 });
+  });
+
+  edges.forEach((edge: any) => {
+    flow.setEdge(edge.source, edge.target);
+  });
+
+  // Render the diagram in memory getting hte X and Y
+  dagre.layout(flow);
+
+  return {
+    nodes: calculatedNodes(flow, nodes),
+    edges,
+  };
+};

package/package.json

@@ -6,18 +6,25 @@
     "url": "https://github.com/event-catalog/eventcatalog.git"
   },
   "type": "module",
-  "version": "2.14.3",
+  "version": "2.15.0",
   "publishConfig": {
     "access": "public"
   },
   "bin": {
-    "eventcatalog": "bin/dist/eventcatalog.cjs"
+    "eventcatalog": "bin/eventcatalog.js"
   },
+  "files": [
+    "eventcatalog/",
+    "!eventcatalog/**/__tests__/",
+    "bin/",
+    "dist/",
+    "default-files-for-collections/"
+  ],
   "scripts": {
     "dev": "astro dev",
     "build:bin": "tsup",
     "prepublishOnly": "npm run build:bin",
-    "test": "vitest --config vitest.config.ts",
+    "test": "vitest",
     "test:ci": "node scripts/ci/test.js",
     "test:e2e": "playwright test",
     "start": "astro dev",