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

Lazy load import
mermaid-js · Oct 7, 2022 · c99fd2b · c99fd2b
2 parents 868cb52 + 646f76d
commit c99fd2b
Show file tree

Hide file tree

Showing 20 changed files with 77 additions and 106 deletions.
diff --git 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',
   },
 };
 

diff --git 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
diff --git 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

diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html
@@ -385,7 +385,7 @@
           htmlLabels: false,
           fontFamily: 'courier',
         },
-        extraDiagrams: ['./mermaid-mindmap-detector.js'],
+        lazyLoadedDiagrams: ['./mermaid-mindmap-detector.js'],
       });
       function callback() {
         alert('It worked');

diff --git 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 @@
         ::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/[email protected]/dist/mermaid.min.js"></script> -->
     <script src="./mermaid.js"></script>
 
     <script>
@@ -100,8 +118,11 @@
         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');

diff --git 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();

diff --git 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",

diff --git a/...id-example-diagram/src/exampleDetector.ts → ...s/mermaid-example-diagram/src/detector.ts b/...id-example-diagram/src/exampleDetector.ts → ...s/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 };
+};
diff --git a/...ermaid-example-diagram/src/add-diagram.ts → ...example-diagram/src/diagram-definition.ts b/...ermaid-example-diagram/src/add-diagram.ts → ...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,
+};
diff --git a/packages/mermaid-example-diagram/src/registry.ts b/packages/mermaid-example-diagram/src/registry.ts
diff --git a/packages/mermaid-mindmap/src/registry.ts → packages/mermaid-mindmap/src/detector.ts b/packages/mermaid-mindmap/src/registry.ts → 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 };
 };
diff --git a/packages/mermaid-mindmap/src/add-diagram.ts → ...mermaid-mindmap/src/diagram-definition.ts b/packages/mermaid-mindmap/src/add-diagram.ts → ...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,

diff --git 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;
-};
-*/
diff --git a/packages/mermaid-mindmap/src/mindmapDetector.ts b/packages/mermaid-mindmap/src/mindmapDetector.ts
diff --git 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;

diff --git 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

diff --git 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);
     }
+  } 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
  *

diff --git 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();
 };
 
 /**

diff --git 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]);
-      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);

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
-Original file line number
+Diff line change
@@ Expand Up / @@ -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
@@ Expand Down @@