rspress-plugin-mermaid 0.1.0 → 0.1.2-beta.0

package/CHANGELOG.md

@@ -0,0 +1,27 @@
+# rspress-plugin-mermaid
+
+## 0.1.2-beta.0
+
+### Patch Changes
+
+- 932dbb7: compat component path
+- Updated dependencies [932dbb7]
+  - rspress-plugin-devkit@0.1.2-beta.0
+
+## 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/README.md

@@ -1,4 +1,6 @@
-# rspress-plugin-mermaid
+# 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.
 
@@ -16,7 +18,7 @@ flowchart TD
 ````
 
 <div align="center">
-  <img src="./image.png" alt="sample" width="400" height="550" />
+  <img src="./image.png" alt="sample" width="400" height="560" />
 </div>
 
 ## Usage
@@ -52,10 +54,12 @@ import mermaid from 'rspress-plugin-mermaid';
 
 export default defineConfig({
   root: path.join(__dirname, 'docs'),
-  plugins: [mermaid({
-    mermaidConfig: {
-      theme: 'forest',
-    },
-  })],
+  plugins: [
+    mermaid({
+      mermaidConfig: {
+        theme: 'forest',
+      },
+    }),
+  ],
 });
-```
+```

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,10 +1,9 @@
 import path from 'node:path';
-import { CodeBlock2GlobalComponentPluginFactory } from 'rspress-plugin-devkit';
+import { PresetConfigMutator, RemarkCodeBlockToGlobalComponentPluginFactory, } from 'rspress-plugin-devkit';
 export default function rspressPluginMermaid(options = {}) {
     const { mermaidConfig = {} } = options;
-    return new CodeBlock2GlobalComponentPluginFactory({
-        name: 'rspress-plugin-mermaid',
-        transformers: [
+    const remarkMermaid = new RemarkCodeBlockToGlobalComponentPluginFactory({
+        components: [
             {
                 lang: 'mermaid',
                 componentPath: path.join(__dirname, './components/MermaidRender.tsx'),
@@ -19,5 +18,16 @@ export default function rspressPluginMermaid(options = {}) {
                 },
             },
         ],
-    }).instantiate();
+    });
+    return {
+        name: 'rspress-plugin-mermaid',
+        config(config) {
+            return new PresetConfigMutator(config).disableMdxRs().toConfig();
+        },
+        markdown: {
+            remarkPlugins: [remarkMermaid.remarkPlugin],
+            globalComponents: remarkMermaid.mdxComponents,
+        },
+        builderConfig: remarkMermaid.builderConfig,
+    };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rspress-plugin-mermaid",
-  "version": "0.1.0",
+  "version": "0.1.2-beta.0",
   "description": "Rspress plugin to render mermaid diagrams",
   "keywords": [
     "rspress",
@@ -19,15 +19,18 @@
   "author": "Linbudu <linbudu599@gmail.com> (https://github.com/linbudu599)",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
   "dependencies": {
-    "@rspress/shared": "^1.16.2",
+    "@rspress/shared": "^1.17.1",
     "mermaid": "^10.9.0",
-    "rspress-plugin-devkit": "^0.1.0"
+    "rspress-plugin-devkit": "^0.1.2-beta.0"
   },
   "devDependencies": {
-    "@types/node": "^20.12.2",
-    "@types/react": "^18.2.73",
-    "typescript": "^5"
+    "@types/node": "^20.12.5",
+    "@types/react": "^18.2.74",
+    "typescript": "^5.4.4"
   },
   "peerDependencies": {
     "rspress": "*"
@@ -36,7 +39,6 @@
     "build": "tsc --declarationMap false",
     "dev": "tsc -w",
     "docs:build": "rspress build",
-    "docs:dev": "rspress dev",
-    "prepublish": "npm run build"
+    "docs:dev": "rspress dev"
   }
 }

package/src/index.ts

@@ -1,6 +1,10 @@
 import path from 'node:path';
 
-import { CodeBlock2GlobalComponentPluginFactory } from 'rspress-plugin-devkit';
+import {
+  PresetConfigMutator,
+  RemarkCodeBlockToGlobalComponentPluginFactory,
+  getCompatComponentPath,
+} from 'rspress-plugin-devkit';
 
 import type { RspressPlugin } from '@rspress/shared';
 import type { MermaidConfig } from 'mermaid';
@@ -15,12 +19,15 @@ export default function rspressPluginMermaid(
 ): RspressPlugin {
   const { mermaidConfig = {} } = options;
 
-  return new CodeBlock2GlobalComponentPluginFactory({
-    name: 'rspress-plugin-mermaid',
-    transformers: [
+  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 [];
         },
@@ -32,5 +39,17 @@ export default function rspressPluginMermaid(
         },
       },
     ],
-  }).instantiate();
+  });
+
+  return {
+    name: 'rspress-plugin-mermaid',
+    config(config) {
+      return new PresetConfigMutator(config).disableMdxRs().toConfig();
+    },
+    markdown: {
+      remarkPlugins: [remarkMermaid.remarkPlugin],
+      globalComponents: remarkMermaid.mdxComponents,
+    },
+    builderConfig: remarkMermaid.builderConfig,
+  };
 }