make prefetching work (#620)

* make prefetching work - fixes #545

* tidy up

Author: Rich Harris

.changeset/proud-sloths-exercise.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+Make prefetching work

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

@@ -65,7 +65,7 @@ export class Renderer {
 		this.caches = new Map();
 
 		this.prefetching = {
-			href: null,
+			id: null,
 			promise: null
 		};
 
@@ -212,6 +212,8 @@ export class Renderer {
 		}
 
 		dispatchEvent(new CustomEvent('sveltekit:navigation-end'));
+		this.prefetching.promise = null;
+		this.prefetching.id = null;
 	}
 
 	/**
@@ -220,15 +222,12 @@ export class Renderer {
 	 */
 	async prefetch(url) {
 		const info = this.router.parse(url);
+
 		if (info) {
-			if (url.href !== this.prefetching.href) {
-				this.prefetching = {
-					href: url.href,
-					promise: this._get_navigation_result(info)
-				};
-			}
+			this.prefetching.promise = this._get_navigation_result(info);
+			this.prefetching.id = info.id;
 
-			return this.prefetching.promise;
+			return await this.prefetching.promise;
 		} else {
 			throw new Error(`Could not prefetch ${url.href}`);
 		}
@@ -239,6 +238,10 @@ export class Renderer {
 	 * @returns {Promise<import('./types').NavigationResult>}
 	 */
 	async _get_navigation_result(info) {
+		if (this.prefetching.id === info.id) {
+			return this.prefetching.promise;
+		}
+
 		for (let i = 0; i < info.routes.length; i += 1) {
 			const route = info.routes[i];
 			const [pattern, parts, params] = route;

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

@@ -142,11 +142,10 @@ export class Router {
 		const routes = this.routes.filter(([pattern]) => pattern.test(path));
 
 		if (routes.length > 0) {
-			return {
-				routes,
-				path,
-				query: new URLSearchParams(url.search)
-			};
+			const query = new URLSearchParams(url.search);
+			const id = `${path}?${query}`;
+
+			return { id, routes, path, query };
 		}
 	}
 

packages/kit/src/runtime/client/types.d.ts

@@ -1,6 +1,7 @@
 import { CSRComponent, CSRRoute, Page } from '../../../types.internal';
 
 export type NavigationInfo = {
+	id: string;
 	routes: CSRRoute[];
 	path: string;
 	query: URLSearchParams;

packages/kit/test/apps/basics/src/routes/routing/__tests__.js

@@ -115,10 +115,12 @@ export default function (test) {
 
 	test('prefetches programmatically', '/routing/a', async ({ base, capture_requests, app, js }) => {
 		if (js) {
-			const requests = await capture_requests(() => app.prefetch('b'));
+			const requests1 = await capture_requests(() => app.prefetch('/routing/prefetched'));
+			assert.equal(requests1.length, 2, requests1.join(','));
+			assert.equal(requests1[1], `${base}/routing/prefetched.json`);
 
-			assert.equal(requests.length, 2);
-			assert.equal(requests[1], `${base}/routing/b.json`);
+			const requests2 = await capture_requests(() => app.goto('/routing/prefetched'));
+			assert.equal(requests2, []);
 		}
 	});
 

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

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

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

@@ -0,0 +1,14 @@
+<script context="module">
+	/** @type {import('../../../../../../../types').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>