mermaid-js · knsv · Oct 10, 2022 · Oct 6, 2022 · Oct 7, 2022 · Oct 7, 2022
diff --git a/cypress/platform/sidv.html b/cypress/platform/sidv.html
@@ -0,0 +1,14 @@
+<html>
+  <body>
+    <pre class="mermaid">
+    none
+    hello world
+    </pre>
+    <script src="./mermaid.js"></script>
+    <script>
+      mermaid.initialize({
+        logLevel: 1,
+      });
+    </script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -47,7 +47,8 @@
     "e2e": "start-server-and-test dev http://localhost:9000/ cypress",
     "ci": "vitest run",
     "test": "pnpm lint && vitest run",
-    "test:watch": "vitest --coverage --watch",
+    "test:watch": "vitest --watch",
+    "test:coverage": "vitest --coverage",
     "prepublishOnly": "pnpm build && pnpm test",
     "prepare": "concurrently \"husky install\" \"pnpm build\"",
     "pre-commit": "lint-staged"

diff --git a/packages/mermaid/src/Diagram.ts b/packages/mermaid/src/Diagram.ts
@@ -8,11 +8,18 @@ export class Diagram {
   parser;
   renderer;
   db;
+  private detectTypeFailed = false;
   // eslint-disable-next-line @typescript-eslint/ban-types
   constructor(public txt: string, parseError?: Function) {
     const cnf = configApi.getConfig();
     this.txt = txt;
-    this.type = detectType(txt, cnf);
+    try {
+      this.type = detectType(txt, cnf);
+    } catch (e) {
+      this.handleError(e, parseError);
+      this.type = 'error';
+      this.detectTypeFailed = true;
+    }
     const diagram = getDiagram(this.type);
     log.debug('Type ' + this.type);
     // Setup diagram
@@ -32,29 +39,37 @@ export class Diagram {
 
   // eslint-disable-next-line @typescript-eslint/ban-types
   parse(text: string, parseError?: Function): boolean {
+    if (this.detectTypeFailed) {
+      return false;
+    }
     try {
       text = text + '\n';
       this.db.clear();
       this.parser.parse(text);
       return true;
     } catch (error) {
-      // Is this the correct way to access mermiad's parseError()
-      // method ? (or global.mermaid.parseError()) ?
-      if (parseError) {
-        if (isDetailedError(error)) {
-          // handle case where error string and hash were
-          // wrapped in object like`const error = { str, hash };`
-          parseError(error.str, error.hash);
-        } else {
-          // assume it is just error string and pass it on
-          parseError(error);
-        }
+      this.handleError(error, parseError);
+    }
+    return false;
+  }
+
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  handleError(error: unknown, parseError?: Function) {
+    // Is this the correct way to access mermiad's parseError()
+    // method ? (or global.mermaid.parseError()) ?
+    if (parseError) {
+      if (isDetailedError(error)) {
+        // handle case where error string and hash were
+        // wrapped in object like`const error = { str, hash };`
+        parseError(error.str, error.hash);
       } else {
-        // No mermaid.parseError() handler defined, so re-throw it
-        throw error;
+        // assume it is just error string and pass it on
+        parseError(error);
       }
+    } else {
+      // No mermaid.parseError() handler defined, so re-throw it
+      throw error;
     }
-    return false;
   }
 
   getParser() {

diff --git a/packages/mermaid/src/__mocks__/mermaidAPI.ts b/packages/mermaid/src/__mocks__/mermaidAPI.ts
@@ -11,17 +11,13 @@ import Diagram from '../Diagram';
 // Normally, we could just do the following to get the original `parse()`
 // implementation, however, requireActual returns a promise and it's not documented how to use withing mock file.
 
-let hasLoadedDiagrams = false;
 /**
  * @param text
  * @param parseError
  */
 // eslint-disable-next-line @typescript-eslint/ban-types
 function parse(text: string, parseError?: Function): boolean {
-  if (!hasLoadedDiagrams) {
-    addDiagrams();
-    hasLoadedDiagrams = true;
-  }
+  addDiagrams();
   const diagram = new Diagram(text, parseError);
   return diagram.parse(text, parseError);
 }

diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
@@ -3,7 +3,7 @@
 import DOMPurify from 'dompurify';
 
 export interface MermaidConfig {
-  lazyLoadedDiagrams?: any;
+  lazyLoadedDiagrams?: string[];
   theme?: string;
   themeVariables?: any;
   themeCSS?: string;

diff --git a/packages/mermaid/src/diagram-api/detectType.ts b/packages/mermaid/src/diagram-api/detectType.ts
@@ -1,8 +1,7 @@
 import { MermaidConfig } from '../config.type';
+import { log } from '../logger';
+import { DetectorRecord, DiagramDetector, DiagramLoader } from './types';
 
-export type DiagramDetector = (text: string, config?: MermaidConfig) => boolean;
-export type DiagramLoader = (() => any) | null;
-export type DetectorRecord = { detector: DiagramDetector; loader: DiagramLoader };
 const directive =
   /[%]{2}[{]\s*(?:(?:(\w+)\s*:|(\w+))\s*(?:(?:(\w+))|((?:(?![}][%]{2}).|\r?\n)*))?\s*)(?:[}][%]{2})?/gi;
 const anyComment = /\s*%%.*\n/gm;
@@ -34,26 +33,22 @@ const detectors: Record<string, DetectorRecord> = {};
  */
 export const detectType = function (text: string, config?: MermaidConfig): string {
   text = text.replace(directive, '').replace(anyComment, '\n');
-
-  // console.log(detectors);
-
   for (const [key, { detector }] of Object.entries(detectors)) {
     const diagram = detector(text, config);
     if (diagram) {
       return key;
     }
   }
-  // TODO: #3391
-  // throw new Error(`No diagram type detected for text: ${text}`);
-  return 'flowchart';
+
+  throw new Error(`No diagram type detected for text: ${text}`);
 };
 
-export const addDetector = (
-  key: string,
-  detector: DiagramDetector,
-  loader: DiagramLoader | null
-) => {
+export const addDetector = (key: string, detector: DiagramDetector, loader?: DiagramLoader) => {
+  if (detectors[key]) {
+    throw new Error(`Detector with key ${key} already exists`);
+  }
   detectors[key] = { detector, loader };
+  log.debug(`Detector with key ${key} added${loader ? ' with loader' : ''}`);
 };
 
 export const getDiagramLoader = (key: string) => detectors[key].loader;
diff --git a/packages/mermaid/src/diagram-api/diagram-orchestration.ts b/packages/mermaid/src/diagram-api/diagram-orchestration.ts
@@ -1,16 +1,4 @@
-import {
-  registerDiagram,
-  registerDetector,
-  DiagramDefinition,
-  DiagramDetector,
-} from './diagramAPI';
-
-// // @ts-ignore: TODO Fix ts errors
-// import mindmapParser from '../diagrams/mindmap/parser/mindmap';
-// import * as mindmapDb from '../diagrams/mindmap/mindmapDb';
-// import { mindmapDetector } from '../diagrams/mindmap/mindmapDetector';
-// import mindmapRenderer from '../diagrams/mindmap/mindmapRenderer';
-// import mindmapStyles from '../diagrams/mindmap/styles';
+import { registerDiagram } from './diagramAPI';
 
 // @ts-ignore: TODO Fix ts errors
 import gitGraphParser from '../diagrams/git/parser/gitGraph';
@@ -106,17 +94,15 @@ import { setConfig } from '../config';
 import errorRenderer from '../diagrams/error/errorRenderer';
 import errorStyles from '../diagrams/error/styles';
 
-const registerDiagramAndDetector = (
-  id: string,
-  diagram: DiagramDefinition,
-  detector: DiagramDetector
-) => {
-  registerDiagram(id, diagram);
-  registerDetector(id, detector);
-};
-
+let hasLoadedDiagrams = false;
 export const addDiagrams = () => {
-  registerDiagramAndDetector(
+  if (hasLoadedDiagrams) {
+    return;
+  }
+  // This is added here to avoid race-conditions.
+  // We could optimize the loading logic somehow.
+  hasLoadedDiagrams = true;
+  registerDiagram(
     'error',
     // Special diagram with error messages but setup as a regular diagram
     {
@@ -140,7 +126,7 @@ export const addDiagrams = () => {
     (text) => text.toLowerCase().trim() === 'error'
   );
 
-  registerDiagramAndDetector(
+  registerDiagram(
     'c4',
     {
       parser: c4Parser,
@@ -153,7 +139,7 @@ export const addDiagrams = () => {
     },
     c4Detector
   );
-  registerDiagramAndDetector(
+  registerDiagram(
     'class',
     {
       parser: classParser,
@@ -170,7 +156,7 @@ export const addDiagrams = () => {
     },
     classDetector
   );
-  registerDiagramAndDetector(
+  registerDiagram(
     'classDiagram',
     {
       parser: classParser,
@@ -187,7 +173,7 @@ export const addDiagrams = () => {
     },
     classDetectorV2
   );
-  registerDiagramAndDetector(
+  registerDiagram(
     'er',
     {
       parser: erParser,
@@ -197,7 +183,7 @@ export const addDiagrams = () => {
     },
     erDetector
   );
-  registerDiagramAndDetector(
+  registerDiagram(
     'gantt',
     {
       parser: ganttParser,
@@ -207,7 +193,7 @@ export const addDiagrams = () => {
     },
     ganttDetector
   );
-  registerDiagramAndDetector(
+  registerDiagram(
     'info',
     {
       parser: infoParser,
@@ -217,7 +203,7 @@ export const addDiagrams = () => {
     },
     infoDetector
   );
-  registerDiagramAndDetector(
+  registerDiagram(
     'pie',
     {
       parser: pieParser,
@@ -227,7 +213,7 @@ export const addDiagrams = () => {
     },
     pieDetector
   );
-  registerDiagramAndDetector(
+  registerDiagram(
     'requirement',
     {
       parser: requirementParser,
@@ -237,7 +223,7 @@ export const addDiagrams = () => {
     },
     requirementDetector
   );
-  registerDiagramAndDetector(
+  registerDiagram(
     'sequence',
     {
       parser: sequenceParser,
@@ -260,7 +246,7 @@ export const addDiagrams = () => {
     },
     sequenceDetector
   );
-  registerDiagramAndDetector(
+  registerDiagram(
     'state',
     {
       parser: stateParser,
@@ -277,7 +263,7 @@ export const addDiagrams = () => {
     },
     stateDetector
   );
-  registerDiagramAndDetector(
+  registerDiagram(
     'stateDiagram',
     {
       parser: stateParser,
@@ -294,7 +280,7 @@ export const addDiagrams = () => {
     },
     stateDetectorV2
   );
-  registerDiagramAndDetector(
+  registerDiagram(
     'journey',
     {
       parser: journeyParser,
@@ -309,7 +295,7 @@ export const addDiagrams = () => {
     journeyDetector
   );
 
-  registerDiagramAndDetector(
+  registerDiagram(
     'flowchart',
     {
       parser: flowParser,
@@ -329,7 +315,7 @@ export const addDiagrams = () => {
     },
     flowDetector
   );
-  registerDiagramAndDetector(
+  registerDiagram(
     'flowchart-v2',
     {
       parser: flowParser,
@@ -350,14 +336,9 @@ export const addDiagrams = () => {
     },
     flowDetectorV2
   );
-  registerDiagramAndDetector(
+  registerDiagram(
     'gitGraph',
     { parser: gitGraphParser, db: gitGraphDb, renderer: gitGraphRenderer, styles: gitGraphStyles },
     gitGraphDetector
   );
-  // registerDiagram(
-  //   'mindmap',
-  //   { parser: mindmapParser, db: mindmapDb, renderer: mindmapRenderer, styles: mindmapStyles },
-  //   mindmapDetector
-  // );
 };
diff --git a/packages/mermaid/src/diagram-api/diagramAPI.spec.ts b/packages/mermaid/src/diagram-api/diagramAPI.spec.ts
@@ -1,6 +1,7 @@
-import { detectType, DiagramDetector } from './detectType';
-import { getDiagram, registerDiagram, registerDetector } from './diagramAPI';
+import { detectType } from './detectType';
+import { getDiagram, registerDiagram } from './diagramAPI';
 import { addDiagrams } from './diagram-orchestration';
+import { DiagramDetector } from './types';
 
 addDiagrams();
 
@@ -15,17 +16,22 @@ describe('DiagramAPI', () => {
 
   it('should handle diagram registrations', () => {
     expect(() => getDiagram('loki')).toThrow();
-    expect(() => detectType('loki diagram')).not.toThrow(); // TODO: #3391
+    expect(() => detectType('loki diagram')).toThrow(
+      'No diagram type detected for text: loki diagram'
+    );
     const detector: DiagramDetector = (str: string) => {
       return str.match('loki') !== null;
     };
-    registerDetector('loki', detector);
-    registerDiagram('loki', {
-      db: {},
-      parser: {},
-      renderer: {},
-      styles: {},
-    });
+    registerDiagram(
+      'loki',
+      {
+        db: {},
+        parser: {},
+        renderer: {},
+        styles: {},
+      },
+      detector
+    );
     expect(getDiagram('loki')).not.toBeNull();
     expect(detectType('loki diagram')).toBe('loki');
   });