-
-
Notifications
You must be signed in to change notification settings - Fork 2.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Turbolinks: clean up injected scripts and styles on page navigation (#…
…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
Showing
2 changed files
with
21 additions
and
0 deletions.
There are no files selected for viewing
This file contains 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
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 |
This file contains 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
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); | ||
} | ||
}); |