fix #3757 : Remove dynamic imports for lazy load.

mermaid-js · Nov 8, 2022 · 7ca5256 · 7ca5256
1 parent aab8f92
commit 7ca5256
Show file tree

Hide file tree

Showing 16 changed files with 218 additions and 128 deletions.
diff --git a/.vite/build.ts b/.vite/build.ts
@@ -23,23 +23,13 @@ const packageOptions = {
   'mermaid-mindmap': {
     name: 'mermaid-mindmap',
     packageName: 'mermaid-mindmap',
-    file: 'diagram-definition.ts',
-  },
-  'mermaid-mindmap-detector': {
-    name: 'mermaid-mindmap-detector',
-    packageName: 'mermaid-mindmap',
-    file: 'detector.ts',
-  },
-  'mermaid-example-diagram': {
-    name: 'mermaid-example-diagram',
-    packageName: 'mermaid-example-diagram',
-    file: 'diagram-definition.ts',
-  },
-  'mermaid-example-diagram-detector': {
-    name: 'mermaid-example-diagram-detector',
-    packageName: 'mermaid-example-diagram',
     file: 'detector.ts',
   },
+  // 'mermaid-example-diagram-detector': {
+  //   name: 'mermaid-example-diagram-detector',
+  //   packageName: 'mermaid-example-diagram',
+  //   file: 'detector.ts',
+  // },
 };
 
 interface BuildOptions {

diff --git a/docs/index.html b/docs/index.html
@@ -49,31 +49,28 @@
   <body>
     <div id="app"></div>
     <script type="module">
-      // import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
-      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9.2.0/dist/mermaid.esm.min.mjs';
-      // import mermaid from 'http://localhost:9000/mermaid.esm.mjs';
-      console.log(mermaid); // eslint-disable-line
+      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
+      import mindmap from 'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-mindmap@9/dist/mermaid-mindmap-detector.esm.mjs';
+
       window.mermaid = mermaid;
       const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
 
       const conf = {
         logLevel: 4,
         startOnLoad: true,
         themeCSS: '.label { font-family: Source Sans Pro,Helvetica Neue,Arial,sans-serif; }',
-        lazyLoadedDiagrams: [
-          'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-mindmap@9.2.0/dist/mermaid-mindmap-detector.esm.mjs',
-          // 'http://localhost:9000/mermaid-mindmap-detector.esm.mjs',
-        ],
       };
       if (isDarkMode) conf.theme = 'dark';
 
       async function loadMermaid() {
-        await mermaid.initialize(conf);
+        mermaid.parseError = (e) => {
+          console.log('parse error', e); // eslint-disable-line
+        };
+        await mermaid.registerExternalDiagrams([mindmap]);
+        mermaid.initialize(conf);
         console.log('mermaid initialized'); // eslint-disable-line
       }
-      mermaid.parseError = (e) => {
-        console.log('parse error', e); // eslint-disable-line
-      };
+
       await loadMermaid();
     </script>
     <script>

diff --git a/packages/mermaid-example-diagram/Readme.md b/packages/mermaid-example-diagram/Readme.md
@@ -0,0 +1,3 @@
+### Do not refer this package. It is not ready.
+
+### Refer mermaid-mindmap instead.
diff --git a/packages/mermaid-mindmap/package.json b/packages/mermaid-mindmap/package.json
@@ -2,13 +2,13 @@
   "name": "@mermaid-js/mermaid-mindmap",
   "version": "9.2.0",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
-  "main": "dist/mermaid-mindmap.core.mjs",
-  "module": "dist/mermaid-mindmap.core.mjs",
+  "module": "dist/mermaid-mindmap.esm.min.mjs",
+  "types": "dist/detector.d.ts",
   "type": "module",
   "exports": {
     ".": {
-      "require": "./dist/mermaid-mindmap.min.js",
-      "import": "./dist/mermaid-mindmap.core.mjs"
+      "import": "./dist/mermaid-mindmap.esm.min.mjs",
+      "types": "./dist/detector.d.ts"
     },
     "./*": "./*"
   },

diff --git a/packages/mermaid-mindmap/src/detector.ts b/packages/mermaid-mindmap/src/detector.ts
@@ -1,10 +1,20 @@
-export const id = 'mindmap';
+import type { ExternalDiagramDefinition } from 'mermaid';
 
-export const detector = (txt: string) => {
+const id = 'mindmap';
+
+const detector = (txt: string) => {
   return txt.match(/^\s*mindmap/) !== null;
 };
 
-export const loadDiagram = async () => {
+const loader = async () => {
   const { diagram } = await import('./diagram-definition');
   return { id, diagram };
 };
+
+const plugin: ExternalDiagramDefinition = {
+  id,
+  detector,
+  loader,
+};
+
+export default plugin;
diff --git a/packages/mermaid-mindmap/src/diagram-definition.ts b/packages/mermaid-mindmap/src/diagram-definition.ts
@@ -12,5 +12,3 @@ export const diagram = {
   styles: mindmapStyles,
   injectUtils,
 };
-
-export { detector, id } from './detector';
diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
@@ -3,8 +3,6 @@
 import DOMPurify from 'dompurify';
 
 export interface MermaidConfig {
-  lazyLoadedDiagrams?: string[];
-  loadExternalDiagramsAtStartup?: boolean;
   theme?: string;
   themeVariables?: any;
   themeCSS?: string;

diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts
@@ -115,7 +115,6 @@ const config: Partial<MermaidConfig> = {
    * Default value: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
    */
   secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
-  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/diagram-api/types.ts b/packages/mermaid/src/diagram-api/types.ts
@@ -28,5 +28,11 @@ export interface DetectorRecord {
   loader?: DiagramLoader;
 }
 
+export interface ExternalDiagramDefinition {
+  id: string;
+  detector: DiagramDetector;
+  loader: DiagramLoader;
+}
+
 export type DiagramDetector = (text: string, config?: MermaidConfig) => boolean;
-export type DiagramLoader = (() => Promise<{ id: string; diagram: DiagramDefinition }>) | null;
+export type DiagramLoader = () => Promise<{ id: string; diagram: DiagramDefinition }>;
diff --git a/packages/mermaid/src/docs/index.html b/packages/mermaid/src/docs/index.html
@@ -49,31 +49,28 @@
   <body>
     <div id="app"></div>
     <script type="module">
-      // import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@<MERMAID_VERSION>/dist/mermaid.esm.min.mjs';
-      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9.2.0-rc6/dist/mermaid.esm.min.mjs';
-      // import mermaid from 'http://localhost:9000/mermaid.esm.mjs';
-      console.log(mermaid); // eslint-disable-line
+      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@<MERMAID_VERSION>/dist/mermaid.esm.min.mjs';
+      import mindmap from 'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-mindmap@<MERMAID_VERSION>/dist/mermaid-mindmap-detector.esm.mjs';
+
       window.mermaid = mermaid;
       const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
 
       const conf = {
         logLevel: 4,
         startOnLoad: true,
         themeCSS: '.label { font-family: Source Sans Pro,Helvetica Neue,Arial,sans-serif; }',
-        lazyLoadedDiagrams: [
-          'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-mindmap@9.2.0-rc3/dist/mermaid-mindmap-detector.esm.mjs',
-          // 'http://localhost:9000/mermaid-mindmap-detector.esm.mjs',
-        ],
       };
       if (isDarkMode) conf.theme = 'dark';
 
       async function loadMermaid() {
-        await mermaid.initialize(conf);
+        mermaid.parseError = (e) => {
+          console.log('parse error', e); // eslint-disable-line
+        };
+        await mermaid.registerExternalDiagrams([mindmap]);
+        mermaid.initialize(conf);
         console.log('mermaid initialized'); // eslint-disable-line
       }
-      mermaid.parseError = (e) => {
-        console.log('parse error', e); // eslint-disable-line
-      };
+
       await loadMermaid();
     </script>
     <script>

diff --git a/packages/mermaid/src/mermaid.spec.ts b/packages/mermaid/src/mermaid.spec.ts
@@ -54,24 +54,83 @@ describe('when using mermaid and ', function () {
       expect(mermaidAPI.render).toHaveBeenCalled();
     });
   });
-  describe('when using #initThrowsErrorsAsync', function () {
-    it('should throw error (but still render) if lazyLoadedDiagram fails', async () => {
+  describe('when using #registerExternalDiagrams', function () {
+    it('should throw error (but still render) if registerExternalDiagrams fails', async () => {
       const node = document.createElement('div');
       node.appendChild(document.createTextNode('graph TD;\na;'));
 
-      mermaidAPI.setConfig({
-        lazyLoadedDiagrams: ['this-file-does-not-exist.mjs'],
-      });
-      await expect(mermaid.initThrowsErrorsAsync(undefined, node)).rejects.toThrowError(
-        // this error message is probably different on every platform
-        // this one is just for vite-note (node/jest/browser may be different)
-        'Failed to load this-file-does-not-exist.mjs'
-      );
-
+      await expect(
+        mermaid.registerExternalDiagrams(
+          [
+            {
+              id: 'dummy',
+              detector: (text) => /dummy/.test(text),
+              loader: () => Promise.reject('error'),
+            },
+          ],
+          { lazyLoad: false }
+        )
+      ).rejects.toThrow('Failed to load 1 external diagrams');
+
+      expect(() => mermaid.initThrowsErrorsAsync(undefined, node)).not.toThrow();
       // should still render, even if lazyLoadedDiagrams fails
       expect(mermaidAPI.renderAsync).toHaveBeenCalled();
     });
 
+    it('should defer diagram load based on parameter', async () => {
+      let loaded = false;
+      const dummyDiagram = {
+        db: {},
+        renderer: () => {
+          // do nothing
+        },
+        parser: () => {
+          // do nothing
+        },
+        styles: () => {
+          // do nothing
+        },
+      };
+      await expect(
+        mermaid.registerExternalDiagrams(
+          [
+            {
+              id: 'dummy',
+              detector: (text) => /dummy/.test(text),
+              loader: () => {
+                loaded = true;
+                return Promise.resolve({
+                  id: 'dummy',
+                  diagram: dummyDiagram,
+                });
+              },
+            },
+          ],
+          { lazyLoad: true }
+        )
+      ).resolves.toBe(undefined);
+      expect(loaded).toBe(false);
+      await expect(
+        mermaid.registerExternalDiagrams(
+          [
+            {
+              id: 'dummy2',
+              detector: (text) => /dummy2/.test(text),
+              loader: () => {
+                loaded = true;
+                return Promise.resolve({
+                  id: 'dummy2',
+                  diagram: dummyDiagram,
+                });
+              },
+            },
+          ],
+          { lazyLoad: false }
+        )
+      ).resolves.toBe(undefined);
+      expect(loaded).toBe(true);
+    });
+
     afterEach(() => {
       // we modify mermaid config in some tests, so we need to make sure to reset them
       mermaidAPI.reset();