View Transition resets html attributes

[florian-lefebvre]

What version of astro are you using?

^2.9.1

Are you using an SSR adapter? If so, which one?

Vercel

What package manager are you using?

npm

What operating system are you using?

Windows

What browser are you using?

Brave

Describe the Bug

I have a script that toggles the .dark class on the html element. However, using view transitions, the html class is reset to its original state (ie. class specified in the layout) but the script is not re-run.

To reproduce:

1. The page background will be red if your os is in dark mode
2. navigate to another page, the background will be white again

What's the expected result?

I'd expect one of the following:

1. html attributes are not reset to default because scripts are not re-run
2. scripts re-run

I think 1. makes more sense to avoid flashes

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-8a4stc

Participation

• I am willing to submit a pull request for this issue.

[matthewp]

Replacing the HTML attribute is what you would expect with View Transitions MPA mode so that I think is what we are going for. I would expect a script to run, though. Let me look into that.

[matthewp]

Oh right, these are module scripts that get bundled. So those will not necessarily rerun (maybe if they are inline...). So we'll need some solution for that.

One person had suggested firing the load event. I'll have to see if other similar routers do that. Another option is a namespaced astro:load or something like that. Then you could listen to this event and do what you need. Want to first research what other similar routers do, if you happen to know and can provide context that would be appreciated.

[matthewp]

Turbo uses a turbo:load event: https://turbo.hotwired.dev/reference/events

[florian-lefebvre]

Swup as well: https://swup.js.org/events/#list-of-all-events

[florian-lefebvre]

Awesome thank you!

[Tc-001]

Sadly this doesn't seem solve the theme toggle usecase unless I am missing something.

The current chain seems to be Old page -> Fetch new page -> Start crossfade -> End crossfade -> Dispatch astro:load

This means that the non-dark version of the page is still visible until the transition is completed

<script is:inline>
	document.addEventListener("astro:load", () => document.body.setAttribute("data-dark", "dark"))
</script>

Screencast.from.2023-07-25.23-07-40.webm

[matthewp]

Ah good point, I think we need to run astro:load inside updateDOM before the transition is finished.