From 982c1b497960fdf48ee1606343e53e3162a3100c Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Mon, 26 Sep 2022 14:22:21 +0200
Subject: [PATCH] #3061 Lazy loading auto derived path

---
 .vite/build.ts                                |  2 +-
 cypress/platform/knsv2.html                   | 15 ++++----
 packages/mermaid-mindmap/src/add-diagram.ts   | 23 ++++++++++++
 packages/mermaid-mindmap/src/diagram.ts       | 36 -------------------
 .../mermaid-mindmap/src/mindmapDetector.ts    |  5 ---
 packages/mermaid-mindmap/src/registry.ts      | 16 ++++++++-
 packages/mermaid/src/Diagram.ts               | 22 ++++++++++--
 .../src/dagre-wrapper/mermaid-graphlib.js     |  2 --
 .../mermaid/src/diagram-api/detectType.ts     | 18 +++++++---
 .../src/diagram-api/diagram-orchestration.ts  |  6 ++--
 .../src/diagram-api/diagramAPI.spec.ts        |  2 +-
 .../mermaid/src/diagram-api/diagramAPI.ts     | 20 +++++++++--
 packages/mermaid/src/mermaid.ts               |  4 +--
 packages/mermaid/src/mermaidAPI.ts            |  9 ++---
 14 files changed, 109 insertions(+), 71 deletions(-)
 create mode 100644 packages/mermaid-mindmap/src/add-diagram.ts
 delete mode 100644 packages/mermaid-mindmap/src/diagram.ts
diff --git a/.vite/build.ts b/.vite/build.ts
index c263f78ea..306e4cc05 100644
--- a/.vite/build.ts
+++ b/.vite/build.ts
@@ -22,7 +22,7 @@ const packageOptions = {
   'mermaid-mindmap': {
     name: 'mermaid-mindmap',
     packageName: 'mermaid-mindmap',
-    file: 'diagram.ts',
+    file: 'add-diagram.ts',
   },
   'mermaid-mindmap-detector': {
     name: 'mermaid-mindmap-detector',
diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index 0c887f246..f005e1088 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -45,18 +45,19 @@
   </head>
   <body>
     <div>Security check</div>
-    <pre id="diagram" class="mermaid">
-flowchart LR
-      A -> B
-    </pre>
     <pre id="diagram" class="mermaid2">
-        mindmap((
+            flowchart LR
+          A -> B
+        </pre
+    >
+    <pre id="diagram" class="mermaid">
+            mindmap
           root
             ch1
             ch2
-    </pre>
+        </pre
+    >
     <script src="./packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script>
-    <script src="./packages/mermaid-mindmap/dist/mermaid-mindmap.js"></script>
     <script src="./packages/mermaid/dist/mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
diff --git a/packages/mermaid-mindmap/src/add-diagram.ts b/packages/mermaid-mindmap/src/add-diagram.ts
new file mode 100644
index 000000000..1fe950b14
--- /dev/null
+++ b/packages/mermaid-mindmap/src/add-diagram.ts
@@ -0,0 +1,23 @@
+// @ts-ignore: TODO Fix ts errors
+import mindmapParser from './parser/mindmap';
+import * as mindmapDb from './mindmapDb';
+import mindmapRenderer from './mindmapRenderer';
+import mindmapStyles from './styles';
+import { injectUtils } from './mermaidUtils';
+
+// const getBaseFolder = (path: string) => {
+//   const parts = path.split('/');
+//   parts.pop();
+//   return parts.join('/');
+// };
+
+window.mermaid.connectDiagram(
+  'mindmap',
+  {
+    db: mindmapDb,
+    renderer: mindmapRenderer,
+    parser: mindmapParser,
+    styles: mindmapStyles,
+  },
+  injectUtils
+);
diff --git a/packages/mermaid-mindmap/src/diagram.ts b/packages/mermaid-mindmap/src/diagram.ts
deleted file mode 100644
index 8161a8e98..000000000
--- a/packages/mermaid-mindmap/src/diagram.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-// @ts-ignore: TODO Fix ts errors
-import mindmapParser from './parser/mindmap';
-import * as mindmapDb from './mindmapDb';
-import mindmapRenderer from './mindmapRenderer';
-import mindmapStyles from './styles';
-import { injectUtils } from './mermaidUtils';
-// import mermaid from 'mermaid';
-
-// console.log('mindmapDb', mindmapDb.getMindmap()); // eslint-disable-line no-console
-// registerDiagram()
-
-if (typeof document !== 'undefined') {
-  /*!
-   * Wait for document loaded before starting the execution
-   */
-  //   { parser: mindmapParser, db: mindmapDb, renderer: mindmapRenderer, styles: mindmapStyles },
-
-  window.addEventListener(
-    'load',
-    () => {
-      if (window.mermaid && typeof window.mermaid.c) {
-        window.mermaid.connectDiagram(
-          'mindmap',
-          {
-            db: mindmapDb,
-            renderer: mindmapRenderer,
-            parser: mindmapParser,
-            styles: mindmapStyles,
-          },
-          injectUtils
-        );
-      }
-    },
-    false
-  );
-}
diff --git a/packages/mermaid-mindmap/src/mindmapDetector.ts b/packages/mermaid-mindmap/src/mindmapDetector.ts
index 33aec7deb..9a3f6f426 100644
--- a/packages/mermaid-mindmap/src/mindmapDetector.ts
+++ b/packages/mermaid-mindmap/src/mindmapDetector.ts
@@ -1,8 +1,3 @@
-// import type { DiagramDetector } from '../../diagram-api/detectType';
-
-// export const mindmapDetector: DiagramDetector = (txt) => {
-//   return txt.match(/^\s*mindmap/) !== null;
-// };
 export const mindmapDetector = (txt: string) => {
   return txt.match(/^\s*mindmap/) !== null;
 };
diff --git a/packages/mermaid-mindmap/src/registry.ts b/packages/mermaid-mindmap/src/registry.ts
index 141b6e25e..8252bc78e 100644
--- a/packages/mermaid-mindmap/src/registry.ts
+++ b/packages/mermaid-mindmap/src/registry.ts
@@ -1,6 +1,16 @@
 // @ts-ignore: TODO Fix ts errors
 import { mindmapDetector } from './mindmapDetector';
 
+// const getBaseFolder = () => {
+const scriptElement = document.currentScript as HTMLScriptElement;
+const path = scriptElement.src;
+const lastSlash = path.lastIndexOf('/');
+const baseFolder = lastSlash < 0 ? path : path.substring(0, lastSlash + 1);
+
+// };
+
+// console.log('Current script', getBaseFolder(scriptElement !== null ? scriptElement.src : '')); // eslint-disable-line no-console
+
 if (typeof document !== 'undefined') {
   if (window.mermaid && typeof window.mermaid.detectors === 'object') {
     window.mermaid.detectors.push({ id: 'mindmap', detector: mindmapDetector });
@@ -18,7 +28,11 @@ if (typeof document !== 'undefined') {
     'load',
     () => {
       if (window.mermaid && typeof window.mermaid.detectors === 'object') {
-        window.mermaid.detectors.push({ id: 'mindmap', detector: mindmapDetector });
+        window.mermaid.detectors.push({
+          id: 'mindmap',
+          detector: mindmapDetector,
+          path: baseFolder,
+        });
         // console.error(window.mermaid.detectors); // eslint-disable-line no-console
       }
     },
diff --git a/packages/mermaid/src/Diagram.ts b/packages/mermaid/src/Diagram.ts
index a56338955..231a78af6 100644
--- a/packages/mermaid/src/Diagram.ts
+++ b/packages/mermaid/src/Diagram.ts
@@ -1,7 +1,7 @@
 import * as configApi from './config';
 import { log } from './logger';
-import { getDiagram } from './diagram-api/diagramAPI';
-import { detectType } from './diagram-api/detectType';
+import { getDiagram, loadDiagram } from './diagram-api/diagramAPI';
+import { detectType, getPathForDiagram } from './diagram-api/detectType';
 import { isDetailedError } from './utils';
 export class Diagram {
   type = 'graph';
@@ -67,3 +67,21 @@ export class Diagram {
 }
 
 export default Diagram;
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+export const getDiagramFromText = async (txt: string, parseError?: Function) => {
+  const type = detectType(txt, configApi.getConfig());
+  try {
+    // Trying to find the diagram
+    getDiagram(type);
+  } catch (error) {
+    // Diagram not avaiable, loading it
+    const path = getPathForDiagram(type);
+    // 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
+  }
+  // If either of the above worked, we have the diagram
+  // logic and can continue
+  return new Diagram(txt, parseError);
+};
diff --git a/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.js b/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.js
index fd9e40925..4c283b12f 100644
--- a/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.js
+++ b/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.js
@@ -39,8 +39,6 @@ const edgeInCluster = (edge, clusterId) => {
     log.debug('Tilt, ', clusterId, ',not in decendants');
     return false;
   }
-  log.info('Here ');
-
   if (decendants[clusterId].indexOf(edge.v) >= 0) return true;
   if (isDecendant(edge.v, clusterId)) return true;
   if (isDecendant(edge.w, clusterId)) return true;
diff --git a/packages/mermaid/src/diagram-api/detectType.ts b/packages/mermaid/src/diagram-api/detectType.ts
index 12a4e587f..afb9a9078 100644
--- a/packages/mermaid/src/diagram-api/detectType.ts
+++ b/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 DetectorRecord = { detector: DiagramDetector; path: string };
 
 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,8 +37,8 @@ export const detectType = function (text: string, config?: MermaidConfig): strin
 
   // console.log(detectors);
 
-  for (const [key, detector] of Object.entries(detectors)) {
-    if (detector(text, config)) {
+  for (const [key, detectorRecord] of Object.entries(detectors)) {
+    if (detectorRecord.detector(text, config)) {
       return key;
     }
   }
@@ -46,6 +47,13 @@ export const detectType = function (text: string, config?: MermaidConfig): strin
   return 'flowchart';
 };
 
-export const addDetector = (key: string, detector: DiagramDetector) => {
-  detectors[key] = detector;
+export const addDetector = (key: string, detector: DiagramDetector, path: string) => {
+  detectors[key] = { detector, path };
+};
+
+export const getPathForDiagram = (id: string) => {
+  const detectorRecord = detectors[id];
+  if (detectorRecord) {
+    return detectorRecord.path;
+  }
 };
diff --git a/packages/mermaid/src/diagram-api/diagram-orchestration.ts b/packages/mermaid/src/diagram-api/diagram-orchestration.ts
index 0e28f113d..912559c90 100644
--- a/packages/mermaid/src/diagram-api/diagram-orchestration.ts
+++ b/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 = () => {
@@ -136,9 +136,9 @@ export const addDiagrams = () => {
       init: () => {
         // no op
       },
-    }
+    },
+    (text) => text.toLowerCase().trim() === 'error'
   );
-  registerDetector('error', (text) => text.toLowerCase().trim() === 'error');
 
   registerDiagramAndDetector(
     'c4',
diff --git a/packages/mermaid/src/diagram-api/diagramAPI.spec.ts b/packages/mermaid/src/diagram-api/diagramAPI.spec.ts
index 6fbae5e8c..018e72bd4 100644
--- a/packages/mermaid/src/diagram-api/diagramAPI.spec.ts
+++ b/packages/mermaid/src/diagram-api/diagramAPI.spec.ts
@@ -19,7 +19,7 @@ describe('DiagramAPI', () => {
     const detector: DiagramDetector = (str: string) => {
       return str.match('loki') !== null;
     };
-    registerDetector('loki', detector);
+    registerDetector('loki', detector, '');
     registerDiagram(
       'loki',
       {
diff --git a/packages/mermaid/src/diagram-api/diagramAPI.ts b/packages/mermaid/src/diagram-api/diagramAPI.ts
index bd09aa0dd..beb770f31 100644
--- a/packages/mermaid/src/diagram-api/diagramAPI.ts
+++ b/packages/mermaid/src/diagram-api/diagramAPI.ts
@@ -32,8 +32,8 @@ export interface Detectors {
   [key: string]: DiagramDetector;
 }
 
-export const registerDetector = (id: string, detector: DiagramDetector) => {
-  addDetector(id, detector);
+export const registerDetector = (id: string, detector: DiagramDetector, path: string) => {
+  addDetector(id, detector, path);
 };
 
 export const registerDiagram = (
@@ -61,3 +61,19 @@ export const getDiagram = (name: string): DiagramDefinition => {
   }
   throw new Error(`Diagram ${name} not found.`);
 };
+
+/**
+ *
+ * @param sScriptSrc
+ */
+export const loadDiagram = (sScriptSrc: string) =>
+  new Promise((resolve) => {
+    const oHead = document.getElementsByTagName('HEAD')[0];
+    const oScript = document.createElement('script');
+    oScript.type = 'text/javascript';
+    oScript.src = sScriptSrc;
+    oHead.appendChild(oScript);
+    oScript.onload = () => {
+      resolve(true);
+    };
+  });
diff --git a/packages/mermaid/src/mermaid.ts b/packages/mermaid/src/mermaid.ts
index 597109618..a7af45510 100644
--- a/packages/mermaid/src/mermaid.ts
+++ b/packages/mermaid/src/mermaid.ts
@@ -54,8 +54,8 @@ const init = function (
 ) {
   try {
     log.info('Detectors in init', mermaid.detectors); // eslint-disable-line
-    mermaid.detectors.forEach(({ id, detector }) => {
-      addDetector(id, detector);
+    mermaid.detectors.forEach(({ id, detector, path }) => {
+      addDetector(id, detector, path);
     });
     initThrowsErrors(config, nodes, callback);
   } catch (e) {
diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
index db1f8d453..30a68ce29 100644
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -22,7 +22,7 @@ import classDb from './diagrams/class/classDb';
 import flowDb from './diagrams/flowchart/flowDb';
 import flowRenderer from './diagrams/flowchart/flowRenderer';
 import ganttDb from './diagrams/gantt/ganttDb';
-import Diagram from './Diagram';
+import Diagram, { getDiagramFromText } from './Diagram';
 import errorRenderer from './diagrams/error/errorRenderer';
 import { attachFunctions } from './interactionDb';
 import { log, setLogLevel } from './logger';
@@ -115,12 +115,12 @@ export const decodeEntities = function (text: string): string {
  *   element will be removed when rendering is completed.
  * @returns {void}
  */
-const render = function (
+const render = async function (
   id: string,
   text: string,
   cb: (svgCode: string, bindFunctions?: (element: Element) => void) => void,
   container?: Element
-): void {
+): Promise<void> {
   if (!hasLoadedDiagrams) {
     addDiagrams();
     hasLoadedDiagrams = true;
@@ -232,7 +232,8 @@ const render = function (
   let diag;
   let parseEncounteredException;
   try {
-    diag = new Diagram(text);
+    // diag = new Diagram(text);
+    diag = await getDiagramFromText(text);
   } catch (error) {
     diag = new Diagram('error');
     parseEncounteredException = error;
