Executing Astro component scripts

[kooalab]

Describe your problem 🧐

I'm integrating Astro with swup.js in my project, where each component contains script tags.

The issue arises during page transitions; the JavaScript within these components does not execute.

To address this, I implemented swup.js's Head Plugin, anticipating it would reload necessary JavaScript, as in Astro, JavaScript is typically loaded from the head. Despite this, the expected functionality isn't achieved.

I've created a demo on StackBlitz to illustrate the problem.

What is your question? 🙋‍♀️

How can I ensure that JavaScript within each component executes correctly during page transitions in an Astro project integrated with swup.js, especially when using the Head Plugin?

Despite implementing this plugin, which I thought would reload the necessary JavaScript from the head section during page transitions, the scripts in the components are not executing.

Is there a specific configuration or approach I should use to enable seamless JavaScript execution across page transitions in this setup?

Thanks in advance for your help 🙏🏼 Really appreciated...

URL to minimal reproduction 🔗

https://stackblitz.com/edit/withastro-astro-3jsbn4?file=src%2Fpages%2Findex.astro

Checked all these? 📚

• I have read and searched the official docs
• I have checked discussions and existing issues for answers to my question
• I agree to follow this project's Code of Conduct
• I have provided all necessary information to the best of my knowledge

[daun]

To insert new scripts and run them as well, you can combine Head Plugin and Scripts Plugin. That's how the official Astro integration does it, and it's working great. Quoting the docs on Common Issues:

Use the Head Plugin to insert new scripts into the head
Use the Scripts Plugin to run existing and new scripts in head or body

[daun]

Since you're mentioning neatness — you can avoid all that mess by using a component framework that self-initializes, like Alpine.js, Stimulus, or Gia. See Using component frameworks in the docs. It's really the simplest and cleanest approach to managing dynamically loaded components.

[kooalab]

Yes this is a mess... I should definitely look into alpine.js or qwick to make this the proper way.

Just to be sure, if I have this
if (window.mySwup) { window.mySwup.hooks.on("page:view", init); } else { document.addEventListener("swup:enable", () => { window.mySwup.hooks.on("page:view", init); }); }
For every component that has JS that needs to be reexecuted on each page visit, I won't run in performance issues?

[daun]

Depends on what you're doing inside init, but the event boilerplate shouldn't be a performance bottleneck.

[kooalab]

I just realized that what I had in mind can't actually work... My goal was to not have the JS in one big file but rather splitting it in every component where it is needed.

But doing it like that, if the user starts on the index.astro page, its going to load some JS that is needed for that page, but then, if I go let's say to the about page that has his own components with their own JS, swup will replace the main container but the JS of this new components that weren't present in the inital JS file that have this :
if (window.mySwup) { window.mySwup.hooks.on("page:view", init); } else { document.addEventListener("swup:enable", () => { window.mySwup.hooks.on("page:view", init); }); }
will actually never get executed because the code will never run?

[kooalab]

Oh that's where the Scripts plugin comes in. Got it, thank you 😅