View Transitions: adding data-astro-reload to anchor element forces b…

…rowser default behavior for navigation (#8217)

.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>`

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 ||

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>

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);
+});