From c37632a20d06164fb97a4c2fc48df6d960398832 Mon Sep 17 00:00:00 2001
From: Martin Trapp <94928215+martrapp@users.noreply.github.com>
Date: Thu, 24 Aug 2023 19:36:58 +0200
Subject: [PATCH] View Transitions: adding data-astro-reload to anchor element
 forces browser default behavior for navigation (#8217)

---
 .changeset/light-badgers-mate.md              |  8 +++++++
 .../astro/components/ViewTransitions.astro    |  1 +
 .../view-transitions/src/pages/four.astro     |  1 +
 packages/astro/e2e/view-transitions.test.js   | 22 +++++++++++++++++++
 4 files changed, 32 insertions(+)
 create mode 100644 .changeset/light-badgers-mate.md

diff --git a/.changeset/light-badgers-mate.md b/.changeset/light-badgers-mate.md
new file mode 100644
index 000000000000..ea0451bec2b5
--- /dev/null
+++ b/.changeset/light-badgers-mate.md
@@ -0,0 +1,8 @@
+---
+'astro': patch
+---
+
+Specify `data-astro-reload` (no value) on an anchor element to force the browser to ignore view transitions and fall back to default loading.
+
+This is helpful when navigating to documents that have different content-types, e.g. application/pdf, where you want to use the build in viewer of the browser.
+Example: `<a href='/my.pdf' data-astro-reload>...</a>`
diff --git a/packages/astro/components/ViewTransitions.astro b/packages/astro/components/ViewTransitions.astro
index cb6cbbd336f9..85d5124e9001 100644
--- a/packages/astro/components/ViewTransitions.astro
+++ b/packages/astro/components/ViewTransitions.astro
@@ -294,6 +294,7 @@ const { fallback = 'animate' } = Astro.props as Props;
 			if (
 				!link ||
 				!(link instanceof HTMLAnchorElement) ||
+				link.dataset.astroReload !== undefined ||
 				!link.href ||
 				(link.target && link.target !== '_self') ||
 				link.origin !== location.origin ||
diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/four.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/four.astro
index e322937935c0..915b9814f3c5 100644
--- a/packages/astro/e2e/fixtures/view-transitions/src/pages/four.astro
+++ b/packages/astro/e2e/fixtures/view-transitions/src/pages/four.astro
@@ -9,4 +9,5 @@ import Layout from '../components/Layout.astro';
 			<span>go to 1</span>
 		</div>
 	</a>
+	<a id="click-two" href="/two" data-astro-reload>load page / no navigation</a>
 </Layout>
diff --git a/packages/astro/e2e/view-transitions.test.js b/packages/astro/e2e/view-transitions.test.js
index 57e23e6a913d..11b6d1e134a7 100644
--- a/packages/astro/e2e/view-transitions.test.js
+++ b/packages/astro/e2e/view-transitions.test.js
@@ -419,3 +419,25 @@ test('Navigation also swaps the attributes of the document root', async ({ page,
 	await expect(h, 'should have content').toHaveAttribute('data-astro-transition', 'forward');
 	await expect(h, 'should be absent').not.toHaveAttribute('class', /.*/);
 });
+
+test('Link with data-astro-reload attribute should trigger page load, no tranistion', async ({
+	page,
+	astro,
+}) => {
+	const loads = [];
+	page.addListener('load', (p) => {
+		loads.push(p.title());
+	});
+
+	// Go to page 4
+	await page.goto(astro.resolveUrl('/four'));
+	let p = page.locator('#four');
+	await expect(p, 'should have content').toHaveText('Page 4');
+
+	// go to page 2
+	await page.click('#click-two');
+	p = page.locator('#two');
+	await expect(p, 'should have content').toHaveText('Page 2');
+
+	expect(loads.length, 'There should be 2 page load').toEqual(2);
+});