Merge pull request #775 from BobKerns/mermaid_uses_esm_now

Mermaid uses ESM modules now. Update so mermaid loads again.
kamiazya · Mar 7, 2023 · 2d65301 · 2d65301
2 parents 8278caa + 74f6e5d
commit 2d65301
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 41 deletions.
diff --git a/src/plugin.ts b/src/plugin.ts
@@ -51,31 +51,26 @@ body.dark, :root[data-theme="dark"] {
  */
 function createScript(version: string): string {
   return String.raw`
-<script src="https://unpkg.com/mermaid@${version}/dist/mermaid.min.js"></script>
-<script>
-(function() {
-  if (typeof mermaid === "undefined") {
-    return;
-  }
-
-  document.documentElement.classList.add("mermaid-enabled");
+<script type="module">
+import mermaid from "https://unpkg.com/mermaid@${version}/dist/mermaid.esm.min.mjs";
 
-  mermaid.initialize({startOnLoad:true});
+document.documentElement.classList.add("mermaid-enabled");
 
-  requestAnimationFrame(function check() {
-    let some = false;
-    document.querySelectorAll("div.mermaid:not([data-inserted])").forEach(div => {
-      some = true;
-      if (div.querySelector("svg")) {
-        div.dataset.inserted = true;
-      }
-    });
+mermaid.initialize({startOnLoad:true});
 
-    if (some) {
-      requestAnimationFrame(check);
+requestAnimationFrame(function check() {
+  let some = false;
+  document.querySelectorAll("div.mermaid:not([data-inserted])").forEach(div => {
+    some = true;
+    if (div.querySelector("svg")) {
+      div.dataset.inserted = true;
     }
   });
-})();
+
+  if (some) {
+    requestAnimationFrame(check);
+  }
+});
 </script>
 `;
 }

diff --git a/test/__snapshots__/plugin.test.ts.snap b/test/__snapshots__/plugin.test.ts.snap
@@ -66,31 +66,26 @@ body.dark, :root[data-theme=\\"dark\\"] {
 }
 </style>
 </head><body><div class=\\"mermaid-block\\"></div>
-<script src=\\"https://unpkg.com/mermaid@latest/dist/mermaid.min.js\\"></script>
-<script>
-(function() {
-  if (typeof mermaid === \\"undefined\\") {
-    return;
-  }
-
-  document.documentElement.classList.add(\\"mermaid-enabled\\");
+<script type=\\"module\\">
+import mermaid from \\"https://unpkg.com/mermaid@latest/dist/mermaid.esm.min.mjs\\";
 
-  mermaid.initialize({startOnLoad:true});
+document.documentElement.classList.add(\\"mermaid-enabled\\");
 
-  requestAnimationFrame(function check() {
-    let some = false;
-    document.querySelectorAll(\\"div.mermaid:not([data-inserted])\\").forEach(div => {
-      some = true;
-      if (div.querySelector(\\"svg\\")) {
-        div.dataset.inserted = true;
-      }
-    });
+mermaid.initialize({startOnLoad:true});
 
-    if (some) {
-      requestAnimationFrame(check);
+requestAnimationFrame(function check() {
+  let some = false;
+  document.querySelectorAll(\\"div.mermaid:not([data-inserted])\\").forEach(div => {
+    some = true;
+    if (div.querySelector(\\"svg\\")) {
+      div.dataset.inserted = true;
     }
   });
-})();
+
+  if (some) {
+    requestAnimationFrame(check);
+  }
+});
 </script>
 </body>"
 `;
diff --git a/test/plugin.test.ts b/test/plugin.test.ts
@@ -19,7 +19,7 @@ describe('MermaidPlugin', () => {
     const result = plugin.insertMermaidScript(input);
     expect(result).toMatch('</body>');
     expect(result).toMatch('mermaid.initialize({');
-    expect(result).toMatch(/src="https:\/\/unpkg.com\/mermaid\@latest\/dist\/mermaid.min.js"/);
+    expect(result).toMatch(/import mermaid from "https:\/\/unpkg.com\/mermaid\@latest\/dist\/mermaid.esm.min.mjs";/);
     expect(result).toMatchSnapshot();
   });