rspress-plugin-mermaid 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Linbudu
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,61 @@
+# rspress-plugin-mermaid
+
+Rspress plugin to render mermaid diagrams in markdown files.
+
+Write mermaid as code blocks in markdown files and they will be rendered as SVGs:
+
+````markdown
+```mermaid
+flowchart TD
+    A[Christmas] -->|Get money| B(Go shopping)
+    B --> C{Let me think}
+    C -->|One| D[Laptop]
+    C -->|Two| E[iPhone]
+    C -->|Three| F[fa:fa-car Car]
+```
+````
+
+<div align="center">
+  <img src="./image.png" alt="sample" width="400" height="550" />
+</div>
+
+## Usage
+
+```bash
+npm i rspress-plugin-mermaid
+pnpm add rspress-plugin-mermaid
+```
+
+```ts
+import * as path from 'path';
+import { defineConfig } from 'rspress/config';
+import mermaid from 'rspress-plugin-mermaid';
+
+export default defineConfig({
+  root: path.join(__dirname, 'docs'),
+  plugins: [mermaid()],
+});
+```
+
+## Configure
+
+### mermaidConfig
+
+Mermaid configuration options, will be passed to `mermaid.initialize` function. See [mermaid documentation](https://mermaid.js.org/config/schema-docs/config.html) for more details.
+
+- Type: `object`
+
+```ts
+import * as path from 'path';
+import { defineConfig } from 'rspress/config';
+import mermaid from 'rspress-plugin-mermaid';
+
+export default defineConfig({
+  root: path.join(__dirname, 'docs'),
+  plugins: [mermaid({
+    mermaidConfig: {
+      theme: 'forest',
+    },
+  })],
+});
+```

package/dist/components/MermaidRender.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { type MermaidConfig } from 'mermaid';
+export interface MermaidRendererProps {
+    code: string;
+    config?: MermaidConfig;
+}
+declare const MermaidRenderer: React.FC<MermaidRendererProps>;
+export default MermaidRenderer;

package/dist/components/MermaidRender.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useId, useState } from 'react';
+import mermaid from 'mermaid';
+const MermaidRenderer = (props) => {
+    const { code, config = {} } = props;
+    const id = useId();
+    const [svg, setSvg] = useState('');
+    const [renderError, setRenderError] = useState(false);
+    async function renderMermaid2SVG() {
+        // https://github.com/mermaid-js/mermaid/blob/1b40f552b20df4ab99a986dd58c9d254b3bfd7bc/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue#L53
+        const hasDarkClass = document.documentElement.classList.contains('dark');
+        const mermaidConfig = {
+            securityLevel: 'loose',
+            startOnLoad: false,
+            theme: hasDarkClass ? 'dark' : 'default',
+            ...config,
+        };
+        try {
+            mermaid.initialize(mermaidConfig);
+            const { svg } = await mermaid.render(id.replace(/:/g, ''), code);
+            setSvg(svg);
+        }
+        catch (error) {
+            setRenderError(true);
+        }
+    }
+    useEffect(() => {
+        renderMermaid2SVG();
+    }, [code]);
+    return (_jsx(_Fragment, { children: renderError ? null : _jsx("div", { dangerouslySetInnerHTML: { __html: svg } }) }));
+};
+export default MermaidRenderer;

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+import type { RspressPlugin } from '@rspress/shared';
+import type { MermaidConfig } from 'mermaid';
+interface RspressPluginMermaidOptions {
+    mermaidConfig?: MermaidConfig;
+}
+export default function rspressPluginMermaid(options?: RspressPluginMermaidOptions): RspressPlugin;
+export {};

package/dist/index.js

@@ -0,0 +1,23 @@
+import path from 'node:path';
+import { CodeBlock2GlobalComponentPluginFactory } from 'rspress-plugin-devkit';
+export default function rspressPluginMermaid(options = {}) {
+    const { mermaidConfig = {} } = options;
+    return new CodeBlock2GlobalComponentPluginFactory({
+        name: 'rspress-plugin-mermaid',
+        transformers: [
+            {
+                lang: 'mermaid',
+                componentPath: path.join(__dirname, './components/MermaidRender.tsx'),
+                childrenProvider() {
+                    return [];
+                },
+                propsProvider(code) {
+                    return {
+                        code,
+                        config: mermaidConfig,
+                    };
+                },
+            },
+        ],
+    }).instantiate();
+}

package/doc_build/static/search_index.e342ad1c.json

@@ -0,0 +1 @@
+[{"id":0,"title":"RSPress x Mermaid","content":"#\n\n","routePath":"/","lang":"","toc":[],"domain":"","frontmatter":{},"version":""}]

package/docs/index.md

@@ -0,0 +1,10 @@
+# RSPress x Mermaid
+
+```mermaid
+flowchart TD
+    A[Christmas] -->|Get money| B(Go shopping)
+    B --> C{Let me think}
+    C -->|One| D[Laptop]
+    C -->|Two| E[iPhone]
+    C -->|Three| F[fa:fa-car Car]
+```

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "rspress-plugin-mermaid",
+  "version": "0.1.0",
+  "description": "Rspress plugin to render mermaid diagrams",
+  "keywords": [
+    "rspress",
+    "plugin",
+    "mermaid"
+  ],
+  "homepage": "https://github.com/linbudu599/rspress-plugins/tree/main/packages/rspress-plugin-mermaid#readme",
+  "bugs": {
+    "url": "https://github.com/linbudu599/rspress-plugins/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/linbudu599/rspress-plugins.git"
+  },
+  "license": "MIT",
+  "author": "Linbudu <linbudu599@gmail.com> (https://github.com/linbudu599)",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "dependencies": {
+    "@rspress/shared": "^1.16.2",
+    "mermaid": "^10.9.0",
+    "rspress-plugin-devkit": "^0.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.12.2",
+    "@types/react": "^18.2.73",
+    "typescript": "^5"
+  },
+  "peerDependencies": {
+    "rspress": "*"
+  },
+  "scripts": {
+    "build": "tsc --declarationMap false",
+    "dev": "tsc -w",
+    "docs:build": "rspress build",
+    "docs:dev": "rspress dev",
+    "prepublish": "npm run build"
+  }
+}

package/rspress.config.ts

@@ -0,0 +1,9 @@
+import * as path from 'path';
+import { defineConfig } from 'rspress/config';
+import mermaid from './src';
+
+export default defineConfig({
+  root: path.join(__dirname, 'docs'),
+  title: 'Rspress x Mermaid Example',
+  plugins: [mermaid()],
+});

package/src/components/MermaidRender.tsx

@@ -0,0 +1,55 @@
+import React, { useEffect, useId, useState } from 'react';
+
+import mermaid, { type MermaidConfig } from 'mermaid';
+
+export interface MermaidRendererProps {
+  code: string;
+  config?: MermaidConfig;
+}
+
+const MermaidRenderer: React.FC<MermaidRendererProps> = (props) => {
+  const { code, config = {} } = props;
+
+  const id = useId();
+
+  const [svg, setSvg] = useState('');
+
+  const [renderError, setRenderError] = useState(false);
+
+  async function renderMermaid2SVG() {
+    // https://github.com/mermaid-js/mermaid/blob/1b40f552b20df4ab99a986dd58c9d254b3bfd7bc/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue#L53
+    const hasDarkClass = document.documentElement.classList.contains('dark');
+
+    const mermaidConfig: MermaidConfig = {
+      securityLevel: 'loose',
+      startOnLoad: false,
+      theme: hasDarkClass ? 'dark' : 'default',
+      ...config,
+    };
+
+    try {
+      mermaid.initialize(mermaidConfig);
+
+      const { svg } = await mermaid.render(
+        id.replace(/:/g, ''),
+        code as string,
+      );
+
+      setSvg(svg);
+    } catch (error) {
+      setRenderError(true);
+    }
+  }
+
+  useEffect(() => {
+    renderMermaid2SVG();
+  }, [code]);
+
+  return (
+    <>
+      {renderError ? null : <div dangerouslySetInnerHTML={{ __html: svg }} />}
+    </>
+  );
+};
+
+export default MermaidRenderer;

package/src/index.ts

@@ -0,0 +1,36 @@
+import path from 'node:path';
+
+import { CodeBlock2GlobalComponentPluginFactory } from 'rspress-plugin-devkit';
+
+import type { RspressPlugin } from '@rspress/shared';
+import type { MermaidConfig } from 'mermaid';
+import type { MermaidRendererProps } from './components/MermaidRender';
+
+interface RspressPluginMermaidOptions {
+  mermaidConfig?: MermaidConfig;
+}
+
+export default function rspressPluginMermaid(
+  options: RspressPluginMermaidOptions = {},
+): RspressPlugin {
+  const { mermaidConfig = {} } = options;
+
+  return new CodeBlock2GlobalComponentPluginFactory({
+    name: 'rspress-plugin-mermaid',
+    transformers: [
+      {
+        lang: 'mermaid',
+        componentPath: path.join(__dirname, './components/MermaidRender.tsx'),
+        childrenProvider() {
+          return [];
+        },
+        propsProvider(code) {
+          return {
+            code,
+            config: mermaidConfig,
+          } satisfies MermaidRendererProps;
+        },
+      },
+    ],
+  }).instantiate();
+}

package/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist"
+  },
+  "include": ["src"],
+  "extends": "../../tsconfig.base.json"
+}