From c05c98c08239b9a517136ee814b95e27f0aea73c Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Wed, 5 Oct 2022 13:14:05 +0200
Subject: [PATCH] WIP

---
 cypress/platform/knsv.html                    |  2 +-
 cypress/platform/knsv2.html                   |  9 ++--
 packages/mermaid-mindmap/src/add-diagram.ts   | 17 +++----
 .../mermaid-mindmap/src/mindmapDetector.ts    |  3 --
 packages/mermaid-mindmap/src/registry.ts      | 50 ++++++++-----------
 packages/mermaid-mindmap/tsconfig.json        |  1 +
 packages/mermaid/src/Diagram.ts               |  6 +--
 packages/mermaid/src/config.type.ts           |  1 +
 .../mermaid/src/diagram-api/detectType.ts     | 19 +++----
 packages/mermaid/src/mermaidAPI.ts            | 11 +++-
 tsconfig.json                                 |  2 +-
 vite.config.ts                                |  8 +++
 12 files changed, 65 insertions(+), 64 deletions(-)

diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html
index d4ffa0c0c..8bd8d7c79 100644
--- a/cypress/platform/knsv.html
+++ b/cypress/platform/knsv.html
@@ -368,7 +368,6 @@ flowchart TD
     </pre>
 
     <!-- <script src="./mermaid.js"></script> -->
-    <script src="./mermaid-mindmap-detector.js"></script>
     <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
@@ -386,6 +385,7 @@ flowchart TD
           htmlLabels: false,
           fontFamily: 'courier',
         },
+        extraDiagrams: ['./mermaid-mindmap-detector.js'],
       });
       function callback() {
         alert('It worked');
diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index 143e12087..fd35eae36 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -86,9 +86,10 @@ mindmap
           gc7((grand<br/>grand<br/>child 8))
         </pre>
     <!-- <div id="cy"></div> -->
-    <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script>
-    <script src="./mermaid-example-diagram-detector.js"></script>
+    <!-- <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> -->
+    <!-- <script src="./mermaid-example-diagram-detector.js"></script>    -->
     <script src="./mermaid.js"></script>
+
     <script>
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
@@ -97,8 +98,10 @@ mindmap
         theme: 'forest',
         startOnLoad: true,
         logLevel: 0,
-        basePath: './packages/',
+        // basePath: './packages/',
         // themeVariables: { darkMode: true },
+        extraDiagrams: ['./mermaid-mindmap-detector.js'],
+        // extraDiagrams: ['../../mermaid-mindmap/registry.ts'],
       });
       function callback() {
         alert('It worked');
diff --git a/packages/mermaid-mindmap/src/add-diagram.ts b/packages/mermaid-mindmap/src/add-diagram.ts
index 873d55232..c8ade1bfa 100644
--- a/packages/mermaid-mindmap/src/add-diagram.ts
+++ b/packages/mermaid-mindmap/src/add-diagram.ts
@@ -5,13 +5,10 @@ import mindmapRenderer from './mindmapRenderer';
 import mindmapStyles from './styles';
 import { injectUtils } from './mermaidUtils';
 
-window.mermaid.connectDiagram(
-  'mindmap',
-  {
-    db: mindmapDb,
-    renderer: mindmapRenderer,
-    parser: mindmapParser,
-    styles: mindmapStyles,
-  },
-  injectUtils
-);
+export const mindmap = {
+  db: mindmapDb,
+  renderer: mindmapRenderer,
+  parser: mindmapParser,
+  styles: mindmapStyles,
+  injectUtils,
+};
diff --git a/packages/mermaid-mindmap/src/mindmapDetector.ts b/packages/mermaid-mindmap/src/mindmapDetector.ts
index 9a3f6f426..e69de29bb 100644
--- a/packages/mermaid-mindmap/src/mindmapDetector.ts
+++ b/packages/mermaid-mindmap/src/mindmapDetector.ts
@@ -1,3 +0,0 @@
-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 e70967ba6..a05b0381a 100644
--- a/packages/mermaid-mindmap/src/registry.ts
+++ b/packages/mermaid-mindmap/src/registry.ts
@@ -1,34 +1,26 @@
-// @ts-ignore: TODO Fix ts errors
-import { mindmapDetector } from './mindmapDetector';
+export const id = 'mindmap';
 
-const scriptElement = document.currentScript as HTMLScriptElement;
-const path = scriptElement.src;
-const lastSlash = path.lastIndexOf('/');
-const baseFolder = lastSlash < 0 ? path : path.substring(0, lastSlash + 1);
+const detectorFunction = (txt: string) => {
+  return txt.match(/^\s*mindmap/) !== null;
+};
 
-if (typeof document !== 'undefined') {
-  if (window.mermaid && typeof window.mermaid.detectors === 'object') {
-    window.mermaid.detectors.push({ id: 'mindmap', detector: mindmapDetector });
+export const loadDiagram = async () => {
+  const diagram = await import('./add-diagram');
+  return { id, detector, diagram };
+};
+export const detector = async (txt: string) => {
+  if (detectorFunction(txt)) {
+    const diagram = await import('./add-diagram');
+    return { id, diagram };
   } else {
-    window.mermaid = {};
-    window.mermaid.detectors = [{ id: 'mindmap', detector: mindmapDetector }];
+    return false;
   }
+};
 
-  /*!
-   * Wait for document loaded before starting the execution.
-   */
-  window.addEventListener(
-    'load',
-    () => {
-      if (window.mermaid && typeof window.mermaid.detectors === 'object') {
-        window.mermaid.detectors.push({
-          id: 'mindmap',
-          detector: mindmapDetector,
-          path: baseFolder,
-        });
-        console.error(window.mermaid.detectors); // eslint-disable-line no-console
-      }
-    },
-    false
-  );
-}
+export const id = 'mindmap';
+
+export default {
+  id,
+  detector,
+  loadDiagram,
+};
diff --git a/packages/mermaid-mindmap/tsconfig.json b/packages/mermaid-mindmap/tsconfig.json
index 45076b7b5..310137cc0 100644
--- a/packages/mermaid-mindmap/tsconfig.json
+++ b/packages/mermaid-mindmap/tsconfig.json
@@ -1,5 +1,6 @@
 {
   "extends": "../../tsconfig.json",
+  "module": "esnext",
   "compilerOptions": {
     "rootDir": "./src",
     "outDir": "./dist"
diff --git a/packages/mermaid/src/Diagram.ts b/packages/mermaid/src/Diagram.ts
index 231a78af6..019031c31 100644
--- a/packages/mermaid/src/Diagram.ts
+++ b/packages/mermaid/src/Diagram.ts
@@ -12,7 +12,7 @@ export class Diagram {
   constructor(public txt: string, parseError?: Function) {
     const cnf = configApi.getConfig();
     this.txt = txt;
-    this.type = detectType(txt, cnf);
+    this.type = await detectType(txt, cnf);
     const diagram = getDiagram(this.type);
     log.debug('Type ' + this.type);
     // Setup diagram
@@ -76,9 +76,9 @@ export const getDiagramFromText = async (txt: string, parseError?: Function) =>
     getDiagram(type);
   } catch (error) {
     // Diagram not avaiable, loading it
-    const path = getPathForDiagram(type);
+    // const path = getPathForDiagram(type);
     // await loadDiagram('./packages/mermaid-mindmap/dist/mermaid-mindmap.js');
-    await loadDiagram(path + 'mermaid-' + type + '.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
diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
index d9d94226f..0e5b83d02 100644
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -3,6 +3,7 @@
 import DOMPurify from 'dompurify';
 
 export interface MermaidConfig {
+  extraDiagrams: any;
   theme?: string;
   themeVariables?: any;
   themeCSS?: string;
diff --git a/packages/mermaid/src/diagram-api/detectType.ts b/packages/mermaid/src/diagram-api/detectType.ts
index afb9a9078..85ddee9a6 100644
--- a/packages/mermaid/src/diagram-api/detectType.ts
+++ b/packages/mermaid/src/diagram-api/detectType.ts
@@ -1,13 +1,12 @@
 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, DetectorRecord> = {};
+const detectors: Record<string, DiagramDetector> = {};
 
 /**
  * @function detectType Detects the type of the graph text. Takes into consideration the possible
@@ -37,8 +36,9 @@ export const detectType = function (text: string, config?: MermaidConfig): strin
 
   // console.log(detectors);
 
-  for (const [key, detectorRecord] of Object.entries(detectors)) {
-    if (detectorRecord.detector(text, config)) {
+  for (const [key, detector] of Object.entries(detectors)) {
+    const diagram = detector(text, config);
+    if (diagram) {
       return key;
     }
   }
@@ -47,13 +47,6 @@ export const detectType = function (text: string, config?: MermaidConfig): strin
   return 'flowchart';
 };
 
-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;
-  }
+export const addDetector = (key: string, detector: DiagramDetector) => {
+  detectors[key] = detector;
 };
diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
index 50eb51ec5..5d7ec8719 100644
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -18,6 +18,7 @@ import { compile, serialize, stringify } from 'stylis';
 import pkg from '../package.json';
 import * as configApi from './config';
 import { addDiagrams } from './diagram-api/diagram-orchestration';
+import { addDetector } from './diagram-api/detectType';
 import classDb from './diagrams/class/classDb';
 import flowDb from './diagrams/flowchart/flowDb';
 import flowRenderer from './diagrams/flowchart/flowRenderer';
@@ -461,7 +462,7 @@ const handleDirective = function (p: any, directive: any, type: string): void {
 };
 
 /** @param {MermaidConfig} options */
-function initialize(options: MermaidConfig) {
+async function initialize(options: MermaidConfig) {
   // Handle legacy location of font-family configuration
   if (options?.fontFamily) {
     if (!options.themeVariables?.fontFamily) {
@@ -485,6 +486,14 @@ function initialize(options: MermaidConfig) {
     typeof options === 'object' ? configApi.setSiteConfig(options) : configApi.getSiteConfig();
 
   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;
diff --git a/tsconfig.json b/tsconfig.json
index 99feb5bda..fe107f205 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -27,7 +27,7 @@
     // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
 
     /* Modules */
-    "module": "ES6" /* Specify what module code is generated. */,
+    "module": "es2022" /* Specify what module code is generated. */,
     // "rootDir": "./packages" /* Specify the root folder within your source files. */,
     "moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */,
     // "baseUrl": "./src" /* Specify the base directory to resolve non-relative module names. */,
diff --git a/vite.config.ts b/vite.config.ts
index 8d34e6184..e79295425 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -15,4 +15,12 @@ export default defineConfig({
       reporter: ['text', 'json', 'html', 'lcov'],
     },
   },
+  build: {
+    /** If you set esmExternals to true, this plugins assumes that
+     all external dependencies are ES modules */
+
+    commonjsOptions: {
+      esmExternals: true,
+    },
+  },
 });