diff --git a/.changeset/proud-fans-type.md b/.changeset/proud-fans-type.md new file mode 100644 index 0000000000..8b58da136d --- /dev/null +++ b/.changeset/proud-fans-type.md @@ -0,0 +1,5 @@ +--- +'astro': minor +--- + +Finalize View Transition event names diff --git a/packages/astro/components/ViewTransitions.astro b/packages/astro/components/ViewTransitions.astro index 85d5124e90..42e8deb74b 100644 --- a/packages/astro/components/ViewTransitions.astro +++ b/packages/astro/components/ViewTransitions.astro @@ -17,14 +17,14 @@ const { fallback = 'animate' } = Astro.props as Props; index: number; scrollY: number; }; - type Events = 'astro:load' | 'astro:beforeload'; + type Events = 'astro:page-load' | 'astro:after-swap'; const persistState = (state: State) => history.replaceState(state, ''); const supportsViewTransitions = !!document.startViewTransition; const transitionEnabledOnThisPage = () => !!document.querySelector('[name="astro-view-transitions-enabled"]'); const triggerEvent = (name: Events) => document.dispatchEvent(new Event(name)); - const onload = () => triggerEvent('astro:load'); + const onPageLoad = () => triggerEvent('astro:page-load'); const PERSIST_ATTR = 'data-astro-transition-persist'; // The History API does not tell you if navigation is forward or back, so @@ -193,7 +193,7 @@ const { fallback = 'animate' } = Astro.props as Props; scrollTo(0, state.scrollY); // usings default scrollBehavior } - triggerEvent('astro:beforeload'); + triggerEvent('astro:after-swap'); }; // Wait on links to finish, to prevent FOUC @@ -263,7 +263,7 @@ const { fallback = 'animate' } = Astro.props as Props; // document.documentElement.removeAttribute('data-astro-transition'); await runScripts(); markScriptsExec(); - onload(); + onPageLoad(); } } @@ -383,7 +383,7 @@ const { fallback = 'animate' } = Astro.props as Props; { passive: true, capture: true } ); }); - addEventListener('load', onload); + addEventListener('load', onPageLoad); // There's not a good way to record scroll position before a back button. // So the way we do it is by listening to scroll and just continuously recording it. addEventListener( diff --git a/packages/astro/e2e/fixtures/view-transitions/src/components/DarkMode.astro b/packages/astro/e2e/fixtures/view-transitions/src/components/DarkMode.astro index b8eb585c83..39cb4b9527 100644 --- a/packages/astro/e2e/fixtures/view-transitions/src/components/DarkMode.astro +++ b/packages/astro/e2e/fixtures/view-transitions/src/components/DarkMode.astro @@ -6,7 +6,7 @@ } toggle(); - document.addEventListener('astro:beforeload', () => { + document.addEventListener('astro:after-swap', () => { toggle(); }) diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/two.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/two.astro index 84b16f2596..af67edbd55 100644 --- a/packages/astro/e2e/fixtures/view-transitions/src/pages/two.astro +++ b/packages/astro/e2e/fixtures/view-transitions/src/pages/two.astro @@ -6,7 +6,7 @@ import Layout from '../components/Layout.astro';
diff --git a/packages/astro/e2e/view-transitions.test.js b/packages/astro/e2e/view-transitions.test.js index 11b6d1e134..02fb76e4f2 100644 --- a/packages/astro/e2e/view-transitions.test.js +++ b/packages/astro/e2e/view-transitions.test.js @@ -181,7 +181,7 @@ test.describe('View Transitions', () => { await expect(p, 'imported CSS updated').toHaveCSS('font-size', '24px'); }); - test('astro:load event fires when navigating to new page', async ({ page, astro }) => { + test('astro:page-load event fires when navigating to new page', async ({ page, astro }) => { // Go to page 1 await page.goto(astro.resolveUrl('/one')); const p = page.locator('#one'); @@ -193,14 +193,14 @@ test.describe('View Transitions', () => { await expect(article, 'should have script content').toHaveText('works'); }); - test('astro:load event fires when navigating directly to a page', async ({ page, astro }) => { + test('astro:page-load event fires when navigating directly to a page', async ({ page, astro }) => { // Go to page 2 await page.goto(astro.resolveUrl('/two')); const article = page.locator('#twoarticle'); await expect(article, 'should have script content').toHaveText('works'); }); - test('astro:beforeload event fires right before the swap', async ({ page, astro }) => { + test('astro:after-swap event fires right after the swap', async ({ page, astro }) => { // Go to page 1 await page.goto(astro.resolveUrl('/one')); let p = page.locator('#one');