From fb2fa3392dc7bc58e5794299c53ebaab70cc7256 Mon Sep 17 00:00:00 2001
From: Matthew Phillips <matthew@skypack.dev>
Date: Thu, 12 Sep 2024 12:46:16 -0400
Subject: [PATCH 1/3] Rename the ViewTransitions component to ClientRouter

---
 .changeset/hip-wombats-exercise.md             | 11 +++++++++++
 examples/starlog/src/components/BaseHead.astro |  4 ++--
 .../view-transitions/src/layouts/Layout.astro  |  4 ++--
 ...iewTransitions.astro => ClientRouter.astro} |  0
 packages/astro/client.d.ts                     |  8 ++++++--
 .../dev-toolbar/src/layout/Layout.astro        |  4 ++--
 .../src/components/AttributedLayout.astro      |  4 ++--
 .../src/components/Layout.astro                | 18 ++++++++++--------
 .../src/components/listener-layout.astro       | 16 ++++++++--------
 .../view-transitions/src/pages/abort.astro     | 15 ++++++++-------
 .../view-transitions/src/pages/abort2.astro    |  4 ++--
 .../src/pages/client-load.astro                |  9 +++++----
 .../view-transitions/src/pages/dialog.astro    | 17 +++++++++--------
 .../view-transitions/src/pages/form-four.astro |  4 ++--
 .../src/pages/half-baked.astro                 |  7 ++++---
 .../src/pages/no-directive-one.astro           |  4 ++--
 .../src/pages/no-directive-two.astro           |  4 ++--
 packages/astro/e2e/view-transitions.test.js    | 18 +++++++++---------
 packages/astro/src/transitions/router.ts       |  2 +-
 .../src/transitions/vite-plugin-transitions.ts |  7 +++++--
 packages/astro/src/types/public/config.ts      |  4 ++--
 .../ticketing-example/src/layouts/Layout.astro |  4 ++--
 22 files changed, 96 insertions(+), 72 deletions(-)
 create mode 100644 .changeset/hip-wombats-exercise.md
 rename packages/astro/{components/ViewTransitions.astro => ClientRouter.astro} (100%)

diff --git a/.changeset/hip-wombats-exercise.md b/.changeset/hip-wombats-exercise.md
new file mode 100644
index 000000000000..d30d37cbb6bc
--- /dev/null
+++ b/.changeset/hip-wombats-exercise.md
@@ -0,0 +1,11 @@
+---
+'astro': minor
+---
+
+ViewTransitions component renamed to ClientRouter
+
+The `<ViewTransitions />` component has been renamed to `<ClientRouter />`. There are no other changes than the name. The old name will continue to work in Astro 5.x, but will be removed in 6.0.
+
+This change was done to clarify the role of the component within Astro's View Transitions support. Astro supports View Transitions APIs in a few different ways, and renaming the component makes it more clear that the features you get from the ClientRouter component are slightly different from what you get using the native CSS-based MPA router.
+
+We still intend to maintain the ClientRouter as before, and it's still important for use-cases that the native support doesn't cover, such as persisting state between pages.
diff --git a/examples/starlog/src/components/BaseHead.astro b/examples/starlog/src/components/BaseHead.astro
index bb2c64ee8b81..34aff98fbf78 100644
--- a/examples/starlog/src/components/BaseHead.astro
+++ b/examples/starlog/src/components/BaseHead.astro
@@ -1,5 +1,5 @@
 ---
-import { ViewTransitions } from 'astro:transitions';
+import { ClientRouter } from 'astro:transitions';
 import SEO, { type Props as SEOProps } from './SEO.astro';
 import { SiteTitle, SiteDescription } from '../consts';
 
@@ -17,4 +17,4 @@ const { title = SiteTitle, name = SiteTitle, description = SiteDescription, ...s
 	rel="stylesheet"
 />
 
-<ViewTransitions />
+<ClientRouter />
diff --git a/examples/view-transitions/src/layouts/Layout.astro b/examples/view-transitions/src/layouts/Layout.astro
index 39a73bca0981..fee2c9ef1e1e 100644
--- a/examples/view-transitions/src/layouts/Layout.astro
+++ b/examples/view-transitions/src/layouts/Layout.astro
@@ -1,6 +1,6 @@
 ---
 import '../styles/styles.css';
-import { ViewTransitions } from 'astro:transitions';
+import { ClientRouter } from 'astro:transitions';
 import Footer from '../components/Footer.astro';
 import Nav from '../components/Nav.astro';
 
@@ -20,7 +20,7 @@ const { title } = Astro.props as Props;
 		<meta name="generator" content={Astro.generator} />
 		<meta name="view-transition" content="same-origin" />
 		<title>{title}</title>
-		<ViewTransitions />
+		<ClientRouter />
 	</head>
 	<body class="font-sans bg-gray-900 text-white">
 		<div class="h-screen overflow-hidden flex flex-col">
diff --git a/packages/astro/components/ViewTransitions.astro b/packages/astro/ClientRouter.astro
similarity index 100%
rename from packages/astro/components/ViewTransitions.astro
rename to packages/astro/ClientRouter.astro
diff --git a/packages/astro/client.d.ts b/packages/astro/client.d.ts
index ee91b09bb71c..e828124a1062 100644
--- a/packages/astro/client.d.ts
+++ b/packages/astro/client.d.ts
@@ -116,8 +116,12 @@ declare module 'astro:transitions' {
 	export const fade: TransitionModule['fade'];
 	export const createAnimationScope: TransitionModule['createAnimationScope'];
 
-	type ViewTransitionsModule = typeof import('./components/ViewTransitions.astro');
-	export const ViewTransitions: ViewTransitionsModule['default'];
+	type ClientRouterModule = typeof import('./components/ClientRouter.astro');
+	/**
+	 * @deprecated The ViewTransitions component has been renamed to ClientRouter
+	 */
+	export const ViewTransitions: ClientRouterModule['default'];
+	export const ClientRouter: ClientRouterModule['default'];
 }
 
 declare module 'astro:transitions/client' {
diff --git a/packages/astro/e2e/fixtures/dev-toolbar/src/layout/Layout.astro b/packages/astro/e2e/fixtures/dev-toolbar/src/layout/Layout.astro
index 35c96e3e0281..780ada07b747 100644
--- a/packages/astro/e2e/fixtures/dev-toolbar/src/layout/Layout.astro
+++ b/packages/astro/e2e/fixtures/dev-toolbar/src/layout/Layout.astro
@@ -1,10 +1,10 @@
 ---
-import { ViewTransitions } from 'astro:transitions';
+import { ClientRouter } from 'astro:transitions';
 ---
 <html lang="en">
   <head>
     <title>View Transition Test</title>
-    <ViewTransitions />
+    <ClientRouter />
 		<script is:inline>
 			// let playwright know when navigate() is done
 			document.addEventListener('astro:before-swap', (e) => {
diff --git a/packages/astro/e2e/fixtures/view-transitions/src/components/AttributedLayout.astro b/packages/astro/e2e/fixtures/view-transitions/src/components/AttributedLayout.astro
index 7a3284dd4e5c..0d0e7a4c743b 100644
--- a/packages/astro/e2e/fixtures/view-transitions/src/components/AttributedLayout.astro
+++ b/packages/astro/e2e/fixtures/view-transitions/src/components/AttributedLayout.astro
@@ -1,5 +1,5 @@
 ---
-import { ViewTransitions } from 'astro:transitions';
+import { ClientRouter } from 'astro:transitions';
 import { HTMLAttributes } from 'astro/types';
 
 interface Props extends HTMLAttributes<'html'> {}
@@ -7,7 +7,7 @@ interface Props extends HTMLAttributes<'html'> {}
 <html {...Astro.props}>
 	<head>
 		<title>Testing</title>
-		<ViewTransitions />
+		<ClientRouter />
 	</head>
 	<body>
 		<main transition:animate="slide">
diff --git a/packages/astro/e2e/fixtures/view-transitions/src/components/Layout.astro b/packages/astro/e2e/fixtures/view-transitions/src/components/Layout.astro
index 8643f273fd51..e10f01605d7a 100644
--- a/packages/astro/e2e/fixtures/view-transitions/src/components/Layout.astro
+++ b/packages/astro/e2e/fixtures/view-transitions/src/components/Layout.astro
@@ -1,5 +1,5 @@
 ---
-import { ViewTransitions } from 'astro:transitions';
+import { ClientRouter } from 'astro:transitions';
 import DarkMode from './DarkMode.astro';
 
 interface Props {
@@ -8,25 +8,27 @@ interface Props {
 
 const { link } = Astro.props as Props;
 ---
+
 <html>
 	<head>
 		<title>Testing</title>
-		{link ? <link rel="stylesheet" href={link} > : ''}
+		{link ? <link rel="stylesheet" href={link} /> : ''}
 		<style>
 			main {
 				max-width: 900px;
 				margin: auto;
-			}	
+			}
 		</style>
-		<link rel="stylesheet" href="/styles.css">
-		<ViewTransitions handleForms />
+		<link rel="stylesheet" href="/styles.css" />
+		<ClientRouter handleForms />
 		<DarkMode />
-		<meta name="script-executions" content="0">
-		<meta charset="utf-8">
+		<meta name="script-executions" content="0" />
+		<meta charset="utf-8" />
 		<script is:inline defer>
 			{
 				// Increment a global to see if this is running more than once
-				globalThis.scriptExecutions = globalThis.scriptExecutions == null ? -1 : globalThis.scriptExecutions;
+				globalThis.scriptExecutions =
+					globalThis.scriptExecutions == null ? -1 : globalThis.scriptExecutions;
 				globalThis.scriptExecutions++;
 				const el = document.querySelector('[name="script-executions"]');
 				el.setAttribute('content', globalThis.scriptExecutions);
diff --git a/packages/astro/e2e/fixtures/view-transitions/src/components/listener-layout.astro b/packages/astro/e2e/fixtures/view-transitions/src/components/listener-layout.astro
index 12c8d4469fea..63148cb61cee 100644
--- a/packages/astro/e2e/fixtures/view-transitions/src/components/listener-layout.astro
+++ b/packages/astro/e2e/fixtures/view-transitions/src/components/listener-layout.astro
@@ -1,21 +1,21 @@
 ---
-import { ViewTransitions } from 'astro:transitions';
+import { ClientRouter } from 'astro:transitions';
 ---
+
 <html>
 	<head>
-		<ViewTransitions/>
+		<ClientRouter />
 	</head>
 	<body>
 		<p>Local transitions</p>
-		<slot/>
+		<slot />
 		<script>
-			document.addEventListener("astro:after-swap", () => {
-				document.documentElement.setAttribute("class", "blue");
-				document.documentElement.setAttribute("animations", "" + document.getAnimations().length);
+			document.addEventListener('astro:after-swap', () => {
+				document.documentElement.setAttribute('class', 'blue');
+				document.documentElement.setAttribute('animations', '' + document.getAnimations().length);
 			});
 		</script>
-	</body>
-	<style>
+	</body><style>
 		p {
 			transition: color 1s;
 		}
diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/abort.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/abort.astro
index 7bee46f51a6d..3106e75fca5b 100644
--- a/packages/astro/e2e/fixtures/view-transitions/src/pages/abort.astro
+++ b/packages/astro/e2e/fixtures/view-transitions/src/pages/abort.astro
@@ -1,29 +1,30 @@
 ---
-import { ViewTransitions } from 'astro:transitions';
+import { ClientRouter } from 'astro:transitions';
 ---
+
 <html>
 	<head>
-		<ViewTransitions />
+		<ClientRouter />
 	</head>
 	<body>
 		<h1>Abort</h1>
 	</body>
 </html>
 <script>
-	import {navigate } from 'astro:transitions/client';
+	import { navigate } from 'astro:transitions/client';
 
 	document.addEventListener('astro:before-preparation', (e) => {
 		const originalLoader = e.loader;
 		e.loader = async () => {
 			const result = await originalLoader();
-			if (e.to.href.endsWith("/two")) {
+			if (e.to.href.endsWith('/two')) {
 				// delay loading of /two
 				await new Promise((resolve) => setTimeout(resolve, 1100));
 			}
-		}
+		};
 	});
 	// starts later, but is faster and overtakes the slower navigation
-	setTimeout(()=>navigate("/one"), 400);
+	setTimeout(() => navigate('/one'), 400);
 	// starts now, but is to slow to keep its lead
-	navigate("/two");
+	navigate('/two');
 </script>
diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/abort2.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/abort2.astro
index 4d4f9e934e09..468b71cb0fd8 100644
--- a/packages/astro/e2e/fixtures/view-transitions/src/pages/abort2.astro
+++ b/packages/astro/e2e/fixtures/view-transitions/src/pages/abort2.astro
@@ -1,9 +1,9 @@
 ---
-import { ViewTransitions, fade } from 'astro:transitions';
+import { ClientRouter, fade } from 'astro:transitions';
 ---
 <html transition:animate="none">
 	<head>
-		<ViewTransitions />
+		<ClientRouter />
 	</head>
 	<body>
 		<h1 transition:name="h1" transition:animate={fade({duration:500})}>Abort</h1>
diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/client-load.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/client-load.astro
index 0eaff1165ceb..927071ac59a7 100644
--- a/packages/astro/e2e/fixtures/view-transitions/src/pages/client-load.astro
+++ b/packages/astro/e2e/fixtures/view-transitions/src/pages/client-load.astro
@@ -1,12 +1,13 @@
 ---
-import { ViewTransitions } from "astro:transitions";
-import ClickToNavigate from "../components/ClickToNavigate.jsx"
+import { ClientRouter } from 'astro:transitions';
+import ClickToNavigate from '../components/ClickToNavigate.jsx';
 ---
+
 <html>
 	<head>
-		<ViewTransitions />
+		<ClientRouter />
 	</head>
 	<body>
-		<ClickToNavigate id="react-client-load-navigate-button" to="/two" client:load/>
+		<ClickToNavigate id="react-client-load-navigate-button" to="/two" client:load />
 	</body>
 </html>
diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/dialog.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/dialog.astro
index 07d4b0f00b39..5b99d54141f4 100644
--- a/packages/astro/e2e/fixtures/view-transitions/src/pages/dialog.astro
+++ b/packages/astro/e2e/fixtures/view-transitions/src/pages/dialog.astro
@@ -1,16 +1,17 @@
 ---
-import { ViewTransitions } from "astro:transitions";
+import { ClientRouter } from 'astro:transitions';
 ---
+
 <html>
 	<head>
-    <ViewTransitions />
+		<ClientRouter />
 	</head>
 	<body>
-    <button id="open" onclick="modal.showModal()">Open Modal</button>
-    <dialog id="modal">
-      <form method="dialog">
-        <button id="close">Close</button>
-      </form>
-    </dialog>
+		<button id="open" onclick="modal.showModal()">Open Modal</button>
+		<dialog id="modal">
+			<form method="dialog">
+				<button id="close">Close</button>
+			</form>
+		</dialog>
 	</body>
 </html>
diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/form-four.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/form-four.astro
index 7a62fbe47ba0..aa07f81417a9 100644
--- a/packages/astro/e2e/fixtures/view-transitions/src/pages/form-four.astro
+++ b/packages/astro/e2e/fixtures/view-transitions/src/pages/form-four.astro
@@ -1,10 +1,10 @@
 ---
-import { ViewTransitions } from 'astro:transitions';
+import { ClientRouter } from 'astro:transitions';
 ---
 
 <html>
 	<head>
-		<ViewTransitions handleForms/>
+		<ClientRouter handleForms />
 		<meta charset="UTF-8" />
 	</head>
 	<body>
diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/half-baked.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/half-baked.astro
index bbb9ef1053db..b557853c72b2 100644
--- a/packages/astro/e2e/fixtures/view-transitions/src/pages/half-baked.astro
+++ b/packages/astro/e2e/fixtures/view-transitions/src/pages/half-baked.astro
@@ -1,7 +1,7 @@
 ---
-import { ViewTransitions } from 'astro:transitions';
+import { ClientRouter } from 'astro:transitions';
 
-// For the test fixture, we import the script but we don't use the <ViewTransitions /> component
+// For the test fixture, we import the script but we don't use the <ClientRouter /> component
 // While this seems to be some strange mistake,
 // it might be realistic, e.g. in a configurable CommonHead component
 
@@ -10,10 +10,11 @@ interface Props {
 }
 const { transitions } = Astro.props;
 ---
+
 <html>
 	<head>
 		<title>Half-Baked</title>
-		{transitions && <ViewTransitions />}
+		{transitions && <ClientRouter />}
 	</head>
 	<body>
 		<main>
diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/no-directive-one.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/no-directive-one.astro
index d95e3a11b76e..1cb3bc96df55 100644
--- a/packages/astro/e2e/fixtures/view-transitions/src/pages/no-directive-one.astro
+++ b/packages/astro/e2e/fixtures/view-transitions/src/pages/no-directive-one.astro
@@ -1,11 +1,11 @@
 ---
-import { ViewTransitions } from 'astro:transitions';
+import { ClientRouter } from 'astro:transitions';
 
 ---
 <html>
 	<head>
 		<title>Testing</title>
-		<ViewTransitions />
+		<ClientRouter />
 	</head>
 	<body>
 		<p id="one">One</p>
diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/no-directive-two.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/no-directive-two.astro
index e0afede95a3a..f3f4c72af5d7 100644
--- a/packages/astro/e2e/fixtures/view-transitions/src/pages/no-directive-two.astro
+++ b/packages/astro/e2e/fixtures/view-transitions/src/pages/no-directive-two.astro
@@ -1,11 +1,11 @@
 ---
-import { ViewTransitions } from 'astro:transitions';
+import { ClientRouter } from 'astro:transitions';
 
 ---
 <html>
 	<head>
 		<title>Testing</title>
-		<ViewTransitions />
+		<ClientRouter />
 	</head>
 	<body>
 		<p id="two">Two</p>
diff --git a/packages/astro/e2e/view-transitions.test.js b/packages/astro/e2e/view-transitions.test.js
index 181994cfa930..878b9c5fe26b 100644
--- a/packages/astro/e2e/view-transitions.test.js
+++ b/packages/astro/e2e/view-transitions.test.js
@@ -114,7 +114,7 @@ test.describe('View Transitions', () => {
 		expect(loads.length, 'There should only be 1 page load').toEqual(1);
 	});
 
-	test('Moving to a page without ViewTransitions triggers a full page navigation', async ({
+	test('Moving to a page without ClientRouter triggers a full page navigation', async ({
 		page,
 		astro,
 	}) => {
@@ -125,7 +125,7 @@ test.describe('View Transitions', () => {
 		let p = page.locator('#one');
 		await expect(p, 'should have content').toHaveText('Page 1');
 
-		// Go to page 3 which does *not* have ViewTransitions enabled
+		// Go to page 3 which does *not* have ClientRouter enabled
 		await page.click('#click-three');
 		p = page.locator('#three');
 		await expect(p, 'should have content').toHaveText('Page 3');
@@ -136,7 +136,7 @@ test.describe('View Transitions', () => {
 		).toEqual(2);
 	});
 
-	test('Moving within a page without ViewTransitions does not trigger a full page navigation', async ({
+	test('Moving within a page without ClientRouter does not trigger a full page navigation', async ({
 		page,
 		astro,
 	}) => {
@@ -146,7 +146,7 @@ test.describe('View Transitions', () => {
 		let p = page.locator('#one');
 		await expect(p, 'should have content').toHaveText('Page 1');
 
-		// Go to page 3 which does *not* have ViewTransitions enabled
+		// Go to page 3 which does *not* have ClientRouter enabled
 		await page.click('#click-three');
 		p = page.locator('#three');
 		await expect(p, 'should have content').toHaveText('Page 3');
@@ -167,14 +167,14 @@ test.describe('View Transitions', () => {
 		).toEqual(2);
 	});
 
-	test('Moving from a page without ViewTransitions w/ back button', async ({ page, astro }) => {
+	test('Moving from a page without ClientRouter w/ back button', async ({ page, astro }) => {
 		const loads = collectLoads(page);
 		// Go to page 1
 		await page.goto(astro.resolveUrl('/one'));
 		let p = page.locator('#one');
 		await expect(p, 'should have content').toHaveText('Page 1');
 
-		// Go to page 3 which does *not* have ViewTransitions enabled
+		// Go to page 3 which does *not* have ClientRouter enabled
 		await page.click('#click-three');
 		p = page.locator('#three');
 		await expect(p, 'should have content').toHaveText('Page 3');
@@ -606,7 +606,7 @@ test.describe('View Transitions', () => {
 		await expect(loads.length, 'There should only be 1 page load').toEqual(1);
 	});
 
-	test('Importing ViewTransitions w/o using the component must not mess with history', async ({
+	test('Importing ClientRouter w/o using the component must not mess with history', async ({
 		page,
 		astro,
 	}) => {
@@ -706,7 +706,7 @@ test.describe('View Transitions', () => {
 		expect(loads.length, 'There should be 2 page load').toEqual(2);
 	});
 
-	test('Scroll position is restored on back navigation from page w/o ViewTransitions', async ({
+	test('Scroll position is restored on back navigation from page w/o ClientRouter', async ({
 		page,
 		astro,
 	}) => {
@@ -716,7 +716,7 @@ test.describe('View Transitions', () => {
 		let locator = page.locator('#click-external');
 		await expect(locator).toBeInViewport();
 
-		// Go to a page that has not enabled ViewTransitions
+		// Go to a page that has not enabled ClientRouter
 		await page.click('#click-external');
 		locator = page.locator('#three');
 		await expect(locator).toHaveText('Page 3');
diff --git a/packages/astro/src/transitions/router.ts b/packages/astro/src/transitions/router.ts
index 3150aa861701..bf10f9a8fad8 100644
--- a/packages/astro/src/transitions/router.ts
+++ b/packages/astro/src/transitions/router.ts
@@ -428,7 +428,7 @@ async function transition(
 		// see https://developer.mozilla.org/en-US/docs/Web/API/DOMParser/parseFromString
 		preparationEvent.newDocument.querySelectorAll('noscript').forEach((el) => el.remove());
 
-		// If ViewTransitions is not enabled on the incoming page, do a full page load to it.
+		// If ClientRouter is not enabled on the incoming page, do a full page load to it.
 		// Unless this was a form submission, in which case we do not want to trigger another mutation.
 		if (
 			!preparationEvent.newDocument.querySelector('[name="astro-view-transitions-enabled"]') &&
diff --git a/packages/astro/src/transitions/vite-plugin-transitions.ts b/packages/astro/src/transitions/vite-plugin-transitions.ts
index e8122cac4669..ea05764774e5 100644
--- a/packages/astro/src/transitions/vite-plugin-transitions.ts
+++ b/packages/astro/src/transitions/vite-plugin-transitions.ts
@@ -29,7 +29,10 @@ export default function astroTransitions({ settings }: { settings: AstroSettings
 			if (id === resolvedVirtualModuleId) {
 				return `
 				export * from "astro/virtual-modules/transitions.js";
-				export { default as ViewTransitions } from "astro/components/ViewTransitions.astro";
+				export {
+					default as ViewTransitions,
+					default as ClientRouter
+				} from "astro/components/ClientRouter.astro";
 			`;
 			}
 			if (id === resolvedVirtualClientModuleId) {
@@ -47,7 +50,7 @@ export default function astroTransitions({ settings }: { settings: AstroSettings
 			}
 		},
 		transform(code, id) {
-			if (id.includes('ViewTransitions.astro') && id.endsWith('.ts')) {
+			if (id.includes('ClientRouter.astro') && id.endsWith('.ts')) {
 				const prefetchDisabled = settings.config.prefetch === false;
 				return code.replace('__PREFETCH_DISABLED__', JSON.stringify(prefetchDisabled));
 			}
diff --git a/packages/astro/src/types/public/config.ts b/packages/astro/src/types/public/config.ts
index 7a712eb5c120..bf373841a735 100644
--- a/packages/astro/src/types/public/config.ts
+++ b/packages/astro/src/types/public/config.ts
@@ -835,7 +835,7 @@ export interface AstroUserConfig {
 	 * @type {boolean | object}
 	 * @description
 	 * Enable prefetching for links on your site to provide faster page transitions.
-	 * (Enabled by default on pages using the `<ViewTransitions />` router. Set `prefetch: false` to opt out of this behaviour.)
+	 * (Enabled by default on pages using the `<ClientRouter />` router. Set `prefetch: false` to opt out of this behaviour.)
 	 *
 	 * This configuration automatically adds a prefetch script to every page in the project
 	 * giving you access to the `data-astro-prefetch` attribute.
@@ -857,7 +857,7 @@ export interface AstroUserConfig {
 				 * @type {boolean}
 				 * @description
 				 * Enable prefetching for all links, including those without the `data-astro-prefetch` attribute.
-				 * This value defaults to `true` when using the `<ViewTransitions />` router. Otherwise, the default value is `false`.
+				 * This value defaults to `true` when using the `<ClientRouter />` router. Otherwise, the default value is `false`.
 				 *
 				 * ```js
 				 * prefetch: {
diff --git a/packages/db/test/fixtures/ticketing-example/src/layouts/Layout.astro b/packages/db/test/fixtures/ticketing-example/src/layouts/Layout.astro
index 114216824d27..482f104621b7 100644
--- a/packages/db/test/fixtures/ticketing-example/src/layouts/Layout.astro
+++ b/packages/db/test/fixtures/ticketing-example/src/layouts/Layout.astro
@@ -1,5 +1,5 @@
 ---
-import { ViewTransitions } from 'astro:transitions';
+import { ClientRouter } from 'astro:transitions';
 import 'open-props/normalize';
 import 'open-props/style';
 
@@ -19,7 +19,7 @@ const { title } = Astro.props;
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 		<meta name="generator" content={Astro.generator} />
 		<title>{title}</title>
-		<ViewTransitions handleForms />
+		<ClientRouter handleForms />
 	</head>
 	<body>
 		<slot />

From a983825dbd4f9b9c6d1429170f96a5e280598b00 Mon Sep 17 00:00:00 2001
From: Matthew Phillips <matthew@skypack.dev>
Date: Thu, 12 Sep 2024 13:04:25 -0400
Subject: [PATCH 2/3] oops, move

---
 packages/astro/ClientRouter.astro | 149 ------------------------------
 1 file changed, 149 deletions(-)
 delete mode 100644 packages/astro/ClientRouter.astro

diff --git a/packages/astro/ClientRouter.astro b/packages/astro/ClientRouter.astro
deleted file mode 100644
index 8bda7b780fa0..000000000000
--- a/packages/astro/ClientRouter.astro
+++ /dev/null
@@ -1,149 +0,0 @@
----
-type Fallback = 'none' | 'animate' | 'swap';
-
-export interface Props {
-	fallback?: Fallback;
-	/** @deprecated handleForms is enabled by default in Astro 4.0
-	 *
-	 * Set `data-astro-reload` on your form to opt-out of the default behavior.
-	 */
-	handleForms?: boolean;
-}
-
-const { fallback = 'animate' } = Astro.props;
----
-
-<style is:global>
-	/* Route announcer */
-	.astro-route-announcer {
-		position: absolute;
-		left: 0;
-		top: 0;
-		clip: rect(0 0 0 0);
-		clip-path: inset(50%);
-		overflow: hidden;
-		white-space: nowrap;
-		width: 1px;
-		height: 1px;
-	}
-</style>
-<meta name="astro-view-transitions-enabled" content="true" />
-<meta name="astro-view-transitions-fallback" content={fallback} />
-<script>
-	import type { Options } from 'astro:transitions/client';
-	import { supportsViewTransitions, navigate } from 'astro:transitions/client';
-	// NOTE: import from `astro/virtual-modules/prefetch.js` as `astro:prefetch` requires the `prefetch` config to be enabled
-	// @ts-ignore
-	import { init } from 'astro/virtual-modules/prefetch.js';
-
-	type Fallback = 'none' | 'animate' | 'swap';
-
-	function getFallback(): Fallback {
-		const el = document.querySelector('[name="astro-view-transitions-fallback"]');
-		if (el) {
-			return el.getAttribute('content') as Fallback;
-		}
-		return 'animate';
-	}
-
-	function isReloadEl(el: HTMLElement | SVGAElement): boolean {
-		return el.dataset.astroReload !== undefined;
-	}
-
-	if (supportsViewTransitions || getFallback() !== 'none') {
-		if (import.meta.env.DEV && window.matchMedia('(prefers-reduced-motion)').matches) {
-			console.warn(
-				`[transitions]: all view transition animations, including fallback animation, are disabled as this device has the prefer-reduced-motion setting enabled.`,
-			);
-		}
-		document.addEventListener('click', (ev) => {
-			let link = ev.target;
-			if (ev.composed) {
-				link = ev.composedPath()[0];
-			}
-			if (link instanceof Element) {
-				link = link.closest('a, area');
-			}
-			if (
-				!(link instanceof HTMLAnchorElement) &&
-				!(link instanceof SVGAElement) &&
-				!(link instanceof HTMLAreaElement)
-			)
-				return;
-			// This check verifies that the click is happening on an anchor
-			// that is going to another page within the same origin. Basically it determines
-			// same-origin navigation, but omits special key combos for new tabs, etc.
-			const linkTarget = link instanceof HTMLElement ? link.target : link.target.baseVal;
-			const href = link instanceof HTMLElement ? link.href : link.href.baseVal;
-			const origin = new URL(href, location.href).origin;
-			if (
-				isReloadEl(link) ||
-				link.hasAttribute('download') ||
-				!link.href ||
-				(linkTarget && linkTarget !== '_self') ||
-				origin !== location.origin ||
-				ev.button !== 0 || // left clicks only
-				ev.metaKey || // new tab (mac)
-				ev.ctrlKey || // new tab (windows)
-				ev.altKey || // download
-				ev.shiftKey || // new window
-				ev.defaultPrevented
-			) {
-				// No page transitions in these cases,
-				// Let the browser standard action handle this
-				return;
-			}
-			ev.preventDefault();
-			navigate(href, {
-				history: link.dataset.astroHistory === 'replace' ? 'replace' : 'auto',
-				sourceElement: link,
-			});
-		});
-
-		document.addEventListener('submit', (ev) => {
-			let el = ev.target as HTMLElement;
-			if (el.tagName !== 'FORM' || ev.defaultPrevented || isReloadEl(el)) {
-				return;
-			}
-			const form = el as HTMLFormElement;
-			const submitter = ev.submitter;
-			const formData = new FormData(form, submitter);
-			// form.action and form.method can point to an <input name="action"> or <input name="method">
-			// in which case should fallback to the form attribute
-			const formAction =
-				typeof form.action === 'string' ? form.action : form.getAttribute('action');
-			const formMethod =
-				typeof form.method === 'string' ? form.method : form.getAttribute('method');
-			// Use the form action, if defined, otherwise fallback to current path.
-			let action = submitter?.getAttribute('formaction') ?? formAction ?? location.pathname;
-			// Use the form method, if defined, otherwise fallback to "get"
-			const method = submitter?.getAttribute('formmethod') ?? formMethod ?? 'get';
-
-			// the "dialog" method is a special keyword used within <dialog> elements
-			// https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fs-method
-			if (method === 'dialog' || location.origin !== new URL(action, location.href).origin) {
-				// No page transitions in these cases,
-				// Let the browser standard action handle this
-				return;
-			}
-
-			const options: Options = { sourceElement: submitter ?? form };
-			if (method === 'get') {
-				const params = new URLSearchParams(formData as any);
-				const url = new URL(action);
-				url.search = params.toString();
-				action = url.toString();
-			} else {
-				options.formData = formData;
-			}
-
-			ev.preventDefault();
-			navigate(action, options);
-		});
-
-		// @ts-expect-error injected by vite-plugin-transitions for treeshaking
-		if (!__PREFETCH_DISABLED__) {
-			init({ prefetchAll: true });
-		}
-	}
-</script>

From add38f42517e6a4d204813bb76308fc7e431b32c Mon Sep 17 00:00:00 2001
From: Matthew Phillips <matthew@skypack.dev>
Date: Thu, 12 Sep 2024 16:35:46 -0400
Subject: [PATCH 3/3] Move it

---
 packages/astro/components/ClientRouter.astro | 149 +++++++++++++++++++
 1 file changed, 149 insertions(+)
 create mode 100644 packages/astro/components/ClientRouter.astro

diff --git a/packages/astro/components/ClientRouter.astro b/packages/astro/components/ClientRouter.astro
new file mode 100644
index 000000000000..8bda7b780fa0
--- /dev/null
+++ b/packages/astro/components/ClientRouter.astro
@@ -0,0 +1,149 @@
+---
+type Fallback = 'none' | 'animate' | 'swap';
+
+export interface Props {
+	fallback?: Fallback;
+	/** @deprecated handleForms is enabled by default in Astro 4.0
+	 *
+	 * Set `data-astro-reload` on your form to opt-out of the default behavior.
+	 */
+	handleForms?: boolean;
+}
+
+const { fallback = 'animate' } = Astro.props;
+---
+
+<style is:global>
+	/* Route announcer */
+	.astro-route-announcer {
+		position: absolute;
+		left: 0;
+		top: 0;
+		clip: rect(0 0 0 0);
+		clip-path: inset(50%);
+		overflow: hidden;
+		white-space: nowrap;
+		width: 1px;
+		height: 1px;
+	}
+</style>
+<meta name="astro-view-transitions-enabled" content="true" />
+<meta name="astro-view-transitions-fallback" content={fallback} />
+<script>
+	import type { Options } from 'astro:transitions/client';
+	import { supportsViewTransitions, navigate } from 'astro:transitions/client';
+	// NOTE: import from `astro/virtual-modules/prefetch.js` as `astro:prefetch` requires the `prefetch` config to be enabled
+	// @ts-ignore
+	import { init } from 'astro/virtual-modules/prefetch.js';
+
+	type Fallback = 'none' | 'animate' | 'swap';
+
+	function getFallback(): Fallback {
+		const el = document.querySelector('[name="astro-view-transitions-fallback"]');
+		if (el) {
+			return el.getAttribute('content') as Fallback;
+		}
+		return 'animate';
+	}
+
+	function isReloadEl(el: HTMLElement | SVGAElement): boolean {
+		return el.dataset.astroReload !== undefined;
+	}
+
+	if (supportsViewTransitions || getFallback() !== 'none') {
+		if (import.meta.env.DEV && window.matchMedia('(prefers-reduced-motion)').matches) {
+			console.warn(
+				`[transitions]: all view transition animations, including fallback animation, are disabled as this device has the prefer-reduced-motion setting enabled.`,
+			);
+		}
+		document.addEventListener('click', (ev) => {
+			let link = ev.target;
+			if (ev.composed) {
+				link = ev.composedPath()[0];
+			}
+			if (link instanceof Element) {
+				link = link.closest('a, area');
+			}
+			if (
+				!(link instanceof HTMLAnchorElement) &&
+				!(link instanceof SVGAElement) &&
+				!(link instanceof HTMLAreaElement)
+			)
+				return;
+			// This check verifies that the click is happening on an anchor
+			// that is going to another page within the same origin. Basically it determines
+			// same-origin navigation, but omits special key combos for new tabs, etc.
+			const linkTarget = link instanceof HTMLElement ? link.target : link.target.baseVal;
+			const href = link instanceof HTMLElement ? link.href : link.href.baseVal;
+			const origin = new URL(href, location.href).origin;
+			if (
+				isReloadEl(link) ||
+				link.hasAttribute('download') ||
+				!link.href ||
+				(linkTarget && linkTarget !== '_self') ||
+				origin !== location.origin ||
+				ev.button !== 0 || // left clicks only
+				ev.metaKey || // new tab (mac)
+				ev.ctrlKey || // new tab (windows)
+				ev.altKey || // download
+				ev.shiftKey || // new window
+				ev.defaultPrevented
+			) {
+				// No page transitions in these cases,
+				// Let the browser standard action handle this
+				return;
+			}
+			ev.preventDefault();
+			navigate(href, {
+				history: link.dataset.astroHistory === 'replace' ? 'replace' : 'auto',
+				sourceElement: link,
+			});
+		});
+
+		document.addEventListener('submit', (ev) => {
+			let el = ev.target as HTMLElement;
+			if (el.tagName !== 'FORM' || ev.defaultPrevented || isReloadEl(el)) {
+				return;
+			}
+			const form = el as HTMLFormElement;
+			const submitter = ev.submitter;
+			const formData = new FormData(form, submitter);
+			// form.action and form.method can point to an <input name="action"> or <input name="method">
+			// in which case should fallback to the form attribute
+			const formAction =
+				typeof form.action === 'string' ? form.action : form.getAttribute('action');
+			const formMethod =
+				typeof form.method === 'string' ? form.method : form.getAttribute('method');
+			// Use the form action, if defined, otherwise fallback to current path.
+			let action = submitter?.getAttribute('formaction') ?? formAction ?? location.pathname;
+			// Use the form method, if defined, otherwise fallback to "get"
+			const method = submitter?.getAttribute('formmethod') ?? formMethod ?? 'get';
+
+			// the "dialog" method is a special keyword used within <dialog> elements
+			// https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fs-method
+			if (method === 'dialog' || location.origin !== new URL(action, location.href).origin) {
+				// No page transitions in these cases,
+				// Let the browser standard action handle this
+				return;
+			}
+
+			const options: Options = { sourceElement: submitter ?? form };
+			if (method === 'get') {
+				const params = new URLSearchParams(formData as any);
+				const url = new URL(action);
+				url.search = params.toString();
+				action = url.toString();
+			} else {
+				options.formData = formData;
+			}
+
+			ev.preventDefault();
+			navigate(action, options);
+		});
+
+		// @ts-expect-error injected by vite-plugin-transitions for treeshaking
+		if (!__PREFETCH_DISABLED__) {
+			init({ prefetchAll: true });
+		}
+	}
+</script>