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

package/dist/index.js

@@ -6,7 +6,7 @@ export default function rspressPluginMermaid(options = {}) {
         components: [
             {
                 lang: 'mermaid',
-                componentPath: path.join(__dirname, './components/MermaidRender.tsx'),
+                componentPath: path.join(__dirname, '../components', 'MermaidRender.tsx'),
                 childrenProvider() {
                     return [];
                 },

package/dist/typings.d.ts

@@ -0,0 +1,5 @@
+import type { MermaidConfig } from 'mermaid';
+export interface MermaidRendererProps {
+    code: string;
+    config?: MermaidConfig;
+}

package/dist/typings.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,7 +1,10 @@
 {
   "name": "rspress-plugin-mermaid",
-  "version": "0.1.2-beta.0",
+  "version": "0.1.4-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.2-beta.0"
+    "rspress-plugin-devkit": "^0.1.3"
   },
   "devDependencies": {
     "@types/node": "^20.12.5",

package/CHANGELOG.md

@@ -1,27 +0,0 @@
-# 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/dist/components/MermaidRender.d.ts

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

@@ -1,32 +0,0 @@
-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/doc_build/static/search_index.e342ad1c.json

@@ -1 +0,0 @@
-[{"id":0,"title":"RSPress x Mermaid","content":"#\n\n","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,55 +0,0 @@
-import path from 'node:path';
-
-import {
-  PresetConfigMutator,
-  RemarkCodeBlockToGlobalComponentPluginFactory,
-  getCompatComponentPath,
-} 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',
-          getCompatComponentPath(__dirname, '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"
-}