@docusaurus/theme-mermaid 3.9.1 → 3.9.2

package/lib/client/index.js

@@ -6,8 +6,7 @@
  */
 import { useState, useEffect, useMemo } from 'react';
 import { useColorMode, useThemeConfig } from '@docusaurus/theme-common';
-import mermaid from 'mermaid';
-import { ensureLayoutsRegistered } from './layouts';
+import { loadMermaid } from './loadMermaid';
 // Stable className to allow users to easily target with CSS
 export const MermaidContainerClassName = 'docusaurus-mermaid-container';
 export function useMermaidThemeConfig() {
@@ -31,7 +30,7 @@ function useMermaidId() {
     return useState(`mermaid-svg-${Math.round(Math.random() * 10000000)}`)[0];
 }
 async function renderMermaid({ id, text, config, }) {
-    await ensureLayoutsRegistered();
+    const mermaid = await loadMermaid();
     /*
     Mermaid API is really weird :s
     It is a big mutable singleton with multiple config levels

package/lib/client/{layouts.d.ts → loadMermaid.d.ts}

@@ -4,7 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+import type { Mermaid } from 'mermaid';
 declare global {
     const __DOCUSAURUS_MERMAID_LAYOUT_ELK_ENABLED__: boolean;
 }
-export declare function ensureLayoutsRegistered(): Promise<void>;
+export declare function loadMermaid(): Promise<Mermaid>;

package/lib/client/{layouts.js → loadMermaid.js}

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import mermaid from 'mermaid';
-async function registerOptionalElkLayout() {
+async function loadMermaidAndRegisterLayouts() {
+    const mermaid = (await import('mermaid')).default;
     // Mermaid does not support ELK layouts by default
     // See https://github.com/mermaid-js/mermaid/tree/develop/packages/mermaid-layout-elk
     // ELK layouts are heavy, so we made it an optional peer dependency
@@ -14,12 +14,16 @@ async function registerOptionalElkLayout() {
         const elkLayout = (await import('@mermaid-js/layout-elk')).default;
         mermaid.registerLayoutLoaders(elkLayout);
     }
+    return mermaid;
 }
 // Ensure we only try to register layouts once
-let layoutsRegistered = false;
-export async function ensureLayoutsRegistered() {
-    if (!layoutsRegistered) {
-        await registerOptionalElkLayout();
-        layoutsRegistered = true;
+let MermaidPromise = null;
+// We load Mermaid with a dynamic import to code split / lazy load the library
+// It is only called inside a useEffect, so loading can be deferred
+// We memoize so that we don't load and register layouts multiple times
+export async function loadMermaid() {
+    if (!MermaidPromise) {
+        MermaidPromise = loadMermaidAndRegisterLayouts();
     }
+    return MermaidPromise;
 }

package/lib/index.js

@@ -46,6 +46,17 @@ async function themeMermaid() {
                         !isServer && elkLayoutEnabled),
                     }),
                 ],
+                // Workaround for weird Rspack/SWC issue
+                // See https://github.com/facebook/docusaurus/issues/11430
+                resolve: {
+                    alias: {
+                        ...(elkLayoutEnabled
+                            ? {}
+                            : {
+                                '@mermaid-js/layout-elk': false,
+                            }),
+                    },
+                },
             };
         },
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-mermaid",
-  "version": "3.9.1",
+  "version": "3.9.2",
   "description": "Mermaid components for Docusaurus.",
   "main": "lib/index.js",
   "types": "src/theme-mermaid.d.ts",
@@ -33,11 +33,11 @@
     "copy:watch": "node ../../admin/scripts/copyUntypedFiles.js --watch"
   },
   "dependencies": {
-    "@docusaurus/core": "3.9.1",
-    "@docusaurus/module-type-aliases": "3.9.1",
-    "@docusaurus/theme-common": "3.9.1",
-    "@docusaurus/types": "3.9.1",
-    "@docusaurus/utils-validation": "3.9.1",
+    "@docusaurus/core": "3.9.2",
+    "@docusaurus/module-type-aliases": "3.9.2",
+    "@docusaurus/theme-common": "3.9.2",
+    "@docusaurus/types": "3.9.2",
+    "@docusaurus/utils-validation": "3.9.2",
     "mermaid": ">=11.6.0",
     "tslib": "^2.6.0"
   },
@@ -57,5 +57,5 @@
   "engines": {
     "node": ">=20.0"
   },
-  "gitHead": "c0dd59f0e712f85b6053c59e46b0514b5d2d1414"
+  "gitHead": "abfbe5621b08407bc3dcbe6111ff118d4c22f7a1"
 }

package/src/client/index.ts

@@ -7,8 +7,7 @@
 
 import {useState, useEffect, useMemo} from 'react';
 import {useColorMode, useThemeConfig} from '@docusaurus/theme-common';
-import mermaid from 'mermaid';
-import {ensureLayoutsRegistered} from './layouts';
+import {loadMermaid} from './loadMermaid';
 
 import type {RenderResult, MermaidConfig} from 'mermaid';
 import type {ThemeConfig} from '@docusaurus/theme-mermaid';
@@ -55,7 +54,7 @@ async function renderMermaid({
   text: string;
   config: MermaidConfig;
 }): Promise<RenderResult> {
-  await ensureLayoutsRegistered();
+  const mermaid = await loadMermaid();
 
   /*
   Mermaid API is really weird :s

package/src/client/{layouts.ts → loadMermaid.ts}

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import mermaid from 'mermaid';
+import type {Mermaid} from 'mermaid';
 
 declare global {
   // Global variable provided by bundler DefinePlugin
@@ -13,7 +13,9 @@ declare global {
   const __DOCUSAURUS_MERMAID_LAYOUT_ELK_ENABLED__: boolean;
 }
 
-async function registerOptionalElkLayout() {
+async function loadMermaidAndRegisterLayouts(): Promise<Mermaid> {
+  const mermaid = (await import('mermaid')).default;
+
   // Mermaid does not support ELK layouts by default
   // See https://github.com/mermaid-js/mermaid/tree/develop/packages/mermaid-layout-elk
   // ELK layouts are heavy, so we made it an optional peer dependency
@@ -22,13 +24,19 @@ async function registerOptionalElkLayout() {
     const elkLayout = (await import('@mermaid-js/layout-elk')).default;
     mermaid.registerLayoutLoaders(elkLayout);
   }
+
+  return mermaid;
 }
 
 // Ensure we only try to register layouts once
-let layoutsRegistered = false;
-export async function ensureLayoutsRegistered(): Promise<void> {
-  if (!layoutsRegistered) {
-    await registerOptionalElkLayout();
-    layoutsRegistered = true;
+let MermaidPromise: Promise<Mermaid> | null = null;
+
+// We load Mermaid with a dynamic import to code split / lazy load the library
+// It is only called inside a useEffect, so loading can be deferred
+// We memoize so that we don't load and register layouts multiple times
+export async function loadMermaid(): Promise<Mermaid> {
+  if (!MermaidPromise) {
+    MermaidPromise = loadMermaidAndRegisterLayouts();
   }
+  return MermaidPromise;
 }

package/src/index.ts

@@ -49,6 +49,18 @@ export default async function themeMermaid(): Promise<Plugin<void>> {
             ),
           }),
         ],
+
+        // Workaround for weird Rspack/SWC issue
+        // See https://github.com/facebook/docusaurus/issues/11430
+        resolve: {
+          alias: {
+            ...(elkLayoutEnabled
+              ? {}
+              : {
+                  '@mermaid-js/layout-elk': false,
+                }),
+          },
+        },
       };
     },
   };