@eventcatalog/core 2.5.3 → 2.5.5

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @eventcatalog/core
 
+## 2.5.5
+
+### Patch Changes
+
+- 2b84b47: fix(core): moved node graphs to only load on client fixing the invalid hook call warning
+
+## 2.5.4
+
+### Patch Changes
+
+- b6052d9: fix(core): added client side url builder
+
 ## 2.5.3
 
 ### Patch Changes

package/package.json

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

package/src/components/MDX/Flow/Flow.astro

@@ -52,7 +52,7 @@ const { nodes, edges } = await getNodesAndEdges({
     linkTo={'visualiser'}
     includeKey={includeKey}
     footerLabel=`Flow diagram - ${flow.data.name} - v(${flow.data.version})`
-    client:load
+    client:only="react"
   />
 </div>
 

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,7 +97,8 @@ if (collection === 'flows') {
     hrefLabel={href.label}
     href={href.url}
     linkTo={linkTo}
-    client:load
+    client:only="react"
+    urlHasTrailingSlash={config.trailingSlash}
   />
 </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/components/MDX/SchemaViewer/SchemaViewer.astro

@@ -72,7 +72,7 @@ try {
     schemas.length > 0 &&
       schemas.map((schema) => (
         <div>
-          {schema.exists && <SchemaViewerClient {...schema} client:load />}
+          {schema.exists && <SchemaViewerClient {...schema} client:only="react" />}
 
           {/* User has tried to load the schema, but it was not found on file system */}
           {!schema.exists && (

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);
+};