From af2b1945a30d50b27c076b9af61e47e58846e4b4 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Fri, 23 Sep 2022 16:55:30 +0200
Subject: [PATCH] Detector registering itself on load

---
 .vite/build.ts                                |  4 +
 cypress/platform/knsv.html                    | 68 +----------------
 cypress/platform/knsv2.html                   | 24 ++----
 package.json                                  | 18 ++---
 .../mermaid-mindmap-detector/package.json     | 75 +++++++++++++++++++
 .../src/mindmapDetector.ts                    |  8 ++
 .../mermaid-mindmap-detector/src/registry.ts  | 18 +++++
 .../mermaid-mindmap-detector/tsconfig.json    |  9 +++
 packages/mermaid-mindmap/src/diagram.ts       | 26 +++++++
 packages/mermaid-mindmap/src/registry.ts      | 25 +++++--
 packages/mermaid-mindmap/src/types/index.d.ts |  7 ++
 packages/mermaid-mindmap/tsconfig.json        |  3 +-
 packages/mermaid/src/mermaid.ts               |  5 +-
 13 files changed, 194 insertions(+), 96 deletions(-)
 create mode 100644 packages/mermaid-mindmap-detector/package.json
 create mode 100644 packages/mermaid-mindmap-detector/src/mindmapDetector.ts
 create mode 100644 packages/mermaid-mindmap-detector/src/registry.ts
 create mode 100644 packages/mermaid-mindmap-detector/tsconfig.json
 create mode 100644 packages/mermaid-mindmap/src/diagram.ts
 create mode 100644 packages/mermaid-mindmap/src/types/index.d.ts

diff --git a/.vite/build.ts b/.vite/build.ts
index d2ce8423d..f842e669a 100644
--- a/.vite/build.ts
+++ b/.vite/build.ts
@@ -20,6 +20,10 @@ const packageOptions = {
   },
   'mermaid-mindmap': {
     name: 'mermaid-mindmap',
+    file: 'diagram.ts',
+  },
+  'mermaid-mindmap-detector': {
+    name: 'mermaid-mindmap-detector',
     file: 'registry.ts',
   },
 };
diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html
index a06667c1f..a74dec22b 100644
--- a/cypress/platform/knsv.html
+++ b/cypress/platform/knsv.html
@@ -165,47 +165,7 @@ graph TD
     <pre class="mermaid" style="width: 100%">
         info
     </pre>
-    <pre class="mermaid" style="width: 100%">
-requirementDiagram
-      accTitle: My req Diagram
-      accDescr: My req Diagram Description
 
-    requirement test_req {
-    id: 1
-    text: the test text.
-    risk: high
-    verifymethod: test
-    }
-
-    functionalRequirement test_req2 {
-    id: 1.1
-    text: the second test text.
-    risk: low
-    verifymethod: inspection
-    }
-
-    performanceRequirement test_req3 {
-    id: 1.2
-    text: the third test text.
-    risk: medium
-    verifymethod: demonstration
-    }
-
-    element test_entity {
-    type: simulation
-    }
-
-    element test_entity2 {
-    type: word doc
-    docRef: reqs/test_entity
-    }
-
-
-    test_entity - satisfies -> test_req2
-    test_req - traces -> test_req2
-    test_req - contains -> test_req3
-    test_req <- copies - test_entity2
-    </pre>
     <pre class="mermaid" style="width: 100%">
 gantt
     dateFormat  YYYY-MM-DD
@@ -320,29 +280,7 @@ flowchart TD
       C -->|Two| E[iPhone]
       C -->|Three| F[fa:fa-car Car]
     </pre>
-    <pre class="mermaid" style="width: 100%">
-        classDiagram
-          Animal "1" <|-- Duck
-          Animal <|-- Fish
-          Animal <--o Zebra
-          Animal : +int age
-          Animal : +String gender
-          Animal: +isMammal()
-          Animal: +mate()
-          class Duck{
-            +String beakColor
-            +swim()
-            +quack()
-          }
-          class Fish{
-            -int sizeInFeet
-            -canEat()
-          }
-          class Zebra{
-            +bool is_wild
-            +run()
-          }
-    </pre>
+
     <pre class="mermaid" style="width: 100%">
         erDiagram
     CAR ||--o{ NAMED-DRIVER : allows
@@ -359,7 +297,9 @@ flowchart TD
     }
     </pre>
 
-    <script src="./mermaid.js"></script>
+    <!-- <script src="./mermaid.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) {
         // console.error('Mermaid error: ', err);
diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index 3be7bfb73..a81816197 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -45,22 +45,14 @@
   </head>
   <body>
     <div>Security check</div>
-    <div class="flex">
-      <pre id="diagram" class="mermaid">
-    flowchart TD
-    A[myClass1] --> B[default] & C[default]
-    B[default] & C[default] --> D[myClass2]
-    classDef default stroke-width:2px,fill:none,stroke:silver
-    classDef node color:red
-    classDef myClass1 color:#0000ff
-    classDef myClass2 stroke:#0000ff,fill:#ccccff
-    class A myClass1
-    class D myClass2
-  </pre
-      >
-      <div id="res" class=""></div>
-    </div>
-    <script src="./mermaid.js"></script>
+    <pre id="diagram" class="mermaid">
+        mindmap
+          root
+            ch1
+            ch2
+    </pre>
+    <script src="./packages/mermaid-mindmap/dist/mermaid-mindmap.js"></script>
+    <script src="./packages/mermaid/dist/mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
diff --git a/package.json b/package.json
index de1156254..7a15a8017 100644
--- a/package.json
+++ b/package.json
@@ -28,24 +28,24 @@
     "clean": "rimraf dist",
     "build:vite": "ts-node-esm --transpileOnly --project=.vite/tsconfig.json .vite/build.ts",
     "build:types": "concurrently \"tsc -p ./packages/mermaid/tsconfig.json --emitDeclarationOnly\" \"tsc -p ./packages/mermaid-mindmap/tsconfig.json --emitDeclarationOnly\"",
-    "build:watch": "yarn build:code --watch",
-    "build": "yarn clean; concurrently \"yarn build:vite\" \"yarn build:types\"",
-    "dev": "concurrently \"yarn build:vite --watch\" \"ts-node-esm .vite/server\"",
+    "build:watch": "pnpm build:code --watch",
+    "build": "pnpm clean; concurrently \"pnpm build:vite\" \"pnpm build:types\"",
+    "dev": "concurrently \"pnpm build:vite --watch\" \"ts-node-esm .vite/server\"",
     "docs:build": "ts-node-esm --transpileOnly src/docs.mts",
-    "docs:verify": "yarn docs:build --verify",
+    "docs:verify": "pnpm docs:build --verify",
     "todo-postbuild": "documentation build src/mermaidAPI.ts src/config.ts src/defaultConfig.ts --shallow -f md --markdown-toc false > src/docs/Setup.md && prettier --write src/docs/Setup.md",
-    "release": "yarn build",
-    "lint": "eslint --cache --ignore-path .gitignore . && yarn lint:jison && prettier --check .",
+    "release": "pnpm build",
+    "lint": "eslint --cache --ignore-path .gitignore . && pnpm lint:jison && prettier --check .",
     "lint:fix": "eslint --fix --ignore-path .gitignore . && prettier --write .",
     "lint:jison": "ts-node-esm --transpileOnly src/jison/lint.mts",
     "cypress": "cypress run",
     "cypress:open": "cypress open",
     "e2e": "start-server-and-test dev http://localhost:9000/ cypress",
     "ci": "vitest run",
-    "test": "yarn lint && vitest run",
+    "test": "pnpm lint && vitest run",
     "test:watch": "vitest --coverage --watch",
-    "prepublishOnly": "yarn build && yarn test",
-    "todo-prepare": "concurrently \"husky install\" \"yarn build\"",
+    "prepublishOnly": "pnpm build && pnpm test",
+    "todo-prepare": "concurrently \"husky install\" \"pnpm build\"",
     "pre-commit": "lint-staged"
   },
   "repository": {
diff --git a/packages/mermaid-mindmap-detector/package.json b/packages/mermaid-mindmap-detector/package.json
new file mode 100644
index 000000000..10ad34835
--- /dev/null
+++ b/packages/mermaid-mindmap-detector/package.json
@@ -0,0 +1,75 @@
+{
+  "name": "@mermaid-js/mermaid-mindmap",
+  "version": "9.2.0-rc2",
+  "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
+  "main": "dist/mermaid-mindmap.core.mjs",
+  "module": "dist/mermaid-mindmap.core.mjs",
+  "type": "module",
+  "exports": {
+    ".": {
+      "require": "./dist/mermaid-mindmap.min.js",
+      "import": "./dist/mermaid-mindmap.core.mjs"
+    },
+    "./*": "./*"
+  },
+  "keywords": [
+    "diagram",
+    "markdown",
+    "mindmap",
+    "mermaid"
+  ],
+  "scripts": {
+    "clean": "rimraf dist",
+    "build:types": "tsc -p ./tsconfig.json --emitDeclarationOnly",
+    "build:watch": "yarn build:code --watch",
+    "build:esbuild": "concurrently \"yarn build:code\" \"yarn build:types\"",
+    "build": "yarn clean; yarn build:esbuild",
+    "dev": "node .esbuild/serve.cjs",
+    "release": "yarn build",
+    "lint": "eslint --cache --ignore-path .gitignore . && yarn lint:jison && prettier --check .",
+    "lint:fix": "eslint --fix --ignore-path .gitignore . && prettier --write .",
+    "lint:jison": "ts-node-esm src/jison/lint.mts",
+    "ci": "vitest run",
+    "test": "yarn lint && vitest run",
+    "test:watch": "vitest --coverage --watch",
+    "todo-prepublishOnly": "yarn build && yarn test",
+    "todo-prepare": "concurrently \"husky install ../../.husky\" \"yarn build\"",
+    "todo-pre-commit": "lint-staged"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mermaid-js/mermaid"
+  },
+  "author": "Knut Sveidqvist",
+  "license": "MIT",
+  "standard": {
+    "ignore": [
+      "**/parser/*.js",
+      "dist/**/*.js",
+      "cypress/**/*.js"
+    ],
+    "globals": [
+      "page"
+    ]
+  },
+  "dependencies": {
+    "@braintree/sanitize-url": "^6.0.0",
+    "d3": "^7.0.0",
+    "mermaid": "workspace:*",
+    "non-layered-tidy-tree-layout": "^2.0.2"
+  },
+  "devDependencies": {
+    "concurrently": "^7.4.0",
+    "rimraf": "^3.0.2"
+  },
+  "resolutions": {
+    "d3": "^7.0.0"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ]
+}
diff --git a/packages/mermaid-mindmap-detector/src/mindmapDetector.ts b/packages/mermaid-mindmap-detector/src/mindmapDetector.ts
new file mode 100644
index 000000000..33aec7deb
--- /dev/null
+++ b/packages/mermaid-mindmap-detector/src/mindmapDetector.ts
@@ -0,0 +1,8 @@
+// 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-detector/src/registry.ts b/packages/mermaid-mindmap-detector/src/registry.ts
new file mode 100644
index 000000000..bb121e5dc
--- /dev/null
+++ b/packages/mermaid-mindmap-detector/src/registry.ts
@@ -0,0 +1,18 @@
+// @ts-ignore: TODO Fix ts errors
+import { mindmapDetector } from './mindmapDetector';
+
+if (typeof document !== 'undefined') {
+  /*!
+   * Wait for document loaded before starting the execution
+   */
+  window.addEventListener(
+    'load',
+    () => {
+      if (window.mermaid && typeof window.mermaid.detectors === 'object') {
+        window.mermaid.detectors.push(mindmapDetector);
+        console.log(window.mermaid.detectors); // eslint-disable-line no-console
+      }
+    },
+    false
+  );
+}
diff --git a/packages/mermaid-mindmap-detector/tsconfig.json b/packages/mermaid-mindmap-detector/tsconfig.json
new file mode 100644
index 000000000..45076b7b5
--- /dev/null
+++ b/packages/mermaid-mindmap-detector/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist"
+  },
+  "include": ["./src/**/*.ts"],
+  "typeRoots": ["./src/types"]
+}
diff --git a/packages/mermaid-mindmap/src/diagram.ts b/packages/mermaid-mindmap/src/diagram.ts
new file mode 100644
index 000000000..c0d32e82a
--- /dev/null
+++ b/packages/mermaid-mindmap/src/diagram.ts
@@ -0,0 +1,26 @@
+// @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 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
+   */
+  window.addEventListener(
+    'load',
+    () => {
+      if (window.mermaid && typeof window.mermaid.detectors === 'object') {
+        // window.mermaid.detectors.push(mindmapDetector);
+        console.log(window.mermaid.detectors); // eslint-disable-line no-console
+      }
+    },
+    false
+  );
+}
diff --git a/packages/mermaid-mindmap/src/registry.ts b/packages/mermaid-mindmap/src/registry.ts
index d451ae97f..7189578a6 100644
--- a/packages/mermaid-mindmap/src/registry.ts
+++ b/packages/mermaid-mindmap/src/registry.ts
@@ -1,12 +1,27 @@
 // @ts-ignore: TODO Fix ts errors
-import mindmapParser from './parser/mindmap';
+// import mindmapParser from './parser/mindmap';
 // import * as mindmapDb from './mindmapDb';
 import { mindmapDetector } from './mindmapDetector';
-import mindmapRenderer from './mindmapRenderer';
-import mindmapStyles from './styles';
+// import mindmapRenderer from './mindmapRenderer';
+// import mindmapStyles from './styles';
 
 import mermaid from 'mermaid';
 
-console.log('Test of import', mermaid.mermaidAPI.getConfig()); // eslint-disable-line no-console
-// console.log('mindmapDb', mindmapDb.getMindmap()); // eslint-disable-line no-console
+console.log('mindmapDb', mermaid.mermaidAPI.getConfig()); // eslint-disable-line no-console
 // registerDiagram()
+
+// if (typeof document !== 'undefined') {
+//   /*!
+//    * Wait for document loaded before starting the execution
+//    */
+//   window.addEventListener(
+//     'load',
+//     () => {
+//       if (window.mermaid && typeof window.mermaid.detectors === 'object') {
+//         window.mermaid.detectors.push(mindmapDetector);
+//         console.log(window.mermaid.detectors); // eslint-disable-line no-console
+//       }
+//     },
+//     false
+//   );
+// }
diff --git a/packages/mermaid-mindmap/src/types/index.d.ts b/packages/mermaid-mindmap/src/types/index.d.ts
new file mode 100644
index 000000000..999ff2f49
--- /dev/null
+++ b/packages/mermaid-mindmap/src/types/index.d.ts
@@ -0,0 +1,7 @@
+export {};
+
+declare global {
+  interface Window {
+    mermaid: any; // 👈️ turn off type checking
+  }
+}
diff --git a/packages/mermaid-mindmap/tsconfig.json b/packages/mermaid-mindmap/tsconfig.json
index d9721d327..45076b7b5 100644
--- a/packages/mermaid-mindmap/tsconfig.json
+++ b/packages/mermaid-mindmap/tsconfig.json
@@ -4,5 +4,6 @@
     "rootDir": "./src",
     "outDir": "./dist"
   },
-  "include": ["./src/**/*.ts"]
+  "include": ["./src/**/*.ts"],
+  "typeRoots": ["./src/types"]
 }
diff --git a/packages/mermaid/src/mermaid.ts b/packages/mermaid/src/mermaid.ts
index 809387f60..33556f8bc 100644
--- a/packages/mermaid/src/mermaid.ts
+++ b/packages/mermaid/src/mermaid.ts
@@ -1,6 +1,6 @@
 /**
  * Web page integration module for the mermaid framework. It uses the mermaidAPI for mermaid
- * functionality and to render the diagrams to svg code.
+ * functionality and to render the diagrams to svg code!
  */
 import { MermaidConfig } from './config.type';
 import { log } from './logger';
@@ -210,6 +210,8 @@ const mermaid: {
   initialize: typeof initialize;
   contentLoaded: typeof contentLoaded;
   setParseErrorHandler: typeof setParseErrorHandler;
+  // Array of functions to use for detecting diagram types
+  detectors: Array<any>; // eslint-disable-line @typescript-eslint/no-explicit-any
 } = {
   startOnLoad: true,
   diagrams: {},
@@ -222,6 +224,7 @@ const mermaid: {
   parseError: undefined,
   contentLoaded,
   setParseErrorHandler,
+  detectors: [],
 };
 
 export default mermaid;