Re-initialize component after page transition

[WingsOfFury]

Hello everyone. After I updated all the dependencies of Astro and Swup, the toggle switch started having problems. After every refresh I can use the page but as soon as I change pages it stops working. Maybe someone here can help me? If I delete the ID="swup" in main then the toggle switch works again but the fade transition doesn't work smoothly. Rather choppy.Regards.

toggle_fail.mov

[daun]

Which version did you upgrade from, and which version did you upgrade to? If upgrading from swup 3 to 4, the official upgrade guide might give a clue here, in case it has to do with updated hook names.

In any case, it'd be helpful if you could post your whole JS code here, including the part that manages the dark mode toggle.

Any console errors?

[WingsOfFury]

Hello Phillip. Thanks for the quick reply. I updated from 3 to 4. After the plugins had been on strike for a bit, I completely deleted Swup with the plugins (npm uninstall) and installed the plugins with (npm install swup @swup/scroll-plugin and so on). Thanks for the tip about the hooks. I was so busy with Astro that I missed the hooks. I added the hooks but unfortunately something is wrong. When it comes to plugins, “SwupScrollPlugin” is strangely colored blue instead of yellow. I placed the swup.hook.before directly above the //Swup Page Transition but unfortunately this didn't work either. Sure, no problem with the pictures. Regards.

[daun]

To re-run your init code on page change, the hook on line 122 shouldn't be empty but hold a reference to init:

swup.hooks.on('content:replace', () => init());

[WingsOfFury]

Unfortunately without an effect.

[WingsOfFury]

This is currently in the console.

[daun]

You're creating swup on line 6 and then again on line 112. This will be the issue here.

[WingsOfFury]

Yes, that's totally strange. If I delete var swup the double declaration in the console is gone but unfortunately toggleSwitch still doesn't work.

[daun]

It will still lead to problems as you're creating two Swup instances, which is unsupported/undefined behavior. You need to make sure you're only ever running new Swup() once in your whole JS, i.e. remove the one on line 6.

[WingsOfFury]

Understood. is deleted. Now this error message appears.

[daun]

Sure, that's to be expected. You're accessing swup.hooks.before, and there is no variable named swup. I don't know why you need to create an empty hook handler on that line, removing it should solve this. If you need the swup instance variable earlier, you probably need to move the setup code higher up.

[WingsOfFury]

Here is a picture of the Astro.config.mjs.

[daun]

You'll only ever need to do one or the other: manual setup or astro integration. Using both will create two separate swup instances, leading to problems.

[WingsOfFury]

It's worked out. I thought I also have to swup.hooks.before("content:replace", () => {} ); maintain it so that it takes effect. Oh man. Difficult birth. With Init at swup.hooks.on is also correct because if I leave out init the dark mode doesn't work. I thank you from the bottom of my heart for your help and your patience, my good friend. Now I can go to sleep with peace of mind. I wish you a good night too.

Bildschirmaufnahme.2023-11-13.um.00.46.34.mov

[daun]

Glad you could solve it!