@docusaurus/theme-mermaid 3.7.0 → 3.8.0

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, useRef } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { useColorMode, useThemeConfig } from '@docusaurus/theme-common';
 import mermaid from 'mermaid';
 // Stable className to allow users to easily target with CSS
@@ -24,8 +24,10 @@ function useMermaidId() {
     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 2025-2026: 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 useRef(`mermaid-svg-${Math.round(Math.random() * 10000000)}`).current;
+    return useState(`mermaid-svg-${Math.round(Math.random() * 10000000)}`)[0];
 }
 async function renderMermaid({ id, text, config, }) {
     /*

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-mermaid",
-  "version": "3.7.0",
+  "version": "3.8.0",
   "description": "Mermaid components for Docusaurus.",
   "main": "lib/index.js",
   "types": "src/theme-mermaid.d.ts",
@@ -33,12 +33,12 @@
     "copy:watch": "node ../../admin/scripts/copyUntypedFiles.js --watch"
   },
   "dependencies": {
-    "@docusaurus/core": "3.7.0",
-    "@docusaurus/module-type-aliases": "3.7.0",
-    "@docusaurus/theme-common": "3.7.0",
-    "@docusaurus/types": "3.7.0",
-    "@docusaurus/utils-validation": "3.7.0",
-    "mermaid": ">=10.4",
+    "@docusaurus/core": "3.8.0",
+    "@docusaurus/module-type-aliases": "3.8.0",
+    "@docusaurus/theme-common": "3.8.0",
+    "@docusaurus/types": "3.8.0",
+    "@docusaurus/utils-validation": "3.8.0",
+    "mermaid": ">=11.6.0",
     "tslib": "^2.6.0"
   },
   "devDependencies": {
@@ -51,5 +51,5 @@
   "engines": {
     "node": ">=18.0"
   },
-  "gitHead": "dd59750c16fe6908a26f18806a54d4c3dbe6db43"
+  "gitHead": "948d63c42fad0ba24b7b531a9deb6167e64dc845"
 }

package/src/client/index.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {useState, useEffect, useMemo, useRef} from 'react';
+import {useState, useEffect, useMemo} from 'react';
 import {useColorMode, useThemeConfig} from '@docusaurus/theme-common';
 import mermaid from 'mermaid';
 import type {RenderResult, MermaidConfig} from 'mermaid';
@@ -36,8 +36,12 @@ function useMermaidId(): string {
   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 2025-2026: 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 useRef(`mermaid-svg-${Math.round(Math.random() * 10000000)}`).current!;
+
+  return useState(`mermaid-svg-${Math.round(Math.random() * 10000000)}`)[0];
 }
 
 async function renderMermaid({