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

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.
 	 */

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/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
@@ -320,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 };
 }
@@ -504,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 ? [] : {};
 		}
 
@@ -512,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;
+	}
 }
 
 /**

package/src/runtime/server/index.js

@@ -27,7 +27,7 @@ export class Server {
 		this.#manifest = manifest;
 
 		// Since AsyncLocalStorage is not working in webcontainers, we don't reset `sync_store`
-		// in `src/exports/internal/event.js` and handle only one request at a time.
+		// in `src/exports/internal/server/event.js` and handle only one request at a time.
 		if (IN_WEBCONTAINER) {
 			const respond = this.respond.bind(this);
 

package/src/runtime/server/page/load_data.js

@@ -377,7 +377,7 @@ export function create_universal_fetch(event, state, fetched, csr, resolve_opts)
 						}
 
 						void push_fetched(base64_encode(result), true);
-					})();
+					})().catch(noop); // prevent unhandled rejection potentially crashing the process
 
 					return (teed_body = b);
 				}

package/src/runtime/server/page/render.js

@@ -91,7 +91,7 @@ export async function render_response({
 	// TODO if we add a client entry point one day, we will need to include inline_styles with the entry, otherwise stylesheets will be linked even if they are below inlineStyleThreshold
 	const inline_styles = new Map();
 
-	/** @type {ReturnType<typeof options.root.render>} */
+	/** @type {Awaited<ReturnType<typeof options.root.render>>} */
 	let rendered;
 
 	const form_value =
@@ -238,36 +238,27 @@ export async function render_response({
 				// portable as possible, but reset afterwards
 				if (paths.relative) paths.override({ base, assets });
 
-				const maybe_promise = options.root.render(props, render_opts);
 				// We have to invoke .then eagerly here in order to kick off rendering: it's only starting on access,
 				// and `await maybe_promise` would eagerly access the .then property but call its function only after a tick, which is too late
 				// for the paths.reset() below and for any eager getRequestEvent() calls during rendering without AsyncLocalStorage available.
-				const rendered =
-					options.async && 'then' in maybe_promise
-						? /** @type {ReturnType<typeof options.root.render> & Promise<any>} */ (
-								maybe_promise
-							).then((r) => r)
-						: maybe_promise;
-
-				// TODO 3.0 remove options.async
-				if (options.async) {
-					// we reset this synchronously, rather than after async rendering is complete,
-					// to avoid cross-talk between requests. This is a breaking change for
-					// anyone who opts into async SSR, since `base` and `assets` will no
-					// longer be relative to the current pathname.
-					// TODO 3.0 remove `base` and `assets` in favour of `resolve(...)` and `asset(...)`
-					paths.reset();
-				}
+				// TODO use render from 'svelte/server' here
+				const rendered = options.root.render(props, render_opts).then((r) => r);
 
-				const { head, html, css, hashes } = /** @type {ReturnType<typeof options.root.render>} */ (
-					options.async ? await rendered : rendered
-				);
+				// we reset this synchronously, rather than after async rendering is complete,
+				// to avoid cross-talk between requests. This is a breaking change for
+				// anyone who opts into async SSR, since `base` and `assets` will no
+				// longer be relative to the current pathname.
+				// TODO 3.0 remove `base` and `assets` in favour of `resolve(...)` and `asset(...)`
+				paths.reset();
+
+				// @ts-expect-error the legacy `render` API only returns html still, but the new API uses body
+				const { head, html: body, css, hashes } = await rendered;
 
 				if (hashes) {
 					csp.add_script_hashes(hashes.script);
 				}
 
-				return { head, html, css, hashes };
+				return { head, body, css, hashes };
 			});
 		} finally {
 			if (DEV) {
@@ -277,7 +268,7 @@ export async function render_response({
 			paths.reset(); // just in case `options.root.render(...)` failed
 		}
 	} else {
-		rendered = { head: '', html: '', css: { code: '', map: null }, hashes: { script: [] } };
+		rendered = { head: '', body: '', css: { code: '', map: null }, hashes: { script: [] } };
 	}
 
 	for (const { node } of branch) {
@@ -298,7 +289,7 @@ export async function render_response({
 	}
 
 	const head = new Head(rendered.head);
-	let body = rendered.html;
+	let body = rendered.body;
 
 	/** @param {string} path */
 	const prefixed = (path) => {

package/src/runtime/server/page/server_routing.js

@@ -69,15 +69,19 @@ export async function resolve_route(resolved_path, url, manifest) {
 		return text('Server-side route resolution disabled', { status: 400 });
 	}
 
-	const matchers = await manifest._.matchers();
-	const result = find_route(resolved_path, manifest._.client.routes, matchers);
-
-	return create_server_routing_response(
-		result?.route ?? null,
-		result?.params ?? {},
-		url,
-		manifest._.client
-	).response;
+	try {
+		const matchers = await manifest._.matchers();
+		const result = find_route(resolved_path, manifest._.client.routes, matchers);
+
+		return create_server_routing_response(
+			result?.route ?? null,
+			result?.params ?? {},
+			url,
+			manifest._.client
+		).response;
+	} catch {
+		return text('Error resolving route', { status: 500 });
+	}
 }
 
 /**

package/src/runtime/server/remote.js

@@ -368,7 +368,7 @@ export async function collect_remote_data(data, event, state, options) {
 	const promises = [];
 
 	if (state.remote.explicit) {
-		for (const [remote_key, { internals, promise }] of state.remote.explicit) {
+		for (const [remote_key, { internals, fn }] of state.remote.explicit) {
 			// there were explicit refreshes/reconnects (via `refresh()`/`set()`/`reconnect()`),
 			// so the client should apply these single-flight updates instead of calling `invalidateAll()`
 			data.r = true;
@@ -377,18 +377,27 @@ export async function collect_remote_data(data, event, state, options) {
 				internals.type === 'query_live' ? 'l' : internals.type[0]
 			);
 
-			await promise.then(
-				(v) => {
-					((data[type] ??= {})[remote_key] ??= {}).v = v;
-				},
-				async (e) => {
-					if (e instanceof Redirect) {
-						// already handled elsewhere
-						return;
-					}
+			// `fn` is deferred until now so the query runs after any state mutations
+			// in the command/form body. If the query was re-awaited in the meantime,
+			// `fn` returns the existing (fresh) cache entry rather than re-running.
+			// Kick off the query immediately and collect the promise so that multiple
+			// explicit refreshes run concurrently rather than serially.
+			const promise = fn();
+
+			promises.push(
+				promise.then(
+					(v) => {
+						((data[type] ??= {})[remote_key] ??= {}).v = v;
+					},
+					async (e) => {
+						if (e instanceof Redirect) {
+							// already handled elsewhere
+							return;
+						}
 
-					((data[type] ??= {})[remote_key] ??= {}).e = await convert_error(e);
-				}
+						((data[type] ??= {})[remote_key] ??= {}).e = await convert_error(e);
+					}
+				)
 			);
 		}
 	}

package/src/runtime/server/respond.js

@@ -336,14 +336,17 @@ export async function internal_respond(request, options, manifest, state) {
 	}
 
 	if (!state.prerendering?.fallback) {
-		// TODO this could theoretically break — should probably be inside a try-catch
-		const matchers = await manifest._.matchers();
-		const result = find_route(resolved_path, manifest._.routes, matchers);
-
-		if (result) {
-			route = result.route;
-			event.route = { id: route.id };
-			event.params = result.params;
+		try {
+			const matchers = await manifest._.matchers();
+			const result = find_route(resolved_path, manifest._.routes, matchers);
+
+			if (result) {
+				route = result.route;
+				event.route = { id: route.id };
+				event.params = result.params;
+			}
+		} catch (e) {
+			return await handle_fatal_error(event, event_state, options, e);
 		}
 	}
 

package/src/runtime/telemetry/otel.js

@@ -15,7 +15,7 @@ if (__SVELTEKIT_SERVER_TRACING_ENABLED__) {
 		})
 		.catch(() => {
 			throw new Error(
-				'Tracing is enabled (see the SvelteKit plugin `experimental.instrumentation.server` option in your vite.config.js), but `@opentelemetry/api` is not available. This error will likely resolve itself when you set up your tracing instrumentation in `instrumentation.server.js`. For more information, see https://svelte.dev/docs/kit/observability#opentelemetry-api'
+				'Tracing is enabled (see the SvelteKit plugin `tracing.server` option in your vite.config.js), but `@opentelemetry/api` is not available. This error will likely resolve itself when you set up your tracing instrumentation in `instrumentation.server.js`. For more information, see https://svelte.dev/docs/kit/observability#opentelemetry-api'
 			);
 		});
 }

package/src/types/ambient.d.ts

@@ -32,23 +32,27 @@ declare namespace App {
 	/**
 	 * The interface that defines `event.locals`, which can be accessed in server [hooks](https://svelte.dev/docs/kit/hooks) (`handle`, and `handleError`), server-only `load` functions, and `+server.js` files.
 	 */
+	// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 	export interface Locals {}
 
 	/**
-	 * Defines the common shape of the [page.data state](https://svelte.dev/docs/kit/$app-state#page) and [$page.data store](https://svelte.dev/docs/kit/$app-stores#page) - that is, the data that is shared between all pages.
+	 * Defines the common shape of the [page.data state](https://svelte.dev/docs/kit/$app-state#page) - that is, the data that is shared between all pages.
 	 * The `Load` and `ServerLoad` functions in `./$types` will be narrowed accordingly.
 	 * Use optional properties for data that is only present on specific pages. Do not add an index signature (`[key: string]: any`).
 	 */
+	// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 	export interface PageData {}
 
 	/**
 	 * The shape of the `page.state` object, which can be manipulated using the [`pushState`](https://svelte.dev/docs/kit/$app-navigation#pushState) and [`replaceState`](https://svelte.dev/docs/kit/$app-navigation#replaceState) functions from `$app/navigation`.
 	 */
+	// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 	export interface PageState {}
 
 	/**
 	 * If your adapter provides [platform-specific context](https://svelte.dev/docs/kit/adapters#Platform-specific-context) via `event.platform`, you can specify it here.
 	 */
+	// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 	export interface Platform {}
 }
 

package/src/types/global-private.d.ts

@@ -15,7 +15,7 @@ declare global {
 	const __SVELTEKIT_PATHS_ASSETS__: string;
 	const __SVELTEKIT_PATHS_BASE__: string;
 	const __SVELTEKIT_PATHS_RELATIVE__: boolean;
-	/** True if `config.experimental.instrumentation.server` is `true` */
+	/** True if `config.tracing.server` is `true` */
 	const __SVELTEKIT_SERVER_TRACING_ENABLED__: boolean;
 	/** True if `config.experimental.forkPreloads` is `true` */
 	const __SVELTEKIT_FORK_PRELOADS__: boolean;

package/src/types/internal.d.ts

@@ -204,7 +204,7 @@ export interface ManifestData {
 	};
 	nodes: PageNode[];
 	routes: RouteData[];
-	matchers: Record<string, string>;
+	params: string | null;
 }
 
 export interface RemoteChunk {
@@ -247,7 +247,7 @@ export type RecursiveRequired<T> = {
 	// Recursive implementation of TypeScript's Required utility type.
 	// Will recursively continue until it reaches a primitive or Function
 	// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
-	[K in keyof T]-?: Extract<T[K], Function> extends never // If it does not have a Function type
+	[K in keyof T]-?: Extract<T[K], Function | (`${string}:` & {})> extends never // If it does not have a Function type
 		? RecursiveRequired<T[K]> // recursively continue through.
 		: T[K]; // Use the exact type for everything else
 };
@@ -417,23 +417,23 @@ export interface ServerMetadata {
 	remotes: Map<string, Map<string, { type: RemoteInternals['type']; dynamic: boolean }>>;
 }
 
+// TODO get rid of this in favor us using just import('svelte').Component<any, any, any>
 export interface SSRComponent {
 	default: {
 		render(
 			props: Record<string, any>,
 			opts: { context: Map<any, any>; csp?: { nonce?: string; hash?: boolean } }
-		): {
-			html: string;
+		): Promise<{
+			body: string;
 			head: string;
 			css: {
 				code: string;
 				map: any; // TODO
 			};
-			/** Until we require all Svelte versions that support hashes, this might not be defined */
-			hashes?: {
+			hashes: {
 				script: Array<`sha256-${string}`>;
 			};
-		};
+		}>;
 	};
 }
 
@@ -493,7 +493,6 @@ export type SSRNodeLoader = () => Promise<SSRNode>;
 
 export interface SSROptions {
 	app_template_contains_nonce: boolean;
-	async: boolean;
 	csp: ValidatedConfig['kit']['csp'];
 	csrf_check_origin: boolean;
 	csrf_trusted_origins: string[];
@@ -598,7 +597,7 @@ export interface Uses {
 	search_params: Set<string>;
 }
 
-export type ValidatedConfig = Config & {
+export type ValidatedConfig = Omit<Config, 'kit'> & {
 	kit: ValidatedKitConfig;
 	extensions: string[];
 };
@@ -727,7 +726,7 @@ export interface RequestState {
 			string,
 			{
 				internals: RemoteInternals;
-				promise: Promise<any>;
+				fn: () => Promise<any>;
 			}
 		>;
 		/** Instances created via `myForm.for(...)` */

package/src/utils/error.js

@@ -30,7 +30,7 @@ export function coalesce_to_error(err) {
  * @param {unknown} error
  */
 export function normalize_error(error) {
-	return /** @type {import('../exports/internal/index.js').Redirect | HttpError | SvelteKitError | Error} */ (
+	return /** @type {import('../exports/internal/shared.js').Redirect | HttpError | SvelteKitError | Error} */ (
 		error
 	);
 }

package/src/utils/mime.js

@@ -0,0 +1,9 @@
+import { mimes, lookup } from 'mrmime';
+
+// `mrmime` does not include `.ico` in its database. The IANA-registered
+// type is `image/vnd.microsoft.icon`, but `image/x-icon` is the
+// semi-official type that is universally supported by browsers and other
+// tools, so we use that.
+mimes['ico'] = 'image/x-icon';
+
+export { lookup };