Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2024-12-16 20:26:19 -05:00
Code Issues Activity

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

Browse source 
refactor(console): use local mermaid import
This commit is contained in:
Gao Sun 2024-07-25 09:26:44 +08:00 committed by GitHub
commit 0d290cd2ab
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 5 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/console/src/consts/env.ts
View file

@ -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;

30
packages/console/src/mdx-components/Mermaid/index.tsx
View file

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

4
packages/core/src/middleware/koa-security-headers.ts
View file

@ -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

2
vite.shared.config.ts
View file

@ -30,7 +30,7 @@ export const defaultConfig: UserConfig = {
include: ['@logto/phrases', '@logto/phrases-experience', '@logto/schemas'],
},
build: {
sourcemap: false,
sourcemap: true,
rollupOptions: {
output: { manualChunks },
},