chore/url-builder-client-server-compatible (#859)

* add api path and http verb in openapi viewer * Create early-steaks-sparkle.md * fix([semver]): fix missing types build error * chore(dev-dep): move changesets.cli to dev dependencies * chore: add global __EC_TRAILING_SLASH__ variable It adds the global variable to run url-builder utility either in node and browser environments. * refactor: remove url-builder-client in favor of url-builder * fix: apply prettier formatting to NodeGraph * Delete .changeset/early-steaks-sparkle.md * fix merge conflicts * Create swift-ducks-enjoy.md --------- Co-authored-by: glc-omid <oeidivandi@lacentrale.fr> Co-authored-by: David Boyne <boyneyy123@gmail.com> Co-authored-by: omid eidivandi <eidivandi@live.com>
event-catalog · Oct 16, 2024 · 8376da8 · 8376da8
1 parent db41392
commit 8376da8
Show file tree

Hide file tree

Showing 8 changed files with 25 additions and 51 deletions.
diff --git a/.changeset/swift-ducks-enjoy.md b/.changeset/swift-ducks-enjoy.md
@@ -0,0 +1,5 @@
+---
+"@eventcatalog/core": patch
+---
+
+chore(core): fixed url builder for server/client components
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -48,6 +48,15 @@ export default defineConfig({
     pagefind(),
   ],
   vite: {
+    define: {
+      /**
+       * Trailing slash is exposed as global variable here principally for `@utils/url-builder`.
+       * The utility is used by client components and because of that it can't direct import 
+       * the eventcatalog.config, as the config use packages that only run in node environments,
+       * such as `node:path`.
+       */
+      '__EC_TRAILING_SLASH__': config.trailingSlash || false,
+    },
     build: {
       commonjsOptions: {
         transformMixedEsModules: true,

diff --git a/src/components/MDX/NodeGraph/NodeGraph.astro b/src/components/MDX/NodeGraph/NodeGraph.astro
@@ -5,8 +5,6 @@ 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;
@@ -80,13 +78,6 @@ if (collection === 'flows') {
   nodes = eventNodes;
   edges = eventEdges;
 }
-
-const getDocUrlForCollection = () => {
-  return buildUrl(`/docs/${collection}/${id}/${version}`);
-};
-const getVisualiserUrlForCollection = () => {
-  return buildUrl(`/visualiser/${collection}/${id}/${version}`);
-};
 ---
 
 <div>
@@ -99,7 +90,6 @@ const getVisualiserUrlForCollection = () => {
     href={href.url}
     linkTo={linkTo}
     client:only="react"
-    urlHasTrailingSlash={config.trailingSlash}
     linksToVisualiser={linksToVisualiser}
   />
 </div>

diff --git a/src/components/MDX/NodeGraph/NodeGraph.tsx b/src/components/MDX/NodeGraph/NodeGraph.tsx
@@ -23,7 +23,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-client';
+import { buildUrl } from '@utils/url-builder';
 
 interface Props {
   nodes: any;
@@ -34,18 +34,14 @@ interface Props {
   includeControls?: boolean;
   linkTo: 'docs' | 'visualiser';
   includeKey?: boolean;
-  urlHasTrailingSlash?: boolean;
   linksToVisualiser?: boolean;
 }
 
-const getDocUrlForCollection = (collectionItem: CollectionEntry<CollectionTypes>, trailingSlash?: boolean) => {
-  return buildUrl(`/docs/${collectionItem.collection}/${collectionItem.data.id}/${collectionItem.data.version}`, trailingSlash);
+const getDocUrlForCollection = (collectionItem: CollectionEntry<CollectionTypes>) => {
+  return buildUrl(`/docs/${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 getVisualiserUrlForCollection = (collectionItem: CollectionEntry<CollectionTypes>) => {
+  return buildUrl(`/visualiser/${collectionItem.collection}/${collectionItem.data.id}/${collectionItem.data.version}`);
 };
 
 const NodeGraphBuilder = ({
@@ -55,7 +51,6 @@ const NodeGraphBuilder = ({
   includeBackground = true,
   linkTo = 'docs',
   includeKey = true,
-  urlHasTrailingSlash,
   linksToVisualiser = false,
 }: Props) => {
   const nodeTypes = useMemo(
@@ -93,10 +88,10 @@ const NodeGraphBuilder = ({
     (_: any, node: Node) => {
       if (linksToVisualiser) {
         if (node.type === 'events' || node.type === 'commands') {
-          navigate(getVisualiserUrlForCollection(node.data.message, urlHasTrailingSlash));
+          navigate(getVisualiserUrlForCollection(node.data.message));
         }
         if (node.type === 'services') {
-          navigate(getVisualiserUrlForCollection(node.data.service, urlHasTrailingSlash));
+          navigate(getVisualiserUrlForCollection(node.data.service));
         }
         return;
       }
@@ -198,7 +193,6 @@ interface NodeGraphProps {
   linkTo: 'docs' | 'visualiser';
   includeKey?: boolean;
   footerLabel?: string;
-  urlHasTrailingSlash?: boolean;
   linksToVisualiser?: boolean;
 }
 
@@ -212,7 +206,6 @@ const NodeGraph = ({
   hrefLabel = 'Open in visualizer',
   includeKey = true,
   footerLabel,
-  urlHasTrailingSlash,
   linksToVisualiser = false,
 }: NodeGraphProps) => {
   const [elem, setElem] = useState(null);
@@ -234,7 +227,6 @@ const NodeGraph = ({
             title={title}
             linkTo={linkTo}
             includeKey={includeKey}
-            urlHasTrailingSlash={urlHasTrailingSlash}
             linksToVisualiser={linksToVisualiser}
           />
 

diff --git a/src/components/MDX/Tiles/Tile.astro b/src/components/MDX/Tiles/Tile.astro
@@ -1,7 +1,7 @@
 ---
 import type { ComponentType } from 'react';
 import * as Icons from '@heroicons/react/24/solid';
-import { buildUrl } from '@utils/url-builder-client';
+import { buildUrl } from '@utils/url-builder';
 
 interface Props {
   href: string;

diff --git a/src/env.d.ts b/src/env.d.ts
@@ -1,2 +1,4 @@
 /// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />
+
+declare const __EC_TRAILING_SLASH__: boolean;
diff --git a/src/utils/url-builder-client.ts b/src/utils/url-builder-client.ts
diff --git a/src/utils/url-builder.ts b/src/utils/url-builder.ts
@@ -1,13 +1,11 @@
-import config from '@eventcatalog';
-
 const cleanUrl = (url: string) => {
   return url.replace(/\/+/g, '/');
 };
 
 // Custom URL builder as Astro does not support this stuff out the box
 export const buildUrl = (url: string, ignoreTrailingSlash = false) => {
   // Should a trailingSlash be added to urls?
-  const trailingSlash = config.trailingSlash || false;
+  const trailingSlash = __EC_TRAILING_SLASH__;
 
   let newUrl = url;