Merge branch 'develop' into sidv/fixDetectDiagram

* develop:
  chore: cleanup
  fix: dynamic import
  fix: Filename in viewer.js
  fix: pnpm not found
  fix: Import diagram
  Updated logic for diagram loading
  WIP

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');

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="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> -->
-    <script src="./mermaid-example-diagram-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.esm.mjs'],
+        // extraDiagrams: ['../../mermaid-mindmap/registry.ts'],
       });
       function callback() {
         alert('It worked');

cypress/platform/viewer.js

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

package.json

@@ -7,7 +7,7 @@
   "module": "dist/mermaid.core.mjs",
   "types": "dist/mermaid.d.ts",
   "type": "module",
-  "packageManager": "pnpm@7.12.2",
+  "packageManager": "pnpm@7.13.2",
   "exports": {
     ".": {
       "require": "./dist/mermaid.min.js",
@@ -72,8 +72,8 @@
   },
   "dependencies": {
     "@braintree/sanitize-url": "^6.0.0",
-    "@types/uuid": "^8.3.4",
     "@types/node": "^18.8.1",
+    "@types/uuid": "^8.3.4",
     "d3": "^7.0.0",
     "dagre": "^0.8.5",
     "dagre-d3": "^0.6.4",
@@ -108,8 +108,8 @@
     "coveralls": "^3.1.1",
     "cypress": "^10.0.0",
     "cypress-image-snapshot": "^4.0.1",
-    "esbuild": "^0.15.10",
     "documentation": "13.2.0",
+    "esbuild": "^0.15.10",
     "eslint": "^8.24.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-cypress": "^2.12.1",
@@ -129,6 +129,7 @@
     "markdown-it": "^13.0.1",
     "moment": "^2.23.0",
     "path-browserify": "^1.0.1",
+    "pnpm": "^7.13.2",
     "prettier": "^2.7.1",
     "prettier-plugin-jsdoc": "^0.4.2",
     "remark": "^14.0.2",
@@ -137,10 +138,10 @@
     "ts-node": "^10.9.1",
     "typescript": "^4.8.4",
     "unist-util-flatmap": "^1.0.0",
+    "vite": "^3.1.4",
     "vitepress": "^1.0.0-alpha.19",
     "vitepress-plugin-mermaid": "^2.0.8",
     "vitepress-plugin-search": "^1.0.4-alpha.11",
-    "vite": "^3.1.4",
     "vitest": "^0.23.4"
   },
   "resolutions": {

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(
+export const mindmap = {
-  'mindmap',
+  db: mindmapDb,
-  {
+  renderer: mindmapRenderer,
-    db: mindmapDb,
+  parser: mindmapParser,
-    renderer: mindmapRenderer,
+  styles: mindmapStyles,
-    parser: mindmapParser,
+  injectUtils,
-    styles: mindmapStyles,
+};
-  },
-  injectUtils
-);

packages/mermaid-mindmap/src/mindmapDetector.ts

@@ -1,3 +0,0 @@
-export const mindmapDetector = (txt: string) => {
-  return txt.match(/^\s*mindmap/) !== null;
-};

packages/mermaid-mindmap/src/registry.ts

@@ -1,34 +1,10 @@
-// @ts-ignore: TODO Fix ts errors
+export const id = 'mindmap';
-import { mindmapDetector } from './mindmapDetector';
 
-const scriptElement = document.currentScript as HTMLScriptElement;
+export const detector = (txt: string) => {
-const path = scriptElement.src;
+  return txt.match(/^\s*mindmap/) !== null;
-const lastSlash = path.lastIndexOf('/');
+};
-const baseFolder = lastSlash < 0 ? path : path.substring(0, lastSlash + 1);
 
-if (typeof document !== 'undefined') {
+export const loadDiagram = async () => {
-  if (window.mermaid && typeof window.mermaid.detectors === 'object') {
+  const { mindmap } = await import('./add-diagram');
-    window.mermaid.detectors.push({ id: 'mindmap', detector: mindmapDetector });
+  return { id, diagram: mindmap };
-  } else {
+};
-    window.mermaid = {};
-    window.mermaid.detectors = [{ id: 'mindmap', detector: mindmapDetector }];
-  }
-
-  /*!
-   * 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
-  );
-}

packages/mermaid-mindmap/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "extends": "../../tsconfig.json",
+  "module": "esnext",
   "compilerOptions": {
     "rootDir": "./src",
     "outDir": "./dist"

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';
@@ -90,10 +90,25 @@ 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 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');
+    // 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

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;

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,8 +1,8 @@
 import { MermaidConfig } from '../config.type';
 
 export type DiagramDetector = (text: string, config?: MermaidConfig) => boolean;
-export type DetectorRecord = { detector: DiagramDetector; path: string };
+export type DiagramLoader = (() => Promise<unknown>) | 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,9 +34,9 @@ const detectors: Record<string, DetectorRecord> = {};
  */
 export const detectType = function (text: string, config?: MermaidConfig): string {
   text = text.replace(directive, '').replace(anyComment, '\n');
-
+  for (const [key, { detector }] of Object.entries(detectors)) {
-  for (const [key, detectorRecord] of Object.entries(detectors)) {
+    const diagram = detector(text, config);
-    if (detectorRecord.detector(text, config)) {
+    if (diagram) {
       return key;
     }
   }
@@ -44,13 +44,12 @@ export const detectType = function (text: string, config?: MermaidConfig): strin
   throw new Error(`No diagram type detected for text: ${text}`);
 };
 
-export const addDetector = (key: string, detector: DiagramDetector, path: string) => {
+export const addDetector = (
-  detectors[key] = { detector, path };
+  key: string,
+  detector: DiagramDetector,
+  loader: DiagramLoader | null
+) => {
+  detectors[key] = { detector, loader };
 };
 
-export const getPathForDiagram = (id: string) => {
+export const getDiagramLoader = (key: string) => detectors[key].loader;
-  const detectorRecord = detectors[id];
-  if (detectorRecord) {
-    return detectorRecord.path;
-  }
-};

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

@@ -21,17 +21,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,17 @@ 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 { id, detector, loadDiagram } = await import(conf.extraDiagrams[0]);
+      addDetector(id, detector, loadDiagram);
+      // });
+    }
     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 +171,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

@@ -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,7 @@ function initialize(options: MermaidConfig) {
     typeof options === 'object' ? configApi.setSiteConfig(options) : configApi.getSiteConfig();
 
   setLogLevel(config.logLevel);
+
   if (!hasLoadedDiagrams) {
     addDiagrams();
     hasLoadedDiagrams = true;

pnpm-lock.yaml

@@ -60,6 +60,7 @@ importers:
       moment-mini: ^2.24.0
       non-layered-tidy-tree-layout: ^2.0.2
       path-browserify: ^1.0.1
+      pnpm: ^7.13.2
       prettier: ^2.7.1
       prettier-plugin-jsdoc: ^0.4.2
       remark: ^14.0.2
@@ -134,6 +135,7 @@ importers:
       markdown-it: 13.0.1
       moment: 2.29.4
       path-browserify: 1.0.1
+      pnpm: 7.13.2
       prettier: 2.7.1
       prettier-plugin-jsdoc: 0.4.2_prettier@2.7.1
       remark: 14.0.2
@@ -10729,6 +10731,12 @@ packages:
     engines: {node: '>=12.13.0'}
     dev: true
 
+  /pnpm/7.13.2:
+    resolution: {integrity: sha512-lOQRBcCWycLK1PB9KptqTd6iyiH7m4GRuS4G2j4b74yDx/XvRXtP/weYz8e0/ia7HX1pMF1vJCF48ssklq0TJQ==}
+    engines: {node: '>=14.6'}
+    hasBin: true
+    dev: true
+
   /posix-character-classes/0.1.1:
     resolution: {integrity: sha512-xTgYBc3fuo7Yt7JbiuFxSYGToMoz8fLoE6TC9Wx1P/u+LfeThMOAqmuyECnlBaaJb+u1m9hHiXUEtwW4OzfUJg==}
     engines: {node: '>=0.10.0'}

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. */,

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,
+    },
+  },
 });