#View transitions, `astro:` events & discrepancies across browsers

3 messages · Page 1 of 1 (latest)

fallen moat
#

I'm struggling to make view transitions work reliably. I have a custom .astro component with a (bundled) script, as follows:

---
---

<div>hello</div>
<script>
  const listener = () => console.log("listener kicking in");

  declare global {
    interface Window {
      i_was_here?: true;
    }
  }

  if (window.i_was_here) {
    console.log("history repeating");
  } else {
    console.log("first time here");
    window.i_was_here = true;
    document.addEventListener("astro:page-load", listener);
    listener();
  }
</script>

depending on the browser (and depending on whether I'm using the dev server or astro preview), I see different behavior. In general, I see that the <script> is rerun, which seems to be inconsistent with the docs ("history repeating" is printed when re-visiting a page with the component, even though bundled scripts are supposed to run only once). Moreover, on Safari, the script is executed after the astro:page-load event has already fired, meaning I need to call listener() explicitly.

I've just upgraded to the latest astro versions:

├── @astrojs/[email protected]
├── @astrojs/[email protected]
├── @astrojs/[email protected]
├── @astrojs/[email protected]
├── @astrojs/[email protected]
├── [email protected]

are there known issues with view transitions and astro:* events?

thanks in advance!

waxen girder
#

Hello @fallen moat 👋,

I'm sorry for the errors you experience. Indeed there are cases where "bundled scripts only run once" is not true since Astro 5.0 changed hoisting of bundled scripts. This can lead to double execution and too late execution.
The simplest fix right now would be to add an import to the start of your script:

import "astro:transitions/client"

There are also other alternatives to fix this: #1332712092699988089 message

For further information see: #12804 and #12858

fallen moat