Repository navigation
fix(website): re-init scripts after ClientRouter navigation - #40
Merged
Merged
Conversation
Hotfix for the regressions that PR #39 introduced in production. Root cause: bundled module scripts (background.ts, theme-switcher.ts, navbar.ts, projects.ts, page-navigation-loader.ts) only execute once in the page lifetime. With ClientRouter, the body is swapped on every navigation but the modules do not re-run, so: - The hardcoded <html class="dark"> in the new SSR HTML re-applied on each swap overrode the user light theme (the inline head script was deduplicated by Astro and did not re-run). - The teardown in astro:before-swap disposed the WebGL renderer but no equivalent re-init happened on the new page, so the starfield never came back after navigating away. - All click/keyup listeners attached to swapped DOM nodes were lost, including the theme switcher and the projects filter buttons. Fix: - Add data-astro-rerun to the inline theme script in <head> so it re-applies localStorage on each swap. - theme-switcher.ts: re-bind handlers and sync icons on astro:page-load. Module-level onPageLoad reference prevents duplicate listeners. - background.ts: re-init on astro:page-load. Cache shader text so ClientRouter navigations do not re-fetch them. Track darkBackground in state for the syncLoop check. - navbar.ts, projects.ts: idempotent attach via dataset marker and astro:page-load re-bind. - page-navigation-loader.ts: query the loader element fresh inside each handler (the body is swapped and the captured reference becomes stale). Tests: add 4 e2e specs in website-perf.spec.ts that exactly reproduce the user-reported regressions (light/dark theme persistence across SPA, canvas re-creation after nav roundtrip, theme switcher interactive after nav). Plus a new theme-switcher unit test for the astro:page-load re-bind. Verification: site:test 22/22 + coverage >=80%, site:typecheck 0 errors, site:lint clean, site-e2e:e2e 35/35 (chromium).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Hotfix for the regressions that PR #39 introduced in production.
Root cause: bundled module scripts (background.ts, theme-switcher.ts, navbar.ts, projects.ts, page-navigation-loader.ts) only execute once in the page lifetime. With ClientRouter, the body is swapped on every navigation but the modules do not re-run, so:
Fix:
Tests: add 4 e2e specs in website-perf.spec.ts that exactly reproduce the user-reported regressions (light/dark theme persistence across SPA, canvas re-creation after nav roundtrip, theme switcher interactive after nav). Plus a new theme-switcher unit test for the astro:page-load re-bind.
Verification: site:test 22/22 + coverage >=80%, site:typecheck 0 errors, site:lint clean, site-e2e:e2e 35/35 (chromium).