@diplodoc/mermaid-extension 1.1.0 → 1.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@diplodoc/mermaid-extension",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Mermaid plugin for Diplodoc transformer and builder",
   "main": "plugin/index.js",
   "types": "plugin/index.d.ts",
@@ -27,7 +27,7 @@
   "files": [
     "plugin",
     "runtime",
-    "hooks"
+    "react"
   ],
   "peerDependencies": {
     "react": "^16.8.0  || ^17.0.0 || ^18.0.0"

package/react/index.d.ts

@@ -0,0 +1,6 @@
+import type { InitConfig, RunOptions } from '../types';
+export type RuntimeOptions = {
+    onError?: (error: any) => void;
+};
+export declare function MermaidRuntime(props: InitConfig & RunOptions & RuntimeOptions): null;
+export declare function useMermaid(): (config: InitConfig, options?: RunOptions) => Promise<void>;

package/react/index.js

@@ -0,0 +1,52 @@
+// src/react/index.ts
+import { useEffect, useState, useCallback } from "react";
+function pick(object, props) {
+  return Object.keys(object).reduce((acc, key) => {
+    if (props.includes(key)) {
+      acc[key] = object[key];
+    }
+    return acc;
+  }, {});
+}
+function omit(object, props) {
+  return Object.keys(object).reduce((acc, key) => {
+    if (!props.includes(key)) {
+      acc[key] = object[key];
+    }
+    return acc;
+  }, {});
+}
+function MermaidRuntime(props) {
+  const renderMermaid = useMermaid();
+  const config = omit(props, ["querySelector", "nodes", "onError"]);
+  const options = pick(props, ["querySelector", "nodes"]);
+  useEffect(() => {
+    renderMermaid(config, options).catch(props.onError || (() => {
+    }));
+  });
+  return null;
+}
+function useMermaid() {
+  const [mermaid, setMermaid] = useState(null);
+  const render = useCallback(async (config, options) => {
+    if (mermaid) {
+      mermaid.initialize(config);
+      return mermaid.run(options);
+    }
+  }, [mermaid]);
+  useEffect(() => {
+    (window.mermaidJsonp = window.mermaidJsonp || []).push(setMermaid);
+    return () => {
+      const index = window.mermaidJsonp.indexOf(setMermaid);
+      if (index > -1) {
+        window.mermaidJsonp.splice(index, 1);
+      }
+    };
+  }, []);
+  return render;
+}
+export {
+  MermaidRuntime,
+  useMermaid
+};
+//# sourceMappingURL=index.js.map

package/react/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/react/index.ts"],
+  "sourcesContent": ["import type { InitConfig, RunOptions, ZoomOptions } from '../types';\nimport { useEffect, useState, useCallback } from 'react';\n\nexport type RuntimeOptions = {\n    onError?: (error: any) => void\n}\n\nfunction pick<O extends Record<string, any>, P extends string, R extends {\n    [K in P]: O[K];\n}>(object: O, props: readonly P[]): R {\n    return Object.keys(object).reduce((acc, key) => {\n        if ((props as readonly string[]).includes(key)) {\n            acc[key] = object[key];\n        }\n\n        return acc;\n    }, {} as Record<string, any>) as R;\n}\n\nfunction omit<O extends Record<string, any>, P extends string, R extends {\n    [K in keyof Omit<O, P>]: O[K];\n}>(object: O, props: readonly P[]): R {\n    return Object.keys(object).reduce((acc, key) => {\n        if (!(props as readonly string[]).includes(key)) {\n            acc[key] = object[key];\n        }\n\n        return acc;\n    }, {} as Record<string, any>) as R;\n}\n\nexport function MermaidRuntime(props: InitConfig & RunOptions & RuntimeOptions) {\n    const renderMermaid = useMermaid();\n    const config = omit(props, [ 'querySelector', 'nodes', 'onError' ]);\n    const options = pick(props, [ 'querySelector', 'nodes' ]);\n\n    useEffect(() => {\n        renderMermaid(config, options).catch(props.onError || (() => {}));\n    });\n\n    return null;\n}\n\nexport function useMermaid() {\n    const [ mermaid, setMermaid ] = useState<Parameters<Callback>[0] | null>(null);\n    const render = useCallback(async (config: InitConfig, options?: RunOptions) => {\n        if (mermaid) {\n            mermaid.initialize(config);\n            return mermaid.run(options);\n        }\n    }, [ mermaid ]);\n\n    useEffect(() => {\n        (window.mermaidJsonp = window.mermaidJsonp || []).push(setMermaid);\n\n        return () => {\n            const index = window.mermaidJsonp.indexOf(setMermaid);\n            if (index > -1) {\n                window.mermaidJsonp.splice(index, 1);\n            }\n        };\n    }, []);\n\n    return render;\n}\n"],
+  "mappings": ";AACA,SAAS,WAAW,UAAU,mBAAmB;AAMjD,SAAS,KAEN,QAAW,OAAwB;AAClC,SAAO,OAAO,KAAK,MAAM,EAAE,OAAO,CAAC,KAAK,QAAQ;AAC5C,QAAK,MAA4B,SAAS,GAAG,GAAG;AAC5C,UAAI,GAAG,IAAI,OAAO,GAAG;AAAA,IACzB;AAEA,WAAO;AAAA,EACX,GAAG,CAAC,CAAwB;AAChC;AAEA,SAAS,KAEN,QAAW,OAAwB;AAClC,SAAO,OAAO,KAAK,MAAM,EAAE,OAAO,CAAC,KAAK,QAAQ;AAC5C,QAAI,CAAE,MAA4B,SAAS,GAAG,GAAG;AAC7C,UAAI,GAAG,IAAI,OAAO,GAAG;AAAA,IACzB;AAEA,WAAO;AAAA,EACX,GAAG,CAAC,CAAwB;AAChC;AAEO,SAAS,eAAe,OAAiD;AAC5E,QAAM,gBAAgB,WAAW;AACjC,QAAM,SAAS,KAAK,OAAO,CAAE,iBAAiB,SAAS,SAAU,CAAC;AAClE,QAAM,UAAU,KAAK,OAAO,CAAE,iBAAiB,OAAQ,CAAC;AAExD,YAAU,MAAM;AACZ,kBAAc,QAAQ,OAAO,EAAE,MAAM,MAAM,YAAY,MAAM;AAAA,IAAC,EAAE;AAAA,EACpE,CAAC;AAED,SAAO;AACX;AAEO,SAAS,aAAa;AACzB,QAAM,CAAE,SAAS,UAAW,IAAI,SAAyC,IAAI;AAC7E,QAAM,SAAS,YAAY,OAAO,QAAoB,YAAyB;AAC3E,QAAI,SAAS;AACT,cAAQ,WAAW,MAAM;AACzB,aAAO,QAAQ,IAAI,OAAO;AAAA,IAC9B;AAAA,EACJ,GAAG,CAAE,OAAQ,CAAC;AAEd,YAAU,MAAM;AACZ,KAAC,OAAO,eAAe,OAAO,gBAAgB,CAAC,GAAG,KAAK,UAAU;AAEjE,WAAO,MAAM;AACT,YAAM,QAAQ,OAAO,aAAa,QAAQ,UAAU;AACpD,UAAI,QAAQ,IAAI;AACZ,eAAO,aAAa,OAAO,OAAO,CAAC;AAAA,MACvC;AAAA,IACJ;AAAA,EACJ,GAAG,CAAC,CAAC;AAEL,SAAO;AACX;",
+  "names": []
+}