From a8f35777e7e322068a4e2f520c2c9e43ade19e58 Mon Sep 17 00:00:00 2001
From: Matthew Phillips <matthew@skypack.dev>
Date: Thu, 24 Aug 2023 14:44:48 -0400
Subject: [PATCH] Finalize View Transition event names (#8181)

* Finalize View Transition event names

* Use hyphenated names
---
 .changeset/proud-fans-type.md                          |  5 +++++
 packages/astro/components/ViewTransitions.astro        | 10 +++++-----
 .../view-transitions/src/components/DarkMode.astro     |  2 +-
 .../e2e/fixtures/view-transitions/src/pages/two.astro  |  2 +-
 packages/astro/e2e/view-transitions.test.js            |  6 +++---
 5 files changed, 15 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/proud-fans-type.md

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();
 	})
 </script>
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';
 	<article id="twoarticle"></article>
 </Layout>
 <script>
-	document.addEventListener('astro:load', () => {
+	document.addEventListener('astro:page-load', () => {
 		document.getElementById('twoarticle')!.textContent = 'works';
 	}, { once: true });
 </script>
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');