@myst-theme/diagrams 0.17.0 → 0.18.0

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAa1D,wBAAgB,eAAe,CAAC,EAC9B,EAAE,EACF,KAAK,EACL,SAAS,GACV,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,2CA6BA;AAED,eAAO,MAAM,mBAAmB,EAAE,YAQjC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAgB1D,wBAAgB,eAAe,CAAC,EAC9B,EAAE,EACF,KAAK,EACL,SAAS,GACV,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,2CAiCA;AAED,eAAO,MAAM,mBAAmB,EAAE,YAQjC,CAAC"}

package/dist/index.js

@@ -10,14 +10,15 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useState } from 'react';
 import classNames from 'classnames';
-function parse(id, text) {
+let _mermaid = undefined;
+function loadMermaid() {
     return __awaiter(this, void 0, void 0, function* () {
-        const { default: mermaid } = yield import('mermaid');
-        return yield new Promise((resolve) => {
-            mermaid.render(id, text, (code) => {
-                resolve(code);
-            });
-        });
+        if (_mermaid === undefined) {
+            const module = yield import('mermaid');
+            _mermaid = module.default;
+            _mermaid.initialize({ startOnLoad: false });
+        }
+        return _mermaid;
     });
 }
 export function MermaidRenderer({ id, value, className, }) {
@@ -25,15 +26,20 @@ export function MermaidRenderer({ id, value, className, }) {
     const [graph, setGraph] = useState();
     const [error, setError] = useState();
     useEffect(() => {
-        parse(`mermaid-${key.replace(/:/g, '')}`, value)
-            .then((svg) => {
-            setGraph(svg);
-            setError(undefined);
-        })
-            .catch((err) => {
-            setGraph(undefined);
-            setError(err);
+        const render = () => __awaiter(this, void 0, void 0, function* () {
+            try {
+                const mermaidID = `mermaid-${key.replace(/:/g, '')}`;
+                const mermaid = yield loadMermaid();
+                const { svg } = yield mermaid.render(mermaidID, value);
+                setGraph(svg);
+                setError(undefined);
+            }
+            catch (err) {
+                setGraph(undefined);
+                setError(err);
+            }
         });
+        render();
     }, []);
     return (_jsxs("figure", { id: id, className: className, children: [graph && _jsx("div", { dangerouslySetInnerHTML: { __html: graph } }), error && (_jsxs("pre", { children: ["Error parsing mermaid graph.", '\n\n', error.message, '\n\n', value] }))] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myst-theme/diagrams",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "type": "module",
   "exports": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -20,8 +20,8 @@
     "build": "npm-run-all -l clean -p build:esm"
   },
   "dependencies": {
-    "@myst-theme/providers": "^0.17.0",
-    "mermaid": "^9.3.0",
+    "@myst-theme/providers": "^0.18.0",
+    "mermaid": "^11.0.0",
     "classnames": "^2.3.2"
   },
   "peerDependencies": {