diff options
| -rw-r--r-- | packages/astro/components/ViewTransitions.astro | 34 | ||||
| -rw-r--r-- | packages/astro/e2e/view-transitions.test.js | 4 | ||||
| -rw-r--r-- | packages/astro/src/runtime/server/hydration.ts | 9 |
3 files changed, 28 insertions, 19 deletions
diff --git a/packages/astro/components/ViewTransitions.astro b/packages/astro/components/ViewTransitions.astro index d08cf3466..78c723efc 100644 --- a/packages/astro/components/ViewTransitions.astro +++ b/packages/astro/components/ViewTransitions.astro @@ -93,10 +93,10 @@ const { fallback = 'animate' } = Astro.props as Props; const persistedHeadElement = (el: Element): Element | null => { const id = el.getAttribute(PERSIST_ATTR); const newEl = id && doc.head.querySelector(`[${PERSIST_ATTR}="${id}"]`); - if(newEl) { + if (newEl) { return newEl; } - if(el.matches('link[rel=stylesheet]')) { + if (el.matches('link[rel=stylesheet]')) { const href = el.getAttribute('href'); return doc.head.querySelector(`link[rel=stylesheet][href="${href}"]`); } @@ -105,11 +105,11 @@ const { fallback = 'animate' } = Astro.props as Props; const swap = () => { // Swap head - for(const el of Array.from(document.head.children)) { + for (const el of Array.from(document.head.children)) { const newEl = persistedHeadElement(el); // If the element exists in the document already, remove it // from the new document and leave the current node alone - if(newEl) { + if (newEl) { newEl.remove(); } else { // Otherwise remove the element in the head. It doesn't exist in the new page. @@ -122,16 +122,16 @@ const { fallback = 'animate' } = Astro.props as Props; // Move over persist stuff in the body const oldBody = document.body; document.body.replaceWith(doc.body); - for(const el of oldBody.querySelectorAll(`[${PERSIST_ATTR}]`)) { + for (const el of oldBody.querySelectorAll(`[${PERSIST_ATTR}]`)) { const id = el.getAttribute(PERSIST_ATTR); const newEl = document.querySelector(`[${PERSIST_ATTR}="${id}"]`); - if(newEl) { + if (newEl) { // The element exists in the new page, replace it with the element // from the old page so that state is preserved. newEl.replaceWith(el); } } - + if (state?.scrollY != null) { scrollTo(0, state.scrollY); } @@ -141,20 +141,26 @@ const { fallback = 'animate' } = Astro.props as Props; // Wait on links to finish, to prevent FOUC const links: Promise<any>[] = []; - for(const el of doc.querySelectorAll('head link[rel=stylesheet]')) { + for (const el of doc.querySelectorAll('head link[rel=stylesheet]')) { // Do not preload links that are already on the page. - if(!document.querySelector(`[${PERSIST_ATTR}="${el.getAttribute(PERSIST_ATTR)}"], link[rel=stylesheet]`)) { + if ( + !document.querySelector( + `[${PERSIST_ATTR}="${el.getAttribute(PERSIST_ATTR)}"], link[rel=stylesheet]` + ) + ) { const c = document.createElement('link'); c.setAttribute('rel', 'preload'); c.setAttribute('as', 'style'); c.setAttribute('href', el.getAttribute('href')!); - links.push(new Promise<any>(resolve => { - ['load', 'error'].forEach((evName) => c.addEventListener(evName, resolve)); - document.head.append(c); - })); + links.push( + new Promise<any>((resolve) => { + ['load', 'error'].forEach((evName) => c.addEventListener(evName, resolve)); + document.head.append(c); + }) + ); } } - links.length && await Promise.all(links); + links.length && (await Promise.all(links)); if (fallback === 'animate') { let isAnimating = false; diff --git a/packages/astro/e2e/view-transitions.test.js b/packages/astro/e2e/view-transitions.test.js index 2498a5a8a..f30cd9902 100644 --- a/packages/astro/e2e/view-transitions.test.js +++ b/packages/astro/e2e/view-transitions.test.js @@ -252,7 +252,7 @@ test.describe('View Transitions', () => { const vid = page.locator('video[data-ready]'); await expect(vid).toBeVisible(); const firstTime = await page.evaluate(getTime); - + // Navigate to page 2 await page.click('#click-two'); const p = page.locator('#video-two'); @@ -270,7 +270,7 @@ test.describe('View Transitions', () => { await page.click('.increment'); await expect(cnt).toHaveText('6'); - + // Navigate to page 2 await page.click('#click-two'); const p = page.locator('#island-two'); diff --git a/packages/astro/src/runtime/server/hydration.ts b/packages/astro/src/runtime/server/hydration.ts index 598d0a9cf..11cce522a 100644 --- a/packages/astro/src/runtime/server/hydration.ts +++ b/packages/astro/src/runtime/server/hydration.ts @@ -22,7 +22,10 @@ interface ExtractedProps { props: Record<string | number | symbol, any>; } -const transitionDirectivesToCopyOnIsland = Object.freeze(['data-astro-transition-scope', 'data-astro-transition-persist']); +const transitionDirectivesToCopyOnIsland = Object.freeze([ + 'data-astro-transition-scope', + 'data-astro-transition-persist', +]); // Used to extract the directives, aka `client:load` information about a component. // Finds these special props and removes them from what gets passed into the component. @@ -168,8 +171,8 @@ export async function generateHydrateScript( }) ); - transitionDirectivesToCopyOnIsland.forEach(name => { - if(props[name]) { + transitionDirectivesToCopyOnIsland.forEach((name) => { + if (props[name]) { island.props[name] = props[name]; } }); |