Merge pull request #3702 from aloisklink/fix/initThrowErrors-support-…

…lazyLoadedDiagrams Support `lazyLoadedDiagrams` when calling `initThrowsErrors`
mermaid-js · Oct 24, 2022 · e793aae · e793aae
2 parents 6f27363 + 3a2669e
commit e793aae
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 12 deletions.
diff --git a/packages/mermaid/src/mermaid.spec.ts b/packages/mermaid/src/mermaid.spec.ts
@@ -48,11 +48,32 @@ describe('when using mermaid and ', function () {
       const node = document.createElement('div');
       node.appendChild(document.createTextNode('graph TD;\na;'));
 
-      mermaid.initThrowsErrors(undefined, node);
+      await mermaid.initThrowsErrors(undefined, node);
       // mermaidAPI.render function has been mocked, since it doesn't yet work
       // in Node.JS (only works in browser)
       expect(mermaidAPI.render).toHaveBeenCalled();
     });
+    it('should throw error (but still render) if lazyLoadedDiagram 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.initThrowsErrors(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'
+      );
+
+      // should still render, even if lazyLoadedDiagrams fails
+      expect(mermaidAPI.render).toHaveBeenCalled();
+    });
+
+    afterEach(() => {
+      // we modify mermaid config in some tests, so we need to make sure to reset them
+      mermaidAPI.reset();
+    });
   });
 
   describe('checking validity of input ', function () {

diff --git a/packages/mermaid/src/mermaid.ts b/packages/mermaid/src/mermaid.ts
@@ -46,16 +46,6 @@ const init = async function (
   callback?: Function
 ) {
   try {
-    const conf = mermaidAPI.getConfig();
-    if (conf?.lazyLoadedDiagrams && conf.lazyLoadedDiagrams.length > 0) {
-      // Load all lazy loaded diagrams in parallel
-      await Promise.allSettled(
-        conf.lazyLoadedDiagrams.map(async (diagram: string) => {
-          const { id, detector, loadDiagram } = await import(diagram);
-          addDetector(id, detector, loadDiagram);
-        })
-      );
-    }
     await initThrowsErrors(config, nodes, callback);
   } catch (e) {
     log.warn('Syntax Error rendering');
@@ -68,6 +58,18 @@ const init = async function (
   }
 };
 
+/**
+ * Equivalent to {@link init()}, except an error will be thrown on error.
+ *
+ * @param config - **Deprecated** Mermaid sequenceConfig.
+ * @param nodes - One of:
+ * - A DOM Node
+ * - An array of DOM nodes (as would come from a jQuery selector)
+ * - A W3C selector, a la `.mermaid` (default)
+ * @param callback - Function that is called with the id of each generated mermaid diagram.
+ *
+ * @returns Resolves on success, otherwise the {@link Promise} will be rejected with an Error.
+ */
 const initThrowsErrors = async function (
   config?: MermaidConfig,
   // eslint-disable-next-line no-undef
@@ -83,6 +85,24 @@ const initThrowsErrors = async function (
     mermaid.sequenceConfig = config;
   }
 
+  const errors = [];
+
+  if (conf?.lazyLoadedDiagrams && conf.lazyLoadedDiagrams.length > 0) {
+    // Load all lazy loaded diagrams in parallel
+    const results = await Promise.allSettled(
+      conf.lazyLoadedDiagrams.map(async (diagram: string) => {
+        const { id, detector, loadDiagram } = await import(diagram);
+        addDetector(id, detector, loadDiagram);
+      })
+    );
+    for (const result of results) {
+      if (result.status == 'rejected') {
+        log.warn(`Failed to lazyLoadedDiagram due to `, result.reason);
+        errors.push(result.reason);
+      }
+    }
+  }
+
   // if last argument is a function this is the callback function
   log.debug(`${!callback ? 'No ' : ''}Callback function found`);
   let nodesToProcess: ArrayLike<HTMLElement>;
@@ -108,7 +128,6 @@ const initThrowsErrors = async function (
   const idGenerator = new utils.initIdGenerator(conf.deterministicIds, conf.deterministicIDSeed);
 
   let txt: string;
-  const errors = [];
 
   // element is the current div with mermaid class
   for (const element of Array.from(nodesToProcess)) {