fix(5457): normalize path on prefetch (#5458)

* fix(5457): normalize path on prefetch

* Create new-geckos-vanish.md

* add test

* oops

* hmm

Co-authored-by: Rich Harris <hello@rich-harris.dev>

.changeset/new-geckos-vanish.md

@@ -0,0 +1,5 @@
+---
+"@sveltejs/kit": patch
+---
+
+Normalize paths on prefetch (fixes #5457)

packages/kit/src/runtime/client/client.js

@@ -898,14 +898,9 @@ export function create_client({ target, session, base, trailing_slash }) {
 			const params = route.exec(path);
 
 			if (params) {
+				const id = normalize_path(url.pathname, trailing_slash) + url.search;
 				/** @type {import('./types').NavigationIntent} */
-				const intent = {
-					id: url.pathname + url.search,
-					route,
-					params,
-					url
-				};
-
+				const intent = { id, route, params, url };
 				return intent;
 			}
 		}

packages/kit/test/apps/basics/src/routes/routing/prefetching/hash-route.svelte

@@ -0,0 +1,38 @@
+<script context="module">
+	let load_calls = 0;
+
+	export const load = () => {
+		load_calls += 1;
+		return { props: { calls: load_calls } };
+	};
+</script>
+
+<script>
+	import { onMount } from 'svelte';
+	import { page } from '$app/stores';
+
+	export let calls;
+
+	const modal_contents = {
+		'please-dont-show-me': {
+			title: 'Oopsie'
+		},
+		'please-dont-show-me-jr': {
+			title: 'Oopsie Jr.'
+		}
+	};
+
+	let modal = undefined;
+
+	const show_modal = () => {
+		const hash = $page.url.hash.substring(1);
+		modal = modal_contents[hash];
+	};
+
+	onMount(show_modal);
+</script>
+
+<svelte:window on:popstate={show_modal} />
+
+<h1>{modal?.title ?? ''}</h1>
+<p>Loaded {calls} times.</p>

packages/kit/test/apps/basics/src/routes/routing/prefetching/prefetched.json.js

@@ -0,0 +1,3 @@
+export function get() {
+	return { body: JSON.stringify('prefetched') };
+}

packages/kit/test/apps/basics/src/routes/routing/prefetching/prefetched.svelte

@@ -0,0 +1,14 @@
+<script context="module">
+	/** @type {import('@sveltejs/kit').Load} */
+	export async function load({ fetch }) {
+		const message = await fetch('/routing/prefetched.json').then(r => r.json());
+		return { props: { message } };
+	}
+</script>
+
+<script>
+	/** @type {string} */
+	export let message;
+</script>
+
+<h1>{message}</h1>

packages/kit/test/apps/options/source/pages/__layout.svelte

@@ -0,0 +1,23 @@
+<script>
+	import {
+		goto,
+		invalidate,
+		prefetch,
+		prefetchRoutes,
+		beforeNavigate,
+		afterNavigate
+	} from '$app/navigation';
+
+	if (typeof window !== 'undefined') {
+		Object.assign(window, {
+			goto,
+			invalidate,
+			prefetch,
+			prefetchRoutes,
+			beforeNavigate,
+			afterNavigate
+		});
+	}
+</script>
+
+<slot />

packages/kit/test/apps/options/source/pages/prefetching/index.svelte

@@ -0,0 +1 @@
+<a sveltekit:prefetch href="/path-base/prefetching/prefetched">click me</a>

packages/kit/test/apps/options/source/pages/prefetching/prefetched.js

@@ -0,0 +1,7 @@
+export function get() {
+	return {
+		body: {
+			message: 'prefetched'
+		}
+	};
+}

packages/kit/test/apps/options/source/pages/prefetching/prefetched.svelte

@@ -0,0 +1,6 @@
+<script>
+	/** @type {string} */
+	export let message;
+</script>
+
+<h1>{message}</h1>

packages/kit/test/apps/options/test/test.js

@@ -159,6 +159,38 @@ test.describe('trailingSlash', () => {
 		expect(r.url()).toBe(`${baseURL}/path-base/page-endpoint/__data.json`);
 		expect(await r.json()).toEqual({ data: 'hi' });
 	});
+
+	test('accounts for trailingSlash when prefetching', async ({
+		app,
+		baseURL,
+		page,
+		javaScriptEnabled
+	}) => {
+		if (!javaScriptEnabled) return;
+
+		await page.goto('/path-base/prefetching');
+
+		/** @type {string[]} */
+		let requests = [];
+		page.on('request', (r) => requests.push(r.url()));
+
+		// also wait for network processing to complete, see
+		// https://playwright.dev/docs/network#network-events
+		await app.prefetch('/path-base/prefetching/prefetched');
+
+		// svelte request made is environment dependent
+		if (process.env.DEV) {
+			expect(requests.filter((req) => req.endsWith('.svelte')).length).toBe(1);
+		} else {
+			expect(requests.filter((req) => req.endsWith('.js')).length).toBeGreaterThan(0);
+		}
+
+		expect(requests.includes(`${baseURL}/path-base/prefetching/prefetched/__data.json`)).toBe(true);
+
+		requests = [];
+		await app.goto('/path-base/prefetching/prefetched');
+		expect(requests).toEqual([]);
+	});
 });
 
 test.describe('serviceWorker', () => {