根因:mermaid bundle 是 IIFE 格式(与项目其他前端库一致),挂全局变量 而非 ES module export。但 mermaid.ts 错用了 import() 取 .default—— IIFE 无 export,mod.default 是 undefined,导致 mermaid.initialize 调用 TypeError,流程图永远不渲染(数学公式不受影响,因为是服务端渲染)。 修复: - mermaid.ts: loadMermaidBundle 改用动态注入 <script src=/mermaid/mermaid.js> 标签,加载后从 window.MermaidRenderer 取(与 codemirror/lightbox 的 Reflect::get(window,...) 模式一致) - mermaid-renderer/index.ts: 显式 globalThis.MermaidRenderer = mermaid, 避免 vite IIFE 把 export default 编译成 .default 多一层 - markdown.rs: mermaid 代码块跳过 syntect 高亮(无语法定义且会包 <span> 污染 textContent),直接输出转义纯源码 前端 28 测试 + Rust 557 测试 + 双 target 编译通过。
13 lines
630 B
TypeScript
13 lines
630 B
TypeScript
// 把 mermaid 包成 IIFE 全局 bundle。
|
||
//
|
||
// 关键:vite IIFE + `export default X` 会产出 `window.MermaidRenderer.default = X`
|
||
// (多一层 .default)。为避免 mermaid.ts 取值时纠结这一层,这里把 mermaid 对象
|
||
// 直接赋给 window.MermaidRenderer 作为构建时副作用,使 window.MermaidRenderer
|
||
// 本身即 mermaid API(initialize/render)。
|
||
import mermaid from 'mermaid';
|
||
|
||
// 构建时副作用:把 mermaid 挂到全局。ES module 的顶层赋值会被 vite 保留。
|
||
;(globalThis as unknown as { MermaidRenderer: typeof mermaid }).MermaidRenderer = mermaid;
|
||
|
||
export default mermaid;
|