Page 2
- message here
+ message here
diff --git a/packages/astro/e2e/view-transitions.test.js b/packages/astro/e2e/view-transitions.test.js
index d2c14aabdabc..a378df7c530c 100644
--- a/packages/astro/e2e/view-transitions.test.js
+++ b/packages/astro/e2e/view-transitions.test.js
@@ -241,15 +241,15 @@ test.describe('View Transitions', () => {
let p = page.locator('#totwo');
await expect(p, 'should have content').toHaveText('Go to listener two');
// on load a CSS transition is started triggered by a class on the html element
- expect(transitions).toEqual(1);
-
+ expect(transitions).toBeLessThanOrEqual(1);
+ const transitionsBefore = transitions;
// go to page 2
await page.click('#totwo');
p = page.locator('#toone');
await expect(p, 'should have content').toHaveText('Go to listener one');
// swap() resets that class, the after-swap listener sets it again.
// the temporarily missing class must not trigger page rendering
- expect(transitions).toEqual(1);
+ expect(transitions).toEqual(transitionsBefore);
});
test('click hash links does not do navigation', async ({ page, astro }) => {
@@ -670,10 +670,9 @@ test.describe('View Transitions', () => {
expect(loads.length, 'There should be 2 page loads').toEqual(2);
});
- test.skip('client:only styles are retained on transition', async ({ page, astro }) => {
- const totalExpectedStyles = 7;
+ test('client:only styles are retained on transition (1/2)', async ({ page, astro }) => {
+ const totalExpectedStyles = 8;
- // Go to page 1
await page.goto(astro.resolveUrl('/client-only-one'));
let msg = page.locator('.counter-message');
await expect(msg).toHaveText('message here');
@@ -690,6 +689,27 @@ test.describe('View Transitions', () => {
expect(styles.length).toEqual(totalExpectedStyles, 'style count has not changed');
});
+ test('client:only styles are retained on transition (2/2)', async ({ page, astro }) => {
+ const totalExpectedStyles_page_three = 10;
+ const totalExpectedStyles_page_four = 8;
+
+ await page.goto(astro.resolveUrl('/client-only-three'));
+ let msg = page.locator('#name');
+ await expect(msg).toHaveText('client-only-three');
+ await page.waitForTimeout(400); // await hydration
+
+ let styles = await page.locator('style').all();
+ expect(styles.length).toEqual(totalExpectedStyles_page_three);
+
+ await page.click('#click-four');
+
+ let pageTwo = page.locator('#page-four');
+ await expect(pageTwo, 'should have content').toHaveText('Page 4');
+
+ styles = await page.locator('style').all();
+ expect(styles.length).toEqual(totalExpectedStyles_page_four, 'style count has not changed');
+ });
+
test('Horizontal scroll position restored on back button', async ({ page, astro }) => {
await page.goto(astro.resolveUrl('/wide-page'));
let article = page.locator('#widepage');
diff --git a/packages/astro/src/transitions/router.ts b/packages/astro/src/transitions/router.ts
index 869ed87af5fa..1bbbc85a138d 100644
--- a/packages/astro/src/transitions/router.ts
+++ b/packages/astro/src/transitions/router.ts
@@ -47,6 +47,7 @@ const announce = () => {
};
const PERSIST_ATTR = 'data-astro-transition-persist';
+const VITE_ID = 'data-vite-dev-id';
let parser: DOMParser;
@@ -202,8 +203,10 @@ async function updateDOM(
) {
// Check for a head element that should persist and returns it,
// either because it has the data attribute or is a link el.
- const persistedHeadElement = (el: HTMLElement): Element | null => {
+ // Returns null if the element is not part of the new head, undefined if it should be left alone.
+ const persistedHeadElement = (el: HTMLElement): Element | null | undefined => {
const id = el.getAttribute(PERSIST_ATTR);
+ if (id === '') return undefined;
const newEl = id && newDocument.head.querySelector(`[${PERSIST_ATTR}="${id}"]`);
if (newEl) {
return newEl;
@@ -226,7 +229,7 @@ async function updateDOM(
// The element that currently has the focus is part of a DOM tree
// that will survive the transition to the new document.
// Save the element and the cursor position
- if (activeElement?.closest('[data-astro-transition-persist]')) {
+ if (activeElement?.closest(`[${PERSIST_ATTR}]`)) {
if (
activeElement instanceof HTMLInputElement ||
activeElement instanceof HTMLTextAreaElement
@@ -290,7 +293,7 @@ async function updateDOM(
// from the new document and leave the current node alone
if (newEl) {
newEl.remove();
- } else {
+ } else if (newEl === null) {
// Otherwise remove the element in the head. It doesn't exist in the new page.
el.remove();
}
@@ -306,6 +309,7 @@ async function updateDOM(
// this will reset scroll Position
document.body.replaceWith(newDocument.body);
+
for (const el of oldBody.querySelectorAll(`[${PERSIST_ATTR}]`)) {
const id = el.getAttribute(PERSIST_ATTR);
const newEl = document.querySelector(`[${PERSIST_ATTR}="${id}"]`);
@@ -315,7 +319,6 @@ async function updateDOM(
newEl.replaceWith(el);
}
}
-
restoreFocus(savedFocus);
if (popState) {
@@ -404,6 +407,8 @@ async function transition(
return;
}
+ if (import.meta.env.DEV) await prepareForClientOnlyComponents(newDocument, toLocation);
+
if (!popState) {
// save the current scroll position before we change the DOM and transition to the new page
history.replaceState({ ...history.state, scrollX, scrollY }, '');
@@ -438,6 +443,7 @@ export function navigate(href: string, options?: Options) {
'The view transtions client API was called during a server side render. This may be unintentional as the navigate() function is expected to be called in response to user interactions. Please make sure that your usage is correct.'
);
warning.name = 'Warning';
+ // eslint-disable-next-line no-console
console.warn(warning);
navigateOnServerWarned = true;
}
@@ -519,3 +525,53 @@ if (inBrowser) {
markScriptsExec();
}
}
+
+// Keep all styles that are potentially created by client:only components
+// and required on the next page
+async function prepareForClientOnlyComponents(newDocument: Document, toLocation: URL) {
+ // Any client:only component on the next page?
+ if (newDocument.body.querySelector(`astro-island[client='only']`)) {
+ // Load the next page with an empty module loader cache
+ const nextPage = document.createElement('iframe');
+ nextPage.setAttribute('src', toLocation.href);
+ nextPage.style.display = 'none';
+ document.body.append(nextPage);
+ await hydrationDone(nextPage);
+
+ const nextHead = nextPage.contentDocument?.head;
+ if (nextHead) {
+ // Clear former persist marks
+ document.head
+ .querySelectorAll(`style[${PERSIST_ATTR}=""]`)
+ .forEach((s) => s.removeAttribute(PERSIST_ATTR));
+
+ // Collect the vite ids of all styles present in the next head
+ const viteIds = [...nextHead.querySelectorAll(`style[${VITE_ID}]`)].map((style) =>
+ style.getAttribute(VITE_ID)
+ );
+ // Mark styles of the current head as persistent
+ // if they come from hydration and not from the newDocument
+ viteIds.forEach((id) => {
+ const style = document.head.querySelector(`style[${VITE_ID}="${id}"]`);
+ if (style && !newDocument.head.querySelector(`style[${VITE_ID}="${id}"]`)) {
+ style.setAttribute(PERSIST_ATTR, '');
+ }
+ });
+ }
+
+ // return a promise that resolves when all astro-islands are hydrated
+ async function hydrationDone(loadingPage: HTMLIFrameElement) {
+ await new Promise(
+ (r) => loadingPage.contentWindow?.addEventListener('load', r, { once: true })
+ );
+
+ return new Promise