@docusaurus/theme-mermaid 2.2.0 → 2.3.0

package/lib/client/index.d.ts

@@ -4,9 +4,9 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import type mermaidAPI from 'mermaid/mermaidAPI';
+import { type MermaidConfig } from 'mermaid';
 import type { ThemeConfig } from '@docusaurus/theme-mermaid';
 export declare const MermaidContainerClassName = "docusaurus-mermaid-container";
 export declare function useMermaidThemeConfig(): ThemeConfig['mermaid'];
-export declare function useMermaidConfig(): mermaidAPI.Config;
-export declare function useMermaidSvg(txt: string, mermaidConfigParam?: mermaidAPI.Config): string;
+export declare function useMermaidConfig(): MermaidConfig;
+export declare function useMermaidSvg(txt: string, mermaidConfigParam?: MermaidConfig): string;

package/lib/client/index.js

@@ -1,38 +1,32 @@
-"use strict";
 /**
  * Copyright (c) Facebook, Inc. and its affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMermaidSvg = exports.useMermaidConfig = exports.useMermaidThemeConfig = exports.MermaidContainerClassName = void 0;
-const tslib_1 = require("tslib");
-const react_1 = require("react");
-const theme_common_1 = require("@docusaurus/theme-common");
-const mermaid_1 = tslib_1.__importDefault(require("mermaid"));
+import { useMemo } from 'react';
+import { useColorMode, useThemeConfig } from '@docusaurus/theme-common';
+import mermaid from 'mermaid';
 // Stable className to allow users to easily target with CSS
-exports.MermaidContainerClassName = 'docusaurus-mermaid-container';
-function useMermaidThemeConfig() {
-    return (0, theme_common_1.useThemeConfig)().mermaid;
+export const MermaidContainerClassName = 'docusaurus-mermaid-container';
+export function useMermaidThemeConfig() {
+    return useThemeConfig().mermaid;
 }
-exports.useMermaidThemeConfig = useMermaidThemeConfig;
-function useMermaidConfig() {
-    const { colorMode } = (0, theme_common_1.useColorMode)();
+export function useMermaidConfig() {
+    const { colorMode } = useColorMode();
     const mermaidThemeConfig = useMermaidThemeConfig();
     const theme = mermaidThemeConfig.theme[colorMode];
     const { options } = mermaidThemeConfig;
-    return (0, react_1.useMemo)(() => ({ startOnLoad: false, ...options, theme }), [theme, options]);
+    return useMemo(() => ({ startOnLoad: false, ...options, theme }), [theme, options]);
 }
-exports.useMermaidConfig = useMermaidConfig;
-function useMermaidSvg(txt, mermaidConfigParam) {
+export function useMermaidSvg(txt, mermaidConfigParam) {
     /*
     For flexibility, we allow the hook to receive a custom Mermaid config
     The user could inject a modified version of the default config for example
      */
     const defaultMermaidConfig = useMermaidConfig();
     const mermaidConfig = mermaidConfigParam ?? defaultMermaidConfig;
-    return (0, react_1.useMemo)(() => {
+    return useMemo(() => {
         /*
         Mermaid API is really weird :s
         It is a big mutable singleton with multiple config levels
@@ -51,7 +45,7 @@ function useMermaidSvg(txt, mermaidConfigParam) {
         To use a new mermaid config (on colorMode change for example) we should
         update siteConfig, and it can only be done with initialize()
          */
-        mermaid_1.default.mermaidAPI.initialize(mermaidConfig);
+        mermaid.mermaidAPI.initialize(mermaidConfig);
         /*
         Random client-only id, we don't care much about it
         But mermaid want an id so...
@@ -61,7 +55,6 @@ function useMermaidSvg(txt, mermaidConfigParam) {
         Not even documented: mermaid.render returns the svg string
         Using the documented form is un-necessary
          */
-        return mermaid_1.default.render(mermaidId, txt);
+        return mermaid.render(mermaidId, txt);
     }, [txt, mermaidConfig]);
 }
-exports.useMermaidSvg = useMermaidSvg;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-mermaid",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "Mermaid components for Docusaurus.",
   "main": "lib/index.js",
   "types": "src/theme-mermaid.d.ts",
@@ -33,18 +33,17 @@
     "copy:watch": "node ../../admin/scripts/copyUntypedFiles.js --watch"
   },
   "dependencies": {
-    "@docusaurus/core": "2.2.0",
-    "@docusaurus/module-type-aliases": "2.2.0",
-    "@docusaurus/theme-common": "2.2.0",
-    "@docusaurus/types": "2.2.0",
-    "@docusaurus/utils-validation": "2.2.0",
+    "@docusaurus/core": "2.3.0",
+    "@docusaurus/module-type-aliases": "2.3.0",
+    "@docusaurus/theme-common": "2.3.0",
+    "@docusaurus/types": "2.3.0",
+    "@docusaurus/utils-validation": "2.3.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": {
@@ -54,5 +53,5 @@
   "engines": {
     "node": ">=16.14"
   },
-  "gitHead": "a308fb7c81832cca354192fe2984f52749441249"
+  "gitHead": "ad477781bdca6a11fa9c6daef5048bdcec0ee37e"
 }

package/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

package/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: {},
   },