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

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

@@ -2,7 +2,7 @@
 /** @import { RemoteQueryUpdate } from '@sveltejs/kit' */
 /** @import { CacheEntry } from './cache.svelte.js' */
 import * as devalue from 'devalue';
-import { app, goto, live_query_map, query_map, query_responses } from '../client.js';
+import { app, _goto, live_query_map, query_map, query_responses } from '../client.js';
 import { HttpError, Redirect } from '@sveltejs/kit/internal';
 import { untrack } from 'svelte';
 import { create_remote_key, split_remote_key } from '../../shared.js';
@@ -86,7 +86,7 @@ export function pin_while_resolving(cache_map, cache, id, payload, then) {
  */
 export function unwrap_node(node) {
 	if (node.e) {
-		throw new HttpError(node.e[0] ?? 500, node.e[1]);
+		throw new HttpError(node.e.status, node.e);
 	}
 
 	return node.v;
@@ -114,13 +114,22 @@ export async function remote_request(url, init) {
 	const response = await fetch(url, init);
 
 	if (!response.ok) {
-		throw new HttpError(500, 'Failed to execute remote function');
+		const result = await response.json().catch(() => ({
+			type: 'error',
+			status: response.status,
+			error: response.statusText
+		}));
+
+		throw new HttpError(
+			result.error?.status ?? result.status ?? response.status ?? 500,
+			result.error
+		);
 	}
 
 	const result = /** @type {RemoteFunctionResponse} */ (await response.json());
 
 	if (result.type === 'error') {
-		throw new HttpError(result.status ?? 500, result.error);
+		throw new HttpError(result.error.status, result.error);
 	}
 
 	const data = /** @type {RemoteFunctionData} */ (
@@ -128,15 +137,14 @@ 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) {
 		if (entry?.resource) {
 			if (result.e) {
-				entry.resource.fail(new HttpError(result.e[0] ?? 500, result.e[1]));
+				entry.resource.fail(new HttpError(result.e.status, result.e));
 			} else {
 				entry.resource.set(result.v);
 			}
@@ -184,12 +192,13 @@ export async function remote_request(url, init) {
  */
 export async function handle_side_channel_response(response) {
 	if (response.type === 'redirect') {
-		await goto(response.location);
+		// Use internal version to allow redirects to external URLs
+		await _goto(response.location, {}, 0);
 		throw new Redirect(307, response.location);
 	}
 
 	if (response.type === 'error') {
-		throw new HttpError(response.status ?? 500, response.error);
+		throw new HttpError(response.error.status, response.error);
 	}
 
 	return response;

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

@@ -1,54 +1,71 @@
-import { onMount } from 'svelte';
-import { updated_listener } from './utils.js';
+import { version } from '$app/env';
+import { assets } from '$app/paths/internal/client';
+import { BROWSER, DEV } from 'esm-env';
 
 /** @type {import('@sveltejs/kit').Page} */
-export let page;
-
-/** @type {{ current: import('@sveltejs/kit').Navigation | null }} */
-export let navigating;
-
-/** @type {{ current: boolean }} */
-export let updated;
-
-// this is a bootleg way to tell if we're in old svelte or new svelte
-const is_legacy =
-	onMount.toString().includes('$$') || /function \w+\(\) \{\}/.test(onMount.toString());
-
-const placeholder_url = 'a:';
-
-if (is_legacy) {
-	page = {
-		data: {},
-		form: null,
-		error: null,
-		params: {},
-		route: { id: null },
-		state: {},
-		status: -1,
-		url: new URL(placeholder_url)
-	};
-	navigating = { current: null };
-	updated = { current: false };
-} else {
-	page = new (class Page {
-		data = $state.raw({});
-		form = $state.raw(null);
-		error = $state.raw(null);
-		params = $state.raw({});
-		route = $state.raw({ id: null });
-		state = $state.raw({});
-		status = $state.raw(-1);
-		url = $state.raw(new URL(placeholder_url));
-	})();
-
-	navigating = new (class Navigating {
-		current = $state.raw(null);
-	})();
-
-	updated = new (class Updated {
-		current = $state.raw(false);
-	})();
-	updated_listener.v = () => (updated.current = true);
+export const page = new (class Page {
+	data = $state.raw({});
+	form = $state.raw(null);
+	error = $state.raw(null);
+	params = $state.raw({});
+	route = $state.raw({ id: null });
+	state = $state.raw({});
+	status = $state.raw(-1);
+	// eslint-disable-next-line svelte/prefer-svelte-reactivity
+	url = $state.raw(new URL('a:'));
+})();
+
+export const navigating = new (class Navigating {
+	/** @type {import('@sveltejs/kit').Navigation | null} */
+	current = $state.raw(null);
+})();
+
+export const updated = new (class Updated {
+	current = $state.raw(false);
+	// eslint-disable-next-line @typescript-eslint/require-await
+	check = async () => false;
+})();
+
+if (!DEV && BROWSER) {
+	const interval = __SVELTEKIT_APP_VERSION_POLL_INTERVAL__;
+
+	/** @type {number} */
+	let timeout;
+
+	/** @type {() => Promise<boolean>} */
+	async function check() {
+		window.clearTimeout(timeout);
+
+		if (interval) timeout = window.setTimeout(check, interval);
+
+		try {
+			const res = await fetch(`${assets}/${__SVELTEKIT_APP_VERSION_FILE__}`, {
+				headers: {
+					'cache-control': 'no-cache'
+				}
+			});
+
+			if (!res.ok) {
+				return false;
+			}
+
+			const data = await res.json();
+			const new_update = data.version !== version;
+
+			if (new_update) {
+				updated.current = true;
+				window.clearTimeout(timeout);
+			}
+
+			return new_update;
+		} catch {
+			return false;
+		}
+	}
+
+	if (interval) timeout = window.setTimeout(check, interval);
+
+	updated.check = check;
 }
 
 /**

package/src/runtime/client/types.d.ts

@@ -39,7 +39,7 @@ export interface SvelteKitApp {
 	dictionary: Record<string, [leaf: number, layouts: number[], errors?: number[]]>;
 
 	/**
-	 * A map of `[matcherName: string]: (..) => boolean`, which is used to match route parameters.
+	 * A map of `[matcherName: string]: ParamMatcher`, which is used to match and parse route parameters.
 	 *
 	 * In case of router.resolution=server, this object is empty, as resolution happens on the server.
 	 */
@@ -58,6 +58,12 @@ export interface SvelteKitApp {
 	hash: boolean;
 
 	root: typeof SvelteComponent;
+
+	/**
+	 * Lazily loads the contents of src/error.html, used as a last-resort
+	 * error page when the root layout's load function throws during client-side rendering.
+	 */
+	get_error_template: () => Promise<(data: { status: number; message: string }) => string>;
 }
 
 export type NavigationIntent = {
@@ -77,6 +83,7 @@ export type NavigationResult = NavigationRedirect | NavigationFinished;
 
 export type NavigationRedirect = {
 	type: 'redirect';
+	status: number;
 	location: string;
 };
 
@@ -119,7 +126,8 @@ export interface NavigationState {
 }
 
 export interface HydrateOptions {
-	status: number;
+	/** Provided in the case of a form action that returns `fail`, but otherwise derived from `error` */
+	status?: number;
 	error: App.Error | null;
 	node_ids: number[];
 	params: Record<string, string>;

package/src/runtime/client/utils.js

@@ -1,12 +1,6 @@
 import { BROWSER, DEV } from 'esm-env';
-import { writable } from 'svelte/store';
-import { assets } from '$app/paths';
-import { version } from '$app/env';
-import { noop } from '../../utils/functions.js';
 import { PRELOAD_PRIORITIES } from './constants.js';
 
-/* global __SVELTEKIT_APP_VERSION_FILE__, __SVELTEKIT_APP_VERSION_POLL_INTERVAL__ */
-
 export const origin = BROWSER ? location.origin : '';
 
 /** @param {string | URL} url */
@@ -211,96 +205,6 @@ export function get_router_options(element) {
 	};
 }
 
-/** @param {any} value */
-export function notifiable_store(value) {
-	const store = writable(value);
-	let ready = true;
-
-	function notify() {
-		ready = true;
-		store.update((val) => val);
-	}
-
-	/** @param {any} new_value */
-	function set(new_value) {
-		ready = false;
-		store.set(new_value);
-	}
-
-	/** @param {(value: any) => void} run */
-	function subscribe(run) {
-		/** @type {any} */
-		let old_value;
-		return store.subscribe((new_value) => {
-			if (old_value === undefined || (ready && new_value !== old_value)) {
-				run((old_value = new_value));
-			}
-		});
-	}
-
-	return { notify, set, subscribe };
-}
-
-export const updated_listener = {
-	v: noop
-};
-
-export function create_updated_store() {
-	const { set, subscribe } = writable(false);
-
-	if (__SVELTEKIT_DEV__ || !BROWSER) {
-		return {
-			subscribe,
-			// eslint-disable-next-line @typescript-eslint/require-await
-			check: async () => false
-		};
-	}
-
-	const interval = __SVELTEKIT_APP_VERSION_POLL_INTERVAL__;
-
-	/** @type {NodeJS.Timeout} */
-	let timeout;
-
-	/** @type {() => Promise<boolean>} */
-	async function check() {
-		clearTimeout(timeout);
-
-		if (interval) timeout = setTimeout(check, interval);
-
-		try {
-			const res = await fetch(`${assets}/${__SVELTEKIT_APP_VERSION_FILE__}`, {
-				headers: {
-					'cache-control': 'no-cache'
-				}
-			});
-
-			if (!res.ok) {
-				return false;
-			}
-
-			const data = await res.json();
-			const updated = data.version !== version;
-
-			if (updated) {
-				set(true);
-				updated_listener.v();
-				clearTimeout(timeout);
-			}
-
-			return updated;
-		} catch {
-			return false;
-		}
-	}
-
-	if (interval) timeout = setTimeout(check, interval);
-
-	return {
-		subscribe,
-		check
-	};
-}
-
 /**
  * Is external if
  * - origin different

package/src/runtime/form-utils.js

@@ -4,6 +4,7 @@
 import { DEV } from 'esm-env';
 import * as devalue from 'devalue';
 import { text_encoder } from './utils.js';
+import { noop } from '../utils/functions.js';
 import { SvelteKitError } from '@sveltejs/kit/internal';
 
 const decoder = new TextDecoder();
@@ -26,6 +27,9 @@ export function set_nested_value(object, path_string, value) {
 	deep_set(object, split_path(path_string), value);
 }
 
+/** Pass this to set_nested_value to delete the last part of the given path */
+export const DELETE_KEY = {};
+
 /**
  * Convert `FormData` into a POJO
  * @param {FormData} data
@@ -41,14 +45,11 @@ export function convert_formdata(data) {
 
 		if (is_array) key = key.slice(0, -2);
 
-		if (values.length > 1 && !is_array) {
-			throw new Error(`Form cannot contain duplicated keys — "${key}" has ${values.length} values`);
-		}
-
 		// an empty `<input type="file">` will submit a non-existent file, bizarrely
 		values = values.filter(
 			(entry) => typeof entry === 'string' || entry.name !== '' || entry.size > 0
 		);
+		if (values.length === 0 && !is_array) continue;
 
 		if (key.startsWith('n:')) {
 			key = key.slice(2);
@@ -58,6 +59,10 @@ export function convert_formdata(data) {
 			values = values.map((v) => v === 'on');
 		}
 
+		if (values.length > 1 && !is_array) {
+			throw new Error(`Form cannot contain duplicated keys — "${key}" has ${values.length} values`);
+		}
+
 		set_nested_value(result, key, is_array ? values : values[0]);
 	}
 
@@ -319,7 +324,7 @@ export async function deserialize_binary_form(request) {
 			const chunk = await get_chunk(chunks.length);
 			has_more = !!chunk;
 		}
-	})();
+	})().catch(noop); // prevent unhandled rejection potentially crashing the process
 
 	return { data, meta, form_data: null };
 }
@@ -503,6 +508,10 @@ export function deep_set(object, keys, value) {
 		}
 
 		if (!exists) {
+			if (value === DELETE_KEY) {
+				// don't create the nested structure if we want to delete the key anyway
+				return;
+			}
 			current[key] = is_array ? [] : {};
 		}
 
@@ -511,7 +520,12 @@ export function deep_set(object, keys, value) {
 
 	const final_key = keys[keys.length - 1];
 	check_prototype_pollution(final_key);
-	current[final_key] = value;
+
+	if (value === DELETE_KEY) {
+		delete current[final_key];
+	} else {
+		current[final_key] = value;
+	}
 }
 
 /**
@@ -608,18 +622,53 @@ function get_type_prefix(field_type, is_array, input_value) {
 	return '';
 }
 
+/**
+ * A deep-clone implementation specifically for form data, where
+ * we don't need to worry about cycles and whatnot
+ * @param {any} value
+ * @returns {any}
+ */
+function deep_clone(value) {
+	if (value !== null && typeof value === 'object') {
+		if (value instanceof Date) {
+			return new Date(value.getTime());
+		}
+
+		if (value instanceof File) {
+			return value;
+		}
+
+		if (Array.isArray(value)) {
+			return value.map(deep_clone);
+		}
+
+		/** @type {Record<string, any>} */
+		const clone = {};
+		for (const key of Object.keys(value)) {
+			clone[key] = deep_clone(value[key]);
+		}
+
+		return clone;
+	}
+
+	return value;
+}
+
 /**
  * Creates a proxy-based field accessor for form data
  * @param {any} target - Function or empty POJO
- * @param {() => Record<string, any>} get_input - Function to get current input data
- * @param {(path: (string | number)[], value: any) => void} set_input - Function to set input data
+ * @param {() => Record<string, any>} get - Function to get current input data
+ * @param {(path: (string | number)[], value: any) => void} set - Function to set input data
  * @param {(path?: (string | number)[], all?: boolean) => Record<string, InternalRemoteFormIssue[]>} get_issues - Function to get current issues
+ * @param {() => Record<string, boolean>} get_touched - Function to get touched fields
+ * @param {() => Record<string, boolean>} get_dirty - Function to get dirty fields
  * @param {(string | number)[]} path - Current access path
  * @returns {any} Proxy object with name(), value(), and issues() methods
  */
-export function create_field_proxy(target, get_input, set_input, get_issues, path = []) {
+export function create_field_proxy(target, get, set, get_issues, get_touched, get_dirty, path) {
 	const get_value = () => {
-		return deep_get(get_input(), path);
+		const value = deep_get(get(), path);
+		return deep_clone(value);
 	};
 
 	return new Proxy(target, {
@@ -628,24 +677,26 @@ export function create_field_proxy(target, get_input, set_input, get_issues, pat
 
 			// Handle array access like jobs[0]
 			if (/^\d+$/.test(prop)) {
-				return create_field_proxy({}, get_input, set_input, get_issues, [
+				return create_field_proxy({}, get, set, get_issues, get_touched, get_dirty, [
 					...path,
 					parseInt(prop, 10)
 				]);
 			}
 
 			const key = build_path_string(path);
+			const next = [...path, prop];
 
 			if (prop === 'set') {
 				const set_func = function (/** @type {any} */ newValue) {
-					set_input(path, newValue);
+					set(path, newValue);
 					return newValue;
 				};
-				return create_field_proxy(set_func, get_input, set_input, get_issues, [...path, prop]);
+
+				return create_field_proxy(set_func, get, set, get_issues, get_touched, get_dirty, next);
 			}
 
 			if (prop === 'value') {
-				return create_field_proxy(get_value, get_input, set_input, get_issues, [...path, prop]);
+				return create_field_proxy(get_value, get, set, get_issues, get_touched, get_dirty, next);
 			}
 
 			if (prop === 'issues' || prop === 'allIssues') {
@@ -659,15 +710,45 @@ export function create_field_proxy(target, get_input, set_input, get_issues, pat
 						}));
 					}
 
-					return all_issues
+					const issues = all_issues
 						?.filter((issue) => issue.name === key)
 						?.map((issue) => ({
 							path: issue.path,
 							message: issue.message
 						}));
+
+					return issues?.length ? issues : undefined;
+				};
+
+				return create_field_proxy(issues_func, get, set, get_issues, get_touched, get_dirty, next);
+			}
+
+			if (prop === 'touched' || prop === 'dirty') {
+				const fn = () => {
+					const object = prop === 'dirty' ? get_dirty() : get_touched();
+
+					if (key === '') {
+						return Object.keys(object).length > 0;
+					}
+
+					if (Object.hasOwn(object, key)) {
+						return true;
+					}
+
+					for (const candidate in object) {
+						if (!Object.hasOwn(object, candidate)) continue;
+						if (!candidate.startsWith(key)) continue;
+
+						const next = candidate[key.length];
+						if (next === '.' || next === '[') {
+							return true;
+						}
+					}
+
+					return false;
 				};
 
-				return create_field_proxy(issues_func, get_input, set_input, get_issues, [...path, prop]);
+				return create_field_proxy(fn, get, set, get_issues, get_touched, get_dirty, next);
 			}
 
 			if (prop === 'as') {
@@ -833,11 +914,11 @@ export function create_field_proxy(target, get_input, set_input, get_issues, pat
 					});
 				};
 
-				return create_field_proxy(as_func, get_input, set_input, get_issues, [...path, 'as']);
+				return create_field_proxy(as_func, get, set, get_issues, get_touched, get_dirty, next);
 			}
 
 			// Handle property access (nested fields)
-			return create_field_proxy({}, get_input, set_input, get_issues, [...path, prop]);
+			return create_field_proxy({}, get, set, get_issues, get_touched, get_dirty, next);
 		}
 	});
 }