michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Turbolinks: clean up injected scripts and styles on page navigation (#3283)

Browse source 
* client hydration scripts should be removed before navigation

* chore: adding a changeset

* also cleanup injected styles on page navigation
This commit is contained in:
Tony Sullivan 2022-05-03 22:30:46 +00:00 committed by GitHub
parent 204ff2c223
commit 9ad8aefdd7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/tall-forks-cross.md Normal file
View file

@ -0,0 +1,5 @@
---
'@astrojs/turbolinks': patch
---
Fixes an issue that prevented client components from rehydrating when navigating back to a page

16
packages/integrations/turbolinks/client.js
View file

@ -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);
}
});