Skip to content

fix: Register astro:after-swap listener unconditionally to support view transitions from non-mermaid pages#22

Merged
joesaby merged 1 commit intojoesaby:mainfrom
nakamuraos:fix/view-transition
Jan 18, 2026
Merged

fix: Register astro:after-swap listener unconditionally to support view transitions from non-mermaid pages#22
joesaby merged 1 commit intojoesaby:mainfrom
nakamuraos:fix/view-transition

Conversation

@nakamuraos
Copy link
Copy Markdown
Contributor

@nakamuraos nakamuraos commented Nov 27, 2025

This PR attempt resolve #11

Problem

The astro:after-swap event listener was only registered when the initial landing page contained mermaid diagrams. This caused mermaid diagrams to fail rendering when:

  1. User lands on a page without mermaid diagrams
  2. User navigates to a page with mermaid diagrams via Astro View Transitions

The event listener was never registered in scenario 1, so diagrams on subsequent pages would not render.

Solution

  • Moved the astro:after-swap event listener registration outside the conditional block
  • Refactored mermaid loading into a shared loadMermaid() function with caching to prevent duplicate imports
  • Event listener is now registered on every page, regardless of initial mermaid diagram presence

Changes

  • Extracted mermaid import logic into reusable loadMermaid() function
  • Registered astro:after-swap listener unconditionally at module scope
  • Added promise caching to ensure mermaid is only loaded once per session
  • Improved console logging for better debugging of view transitions

Refactor mermaid.js loading and initialization logic to improve performance and maintainability. Added support for dynamic theme switching and diagram rendering on view transitions.
@netlify
Copy link
Copy Markdown

netlify Bot commented Nov 27, 2025

Deploy Preview for astro-mermaid-demo canceled.

Name Link
🔨 Latest commit 0b422c7
🔍 Latest deploy log https://app.netlify.com/projects/astro-mermaid-demo/deploys/6927e50bd516e70008275d85

@netlify
Copy link
Copy Markdown

netlify Bot commented Nov 27, 2025

Deploy Preview for starlight-mermaid-demo canceled.

Name Link
🔨 Latest commit 0b422c7
🔍 Latest deploy log https://app.netlify.com/projects/starlight-mermaid-demo/deploys/6927e50bb68ad800085ac9ee

@rlopzc rlopzc mentioned this pull request Jan 17, 2026
@joesaby joesaby merged commit f22f28e into joesaby:main Jan 18, 2026
8 checks passed
joesaby added a commit that referenced this pull request Jan 18, 2026
This release includes:
- Fix for view transitions when landing on non-mermaid pages (#22)
- Improved mermaid loading with caching to prevent duplicate imports
- Unconditional registration of astro:after-swap event listener

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
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.

View Transitions issue

2 participants