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