HMR Mode: Cross Document View Transition Support

[caseycarroll]

Description

It's currently not possible to execute cross-document view transitions while in dev mode. Chrome throws an AbortError: Transition Was Skipped when navigating between pages that both have:

@view-transition {
   navigation: auto; 
}

AFAIK, this occurs because Vite adds CSS to the page client-side. The @view-transition CSS gets added to the page too late in the page load process. Additionally, developers may encounter a flash of white if their page has a non-white background due to

vite/src/manifest-generator.ts

Line 141 in b45f068

`<style marko-vite-preload="${scope}"`,

To make matters even more challenging, HTML streaming appears incompatible with shared-element cross-document view transitions, even in production mode. The browser attempts to capture a snapshot of the next page before streaming completes. If an element on the following page has a matching view-transition-name and is streamed in, the browser will not be able to associate it with the view-transition-name on the page its transitioning from.

Why

An engineer has to work around these issues by:

1. avoiding streaming
2. explicitly importing the view transition activation CSS from the public folder in a marko run application
3. only testing view transitions in preview mode (otherwise 1 + 2 still leads to a flash of white on navigation)

Possible Implementation & Open Questions

I'm curious how Astro, Vitepress, Nuxt, etc... addresses this. I believe they support view transitions in dev mode.

Is this something you're interested in working on?

Potentially, but this would require deep knowledge of the Marko stack and close collab with the maintainers.

[DylanPiercey]

@caseycarroll I don't think theres a ton we can do here, although in theory all of this is moot with vites experimental "full dev mode".
Also since this is a vite specific issue I'm going to move the issue to @marko/vite