mermaid 无官方 SSR 支持,采用客户端 IntersectionObserver 懒加载:服务端
markdown.rs 只产出普通 <pre><code class="language-mermaid"> 代码块,
前端在块进视口时动态 import 独立 bundle(~1MB)渲染成 SVG。
新增 libs/mermaid-renderer/:mermaid 11.16 IIFE bundle,输出 public/mermaid/
yggdrasil-core/mermaid.ts:扫描 language-mermaid 块,视口可见时动态 import
/mermaid/mermaid.js(单例缓存),mermaid.initialize 适配 light/dark 主题,
securityLevel=strict;渲染失败加 .mermaid-error class 保留源码;幂等守卫
post-content.ts:initCopyButtons 跳过 language-mermaid 块(图无需 copy)
post_content.rs:use_effect 调 __initMermaid('.post-content', theme),
读 use_resolved_theme() 传主题并建立订阅
新增 6 个 mermaid 单测(扫描/主题/幂等/非mermaid/未命中/错误回退)。
550 Rust + 28 前端测试全过,双 target 编译通过。
28 lines
877 B
TypeScript
28 lines
877 B
TypeScript
import { resolve } from 'node:path';
|
||
import { defineConfig } from 'vite';
|
||
|
||
// mermaid 独立 IIFE bundle:~1MB,不打进 yggdrasil-core(避免拖累每篇文章首屏)。
|
||
// 由 yggdrasil-core 的 mermaid.ts 在 IntersectionObserver 视口可见时动态 import。
|
||
// 输出到 public/mermaid/mermaid.js,dx build 会作为静态资源拷贝。
|
||
export default defineConfig({
|
||
build: {
|
||
outDir: resolve(__dirname, '../../public/mermaid'),
|
||
emptyOutDir: true,
|
||
lib: {
|
||
entry: resolve(__dirname, 'src/index.ts'),
|
||
name: 'MermaidRenderer',
|
||
fileName: () => 'mermaid.js',
|
||
formats: ['iife'],
|
||
},
|
||
// mermaid 全量打进单文件(含其依赖 cytoscape/dagre-d3 等)。
|
||
rolldownOptions: {
|
||
output: {
|
||
inlineDynamicImports: true,
|
||
},
|
||
},
|
||
cssCodeSplit: false,
|
||
minify: true,
|
||
sourcemap: true,
|
||
},
|
||
});
|