@diplodoc/mermaid-extension 0.0.1

package/.babelrc

@@ -0,0 +1,5 @@
+{
+  "presets": [
+    "env"
+  ]
+}

package/lib/index.d.ts

@@ -0,0 +1,18 @@
+declare module "hooks/useMermaid" {
+    import type { MermaidConfig } from 'mermaid';
+    export function useMermaid(): (config: MermaidConfig) => Promise<void>;
+}
+declare module "hooks/index" {
+    export { useMermaid } from "hooks/useMermaid";
+}
+declare module "plugin/transform" {
+    import type { MarkdownItPluginCb } from '@doc-tools/transform/lib/plugins/typings';
+    export function transform({ runtime, bundle }?: {
+        runtime?: string | undefined;
+        bundle?: boolean | undefined;
+    }): MarkdownItPluginCb;
+}
+declare module "plugin/index" {
+    export { transform } from "plugin/transform";
+}
+declare module "runtime/index" { }

package/lib/index.js

@@ -0,0 +1,70 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/plugin/index.ts
+var plugin_exports = {};
+__export(plugin_exports, {
+  transform: () => transform
+});
+module.exports = __toCommonJS(plugin_exports);
+
+// src/plugin/transform.ts
+function transform({ runtime = "_assets/mermaid-plugin.js", bundle = true } = {}) {
+  const replaceFence = function replaceFence2({ tokens, env }) {
+    tokens.forEach((token) => {
+      if (token.type !== "fence" || !token.info.match(/^\s*mermaid(\s*|$)/)) {
+        return;
+      }
+      token.type = "mermaid";
+      token.attrSet("class", `mermaid yfm-mermaid`);
+      console.log(env);
+      if (!env.meta) {
+        env.meta = {};
+      }
+      env.meta.script = env.meta.script || [];
+      if (env.meta.script.indexOf(runtime) === -1) {
+        env.meta.script.push(runtime);
+        if (bundle) {
+          env.meta.bundle = env.meta.bundle || [];
+          env.meta.bundle.push({
+            from: "@diplodoc/mermaid-plugin/dist/runtime.js",
+            to: runtime
+          });
+        }
+      }
+    });
+  };
+  return function(md) {
+    try {
+      md.core.ruler.after("fence", "mermaid", replaceFence);
+    } catch (e) {
+      md.core.ruler.push("mermaid", replaceFence);
+    }
+    md.renderer.rules.mermaid = (tokens, idx) => {
+      const token = tokens[idx];
+      const code = encodeURIComponent(token.content.trim());
+      return `<div class="mermaid" data-content="${code}"></div>`;
+    };
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  transform
+});
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/plugin/index.ts", "../src/plugin/transform.ts"],
+  "sourcesContent": ["export { transform } from './transform';", "import type {MarkdownIt} from '@doc-tools/transform/lib/typings';\nimport type {MarkdownItPluginCb} from '@doc-tools/transform/lib/plugins/typings';\nimport type ParserCore from 'markdown-it/lib/parser_core';\n\nexport function transform({ runtime = '_assets/mermaid-plugin.js', bundle = true } = {}) {\n    const replaceFence: ParserCore.RuleCore = function replaceFence({tokens, env}) {\n        tokens.forEach((token)  => {\n            if (token.type !== 'fence' || !token.info.match(/^\\s*mermaid(\\s*|$)/)) {\n                return;\n            }\n\n            token.type = 'mermaid';\n            token.attrSet('class', `mermaid yfm-mermaid`);\n\n            console.log(env)\n            if (!env.meta) {\n                env.meta = {};\n            }\n\n            env.meta.script = env.meta.script || [];\n\n            if (env.meta.script.indexOf(runtime) === -1) {\n                env.meta.script.push(runtime);\n\n                if (bundle) {\n                    env.meta.bundle = env.meta.bundle || [];\n                    env.meta.bundle.push({\n                        from: '@diplodoc/mermaid-plugin/dist/runtime.js',\n                        to: runtime\n                    });\n                }\n            }\n        });\n    };\n\n    return function(md: MarkdownIt) {\n        try {\n            md.core.ruler.after('fence', 'mermaid', replaceFence);\n        } catch (e) {\n            md.core.ruler.push('mermaid', replaceFence);\n        }\n\n        md.renderer.rules.mermaid = (tokens, idx) => {\n            const token = tokens[idx];\n            const code = encodeURIComponent(token.content.trim());\n\n            return `<div class=\"mermaid\" data-content=\"${code}\"></div>`;\n        };\n    } as MarkdownItPluginCb;\n}"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACIO,SAAS,UAAU,EAAE,UAAU,6BAA6B,SAAS,KAAK,IAAI,CAAC,GAAG;AACrF,QAAM,eAAoC,SAASA,cAAa,EAAC,QAAQ,IAAG,GAAG;AAC3E,WAAO,QAAQ,CAAC,UAAW;AACvB,UAAI,MAAM,SAAS,WAAW,CAAC,MAAM,KAAK,MAAM,oBAAoB,GAAG;AACnE;AAAA,MACJ;AAEA,YAAM,OAAO;AACb,YAAM,QAAQ,SAAS,qBAAqB;AAE5C,cAAQ,IAAI,GAAG;AACf,UAAI,CAAC,IAAI,MAAM;AACX,YAAI,OAAO,CAAC;AAAA,MAChB;AAEA,UAAI,KAAK,SAAS,IAAI,KAAK,UAAU,CAAC;AAEtC,UAAI,IAAI,KAAK,OAAO,QAAQ,OAAO,MAAM,IAAI;AACzC,YAAI,KAAK,OAAO,KAAK,OAAO;AAE5B,YAAI,QAAQ;AACR,cAAI,KAAK,SAAS,IAAI,KAAK,UAAU,CAAC;AACtC,cAAI,KAAK,OAAO,KAAK;AAAA,YACjB,MAAM;AAAA,YACN,IAAI;AAAA,UACR,CAAC;AAAA,QACL;AAAA,MACJ;AAAA,IACJ,CAAC;AAAA,EACL;AAEA,SAAO,SAAS,IAAgB;AAC5B,QAAI;AACA,SAAG,KAAK,MAAM,MAAM,SAAS,WAAW,YAAY;AAAA,IACxD,SAAS,GAAP;AACE,SAAG,KAAK,MAAM,KAAK,WAAW,YAAY;AAAA,IAC9C;AAEA,OAAG,SAAS,MAAM,UAAU,CAAC,QAAQ,QAAQ;AACzC,YAAM,QAAQ,OAAO,GAAG;AACxB,YAAM,OAAO,mBAAmB,MAAM,QAAQ,KAAK,CAAC;AAEpD,aAAO,sCAAsC;AAAA,IACjD;AAAA,EACJ;AACJ;",
+  "names": ["replaceFence"]
+}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@diplodoc/mermaid-extension",
+  "version": "0.0.1",
+  "description": "Mermaid plugin for Diplodoc transformer and builder",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "scripts": {
+    "build": "run-p build:*",
+    "build:lib": "esbuild src/plugin/index.ts --bundle --platform=node --outfile=lib/index.js --sourcemap",
+    "build:hooks": "esbuild src/hooks/index.ts --bundle --platform=neutral --target=es6 --outfile=hooks/index.js --external:react --sourcemap",
+    "build:runtime": "esbuild src/runtime/index.ts --bundle --minify --sourcemap --outfile=dist/runtime.js",
+    "build:declarations": "tsc --emitDeclarationOnly --outFile lib/index.d.ts",
+    "test": "jest"
+  },
+  "keywords": [
+    "mermaid",
+    "markdown-it"
+  ],
+  "author": "",
+  "license": "ISC",
+  "optionalDependencies": {
+    "react": "^18.2.0"
+  },
+  "devDependencies": {
+    "@doc-tools/transform": "^2.16.4",
+    "@types/markdown-it": "^12.2.3",
+    "@types/react": "^18.0.35",
+    "esbuild": "^0.17.12",
+    "jest": "^29.5.0",
+    "markdown-it": "^13.0.1",
+    "npm-run-all": "^4.1.5",
+    "react": "^18.2.0",
+    "typescript": "^5.0.2"
+  },
+  "dependencies": {
+    "mermaid": "^10.0.2",
+    "ts-dedent": "^2.2.0"
+  }
+}

package/src/@types/common.d.ts

@@ -0,0 +1,12 @@
+import type mermaid from 'mermaid';
+
+type Callback = (exposed: {
+    run: typeof mermaid.run;
+    initialize: typeof mermaid.initialize;
+}) => void;
+
+declare global {
+    interface Window {
+        mermaidJsonp: Callback[];
+    }
+}

package/src/plugin/index.ts

@@ -0,0 +1 @@
+export { transform } from './transform';

package/src/plugin/transform.ts

@@ -0,0 +1,46 @@
+import type {MarkdownIt} from '@doc-tools/transform/lib/typings';
+import type {MarkdownItPluginCb} from '@doc-tools/transform/lib/plugins/typings';
+import type ParserCore from 'markdown-it/lib/parser_core';
+
+export function transform({ runtime = '_assets/mermaid-extension.js', bundle = true } = {}) {
+    const replaceFence: ParserCore.RuleCore = function replaceFence({tokens, env}) {
+        tokens.forEach((token)  => {
+            if (token.type !== 'fence' || !token.info.match(/^\s*mermaid(\s*|$)/)) {
+                return;
+            }
+
+            token.type = 'mermaid';
+            token.attrSet('class', `mermaid yfm-mermaid`);
+
+            env.meta = env.meta || {};
+            env.meta.script = env.meta.script || [];
+
+            if (env.meta.script.indexOf(runtime) === -1) {
+                env.meta.script.push(runtime);
+
+                if (bundle) {
+                    env.meta.bundle = env.meta.bundle || [];
+                    env.meta.bundle.push({
+                        from: '@diplodoc/mermaid-extension/dist/runtime.js',
+                        to: runtime
+                    });
+                }
+            }
+        });
+    };
+
+    return function(md: MarkdownIt) {
+        try {
+            md.core.ruler.after('fence', 'mermaid', replaceFence);
+        } catch (e) {
+            md.core.ruler.push('mermaid', replaceFence);
+        }
+
+        md.renderer.rules.mermaid = (tokens, idx) => {
+            const token = tokens[idx];
+            const code = encodeURIComponent(token.content.trim());
+
+            return `<div class="mermaid" data-content="${code}"></div>`;
+        };
+    } as MarkdownItPluginCb;
+}

package/src/runtime/index.ts

@@ -0,0 +1,67 @@
+import mermaid from 'mermaid';
+import dedent from 'ts-dedent';
+
+mermaid.initialize({
+    startOnLoad: false,
+    theme: 'forest'
+});
+
+const jsonp = window.mermaidJsonp = window.mermaidJsonp || [];
+const queue = jsonp.splice(0, jsonp.length);
+
+jsonp.push = function(...args) {
+    args.forEach((callback) => {
+        queue.push(callback);
+        unqueue();
+    });
+
+    return queue.length;
+};
+
+let processing = false;
+
+function unqueue() {
+    if (!processing) {
+        next();
+    }
+}
+
+async function next(): Promise<void> {
+    processing = true;
+
+    const callback = queue.shift();
+    if (callback) {
+        await callback({
+            run: async () => {
+                const nodes = document.querySelectorAll('.mermaid');
+
+                for (const element of Array.from(nodes)) {
+                    const id = `mermaid-${ Date.now() }`;
+                    const content = element.getAttribute('data-content') || '';
+                    const text = dedent(decodeURIComponent(content))
+                        .trim()
+                        .replace(/<br\s*\/?>/gi, '<br/>');
+
+                    const { svg, bindFunctions } = await mermaid.render(id, text, element);
+                    element.innerHTML = svg;
+
+                    if (bindFunctions) {
+                        bindFunctions(element);
+                    }
+                }
+            },
+            initialize: (config) => {
+                mermaid.initialize({
+                    startOnLoad: false,
+                    ...config
+                });
+            },
+        });
+
+        return next();
+    }
+
+    processing = false;
+}
+
+unqueue();

package/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "module": "es2022",
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "pretty": true,
+    "newLine": "lf",
+    "stripInternal": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "noEmitOnError": true,
+    "experimentalDecorators": true,
+    "allowJs": true,
+    "declaration": true
+  },
+  "include": [
+    "src"
+  ],
+  "ts-node": {
+    "esm": true,
+    "transpileOnly": true
+  }
+}