Prevent body scripts from re-executing on navigation

.changeset/warm-turkeys-develop.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Prevent body scripts from re-executing on navigation

packages/astro/components/ViewTransitions.astro

@@ -142,19 +142,6 @@ const { fallback = 'animate' } = Astro.props as Props;
 				const href = el.getAttribute('href');
 				return doc.head.querySelector(`link[rel=stylesheet][href="${href}"]`);
 			}
-			if (el.tagName === 'SCRIPT') {
-				let s1 = el as HTMLScriptElement;
-				for (const s2 of doc.scripts) {
-					if (
-						// Inline
-						(s1.textContent && s1.textContent === s2.textContent) ||
-						// External
-						(s1.type === s2.type && s1.src === s2.src)
-					) {
-						return s2;
-					}
-				}
-			}
 			// Only run this in dev. This will get stripped from production builds and is not needed.
 			if (import.meta.env.DEV) {
 				if (el.tagName === 'STYLE' && el.dataset.viteDevId) {
@@ -202,6 +189,20 @@ const { fallback = 'animate' } = Astro.props as Props;
 			// Everything left in the new head is new, append it all.
 			document.head.append(...doc.head.children);
 
+			// Replace scripts
+			for(const s1 of document.scripts) {
+				for (const s2 of doc.scripts) {
+					if (
+						// Inline
+						(s1.textContent && s1.textContent === s2.textContent) ||
+						// External
+						(s1.type === s2.type && s1.src === s2.src)
+					) {
+						s2.remove();
+					}
+				}
+			}
+
 			// Persist elements in the existing body
 			const oldBody = document.body;
 			document.body.replaceWith(doc.body);

packages/astro/e2e/fixtures/view-transitions/src/components/InlineScript.astro

@@ -0,0 +1,9 @@
+<div id="counter">Count</div>
+<script is:inline>
+	let count = 1;
+	const onAfterSwap = () => {
+		count++;
+		document.querySelector('#counter').textContent = `Count: ${count}`;
+	}
+	document.addEventListener('astro:page-load', onAfterSwap);
+</script>

packages/astro/e2e/fixtures/view-transitions/src/pages/inline-script-one.astro

@@ -0,0 +1,8 @@
+---
+import Layout from '../components/Layout.astro';
+import InlineScript from '../components/InlineScript.astro';
+---
+<Layout>
+	<InlineScript />
+	<a id="click-one" href="/inline-script-two">Go to 2</a>
+</Layout>

packages/astro/e2e/fixtures/view-transitions/src/pages/inline-script-two.astro

@@ -0,0 +1,8 @@
+---
+import Layout from '../components/Layout.astro';
+import InlineScript from '../components/InlineScript.astro';
+---
+<Layout>
+	<InlineScript />
+	<a id="click-two" href="/inline-script-one">Go to 1</a>
+</Layout>

packages/astro/e2e/view-transitions.test.js

@@ -663,4 +663,22 @@ test.describe('View Transitions', () => {
 		locator = page.locator('#click-one');
 		await expect(locator).not.toBeInViewport();
 	});
+
+	test('body inline scripts do not re-execute on navigation', async ({ page, astro }) => {
+		const errors = [];
+		page.addListener('pageerror', err => {
+			errors.push(err);
+		});
+
+		await page.goto(astro.resolveUrl('/inline-script-one'));
+		let article = page.locator('#counter');
+		await expect(article, 'should have script content').toBeVisible('exists');
+
+		await page.click('#click-one');
+
+		article = page.locator('#counter');
+		await expect(article, 'should have script content').toHaveText('Count: 3');
+
+		expect(errors).toHaveLength(0);
+	});
 });