rspress-plugin-mermaid 0.1.1 → 0.1.3-beta.0

package/README.md

@@ -1,5 +1,7 @@
 # rspress-plugin-mermaid ![NPM Version](https://img.shields.io/npm/v/rspress-plugin-mermaid)
 
+[简体中文](./README.zh-CN.md)
+
 Rspress plugin to render mermaid diagrams in markdown files.
 
 Write mermaid as code blocks in markdown files and they will be rendered as SVGs:

package/README.zh-CN.md

@@ -0,0 +1,63 @@
+# rspress-plugin-mermaid ![NPM Version](https://img.shields.io/npm/v/rspress-plugin-mermaid)
+
+为 Rspress 支持基于 [Mermaid](hhttps://mermaid.js.org/#/) 的流程图、时序图等图表。
+
+编写 Mermaid 图表时，只需使用 `mermaid` 代码块，插件会自动将其转换为 SVG。
+
+````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="560" />
+</div>
+
+## 使用
+
+```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()],
+});
+```
+
+## 配置
+
+### mermaidConfig
+
+Mermaid 配置选项，将传递给 `mermaid.initialize` 函数。查看 [mermaid 文档](https://mermaid.js.org/config/schema-docs/config.html) 了解更多细节。
+
+- 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/index.js

@@ -1,12 +1,12 @@
 import path from 'node:path';
-import { PresetConfigMutator, RemarkCodeBlockToGlobalComponentPluginFactory, } from 'rspress-plugin-devkit';
+import { PresetConfigMutator, RemarkCodeBlockToGlobalComponentPluginFactory, getCompatComponentPath, } from 'rspress-plugin-devkit';
 export default function rspressPluginMermaid(options = {}) {
     const { mermaidConfig = {} } = options;
     const remarkMermaid = new RemarkCodeBlockToGlobalComponentPluginFactory({
         components: [
             {
                 lang: 'mermaid',
-                componentPath: path.join(__dirname, './components/MermaidRender.tsx'),
+                componentPath: path.join(__dirname, './components', getCompatComponentPath(__dirname, 'MermaidRender.tsx')),
                 childrenProvider() {
                     return [];
                 },

package/package.json

@@ -1,7 +1,10 @@
 {
   "name": "rspress-plugin-mermaid",
-  "version": "0.1.1",
+  "version": "0.1.3-beta.0",
   "description": "Rspress plugin to render mermaid diagrams",
+  "files": [
+    "dist"
+  ],
   "keywords": [
     "rspress",
     "plugin",
@@ -25,7 +28,7 @@
   "dependencies": {
     "@rspress/shared": "^1.17.1",
     "mermaid": "^10.9.0",
-    "rspress-plugin-devkit": "^0.1.1"
+    "rspress-plugin-devkit": "^0.1.3-beta.0"
   },
   "devDependencies": {
     "@types/node": "^20.12.5",

package/CHANGELOG.md

@@ -1,19 +0,0 @@
-# rspress-plugin-mermaid
-
-## 0.1.1
-
-### Patch Changes
-
-- 546dcf0: release beta
-- 5e28903: fixup publish config
-- Updated dependencies [546dcf0]
-- Updated dependencies [5e28903]
-  - rspress-plugin-devkit@0.1.1
-
-## 0.1.1-beta.0
-
-### Patch Changes
-
-- 546dcf0: release beta
-- Updated dependencies [546dcf0]
-  - rspress-plugin-devkit@0.1.1-beta.0

package/doc_build/static/search_index.8a52de80.json

@@ -1 +0,0 @@
-[{"id":0,"title":"RSPress x Mermaid","content":"#\n\nMERMAID\n\nflowchart TD\n\nA[Christmas] -->|Get money| B(Go shopping)\n\nB --> C{Let me think}\n\nC -->|One| D[Laptop]\n\nC -->|Two| E[iPhone]\n\nC -->|Three| F[fa:fa-car Car]","routePath":"/","lang":"","toc":[],"domain":"","frontmatter":{},"version":""}]

package/docs/index.md

@@ -1,10 +0,0 @@
-# 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/rspress.config.ts

@@ -1,9 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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

@@ -1,50 +0,0 @@
-import path from 'node:path';
-
-import {
-  PresetConfigMutator,
-  RemarkCodeBlockToGlobalComponentPluginFactory,
-} 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;
-
-  const remarkMermaid = new RemarkCodeBlockToGlobalComponentPluginFactory({
-    components: [
-      {
-        lang: 'mermaid',
-        componentPath: path.join(__dirname, './components/MermaidRender.tsx'),
-        childrenProvider() {
-          return [];
-        },
-        propsProvider(code) {
-          return {
-            code,
-            config: mermaidConfig,
-          } satisfies MermaidRendererProps;
-        },
-      },
-    ],
-  });
-
-  return {
-    name: 'rspress-plugin-mermaid',
-    config(config) {
-      return new PresetConfigMutator(config).disableMdxRs().toConfig();
-    },
-    markdown: {
-      remarkPlugins: [remarkMermaid.remarkPlugin],
-      globalComponents: remarkMermaid.mdxComponents,
-    },
-    builderConfig: remarkMermaid.builderConfig,
-  };
-}

package/tsconfig.json

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