@sveltejs/kit 3.0.0-next.24 → 3.0.0-next.27

package/src/runtime/client/client.js

@@ -13,6 +13,8 @@ import { decode_pathname, strip_hash, make_trackable, normalize_path } from '../
 import { dev_fetch, initial_fetch, lock_fetch, subsequent_fetch, unlock_fetch } from './fetcher.js';
 import { parse_routes, parse_server_route } from './parse.js';
 import * as storage from './session-storage.js';
+import { blur_active_element, is_resetting_focus, reset_focus } from './focus.js';
+import { disable_scroll_handling, reset_scroll_and_focus } from './scroll.js';
 import {
 	find_anchor,
 	resolve_url,
@@ -47,7 +49,8 @@ import {
 	TRAILING_SLASH_PARAM,
 	create_remote_key,
 	validate_depends,
-	validate_load_response
+	validate_load_response,
+	fetch_cache_url
 } from '../shared.js';
 
 import { page, updated, notify_version, update_page, set_navigation } from '#app/state/client';
@@ -170,47 +173,6 @@ function set_history_options(index, options) {
 	};
 }
 
-/** @param {boolean} reset */
-function blur_active_element(reset) {
-	if (
-		reset &&
-		document.activeElement instanceof HTMLElement &&
-		document.activeElement !== document.body
-	) {
-		document.activeElement.blur();
-	}
-}
-
-/**
- * @param {URL} url
- * @param {{ x: number; y: number } | null | undefined} scroll
- * @param {boolean} reset
- * @param {Element | null} active_element
- */
-function reset_scroll_and_focus(url, scroll, reset, active_element) {
-	/** @type {Element | null} */
-	let deep_linked = null;
-
-	if (autoscroll) {
-		if (scroll) {
-			scrollTo(scroll.x, scroll.y);
-		} else if ((deep_linked = get_hash_element(url))) {
-			deep_linked.scrollIntoView();
-		} else {
-			scrollTo(0, 0);
-		}
-	}
-
-	const changed_focus =
-		document.activeElement !== active_element && document.activeElement !== document.body;
-
-	if (reset && !changed_focus) {
-		reset_focus(url, !deep_linked);
-	}
-
-	autoscroll = true;
-}
-
 /**
  * @param {number} current_history_index
  * @param {number} current_navigation_index
@@ -372,7 +334,6 @@ let current = {
 /** this being true means we SSR'd */
 let hydrated = false;
 let started = false;
-let autoscroll = true;
 let updating = false;
 let is_navigating = false;
 /** @type {HistoryMetadata | null} */
@@ -615,7 +576,7 @@ async function _invalidate(reset_page_state = true) {
 
 	const token = (invalidation_token = {});
 	const nav_token = navigation_token;
-	const navigating = is_navigating;
+	const prev_current = current;
 	const intent = await get_navigation_intent(current.url, true);
 
 	// Clear preload, it might be affected by the invalidation.
@@ -655,9 +616,9 @@ async function _invalidate(reset_page_state = true) {
 		);
 	}
 
-	// A navigation started before the invalidation and ended before it finished. The invalidation did not redirect,
-	// hence it likely contains outdated data now, so we ignore it.
-	if (navigating && !is_navigating) {
+	// a navigation applied its result while the invalidation was loading,
+	// so the invalidation contains outdated data for a page we are no longer on
+	if (current !== prev_current) {
 		return;
 	}
 
@@ -1309,10 +1270,7 @@ function resolve_fetch_url(input, init, url) {
 	// we must fixup relative urls so they are resolved from the target page
 	const resolved = new URL(input instanceof Request ? input.url : input, url);
 
-	// match the server's serialization of `fetched.url` (see load_data.js): a path for same-origin
-	// urls, so prerendered pages can be served from any origin, the normalized href otherwise
-	const requested =
-		resolved.origin === url.origin ? resolved.href.slice(url.origin.length) : resolved.href;
+	const requested = fetch_cache_url(resolved, url);
 
 	const promise = started
 		? subsequent_fetch(requested, resolved.href, init)
@@ -2072,6 +2030,9 @@ async function navigate({
 	if (navigation_result.type === 'redirect') {
 		// whatwg fetch spec https://fetch.spec.whatwg.org/#http-redirect-fetch says to error after 20 redirects
 		if (redirect_count < 20) {
+			// a preloaded redirect has been consumed; a later hop back to this route must load afresh
+			if (load_cache?.id === intent?.id) discard_load_cache();
+
 			await navigate({
 				type,
 				url: new URL(navigation_result.location, url),
@@ -2113,12 +2074,15 @@ async function navigate({
 
 	updating = true;
 
-	capture_scroll(previous_history_index);
-	capture_snapshot(previous_navigation_index);
-	if (replace_state) {
-		delete_navigation_snapshot(previous_history_index);
-	} else {
-		capture_navigation_snapshot(previous_history_index);
+	if (!popped) {
+		// popstate captures the source entry synchronously, before the traversal is resolved
+		capture_scroll(previous_history_index);
+		capture_snapshot(previous_navigation_index);
+		if (replace_state) {
+			delete_navigation_snapshot(previous_history_index);
+		} else {
+			capture_navigation_snapshot(previous_history_index);
+		}
 	}
 
 	// ensure the url pathname matches the page's trailing slash option
@@ -2617,7 +2581,7 @@ export function disableScrollHandling() {
 	}
 
 	if (updating || !started) {
-		autoscroll = false;
+		disable_scroll_handling();
 	}
 }
 
@@ -3374,7 +3338,7 @@ function _start_router() {
 	});
 
 	addEventListener('popstate', async (event) => {
-		if (resetting_focus) return;
+		if (is_resetting_focus()) return;
 
 		const history_metadata = get_history_metadata(event.state);
 
@@ -3404,9 +3368,25 @@ function _start_router() {
 					(history_metadata.pageUrl === undefined || history_metadata.pageUrl === location.href)) ||
 					is_hash_change);
 			const shallow_url = history_metadata.pageUrl ? new URL(location.href) : null;
+
+			// the browser has already traversed, so record the source entry and move the
+			// indices before anything async: a navigation that starts while this one
+			// resolves must build on the entry we are actually on
+			const previous_history_index = current_history_index;
+			const previous_navigation_index = current_navigation_index;
+			const previous_reset_index = current_reset_index;
+			capture_scroll(previous_history_index);
+			if (!shallow) capture_snapshot(previous_navigation_index);
+			capture_navigation_snapshot(previous_history_index);
+			current_history_index = history_index;
+			current_navigation_index = navigation_index;
+			current_reset_index = reset_index;
+
+			const token = navigation_token;
 			const shallow_intent = shallow_url
 				? await get_navigation_intent(shallow_url, false)
 				: undefined;
+			if (navigation_token !== token) return;
 			const shallow_target = shallow_url
 				? {
 						params: shallow_intent?.params ?? null,
@@ -3430,10 +3410,6 @@ function _start_router() {
 
 				update_url(url);
 
-				capture_scroll(current_history_index);
-				capture_navigation_snapshot(current_history_index);
-				current_history_index = history_index;
-				current_reset_index = reset_index;
 				if (reset && scroll) scrollTo(scroll.x, scroll.y);
 				restore_navigation_snapshot(current_history_index, current_registrations());
 				return;
@@ -3449,15 +3425,13 @@ function _start_router() {
 					delta,
 					shallow: shallow_target
 				},
-				accept: () => {
-					current_history_index = history_index;
-					current_navigation_index = navigation_index;
-					current_reset_index = reset_index;
-				},
 				block: () => {
+					current_history_index = previous_history_index;
+					current_navigation_index = previous_navigation_index;
+					current_reset_index = previous_reset_index;
 					history.go(-delta);
 				},
-				nav_token: navigation_token,
+				nav_token: token,
 				event
 			});
 		} else {
@@ -3763,109 +3737,6 @@ function deserialize_uses(uses) {
 	};
 }
 
-/**
- * This flag is used to avoid client-side navigation when we're only using
- * `location.replace()` to set focus.
- */
-let resetting_focus = false;
-
-/**
- * @param {URL} url
- * @param {boolean} [scroll]
- */
-function reset_focus(url, scroll = true) {
-	const autofocus = document.querySelector('[autofocus]');
-	if (autofocus) {
-		// @ts-ignore
-		autofocus.focus();
-	} else {
-		// Reset page selection and focus
-
-		// Mimic the browsers' behaviour and set the sequential focus navigation
-		// starting point to the fragment identifier.
-		const element = get_hash_element(url);
-		if (element) {
-			const { x, y } = scroll_state();
-
-			// `element.focus()` doesn't work on Safari and Firefox Ubuntu so we need
-			// to use this hack with `location.replace()` instead.
-			setTimeout(() => {
-				const history_state = history.state;
-
-				resetting_focus = true;
-				location.replace(new URL(`#${element.id}`, location.href));
-
-				// Firefox has a bug that sets the history state to `null` so we need to
-				// restore it after. See https://bugzilla.mozilla.org/show_bug.cgi?id=1199924
-				// This is also needed to restore the original hash if we're using hash routing
-				history.replaceState(history_state, '', url);
-
-				// If scroll management has already happened earlier, we need to restore
-				// the scroll position after setting the sequential focus navigation starting point
-				if (scroll) scrollTo(x, y);
-				resetting_focus = false;
-			});
-		} else {
-			// If the ID doesn't exist, we try to mimic browsers' behaviour as closely
-			// as possible by targeting the first scrollable region. Unfortunately, it's
-			// not a perfect match — e.g. shift-tabbing won't immediately cycle up from
-			// the end of the page on Chromium
-			// See https://html.spec.whatwg.org/multipage/interaction.html#get-the-focusable-area
-			const root = document.body;
-			const tabindex = root.getAttribute('tabindex');
-
-			root.tabIndex = -1;
-			root.focus({ preventScroll: true, focusVisible: false });
-
-			// restore `tabindex` as to prevent `root` from stealing input from elements
-			if (tabindex !== null) {
-				root.setAttribute('tabindex', tabindex);
-			} else {
-				root.removeAttribute('tabindex');
-			}
-		}
-
-		// capture current selection, so we can compare the state after
-		// snapshot restoration and afterNavigate callbacks have run
-		const selection = getSelection();
-
-		if (selection && selection.type !== 'None') {
-			/** @type {Range[]} */
-			const ranges = [];
-
-			for (let i = 0; i < selection.rangeCount; i += 1) {
-				ranges.push(selection.getRangeAt(i));
-			}
-
-			setTimeout(() => {
-				if (selection.rangeCount !== ranges.length) return;
-
-				for (let i = 0; i < selection.rangeCount; i += 1) {
-					const a = ranges[i];
-					const b = selection.getRangeAt(i);
-
-					// we need to do a deep comparison rather than just `a !== b` because
-					// Safari behaves differently to other browsers
-					if (
-						a.commonAncestorContainer !== b.commonAncestorContainer ||
-						a.startContainer !== b.startContainer ||
-						a.endContainer !== b.endContainer ||
-						a.startOffset !== b.startOffset ||
-						a.endOffset !== b.endOffset
-					) {
-						return;
-					}
-				}
-
-				// if the selection hasn't changed (as a result of an element being (auto)focused,
-				// or a programmatic selection, we reset everything as part of the navigation)
-				// fixes https://github.com/sveltejs/kit/issues/8439
-				selection.removeAllRanges();
-			});
-		}
-	}
-}
-
 /**
  * @template {NavigationType} T
  * @param {import('./types.js').NavigationState} current
@@ -3939,32 +3810,6 @@ function decode_hash(url) {
 	return new_url;
 }
 
-/**
- * @param {URL} url
- * @returns {string}
- */
-function get_id(url) {
-	let id;
-
-	if (app.hash) {
-		const [, , second] = url.hash.split('#', 3);
-		id = second ?? '';
-	} else {
-		id = url.hash.slice(1);
-	}
-
-	return decodeURIComponent(id);
-}
-
-/**
- * @param {URL} url
- * @returns {Element | null}
- */
-function get_hash_element(url) {
-	const id = get_id(url);
-	return id ? document.getElementById(id) : null;
-}
-
 if (DEV) {
 	// Nasty hack to silence harmless warnings the user can do nothing about
 	const console_warn = console.warn;

package/src/runtime/client/fetcher.js

@@ -1,6 +1,7 @@
 import { DEV } from 'esm-env';
 import { hash_request } from '../../utils/hash.js';
 import { base64_decode } from '../utils.js';
+import { fetch_cache_url } from '../shared.js';
 
 let loading = 0;
 
@@ -152,15 +153,14 @@ export function dev_fetch(resource, opts) {
 }
 
 /**
- * Mirror the url normalization in `resolve_fetch_url`, so that non-GET requests
- * evict the cache entry regardless of how the url is spelled
+ * Non-GET requests must evict under the stored key, however the url is spelled
  * @param {RequestInfo | URL} input
  */
 function requested_url(input) {
-	const resolved = new URL(input instanceof Request ? input.url : input, location.href);
-	return resolved.origin === location.origin
-		? resolved.href.slice(location.origin.length)
-		: resolved.href;
+	return fetch_cache_url(
+		new URL(input instanceof Request ? input.url : input, location.href),
+		location
+	);
 }
 
 /**

package/src/runtime/client/focus.js

@@ -0,0 +1,120 @@
+import { hash_routing } from '$app/paths/internal/client';
+import { get_hash_element, scroll_state } from './utils.js';
+
+/**
+ * This flag is used to avoid client-side navigation when we're only using
+ * `location.replace()` to set focus.
+ */
+let resetting_focus = false;
+
+export function is_resetting_focus() {
+	return resetting_focus;
+}
+
+/** @param {boolean} reset */
+export function blur_active_element(reset) {
+	if (
+		reset &&
+		document.activeElement instanceof HTMLElement &&
+		document.activeElement !== document.body
+	) {
+		document.activeElement.blur();
+	}
+}
+
+/**
+ * @param {URL} url
+ * @param {boolean} [scroll]
+ */
+export function reset_focus(url, scroll = true) {
+	const autofocus = document.querySelector('[autofocus]');
+	if (autofocus) {
+		// @ts-ignore
+		autofocus.focus();
+	} else {
+		// Reset page selection and focus
+
+		// Mimic the browsers' behaviour and set the sequential focus navigation
+		// starting point to the fragment identifier.
+		const element = get_hash_element(url, hash_routing);
+		if (element) {
+			const { x, y } = scroll_state();
+
+			// `element.focus()` doesn't work on Safari and Firefox Ubuntu so we need
+			// to use this hack with `location.replace()` instead.
+			setTimeout(() => {
+				const history_state = history.state;
+
+				resetting_focus = true;
+				location.replace(new URL(`#${element.id}`, location.href));
+
+				// Firefox has a bug that sets the history state to `null` so we need to
+				// restore it after. See https://bugzilla.mozilla.org/show_bug.cgi?id=1199924
+				// This is also needed to restore the original hash if we're using hash routing
+				history.replaceState(history_state, '', url);
+
+				// If scroll management has already happened earlier, we need to restore
+				// the scroll position after setting the sequential focus navigation starting point
+				if (scroll) scrollTo(x, y);
+				resetting_focus = false;
+			});
+		} else {
+			// If the ID doesn't exist, we try to mimic browsers' behaviour as closely
+			// as possible by targeting the first scrollable region. Unfortunately, it's
+			// not a perfect match — e.g. shift-tabbing won't immediately cycle up from
+			// the end of the page on Chromium
+			// See https://html.spec.whatwg.org/multipage/interaction.html#get-the-focusable-area
+			const root = document.body;
+			const tabindex = root.getAttribute('tabindex');
+
+			root.tabIndex = -1;
+			root.focus({ preventScroll: true, focusVisible: false });
+
+			// restore `tabindex` as to prevent `root` from stealing input from elements
+			if (tabindex !== null) {
+				root.setAttribute('tabindex', tabindex);
+			} else {
+				root.removeAttribute('tabindex');
+			}
+		}
+
+		// capture current selection, so we can compare the state after
+		// snapshot restoration and afterNavigate callbacks have run
+		const selection = getSelection();
+
+		if (selection && selection.type !== 'None') {
+			/** @type {Range[]} */
+			const ranges = [];
+
+			for (let i = 0; i < selection.rangeCount; i += 1) {
+				ranges.push(selection.getRangeAt(i));
+			}
+
+			setTimeout(() => {
+				if (selection.rangeCount !== ranges.length) return;
+
+				for (let i = 0; i < selection.rangeCount; i += 1) {
+					const a = ranges[i];
+					const b = selection.getRangeAt(i);
+
+					// we need to do a deep comparison rather than just `a !== b` because
+					// Safari behaves differently to other browsers
+					if (
+						a.commonAncestorContainer !== b.commonAncestorContainer ||
+						a.startContainer !== b.startContainer ||
+						a.endContainer !== b.endContainer ||
+						a.startOffset !== b.startOffset ||
+						a.endOffset !== b.endOffset
+					) {
+						return;
+					}
+				}
+
+				// if the selection hasn't changed (as a result of an element being (auto)focused,
+				// or a programmatic selection, we reset everything as part of the navigation)
+				// fixes https://github.com/sveltejs/kit/issues/8439
+				selection.removeAllRanges();
+			});
+		}
+	}
+}

package/src/runtime/client/remote-functions/command.svelte.js

@@ -1,7 +1,12 @@
 /** @import { RemoteCommand, RemoteQueryUpdate } from '$app/server' */
 import { app_dir, base } from '#app/paths';
 import { stringify_command_arg } from '../../shared.js';
-import { get_remote_request_headers, categorize_updates, remote_request } from './shared.svelte.js';
+import {
+	get_remote_request_headers,
+	categorize_updates,
+	remote_request,
+	fail_unhandled_refreshes
+} from './shared.svelte.js';
 
 /**
  * Client-version of the `command` function from `$app/server`.
@@ -45,14 +50,18 @@ export function command(id) {
 							throw updates_error;
 						}
 
-						const response = await remote_request(`${base}/${app_dir}/remote/${id}`, {
-							method: 'POST',
-							body: JSON.stringify({
-								payload: await stringify_command_arg(arg),
-								refreshes: Array.from(refreshes ?? [])
-							}),
-							headers
-						});
+						const response = await remote_request(
+							`${base}/${app_dir}/remote/${id}`,
+							{
+								method: 'POST',
+								body: JSON.stringify({
+									payload: await stringify_command_arg(arg),
+									refreshes: Array.from(refreshes ?? [])
+								}),
+								headers
+							},
+							refreshes
+						);
 
 						if (response.redirect) {
 							throw new Error(
@@ -60,6 +69,8 @@ export function command(id) {
 							);
 						}
 
+						fail_unhandled_refreshes(refreshes);
+
 						return response._;
 					} finally {
 						overrides?.forEach((fn) => fn());

package/src/runtime/client/remote-functions/form.svelte.js

@@ -13,7 +13,7 @@ import {
 } from '../client.js';
 import { page } from '#app/state/client';
 import { tick } from 'svelte';
-import { categorize_updates, remote_request } from './shared.svelte.js';
+import { categorize_updates, fail_unhandled_refreshes, remote_request } from './shared.svelte.js';
 import { createAttachmentKey } from 'svelte/attachments';
 import {
 	convert_formdata,
@@ -254,7 +254,8 @@ export function form(id) {
 										'x-sveltekit-search': location.search
 									},
 									body: blob
-								}
+								},
+								refreshes
 							);
 
 							({ issues: raw_issues = [], result } = response._ ?? {});
@@ -274,6 +275,7 @@ export function form(id) {
 							const succeeded = raw_issues.length === 0;
 
 							if (succeeded) {
+								fail_unhandled_refreshes(refreshes);
 								if (should_refresh) {
 									await refreshAll();
 								}
@@ -446,7 +448,7 @@ export function form(id) {
 					set_nested_value(input, previous_submitter, undefined);
 				}
 
-				if (event.submitter) {
+				if (event.submitter && /** @type {HTMLInputElement} */ (event.submitter).type !== 'image') {
 					const name = event.submitter.getAttribute('name');
 
 					/** @type {null | ReturnType<typeof parse_form_key>} */
@@ -535,7 +537,7 @@ export function form(id) {
 						}
 					}
 
-					set_nested_value(input, field, value);
+					set_nested_value(input, field, is_file ? value : coerce_form_value(field.type, value));
 				} else if (is_file) {
 					if (DEV && element.multiple) {
 						throw new Error(
@@ -554,7 +556,10 @@ export function form(id) {
 					set_nested_value(
 						input,
 						field,
-						element.type === 'checkbox' && !element.checked ? null : element.value
+						coerce_form_value(
+							field.type,
+							element.type === 'checkbox' && !element.checked ? null : element.value
+						)
 					);
 				}
 
@@ -615,7 +620,7 @@ export function form(id) {
 					}
 
 					const default_submitter = /** @type {HTMLElement | undefined} */ (
-						element.querySelector('button:not([type]), [type="submit"]')
+						element.querySelector('button:not([type]), [type="submit"], [type="image"]')
 					);
 
 					const form_data = new FormData(element, default_submitter);
@@ -706,7 +711,7 @@ export function form(id) {
 					if (!element) return;
 
 					const default_submitter = /** @type {HTMLElement | undefined} */ (
-						element.querySelector('button:not([type]), [type="submit"]')
+						element.querySelector('button:not([type]), [type="submit"], [type="image"]')
 					);
 
 					const form_data = new FormData(element, default_submitter);

package/src/runtime/client/remote-functions/query/instance.svelte.js

@@ -49,7 +49,15 @@ export class Query {
 		this.#overrides.length;
 
 		return (resolve, reject) => {
-			const result = p.then(tick).then(() => /** @type {T} */ (this.#current));
+			const result = p.then(tick).then(() => {
+				if (!this.#ready) {
+					throw new HandledHttpError(
+						this.#error ?? { status: 500, message: 'Query resolved without a value' }
+					);
+				}
+
+				return /** @type {T} */ (this.#current);
+			});
 
 			if (resolve || reject) {
 				return result.then(resolve, reject);
@@ -119,14 +127,12 @@ export class Query {
 
 				// Untrack this to not trigger mutation validation errors which can occur if you do e.g. $derived({ a: await queryA(), b: await queryB() })
 				untrack(() => {
-					this.#latest.splice(0, idx).forEach((r) => r(undefined));
+					this.#latest.splice(0, idx + 1).forEach((r) => r(undefined));
 					this.#ready = true;
 					this.#loading = false;
 					this.#raw = value;
 					this.#error = undefined;
 				});
-
-				resolve(undefined);
 			})
 			.catch(async (e) => {
 				// TODO: Our behavior here could be better:
@@ -150,6 +156,7 @@ export class Query {
 
 				untrack(() => {
 					this.#latest.splice(0, idx).forEach((r) => r(undefined));
+					this.#latest.shift();
 					this.#error = error;
 					this.#loading = false;
 				});
@@ -234,12 +241,19 @@ export class Query {
 		// SSR record can never shadow the newly-set value
 		delete query_responses[this.#key];
 
+		// a pending request's promise is settled with the value below; replacing it
+		// too would make awaiting consumers settle a second time in a new batch
+		const in_flight = this.#latest.length > 0;
+
 		this.#clear_pending();
 		this.#ready = true;
 		this.#loading = false;
 		this.#error = undefined;
 		this.#raw = value;
-		this.#promise = Promise.resolve();
+
+		if (!in_flight) {
+			this.#promise = Promise.resolve();
+		}
 	}
 
 	/** @param {HttpError} error */