Merge pull request #3598 from mermaid-js/lazy-load-import

Lazy load import
2025-01-14 06:43:25 +08:00 · 2022-10-07 16:06:48 +02:00 · 2022-10-07 16:06:48 +02:00 · c99fd2baa9
commit c99fd2baa9
parent 868cb529aa 646f76d343
20 changed files with 77 additions and 106 deletions
--- a/.vite/build.ts
+++ b/.vite/build.ts
@ -22,22 +22,22 @@ const packageOptions = {
  'mermaid-mindmap': {
    name: 'mermaid-mindmap',
    packageName: 'mermaid-mindmap',
-    file: 'add-diagram.ts',
+    file: 'diagram-definition.ts',
  },
  'mermaid-mindmap-detector': {
    name: 'mermaid-mindmap-detector',
    packageName: 'mermaid-mindmap',
-    file: 'registry.ts',
+    file: 'detector.ts',
  },
  'mermaid-example-diagram': {
    name: 'mermaid-example-diagram',
    packageName: 'mermaid-example-diagram',
-    file: 'add-diagram.ts',
+    file: 'diagram-definition.ts',
  },
  'mermaid-example-diagram-detector': {
    name: 'mermaid-example-diagram-detector',
    packageName: 'mermaid-example-diagram',
-    file: 'registry.ts',
+    file: 'detector.ts',
  },
 };

--- a/V10-BreakingChanges.md
+++ b/V10-BreakingChanges.md
@ -0,0 +1,5 @@
+# A collection of updates that change the behaviour
+
+## Lazy loading and asynchronisity
+
+- Invalid dates are rendered as syntax error instead of returning best guess or the current date
--- a/cypress/integration/rendering/gantt.spec.js
+++ b/cypress/integration/rendering/gantt.spec.js
@ -92,7 +92,7 @@ describe('Gantt diagram', () => {
      {}
    );
  });
-  it('should render a gantt chart for issue #1060', () => {
+  it('should FAIL redering a gantt chart for issue #1060 with invalid date', () => {
    imgSnapshotTest(
      `
      gantt
--- a/cypress/platform/knsv.html
+++ b/cypress/platform/knsv.html
@ -385,7 +385,7 @@ flowchart TD
          htmlLabels: false,
          fontFamily: 'courier',
        },
-        extraDiagrams: ['./mermaid-mindmap-detector.js'],
+        lazyLoadedDiagrams: ['./mermaid-mindmap-detector.js'],
      });
      function callback() {
        alert('It worked');
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@ -55,11 +55,24 @@
  </head>
  <body>
    <div>Security check</div>
-    <pre id="diagram" class="mermaid2">
-example-diagram
-        </pre
-    >
    <pre id="diagram" class="mermaid">
+classDiagram
+        direction LR
+        class Student {
+          -idCard : IdCard
+        }
+        class IdCard{
+          -id : int
+          -name : string
+        }
+        class Bike{
+          -id : int
+          -name : string
+        }
+        Student "1" --o "1" IdCard : carries
+        Student "1" --o "1" Bike : rides
+    </pre>
+    <pre id="diagram" class="mermaid2">
 mindmap
  root
    A
@ -85,9 +98,14 @@ mindmap
        ::icon(mdi mdi-fire)
          gc7((grand<br/>grand<br/>child 8))
        </pre>
+    <pre id="diagram" class="mermaid2">
+      example-diagram
+    </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="//cdn.jsdelivr.net/npm/mermaid@9.1.7/dist/mermaid.min.js"></script> -->
    <script src="./mermaid.js"></script>

    <script>
@ -100,8 +118,11 @@ mindmap
        logLevel: 0,
        // basePath: './packages/',
        // themeVariables: { darkMode: true },
-        extraDiagrams: ['./mermaid-mindmap-detector.esm.mjs'],
-        // extraDiagrams: ['../../mermaid-mindmap/registry.ts'],
+        lazyLoadedDiagrams: [
+          './mermaid-mindmap-detector.esm.mjs',
+          './mermaid-example-diagram-detector.esm.mjs',
+        ],
+        // lazyLoadedDiagrams: ['../../mermaid-mindmap/registry.ts'],
      });
      function callback() {
        alert('It worked');
--- a/cypress/platform/viewer.js
+++ b/cypress/platform/viewer.js
@ -36,7 +36,7 @@ const contentLoaded = function () {
      document.getElementsByTagName('body')[0].appendChild(div);
    }

-    graphObj.mermaid.extraDiagrams = ['/mermaid-mindmap-detector.esm.mjs'];
+    graphObj.mermaid.lazyLoadedDiagrams = ['/mermaid-mindmap-detector.esm.mjs'];

    mermaid2.initialize(graphObj.mermaid);
    mermaid2.init();
--- a/package.json
+++ b/package.json
@ -125,7 +125,6 @@
    "jsdom": "^20.0.1",
    "lint-staged": "^13.0.3",
    "markdown-it": "^13.0.1",
-    "moment": "^2.23.0",
    "path-browserify": "^1.0.1",
    "pnpm": "^7.13.2",
    "prettier": "^2.7.1",
--- a/packages/mermaid-example-diagram/src/exampleDetector.ts
+++ b/packages/mermaid-example-diagram/src/exampleDetector.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 };
+};
--- a/packages/mermaid-example-diagram/src/diagram-definition.ts
+++ b/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',
-  {
+export const diagram = {
  db,
  renderer,
  parser,
  styles,
-  },
-  injectUtils
-);
+  injectUtils,
+};
--- a/packages/mermaid-example-diagram/src/registry.ts
+++ b/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
-  );
-}
--- a/packages/mermaid-mindmap/src/detector.ts
+++ b/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 };
 };
--- a/packages/mermaid-mindmap/src/diagram-definition.ts
+++ b/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,
--- a/packages/mermaid-mindmap/src/mermaidUtils.ts
+++ b/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;
-};
-*/
--- a/packages/mermaid-mindmap/src/mindmapDetector.ts
+++ b/packages/mermaid-mindmap/src/mindmapDetector.ts
--- a/packages/mermaid/src/config.type.ts
+++ b/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;
--- a/packages/mermaid/src/defaultConfig.ts
+++ b/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
--- a/packages/mermaid/src/diagrams/class/svgDraw.js
+++ b/packages/mermaid/src/diagrams/class/svgDraw.js
@ -347,9 +347,10 @@ const buildMethodDisplay = function (parsedText) {
 };

 const buildLegacyDisplay = function (text) {
-  // if for some reason we don't have any match, use old format to parse text
+  // if for some reason we dont have any match, use old format to parse text
  let displayText = '';
  let cssStyle = '';
+  let memberText = '';
  let returnType = '';
  let methodStart = text.indexOf('(');
  let methodEnd = text.indexOf(')');
@ -370,29 +371,28 @@ const buildLegacyDisplay = function (text) {
    }

    const parameters = text.substring(methodStart + 1, methodEnd);
-    const classifier = text.substring(methodEnd + 1, methodEnd + 2);
-    cssStyle = parseClassifier(classifier);
+    const classifier = text.substring(methodEnd + 1, 1);
+    cssStyle = parseClassifier(text.substring(methodEnd + 1, methodEnd + 2));

    displayText = visibility + methodName + '(' + parseGenericTypes(parameters.trim()) + ')';

-    if (methodEnd <= text.length) {
+    if (methodEnd < text.length) {
      returnType = text.substring(methodEnd + 2).trim();
      if (returnType !== '') {
        returnType = ' : ' + parseGenericTypes(returnType);
        displayText += returnType;
      }
+    }
  } else {
    // finally - if all else fails, just send the text back as written (other than parsing for generic types)
    displayText = parseGenericTypes(text);
  }
-  }

  return {
    displayText,
    cssStyle,
  };
 };
-
 /**
 * Adds a <tspan> for a member in a diagram
 *
--- a/packages/mermaid/src/diagrams/gantt/ganttDb.js
+++ b/packages/mermaid/src/diagrams/gantt/ganttDb.js
@ -217,10 +217,12 @@ const getStartDate = function (prevTime, dateFormat, str) {
  } else {
    log.debug('Invalid date:' + str);
    log.debug('With date format:' + dateFormat.trim());
+    const d = new Date(str);
+    if (typeof d === 'undefined' || isNaN(d.getTime())) {
+      throw new Error('Invalid date:' + str);
+    }
+    return d;
  }
-
-  // Default date - now
-  return new Date();
 };

 /**
--- a/packages/mermaid/src/mermaid.ts
+++ b/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]);
+    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);
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -56,7 +56,6 @@ importers:
      lint-staged: ^13.0.3
      lodash: ^4.17.21
      markdown-it: ^13.0.1
-      moment: ^2.23.0
      moment-mini: ^2.24.0
      non-layered-tidy-tree-layout: ^2.0.2
      path-browserify: ^1.0.1
@ -133,7 +132,6 @@ importers:
      jsdom: 20.0.1
      lint-staged: 13.0.3
      markdown-it: 13.0.1
-      moment: 2.29.4
      path-browserify: 1.0.1
      pnpm: 7.13.2
      prettier: 2.7.1