Merge pull request #6323 from logto-io/gao-use-mermaid-import

refactor(console): use local mermaid import

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;

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],

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

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 },
     },