From 7e7b4ee5898419746ed127b6ef01e96029eea8d6 Mon Sep 17 00:00:00 2001 From: Tony Sullivan Date: Tue, 3 May 2022 16:50:13 -0500 Subject: [PATCH 1/3] client hydration scripts should be removed before navigation --- packages/integrations/turbolinks/client.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/integrations/turbolinks/client.js b/packages/integrations/turbolinks/client.js index 6dde8c193969..6e4a413bf07d 100644 --- a/packages/integrations/turbolinks/client.js +++ b/packages/integrations/turbolinks/client.js @@ -1,2 +1,10 @@ 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(); + } +}) From eb65a88bf43cbc916f1b4fca012b81d4351d3930 Mon Sep 17 00:00:00 2001 From: Tony Sullivan Date: Tue, 3 May 2022 16:51:44 -0500 Subject: [PATCH 2/3] chore: adding a changeset --- .changeset/tall-forks-cross.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/tall-forks-cross.md diff --git a/.changeset/tall-forks-cross.md b/.changeset/tall-forks-cross.md new file mode 100644 index 000000000000..3c8187f387f5 --- /dev/null +++ b/.changeset/tall-forks-cross.md @@ -0,0 +1,5 @@ +--- +'@astrojs/turbolinks': patch +--- + +Fixes an issue that prevented client components from rehydrating when navigating back to a page From d56eb4e5f06a3f8d5059f735e47008a17b590f2a Mon Sep 17 00:00:00 2001 From: Tony Sullivan Date: Tue, 3 May 2022 17:18:17 -0500 Subject: [PATCH 3/3] also cleanup injected styles on page navigation --- packages/integrations/turbolinks/client.js | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/packages/integrations/turbolinks/client.js b/packages/integrations/turbolinks/client.js index 6e4a413bf07d..2305f3cf48bf 100644 --- a/packages/integrations/turbolinks/client.js +++ b/packages/integrations/turbolinks/client.js @@ -2,9 +2,17 @@ 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(); - } -}) +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); + } +});