@sveltejs/kit 1.30.2 → 2.0.0

package/src/runtime/client/client.js

@@ -4,6 +4,7 @@ import {
 	add_data_suffix,
 	decode_params,
 	decode_pathname,
+	strip_hash,
 	make_trackable,
 	normalize_path
 } from '../../utils/url.js';
@@ -18,43 +19,109 @@ import { parse } from './parse.js';
 import * as storage from './session-storage.js';
 import {
 	find_anchor,
-	get_base_uri,
+	resolve_url,
 	get_link_info,
 	get_router_options,
 	is_external_url,
-	scroll_state,
-	origin
+	origin,
+	scroll_state
 } from './utils.js';
 
 import { base } from '__sveltekit/paths';
 import * as devalue from 'devalue';
-import { compact } from '../../utils/array.js';
+import {
+	HISTORY_INDEX,
+	NAVIGATION_INDEX,
+	PRELOAD_PRIORITIES,
+	SCROLL_KEY,
+	STATES_KEY,
+	SNAPSHOT_KEY,
+	PAGE_URL_KEY
+} from './constants.js';
 import { validate_page_exports } from '../../utils/exports.js';
-import { unwrap_promises } from '../../utils/promises.js';
-import { HttpError, Redirect, NotFound } from '../control.js';
+import { compact } from '../../utils/array.js';
+import { HttpError, Redirect, SvelteKitError } from '../control.js';
 import { INVALIDATED_PARAM, TRAILING_SLASH_PARAM, validate_depends } from '../shared.js';
-import { INDEX_KEY, PRELOAD_PRIORITIES, SCROLL_KEY, SNAPSHOT_KEY } from './constants.js';
 import { stores } from './singletons.js';
+import { get_message, get_status } from '../../utils/error.js';
 
 let errored = false;
 
+/** @typedef {{ x: number; y: number }} ScrollPosition */
+
 // We track the scroll position associated with each history entry in sessionStorage,
 // rather than on history.state itself, because when navigation is driven by
 // popstate it's too late to update the scroll position associated with the
 // state we're navigating from
-
-/** @typedef {{ x: number, y: number }} ScrollPosition */
-/** @type {Record<number, ScrollPosition>} */
+/**
+ * history index -> { x, y }
+ * @type {Record<number, ScrollPosition>}
+ */
 const scroll_positions = storage.get(SCROLL_KEY) ?? {};
 
-/** @type {Record<string, any[]>} */
+/**
+ * history index -> any
+ * @type {Record<string, Record<string, any>>}
+ */
+const states = storage.get(STATES_KEY, devalue.parse) ?? {};
+
+/**
+ * navigation index -> any
+ * @type {Record<string, any[]>}
+ */
 const snapshots = storage.get(SNAPSHOT_KEY) ?? {};
 
+const original_push_state = history.pushState;
+const original_replace_state = history.replaceState;
+
+if (DEV) {
+	let warned = false;
+
+	const warn = () => {
+		if (warned) return;
+		warned = true;
+
+		console.warn(
+			"Avoid using `history.pushState(...)` and `history.replaceState(...)` as these will conflict with SvelteKit's router. Use the `pushState` and `replaceState` imports from `$app/navigation` instead."
+		);
+	};
+
+	history.pushState = (...args) => {
+		warn();
+		return original_push_state.apply(history, args);
+	};
+
+	history.replaceState = (...args) => {
+		warn();
+		return original_replace_state.apply(history, args);
+	};
+}
+
 /** @param {number} index */
 function update_scroll_positions(index) {
 	scroll_positions[index] = scroll_state();
 }
 
+/**
+ * @param {number} current_history_index
+ * @param {number} current_navigation_index
+ */
+function clear_onward_history(current_history_index, current_navigation_index) {
+	// if we navigated back, then pushed a new state, we can
+	// release memory by pruning the scroll/snapshot lookup
+	let i = current_history_index + 1;
+	while (scroll_positions[i]) {
+		delete scroll_positions[i];
+		i += 1;
+	}
+
+	i = current_navigation_index + 1;
+	while (snapshots[i]) {
+		delete snapshots[i];
+		i += 1;
+	}
+}
+
 /**
  * Loads `href` the old-fashioned way, with a full page reload.
  * Returns a `Promise` that never resolves (to prevent any
@@ -66,6 +133,8 @@ function native_navigation(url) {
 	return new Promise(() => {});
 }
 
+function noop() {}
+
 /**
  * @param {import('./types.js').SvelteKitApp} app
  * @param {HTMLElement} target
@@ -83,6 +152,7 @@ export function create_client(app, target) {
 	default_error_loader();
 
 	const container = __SVELTEKIT_EMBEDDED__ ? target : document.documentElement;
+
 	/** @type {Array<((url: URL) => boolean)>} */
 	const invalidated = [];
 
@@ -123,6 +193,8 @@ export function create_client(app, target) {
 	let updating = false;
 	let navigating = false;
 	let hash_navigating = false;
+	/** True as soon as there happened one client-side navigation (excluding the SvelteKit-initialized initial one when in SPA mode) */
+	let has_navigated = false;
 
 	let force_invalidation = false;
 
@@ -130,16 +202,25 @@ export function create_client(app, target) {
 	let root;
 
 	// keeping track of the history index in order to prevent popstate navigation events if needed
-	let current_history_index = history.state?.[INDEX_KEY];
+	/** @type {number} */
+	let current_history_index = history.state?.[HISTORY_INDEX];
+
+	/** @type {number} */
+	let current_navigation_index = history.state?.[NAVIGATION_INDEX];
 
 	if (!current_history_index) {
 		// we use Date.now() as an offset so that cross-document navigations
 		// within the app don't result in data loss
-		current_history_index = Date.now();
+		current_history_index = current_navigation_index = Date.now();
 
 		// create initial history entry, so we can return here
-		history.replaceState(
-			{ ...history.state, [INDEX_KEY]: current_history_index },
+		original_replace_state.call(
+			history,
+			{
+				...history.state,
+				[HISTORY_INDEX]: current_history_index,
+				[NAVIGATION_INDEX]: current_navigation_index
+			},
 			'',
 			location.href
 		);
@@ -166,13 +247,12 @@ export function create_client(app, target) {
 		// Accept all invalidations as they come, don't swallow any while another invalidation
 		// is running because subsequent invalidations may make earlier ones outdated,
 		// but batch multiple synchronous invalidations.
-		pending_invalidate = pending_invalidate || Promise.resolve();
-		await pending_invalidate;
+		await (pending_invalidate ||= Promise.resolve());
 		if (!pending_invalidate) return;
 		pending_invalidate = null;
 
-		const url = new URL(location.href);
-		const intent = get_navigation_intent(url, true);
+		const intent = get_navigation_intent(current.url, true);
+
 		// Clear preload, it might be affected by the invalidation.
 		// Also solves an edge case where a preload is triggered, the navigation for it
 		// was then triggered and is still running while the invalidation kicks in,
@@ -185,7 +265,7 @@ export function create_client(app, target) {
 
 		if (navigation_result) {
 			if (navigation_result.type === 'redirect') {
-				return goto(new URL(navigation_result.location, url).href, {}, 1, nav_token);
+				await goto(new URL(navigation_result.location, current.url).href, {}, 1, nav_token);
 			} else {
 				if (navigation_result.props.page !== undefined) {
 					page = navigation_result.props.page;
@@ -193,6 +273,8 @@ export function create_client(app, target) {
 				root.$set(navigation_result.props);
 			}
 		}
+
+		invalidated.length = 0;
 	}
 
 	/** @param {number} index */
@@ -213,49 +295,31 @@ export function create_client(app, target) {
 		update_scroll_positions(current_history_index);
 		storage.set(SCROLL_KEY, scroll_positions);
 
-		capture_snapshot(current_history_index);
+		capture_snapshot(current_navigation_index);
 		storage.set(SNAPSHOT_KEY, snapshots);
+		storage.set(STATES_KEY, states, devalue.stringify);
 	}
 
 	/**
 	 * @param {string | URL} url
-	 * @param {{ noScroll?: boolean; replaceState?: boolean; keepFocus?: boolean; state?: any; invalidateAll?: boolean }} opts
+	 * @param {{ replaceState?: boolean; noScroll?: boolean; keepFocus?: boolean; invalidateAll?: boolean; }} options
 	 * @param {number} redirect_count
 	 * @param {{}} [nav_token]
 	 */
-	async function goto(
-		url,
-		{
-			noScroll = false,
-			replaceState = false,
-			keepFocus = false,
-			state = {},
-			invalidateAll = false
-		},
-		redirect_count,
-		nav_token
-	) {
-		if (typeof url === 'string') {
-			url = new URL(url, get_base_uri(document));
-		}
-
+	async function goto(url, options, redirect_count, nav_token) {
 		return navigate({
-			url,
-			scroll: noScroll ? scroll_state() : null,
-			keepfocus: keepFocus,
+			type: 'goto',
+			url: resolve_url(url),
+			keepfocus: options.keepFocus,
+			noscroll: options.noScroll,
+			replace_state: options.replaceState,
 			redirect_count,
-			details: {
-				state,
-				replaceState
-			},
 			nav_token,
-			accepted: () => {
-				if (invalidateAll) {
+			accept: () => {
+				if (options.invalidateAll) {
 					force_invalidation = true;
 				}
-			},
-			blocked: () => {},
-			type: 'goto'
+			}
 		});
 	}
 
@@ -275,19 +339,13 @@ export function create_client(app, target) {
 		return load_cache.promise;
 	}
 
-	/** @param {...string} pathnames */
-	async function preload_code(...pathnames) {
-		if (DEV && pathnames.length > 1) {
-			console.warn('Calling `preloadCode` with multiple arguments is deprecated');
-		}
-
-		const matching = routes.filter((route) => pathnames.some((pathname) => route.exec(pathname)));
-
-		const promises = matching.map((r) => {
-			return Promise.all([...r.layouts, r.leaf].map((load) => load?.[1]()));
-		});
+	/** @param {string} pathname */
+	async function preload_code(pathname) {
+		const route = routes.find((route) => route.exec(get_url_path(pathname)));
 
-		await Promise.all(promises);
+		if (route) {
+			await Promise.all([...route.layouts, route.leaf].map((load) => load?.[1]()));
+		}
 	}
 
 	/** @param {import('./types.js').NavigationFinished} result */
@@ -307,7 +365,7 @@ export function create_client(app, target) {
 			hydrate: true
 		});
 
-		restore_snapshot(current_history_index);
+		restore_snapshot(current_navigation_index);
 
 		/** @type {import('@sveltejs/kit').AfterNavigate} */
 		const navigation = {
@@ -368,7 +426,8 @@ export function create_client(app, target) {
 			},
 			props: {
 				// @ts-ignore Somehow it's getting SvelteComponent and SvelteComponentDev mixed up
-				constructors: compact(branch).map((branch_node) => branch_node.node.component)
+				constructors: compact(branch).map((branch_node) => branch_node.node.component),
+				page
 			}
 		};
 
@@ -412,6 +471,7 @@ export function create_client(app, target) {
 				route: {
 					id: route?.id ?? null
 				},
+				state: {},
 				status,
 				url: new URL(url),
 				form: form ?? null,
@@ -441,13 +501,16 @@ export function create_client(app, target) {
 		/** @type {Record<string, any> | null} */
 		let data = null;
 
+		let is_tracking = true;
+
 		/** @type {import('types').Uses} */
 		const uses = {
 			dependencies: new Set(),
 			params: new Set(),
 			parent: false,
 			route: false,
-			url: false
+			url: false,
+			search_params: new Set()
 		};
 
 		const node = await loader();
@@ -471,20 +534,34 @@ export function create_client(app, target) {
 			const load_input = {
 				route: new Proxy(route, {
 					get: (target, key) => {
-						uses.route = true;
+						if (is_tracking) {
+							uses.route = true;
+						}
 						return target[/** @type {'id'} */ (key)];
 					}
 				}),
 				params: new Proxy(params, {
 					get: (target, key) => {
-						uses.params.add(/** @type {string} */ (key));
+						if (is_tracking) {
+							uses.params.add(/** @type {string} */ (key));
+						}
 						return target[/** @type {string} */ (key)];
 					}
 				}),
 				data: server_data_node?.data ?? null,
-				url: make_trackable(url, () => {
-					uses.url = true;
-				}),
+				url: make_trackable(
+					url,
+					() => {
+						if (is_tracking) {
+							uses.url = true;
+						}
+					},
+					(param) => {
+						if (is_tracking) {
+							uses.search_params.add(param);
+						}
+					}
+				),
 				async fetch(resource, init) {
 					/** @type {URL | string} */
 					let requested;
@@ -520,7 +597,9 @@ export function create_client(app, target) {
 
 					// we must fixup relative urls so they are resolved from the target page
 					const resolved = new URL(requested, url);
-					depends(resolved.href);
+					if (is_tracking) {
+						depends(resolved.href);
+					}
 
 					// match ssr serialized data url, which is important to find cached responses
 					if (resolved.origin === url.origin) {
@@ -535,8 +614,18 @@ export function create_client(app, target) {
 				setHeaders: () => {}, // noop
 				depends,
 				parent() {
-					uses.parent = true;
+					if (is_tracking) {
+						uses.parent = true;
+					}
 					return parent();
+				},
+				untrack(fn) {
+					is_tracking = false;
+					try {
+						return fn();
+					} finally {
+						is_tracking = true;
+					}
 				}
 			};
 
@@ -550,10 +639,10 @@ export function create_client(app, target) {
 								typeof data !== 'object'
 									? `a ${typeof data}`
 									: data instanceof Response
-									  ? 'a Response object'
-									  : Array.isArray(data)
-									    ? 'an array'
-									    : 'a non-plain object'
+										? 'a Response object'
+										: Array.isArray(data)
+											? 'an array'
+											: 'a non-plain object'
 							}, but must return a plain object at the top level (i.e. \`return {...}\`)`
 						);
 					}
@@ -563,7 +652,6 @@ export function create_client(app, target) {
 			} else {
 				data = (await node.universal.load.call(null, load_input)) ?? null;
 			}
-			data = data ? await unwrap_promises(data, route.id) : null;
 		}
 
 		return {
@@ -585,10 +673,18 @@ export function create_client(app, target) {
 	 * @param {boolean} parent_changed
 	 * @param {boolean} route_changed
 	 * @param {boolean} url_changed
+	 * @param {Set<string>} search_params_changed
 	 * @param {import('types').Uses | undefined} uses
 	 * @param {Record<string, string>} params
 	 */
-	function has_changed(parent_changed, route_changed, url_changed, uses, params) {
+	function has_changed(
+		parent_changed,
+		route_changed,
+		url_changed,
+		search_params_changed,
+		uses,
+		params
+	) {
 		if (force_invalidation) return true;
 
 		if (!uses) return false;
@@ -597,6 +693,10 @@ export function create_client(app, target) {
 		if (uses.route && route_changed) return true;
 		if (uses.url && url_changed) return true;
 
+		for (const tracked_params of uses.search_params) {
+			if (search_params_changed.has(tracked_params)) return true;
+		}
+
 		for (const param of uses.params) {
 			if (params[param] !== current.params[param]) return true;
 		}
@@ -619,6 +719,31 @@ export function create_client(app, target) {
 		return null;
 	}
 
+	/**
+	 *
+	 * @param {URL | null} old_url
+	 * @param {URL} new_url
+	 */
+	function diff_search_params(old_url, new_url) {
+		if (!old_url) return new Set(new_url.searchParams.keys());
+
+		const changed = new Set([...old_url.searchParams.keys(), ...new_url.searchParams.keys()]);
+
+		for (const key of changed) {
+			const old_values = old_url.searchParams.getAll(key);
+			const new_values = new_url.searchParams.getAll(key);
+
+			if (
+				old_values.every((value) => new_values.includes(value)) &&
+				new_values.every((value) => old_values.includes(value))
+			) {
+				changed.delete(key);
+			}
+		}
+
+		return changed;
+	}
+
 	/**
 	 * @param {import('./types.js').NavigationIntent} intent
 	 * @returns {Promise<import('./types.js').NavigationResult>}
@@ -640,9 +765,9 @@ export function create_client(app, target) {
 
 		/** @type {import('types').ServerNodesResponse | import('types').ServerRedirectNode | null} */
 		let server_data = null;
-
 		const url_changed = current.url ? id !== current.url.pathname + current.url.search : false;
 		const route_changed = current.route ? route.id !== current.route.id : false;
+		const search_params_changed = diff_search_params(current.url, url);
 
 		let parent_invalid = false;
 		const invalid_server_nodes = loaders.map((loader, i) => {
@@ -651,7 +776,14 @@ export function create_client(app, target) {
 			const invalid =
 				!!loader?.[0] &&
 				(previous?.loader !== loader[1] ||
-					has_changed(parent_invalid, route_changed, url_changed, previous.server?.uses, params));
+					has_changed(
+						parent_invalid,
+						route_changed,
+						url_changed,
+						search_params_changed,
+						previous.server?.uses,
+						params
+					));
 
 			if (invalid) {
 				// For the next one
@@ -666,7 +798,7 @@ export function create_client(app, target) {
 				server_data = await load_data(url, invalid_server_nodes);
 			} catch (error) {
 				return load_root_error_page({
-					status: error instanceof HttpError ? error.status : 500,
+					status: get_status(error),
 					error: await handle_error(error, { url, params, route: { id: route.id } }),
 					url,
 					route
@@ -694,7 +826,14 @@ export function create_client(app, target) {
 			const valid =
 				(!server_data_node || server_data_node.type === 'skip') &&
 				loader[1] === previous?.loader &&
-				!has_changed(parent_changed, route_changed, url_changed, previous.universal?.uses, params);
+				!has_changed(
+					parent_changed,
+					route_changed,
+					url_changed,
+					search_params_changed,
+					previous.universal?.uses,
+					params
+				);
 			if (valid) return previous;
 
 			parent_changed = true;
@@ -743,7 +882,7 @@ export function create_client(app, target) {
 						};
 					}
 
-					let status = 500;
+					let status = get_status(err);
 					/** @type {App.Error} */
 					let error;
 
@@ -753,7 +892,6 @@ export function create_client(app, target) {
 						status = /** @type {import('types').ServerErrorNode} */ (err).status ?? status;
 						error = /** @type {import('types').ServerErrorNode} */ (err).error;
 					} else if (err instanceof HttpError) {
-						status = err.status;
 						error = err.body;
 					} else {
 						// Referenced node could have been removed due to redeploy, check
@@ -905,7 +1043,7 @@ export function create_client(app, target) {
 	function get_navigation_intent(url, invalidating) {
 		if (is_external_url(url, base)) return;
 
-		const path = get_url_path(url);
+		const path = get_url_path(url.pathname);
 
 		for (const route of routes) {
 			const params = route.exec(path);
@@ -919,9 +1057,9 @@ export function create_client(app, target) {
 		}
 	}
 
-	/** @param {URL} url */
-	function get_url_path(url) {
-		return decode_pathname(url.pathname.slice(base.length) || '/');
+	/** @param {string} pathname */
+	function get_url_path(pathname) {
+		return decode_pathname(pathname.slice(base.length) || '/');
 	}
 
 	/**
@@ -959,45 +1097,47 @@ export function create_client(app, target) {
 
 	/**
 	 * @param {{
-	 *   url: URL;
-	 *   scroll: { x: number, y: number } | null;
-	 *   keepfocus: boolean;
-	 *   redirect_count: number;
-	 *   details: {
-	 *     replaceState: boolean;
-	 *     state: any;
-	 *   } | null;
 	 *   type: import('@sveltejs/kit').Navigation["type"];
-	 *   delta?: number;
+	 *   url: URL;
+	 *   popped?: {
+	 *     state: Record<string, any>;
+	 *     scroll: { x: number, y: number };
+	 *     delta: number;
+	 *   };
+	 *   keepfocus?: boolean;
+	 *   noscroll?: boolean;
+	 *   replace_state?: boolean;
+	 *   redirect_count?: number;
 	 *   nav_token?: {};
-	 *   accepted: () => void;
-	 *   blocked: () => void;
+	 *   accept?: () => void;
+	 *   block?: () => void;
 	 * }} opts
 	 */
 	async function navigate({
+		type,
 		url,
-		scroll,
+		popped,
 		keepfocus,
-		redirect_count,
-		details,
-		type,
-		delta,
+		noscroll,
+		replace_state,
+		redirect_count = 0,
 		nav_token = {},
-		accepted,
-		blocked
+		accept = noop,
+		block = noop
 	}) {
 		const intent = get_navigation_intent(url, false);
-		const nav = before_navigate({ url, type, delta, intent });
+		const nav = before_navigate({ url, type, delta: popped?.delta, intent });
 
 		if (!nav) {
-			blocked();
+			block();
 			return;
 		}
 
-		// store this before calling `accepted()`, which may change the index
+		// store this before calling `accept()`, which may change the index
 		const previous_history_index = current_history_index;
+		const previous_navigation_index = current_navigation_index;
 
-		accepted();
+		accept();
 
 		navigating = true;
 
@@ -1015,7 +1155,7 @@ export function create_client(app, target) {
 			navigation_result = await server_fallback(
 				url,
 				{ id: null },
-				await handle_error(new Error(`Not found: ${url.pathname}`), {
+				await handle_error(new SvelteKitError(404, 'Not Found', `Not found: ${url.pathname}`), {
 					url,
 					params: {},
 					route: { id: null }
@@ -1051,7 +1191,7 @@ export function create_client(app, target) {
 				goto(new URL(navigation_result.location, url).href, {}, redirect_count + 1, nav_token);
 				return false;
 			}
-		} else if (/** @type {number} */ (navigation_result.props.page?.status) >= 400) {
+		} else if (/** @type {number} */ (navigation_result.props.page.status) >= 400) {
 			const updated = await stores.updated.check();
 			if (updated) {
 				await native_navigation(url);
@@ -1066,36 +1206,39 @@ export function create_client(app, target) {
 		updating = true;
 
 		update_scroll_positions(previous_history_index);
-		capture_snapshot(previous_history_index);
+		capture_snapshot(previous_navigation_index);
 
 		// ensure the url pathname matches the page's trailing slash option
-		if (
-			navigation_result.props.page?.url &&
-			navigation_result.props.page.url.pathname !== url.pathname
-		) {
-			url.pathname = navigation_result.props.page?.url.pathname;
+		if (navigation_result.props.page.url.pathname !== url.pathname) {
+			url.pathname = navigation_result.props.page.url.pathname;
 		}
 
-		if (details) {
-			const change = details.replaceState ? 0 : 1;
-			details.state[INDEX_KEY] = current_history_index += change;
-			history[details.replaceState ? 'replaceState' : 'pushState'](details.state, '', url);
-
-			if (!details.replaceState) {
-				// if we navigated back, then pushed a new state, we can
-				// release memory by pruning the scroll/snapshot lookup
-				let i = current_history_index + 1;
-				while (snapshots[i] || scroll_positions[i]) {
-					delete snapshots[i];
-					delete scroll_positions[i];
-					i += 1;
-				}
+		const state = popped ? popped.state : {};
+
+		if (!popped) {
+			// this is a new navigation, rather than a popstate
+			const change = replace_state ? 0 : 1;
+
+			const entry = {
+				[HISTORY_INDEX]: (current_history_index += change),
+				[NAVIGATION_INDEX]: (current_navigation_index += change)
+			};
+
+			const fn = replace_state ? original_replace_state : original_push_state;
+			fn.call(history, entry, '', url);
+
+			if (!replace_state) {
+				clear_onward_history(current_history_index, current_navigation_index);
 			}
 		}
 
+		states[current_history_index] = state;
+
 		// reset preload synchronously after the history state has been set to avoid race conditions
 		load_cache = null;
 
+		navigation_result.props.page.state = state;
+
 		if (started) {
 			current = navigation_result.state;
 
@@ -1127,6 +1270,7 @@ export function create_client(app, target) {
 			}
 
 			root.$set(navigation_result.props);
+			has_navigated = true;
 		} else {
 			initialize(navigation_result);
 		}
@@ -1137,6 +1281,8 @@ export function create_client(app, target) {
 		await tick();
 
 		// we reset scroll before dealing with focus, to avoid a flash of unscrolled content
+		const scroll = popped ? popped.scroll : noscroll ? scroll_state() : null;
+
 		if (autoscroll) {
 			const deep_linked =
 				url.hash && document.getElementById(decodeURIComponent(url.hash.slice(1)));
@@ -1172,7 +1318,7 @@ export function create_client(app, target) {
 		navigating = false;
 
 		if (type === 'popstate') {
-			restore_snapshot(current_history_index);
+			restore_snapshot(current_navigation_index);
 		}
 
 		nav.fulfil(undefined);
@@ -1247,9 +1393,7 @@ export function create_client(app, target) {
 			(entries) => {
 				for (const entry of entries) {
 					if (entry.isIntersecting) {
-						preload_code(
-							get_url_path(new URL(/** @type {HTMLAnchorElement} */ (entry.target).href))
-						);
+						preload_code(/** @type {HTMLAnchorElement} */ (entry.target).href);
 						observer.unobserve(entry.target);
 					}
 				}
@@ -1290,7 +1434,7 @@ export function create_client(app, target) {
 						}
 					}
 				} else if (priority <= options.preload_code) {
-					preload_code(get_url_path(/** @type {URL} */ (url)));
+					preload_code(/** @type {URL} */ (url).pathname);
 				}
 			}
 		}
@@ -1310,7 +1454,7 @@ export function create_client(app, target) {
 				}
 
 				if (options.preload_code === PRELOAD_PRIORITIES.eager) {
-					preload_code(get_url_path(/** @type {URL} */ (url)));
+					preload_code(/** @type {URL} */ (url).pathname);
 				}
 			}
 		}
@@ -1334,12 +1478,11 @@ export function create_client(app, target) {
 			console.warn('The next HMR update will cause the page to reload');
 		}
 
+		const status = get_status(error);
+		const message = get_message(error);
+
 		return (
-			app.hooks.handleError({ error, event }) ??
-			/** @type {any} */ ({
-				message:
-					event.route.id === null && error instanceof NotFound ? 'Not Found' : 'Internal Error'
-			})
+			app.hooks.handleError({ error, event, status, message }) ?? /** @type {any} */ ({ message })
 		);
 	}
 
@@ -1387,8 +1530,28 @@ export function create_client(app, target) {
 			}
 		},
 
-		goto: (href, opts = {}) => {
-			return goto(href, opts, 0);
+		goto: (url, opts = {}) => {
+			url = resolve_url(url);
+
+			// @ts-expect-error
+			if (DEV && opts.state) {
+				// TOOD 3.0 remove
+				throw new Error(
+					'Passing `state` to `goto` is no longer supported. Use `pushState` and `replaceState` from `$app/navigation` instead.'
+				);
+			}
+
+			if (url.origin !== origin) {
+				return Promise.reject(
+					new Error(
+						DEV
+							? `Cannot use \`goto\` with an external URL. Use \`window.location = "${url}"\` instead`
+							: 'goto: invalid URL'
+					)
+				);
+			}
+
+			return goto(url, opts, 0);
 		},
 
 		invalidate: (resource) => {
@@ -1408,17 +1571,89 @@ export function create_client(app, target) {
 		},
 
 		preload_data: async (href) => {
-			const url = new URL(href, get_base_uri(document));
+			const url = resolve_url(href);
 			const intent = get_navigation_intent(url, false);
 
 			if (!intent) {
 				throw new Error(`Attempted to preload a URL that does not belong to this app: ${url}`);
 			}
 
-			await preload_data(intent);
+			const result = await preload_data(intent);
+			if (result.type === 'redirect') {
+				return {
+					type: result.type,
+					location: result.location
+				};
+			}
+
+			const { status, data } = result.props.page ?? page;
+			return { type: result.type, status, data };
 		},
 
-		preload_code,
+		preload_code: (pathname) => {
+			if (DEV) {
+				if (!pathname.startsWith(base)) {
+					throw new Error(
+						`pathnames passed to preloadCode must start with \`paths.base\` (i.e. "${base}${pathname}" rather than "${pathname}")`
+					);
+				}
+
+				if (!routes.find((route) => route.exec(get_url_path(pathname)))) {
+					throw new Error(`'${pathname}' did not match any routes`);
+				}
+			}
+
+			return preload_code(pathname);
+		},
+
+		push_state: (url, state) => {
+			if (DEV) {
+				try {
+					devalue.stringify(state);
+				} catch (error) {
+					// @ts-expect-error
+					throw new Error(`Could not serialize state${error.path}`);
+				}
+			}
+
+			const opts = {
+				[HISTORY_INDEX]: (current_history_index += 1),
+				[NAVIGATION_INDEX]: current_navigation_index,
+				[PAGE_URL_KEY]: page.url.href
+			};
+
+			original_push_state.call(history, opts, '', resolve_url(url));
+
+			page = { ...page, state };
+			root.$set({ page });
+
+			states[current_history_index] = state;
+			clear_onward_history(current_history_index, current_navigation_index);
+		},
+
+		replace_state: (url, state) => {
+			if (DEV) {
+				try {
+					devalue.stringify(state);
+				} catch (error) {
+					// @ts-expect-error
+					throw new Error(`Could not serialize state${error.path}`);
+				}
+			}
+
+			const opts = {
+				[HISTORY_INDEX]: current_history_index,
+				[NAVIGATION_INDEX]: current_navigation_index,
+				[PAGE_URL_KEY]: page.url.href
+			};
+
+			original_replace_state.call(history, opts, '', resolve_url(url));
+
+			page = { ...page, state };
+			root.$set({ page });
+
+			states[current_history_index] = state;
+		},
 
 		apply_action: async (result) => {
 			if (result.type === 'error') {
@@ -1575,7 +1810,7 @@ export function create_client(app, target) {
 				// This will ensure the `hashchange` event is fired
 				// Removing the hash does a full page navigation in the browser, so make sure a hash is present
 				const [nonhash, hash] = url.href.split('#');
-				if (hash !== undefined && nonhash === location.href.split('#')[0]) {
+				if (hash !== undefined && nonhash === strip_hash(location)) {
 					// If we are trying to navigate to the same hash, we should only
 					// attempt to scroll to that element and avoid any history changes.
 					// Otherwise, this can cause Firefox to incorrectly assign a null
@@ -1597,21 +1832,16 @@ export function create_client(app, target) {
 
 					// hashchange event shouldn't occur if the router is replacing state.
 					hash_navigating = false;
-					event.preventDefault();
 				}
 
+				event.preventDefault();
+
 				navigate({
+					type: 'link',
 					url,
-					scroll: options.noscroll ? scroll_state() : null,
-					keepfocus: options.keep_focus ?? false,
-					redirect_count: 0,
-					details: {
-						state: {},
-						replaceState: options.replace_state ?? url.href === location.href
-					},
-					accepted: () => event.preventDefault(),
-					blocked: () => event.preventDefault(),
-					type: 'link'
+					keepfocus: options.keepfocus,
+					noscroll: options.noscroll,
+					replace_state: options.replace_state ?? url.href === location.href
 				});
 			});
 
@@ -1638,8 +1868,8 @@ export function create_client(app, target) {
 
 				const event_form = /** @type {HTMLFormElement} */ (event.target);
 
-				const { keep_focus, noscroll, reload, replace_state } = get_router_options(event_form);
-				if (reload) return;
+				const options = get_router_options(event_form);
+				if (options.reload) return;
 
 				event.preventDefault();
 				event.stopPropagation();
@@ -1655,57 +1885,67 @@ export function create_client(app, target) {
 				url.search = new URLSearchParams(data).toString();
 
 				navigate({
+					type: 'form',
 					url,
-					scroll: noscroll ? scroll_state() : null,
-					keepfocus: keep_focus ?? false,
-					redirect_count: 0,
-					details: {
-						state: {},
-						replaceState: replace_state ?? url.href === location.href
-					},
-					nav_token: {},
-					accepted: () => {},
-					blocked: () => {},
-					type: 'form'
+					keepfocus: options.keepfocus,
+					noscroll: options.noscroll,
+					replace_state: options.replace_state ?? url.href === location.href
 				});
 			});
 
 			addEventListener('popstate', async (event) => {
-				token = {};
-				if (event.state?.[INDEX_KEY]) {
+				if (event.state?.[HISTORY_INDEX]) {
+					const history_index = event.state[HISTORY_INDEX];
+					token = {};
+
 					// if a popstate-driven navigation is cancelled, we need to counteract it
 					// with history.go, which means we end up back here, hence this check
-					if (event.state[INDEX_KEY] === current_history_index) return;
-
-					const scroll = scroll_positions[event.state[INDEX_KEY]];
-					const url = new URL(location.href);
-
-					// if the only change is the hash, we don't need to do anything (see https://github.com/sveltejs/kit/pull/10636 for why we need to do `url?.`)...
-					if (current.url?.href.split('#')[0] === location.href.split('#')[0]) {
-						// ...except update our internal URL tracking and handle scroll
+					if (history_index === current_history_index) return;
+
+					const scroll = scroll_positions[history_index];
+					const state = states[history_index] ?? {};
+					const url = new URL(event.state[PAGE_URL_KEY] ?? location.href);
+					const navigation_index = event.state[NAVIGATION_INDEX];
+					const is_hash_change = strip_hash(location) === strip_hash(current.url);
+					const shallow =
+						navigation_index === current_navigation_index && (has_navigated || is_hash_change);
+
+					if (shallow) {
+						// We don't need to navigate, we just need to update scroll and/or state.
+						// This happens with hash links and `pushState`/`replaceState`. The
+						// exception is if we haven't navigated yet, since we could have
+						// got here after a modal navigation then a reload
 						update_url(url);
+
 						scroll_positions[current_history_index] = scroll_state();
-						current_history_index = event.state[INDEX_KEY];
-						scrollTo(scroll.x, scroll.y);
+						if (scroll) scrollTo(scroll.x, scroll.y);
+
+						if (state !== page.state) {
+							page = { ...page, state };
+							root.$set({ page });
+						}
+
+						current_history_index = history_index;
 						return;
 					}
 
-					const delta = event.state[INDEX_KEY] - current_history_index;
+					const delta = history_index - current_history_index;
 
 					await navigate({
+						type: 'popstate',
 						url,
-						scroll,
-						keepfocus: false,
-						redirect_count: 0,
-						details: null,
-						accepted: () => {
-							current_history_index = event.state[INDEX_KEY];
+						popped: {
+							state,
+							scroll,
+							delta
+						},
+						accept: () => {
+							current_history_index = history_index;
+							current_navigation_index = navigation_index;
 						},
-						blocked: () => {
+						block: () => {
 							history.go(-delta);
 						},
-						type: 'popstate',
-						delta,
 						nav_token: token
 					});
 				} else {
@@ -1724,8 +1964,13 @@ export function create_client(app, target) {
 				// we need to update history, otherwise we have to leave it alone
 				if (hash_navigating) {
 					hash_navigating = false;
-					history.replaceState(
-						{ ...history.state, [INDEX_KEY]: ++current_history_index },
+					original_replace_state.call(
+						history,
+						{
+							...history.state,
+							[HISTORY_INDEX]: ++current_history_index,
+							[NAVIGATION_INDEX]: current_navigation_index
+						},
 						'',
 						location.href
 					);
@@ -1839,13 +2084,17 @@ export function create_client(app, target) {
 				}
 
 				result = await load_root_error_page({
-					status: error instanceof HttpError ? error.status : 500,
+					status: get_status(error),
 					error: await handle_error(error, { url, params, route }),
 					url,
 					route
 				});
 			}
 
+			if (result.props.page) {
+				result.props.page.state = {};
+			}
+
 			initialize(result);
 		}
 	};
@@ -1966,7 +2215,8 @@ function deserialize_uses(uses) {
 		params: new Set(uses?.params ?? []),
 		parent: !!uses?.parent,
 		route: !!uses?.route,
-		url: !!uses?.url
+		url: !!uses?.url,
+		search_params: new Set(uses?.search_params ?? [])
 	};
 }