Skip to content

fix(rspress-plugin-mermaid): fix render id handling - #36

Merged
SoonIter merged 5 commits into
rstackjs:mainfrom
hangtiancheng:fix/rspress-plugin-mermaid
Sep 7, 2026
Merged

fix(rspress-plugin-mermaid): fix render id handling#36
SoonIter merged 5 commits into
rstackjs:mainfrom
hangtiancheng:fix/rspress-plugin-mermaid

Conversation

@hangtiancheng

@hangtiancheng hangtiancheng commented Sep 5, 2026

Copy link
Copy Markdown
Contributor

Summary

  • Serialize mermaid renders through a module-level queue because mermaid v10 render() is not reentrant: concurrent renders share temporary DOM elements keyed by the render id and corrupt each other's output
  • Sanitize the React useId() value before using it as the mermaid render id; only : was stripped previously, while other React versions emit characters that must not leak into SVG ids and url(#...) marker references (e.g. «» in React 19.0-19.1)
  • Skip redundant re-renders unless the diagram source or light/dark theme changed, and reset the cached state on render errors so retries work
  • Resolve the component path from import.meta.dirname instead of __dirname so the plugin works in ESM
  • Inline MermaidRendererProps in the component to keep the published component self-contained, and add rspress-plugin-mermaid as a devDependency for type checking
  • Add docs coverage and Playwright e2e cases for concurrent rendering, dark-mode toggling, and invalid-diagram fallback

Test plan

  • pnpm test passes
  • pnpm exec rstest run --config rstest.e2e.config.ts packages/rspress-plugin-mermaid/index.spec.ts: 5 tests pass (SVG rendering, labels, concurrent diagrams, dark mode toggle, invalid diagram fallback)

hangtiancheng and others added 4 commits September 5, 2026 13:57
Co-Authored-By: Swifty <usr161043261@outlook.com>
mermaid v10 serializes render() calls through its internal execution
queue, so the module-level queue in the plugin is unnecessary.

Co-Authored-By: Swifty <usr161043261@outlook.com>
@hangtiancheng hangtiancheng changed the title fix(rspress-plugin-mermaid): fix concurrent rendering and render id handling fix(rspress-plugin-mermaid): fix render id handling Sep 5, 2026
Co-Authored-By: Swifty <usr161043261@outlook.com>
@hangtiancheng

Copy link
Copy Markdown
Contributor Author

The latest commit 19830f4 fixes the rs fmt --check failure.

The wrapped import in packages/rspress-plugin-mermaid/src/index.ts has been collapsed back to a single line.

@SoonIter SoonIter left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks ♥️

@SoonIter
SoonIter merged commit f8454d4 into rstackjs:main Sep 7, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants