Updated logic for diagram loading

cypress/platform/viewer.js

@@ -36,6 +36,8 @@ const contentLoaded = function () {
       document.getElementsByTagName('body')[0].appendChild(div);
     }
 
+    graphObj.mermaid.extraDiagrams = ['/mermaid-mindmap-detector.js'];
+
     mermaid2.initialize(graphObj.mermaid);
     mermaid2.init();
   }

packages/mermaid-mindmap/src/registry.ts

@@ -1,23 +1,13 @@
 export const id = 'mindmap';
 
-const detectorFunction = (txt: string) => {
+const detector = (txt: string) => {
   return txt.match(/^\s*mindmap/) !== null;
 };
 
 export const loadDiagram = async () => {
-  const diagram = await import('./add-diagram');
+  const { mindmap } = await import('./add-diagram');
-  return { id, detector, diagram };
+  return { id, diagram: mindmap };
 };
-export const detector = async (txt: string) => {
-  if (detectorFunction(txt)) {
-    const diagram = await import('./add-diagram');
-    return { id, diagram };
-  } else {
-    return false;
-  }
-};
-
-export const id = 'mindmap';
 
 export default {
   id,

packages/mermaid/src/Diagram.ts

@@ -1,7 +1,7 @@
 import * as configApi from './config';
 import { log } from './logger';
-import { getDiagram, loadDiagram } from './diagram-api/diagramAPI';
+import { getDiagram, registerDiagram } from './diagram-api/diagramAPI';
-import { detectType, getPathForDiagram } from './diagram-api/detectType';
+import { detectType, getDiagramLoader } from './diagram-api/detectType';
 import { isDetailedError } from './utils';
 export class Diagram {
   type = 'graph';
@@ -12,7 +12,7 @@ export class Diagram {
   constructor(public txt: string, parseError?: Function) {
     const cnf = configApi.getConfig();
     this.txt = txt;
-    this.type = await detectType(txt, cnf);
+    this.type = detectType(txt, cnf);
     const diagram = getDiagram(this.type);
     log.debug('Type ' + this.type);
     // Setup diagram
@@ -75,8 +75,23 @@ export const getDiagramFromText = async (txt: string, parseError?: Function) =>
     // Trying to find the diagram
     getDiagram(type);
   } catch (error) {
+    const loader = getDiagramLoader(type);
+    if (!loader) {
+      throw new Error(`Diagram ${type} not found.`);
+    }
     // Diagram not avaiable, loading it
     // const path = getPathForDiagram(type);
+    const { diagram } = await loader(); // eslint-disable-line @typescript-eslint/no-explicit-any
+    registerDiagram(
+      type,
+      {
+        db: diagram.db,
+        renderer: diagram.renderer,
+        parser: diagram.parser,
+        styles: diagram.styles,
+      },
+      diagram.injectUtils
+    );
     // await loadDiagram('./packages/mermaid-mindmap/dist/mermaid-mindmap.js');
     // await loadDiagram(path + 'mermaid-' + type + '.js');
     // new diagram will try getDiagram again and if fails then it is a valid throw

packages/mermaid/src/config.type.ts

@@ -3,7 +3,7 @@
 import DOMPurify from 'dompurify';
 
 export interface MermaidConfig {
-  extraDiagrams: any;
+  extraDiagrams?: any;
   theme?: string;
   themeVariables?: any;
   themeCSS?: string;

packages/mermaid/src/defaultConfig.ts

@@ -115,7 +115,7 @@ const config: Partial<MermaidConfig> = {
    * Default value: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
    */
   secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
-
+  extraDiagrams: [],
   /**
    * This option controls if the generated ids of nodes in the SVG are generated randomly or based
    * on a seed. If set to false, the IDs are generated based on the current date and thus are not

packages/mermaid/src/diagram-api/detectType.ts

@@ -1,12 +1,13 @@
 import { MermaidConfig } from '../config.type';
 
 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;
 
-const detectors: Record<string, DiagramDetector> = {};
+const detectors: Record<string, DetectorRecord> = {};
 
 /**
  * @function detectType Detects the type of the graph text. Takes into consideration the possible
@@ -36,7 +37,7 @@ export const detectType = function (text: string, config?: MermaidConfig): strin
 
   // console.log(detectors);
 
-  for (const [key, detector] of Object.entries(detectors)) {
+  for (const [key, { detector }] of Object.entries(detectors)) {
     const diagram = detector(text, config);
     if (diagram) {
       return key;
@@ -47,6 +48,12 @@ export const detectType = function (text: string, config?: MermaidConfig): strin
   return 'flowchart';
 };
 
-export const addDetector = (key: string, detector: DiagramDetector) => {
+export const addDetector = (
-  detectors[key] = detector;
+  key: string,
+  detector: DiagramDetector,
+  loader: DiagramLoader | null
+) => {
+  detectors[key] = { detector, loader };
 };
+
+export const getDiagramLoader = (key: string) => detectors[key].loader;

packages/mermaid/src/diagram-api/diagram-orchestration.ts

@@ -112,7 +112,7 @@ const registerDiagramAndDetector = (
   detector: DiagramDetector
 ) => {
   registerDiagram(id, diagram);
-  registerDetector(id, detector, '');
+  registerDetector(id, detector);
 };
 
 export const addDiagrams = () => {

packages/mermaid/src/diagram-api/diagramAPI.spec.ts

@@ -19,17 +19,13 @@ describe('DiagramAPI', () => {
     const detector: DiagramDetector = (str: string) => {
       return str.match('loki') !== null;
     };
-    registerDetector('loki', detector, '');
+    registerDetector('loki', detector);
-    registerDiagram(
+    registerDiagram('loki', {
-      'loki',
+      db: {},
-      {
+      parser: {},
-        db: {},
+      renderer: {},
-        parser: {},
+      styles: {},
-        renderer: {},
+    });
-        styles: {},
-      },
-      (text: string) => text.includes('loki')
-    );
     expect(getDiagram('loki')).not.toBeNull();
     expect(detectType('loki diagram')).toBe('loki');
   });

packages/mermaid/src/diagram-api/diagramAPI.ts

@@ -18,12 +18,21 @@ export const getConfig = _getConfig;
 export const sanitizeText = (text: string) => _sanitizeText(text, getConfig());
 export const setupGraphViewbox = _setupGraphViewbox;
 
+export interface InjectUtils {
+  _log: any;
+  _setLogLevel: any;
+  _getConfig: any;
+  _sanitizeText: any;
+  _setupGraphViewbox: any;
+}
+
 export interface DiagramDefinition {
   db: any;
   renderer: any;
   parser: any;
   styles: any;
   init?: (config: MermaidConfig) => void;
+  injectUtils?: (utils: InjectUtils) => void;
 }
 
 const diagrams: Record<string, DiagramDefinition> = {};
@@ -32,8 +41,8 @@ export interface Detectors {
   [key: string]: DiagramDetector;
 }
 
-export const registerDetector = (id: string, detector: DiagramDetector, path: string) => {
+export const registerDetector = (id: string, detector: DiagramDetector) => {
-  addDetector(id, detector, path);
+  addDetector(id, detector, null);
 };
 
 export const registerDiagram = (
@@ -52,7 +61,9 @@ export const registerDiagram = (
   }
   diagrams[id] = diagram;
   addStylesForDiagram(id, diagram.styles);
-  connectCallbacks[id] = callback;
+  if (typeof callback !== 'undefined') {
+    callback(log, setLogLevel, getConfig, sanitizeText, setupGraphViewbox);
+  }
 };
 
 export const getDiagram = (name: string): DiagramDefinition => {

packages/mermaid/src/mermaid.ts

@@ -54,10 +54,24 @@ const init = async function (
 ) {
   try {
     log.info('Detectors in init', mermaid.detectors); // eslint-disable-line
+    const conf = mermaidAPI.getConfig();
+    if (typeof conf.extraDiagrams !== 'undefined' && conf.extraDiagrams.length > 0) {
+      // config.extraDiagrams.forEach(async (diagram: string) => {
+      const apa = await import(conf.extraDiagrams[0]);
+      // Todo figure out how to get the diagram properly
+      //@ts-ignore temporary code
+      const did = window['mermaid-mindmap-detector'].default.id; //eslint-disable-line
+      //@ts-ignore temporary code
+      const detector = window['mermaid-mindmap-detector'].default.detector; //eslint-disable-line
+      //@ts-ignore temporary code
+      const loader = window['mermaid-mindmap-detector'].default.loadDiagram; //eslint-disable-line
+      addDetector(did, detector, loader);
+      // });
+    }
     mermaid.detectors.forEach(({ id, detector, path }) => {
       addDetector(id, detector, path);
     });
-    initThrowsErrors(config, nodes, callback);
+    await initThrowsErrors(config, nodes, callback);
   } catch (e) {
     log.warn('Syntax Error rendering');
     if (isDetailedError(e)) {
@@ -164,8 +178,8 @@ const initThrowsErrors = async function (
   }
 };
 
-const initialize = function (config: MermaidConfig) {
+const initialize = async function (config: MermaidConfig) {
-  mermaidAPI.initialize(config);
+  await mermaidAPI.initialize(config);
 };
 
 /**

packages/mermaid/src/mermaidAPI.ts

@@ -487,13 +487,6 @@ async function initialize(options: MermaidConfig) {
 
   setLogLevel(config.logLevel);
 
-  if (typeof config.extraDiagrams !== 'undefined' && config.extraDiagrams.length > 0) {
-    // config.extraDiagrams.forEach(async (diagram: string) => {
-    await import(config.extraDiagrams[0]);
-    const { id, detector } = window['mermaid-mindmap-detector']; //eslint-disable-line
-    addDetector(id, detector);
-    // });
-  }
   if (!hasLoadedDiagrams) {
     addDiagrams();
     hasLoadedDiagrams = true;