Skip to content

Commit

Permalink
Turbolinks: clean up injected scripts and styles on page navigation (#…
Browse files Browse the repository at this point in the history
…3283)

* client hydration scripts should be removed before navigation

* chore: adding a changeset

* also cleanup injected styles on page navigation
  • Loading branch information
Tony Sullivan authored May 3, 2022
1 parent 204ff2c commit 9ad8aef
Show file tree
Hide file tree
Showing 2 changed files with 21 additions and 0 deletions.
5 changes: 5 additions & 0 deletions .changeset/tall-forks-cross.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@astrojs/turbolinks': patch
---

Fixes an issue that prevented client components from rehydrating when navigating back to a page
16 changes: 16 additions & 0 deletions packages/integrations/turbolinks/client.js
Original file line number Diff line number Diff line change
@@ -1,2 +1,18 @@
import Turbolinks from 'turbolinks';
export { Turbolinks };

// Before every page navigation, remove any previously added component hydration scripts
document.addEventListener('turbolinks:before-render', function () {
const scripts = document.querySelectorAll('script[data-astro-component-hydration]');
for (const script of scripts) {
script.remove();
}
});

// After every page navigation, move the bundled styles into the body
document.addEventListener('turbolinks:render', function () {
const styles = document.querySelectorAll('link[href^="/assets/asset"][href$=".css"]');
for (const style of styles) {
document.body.append(style);
}
});

0 comments on commit 9ad8aef

Please sign in to comment.