@docusaurus/theme-mermaid 3.10.1-canary-6655 → 3.10.2

package/lib/client/index.js

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { useState, useEffect, useMemo, useId } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { useColorMode, useThemeConfig } from '@docusaurus/theme-common';
 import { loadMermaid } from './loadMermaid';
 // Stable className to allow users to easily target with CSS
@@ -19,9 +19,15 @@ export function useMermaidConfig() {
     const { options } = mermaidThemeConfig;
     return useMemo(() => ({ startOnLoad: false, ...options, theme }), [theme, options]);
 }
-// Random client-only id, we don't care much but mermaid want an id so...
 function useMermaidId() {
-    return useId();
+    /*
+    Random client-only id, we don't care much but mermaid want an id so...
+    Note: Mermaid doesn't like values provided by Rect.useId() and throws
+    */
+    // TODO Docusaurus v4: check if useId() now works
+    //  It could work thanks to https://github.com/facebook/react/pull/32001
+    // return useId(); // tried that, doesn't work ('#d:re:' is not a valid selector.)
+    return useState(`mermaid-svg-${Math.round(Math.random() * 10000000)}`)[0];
 }
 async function renderMermaid({ id, text, config, }) {
     const mermaid = await loadMermaid();

package/lib/index.js

@@ -18,7 +18,7 @@ async function isElkLayoutPackageAvailable() {
         await import('@mermaid-js/layout-elk');
         return true;
     }
-    catch {
+    catch (e) {
         return false;
     }
 }

package/lib/theme/Mermaid/index.js

@@ -22,6 +22,7 @@ function MermaidRenderResult({renderResult}) {
     <div
       ref={ref}
       className={`${MermaidContainerClassName} ${styles.container}`}
+      // eslint-disable-next-line react/no-danger
       dangerouslySetInnerHTML={{__html: renderResult.svg}}
     />
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-mermaid",
-  "version": "3.10.1-canary-6655",
+  "version": "3.10.2",
   "description": "Mermaid components for Docusaurus.",
   "main": "lib/index.js",
   "types": "src/theme-mermaid.d.ts",
@@ -27,24 +27,24 @@
   },
   "license": "MIT",
   "scripts": {
-    "build": "tsc --build && node ../../admin/scripts/copyUntypedFiles.js && oxfmt \"lib/theme/**/*.js\"",
+    "build": "tsc --build && node ../../admin/scripts/copyUntypedFiles.js && prettier --config ../../.prettierrc --write \"lib/theme/**/*.js\"",
     "watch": "run-p -c copy:watch build:watch",
     "build:watch": "tsc --build --watch",
     "copy:watch": "node ../../admin/scripts/copyUntypedFiles.js --watch"
   },
   "dependencies": {
-    "@docusaurus/core": "3.10.1-canary-6655",
-    "@docusaurus/module-type-aliases": "3.10.1-canary-6655",
-    "@docusaurus/theme-common": "3.10.1-canary-6655",
-    "@docusaurus/types": "3.10.1-canary-6655",
-    "@docusaurus/utils-validation": "3.10.1-canary-6655",
-    "mermaid": ">=11.14.0",
+    "@docusaurus/core": "3.10.2",
+    "@docusaurus/module-type-aliases": "3.10.2",
+    "@docusaurus/theme-common": "3.10.2",
+    "@docusaurus/types": "3.10.2",
+    "@docusaurus/utils-validation": "3.10.2",
+    "mermaid": ">=11.6.0",
     "tslib": "^2.6.0"
   },
   "peerDependencies": {
     "@mermaid-js/layout-elk": "^0.1.9",
-    "react": "^19.2.5",
-    "react-dom": "^19.2.5"
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "peerDependenciesMeta": {
     "@mermaid-js/layout-elk": {
@@ -52,7 +52,7 @@
     }
   },
   "engines": {
-    "node": ">=24.14"
+    "node": ">=20.0"
   },
-  "gitHead": "6e93a3055178dd0af922ba627f787229dcdf948b"
+  "gitHead": "f37f9035584917a97a260b91fc2842cba4f8b94f"
 }

package/src/client/index.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {useState, useEffect, useMemo, useId} from 'react';
+import {useState, useEffect, useMemo} from 'react';
 import {useColorMode, useThemeConfig} from '@docusaurus/theme-common';
 import {loadMermaid} from './loadMermaid';
 
@@ -32,9 +32,17 @@ export function useMermaidConfig(): MermaidConfig {
   );
 }
 
-// Random client-only id, we don't care much but mermaid want an id so...
 function useMermaidId(): string {
-  return useId();
+  /*
+  Random client-only id, we don't care much but mermaid want an id so...
+  Note: Mermaid doesn't like values provided by Rect.useId() and throws
+  */
+
+  // TODO Docusaurus v4: check if useId() now works
+  //  It could work thanks to https://github.com/facebook/react/pull/32001
+  // return useId(); // tried that, doesn't work ('#d:re:' is not a valid selector.)
+
+  return useState(`mermaid-svg-${Math.round(Math.random() * 10000000)}`)[0];
 }
 
 async function renderMermaid({

package/src/client/loadMermaid.ts

@@ -9,6 +9,7 @@ import type {Mermaid} from 'mermaid';
 
 declare global {
   // Global variable provided by bundler DefinePlugin
+  /* eslint-disable-next-line no-underscore-dangle */
   const __DOCUSAURUS_MERMAID_LAYOUT_ELK_ENABLED__: boolean;
 }
 

package/src/index.ts

@@ -16,7 +16,7 @@ async function isElkLayoutPackageAvailable() {
   try {
     await import('@mermaid-js/layout-elk');
     return true;
-  } catch {
+  } catch (e) {
     return false;
   }
 }

package/src/theme/Mermaid/index.tsx

@@ -33,6 +33,7 @@ function MermaidRenderResult({
     <div
       ref={ref}
       className={`${MermaidContainerClassName} ${styles.container}`}
+      // eslint-disable-next-line react/no-danger
       dangerouslySetInnerHTML={{__html: renderResult.svg}}
     />
   );