v10 changes

package.json

@@ -73,7 +73,7 @@
     "daisyui": "2.50.0",
     "dayjs": "^1.11.7",
     "js-base64": "3.7.4",
-    "mermaid": "10.0.0-rc.2",
+    "mermaid": "10.0.0-rc.3",
     "monaco-editor": "0.34.1",
     "monaco-mermaid": "1.0.8",
     "pako": "2.1.0",

src/lib/components/View.svelte

@@ -79,27 +79,27 @@
         panZoomEnabled = state.panZoom;
         const scroll = view.parentElement!.scrollTop;
         delete container.dataset.processed;
-        await renderDiagram(
+        const { svg, bindFunctions } = await renderDiagram(
           Object.assign({}, JSON.parse(state.mermaid)) as MermaidConfig,
           code,
-          'graph-div',
-          (svgCode, bindFunctions) => {
-            if (svgCode.length > 0) {
-              handlePanZoom(state);
-              container.innerHTML = svgCode;
-              console.log({ svgCode });
-              const graphDiv = document.getElementById('graph-div');
-              if (!graphDiv) {
-                throw new Error('graph-div not found');
-              }
-              graphDiv.setAttribute('height', '100%');
-              graphDiv.style.maxWidth = '100%';
-              if (bindFunctions) {
-                bindFunctions(graphDiv);
-              }
-            }
-          }
+          'graph-div'
         );
+
+        if (svg.length > 0) {
+          handlePanZoom(state);
+          container.innerHTML = svg;
+          console.log({ svg });
+          const graphDiv = document.getElementById('graph-div');
+          if (!graphDiv) {
+            throw new Error('graph-div not found');
+          }
+          graphDiv.setAttribute('height', '100%');
+          graphDiv.style.maxWidth = '100%';
+          if (bindFunctions) {
+            bindFunctions(graphDiv);
+          }
+        }
+
         view.parentElement!.scrollTop = scroll;
         error = false;
       } else if (manualUpdate) {

src/lib/util/mermaid.ts

@@ -1,16 +1,16 @@
-import mermaid, { type MermaidConfig } from 'mermaid';
+import mermaid from 'mermaid';
+import type { MermaidConfig, RenderResult } from 'mermaid';
 
 export const render = async (
   config: MermaidConfig,
   code: string,
-  id: string,
-  callback: Parameters<typeof mermaid.render>[2]
-): Promise<void> => {
+  id: string
+): Promise<RenderResult> => {
   // Should be able to call this multiple times without any issues.
   mermaid.initialize(config);
-  await mermaid.mermaidAPI.renderAsync(id, code, callback);
+  return await mermaid.render(id, code);
 };
 
-export const parse = async (code: string): Promise<boolean> => {
-  return await mermaid.parseAsync(code);
+export const parse = async (code: string): Promise<unknown> => {
+  return await mermaid.parse(code);
 };

yarn.lock

@@ -3676,10 +3676,10 @@ merge2@^1.3.0, merge2@^1.4.1:
   resolved "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz"
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
 
-mermaid@10.0.0-rc.2:
-  version "10.0.0-rc.2"
-  resolved "https://registry.yarnpkg.com/mermaid/-/mermaid-10.0.0-rc.2.tgz#e4fc043cfb4be4b887edc7638e505ffcb0eb0d68"
-  integrity sha512-L7ecv8yjNq2Mud7kwelzKuQiyxODOKVjTHcZnrvaJWVFfdlvIYt75bZjKn42cHA3GCJThRaEBc8Ow6la8WUscw==
+mermaid@10.0.0-rc.3:
+  version "10.0.0-rc.3"
+  resolved "https://registry.yarnpkg.com/mermaid/-/mermaid-10.0.0-rc.3.tgz#3ad25014902468b0a8bec9bab295ac7007c49475"
+  integrity sha512-gm9bnBOlJbB65trwT2nUiNw26wQ78HKINLua033bPDotjRc2iR6q1Owl8WClS4xM0Kd1n1N1oQFqSv3RFyKbCQ==
   dependencies:
     "@braintree/sanitize-url" "^6.0.0"
     cytoscape "^3.23.0"