@eventcatalog/core 2.5.2 → 2.5.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @eventcatalog/core
 
+## 2.5.4
+
+### Patch Changes
+
+- b6052d9: fix(core): added client side url builder
+
+## 2.5.3
+
+### Patch Changes
+
+- a7f1bd0: fix(core): fixed generate script for plugins
+
 ## 2.5.2
 
 ### Patch Changes

package/README.md

@@ -5,7 +5,8 @@
 [![MIT License][license-badge]][license]
 [![PRs Welcome][prs-badge]][prs]
 <img src="https://img.shields.io/github/actions/workflow/status/event-catalog/eventcatalog/verify-build.yml"/>
-[![Star on GitHub][github-star-badge]][github-star]
+[![](https://dcbadge.limes.pink/api/server/https://discord.gg/3rjaZMmrAm?style=flat)](https://discord.gg/3rjaZMmrAm) [<img src="https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white" height="20px" />](https://www.linkedin.com/in/david-boyne/) [![blog](https://img.shields.io/badge/blog-EDA--Visuals-brightgreen)](https://eda-visuals.boyney.io/?utm_source=event-catalog-gihub) 
+
 
 
 
@@ -233,7 +234,6 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 
 This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
 
-
 # License
 
 MIT.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eventcatalog/core",
   "type": "module",
-  "version": "2.5.2",
+  "version": "2.5.4",
   "publishConfig": {
     "access": "public"
   },

package/scripts/generate.js

@@ -1,53 +1,109 @@
-import { readFile, writeFile } from 'node:fs/promises';
-import { createRequire } from 'module';
+import { readFile, writeFile, rm } from 'node:fs/promises';
 import path from 'node:path';
 
-const generate = async () => {
-  // Fix for the file
-  const rawFile = await readFile(path.join(process.env.PROJECT_DIR, 'eventcatalog.config.js'), 'utf8');
+/**
+ * Very strange behaviour when importing ESM files from catalogs into core.
+ * Core (node) does not know how to handle ESM files, so we have to try and convert them.
+ *
+ * This needs sorting out! Sorry if you are reading this, but it unblocked me for now!
+ * @param {*} content
+ * @returns
+ */
+function convertESMtoCJS(content) {
+  // Replace import statements with require
+  content = content.replace(/import\s+([a-zA-Z0-9{},\s*]+)\s+from\s+['"]([^'"]+)['"];/g, (match, imports, modulePath) => {
+    return `const ${imports.trim()} = require('${modulePath}');`;
+  });
 
-  const require = createRequire(process.env.PROJECT_DIR);
+  // Replace export default with module.exports
+  content = content.replace(/export\s+default\s+/g, 'module.exports = ');
 
-  // Convert export default to module.exports (Needed for dynamic require)
-  if (rawFile.includes('export default')) {
-    const fixedFile = rawFile.replace('export default', 'module.exports =');
-    await writeFile(path.join(process.env.PROJECT_DIR, 'eventcatalog.config.js'), fixedFile);
-  }
+  // Replace named exports with module.exports
+  content = content.replace(/export\s+{([^}]+)}/g, (match, exports) => {
+    return `module.exports = {${exports.trim()}};`;
+  });
+
+  // Remove declarations of __filename and __dirname
+  content = content.replace(/^\s*(const|let|var)\s+__(filename|dirname)\s+=\s+.*;?\s*$/gm, '');
 
-  const config = require(path.join(process.env.PROJECT_DIR, 'eventcatalog.config.js'));
+  return content;
+}
 
-  const { generators = [] } = config;
+// TODO: Do we actually need this? Can we clean this up
+function getDefaultExport(importedModule) {
+  if (importedModule === null || typeof importedModule !== 'object') {
+    throw new Error('Invalid module');
+  }
 
-  if (!generators.length) {
-    console.log('No configured generators found, skipping generation');
-    return;
+  if (typeof importedModule.default === 'object' && importedModule.default !== null) {
+    return importedModule.default.default || importedModule.default;
   }
 
-  console.log('Running generators...');
+  if (typeof importedModule.default !== 'undefined') {
+    return importedModule.default;
+  }
 
-  // Tidy up
-  await writeFile(path.join(process.env.PROJECT_DIR, 'eventcatalog.config.js'), rawFile);
+  return importedModule;
+}
 
-  const plugins = generators.map((generator) => {
-    let plugin = generator[0];
-    const pluginConfig = generator[1];
+async function cleanup() {
+  await rm(path.join(process.env.PROJECT_DIR, 'eventcatalog.config.cjs'));
+}
 
-    if (plugin.startsWith('./')) {
-      plugin = path.join(process.env.PROJECT_DIR, plugin);
-    }
+const generate = async () => {
+  try {
+    // Fix for the file
+    const rawFile = await readFile(path.join(process.env.PROJECT_DIR, 'eventcatalog.config.js'), 'utf8');
+
+    // Have to conver the ESM to CJS...
+    const configAsCommonJS = convertESMtoCJS(rawFile);
+    await writeFile(path.join(process.env.PROJECT_DIR, 'eventcatalog.config.cjs'), configAsCommonJS);
 
-    if (plugin.includes('<rootDir>')) {
-      plugin = plugin.replace('<rootDir>', process.env.PROJECT_DIR);
+    const configAsCJS = await import(path.join(process.env.PROJECT_DIR, 'eventcatalog.config.cjs'));
+    const config = configAsCJS.default;
+
+    const { generators = [] } = config;
+
+    if (!generators.length) {
+      console.log('No configured generators found, skipping generation');
+      return;
     }
 
-    const importedGenerator = require(plugin);
+    // Tidy up
+    await writeFile(path.join(process.env.PROJECT_DIR, 'eventcatalog.config.js'), rawFile);
 
-    console.log(`Generating EventCatalog docs using: ${plugin}`);
+    for (const generator of generators) {
+      let plugin = generator[0];
+      const pluginConfig = generator[1];
 
-    return importedGenerator({ eventCatalogConfig: config }, pluginConfig);
-  });
+      if (plugin.startsWith('./')) {
+        plugin = path.join(process.env.PROJECT_DIR, plugin);
+      }
+
+      if (plugin.includes('<rootDir>')) {
+        plugin = plugin.replace('<rootDir>', process.env.PROJECT_DIR);
+      }
+
+      try {
+        const importedGenerator = await import(plugin);
 
-  await Promise.all(plugins);
+        // TODO: Fix this...
+        const generator = getDefaultExport(importedGenerator);
+
+        await generator({ eventCatalogConfig: {} }, pluginConfig);
+
+        // Use importedGenerator here
+      } catch (error) {
+        console.error('Error loading plugin:', error);
+        await cleanup();
+        return;
+      }
+    }
+  } catch (error) {
+    // Failed to generate clean up...
+    console.error(error);
+    await cleanup();
+  }
 };
 
 generate();

package/src/components/MDX/NodeGraph/NodeGraph.astro

@@ -5,6 +5,8 @@ import { getNodesAndEdges as getNodesAndEdgesForEvent } from '@utils/events/node
 import { getNodesAndEdges as getNodesAndEdgesForCommand } from '@utils/commands/node-graph';
 import { getNodesAndEdges as getNodesAndEdgesForDomain } from '@utils/domains/node-graph';
 import { getNodesAndEdges as getNodesAndEdgesForFlows } from '@utils/flows/node-graph';
+import { buildUrl } from '@utils/url-builder';
+import config from '@eventcatalog';
 
 interface Props {
   id: string;
@@ -77,6 +79,13 @@ if (collection === 'flows') {
   nodes = eventNodes;
   edges = eventEdges;
 }
+
+const getDocUrlForCollection = () => {
+  return buildUrl(`/docs/${collection}/${id}/${version}`);
+};
+const getVisualiserUrlForCollection = () => {
+  return buildUrl(`/visualiser/${collection}/${id}/${version}`);
+};
 ---
 
 <div>
@@ -88,6 +97,7 @@ if (collection === 'flows') {
     hrefLabel={href.label}
     href={href.url}
     linkTo={linkTo}
+    urlHasTrailingSlash={config.trailingSlash}
     client:load
   />
 </div>

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

@@ -21,7 +21,7 @@ import type { CollectionEntry } from 'astro:content';
 import { navigate } from 'astro:transitions/client';
 import type { CollectionTypes } from '@types';
 import DownloadButton from './DownloadButton';
-import { buildUrl } from '@utils/url-builder';
+import { buildUrl } from '@utils/url-builder-client';
 
 interface Props {
   nodes: any;
@@ -32,13 +32,17 @@ interface Props {
   includeControls?: boolean;
   linkTo: 'docs' | 'visualiser';
   includeKey?: boolean;
+  urlHasTrailingSlash?: boolean;
 }
 
-const getDocUrlForCollection = (collectionItem: CollectionEntry<CollectionTypes>) => {
-  return buildUrl(`/docs/${collectionItem.collection}/${collectionItem.data.id}/${collectionItem.data.version}`);
+const getDocUrlForCollection = (collectionItem: CollectionEntry<CollectionTypes>, trailingSlash?: boolean) => {
+  return buildUrl(`/docs/${collectionItem.collection}/${collectionItem.data.id}/${collectionItem.data.version}`, trailingSlash);
 };
-const getVisualiserUrlForCollection = (collectionItem: CollectionEntry<CollectionTypes>) => {
-  return buildUrl(`/visualiser/${collectionItem.collection}/${collectionItem.data.id}/${collectionItem.data.version}`);
+const getVisualiserUrlForCollection = (collectionItem: CollectionEntry<CollectionTypes>, trailingSlash?: boolean) => {
+  return buildUrl(
+    `/visualiser/${collectionItem.collection}/${collectionItem.data.id}/${collectionItem.data.version}`,
+    trailingSlash
+  );
 };
 
 // const NodeGraphBuilder = ({ title, subtitle, includeBackground = true, includeControls = true }: Props) => {
@@ -49,6 +53,7 @@ const NodeGraphBuilder = ({
   includeBackground = true,
   linkTo = 'docs',
   includeKey = true,
+  urlHasTrailingSlash,
 }: Props) => {
   const nodeTypes = useMemo(
     () => ({
@@ -67,10 +72,18 @@ const NodeGraphBuilder = ({
 
   const handleNodeClick = (_: any, node: Node) => {
     if (node.type === 'events' || node.type === 'commands') {
-      navigate(linkTo === 'docs' ? getDocUrlForCollection(node.data.message) : getVisualiserUrlForCollection(node.data.message));
+      navigate(
+        linkTo === 'docs'
+          ? getDocUrlForCollection(node.data.message, urlHasTrailingSlash)
+          : getVisualiserUrlForCollection(node.data.message, urlHasTrailingSlash)
+      );
     }
     if (node.type === 'services') {
-      navigate(linkTo === 'docs' ? getDocUrlForCollection(node.data.service) : getVisualiserUrlForCollection(node.data.service));
+      navigate(
+        linkTo === 'docs'
+          ? getDocUrlForCollection(node.data.service, urlHasTrailingSlash)
+          : getVisualiserUrlForCollection(node.data.service, urlHasTrailingSlash)
+      );
     }
   };
 
@@ -132,6 +145,7 @@ interface NodeGraphProps {
   linkTo: 'docs' | 'visualiser';
   includeKey?: boolean;
   footerLabel?: string;
+  urlHasTrailingSlash?: boolean;
 }
 
 const NodeGraph = ({
@@ -144,6 +158,7 @@ const NodeGraph = ({
   hrefLabel = 'Open in visualizer',
   includeKey = true,
   footerLabel,
+  urlHasTrailingSlash,
 }: NodeGraphProps) => {
   const [elem, setElem] = useState(null);
 
@@ -158,7 +173,14 @@ const NodeGraph = ({
     <div>
       {createPortal(
         <ReactFlowProvider>
-          <NodeGraphBuilder edges={edges} nodes={nodes} title={title} linkTo={linkTo} includeKey={includeKey} />
+          <NodeGraphBuilder
+            edges={edges}
+            nodes={nodes}
+            title={title}
+            linkTo={linkTo}
+            includeKey={includeKey}
+            urlHasTrailingSlash={urlHasTrailingSlash}
+          />
 
           <div className="flex justify-between">
             {footerLabel && (

package/src/utils/url-builder-client.ts

@@ -0,0 +1,22 @@
+const cleanUrl = (url: string) => {
+  return url.replace(/\/+/g, '/');
+};
+
+// Custom URL builder as Astro does not support this stuff out the box.
+// Used on client components to build URLs
+export const buildUrl = (url: string, trailingSlash = false, ignoreTrailingSlash = false) => {
+  let newUrl = url;
+
+  // If the base URL is not the root, we need to append it
+  if (import.meta.env.BASE_URL !== '/') {
+    newUrl = `${import.meta.env.BASE_URL}${url}`;
+  }
+
+  // Should we add a trailing slash to the url?
+  if (trailingSlash && !ignoreTrailingSlash) {
+    if (url.endsWith('/')) return newUrl;
+    return cleanUrl(`${newUrl}/`);
+  }
+
+  return cleanUrl(newUrl);
+};