script inline not executing when loaded from a ViewTransitions

[quaint horizon]

I have this very simple astro page which works fine when i don't use view transitions or when the page is loaded directly...

`---
import Layout from "../layouts/layout.astro";

<Layout>
<h1 slot="title">Example</h1>

<div id="container"></div>
</Layout>

<script is:inline src="https://www.some-url.com/script-file.js"></script>`

However, when I use ViewTransitions as specified by https://docs.astro.build/en/guides/view-transitions/#adding-view-transitions-to-a-page, i find that the "script" is not executed when the page loads up.

Am I doing something wrong or is this a bug in the implementation that I should raise a github issue for?

[quaint horizon]

unfortunately i don't have control over the script file that is being injected in. I could possibly dynamically inject it in via the astro:load event fire, but i feel this is counter to what the functionalaity was meant to be.

[harsh mist]

I think you can do something like this instead:

<script is:inline>
const loadScript = async () => {
  await import("https://www.some-url.com/script-file.js")
}

loadScript()
document.addEventListener("astro:after-swap", loadScript)
</script>

Tell me how it goes, may be wrong

[quaint horizon]

thanks Florian. I also went and dug into the code that is being injected in and noticed that the code is tieing into the window.onload which additionally cause a problem because they won't get executed. I imagine that this cannot be addressed from Astro side... if it can great, but as i imagine it cannot be, i've decided to not have the view transition for those pages but i think it would be something to consider for astro that it isn't as straight forward to do view transitions and that there are gaps in the current implementation.

[harsh mist]

I definitely agree with you. VT currently requires a bit more work from users, especially with 3rd party scripts. Maybe @mossy frigate can help you out

[lucid bobcat]

Do you know if there is a way to apply astro:after-swap to a transition/animation provided by a UI (ie svelte/transitions )?

[harsh mist]

I have no idea 🤷‍♂️