michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix view transitions with client:only components

Browse source
This commit is contained in:
Martin Trapp 2023-10-02 16:37:57 +02:00
parent 148b5b8769
commit 363f80011b
3 changed files with 11 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/gentle-hats-dress.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Fix view transitions with client:only components

6
packages/astro/src/core/compile/compile.ts
View file

@ -69,6 +69,12 @@ export async function compile({
}); });
} }
if (viteConfig.mode === 'development') {
transformResult.clientOnlyComponents.forEach((component) => {
transformResult.code += `\nimport '${component.specifier}';\n`;
});
}
handleCompileResultErrors(transformResult, cssTransformErrors); handleCompileResultErrors(transformResult, cssTransformErrors);
return { return {

16
packages/astro/src/transitions/router.ts
View file

@ -198,22 +198,6 @@ async function updateDOM(
const href = el.getAttribute('href'); const href = el.getAttribute('href');
return newDocument.head.querySelector(`link[rel=stylesheet][href="${href}"]`); return newDocument.head.querySelector(`link[rel=stylesheet][href="${href}"]`);
} }
// What follows is a fix for an issue (#8472) with missing client:only styles after transition.
// That problem exists only in dev mode where styles are injected into the page by Vite.
// Returning a noop element ensures that the styles are not removed from the old document.
// Guarding the code below with the dev mode check
// allows tree shaking to remove this code in production.
if (import.meta.env.DEV) {
if (el.tagName === 'STYLE' && el.dataset.viteDevId) {
const devId = el.dataset.viteDevId;
// If this same style tag exists, remove it from the new page
return (
newDocument.querySelector(`style[data-vite-dev-id="${devId}"]`) ||
// Otherwise, keep it anyways. This is client:only styles.
noopEl
);
}
}
return null; return null;
}; };