feat: make handleFetch a shared hook

Author: SomaticIT

packages/kit/src/core/sync/write_client_manifest.js

@@ -162,6 +162,9 @@ export function write_client_manifest(kit, manifest_data, output, metadata) {
 			export const dictionary = ${dictionary};
 
 			export const hooks = {
+				handleFetch: ${
+					client_hooks_file ? 'client_hooks.handleFetch || ' : ''
+				}(({ request, fetch }) => fetch(request)),
 				handleError: ${
 					client_hooks_file ? 'client_hooks.handleError || ' : ''
 				}(({ error }) => { console.error(error) }),

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

@@ -790,14 +790,22 @@ export type HandleClientError = (input: {
 }) => MaybePromise<void | App.Error>;
 
 /**
- * The [`handleFetch`](https://svelte.dev/docs/kit/hooks#Server-hooks-handleFetch) hook allows you to modify (or replace) a `fetch` request that happens inside a `load` function that runs on the server (or during prerendering).
+ * The [`handleFetch`](https://svelte.dev/docs/kit/hooks#Shared-hooks-handleFetch) hook allows you to modify (or replace) a `fetch` request that happens inside a `load` function that runs on the server (or during pre-rendering).
  */
 export type HandleFetch = (input: {
 	event: RequestEvent;
 	request: Request;
 	fetch: typeof fetch;
 }) => MaybePromise<Response>;
 
+/**
+ * The [`handleFetch`](https://svelte.dev/docs/kit/hooks#Shared-hooks-handleFetch) hook allows you to modify (or replace) a `fetch` request that happens inside a `load` function that runs on the client
+ */
+export type HandleClientFetch = (input: {
+	request: Request;
+	fetch: typeof fetch;
+}) => MaybePromise<Response>;
+
 /**
  * The [`init`](https://svelte.dev/docs/kit/hooks#Shared-hooks-init) will be invoked before the server responds to its first request
  * @since 2.10.0

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

@@ -7,7 +7,7 @@ import {
 	make_trackable,
 	normalize_path
 } from '../../utils/url.js';
-import { dev_fetch, initial_fetch, lock_fetch, subsequent_fetch, unlock_fetch } from './fetcher.js';
+import { create_fetch, dev_fetch, initial_fetch, lock_fetch, subsequent_fetch, unlock_fetch } from './fetcher.js';
 import { parse, parse_server_route } from './parse.js';
 import * as storage from './session-storage.js';
 import {
@@ -276,6 +276,7 @@ export async function start(_app, _target, hydrate) {
 	}
 
 	app = _app;
+	create_fetch(_app);
 
 	await _app.hooks.init?.();
 

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

@@ -15,68 +15,87 @@ export function unlock_fetch() {
 	loading -= 1;
 }
 
-if (DEV && BROWSER) {
-	let can_inspect_stack_trace = false;
-
-	// detect whether async stack traces work
-	// eslint-disable-next-line @typescript-eslint/require-await
-	const check_stack_trace = async () => {
-		const stack = /** @type {string} */ (new Error().stack);
-		can_inspect_stack_trace = stack.includes('check_stack_trace');
-	};
-
-	void check_stack_trace();
-
+/**
+ * @param {import('./types.js').SvelteKitApp} app
+ */
+export function create_fetch(app) {
 	/**
-	 * @param {RequestInfo | URL} input
-	 * @param {RequestInit & Record<string, any> | undefined} init
+	 * @type {typeof fetch}
 	 */
-	window.fetch = (input, init) => {
-		// Check if fetch was called via load_node. the lock method only checks if it was called at the
-		// same time, but not necessarily if it was called from `load`.
-		// We use just the filename as the method name sometimes does not appear on the CI.
-		const url = input instanceof Request ? input.url : input.toString();
-		const stack_array = /** @type {string} */ (new Error().stack).split('\n');
-		// We need to do a cutoff because Safari and Firefox maintain the stack
-		// across events and for example traces a `fetch` call triggered from a button
-		// back to the creation of the event listener and the element creation itself,
-		// where at some point client.js will show up, leading to false positives.
-		const cutoff = stack_array.findIndex((a) => a.includes('load@') || a.includes('at load'));
-		const stack = stack_array.slice(0, cutoff + 2).join('\n');
-
-		const in_load_heuristic = can_inspect_stack_trace
-			? stack.includes('src/runtime/client/client.js')
-			: loading;
-
-		// This flag is set in initial_fetch and subsequent_fetch
-		const used_kit_fetch = init?.__sveltekit_fetch__;
-
-		if (in_load_heuristic && !used_kit_fetch) {
-			console.warn(
-				`Loading ${url} using \`window.fetch\`. For best results, use the \`fetch\` that is passed to your \`load\` function: https://svelte.dev/docs/kit/load#making-fetch-requests`
-			);
-		}
+	let runtime_fetch;
+	if (DEV && BROWSER) {
+		let can_inspect_stack_trace = false;
+
+		// detect whether async stack traces work
+		// eslint-disable-next-line @typescript-eslint/require-await
+		const check_stack_trace = async () => {
+			const stack = /** @type {string} */ (new Error().stack);
+			can_inspect_stack_trace = stack.includes('check_stack_trace');
+		};
+
+		void check_stack_trace();
+
+		/**
+		 * @param {RequestInfo | URL} input
+		 * @param {RequestInit & Record<string, any> | undefined} init
+		 */
+		runtime_fetch = (input, init) => {
+			// Check if fetch was called via load_node. the lock method only checks if it was called at the
+			// same time, but not necessarily if it was called from `load`.
+			// We use just the filename as the method name sometimes does not appear on the CI.
+			const url = input instanceof Request ? input.url : input.toString();
+			const stack_array = /** @type {string} */ (new Error().stack).split('\n');
+			// We need to do a cutoff because Safari and Firefox maintain the stack
+			// across events and for example traces a `fetch` call triggered from a button
+			// back to the creation of the event listener and the element creation itself,
+			// where at some point client.js will show up, leading to false positives.
+			const cutoff = stack_array.findIndex((a) => a.includes('load@') || a.includes('at load'));
+			const stack = stack_array.slice(0, cutoff + 2).join('\n');
+
+			const in_load_heuristic = can_inspect_stack_trace
+				? stack.includes('src/runtime/client/client.js')
+				: loading;
+
+			// This flag is set in initial_fetch and subsequent_fetch
+			const used_kit_fetch = init?.__sveltekit_fetch__;
+
+			if (in_load_heuristic && !used_kit_fetch) {
+				console.warn(
+					`Loading ${url} using \`window.fetch\`. For best results, use the \`fetch\` that is passed to your \`load\` function: https://svelte.dev/docs/kit/load#making-fetch-requests`
+				);
+			}
 
-		const method = input instanceof Request ? input.method : init?.method || 'GET';
+			const method = input instanceof Request ? input.method : init?.method || 'GET';
 
-		if (method !== 'GET') {
-			cache.delete(build_selector(input));
-		}
+			if (method !== 'GET') {
+				cache.delete(build_selector(input));
+			}
 
-		return native_fetch(input, init);
-	};
-} else if (BROWSER) {
-	window.fetch = (input, init) => {
-		const method = input instanceof Request ? input.method : init?.method || 'GET';
+			return native_fetch(input, init);
+		};
+	} else if (BROWSER) {
+		runtime_fetch = (input, init) => {
+			const method = input instanceof Request ? input.method : init?.method || 'GET';
 
-		if (method !== 'GET') {
-			cache.delete(build_selector(input));
-		}
+			if (method !== 'GET') {
+				cache.delete(build_selector(input));
+			}
 
-		return native_fetch(input, init);
+			return native_fetch(input, init);
+		};
+	}
+
+	window.fetch = async (input, init) => {
+		const original_request = normalize_fetch_input(input, init);
+
+		return app.hooks.handleFetch({
+			request: original_request,
+			fetch: runtime_fetch,
+		});
 	};
 }
 
+
 const cache = new Map();
 
 /**
@@ -175,3 +194,17 @@ function build_selector(resource, opts) {
 
 	return selector;
 }
+
+
+/**
+ * @param {RequestInfo | URL} info
+ * @param {RequestInit | undefined} init
+ * @returns {Request}
+ */
+function normalize_fetch_input(info, init) {
+	if (info instanceof Request) {
+		return info;
+	}
+
+	return new Request(typeof info === 'string' ? new URL(info) : info, init);
+}

packages/kit/src/types/internal.d.ts

@@ -12,6 +12,7 @@ import {
 	ServerInitOptions,
 	HandleFetch,
 	Actions,
+	HandleClientFetch,
 	HandleClientError,
 	Reroute,
 	RequestEvent,
@@ -155,6 +156,7 @@ export interface ServerHooks {
 }
 
 export interface ClientHooks {
+	handleFetch: HandleClientFetch;
 	handleError: HandleClientError;
 	reroute: Reroute;
 	transport: Record<string, Transporter>;

packages/kit/types/index.d.ts

@@ -772,14 +772,22 @@ declare module '@sveltejs/kit' {
 	}) => MaybePromise<void | App.Error>;
 
 	/**
-	 * The [`handleFetch`](https://svelte.dev/docs/kit/hooks#Server-hooks-handleFetch) hook allows you to modify (or replace) a `fetch` request that happens inside a `load` function that runs on the server (or during prerendering).
+	 * The [`handleFetch`](https://svelte.dev/docs/kit/hooks#Shared-hooks-handleFetch) hook allows you to modify (or replace) a `fetch` request that happens inside a `load` function that runs on the server (or during pre-rendering).
 	 */
 	export type HandleFetch = (input: {
 		event: RequestEvent;
 		request: Request;
 		fetch: typeof fetch;
 	}) => MaybePromise<Response>;
 
+	/**
+	 * The [`handleFetch`](https://svelte.dev/docs/kit/hooks#Shared-hooks-handleFetch) hook allows you to modify (or replace) a `fetch` request that happens inside a `load` function that runs on the client
+	 */
+	export type HandleClientFetch = (input: {
+		request: Request;
+		fetch: typeof fetch;
+	}) => MaybePromise<Response>;
+
 	/**
 	 * The [`init`](https://svelte.dev/docs/kit/hooks#Shared-hooks-init) will be invoked before the server responds to its first request
 	 * @since 2.10.0