@sveltejs/kit 2.26.0 → 2.27.0

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

@@ -0,0 +1,219 @@
+/** @import { RemoteQueryFunction } from '@sveltejs/kit' */
+import { app_dir } from '__sveltekit/paths';
+import { remote_responses, started } from '../client.js';
+import { tick } from 'svelte';
+import { create_remote_function, remote_request } from './shared.svelte.js';
+
+/**
+ * @param {string} id
+ * @returns {RemoteQueryFunction<any, any>}
+ */
+export function query(id) {
+	return create_remote_function(id, (cache_key, payload) => {
+		return new Query(cache_key, async () => {
+			if (!started) {
+				const result = remote_responses[cache_key];
+				if (result) {
+					return result;
+				}
+			}
+
+			const url = `/${app_dir}/remote/${id}${payload ? `?payload=${payload}` : ''}`;
+
+			return await remote_request(url);
+		});
+	});
+}
+
+/**
+ * @template T
+ * @implements {Partial<Promise<T>>}
+ */
+export class Query {
+	/** @type {string} */
+	_key;
+
+	#init = false;
+	/** @type {() => Promise<T>} */
+	#fn;
+	#loading = $state(true);
+	/** @type {Array<() => void>} */
+	#latest = [];
+
+	/** @type {boolean} */
+	#ready = $state(false);
+	/** @type {T | undefined} */
+	#raw = $state.raw();
+	/** @type {Promise<void>} */
+	#promise;
+	/** @type {Array<(old: T) => T>} */
+	#overrides = $state([]);
+
+	/** @type {T | undefined} */
+	#current = $derived.by(() => {
+		// don't reduce undefined value
+		if (!this.#ready) return undefined;
+
+		return this.#overrides.reduce((v, r) => r(v), /** @type {T} */ (this.#raw));
+	});
+
+	#error = $state.raw(undefined);
+
+	/** @type {Promise<T>['then']} */
+	// @ts-expect-error TS doesn't understand that the promise returns something
+	#then = $derived.by(() => {
+		const p = this.#promise;
+		this.#overrides.length;
+
+		return async (resolve, reject) => {
+			try {
+				await p;
+				// svelte-ignore await_reactivity_loss
+				await tick();
+				resolve?.(/** @type {T} */ (this.#current));
+			} catch (error) {
+				reject?.(error);
+			}
+		};
+	});
+
+	/**
+	 * @param {string} key
+	 * @param {() => Promise<T>} fn
+	 */
+	constructor(key, fn) {
+		this._key = key;
+		this.#fn = fn;
+		this.#promise = $state.raw(this.#run());
+	}
+
+	#run() {
+		// Prevent state_unsafe_mutation error on first run when the resource is created within the template
+		if (this.#init) {
+			this.#loading = true;
+		} else {
+			this.#init = true;
+		}
+
+		// Don't use Promise.withResolvers, it's too new still
+		/** @type {() => void} */
+		let resolve;
+		/** @type {(e?: any) => void} */
+		let reject;
+		/** @type {Promise<void>} */
+		const promise = new Promise((res, rej) => {
+			resolve = res;
+			reject = rej;
+		});
+
+		this.#latest.push(
+			// @ts-expect-error it's defined at this point
+			resolve
+		);
+
+		Promise.resolve(this.#fn())
+			.then((value) => {
+				// Skip the response if resource was refreshed with a later promise while we were waiting for this one to resolve
+				const idx = this.#latest.indexOf(resolve);
+				if (idx === -1) return;
+
+				this.#latest.splice(0, idx).forEach((r) => r());
+				this.#ready = true;
+				this.#loading = false;
+				this.#raw = value;
+				this.#error = undefined;
+
+				resolve();
+			})
+			.catch((e) => {
+				const idx = this.#latest.indexOf(resolve);
+				if (idx === -1) return;
+
+				this.#latest.splice(0, idx).forEach((r) => r());
+				this.#error = e;
+				this.#loading = false;
+				reject(e);
+			});
+
+		return promise;
+	}
+
+	get then() {
+		return this.#then;
+	}
+
+	get catch() {
+		this.#then;
+		return (/** @type {any} */ reject) => {
+			return this.#then(undefined, reject);
+		};
+	}
+
+	get finally() {
+		this.#then;
+		return (/** @type {any} */ fn) => {
+			return this.#then(
+				() => fn(),
+				() => fn()
+			);
+		};
+	}
+
+	get current() {
+		return this.#current;
+	}
+
+	get error() {
+		return this.#error;
+	}
+
+	/**
+	 * Returns true if the resource is loading or reloading.
+	 */
+	get loading() {
+		return this.#loading;
+	}
+
+	/**
+	 * Returns true once the resource has been loaded for the first time.
+	 */
+	get ready() {
+		return this.#ready;
+	}
+
+	/**
+	 * @returns {Promise<void>}
+	 */
+	refresh() {
+		return (this.#promise = this.#run());
+	}
+
+	/**
+	 * @param {T} value
+	 */
+	set(value) {
+		this.#ready = true;
+		this.#loading = false;
+		this.#error = undefined;
+		this.#raw = value;
+		this.#promise = Promise.resolve();
+	}
+
+	/**
+	 * @param {(old: T) => T} fn
+	 */
+	withOverride(fn) {
+		this.#overrides.push(fn);
+
+		return {
+			_key: this._key,
+			release: () => {
+				const i = this.#overrides.indexOf(fn);
+
+				if (i !== -1) {
+					this.#overrides.splice(i, 1);
+				}
+			}
+		};
+	}
+}

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

@@ -0,0 +1,143 @@
+/** @import { RemoteQueryOverride } from '@sveltejs/kit' */
+/** @import { RemoteFunctionResponse } from 'types' */
+/** @import { Query } from './query.svelte.js' */
+import * as devalue from 'devalue';
+import { app, goto, invalidateAll, query_map } from '../client.js';
+import { HttpError, Redirect } from '@sveltejs/kit/internal';
+import { tick } from 'svelte';
+import { create_remote_cache_key, stringify_remote_arg } from '../../shared.js';
+
+/**
+ *
+ * @param {string} url
+ */
+export async function remote_request(url) {
+	const response = await fetch(url);
+
+	if (!response.ok) {
+		throw new HttpError(500, 'Failed to execute remote function');
+	}
+
+	const result = /** @type {RemoteFunctionResponse} */ (await response.json());
+
+	if (result.type === 'redirect') {
+		// resource_cache.delete(cache_key);
+		// version++;
+		// await goto(result.location);
+		// /** @type {Query<any>} */ (resource).refresh();
+		// TODO double-check this
+		await goto(result.location);
+		await new Promise((r) => setTimeout(r, 100));
+		throw new Redirect(307, result.location);
+	}
+
+	if (result.type === 'error') {
+		throw new HttpError(result.status ?? 500, result.error);
+	}
+
+	return devalue.parse(result.result, app.decoders);
+}
+
+/**
+ * Client-version of the `query`/`prerender`/`cache` function from `$app/server`.
+ * @param {string} id
+ * @param {(key: string, args: string) => any} create
+ */
+export function create_remote_function(id, create) {
+	return (/** @type {any} */ arg) => {
+		const payload = stringify_remote_arg(arg, app.hooks.transport);
+		const cache_key = create_remote_cache_key(id, payload);
+		let entry = query_map.get(cache_key);
+
+		let tracking = true;
+		try {
+			$effect.pre(() => {
+				if (entry) entry.count++;
+				return () => {
+					const entry = query_map.get(cache_key);
+					if (entry) {
+						entry.count--;
+						void tick().then(() => {
+							if (!entry.count && entry === query_map.get(cache_key)) {
+								query_map.delete(cache_key);
+							}
+						});
+					}
+				};
+			});
+		} catch {
+			tracking = false;
+		}
+
+		let resource = entry?.resource;
+		if (!resource) {
+			resource = create(cache_key, payload);
+
+			Object.defineProperty(resource, '_key', {
+				value: cache_key
+			});
+
+			query_map.set(
+				cache_key,
+				(entry = {
+					count: tracking ? 1 : 0,
+					resource
+				})
+			);
+
+			resource
+				.then(() => {
+					void tick().then(() => {
+						if (
+							!(/** @type {NonNullable<typeof entry>} */ (entry).count) &&
+							entry === query_map.get(cache_key)
+						) {
+							// If no one is tracking this resource anymore, we can delete it from the cache
+							query_map.delete(cache_key);
+						}
+					});
+				})
+				.catch(() => {
+					// error delete the resource from the cache
+					// TODO is that correct?
+					query_map.delete(cache_key);
+				});
+		}
+
+		return resource;
+	};
+}
+
+/**
+ * @param {Array<Query<any> | RemoteQueryOverride>} updates
+ */
+export function release_overrides(updates) {
+	for (const update of updates) {
+		if ('release' in update) {
+			update.release();
+		}
+	}
+}
+
+/**
+ * @param {string} stringified_refreshes
+ * @param {Array<Query<any> | RemoteQueryOverride>} updates
+ */
+export function refresh_queries(stringified_refreshes, updates = []) {
+	const refreshes = Object.entries(devalue.parse(stringified_refreshes, app.decoders));
+	if (refreshes.length > 0) {
+		// `refreshes` is a superset of `updates`
+		for (const [key, value] of refreshes) {
+			// If there was an optimistic update, release it right before we update the query
+			const update = updates.find((u) => u._key === key);
+			if (update && 'release' in update) {
+				update.release();
+			}
+			// Update the query with the new value
+			const entry = query_map.get(key);
+			entry?.resource.set(value);
+		}
+	} else {
+		void invalidateAll();
+	}
+}

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

@@ -125,4 +125,6 @@ export interface HydrateOptions {
 	server_route?: CSRRouteServer;
 	data: Array<ServerDataNode | null>;
 	form: Record<string, any> | null;
+	/** The results of all remote functions executed during SSR so that they can be reused during hydration */
+	remote: Record<string, any>;
 }

package/src/runtime/server/data/index.js

@@ -176,10 +176,12 @@ function json_response(json, status = 200) {
  * @param {Redirect} redirect
  */
 export function redirect_json_response(redirect) {
-	return json_response({
-		type: 'redirect',
-		location: redirect.location
-	});
+	return json_response(
+		/** @type {import('types').ServerRedirectNode} */ ({
+			type: 'redirect',
+			location: redirect.location
+		})
+	);
 }
 
 /**

package/src/runtime/server/event-state.js

@@ -0,0 +1,41 @@
+/** @import { RequestEvent } from '@sveltejs/kit' */
+/** @import { PrerenderOptions, ServerHooks, SSROptions, SSRState } from 'types' */
+
+export const EVENT_STATE = Symbol('remote');
+
+/**
+ * Internal state associated with the current `RequestEvent`,
+ * used for tracking things like remote function calls
+ * @typedef {{
+ * 	prerendering: PrerenderOptions | undefined
+ *  transport: ServerHooks['transport'];
+ *  handleValidationError: ServerHooks['handleValidationError'];
+ *  form_instances?: Map<any, any>;
+ *  form_result?: [key: any, value: any];
+ * 	remote_data?: Record<string, Promise<any>>;
+ *  refreshes?: Record<string, any>;
+ * }} RequestEventState
+ */
+
+/**
+ * @param {SSRState} state
+ * @param {SSROptions} options
+ * @returns {RequestEventState}
+ */
+export function create_event_state(state, options) {
+	return {
+		prerendering: state.prerendering,
+		transport: options.hooks.transport,
+		handleValidationError: options.hooks.handleValidationError
+	};
+}
+
+/**
+ * Returns internal state associated with the current `RequestEvent`
+ * @param {RequestEvent} event
+ * @returns {RequestEventState}
+ */
+export function get_event_state(event) {
+	// @ts-expect-error the symbol isn't exposed on the public `RequestEvent` type
+	return event[EVENT_STATE];
+}

package/src/runtime/server/index.js

@@ -111,6 +111,12 @@ export class Server {
 						(({ status, error }) =>
 							console.error((status === 404 && /** @type {Error} */ (error)?.message) || error)),
 					handleFetch: module.handleFetch || (({ request, fetch }) => fetch(request)),
+					handleValidationError:
+						module.handleValidationError ||
+						(({ issues }) => {
+							console.error('Remote function schema validation failed:', issues);
+							return { message: 'Bad Request' };
+						}),
 					reroute: module.reroute || (() => {}),
 					transport: module.transport || {}
 				};
@@ -124,14 +130,17 @@ export class Server {
 				if (module.init) {
 					await module.init();
 				}
-			} catch (error) {
+			} catch (e) {
 				if (DEV) {
 					this.#options.hooks = {
 						handle: () => {
-							throw error;
+							throw e;
 						},
 						handleError: ({ error }) => console.error(error),
 						handleFetch: ({ request, fetch }) => fetch(request),
+						handleValidationError: () => {
+							return { message: 'Bad Request' };
+						},
 						reroute: () => {},
 						transport: {}
 					};
@@ -140,7 +149,7 @@ export class Server {
 						decoders: {}
 					});
 				} else {
-					throw error;
+					throw e;
 				}
 			}
 		})());

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

@@ -104,7 +104,7 @@ export async function handle_action_json_request(event, options, server) {
 /**
  * @param {HttpError | Error} error
  */
-function check_incorrect_fail_use(error) {
+export function check_incorrect_fail_use(error) {
 	return error instanceof ActionFailure
 		? new Error('Cannot "throw fail()". Use "return fail()"')
 		: error;

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

@@ -15,6 +15,7 @@ import { render_response } from './render.js';
 import { respond_with_error } from './respond_with_error.js';
 import { get_data_json } from '../data/index.js';
 import { DEV } from 'esm-env';
+import { get_remote_action, handle_remote_form_post } from '../remote.js';
 import { PageNodes } from '../../../utils/page_nodes.js';
 
 /**
@@ -54,9 +55,15 @@ export async function render_page(event, page, options, manifest, state, nodes,
 		let action_result = undefined;
 
 		if (is_action_request(event)) {
-			// for action requests, first call handler in +page.server.js
-			// (this also determines status code)
-			action_result = await handle_action_request(event, leaf_node.server);
+			const remote_id = get_remote_action(event.url);
+			if (remote_id) {
+				action_result = await handle_remote_form_post(event, manifest, remote_id);
+			} else {
+				// for action requests, first call handler in +page.server.js
+				// (this also determines status code)
+				action_result = await handle_action_request(event, leaf_node.server);
+			}
+
 			if (action_result?.type === 'redirect') {
 				return redirect_response(action_result.status, action_result.location);
 			}

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

@@ -197,21 +197,27 @@ export async function load_data({
 }) {
 	const server_data_node = await server_data_promise;
 
-	if (!node?.universal?.load) {
+	const load = node?.universal?.load;
+
+	if (!load) {
 		return server_data_node?.data ?? null;
 	}
 
-	const result = await node.universal.load.call(null, {
-		url: event.url,
-		params: event.params,
-		data: server_data_node?.data ?? null,
-		route: event.route,
-		fetch: create_universal_fetch(event, state, fetched, csr, resolve_opts),
-		setHeaders: event.setHeaders,
-		depends: () => {},
-		parent,
-		untrack: (fn) => fn()
-	});
+	// We're adding getRequestEvent context to the universal load function
+	// in order to be able to use remote calls within it.
+	const result = await with_event(event, () =>
+		load.call(null, {
+			url: event.url,
+			params: event.params,
+			data: server_data_node?.data ?? null,
+			route: event.route,
+			fetch: create_universal_fetch(event, state, fetched, csr, resolve_opts),
+			setHeaders: event.setHeaders,
+			depends: () => {},
+			parent,
+			untrack: (fn) => fn()
+		})
+	);
 
 	if (__SVELTEKIT_DEV__) {
 		validate_load_response(result, node.universal_id);

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

@@ -3,7 +3,7 @@ import { readable, writable } from 'svelte/store';
 import { DEV } from 'esm-env';
 import { text } from '@sveltejs/kit';
 import * as paths from '__sveltekit/paths';
-import { hash } from '../../hash.js';
+import { hash } from '../../../utils/hash.js';
 import { serialize_data } from './serialize_data.js';
 import { s } from '../../../utils/misc.js';
 import { Csp } from './csp.js';
@@ -15,6 +15,8 @@ import { SVELTE_KIT_ASSETS } from '../../../constants.js';
 import { SCHEME } from '../../../utils/url.js';
 import { create_server_routing_response, generate_route_object } from './server_routing.js';
 import { add_resolution_suffix } from '../../pathname.js';
+import { with_event } from '../../app/server/event.js';
+import { get_event_state } from '../event-state.js';
 
 // TODO rename this function/module
 
@@ -189,14 +191,14 @@ export async function render_response({
 			};
 
 			try {
-				rendered = options.root.render(props, render_opts);
+				rendered = with_event(event, () => options.root.render(props, render_opts));
 			} finally {
 				globalThis.fetch = fetch;
 				paths.reset();
 			}
 		} else {
 			try {
-				rendered = options.root.render(props, render_opts);
+				rendered = with_event(event, () => options.root.render(props, render_opts));
 			} finally {
 				paths.reset();
 			}
@@ -386,7 +388,7 @@ export async function render_response({
 		blocks.push('const element = document.currentScript.parentElement;');
 
 		if (page_config.ssr) {
-			const serialized = { form: 'null', error: 'null' };
+			const serialized = { form: 'null', error: 'null', remote: 'null' };
 
 			if (form_value) {
 				serialized.form = uneval_action_response(
@@ -400,11 +402,35 @@ export async function render_response({
 				serialized.error = devalue.uneval(error);
 			}
 
+			const { remote_data } = get_event_state(event);
+
+			if (remote_data) {
+				/** @type {Record<string, any>} */
+				const remote = {};
+
+				for (const key in remote_data) {
+					remote[key] = await remote_data[key];
+				}
+
+				// TODO this is repeated in a few places — dedupe it
+				const replacer = (/** @type {any} */ thing) => {
+					for (const key in options.hooks.transport) {
+						const encoded = options.hooks.transport[key].encode(thing);
+						if (encoded) {
+							return `app.decode('${key}', ${devalue.uneval(encoded, replacer)})`;
+						}
+					}
+				};
+
+				serialized.remote = devalue.uneval(remote, replacer);
+			}
+
 			const hydrate = [
 				`node_ids: [${branch.map(({ node }) => node.index).join(', ')}]`,
 				`data: ${data}`,
 				`form: ${serialized.form}`,
-				`error: ${serialized.error}`
+				`error: ${serialized.error}`,
+				`remote: ${serialized.remote}`
 			];
 
 			if (status !== 200) {

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

@@ -1,5 +1,5 @@
 import { escape_html } from '../../../utils/escape.js';
-import { hash } from '../../hash.js';
+import { hash } from '../../../utils/hash.js';
 
 /**
  * Inside a script element, only `</script` and `<!--` hold special meaning to the HTML parser.