From 74f6e5d2bf3be832937aa0c1ce1c2ecf6b02d366 Mon Sep 17 00:00:00 2001
From: Bob Kerns <1154903+BobKerns@users.noreply.github.com>
Date: Sun, 5 Mar 2023 23:49:07 -0800
Subject: [PATCH] Mermaid uses ESM modules now. Update so mermaid loads again.
 Update tests.

---
 src/plugin.ts                          | 35 +++++++++++---------------
 test/__snapshots__/plugin.test.ts.snap | 35 +++++++++++---------------
 test/plugin.test.ts                    |  2 +-
 3 files changed, 31 insertions(+), 41 deletions(-)
diff --git a/src/plugin.ts b/src/plugin.ts
index 3df0384..fea722c 100644
--- 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
index 06dce14..194ce66 100644
--- 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
index 4872d22..4f95469 100644
--- 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();
   });
 
