@sveltejs/kit 3.0.0-next.6 → 3.0.0-next.7

package/src/runtime/app/server/remote/query.js

@@ -411,20 +411,14 @@ export function refresh(event, state, internals, payload, fn) {
 
 	const key = create_remote_key(internals.id, payload);
 
-	// `fn()` is invoked eagerly here, which starts running the query immediately.
-	// The resulting promise is normally awaited (and its rejection handled) in
-	// `collect_remote_data`, but some code paths (e.g. a command throwing a
-	// non-redirect error) never reach that point. Attach a no-op `catch` to the
-	// promise so a rejection is always considered handled and can never become an
-	// unhandled promise rejection (which crashes the process on modern Node).
-	// We still store the original promise so `collect_remote_data` can serialize
-	// either its value or its error as before.
-	const promise = fn();
-	promise.catch(() => {});
-
+	// `fn` is stored rather than invoked eagerly. The query is run at the end of
+	// the command/form (in `collect_remote_data`), so that it observes any state
+	// mutations that happen after `refresh()` is called. If the developer re-awaits
+	// the query before the command finishes, the cache entry created by that await
+	// is reused instead of re-running the query.
 	(state.remote.explicit ??= new Map()).set(key, {
 		internals,
-		promise
+		fn
 	});
 }
 

package/src/runtime/app/state/client.js

@@ -3,7 +3,6 @@ import {
 	navigating as _navigating,
 	updated as _updated
 } from '../../client/state.svelte.js';
-import { stores } from '../../client/client.js';
 
 export const page = {
 	get data() {
@@ -57,5 +56,5 @@ export const updated = {
 	get current() {
 		return _updated.current;
 	},
-	check: stores.updated.check
+	check: _updated.check
 };

package/src/runtime/app/stores.js

@@ -1,101 +1,38 @@
-import { getContext } from 'svelte';
-import { BROWSER, DEV } from 'esm-env';
-import { stores as browser_stores } from '../client/client.js';
+// TODO: remove this file when enough people have migrated to Kit 3
+
+/** @returns {never} */
+function removed() {
+	throw new Error(
+		'`$app/stores` has been removed in favour of `$app/state`. See https://svelte.dev/docs/kit/migrating-to-sveltekit-2#SvelteKit-2.12:-$app-stores-deprecated'
+	);
+}
 
 /**
- * A function that returns all of the contextual stores. On the server, this must be called during component initialization.
- * Only use this if you need to defer store subscription until after the component has mounted, for some reason.
- *
  * @deprecated Use `$app/state` instead (requires Svelte 5, [see docs for more info](https://svelte.dev/docs/kit/migrating-to-sveltekit-2#SvelteKit-2.12:-$app-stores-deprecated))
  */
-export const getStores = () => {
-	const stores = BROWSER ? browser_stores : getContext('__svelte__');
-
-	return {
-		/** @type {typeof page} */
-		page: {
-			subscribe: stores.page.subscribe
-		},
-		/** @type {typeof navigating} */
-		navigating: {
-			subscribe: stores.navigating.subscribe
-		},
-		/** @type {typeof updated} */
-		updated: stores.updated
-	};
-};
+export const getStores = removed;
 
 /**
- * A readable store whose value contains page data.
- *
- * On the server, this store can only be subscribed to during component initialization. In the browser, it can be subscribed to at any time.
- *
  * @deprecated Use `page` from `$app/state` instead (requires Svelte 5, [see docs for more info](https://svelte.dev/docs/kit/migrating-to-sveltekit-2#SvelteKit-2.12:-$app-stores-deprecated))
  * @type {import('svelte/store').Readable<import('@sveltejs/kit').Page>}
  */
 export const page = {
-	subscribe(fn) {
-		const store = DEV ? get_store('page') : getStores().page;
-		return store.subscribe(fn);
-	}
+	subscribe: removed
 };
 
 /**
- * A readable store.
- * When navigating starts, its value is a `Navigation` object with `from`, `to`, `type` and (if `type === 'popstate'`) `delta` properties.
- * When navigating finishes, its value reverts to `null`.
- *
- * On the server, this store can only be subscribed to during component initialization. In the browser, it can be subscribed to at any time.
- *
  * @deprecated Use `navigating` from `$app/state` instead (requires Svelte 5, [see docs for more info](https://svelte.dev/docs/kit/migrating-to-sveltekit-2#SvelteKit-2.12:-$app-stores-deprecated))
  * @type {import('svelte/store').Readable<import('@sveltejs/kit').Navigation | null>}
  */
 export const navigating = {
-	subscribe(fn) {
-		const store = DEV ? get_store('navigating') : getStores().navigating;
-		return store.subscribe(fn);
-	}
+	subscribe: removed
 };
 
 /**
- * A readable store whose initial value is `false`. If [`version.pollInterval`](https://svelte.dev/docs/kit/configuration#version) is a non-zero value, SvelteKit will poll for new versions of the app and update the store value to `true` when it detects one. `updated.check()` will force an immediate check, regardless of polling.
- *
- * On the server, this store can only be subscribed to during component initialization. In the browser, it can be subscribed to at any time.
- *
  * @deprecated Use `updated` from `$app/state` instead (requires Svelte 5, [see docs for more info](https://svelte.dev/docs/kit/migrating-to-sveltekit-2#SvelteKit-2.12:-$app-stores-deprecated))
  * @type {import('svelte/store').Readable<boolean> & { check(): Promise<boolean> }}
  */
 export const updated = {
-	subscribe(fn) {
-		const store = DEV ? get_store('updated') : getStores().updated;
-
-		if (BROWSER) {
-			updated.check = store.check;
-		}
-
-		return store.subscribe(fn);
-	},
-	check: () => {
-		throw new Error(
-			BROWSER
-				? 'Cannot check updated store before subscribing'
-				: 'Can only check updated store in browser'
-		);
-	}
+	subscribe: removed,
+	check: removed
 };
-
-/**
- * @template {keyof ReturnType<typeof getStores>} Name
- * @param {Name} name
- * @returns {ReturnType<typeof getStores>[Name]}
- */
-function get_store(name) {
-	try {
-		return getStores()[name];
-	} catch {
-		throw new Error(
-			`Cannot subscribe to '${name}' store on the server outside of a Svelte component, as it is bound to the current request via component context. This prevents state from leaking between users.` +
-				'For more information, see https://svelte.dev/docs/kit/state-management#avoid-shared-state-on-the-server'
-		);
-	}
-}

package/src/runtime/client/client.js

@@ -6,16 +6,7 @@
 import { BROWSER, DEV } from 'esm-env';
 import * as svelte from 'svelte';
 import { HttpError, Redirect, SvelteKitError } from '@sveltejs/kit/internal';
-const { onMount, tick } = svelte;
-// Svelte 4 and under don't have `untrack`, so we have to fallback if `untrack` is not exported
-const untrack = svelte.untrack ?? ((value) => value());
-import {
-	decode_params,
-	decode_pathname,
-	strip_hash,
-	make_trackable,
-	normalize_path
-} from '../../utils/url.js';
+import { decode_pathname, strip_hash, make_trackable, normalize_path } from '../../utils/url.js';
 import { 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';
@@ -27,8 +18,6 @@ import {
 	is_external_url,
 	origin,
 	scroll_state,
-	notifiable_store,
-	create_updated_store,
 	load_css
 } from './utils.js';
 import { base } from '$app/paths/internal/client';
@@ -53,8 +42,7 @@ import {
 	validate_load_response
 } from '../shared.js';
 import { get_message, get_status } from '../../utils/error.js';
-import { writable } from 'svelte/store';
-import { page, update, navigating } from './state.svelte.js';
+import { page, update, navigating, updated } from './state.svelte.js';
 import { add_data_suffix, add_resolution_suffix } from '../pathname.js';
 import { noop_span } from '../telemetry/noop.js';
 import { read_ndjson } from './ndjson.js';
@@ -127,15 +115,6 @@ if (DEV && BROWSER) {
 	};
 }
 
-export const stores = {
-	url: /* @__PURE__ */ notifiable_store({}),
-	page: /* @__PURE__ */ notifiable_store({}),
-	navigating: /* @__PURE__ */ writable(
-		/** @type {import('@sveltejs/kit').Navigation | null} */ (null)
-	),
-	updated: /* @__PURE__ */ create_updated_store()
-};
-
 /** @param {number} index */
 function update_scroll_positions(index) {
 	scroll_positions[index] = scroll_state();
@@ -723,13 +702,14 @@ async function initialize(result, target, hydrate) {
 
 	update(/** @type {import('@sveltejs/kit').Page} */ (result.props.page));
 
+	// TODO: use mount()
 	root = new app.root({
 		target,
-		props: { ...result.props, stores, components },
+		props: { ...result.props, components },
 		hydrate,
-		// @ts-ignore Svelte 5 specific: asynchronously instantiate the component, i.e. don't call flushSync
+		// Svelte 5 specific: asynchronously instantiate the component, i.e. don't call flushSync
 		sync: false,
-		// @ts-ignore Svelte 5 specific: transformError allows to transform errors before they are passed to boundaries
+		// Svelte 5 specific: transformError allows to transform errors before they are passed to boundaries
 		transformError: __SVELTEKIT_EXPERIMENTAL_USE_TRANSFORM_ERROR__
 			? /** @param {unknown} e */ async (e) => {
 					const error = await handle_error(e, current.nav);
@@ -817,9 +797,8 @@ async function get_navigation_result_from_branch({
 			route
 		},
 		props: {
-			// @ts-ignore Somehow it's getting SvelteComponent and SvelteComponentDev mixed up
 			constructors: compact(branch).map((branch_node) => branch_node.node.component),
-			page: clone_page(page)
+			page
 		}
 	};
 
@@ -1177,10 +1156,6 @@ function diff_search_params(old_url, new_url) {
  * @returns {import('./types.js').NavigationFinished}
  */
 function preload_error({ error, url, route, params }) {
-	// we skipped loading the error page, so we need to use the current page
-	// store, but we still pass the updated status to the preloadData function
-	const new_page = clone_page(page);
-	new_page.status = error.status;
 	return {
 		type: 'loaded',
 		state: {
@@ -1191,7 +1166,12 @@ function preload_error({ error, url, route, params }) {
 			branch: []
 		},
 		props: {
-			page: new_page,
+			page: {
+				// we skipped loading the error page, so we have to use the current page
+				// store, but update the status received while preloading
+				...page,
+				status: error.status
+			},
 			constructors: []
 		}
 	};
@@ -1377,8 +1357,7 @@ async function load_route({ id, invalidating, url, params, route, preload }) {
 					error = err.body;
 				} else {
 					// Referenced node could have been removed due to redeploy, check
-					const updated = await stores.updated.check();
-					if (updated) {
+					if (await updated.check()) {
 						// Before reloading, try to update the service worker if it exists
 						await update_service_worker();
 						return await native_navigation(url);
@@ -1631,7 +1610,7 @@ export async function get_navigation_intent(url, invalidating) {
 					id: get_page_key(url),
 					invalidating,
 					route,
-					params: decode_params(params),
+					params,
 					url
 				};
 			}
@@ -1780,7 +1759,7 @@ async function navigate({
 	is_navigating = true;
 
 	if (started && nav.navigation.type !== 'enter') {
-		stores.navigating.set((navigating.current = nav.navigation));
+		navigating.current = nav.navigation;
 	}
 
 	let navigation_result = intent && (await load_route(intent));
@@ -1867,8 +1846,7 @@ async function navigate({
 
 		if (!navigation_result) return;
 	} else if (/** @type {number} */ (navigation_result.props.page.status) >= 400) {
-		const updated = await stores.updated.check();
-		if (updated) {
+		if (await updated.check()) {
 			// Before reloading, try to update the service worker if it exists
 			await update_service_worker();
 			return await native_navigation(url, replace_state);
@@ -1999,13 +1977,7 @@ async function navigate({
 
 	const { activeElement } = document;
 
-	await commit_promise;
-
-	// TODO 3.0 remote — the double tick is probably necessary because
-	// of some store shenanigans. `settled()` and `f.commit()`
-	// should resolve after DOM updates in newer versions
-	await svelte.tick();
-	await svelte.tick();
+	await (commit_promise ?? svelte.tick());
 
 	if (navigation_token !== nav_token) {
 		// a new navigation happened while we were waiting for the DOM to update, so abort
@@ -2069,7 +2041,7 @@ async function navigate({
 		restore_snapshot(current_navigation_index);
 	}
 
-	stores.navigating.set((navigating.current = null));
+	navigating.current = null;
 
 	updating = false;
 }
@@ -2257,7 +2229,7 @@ export async function handle_error(error, event) {
  * @param {T} callback
  */
 function add_navigation_callback(callbacks, callback) {
-	onMount(() => {
+	svelte.onMount(() => {
 		callbacks.add(callback);
 
 		return () => {
@@ -2573,8 +2545,7 @@ export function pushState(url, state) {
 
 	page.state = state;
 	root.$set({
-		// we need to assign a new page object so that subscribers are correctly notified
-		page: untrack(() => clone_page(page))
+		page
 	});
 
 	clear_onward_history(current_history_index, current_navigation_index);
@@ -2617,7 +2588,7 @@ export function replaceState(url, state) {
 
 	page.state = state;
 	root.$set({
-		page: untrack(() => clone_page(page))
+		page
 	});
 }
 
@@ -2647,11 +2618,11 @@ export async function applyAction(result) {
 			// this brings Svelte's view of the world in line with SvelteKit's
 			// after use:enhance reset the form....
 			form: null,
-			page: clone_page(page)
+			page
 		});
 
 		// ...so that setting the `form` prop takes effect and isn't ignored
-		await tick();
+		await svelte.tick();
 		root.$set({ form: result.data });
 
 		if (result.type === 'success') {
@@ -2685,7 +2656,7 @@ export async function set_nearest_error_page(error) {
 		root.$set(navigation_result.props);
 		update(navigation_result.props.page);
 
-		void tick().then(() => reset_focus(current.url));
+		void svelte.tick().then(() => reset_focus(current.url));
 	}
 }
 
@@ -3010,7 +2981,7 @@ function _start_router() {
 		// the navigation away from it was successful.
 		// Info about bfcache here: https://web.dev/bfcache
 		if (event.persisted) {
-			stores.navigating.set((navigating.current = null));
+			navigating.current = null;
 		}
 	});
 
@@ -3019,8 +2990,6 @@ function _start_router() {
 	 */
 	function update_url(url) {
 		current.url = page.url = url;
-		stores.page.set(clone_page(page));
-		stores.page.notify();
 	}
 }
 
@@ -3414,28 +3383,6 @@ function create_navigation(current, intent, url, type, target_scroll = null) {
 	};
 }
 
-/**
- * TODO: remove this in 3.0 when the page store is also removed
- *
- * We need to assign a new page object so that subscribers are correctly notified.
- * However, spreading `{ ...page }` returns an empty object so we manually
- * assign to each property instead.
- *
- * @param {import('@sveltejs/kit').Page} page
- */
-function clone_page(page) {
-	return {
-		data: page.data,
-		error: page.error,
-		form: page.form,
-		params: page.params,
-		route: page.route,
-		state: page.state,
-		status: page.status,
-		url: page.url
-	};
-}
-
 /**
  * @param {URL} url
  * @returns {URL}

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

@@ -1,8 +1,10 @@
+/** @import { Query } from './query/instance.svelte.js' */
+/** @import { LiveQuery } from './query-live/instance.svelte.js' */
 import { tick } from 'svelte';
 import { once } from '../../../utils/functions.js';
 
 /**
- * @template R
+ * @template [R=Query<any> | LiveQuery<any>]
  * @typedef {object} CacheEntry
  * @property {number} proxy_count The number of live proxy instances referencing this
  *   entry. The entry is eligible for eviction when this hits zero.

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

@@ -23,8 +23,9 @@ import {
 	build_path_string,
 	normalize_issue,
 	serialize_binary_form,
-	BINARY_FORM_CONTENT_TYPE,
-	deep_get
+	deep_get,
+	DELETE_KEY,
+	BINARY_FORM_CONTENT_TYPE
 } from '../../form-utils.js';
 
 /**
@@ -514,14 +515,7 @@ export function form(id) {
 					if (file) {
 						set_nested_value(input, name, file);
 					} else {
-						// Remove the property by setting to undefined and clean up
-						const path_parts = name.split(/\.|\[|\]/).filter(Boolean);
-						let current = /** @type {any} */ (input);
-						for (let i = 0; i < path_parts.length - 1; i++) {
-							if (current[path_parts[i]] == null) return;
-							current = current[path_parts[i]];
-						}
-						delete current[path_parts[path_parts.length - 1]];
+						set_nested_value(input, name, DELETE_KEY);
 					}
 				} else {
 					set_nested_value(
@@ -672,12 +666,7 @@ export function form(id) {
 			},
 			validate: {
 				/** @type {RemoteForm<any, any>['validate']} */
-				value: async ({
-					all = false,
-					preflightOnly = false,
-					// @ts-expect-error TODO remove this in 3.0
-					includeUntouched
-				} = {}) => {
+				value: async ({ all = false, preflightOnly = false } = {}) => {
 					if (!element) return;
 
 					const id = ++validate_id;
@@ -728,14 +717,6 @@ export function form(id) {
 						array = /** @type {InternalRemoteFormIssue[]} */ (result._);
 					}
 
-					if (includeUntouched !== undefined) {
-						console.warn(
-							`\`{ includeUntouched: ${includeUntouched} }\` has been replaced with \`{ all: ${includeUntouched} }\``
-						);
-
-						all = includeUntouched;
-					}
-
 					if (!all && !submitted) {
 						array = array.filter((issue) => can_validate[issue.name]);
 					}

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

@@ -2,10 +2,11 @@
 import { app_dir, base } from '$app/paths/internal/client';
 import { version } from '$app/env';
 import * as devalue from 'devalue';
-import { app, _goto, prerender_responses } from '../client.js';
+import { app, _goto, handle_error, prerender_responses } from '../client.js';
 import { get_remote_request_headers, remote_request, unwrap_node } from './shared.svelte.js';
 import { create_remote_key, stringify_remote_arg } from '../../shared.js';
 import { noop } from '../../../utils/functions.js';
+import { HttpError } from '@sveltejs/kit/internal';
 
 // Initialize Cache API for prerender functions
 const CACHE_NAME = __SVELTEKIT_DEV__ ? `sveltekit:${Date.now()}` : `sveltekit:${version}`;
@@ -148,6 +149,7 @@ class Prerender {
 	/** @type {T | undefined} */
 	#current = $state.raw();
 
+	/** @type {App.Error | undefined} */
 	#error = $state.raw(undefined);
 
 	/**
@@ -162,10 +164,15 @@ class Prerender {
 				this.#error = undefined;
 				return value;
 			},
-			(error) => {
+			async (e) => {
+				const error = await handle_error(e, {
+					params: {},
+					route: { id: null },
+					url: new URL(location.href)
+				});
 				this.#loading = false;
 				this.#error = error;
-				throw error;
+				throw new HttpError(error.status, error); // so that transformError doesn't transform it again
 			}
 		);
 

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

@@ -1,4 +1,4 @@
-import { query_responses } from '../../client.js';
+import { query_responses, handle_error } from '../../client.js';
 import { HttpError } from '@sveltejs/kit/internal';
 import { QUERY_OVERRIDE_KEY } from '../shared.svelte.js';
 import { noop } from '../../../../utils/functions.js';
@@ -37,7 +37,7 @@ export class Query {
 		return this.#overrides.reduce((v, r) => r(v), /** @type {T} */ (this.#raw));
 	});
 
-	/** @type {any} */
+	/** @type {App.Error | undefined} */
 	#error = $state.raw(undefined);
 
 	/** @type {Promise<T>['then']} */
@@ -126,22 +126,33 @@ export class Query {
 
 				resolve(undefined);
 			})
-			.catch((e) => {
+			.catch(async (e) => {
 				// TODO: Our behavior here could be better:
 				// - We should not reject on redirects, but should hook into the router
 				//   to ensure the query is properly refreshed before the navigation completes
 				// - Instead of failing on transport-level errors, we should probably do what
 				//   LiveQuery does and preserve the last known good value and retry the connection
+				if (this.#latest.indexOf(resolve) === -1) return;
+
+				const error = await handle_error(e, {
+					params: {},
+					route: { id: null },
+					url: new URL(location.href)
+				});
+
+				// Re-check after the async `handle_error` gap: a later request may have
+				// resolved/rejected while we were awaiting and superseded this one, so
+				// recompute the index and bail out if this request is no longer current
 				const idx = this.#latest.indexOf(resolve);
 				if (idx === -1) return;
 
 				untrack(() => {
 					this.#latest.splice(0, idx).forEach((r) => r(undefined));
-					this.#error = e;
+					this.#error = error;
 					this.#loading = false;
 				});
 
-				reject(e);
+				reject(new HttpError(error.status, error)); // so that transformError doesn't transform it again
 			});
 
 		return promise;
@@ -229,9 +240,7 @@ export class Query {
 		this.#promise = Promise.resolve();
 	}
 
-	/**
-	 * @param {unknown} error
-	 */
+	/** @param {HttpError} error */
 	fail(error) {
 		// normally consumed in the constructor, but make sure a leftover
 		// SSR record can never shadow the newly-set error
@@ -239,7 +248,7 @@ export class Query {
 
 		this.#clear_pending();
 		this.#loading = false;
-		this.#error = error;
+		this.#error = error.body;
 
 		const promise = Promise.reject(error);
 

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

@@ -1,4 +1,4 @@
-import { query_responses } from '../../client.js';
+import { query_responses, handle_error } from '../../client.js';
 import { HttpError, Redirect } from '@sveltejs/kit/internal';
 import { noop, once } from '../../../../utils/functions.js';
 import { SharedIterator } from '../../../../utils/shared-iterator.js';
@@ -24,7 +24,7 @@ export class LiveQuery {
 	#done = $state(false);
 	/** @type {T | undefined} */
 	#raw = $state.raw();
-	/** @type {any} */
+	/** @type {App.Error | undefined} */
 	#error = $state.raw(undefined);
 	/** @type {Promise<void>} */
 	#promise;
@@ -93,7 +93,7 @@ export class LiveQuery {
 				// and the query can recover
 				const error = new HttpError(node.e.status, node.e);
 				this.#loading = false;
-				this.#error = error;
+				this.#error = error.body;
 
 				promise.catch(noop);
 				this.#reject_first?.(error);
@@ -175,7 +175,7 @@ export class LiveQuery {
 
 				if (!this.#ready) {
 					// If we haven't successfully connected and received a value yet, surface the error
-					this.fail(error);
+					await this.#fail(error);
 					on_connect_failed(error);
 					break;
 				}
@@ -385,10 +385,10 @@ export class LiveQuery {
 		this.#fan_out.push(value);
 	}
 
-	/** @param {unknown} error */
+	/** @param {HttpError} error */
 	fail(error) {
 		this.#loading = false;
-		this.#error = error;
+		this.#error = error.body;
 		// `fail` is terminal — once a live query has hard-failed, the only way to start
 		// streaming again is via `reconnect()`. Mark it done and abort any in-flight
 		// request so that callers from outside the main loop (e.g. `apply_reconnections`)
@@ -410,6 +410,16 @@ export class LiveQuery {
 		this.#fan_out.fail(error);
 	}
 
+	/** @param {unknown} e */
+	async #fail(e) {
+		const error = await handle_error(e, {
+			params: {},
+			route: { id: null },
+			url: new URL(location.href)
+		});
+		this.fail(new HttpError(error.status, error));
+	}
+
 	get [Symbol.toStringTag]() {
 		return 'LiveQuery';
 	}

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

@@ -137,9 +137,8 @@ export async function remote_request(url, init) {
 	);
 
 	/**
-	 *
 	 * @param {string} key
-	 * @param {CacheEntry<any> | undefined} entry
+	 * @param {CacheEntry | undefined} entry
 	 * @param {any} result
 	 */
 	function refresh(key, entry, result) {