@eventcatalog/core 5.0.0-beta.15 → 5.0.0-beta.17

package/dist/analytics/analytics.cjs

@@ -36,7 +36,7 @@ module.exports = __toCommonJS(analytics_exports);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "5.0.0-beta.15";
+var version = "5.0.0-beta.17";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/analytics.js

@@ -1,8 +1,8 @@
 import {
   raiseEvent
-} from "../chunk-RJVMRSST.js";
+} from "../chunk-I2PF2NUX.js";
 import "../chunk-CPW6G62V.js";
-import "../chunk-E76YXGXI.js";
+import "../chunk-FGD4SMCW.js";
 export {
   raiseEvent
 };

package/dist/analytics/log-build.cjs

@@ -176,7 +176,7 @@ var verifyRequiredFieldsAreInCatalogConfigFile = async (projectDirectory) => {
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "5.0.0-beta.15";
+var version = "5.0.0-beta.17";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,11 +1,11 @@
 import {
   log_build_default
-} from "../chunk-HRDTAJG4.js";
+} from "../chunk-AOJIHBHM.js";
 import "../chunk-AWOO63ME.js";
 import "../chunk-ZAZHAVKB.js";
-import "../chunk-RJVMRSST.js";
+import "../chunk-I2PF2NUX.js";
 import "../chunk-CPW6G62V.js";
-import "../chunk-E76YXGXI.js";
+import "../chunk-FGD4SMCW.js";
 import "../chunk-RFIXKATC.js";
 export {
   log_build_default as default

package/dist/{chunk-HRDTAJG4.js → chunk-AOJIHBHM.js}

@@ -8,7 +8,7 @@ import {
 } from "./chunk-ZAZHAVKB.js";
 import {
   raiseEvent
-} from "./chunk-RJVMRSST.js";
+} from "./chunk-I2PF2NUX.js";
 import {
   TELEMETRY_REQUEST_TIMEOUT_MS,
   isTelemetryDisabled

package/dist/{chunk-ZOEZ4ITY.js → chunk-B2DLFUJH.js}

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-E76YXGXI.js";
+} from "./chunk-FGD4SMCW.js";
 
 // src/utils/cli-logger.ts
 import pc from "picocolors";

package/dist/{chunk-LHDZZ5HX.js → chunk-DWRRWVUG.js}

@@ -1,6 +1,6 @@
 import {
   logger
-} from "./chunk-ZOEZ4ITY.js";
+} from "./chunk-B2DLFUJH.js";
 import {
   cleanup,
   getEventCatalogConfigFile

package/dist/{chunk-E76YXGXI.js → chunk-FGD4SMCW.js}

@@ -1,5 +1,5 @@
 // package.json
-var version = "5.0.0-beta.15";
+var version = "5.0.0-beta.17";
 
 // src/constants.ts
 var VERSION = version;

package/dist/{chunk-RJVMRSST.js → chunk-I2PF2NUX.js}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-CPW6G62V.js";
 import {
   VERSION
-} from "./chunk-E76YXGXI.js";
+} from "./chunk-FGD4SMCW.js";
 
 // src/analytics/analytics.js
 import os from "os";

package/dist/constants.cjs

@@ -25,7 +25,7 @@ __export(constants_exports, {
 module.exports = __toCommonJS(constants_exports);
 
 // package.json
-var version = "5.0.0-beta.15";
+var version = "5.0.0-beta.17";
 
 // src/constants.ts
 var VERSION = version;

package/dist/constants.js

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-E76YXGXI.js";
+} from "./chunk-FGD4SMCW.js";
 export {
   VERSION
 };

package/dist/eventcatalog.cjs

@@ -181,7 +181,7 @@ var verifyRequiredFieldsAreInCatalogConfigFile = async (projectDirectory) => {
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "5.0.0-beta.15";
+var version = "5.0.0-beta.17";
 
 // src/constants.ts
 var VERSION = version;

package/dist/eventcatalog.js

@@ -4,7 +4,7 @@ import {
 import "./chunk-CA4U2JP7.js";
 import {
   log_build_default
-} from "./chunk-HRDTAJG4.js";
+} from "./chunk-AOJIHBHM.js";
 import {
   getLicenseStatus,
   printLicenseStatus
@@ -33,10 +33,10 @@ import {
 } from "./chunk-MDWB5HLO.js";
 import {
   generate
-} from "./chunk-LHDZZ5HX.js";
+} from "./chunk-DWRRWVUG.js";
 import {
   logger
-} from "./chunk-ZOEZ4ITY.js";
+} from "./chunk-B2DLFUJH.js";
 import {
   resolve_catalog_dependencies_default
 } from "./chunk-36RYTYT5.js";
@@ -50,7 +50,7 @@ import {
 import {
   watch
 } from "./chunk-U63GDPPY.js";
-import "./chunk-RJVMRSST.js";
+import "./chunk-I2PF2NUX.js";
 import "./chunk-CPW6G62V.js";
 import {
   getAstroConfigPath
@@ -67,7 +67,7 @@ import {
 } from "./chunk-LFQJXLHG.js";
 import {
   VERSION
-} from "./chunk-E76YXGXI.js";
+} from "./chunk-FGD4SMCW.js";
 import {
   getEventCatalogConfigFile,
   verifyRequiredFieldsAreInCatalogConfigFile

package/dist/generate.cjs

@@ -112,7 +112,7 @@ var getEventCatalogConfigFile = async (projectDirectory) => {
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "5.0.0-beta.15";
+var version = "5.0.0-beta.17";
 
 // src/constants.ts
 var VERSION = version;

package/dist/generate.js

@@ -1,8 +1,8 @@
 import {
   generate
-} from "./chunk-LHDZZ5HX.js";
-import "./chunk-ZOEZ4ITY.js";
-import "./chunk-E76YXGXI.js";
+} from "./chunk-DWRRWVUG.js";
+import "./chunk-B2DLFUJH.js";
+import "./chunk-FGD4SMCW.js";
 import "./chunk-RFIXKATC.js";
 export {
   generate

package/dist/runtime-dependencies/htmlparser2.mjs

@@ -0,0 +1,3 @@
+export * from "htmlparser2";
+import * as dependency from "htmlparser2";
+export default dependency.default;

package/dist/runtime-dependencies/manifest.json

@@ -94,6 +94,7 @@
   "gray-matter": "gray-matter.mjs",
   "hono": "hono.mjs",
   "html-to-image": "html-to-image.mjs",
+  "htmlparser2": "htmlparser2.mjs",
   "js-yaml": "js-yaml.mjs",
   "jsonpath-plus": "jsonpath-plus.mjs",
   "jsonwebtoken": "jsonwebtoken.mjs",
@@ -117,6 +118,7 @@
   "react-hotkeys-hook": "react-hotkeys-hook.mjs",
   "react-markdown": "react-markdown.mjs",
   "react-syntax-highlighter": "react-syntax-highlighter.mjs",
+  "react-syntax-highlighter/dist/cjs/create-element.js": "react-syntax-highlighter__dist__cjs__create-element.js.mjs",
   "react-syntax-highlighter/dist/cjs/styles/prism": "react-syntax-highlighter__dist__cjs__styles__prism.mjs",
   "react-syntax-highlighter/dist/cjs/styles/prism/index.js": "react-syntax-highlighter__dist__cjs__styles__prism__index.js.mjs",
   "react-syntax-highlighter/dist/esm/languages/prism/graphql": "react-syntax-highlighter__dist__esm__languages__prism__graphql.mjs",

package/dist/runtime-dependencies/react-syntax-highlighter__dist__cjs__create-element.js.mjs

@@ -0,0 +1,3 @@
+export * from "react-syntax-highlighter/dist/cjs/create-element.js";
+import * as dependency from "react-syntax-highlighter/dist/cjs/create-element.js";
+export default dependency.default;

package/dist/utils/cli-logger.cjs

@@ -36,7 +36,7 @@ module.exports = __toCommonJS(cli_logger_exports);
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "5.0.0-beta.15";
+var version = "5.0.0-beta.17";
 
 // src/constants.ts
 var VERSION = version;

package/dist/utils/cli-logger.js

@@ -1,7 +1,7 @@
 import {
   logger
-} from "../chunk-ZOEZ4ITY.js";
-import "../chunk-E76YXGXI.js";
+} from "../chunk-B2DLFUJH.js";
+import "../chunk-FGD4SMCW.js";
 export {
   logger
 };

package/eventcatalog/astro.config.mjs

@@ -117,6 +117,11 @@ export default defineConfig({
 
   // just turn this off for all users (for now...)
   devToolbar: { enabled: false },
+  build: {
+    // Render several pages at once: pages wait on file reads and graph layouts, and a 640-event
+    // catalog built in ~40s rather than ~70s, with the same pages and less memory.
+    concurrency: 4,
+  },
 
   // Unused resource types are valid. Astro otherwise warns on every getCollection()
   // call for those empty collections ("check your content config file for errors").

package/eventcatalog/src/components/SchemaExplorer/ApiContentViewer.tsx

@@ -4,6 +4,7 @@ import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import { oneLight } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import { getLanguageForHighlight, getSchemaTypeLabel } from './utils';
 import { useDarkMode } from './useDarkMode';
+import { renderHighlightedRows } from '@utils/syntax-highlighter-renderer';
 import type { SchemaItem } from './types';
 
 interface ApiContentViewerProps {
@@ -135,6 +136,7 @@ export default function ApiContentViewer({ message, onCopy, copiedId }: ApiConte
 
           <div className="border-t" style={{ borderColor: dividerColor }}>
             <SyntaxHighlighter
+              renderer={renderHighlightedRows}
               language={getLanguageForHighlight(message.schemaExtension)}
               style={isDarkMode ? oneDark : oneLight}
               customStyle={{

package/eventcatalog/src/components/SchemaExplorer/ExamplesViewer.tsx

@@ -13,6 +13,7 @@ import { MarkdownCodeGroup } from '../MDX/CodeGroup/MarkdownCodeGroup';
 import { MarkdownColumns, MarkdownColumn } from '../MDX/Columns/MarkdownColumns';
 import { remarkMarkdownColumns } from '../../remark-plugins/markdown-columns';
 import { getLanguageForHighlight } from './utils';
+import { renderHighlightedRows } from '@utils/syntax-highlighter-renderer';
 
 interface ExamplesViewerProps {
   examples: MessageExample[];
@@ -40,6 +41,7 @@ function CodeBlock({ language, code }: { language?: string; code: string }) {
   const content = code.replace(/\s+$/, '');
   const highlighter = (
     <SyntaxHighlighter
+      renderer={renderHighlightedRows}
       language={language || 'text'}
       style={isDarkMode ? oneDark : oneLight}
       customStyle={{

package/eventcatalog/src/components/SchemaExplorer/SchemaCodeModal.tsx

@@ -6,6 +6,7 @@ import { oneLight } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import { getLanguageForHighlight } from './utils';
 import type { SchemaItem } from './types';
 import { useDarkMode } from './useDarkMode';
+import { renderHighlightedRows } from '@utils/syntax-highlighter-renderer';
 
 interface SchemaCodeModalProps {
   isOpen: boolean;
@@ -60,6 +61,7 @@ export default function SchemaCodeModal({ isOpen, onOpenChange, message, onCopy,
           {/* Content */}
           <div className="flex-1 overflow-auto p-6">
             <SyntaxHighlighter
+              renderer={renderHighlightedRows}
               language={getLanguageForHighlight(message.schemaExtension)}
               style={isDarkMode ? oneDark : oneLight}
               customStyle={{

package/eventcatalog/src/components/SchemaExplorer/SchemaContentViewer.tsx

@@ -9,6 +9,7 @@ import ProtobufSchemaViewer from './ProtobufSchemaViewer';
 import { getLanguageForHighlight, SCHEMA_CODE_STYLE } from './utils';
 import type { SchemaItem } from './types';
 import { useDarkMode } from './useDarkMode';
+import { renderHighlightedRows } from '@utils/syntax-highlighter-renderer';
 
 interface SchemaContentViewerProps {
   message: SchemaItem;
@@ -112,6 +113,7 @@ export default function SchemaContentViewer({
 
       <div className="min-h-0 flex-1 overflow-auto">
         <SyntaxHighlighter
+          renderer={renderHighlightedRows}
           language={getLanguageForHighlight(message.schemaExtension)}
           style={isDarkMode ? oneDark : oneLight}
           customStyle={{ ...SCHEMA_CODE_STYLE, height: '100%' }}

package/eventcatalog/src/types/react-syntax-highlighter.d.ts

@@ -12,3 +12,13 @@ declare module 'react-syntax-highlighter' {
 }
 
 declare module 'react-syntax-highlighter/dist/esm/styles/prism/material-light';
+
+declare module 'react-syntax-highlighter/dist/cjs/create-element.js' {
+  import type { CSSProperties } from 'react';
+
+  export function createStyleObject(
+    classNames: string[],
+    elementStyle?: CSSProperties,
+    stylesheet?: { [selector: string]: CSSProperties }
+  ): CSSProperties;
+}

package/eventcatalog/src/utils/link-validation.ts

@@ -1,6 +1,6 @@
 import fs from 'node:fs/promises';
 import path from 'node:path';
-import { parse, type DefaultTreeAdapterMap } from 'parse5';
+import { Parser } from 'htmlparser2';
 import picomatch from 'picomatch';
 
 export type LinkValidationSeverity = 'warn' | 'error' | 'ignore';
@@ -42,30 +42,36 @@ const decodeUrlPart = (value: string): string => {
   }
 };
 
+// Elements whose contents browsers don't render as markup (<noscript> when scripts run)
+const INERT_ELEMENTS = new Set(['template', 'noscript']);
+
 // Parse HTML rather than searching markup with a regex: attributes can contain
 // entities, quoted > characters, or single/unquoted values. Scripts and inert
 // template contents must not be mistaken for rendered links or anchor targets.
+// A streaming parser, not a document tree: pages can be large (island props),
+// and building a tree of each one made link validation a large part of a build.
 const readPage = (html: string, source: string): PageLinks => {
   const page: PageLinks = { source, anchors: new Set(), links: new Set() };
-  const nodes: DefaultTreeAdapterMap['node'][] = [parse(html)];
-  while (nodes.length > 0) {
-    const node = nodes.pop()!;
-    if ('tagName' in node) {
-      const attrs = new Map(node.attrs.map((attr) => [attr.name, attr.value]));
-      const id = attrs.get('id');
-      if (id) page.anchors.add(id);
-      if (node.tagName === 'a' && attrs.get('name')) page.anchors.add(attrs.get('name')!);
-      const href = attrs.get('href');
-      if (href !== undefined) {
-        if (node.tagName === 'base' && page.baseHref === undefined) page.baseHref = href;
-        if (node.tagName === 'a' || node.tagName === 'area') page.links.add(href);
+  let inert = 0;
+  const parser = new Parser({
+    onopentag(tagName, attrs) {
+      if (inert === 0) {
+        if (attrs.id) page.anchors.add(attrs.id);
+        if (tagName === 'a' && attrs.name) page.anchors.add(attrs.name);
+        const href = attrs.href;
+        if (href !== undefined) {
+          // Parsed in document order, so the first <base href> wins
+          if (tagName === 'base' && page.baseHref === undefined) page.baseHref = href;
+          if (tagName === 'a' || tagName === 'area') page.links.add(href);
+        }
       }
-    }
-    // Reverse the stack so the first <base href> wins in document order.
-    if ('childNodes' in node) {
-      for (let i = node.childNodes.length - 1; i >= 0; i--) nodes.push(node.childNodes[i]);
-    }
-  }
+      if (INERT_ELEMENTS.has(tagName)) inert++;
+    },
+    onclosetag(tagName) {
+      if (INERT_ELEMENTS.has(tagName) && inert > 0) inert--;
+    },
+  });
+  parser.end(html);
   return page;
 };
 

package/eventcatalog/src/utils/node-graphs/domain-entity-map.ts

@@ -212,7 +212,9 @@ export const getNodesAndEdges = async ({ id, version, entities, type = 'domains'
             height: 20,
           },
         });
-      } else {
+      } else if (!entityMap.has(referencedEntityId)) {
+        // Only a reference to an entity missing from the catalog is broken. An external entity's own
+        // references can point further away than this map shows: those edges are left out.
         console.warn(`Referenced entity "${referencedEntityId}" not found for ${entity.data.name}.${referenceProperty.name}`);
       }
     }

package/eventcatalog/src/utils/node-graphs/layout-node-graph.ts

@@ -1,7 +1,14 @@
 import { hideMessageNodes, layoutWithElk } from '@eventcatalog/visualiser/layout';
+import { isSSR } from '@utils/feature';
 
 type Graph = { nodes: any[]; edges: any[] };
 
+// A build renders one route at a time (every message's docs page, then every schema page), so the
+// cache has to outlast a whole route to be reused. A server keeps running as the catalog changes and
+// renders pages as they're asked for, so it keeps the most recent layouts only.
+const MAX_CACHED_LAYOUTS = isSSR() ? 200 : 5000;
+const layouts = new Map<string, ReturnType<typeof layoutWithElk>>();
+
 /**
  * Lays a node graph out for the visualiser (with ELK, left to right). Builders
  * create their nodes and edges without positions and lay the finished graph
@@ -9,7 +16,19 @@ type Graph = { nodes: any[]; edges: any[] };
  * (nodes with children) are sized to fit them, and edges get the route they're
  * drawn along (`data.route`), with room for their labels.
  */
-export const layoutNodeGraph = async <G extends Graph>(graph: G): Promise<G> => (await layoutWithElk(graph)) as unknown as G;
+export const layoutNodeGraph = async <G extends Graph>(graph: G): Promise<G> => {
+  // A build lays the same graph out on several pages (a message's docs, visualiser and schema pages):
+  // reuse the layout. Each caller gets its own copy, so it can't change the one kept.
+  const key = JSON.stringify(graph);
+  let layout = layouts.get(key);
+  if (!layout) {
+    layout = layoutWithElk(graph);
+    layouts.set(key, layout);
+    layout.catch(() => layouts.delete(key));
+    if (layouts.size > MAX_CACHED_LAYOUTS) layouts.delete(layouts.keys().next().value!);
+  }
+  return structuredClone(await layout) as unknown as G;
+};
 
 /**
  * Lays out the graphs of a levels page: level 1 (`overview`: domains, systems

package/eventcatalog/src/utils/syntax-highlighter-renderer.ts

@@ -0,0 +1,64 @@
+import { createElement, type CSSProperties, type ReactNode } from 'react';
+import { createStyleObject } from 'react-syntax-highlighter/dist/cjs/create-element.js';
+
+type Stylesheet = { [selector: string]: CSSProperties };
+type HighlightedNode = {
+  type: 'element' | 'text';
+  value?: string | number;
+  tagName?: any;
+  properties?: { className?: string[]; style?: CSSProperties; [key: string]: unknown };
+  children?: HighlightedNode[];
+};
+
+const selectorsByStylesheet = new WeakMap<Stylesheet, Set<string>>();
+
+/** The class names a theme styles, worked out once per theme */
+const stylesheetSelectors = (stylesheet: Stylesheet) => {
+  let selectors = selectorsByStylesheet.get(stylesheet);
+  if (!selectors) {
+    selectors = new Set(Object.keys(stylesheet).flatMap((selector) => selector.split('.')));
+    selectorsByStylesheet.set(stylesheet, selectors);
+  }
+  return selectors;
+};
+
+const renderNode = (node: HighlightedNode, stylesheet: Stylesheet, useInlineStyles: boolean, key: string): ReactNode => {
+  if (node.type === 'text') return node.value;
+  if (!node.tagName) return undefined;
+
+  const properties = node.properties ?? {};
+  const classNames = properties.className;
+  let props;
+  if (!useInlineStyles) {
+    props = { ...properties, className: classNames?.join(' ') };
+  } else {
+    // Theme classes become inline styles; any other class names stay
+    const selectors = stylesheetSelectors(stylesheet);
+    const className =
+      classNames && (classNames.includes('token') ? ['token'] : []).concat(classNames.filter((name) => !selectors.has(name)));
+    props = {
+      ...properties,
+      className: className?.join(' ') || undefined,
+      style: createStyleObject(classNames ?? [], { ...properties.style }, stylesheet),
+    };
+  }
+
+  const children = (node.children ?? []).map((child, i) => renderNode(child, stylesheet, useInlineStyles, `code-segment-1-${i}`));
+  return createElement(node.tagName, { key, ...props }, children);
+};
+
+/**
+ * Renders react-syntax-highlighter's rows as its default renderer does (same elements, styles and keys), but
+ * works out the theme's class names once per theme rather than for every token: the default renderer did
+ * that for every token, which made highlighting a schema on the server take tens of milliseconds a page.
+ * Set `wrapLines`: with a custom renderer, react-syntax-highlighter turns it on when it isn't set.
+ */
+export const renderHighlightedRows = ({
+  rows,
+  stylesheet,
+  useInlineStyles,
+}: {
+  rows: HighlightedNode[];
+  stylesheet: Stylesheet;
+  useInlineStyles: boolean;
+}): ReactNode[] => rows.map((node, i) => renderNode(node, stylesheet, useInlineStyles, `code-segment-${i}`));

package/package.json

@@ -7,7 +7,7 @@
   },
   "license": "BUSL-1.1",
   "type": "module",
-  "version": "5.0.0-beta.15",
+  "version": "5.0.0-beta.17",
   "publishConfig": {
     "access": "public"
   },
@@ -99,6 +99,7 @@
     "gray-matter": "^4.0.3",
     "hono": "^4.13.7",
     "html-to-image": "^1.11.11",
+    "htmlparser2": "^12.0.0",
     "js-yaml": "^4.3.2",
     "jsonpath-plus": "^10.4.0",
     "jsonwebtoken": "^9.0.2",
@@ -140,8 +141,8 @@
     "y-protocols": "^1.0.7",
     "yjs": "^13.6.33",
     "zod": "^4.3.6",
-    "@eventcatalog/linter": "1.2.0-beta.2",
     "@eventcatalog/sdk": "2.30.0-beta.1",
+    "@eventcatalog/linter": "1.2.0-beta.2",
     "@eventcatalog/visualiser": "^5.0.0-beta.6"
   },
   "devDependencies": {