Files
backnotprop__plannotator/packages/ui/utils/mermaid-eager.ts
Michael Ramos 0b167cc478 perf(ui): lazy diagram and math renderers with eager entries for Plannotator (#1394)
Bundle-weight optimization of @plannotator/ui for multi-chunk hosts, requested by Workspaces: the Mermaid runtime and Graphviz engine load inside the render effect, the username dictionary sits behind a synchronous identity generator slot, and KaTeX sits behind a math renderer slot with a loader seam on configurePlannotatorUI. Plannotator's own apps import eager entries (math, identity, and Mermaid for the plan editor) so their behavior is unchanged: single-file builds within noise of main, math typeset on first paint, identities from the full dictionary, and the share portal keeps Mermaid in its entry chunk so its failure surface matches main. Built-HTML registration markers guard the eager imports. Hosts that omit the eager entries get the lazy paths, a one-shot automatic re-attempt, and a Retry affordance on the diagram error panel; the module-map limitation of in-page retries is documented.

AI-assisted (Claude) under maintainer direction.
2026-08-27 07:35:49 -07:00

29 lines
1.3 KiB
TypeScript

/**
* Eager Mermaid registration: imports the runtime statically, initializes it
* at module evaluation (exactly where the old module-scope
* `mermaid.initialize` ran) and fills the slot in `./mermaid`.
*
* `packages/editor/App.tsx` imports this module for its side effect, by
* policy: Plannotator's own surfaces keep Mermaid in their entry chunk so it
* can never fail separately from the app (on the share portal this is what
* keeps `mermaid.core` out of a lazy chunk). The review editor does not import
* it because it never renders a Mermaid block; adding the runtime there would
* grow that bundle. A host that wants the same import adds:
*
* import '@plannotator/ui/utils/mermaid-eager';
*
* A host that does not import it gets the lazy path in `./mermaid`.
*
* The source tag passed below doubles as a build marker: the literal only
* reaches a bundle when this module is evaluated in it, so a dropped or
* tree-shaken side-effect import is caught by the built-HTML check in
* tests/entry-assets.test.ts (the runtime itself stays inlined in a
* single-file build through the loader's import(), so a Mermaid diagram id
* cannot prove registration).
*/
import mermaid from 'mermaid';
import { MERMAID_CONFIG, setMermaidRuntime } from './mermaid';
mermaid.initialize(MERMAID_CONFIG);
setMermaidRuntime(mermaid, 'plannotator-mermaid-eager');