Fix: Persist styles of persistent client:only components during view transitions in DEV mode

[martrapp]

Changes

Yet another attempt ;-) to preserve the stylesheets of client:only components during view transitions in DEV mode.
Production is not an issue as Vite statically bundles the style files when building for production.

Situation

Stylesheets for client:only components are generated during hydration. They are not part of the static HTML files.
Therefore the comparison of header elements during swap() deletes them from the header.
client:only components can not simply be re-initialized in the new DOM because the browser won't re-import modules that are already loaded. In a former approach I used random query strings in the URLs of style elements. While this worked for React-style imported CSS files, it failed for Vue's and Svelte's embedded styles.

How the fix works:

Only in DEV (treeshaken in PROD) and only if there are client:only components in the new DOM:
Hydrate the components in an environment where the module handler cache is cleared. This way, all style elements are generated. We can now identify style elements that come from hydration and not from the static HTML file. Theses are kept in the head during the transition.

Testing

Reactivated and extended the existing e2e test case.
New test for Vue and Svelte components

Documents

N/A, bug fixing.

[changeset-bot]

🦋 Changeset detected

Latest commit: 671b5ad

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR