chore: Cleanup

packages/mermaid-example-diagram/src/detector.ts

@@ -1,3 +1,6 @@
+// @ts-ignore: TODO Fix ts errors
+export const id = 'example-diagram';
+
 /**
  * Detector function that will be called by mermaid to determine if the diagram is this type of digram.
  *
@@ -8,3 +11,8 @@
 export const detector = (txt: string) => {
   return txt.match(/^\s*example-diagram/) !== null;
 };
+
+export const loadDiagram = async () => {
+  const { diagram } = await import('./diagram-definition');
+  return { id, diagram };
+};

packages/mermaid-example-diagram/src/diagram-definition.ts

@@ -5,13 +5,10 @@ import renderer from './exampleDiagramRenderer';
 import styles from './styles';
 import { injectUtils } from './mermaidUtils';
 
-window.mermaid.connectDiagram(
-  'example-diagram',
-  {
-    db,
-    renderer,
-    parser,
-    styles,
-  },
-  injectUtils
-);
+export const diagram = {
+  db,
+  renderer,
+  parser,
+  styles,
+  injectUtils,
+};

packages/mermaid-example-diagram/src/registry.ts

@@ -1,33 +0,0 @@
-// @ts-ignore: TODO Fix ts errors
-import { detector } from './exampleDetector';
-
-const scriptElement = document.currentScript as HTMLScriptElement;
-const path = scriptElement.src;
-const lastSlash = path.lastIndexOf('/');
-const baseFolder = lastSlash < 0 ? path : path.substring(0, lastSlash + 1);
-
-if (typeof document !== 'undefined') {
-  if (window.mermaid && typeof window.mermaid.detectors === 'object') {
-    window.mermaid.detectors.push({ id: 'example-diagram', detector });
-  } else {
-    window.mermaid = {};
-    window.mermaid.detectors = [{ id: 'example-diagram', detector }];
-  }
-
-  /*
-   * Wait for document loaded before starting the execution.
-   */
-  window.addEventListener(
-    'load',
-    () => {
-      if (window.mermaid && typeof window.mermaid.detectors === 'object') {
-        window.mermaid.detectors.push({
-          id: 'example-diagram',
-          detector,
-          path: baseFolder,
-        });
-      }
-    },
-    false
-  );
-}

packages/mermaid-mindmap/src/detector.ts

@@ -5,6 +5,6 @@ export const detector = (txt: string) => {
 };
 
 export const loadDiagram = async () => {
-  const { mindmap } = await import('./add-diagram');
-  return { id, diagram: mindmap };
+  const { diagram } = await import('./diagram-definition');
+  return { id, diagram };
 };

packages/mermaid-mindmap/src/diagram-definition.ts

@@ -5,7 +5,7 @@ import mindmapRenderer from './mindmapRenderer';
 import mindmapStyles from './styles';
 import { injectUtils } from './mermaidUtils';
 
-export const mindmap = {
+export const diagram = {
   db: mindmapDb,
   renderer: mindmapRenderer,
   parser: mindmapParser,

packages/mermaid-mindmap/src/mermaidUtils.ts

@@ -53,29 +53,3 @@ export const injectUtils = (
   sanitizeText = _sanitizeText;
   setupGraphViewbox = _setupGraphViewbox;
 };
-
-/*
-const warning = (..._args: any[]) => {
-  console.error('Log function was called before initialization');
-};
-
-export let log = {
-  trace: warning,
-  debug: warning,
-  info: warning,
-  warn: warning,
-  error: warning,
-  fatal: warning,
-};
-export let setLogLevel;
-export let getConfig;
-export let sanitizeText;
-export let setupGraphViewbox;
-export const injectUtils = (_log, _setLogLevel, _getConfig, _sanitizeText, _setupGraphViewbox) => {
-  log = _log;
-  setLogLevel = _setLogLevel;
-  getConfig = _getConfig;
-  sanitizeText = _sanitizeText;
-  setupGraphViewbox = _setupGraphViewbox;
-};
-*/

packages/mermaid/src/config.type.ts

@@ -3,7 +3,7 @@
 import DOMPurify from 'dompurify';
 
 export interface MermaidConfig {
-  extraDiagrams?: any;
+  lazyLoadedDiagrams?: 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: [],
+  lazyLoadedDiagrams: [],
   /**
    * 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/mermaid.ts

@@ -55,11 +55,11 @@ 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);
-      // });
+    if (typeof conf.lazyLoadedDiagrams !== 'undefined' && conf.lazyLoadedDiagrams.length > 0) {
+      for (let i = 0; i < conf.lazyLoadedDiagrams.length; i++) {
+        const { id, detector, loadDiagram } = await import(conf.lazyLoadedDiagrams[i]);
+        addDetector(id, detector, loadDiagram);
+      }
     }
     mermaid.detectors.forEach(({ id, detector, path }) => {
       addDetector(id, detector, path);