Merge pull request #5535 from mermaid-js/sidv/5237

Internal

.build/common.ts

@@ -22,14 +22,9 @@ export const packageOptions = {
     packageName: 'mermaid-zenuml',
     file: 'detector.ts',
   },
-  'mermaid-flowchart-elk': {
-    name: 'mermaid-flowchart-elk',
-    packageName: 'mermaid-flowchart-elk',
-    file: 'detector.ts',
-  },
   'mermaid-layout-elk': {
     name: 'mermaid-layout-elk',
     packageName: 'mermaid-layout-elk',
-    file: 'index.ts',
+    file: 'layouts.ts',
   },
 } as const;

.build/jisonTransformer.ts

@@ -1,6 +1,7 @@
 import jison from 'jison';
 
 export const transformJison = (src: string): string => {
+  // @ts-ignore - Jison is not typed properly
   const parser = new jison.Generator(src, {
     moduleType: 'js',
     'token-stack': true,

.cspell/code-terms.txt

@@ -27,6 +27,7 @@ controly
 CSSCLASS
 CYLINDEREND
 CYLINDERSTART
+DAGA
 datakey
 DEND
 descr

.esbuild/build.ts

@@ -7,8 +7,8 @@ import { MermaidBuildOptions, defaultOptions, getBuildConfig } from './util.js';
 const shouldVisualize = process.argv.includes('--visualize');
 
 const buildPackage = async (entryName: keyof typeof packageOptions) => {
-  const commonOptions = { ...defaultOptions, entryName } as const;
+  const commonOptions: MermaidBuildOptions = { ...defaultOptions, entryName } as const;
-  const buildConfigs = [
+  const buildConfigs: MermaidBuildOptions[] = [
     // package.mjs
     { ...commonOptions },
     // package.min.mjs

.esbuild/util.ts

@@ -8,7 +8,7 @@ import { jisonPlugin } from './jisonPlugin.js';
 
 const __dirname = fileURLToPath(new URL('.', import.meta.url));
 
-export interface MermaidBuildOptions {
+export interface MermaidBuildOptions extends BuildOptions {
   minify: boolean;
   core: boolean;
   metafile: boolean;

cypress/platform/knsv2.html

@@ -508,6 +508,8 @@ mindmap
       // import mindmap from '../../packages/mermaid-mindmap/src/detector';
       // import example from '../../packages/mermaid-example-diagram/src/mermaid-example-diagram.core.mjs';
       import mermaid from './mermaid.esm.mjs';
+      import { layouts } from './mermaid-layout-elk.esm.mjs';
+      mermaid.registerLayoutLoaders(layouts);
       // await mermaid.registerExternalDiagrams([example]);
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);

packages/mermaid-layout-elk/package.json

@@ -34,7 +34,7 @@
     "elkjs": "^0.9.3",
     "d3": "^7.9.0"
   },
-  "devDependencies": {
+  "peerDependencies": {
     "mermaid": "workspace:^"
   },
   "files": [

packages/mermaid-layout-elk/src/layouts.ts

@@ -0,0 +1,17 @@
+import type { LayoutLoaderDefinition } from 'mermaid';
+
+const loader = async () => await import(`./render.js`);
+const algos = ['elk.stress', 'elk.force', 'elk.mrtree', 'elk.sporeOverlap'];
+
+export const layouts: LayoutLoaderDefinition[] = [
+  {
+    name: 'elk',
+    loader,
+    algorithm: 'elk.layered',
+  },
+  ...algos.map((algo) => ({
+    name: algo,
+    loader,
+    algorithm: algo,
+  })),
+];

packages/mermaid-layout-elk/src/render.ts

@@ -1,21 +1,22 @@
 // @ts-nocheck File not ready to check types
-
+import { curveLinear } from 'd3';
 import ELK from 'elkjs/lib/elk.bundled.js';
-import { getConfig } from '../../mermaid/src/config.js';
+import mermaid from 'mermaid';
-import common from '../../mermaid/src/diagrams/common/common.js';
+import { findCommonAncestor } from './find-common-ancestor.js';
-import { log } from '../../mermaid/src/logger.js';
+
-import { insertCluster } from '../../mermaid/src/rendering-util/rendering-elements/clusters.js';
+const {
-import {
+  common,
+  getConfig,
+  insertCluster,
   insertEdge,
   insertEdgeLabel,
+  insertMarkers,
+  insertNode,
+  interpolateToCurve,
+  labelHelper,
+  log,
   positionEdgeLabel,
-} from '../../mermaid/src/rendering-util/rendering-elements/edges.js';
+} = mermaid.internalHelpers;
-import { curveLinear } from 'd3';
-import { interpolateToCurve } from '../../mermaid/src/utils.js';
-import insertMarkers from '../../mermaid/src/rendering-util/rendering-elements/markers.js';
-import { insertNode } from '../../mermaid/src/rendering-util/rendering-elements/nodes.js';
-import { labelHelper } from '../../mermaid/src/rendering-util/rendering-elements/shapes/util.js';
-import { findCommonAncestor } from './find-common-ancestor.js';
 
 const nodeDb = {};
 const portPos = {};
@@ -214,25 +215,6 @@ const addSubGraphs = function (nodeArr) {
   return parentLookupDb;
 };
 
-const insertChildren = (nodeArray, parentLookupDb) => {
-  nodeArray.forEach((node) => {
-    // Check if we have reached the end of the tree
-    if (!node.children) {
-      node.children = [];
-    }
-    // Check if the node has children
-    const childIds = parentLookupDb.childrenById[node.id];
-    // If the node has children, add them to the node
-    if (childIds) {
-      childIds.forEach((childId) => {
-        node.children.push(nodeDb[childId]);
-      });
-    }
-    // Recursive call
-    insertChildren(node.children, parentLookupDb);
-  });
-};
-
 const getEdgeStartEndPoint = (edge, dir) => {
   let source = edge.start;
   let target = edge.end;
@@ -272,14 +254,6 @@ const calcOffset = function (src, dest, parentLookupDb) {
 
 /**
  * Add edges to graph based on parsed graph definition
- *
- * @param {object} edges The edges to add to the graph
- * @param {object} g The graph object
- * @param cy
- * @param diagObj
- * @param dataForLayout
- * @param graph
- * @param svg
  */
 export const addEdges = function (dataForLayout, graph, svg) {
   log.info('abc78 DAGA edges = ', dataForLayout);

packages/mermaid-layout-elk/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "rootDir": "../..",
+    "rootDir": "./src",
     "outDir": "./dist",
     "types": ["vitest/importMeta", "vitest/globals"]
   },

packages/mermaid/src/internals.ts

@@ -0,0 +1,31 @@
+import { getConfig } from './config.js';
+import common from './diagrams/common/common.js';
+import { log } from './logger.js';
+import { insertCluster } from './rendering-util/rendering-elements/clusters.js';
+import {
+  insertEdge,
+  insertEdgeLabel,
+  positionEdgeLabel,
+} from './rendering-util/rendering-elements/edges.js';
+import insertMarkers from './rendering-util/rendering-elements/markers.js';
+import { insertNode } from './rendering-util/rendering-elements/nodes.js';
+import { labelHelper } from './rendering-util/rendering-elements/shapes/util.js';
+import { interpolateToCurve } from './utils.js';
+
+/**
+ * Internal helpers for mermaid
+ * @deprecated - This should not be used by external packages, as the definitions will change without notice.
+ */
+export const internalHelpers = {
+  common,
+  getConfig,
+  insertCluster,
+  insertEdge,
+  insertEdgeLabel,
+  insertMarkers,
+  insertNode,
+  interpolateToCurve,
+  labelHelper,
+  log,
+  positionEdgeLabel,
+};

packages/mermaid/src/mermaid.ts

@@ -16,6 +16,9 @@ import type { DetailedError } from './utils.js';
 import type { ExternalDiagramDefinition } from './diagram-api/types.js';
 import type { UnknownDiagramError } from './errors.js';
 import { addDiagrams } from './diagram-api/diagram-orchestration.js';
+import { registerLayoutLoaders } from './rendering-util/render.js';
+import type { LayoutLoaderDefinition } from './rendering-util/render.js';
+import { internalHelpers } from './internals.js';
 
 export type {
   MermaidConfig,
@@ -26,6 +29,7 @@ export type {
   ParseOptions,
   ParseResult,
   UnknownDiagramError,
+  LayoutLoaderDefinition,
 };
 
 export interface RunOptions {
@@ -413,11 +417,17 @@ export interface Mermaid {
   render: typeof render;
   init: typeof init;
   run: typeof run;
+  registerLayoutLoaders: typeof registerLayoutLoaders;
   registerExternalDiagrams: typeof registerExternalDiagrams;
   initialize: typeof initialize;
   contentLoaded: typeof contentLoaded;
   setParseErrorHandler: typeof setParseErrorHandler;
   detectType: typeof detectType;
+  /**
+   * Internal helpers for mermaid
+   * @deprecated - This should not be used by external packages, as the definitions will change without notice.
+   */
+  internalHelpers: typeof internalHelpers;
 }
 
 const mermaid: Mermaid = {
@@ -428,11 +438,13 @@ const mermaid: Mermaid = {
   init,
   run,
   registerExternalDiagrams,
+  registerLayoutLoaders,
   initialize,
   parseError: undefined,
   contentLoaded,
   setParseErrorHandler,
   detectType,
+  internalHelpers,
 };
 
 export default mermaid;

packages/mermaid/src/rendering-util/render.js

@@ -1,34 +0,0 @@
-export const render = async (data4Layout, svg, element) => {
-  switch (data4Layout.layoutAlgorithm) {
-    case 'dagre': {
-      const layoutRenderer = await import('./layout-algorithms/dagre/index.js');
-      return layoutRenderer.render(data4Layout, svg, element);
-    }
-
-    case 'elk': {
-      // TODO: Should fix this import path
-      const layoutRenderer = await import('../../../mermaid-layout-elk/src/index.js');
-      return layoutRenderer.render(data4Layout, svg, element, 'elk.layered');
-    }
-    case 'stress': {
-      // TODO: Should fix this import path
-      const layoutRenderer = await import('../../../mermaid-layout-elk/src/index.js');
-      return layoutRenderer.render(data4Layout, svg, element, 'elk.stress');
-    }
-    case 'force': {
-      // TODO: Should fix this import path
-      const layoutRenderer = await import('../../../mermaid-layout-elk/src/index.js');
-      return layoutRenderer.render(data4Layout, svg, element, 'elk.force');
-    }
-    case 'mrtree': {
-      // TODO: Should fix this import path
-      const layoutRenderer = await import('../../../mermaid-layout-elk/src/index.js');
-      return layoutRenderer.render(data4Layout, svg, element, 'elk.mrtree');
-    }
-    case 'sporeOverlap': {
-      // TODO: Should fix this import path
-      const layoutRenderer = await import('../../../mermaid-layout-elk/src/index.js');
-      return layoutRenderer.render(data4Layout, svg, element, 'elk.sporeOverlap');
-    }
-  }
-};

packages/mermaid/src/rendering-util/render.ts

@@ -0,0 +1,40 @@
+export interface LayoutAlgorithm {
+  render(data4Layout: any, svg: any, element: any, algorithm?: string): any;
+}
+
+export type LayoutLoader = () => Promise<LayoutAlgorithm>;
+export interface LayoutLoaderDefinition {
+  name: string;
+  loader: LayoutLoader;
+  algorithm?: string;
+}
+
+const layoutAlgorithms: Record<string, LayoutLoaderDefinition> = {};
+
+export const registerLayoutLoaders = (loaders: LayoutLoaderDefinition[]) => {
+  for (const loader of loaders) {
+    layoutAlgorithms[loader.name] = loader;
+  }
+};
+
+// TODO: Should we load dagre without lazy loading?
+const registerDefaultLayoutLoaders = () => {
+  registerLayoutLoaders([
+    {
+      name: 'dagre',
+      loader: async () => await import('./layout-algorithms/dagre/index.js'),
+    },
+  ]);
+};
+
+registerDefaultLayoutLoaders();
+
+export const render = async (data4Layout: any, svg: any, element: any) => {
+  if (!(data4Layout.layoutAlgorithm in layoutAlgorithms)) {
+    throw new Error(`Unknown layout algorithm: ${data4Layout.layoutAlgorithm}`);
+  }
+
+  const layoutDefinition = layoutAlgorithms[data4Layout.layoutAlgorithm];
+  const layoutRenderer = await layoutDefinition.loader();
+  return layoutRenderer.render(data4Layout, svg, element, layoutDefinition.algorithm);
+};

packages/mermaid/tsconfig.json

@@ -8,7 +8,6 @@
     "paths": {
       "$root/*": ["src/*"]
     }
-
   },
-  "include": ["./src/**/*.ts", "./package.json"],
+  "include": ["./src/**/*.ts", "./package.json"]
 }

pnpm-lock.yaml

@@ -442,7 +442,6 @@ importers:
       elkjs:
         specifier: ^0.9.3
         version: 0.9.3
-    devDependencies:
       mermaid:
         specifier: workspace:^
         version: link:../mermaid

tsconfig.json

@@ -66,7 +66,7 @@
     // "newLine": "crlf",                                /* Set the newline character for emitting files. */
     // "stripInternal": true,                            /* Disable emitting declarations that have `@internal` in their JSDoc comments. */
     // "noEmitHelpers": true,                            /* Disable generating custom helper functions like `__extends` in compiled output. */
-    // "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
+    "noEmitOnError": false /* Disable emitting files if any type checking errors are reported. */,
     // "preserveConstEnums": true,                       /* Disable erasing `const enum` declarations in generated code. */
     // "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
     // "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */

vite.config.ts

@@ -15,7 +15,6 @@ export default defineConfig({
   plugins: [
     jison(),
     jsonSchemaPlugin(), // handles .schema.yaml JSON Schema files
-    // @ts-expect-error According to the type definitions, rollup plugins are incompatible with vite
     typescript({ compilerOptions: { declaration: false } }),
   ],
   test: {