fix(mermaid): fix Mermaid integration for v9.2 release

#8282
facebook · Jan 26, 2023 · 21ad883 · 21ad883
1 parent a5a1949
commit 21ad883
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 317 deletions.
diff --git a/packages/docusaurus-mdx-loader/package.json b/packages/docusaurus-mdx-loader/package.json
@@ -40,7 +40,6 @@
     "@docusaurus/types": "2.2.0",
     "@types/escape-html": "^1.0.2",
     "@types/mdast": "^3.0.10",
-    "@types/mermaid": "^8.2.9",
     "@types/stringify-object": "^3.3.1",
     "@types/unist": "^2.0.6",
     "rehype-stringify": "^8.0.0",

diff --git a/packages/docusaurus-theme-mermaid/package.json b/packages/docusaurus-theme-mermaid/package.json
@@ -39,12 +39,11 @@
     "@docusaurus/types": "2.2.0",
     "@docusaurus/utils-validation": "2.2.0",
     "@mdx-js/react": "^1.6.22",
-    "mermaid": "^9.1.1",
+    "mermaid": "^9.2.2",
     "tslib": "^2.4.0"
   },
   "devDependencies": {
     "@types/mdx-js__react": "^1.5.5",
-    "@types/mermaid": "^8.2.9",
     "react-test-renderer": "^17.0.2"
   },
   "peerDependencies": {

diff --git a/packages/docusaurus-theme-mermaid/src/client/index.ts b/packages/docusaurus-theme-mermaid/src/client/index.ts
@@ -7,8 +7,7 @@
 
 import {useMemo} from 'react';
 import {useColorMode, useThemeConfig} from '@docusaurus/theme-common';
-import mermaid from 'mermaid';
-import type mermaidAPI from 'mermaid/mermaidAPI';
+import mermaid, {type MermaidConfig} from 'mermaid';
 import type {ThemeConfig} from '@docusaurus/theme-mermaid';
 
 // Stable className to allow users to easily target with CSS
@@ -18,7 +17,7 @@ export function useMermaidThemeConfig(): ThemeConfig['mermaid'] {
   return (useThemeConfig() as unknown as ThemeConfig).mermaid;
 }
 
-export function useMermaidConfig(): mermaidAPI.Config {
+export function useMermaidConfig(): MermaidConfig {
   const {colorMode} = useColorMode();
   const mermaidThemeConfig = useMermaidThemeConfig();
 
@@ -33,7 +32,7 @@ export function useMermaidConfig(): mermaidAPI.Config {
 
 export function useMermaidSvg(
   txt: string,
-  mermaidConfigParam?: mermaidAPI.Config,
+  mermaidConfigParam?: MermaidConfig,
 ): string {
   /*
   For flexibility, we allow the hook to receive a custom Mermaid config

diff --git a/packages/docusaurus-theme-mermaid/src/validateThemeConfig.ts b/packages/docusaurus-theme-mermaid/src/validateThemeConfig.ts
@@ -7,14 +7,13 @@
 
 import {Joi} from '@docusaurus/utils-validation';
 import type {ThemeConfig} from '@docusaurus/theme-mermaid';
-import type mermaidAPI from 'mermaid/mermaidAPI';
 import type {ThemeConfigValidationContext} from '@docusaurus/types';
 
 export const DEFAULT_THEME_CONFIG: ThemeConfig = {
   mermaid: {
     theme: {
-      dark: 'dark' as mermaidAPI.Theme,
-      light: 'default' as mermaidAPI.Theme,
+      dark: 'dark',
+      light: 'default',
     },
     options: {},
   },

diff --git a/packages/docusaurus-theme-mermaid/tsconfig.client.json b/packages/docusaurus-theme-mermaid/tsconfig.client.json
@@ -10,6 +10,6 @@
     "module": "esnext",
     "target": "esnext"
   },
-  "include": ["src/theme", "src/*.d.ts"],
+  "include": ["src/client", "src/theme", "src/*.d.ts"],
   "exclude": ["**/__tests__/**"]
 }
diff --git a/packages/docusaurus-theme-mermaid/tsconfig.json b/packages/docusaurus-theme-mermaid/tsconfig.json
@@ -10,5 +10,5 @@
     "outDir": "lib"
   },
   "include": ["src"],
-  "exclude": ["src/theme", "**/__tests__/**"]
+  "exclude": ["src/client", "src/theme", "**/__tests__/**"]
 }