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

package/src/runtime/client/entry.js

@@ -1,3 +1,24 @@
-// we expose this as a separate entry point (rather than treating client.js as the entry point)
-// so that everything other than `start`/`load_css` can be treeshaken
-export { start, load_css } from './client.js';
+/* in development or if `bundleStrategy` is 'split', this file is used as the entry point */
+
+import { set_payload } from './payload.js';
+
+/** @type {Promise<typeof import('./client-entry.js')>} */
+let client;
+
+/** @param {import('types').SvelteKitPayload} payload */
+export function init(payload) {
+	set_payload(payload);
+	// Importing the client after setting the payload ensures that modules such as
+	// `$app/paths` can read it during initialization.
+	client ??= import('./client-entry.js');
+}
+
+/** @param {Parameters<import('./client-entry.js').start>} args */
+export async function start(...args) {
+	return (await client).start(...args);
+}
+
+/** @param {Parameters<import('./client-entry.js').load_css>} args */
+export async function load_css(...args) {
+	return (await client).load_css(...args);
+}

package/src/runtime/client/payload.js

@@ -0,0 +1,17 @@
+/** @import {SvelteKitPayload} from 'types'; */
+
+/**
+ * Code inside the SvelteKit client runtime should only use this, not the global,
+ * so that the file hashes stay stable between rebuilds as long as the SvelteKit runtime doesn't change
+ */
+export let payload = __SVELTEKIT_PAYLOAD__ ?? /** @type {SvelteKitPayload} */ ({});
+
+/** @param {SvelteKitPayload} value */
+export function set_payload(value) {
+	payload = value;
+}
+
+// this makes Vite inject its dev client code as this module's first dependency
+// so that global constant replacements are done before any other module evaluates.
+// For build, it's inert.
+import.meta.hot;

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

@@ -8,8 +8,8 @@ import {
 	query_responses,
 	_goto,
 	set_nearest_error_page,
-	invalidateAll,
-	handle_error
+	handle_error,
+	refreshAll
 } from '../client.js';
 import { tick } from 'svelte';
 import { categorize_updates, remote_request } from './shared.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';
 
 /**
@@ -226,14 +227,14 @@ export function form(id) {
 
 					// if the developer took control of updates via `.updates(...)` (even with
 					// no arguments), or the server performed explicit refreshes, don't invalidateAll
-					const should_invalidate = refreshes === null && !response.r;
+					const should_refresh = refreshes === null && !response.r;
 
 					if (response.redirect) {
 						// Use internal version to allow redirects to external URLs
 						void _goto(
 							response.redirect,
 							{
-								invalidateAll: should_invalidate
+								refreshAll: should_refresh
 							},
 							0
 						);
@@ -243,8 +244,8 @@ export function form(id) {
 					const succeeded = raw_issues.length === 0;
 
 					if (succeeded) {
-						if (should_invalidate) {
-							void invalidateAll();
+						if (should_refresh) {
+							void refreshAll();
 						}
 					} else {
 						if (DEV) {
@@ -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) {

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

@@ -10,6 +10,7 @@ import {
 	Uses
 } from 'types';
 import { Page, ParamMatcher } from '@sveltejs/kit';
+import { RenderNode } from '../types.js';
 
 export interface SvelteKitApp {
 	/**
@@ -39,7 +40,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.
 	 */
@@ -57,8 +58,6 @@ 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.
@@ -91,13 +90,10 @@ export type NavigationFinished = {
 	type: 'loaded';
 	state: NavigationState;
 	props: {
-		constructors: Array<typeof SvelteComponent>;
-		errors?: Array<typeof SvelteComponent | undefined>;
-		components?: SvelteComponent[];
 		page: Page;
 		form?: Record<string, any> | null;
 		error?: App.Error;
-		[key: `data_${number}`]: Record<string, any>;
+		tree: RenderNode;
 	};
 };
 

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/internal/client';
-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/components/root.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import { afterNavigate } from '$app/navigation';
+	import type { Page } from '@sveltejs/kit';
+	import type { RenderNode } from '../types.js';
+
+	interface Props {
+		page: Page;
+		tree: RenderNode;
+		components: any[];
+		resetters: Array<(() => void) | undefined>;
+		form?: any;
+		error?: App.Error;
+	}
+
+	const { page, components, resetters, tree, form, error }: Props = $props();
+
+	let mounted = $state(false);
+	let navigated = $state(false);
+	let title = $state('');
+
+	afterNavigate(() => {
+		if (mounted) {
+			navigated = true;
+			title = document.title || 'untitled page';
+		} else {
+			mounted = true;
+		}
+	});
+</script>
+
+{#snippet node(n: RenderNode, depth: number)}
+	{const Component = $derived(n.component)}
+	{const Error = $derived(n.error)}
+	{const data = $derived(n.data)}
+
+	<svelte:boundary onerror={(_, reset) => (resetters[depth] = reset)}>
+		{#if n.child}
+			<!-- svelte-ignore binding_property_non_reactive -->
+			<Component bind:this={components[depth]} {data} {form} params={page.params}>
+				{@render node(n.child, depth + 1)}
+			</Component>
+		{:else}
+			<!-- svelte-ignore binding_property_non_reactive -->
+			<Component bind:this={components[depth]} {data} {form} params={page.params} {error} />
+		{/if}
+
+		{#snippet failed(error)}
+			<Error {error} />
+		{/snippet}
+	</svelte:boundary>
+{/snippet}
+
+{@render node(tree, 0)}
+
+{#if mounted}
+	<div
+		id="svelte-announcer"
+		aria-live="assertive"
+		aria-atomic="true"
+		style="position: absolute; left: 0; top: 0; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; width: 1px; height: 1px"
+	>
+		{#if navigated}
+			{title}
+		{/if}
+	</div>
+{/if}