From aeec3b11412a23d888c8ba0be8a08b69fe297cc4 Mon Sep 17 00:00:00 2001
From: Gao Sun <gao@silverhand.io>
Date: Wed, 24 Jul 2024 13:55:41 +0800
Subject: [PATCH] refactor(console): use local mermaid import

---
 packages/console/src/consts/env.ts            |  2 +-
 .../src/mdx-components/Mermaid/index.tsx      | 30 ++-----------------
 .../src/middleware/koa-security-headers.ts    |  4 +--
 vite.shared.config.ts                         |  2 +-
 4 files changed, 5 insertions(+), 33 deletions(-)

diff --git a/packages/console/src/consts/env.ts b/packages/console/src/consts/env.ts
index f8239c099..77a15384b 100644
--- a/packages/console/src/consts/env.ts
+++ b/packages/console/src/consts/env.ts
@@ -2,7 +2,7 @@ import { yes } from '@silverhand/essentials';
 
 import { storageKeys } from './storage';
 
-export const normalizeEnv = (value: unknown) =>
+const normalizeEnv = (value: unknown) =>
   value === null || value === undefined ? undefined : String(value);
 
 const isProduction = import.meta.env.PROD;
diff --git a/packages/console/src/mdx-components/Mermaid/index.tsx b/packages/console/src/mdx-components/Mermaid/index.tsx
index 011e0fad6..664d6f5ba 100644
--- a/packages/console/src/mdx-components/Mermaid/index.tsx
+++ b/packages/console/src/mdx-components/Mermaid/index.tsx
@@ -1,35 +1,8 @@
 import { Theme } from '@logto/schemas';
-import { noop, yes } from '@silverhand/essentials';
-import { type Mermaid as MermaidType } from 'mermaid';
 import { useEffect } from 'react';
 
-import { normalizeEnv } from '@/consts/env';
 import useTheme from '@/hooks/use-theme';
 
-/**
- * Load Mermaid asynchronously from jsDelivr to avoid Parcel bundling issues. Parcel does not
- * bundle Mermaid correctly for production builds, so we need to load it dynamically from a CDN.
- */
-const loadMermaid = async () => {
-  // Define this variable to "outsmart" the detection of the dynamic import by Parcel:
-  // https://github.com/parcel-bundler/parcel/issues/7064#issuecomment-942441649
-  const uri = 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-  const imported: { default: MermaidType } = await (import.meta.env.DEV
-    ? // eslint-disable-next-line no-eval -- https://github.com/parcel-bundler/parcel/issues/8316
-      eval(`import('${uri}')`)
-    : import(uri));
-  return imported.default;
-};
-
-const mermaidPromise = yes(normalizeEnv(import.meta.env.INTEGRATION_TEST))
-  ? // Mock Mermaid in integration tests to avoid issues with network requests and testing environment.
-    Promise.resolve({
-      initialize: noop,
-      run: noop,
-    })
-  : loadMermaid();
-
 type Props = {
   readonly children: string;
 };
@@ -44,7 +17,8 @@ export default function Mermaid({ children }: Props) {
 
   useEffect(() => {
     (async () => {
-      const mermaid = await mermaidPromise;
+      const { default: mermaid } = await import('mermaid');
+
       mermaid.initialize({
         startOnLoad: false,
         theme: themeToMermaidTheme[theme],
diff --git a/packages/core/src/middleware/koa-security-headers.ts b/packages/core/src/middleware/koa-security-headers.ts
index a981598fc..5e3203739 100644
--- a/packages/core/src/middleware/koa-security-headers.ts
+++ b/packages/core/src/middleware/koa-security-headers.ts
@@ -45,10 +45,8 @@ export default function koaSecurityHeaders<StateT, ContextT, ResponseBodyT>(
 
   // We have the following use cases:
   //
-  // 1. We use `react-monaco-editor` for code editing in the admin console. It loads the monaco
+  // - We use `react-monaco-editor` for code editing in the admin console. It loads the monaco
   // editor asynchronously from jsDelivr.
-  // 2. We use `mermaid` for rendering diagrams in the admin console. It loads the mermaid library
-  // asynchronously from jsDelivr since Parcel has issues with loading it directly in production.
   //
   // Allow the CDN src in the CSP.
   // Allow blob: for monaco editor to load worker scripts
diff --git a/vite.shared.config.ts b/vite.shared.config.ts
index 44cee6999..b48c54abc 100644
--- a/vite.shared.config.ts
+++ b/vite.shared.config.ts
@@ -30,7 +30,7 @@ export const defaultConfig: UserConfig = {
     include: ['@logto/phrases', '@logto/phrases-experience', '@logto/schemas'],
   },
   build: {
-    sourcemap: false,
+    sourcemap: true,
     rollupOptions: {
       output: { manualChunks },
     },