feat: provide fetch to reroute (#13549)

This provides `fetch` as an argument to `reroute`, so that you can get the same benefits as the `fetch` provided to `load` functions from it.
This is important (among other things) because else you might not be able to forward cookies on the server which influence where to go to.

Author: dummdidumm

.changeset/thirty-days-wink.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': minor
+---
+
+feat: provide `fetch` to `reroute`

documentation/docs/30-advanced/20-hooks.md

@@ -299,7 +299,26 @@ The `lang` parameter will be correctly derived from the returned pathname.
 
 Using `reroute` will _not_ change the contents of the browser's address bar, or the value of `event.url`.
 
-Since version 2.18, the `reroute` hook can be asynchronous, allowing it to (for example) fetch data from your backend to decide where to reroute to. Use this carefully and make sure it's fast, as it will delay navigation otherwise.
+Since version 2.18, the `reroute` hook can be asynchronous, allowing it to (for example) fetch data from your backend to decide where to reroute to. Use this carefully and make sure it's fast, as it will delay navigation otherwise. In case you fetch data, make sure to use the `fetch` provided to the `reroute` function. It has the [same benefits](load#Making-fetch-requests) as using the special `fetch` of `load` functions, with the caveat that `params` and `id` are unavailable to [`handleFetch`](#Server-hooks-handleFetch) because the route is not known yet.
+
+```js
+/// file: src/hooks.js
+// @errors: 2345
+// @errors: 2304
+
+/** @type {import('@sveltejs/kit').Reroute} */
+export function reroute({ url, fetch }) {
+	// Ask a special endpoint within your app about the destination
+	if (url.pathname === '/api/reroute') return;
+
+	const api = new URL('/api/reroute', url);
+	api.searchParams.set('pathname', url.pathname);
+
+	const result = await fetch(api).then(r => r.json());
+	return result.pathname;
+}
+```
+
 
 > [!NOTE] `reroute` is considered a pure, idempotent function. As such, it must always return the same output for the same input and not have side effects. Under these assumptions, SvelteKit caches the result of `reroute` on the client so it is only called once per unique URL.
 

packages/kit/src/exports/public.d.ts

@@ -814,7 +814,7 @@ export type ClientInit = () => MaybePromise<void>;
  * The [`reroute`](https://svelte.dev/docs/kit/hooks#Universal-hooks-reroute) hook allows you to modify the URL before it is used to determine which route to render.
  * @since 2.3.0
  */
-export type Reroute = (event: { url: URL }) => MaybePromise<void | string>;
+export type Reroute = (event: { url: URL; fetch: typeof fetch }) => MaybePromise<void | string>;
 
 /**
  * The [`transport`](https://svelte.dev/docs/kit/hooks#Universal-hooks-transport) hook allows you to transport custom types across the server/client boundary.

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

@@ -690,12 +690,7 @@ async function load_node({ loader, parent, url, params, route, server_data_node
 				app.hash
 			),
 			async fetch(resource, init) {
-				/** @type {URL | string} */
-				let requested;
-
 				if (resource instanceof Request) {
-					requested = resource.url;
-
 					// we're not allowed to modify the received `Request` object, so in order
 					// to fixup relative urls we create a new equivalent `init` object instead
 					init = {
@@ -720,25 +715,15 @@ async function load_node({ loader, parent, url, params, route, server_data_node
 						signal: resource.signal,
 						...init
 					};
-				} else {
-					requested = resource;
 				}
 
-				// we must fixup relative urls so they are resolved from the target page
-				const resolved = new URL(requested, url);
+				const { resolved, promise } = resolve_fetch_url(resource, init, url);
+
 				if (is_tracking) {
 					depends(resolved.href);
 				}
 
-				// match ssr serialized data url, which is important to find cached responses
-				if (resolved.origin === url.origin) {
-					requested = resolved.href.slice(url.origin.length);
-				}
-
-				// prerendered pages may be served from any origin, so `initial_fetch` urls shouldn't be resolved
-				return started
-					? subsequent_fetch(requested, resolved.href, init)
-					: initial_fetch(requested, init);
+				return promise;
 			},
 			setHeaders: () => {}, // noop
 			depends,
@@ -793,6 +778,30 @@ async function load_node({ loader, parent, url, params, route, server_data_node
 	};
 }
 
+/**
+ * @param {Request | string | URL} input
+ * @param {RequestInit | undefined} init
+ * @param {URL} url
+ */
+function resolve_fetch_url(input, init, url) {
+	let requested = input instanceof Request ? input.url : input;
+
+	// we must fixup relative urls so they are resolved from the target page
+	const resolved = new URL(requested, url);
+
+	// match ssr serialized data url, which is important to find cached responses
+	if (resolved.origin === url.origin) {
+		requested = resolved.href.slice(url.origin.length);
+	}
+
+	// prerendered pages may be served from any origin, so `initial_fetch` urls shouldn't be resolved
+	const promise = started
+		? subsequent_fetch(requested, resolved.href, init)
+		: initial_fetch(requested, init);
+
+	return { resolved, promise };
+}
+
 /**
  * @param {boolean} parent_changed
  * @param {boolean} route_changed
@@ -1223,7 +1232,13 @@ async function get_rerouted_url(url) {
 	try {
 		const promise = (async () => {
 			// reroute could alter the given URL, so we pass a copy
-			let rerouted = (await app.hooks.reroute({ url: new URL(url) })) ?? url;
+			let rerouted =
+				(await app.hooks.reroute({
+					url: new URL(url),
+					fetch: async (input, init) => {
+						return resolve_fetch_url(input, init, url).promise;
+					}
+				})) ?? url;
 
 			if (typeof rerouted === 'string') {
 				const tmp = new URL(url); // do not mutate the incoming URL

packages/kit/src/runtime/server/cookie.js

@@ -29,13 +29,13 @@ function validate_options(options) {
 /**
  * @param {Request} request
  * @param {URL} url
- * @param {import('types').TrailingSlash} trailing_slash
  */
-export function get_cookies(request, url, trailing_slash) {
+export function get_cookies(request, url) {
 	const header = request.headers.get('cookie') ?? '';
 	const initial_cookies = parse(header, { decode: (value) => value });
 
-	const normalized_url = normalize_path(url.pathname, trailing_slash);
+	/** @type {string | undefined} */
+	let normalized_url;
 
 	/** @type {Record<string, import('./page/types.js').Cookie>} */
 	const new_cookies = {};
@@ -149,6 +149,9 @@ export function get_cookies(request, url, trailing_slash) {
 			let path = options.path;
 
 			if (!options.domain || options.domain === url.hostname) {
+				if (!normalized_url) {
+					throw new Error('Cannot serialize cookies until after the route is determined');
+				}
 				path = resolve(normalized_url, path);
 			}
 
@@ -190,12 +193,20 @@ export function get_cookies(request, url, trailing_slash) {
 			.join('; ');
 	}
 
+	/** @type {Array<() => void>} */
+	const internal_queue = [];
+
 	/**
 	 * @param {string} name
 	 * @param {string} value
 	 * @param {import('./page/types.js').Cookie['options']} options
 	 */
 	function set_internal(name, value, options) {
+		if (!normalized_url) {
+			internal_queue.push(() => set_internal(name, value, options));
+			return;
+		}
+
 		let path = options.path;
 
 		if (!options.domain || options.domain === url.hostname) {
@@ -220,7 +231,15 @@ export function get_cookies(request, url, trailing_slash) {
 		}
 	}
 
-	return { cookies, new_cookies, get_cookie_header, set_internal };
+	/**
+	 * @param {import('types').TrailingSlash} trailing_slash
+	 */
+	function set_trailing_slash(trailing_slash) {
+		normalized_url = normalize_path(url.pathname, trailing_slash);
+		internal_queue.forEach((fn) => fn());
+	}
+
+	return { cookies, new_cookies, get_cookie_header, set_internal, set_trailing_slash };
 }
 
 /**

packages/kit/src/runtime/server/cookie.spec.js

@@ -53,7 +53,9 @@ const cookies_setup = ({ href, headers } = {}) => {
 			...headers
 		})
 	});
-	return get_cookies(request, url, 'ignore');
+	const result = get_cookies(request, url);
+	result.set_trailing_slash('ignore');
+	return result;
 };
 
 test('a cookie should not be present after it is deleted', () => {