@sveltejs/kit 2.26.0 → 2.27.0

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

@@ -0,0 +1,163 @@
+/** @import { RemoteResource, RemotePrerenderFunction } from '@sveltejs/kit' */
+/** @import { RemotePrerenderInputsGenerator, RemoteInfo, MaybePromise } from 'types' */
+/** @import { StandardSchemaV1 } from '@standard-schema/spec' */
+import { error, json } from '@sveltejs/kit';
+import { DEV } from 'esm-env';
+import { getRequestEvent } from '../event.js';
+import { create_remote_cache_key, stringify, stringify_remote_arg } from '../../../shared.js';
+import { app_dir, base } from '__sveltekit/paths';
+import {
+	check_experimental,
+	create_validator,
+	get_response,
+	parse_remote_response,
+	run_remote_function
+} from './shared.js';
+import { get_event_state } from '../../../server/event-state.js';
+
+/**
+ * Creates a remote prerender function. When called from the browser, the function will be invoked on the server via a `fetch` call.
+ *
+ * See [Remote functions](https://svelte.dev/docs/kit/remote-functions#prerender) for full documentation.
+ *
+ * @template Output
+ * @overload
+ * @param {() => MaybePromise<Output>} fn
+ * @param {{ inputs?: RemotePrerenderInputsGenerator<void>, dynamic?: boolean }} [options]
+ * @returns {RemotePrerenderFunction<void, Output>}
+ * @since 2.27
+ */
+/**
+ * Creates a remote prerender function. When called from the browser, the function will be invoked on the server via a `fetch` call.
+ *
+ * See [Remote functions](https://svelte.dev/docs/kit/remote-functions#prerender) for full documentation.
+ *
+ * @template Input
+ * @template Output
+ * @overload
+ * @param {'unchecked'} validate
+ * @param {(arg: Input) => MaybePromise<Output>} fn
+ * @param {{ inputs?: RemotePrerenderInputsGenerator<Input>, dynamic?: boolean }} [options]
+ * @returns {RemotePrerenderFunction<Input, Output>}
+ * @since 2.27
+ */
+/**
+ * Creates a remote prerender function. When called from the browser, the function will be invoked on the server via a `fetch` call.
+ *
+ * See [Remote functions](https://svelte.dev/docs/kit/remote-functions#prerender) for full documentation.
+ *
+ * @template {StandardSchemaV1} Schema
+ * @template Output
+ * @overload
+ * @param {Schema} schema
+ * @param {(arg: StandardSchemaV1.InferOutput<Schema>) => MaybePromise<Output>} fn
+ * @param {{ inputs?: RemotePrerenderInputsGenerator<StandardSchemaV1.InferOutput<Schema>>, dynamic?: boolean }} [options]
+ * @returns {RemotePrerenderFunction<StandardSchemaV1.InferOutput<Schema>, Output>}
+ * @since 2.27
+ */
+/**
+ * @template Input
+ * @template Output
+ * @param {any} validate_or_fn
+ * @param {any} [fn_or_options]
+ * @param {{ inputs?: RemotePrerenderInputsGenerator<Input>, dynamic?: boolean }} [maybe_options]
+ * @returns {RemotePrerenderFunction<Input, Output>}
+ * @since 2.27
+ */
+/*@__NO_SIDE_EFFECTS__*/
+export function prerender(validate_or_fn, fn_or_options, maybe_options) {
+	check_experimental('prerender');
+
+	const maybe_fn = typeof fn_or_options === 'function' ? fn_or_options : undefined;
+
+	/** @type {typeof maybe_options} */
+	const options = maybe_options ?? (maybe_fn ? undefined : fn_or_options);
+
+	/** @type {(arg?: Input) => MaybePromise<Output>} */
+	const fn = maybe_fn ?? validate_or_fn;
+
+	/** @type {(arg?: any) => MaybePromise<Input>} */
+	const validate = create_validator(validate_or_fn, maybe_fn);
+
+	/** @type {RemoteInfo} */
+	const __ = {
+		type: 'prerender',
+		id: '',
+		name: '',
+		has_arg: !!maybe_fn,
+		inputs: options?.inputs,
+		dynamic: options?.dynamic
+	};
+
+	/** @type {RemotePrerenderFunction<Input, Output> & { __: RemoteInfo }} */
+	const wrapper = (arg) => {
+		/** @type {Promise<Output> & Partial<RemoteResource<Output>>} */
+		const promise = (async () => {
+			const event = getRequestEvent();
+			const state = get_event_state(event);
+			const payload = stringify_remote_arg(arg, state.transport);
+			const id = __.id;
+			const url = `${base}/${app_dir}/remote/${id}${payload ? `/${payload}` : ''}`;
+
+			if (!state.prerendering && !DEV && !event.isRemoteRequest) {
+				try {
+					return await get_response(id, arg, event, async () => {
+						// TODO adapters can provide prerendered data more efficiently than
+						// fetching from the public internet
+						const response = await fetch(new URL(url, event.url.origin).href);
+
+						if (!response.ok) {
+							throw new Error('Prerendered response not found');
+						}
+
+						const prerendered = await response.json();
+
+						if (prerendered.type === 'error') {
+							error(prerendered.status, prerendered.error);
+						}
+
+						// TODO can we redirect here?
+
+						(state.remote_data ??= {})[create_remote_cache_key(id, payload)] = prerendered.result;
+						return parse_remote_response(prerendered.result, state.transport);
+					});
+				} catch {
+					// not available prerendered, fallback to normal function
+				}
+			}
+
+			if (state.prerendering?.remote_responses.has(url)) {
+				return /** @type {Promise<any>} */ (state.prerendering.remote_responses.get(url));
+			}
+
+			const promise = get_response(id, arg, event, () =>
+				run_remote_function(event, false, arg, validate, fn)
+			);
+
+			if (state.prerendering) {
+				state.prerendering.remote_responses.set(url, promise);
+			}
+
+			const result = await promise;
+
+			if (state.prerendering) {
+				const body = { type: 'result', result: stringify(result, state.transport) };
+				state.prerendering.dependencies.set(url, {
+					body: JSON.stringify(body),
+					response: json(body)
+				});
+			}
+
+			// TODO this is missing error/loading/current/status
+			return result;
+		})();
+
+		promise.catch(() => {});
+
+		return /** @type {RemoteResource<Output>} */ (promise);
+	};
+
+	Object.defineProperty(wrapper, '__', { value: __ });
+
+	return wrapper;
+}

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

@@ -0,0 +1,115 @@
+/** @import { RemoteQuery, RemoteQueryFunction } from '@sveltejs/kit' */
+/** @import { RemoteInfo, MaybePromise } from 'types' */
+/** @import { StandardSchemaV1 } from '@standard-schema/spec' */
+import { getRequestEvent } from '../event.js';
+import { create_remote_cache_key, stringify_remote_arg } from '../../../shared.js';
+import { prerendering } from '__sveltekit/environment';
+import {
+	check_experimental,
+	create_validator,
+	get_response,
+	run_remote_function
+} from './shared.js';
+import { get_event_state } from '../../../server/event-state.js';
+
+/**
+ * Creates a remote query. When called from the browser, the function will be invoked on the server via a `fetch` call.
+ *
+ * See [Remote functions](https://svelte.dev/docs/kit/remote-functions#query) for full documentation.
+ *
+ * @template Output
+ * @overload
+ * @param {() => MaybePromise<Output>} fn
+ * @returns {RemoteQueryFunction<void, Output>}
+ * @since 2.27
+ */
+/**
+ * Creates a remote query. When called from the browser, the function will be invoked on the server via a `fetch` call.
+ *
+ * See [Remote functions](https://svelte.dev/docs/kit/remote-functions#query) for full documentation.
+ *
+ * @template Input
+ * @template Output
+ * @overload
+ * @param {'unchecked'} validate
+ * @param {(arg: Input) => MaybePromise<Output>} fn
+ * @returns {RemoteQueryFunction<Input, Output>}
+ * @since 2.27
+ */
+/**
+ * Creates a remote query. When called from the browser, the function will be invoked on the server via a `fetch` call.
+ *
+ * See [Remote functions](https://svelte.dev/docs/kit/remote-functions#query) for full documentation.
+ *
+ * @template {StandardSchemaV1} Schema
+ * @template Output
+ * @overload
+ * @param {Schema} schema
+ * @param {(arg: StandardSchemaV1.InferOutput<Schema>) => MaybePromise<Output>} fn
+ * @returns {RemoteQueryFunction<StandardSchemaV1.InferOutput<Schema>, Output>}
+ * @since 2.27
+ */
+/**
+ * @template Input
+ * @template Output
+ * @param {any} validate_or_fn
+ * @param {(args?: Input) => MaybePromise<Output>} [maybe_fn]
+ * @returns {RemoteQueryFunction<Input, Output>}
+ * @since 2.27
+ */
+/*@__NO_SIDE_EFFECTS__*/
+export function query(validate_or_fn, maybe_fn) {
+	check_experimental('query');
+
+	/** @type {(arg?: Input) => Output} */
+	const fn = maybe_fn ?? validate_or_fn;
+
+	/** @type {(arg?: any) => MaybePromise<Input>} */
+	const validate = create_validator(validate_or_fn, maybe_fn);
+
+	/** @type {RemoteInfo} */
+	const __ = { type: 'query', id: '', name: '' };
+
+	/** @type {RemoteQueryFunction<Input, Output> & { __: RemoteInfo }} */
+	const wrapper = (arg) => {
+		if (prerendering) {
+			throw new Error(
+				`Cannot call query '${__.name}' while prerendering, as prerendered pages need static data. Use 'prerender' from $app/server instead`
+			);
+		}
+
+		const event = getRequestEvent();
+
+		/** @type {Promise<any> & Partial<RemoteQuery<any>>} */
+		const promise = get_response(__.id, arg, event, () =>
+			run_remote_function(event, false, arg, validate, fn)
+		);
+
+		promise.catch(() => {});
+
+		promise.refresh = async () => {
+			const event = getRequestEvent();
+			const state = get_event_state(event);
+			const refreshes = state?.refreshes;
+
+			if (!refreshes) {
+				throw new Error(
+					`Cannot call refresh on query '${__.name}' because it is not executed in the context of a command/form remote function`
+				);
+			}
+
+			const cache_key = create_remote_cache_key(__.id, stringify_remote_arg(arg, state.transport));
+			refreshes[cache_key] = await /** @type {Promise<any>} */ (promise);
+		};
+
+		promise.withOverride = () => {
+			throw new Error(`Cannot call '${__.name}.withOverride()' on the server`);
+		};
+
+		return /** @type {RemoteQuery<Output>} */ (promise);
+	};
+
+	Object.defineProperty(wrapper, '__', { value: __ });
+
+	return wrapper;
+}

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

@@ -0,0 +1,153 @@
+/** @import { RequestEvent } from '@sveltejs/kit' */
+/** @import { ServerHooks, MaybePromise } from 'types' */
+import { parse } from 'devalue';
+import { error } from '@sveltejs/kit';
+import { getRequestEvent, with_event } from '../event.js';
+import { create_remote_cache_key, stringify_remote_arg } from '../../../shared.js';
+import { EVENT_STATE, get_event_state } from '../../../server/event-state.js';
+
+/**
+ * @param {any} validate_or_fn
+ * @param {(arg?: any) => any} [maybe_fn]
+ * @returns {(arg?: any) => MaybePromise<any>}
+ */
+export function create_validator(validate_or_fn, maybe_fn) {
+	// prevent functions without validators being called with arguments
+	if (!maybe_fn) {
+		return (arg) => {
+			if (arg !== undefined) {
+				error(400, 'Bad Request');
+			}
+		};
+	}
+
+	// if 'unchecked', pass input through without validating
+	if (validate_or_fn === 'unchecked') {
+		return (arg) => arg;
+	}
+
+	// use https://standardschema.dev validator if provided
+	if ('~standard' in validate_or_fn) {
+		return async (arg) => {
+			// Get event before async validation to ensure it's available in server environments without AsyncLocalStorage, too
+			const event = getRequestEvent();
+			const state = get_event_state(event);
+			const validate = validate_or_fn['~standard'].validate;
+
+			const result = await validate(arg);
+
+			// if the `issues` field exists, the validation failed
+			if (result.issues) {
+				error(
+					400,
+					await state.handleValidationError({
+						...result,
+						event
+					})
+				);
+			}
+
+			return result.value;
+		};
+	}
+
+	throw new Error(
+		'Invalid validator passed to remote function. Expected "unchecked" or a Standard Schema (https://standardschema.dev)'
+	);
+}
+
+/**
+ * In case of a single remote function call, just returns the result.
+ *
+ * In case of a full page reload, returns the response for a remote function call,
+ * either from the cache or by invoking the function.
+ * Also saves an uneval'ed version of the result for later HTML inlining for hydration.
+ *
+ * @template {MaybePromise<any>} T
+ * @param {string} id
+ * @param {any} arg
+ * @param {RequestEvent} event
+ * @param {() => Promise<T>} get_result
+ * @returns {Promise<T>}
+ */
+export function get_response(id, arg, event, get_result) {
+	const state = get_event_state(event);
+	const cache_key = create_remote_cache_key(id, stringify_remote_arg(arg, state.transport));
+
+	return ((state.remote_data ??= {})[cache_key] ??= get_result());
+}
+
+/** @param {string} feature */
+export function check_experimental(feature) {
+	if (!__SVELTEKIT_EXPERIMENTAL__REMOTE_FUNCTIONS__) {
+		throw new Error(
+			`Cannot use \`${feature}\` from \`$app/server\` without the experimental flag set to true. Please set kit.experimental.remoteFunctions to \`true\` in your config.`
+		);
+	}
+}
+
+/**
+ * @param {any} data
+ * @param {ServerHooks['transport']} transport
+ */
+export function parse_remote_response(data, transport) {
+	/** @type {Record<string, any>} */
+	const revivers = {};
+	for (const key in transport) {
+		revivers[key] = transport[key].decode;
+	}
+
+	return parse(data, revivers);
+}
+
+/**
+ * Like `with_event` but removes things from `event` you cannot see/call in remote functions, such as `setHeaders`.
+ * @template T
+ * @param {RequestEvent} event
+ * @param {boolean} allow_cookies
+ * @param {any} arg
+ * @param {(arg: any) => any} validate
+ * @param {(arg?: any) => T} fn
+ */
+export async function run_remote_function(event, allow_cookies, arg, validate, fn) {
+	/** @type {RequestEvent} */
+	const cleansed = {
+		...event,
+		// @ts-expect-error this isn't part of the public `RequestEvent` type
+		[EVENT_STATE]: event[EVENT_STATE],
+		setHeaders: () => {
+			throw new Error('setHeaders is not allowed in remote functions');
+		},
+		cookies: {
+			...event.cookies,
+			set: (name, value, opts) => {
+				if (!allow_cookies) {
+					throw new Error('Cannot set cookies in `query` or `prerender` functions');
+				}
+
+				if (opts.path && !opts.path.startsWith('/')) {
+					throw new Error('Cookies set in remote functions must have an absolute path');
+				}
+
+				return event.cookies.set(name, value, opts);
+			},
+			delete: (name, opts) => {
+				if (!allow_cookies) {
+					throw new Error('Cannot delete cookies in `query` or `prerender` functions');
+				}
+
+				if (opts.path && !opts.path.startsWith('/')) {
+					throw new Error('Cookies deleted in remote functions must have an absolute path');
+				}
+
+				return event.cookies.delete(name, opts);
+			}
+		},
+		route: { id: null },
+		url: new URL(event.url.origin)
+	};
+
+	// In two parts, each with_event, so that runtimes without async local storage can still get the event at the start of the function
+	const validated = await with_event(cleansed, () => validate(arg));
+	return with_event(cleansed, () => fn(validated));
+}

package/src/runtime/client/client.js

@@ -46,7 +46,6 @@ import { page, update, navigating } from './state.svelte.js';
 import { add_data_suffix, add_resolution_suffix } from '../pathname.js';
 
 export { load_css };
-
 const ICON_REL_ATTRIBUTES = new Set(['icon', 'shortcut icon', 'apple-touch-icon']);
 
 let errored = false;
@@ -174,9 +173,13 @@ let default_error_loader;
 let container;
 /** @type {HTMLElement} */
 let target;
+
 /** @type {import('./types.js').SvelteKitApp} */
 export let app;
 
+/** @type {Record<string, any>} */
+export let remote_responses;
+
 /** @type {Array<((url: URL) => boolean)>} */
 const invalidated = [];
 
@@ -225,7 +228,7 @@ let current = {
 
 /** this being true means we SSR'd */
 let hydrated = false;
-let started = false;
+export let started = false;
 let autoscroll = true;
 let updating = false;
 let is_navigating = false;
@@ -256,7 +259,13 @@ let token;
 const preload_tokens = new Set();
 
 /** @type {Promise<void> | null} */
-let pending_invalidate;
+export let pending_invalidate;
+
+/**
+ * @type {Map<string, {count: number, resource: any}>}
+ * A map of id -> query info with all queries that currently exist in the app.
+ */
+export const query_map = new Map();
 
 /**
  * @param {import('./types.js').SvelteKitApp} _app
@@ -279,6 +288,7 @@ export async function start(_app, _target, hydrate) {
 	}
 
 	app = _app;
+	remote_responses = hydrate?.remote ?? {};
 
 	await _app.hooks.init?.();
 
@@ -339,7 +349,7 @@ export async function start(_app, _target, hydrate) {
 	_start_router();
 }
 
-async function _invalidate() {
+async function _invalidate(include_load_functions = true, reset_page_state = true) {
 	// Accept all invalidations as they come, don't swallow any while another invalidation
 	// is running because subsequent invalidations may make earlier ones outdated,
 	// but batch multiple synchronous invalidations.
@@ -356,20 +366,36 @@ async function _invalidate() {
 	// at which point the invalidation should take over and "win".
 	load_cache = null;
 
-	const navigation_result = intent && (await load_route(intent));
-	if (!navigation_result || nav_token !== token) return;
-
-	if (navigation_result.type === 'redirect') {
-		return _goto(new URL(navigation_result.location, current.url).href, {}, 1, nav_token);
+	// Rerun queries
+	if (force_invalidation) {
+		query_map.forEach(({ resource }) => {
+			resource.refresh?.();
+		});
 	}
 
-	if (navigation_result.props.page) {
-		Object.assign(page, navigation_result.props.page);
+	if (include_load_functions) {
+		const prev_state = page.state;
+		const navigation_result = intent && (await load_route(intent));
+		if (!navigation_result || nav_token !== token) return;
+
+		if (navigation_result.type === 'redirect') {
+			return _goto(new URL(navigation_result.location, current.url).href, {}, 1, nav_token);
+		}
+
+		// This is a bit hacky but allows us not having to pass that boolean around, making things harder to reason about
+		if (!reset_page_state) {
+			navigation_result.props.page.state = prev_state;
+		}
+		update(navigation_result.props.page);
+		current = navigation_result.state;
+		reset_invalidation();
+		root.$set(navigation_result.props);
+	} else {
+		reset_invalidation();
 	}
-	current = navigation_result.state;
-	reset_invalidation();
-	root.$set(navigation_result.props);
-	update(navigation_result.props.page);
+
+	// Don't use allSettled yet because it's too new
+	await Promise.all([...query_map.values()].map(({ resource }) => resource)).catch(noop);
 }
 
 function reset_invalidation() {
@@ -406,7 +432,9 @@ function persist_state() {
  * @param {{}} [nav_token]
  */
 async function _goto(url, options, redirect_count, nav_token) {
-	return navigate({
+	/** @type {string[]} */
+	let query_keys;
+	const result = await navigate({
 		type: 'goto',
 		url: resolve_url(url),
 		keepfocus: options.keepFocus,
@@ -418,6 +446,7 @@ async function _goto(url, options, redirect_count, nav_token) {
 		accept: () => {
 			if (options.invalidateAll) {
 				force_invalidation = true;
+				query_keys = [...query_map.keys()];
 			}
 
 			if (options.invalidate) {
@@ -425,6 +454,22 @@ async function _goto(url, options, redirect_count, nav_token) {
 			}
 		}
 	});
+	if (options.invalidateAll) {
+		// TODO the ticks shouldn't be necessary, something inside Svelte itself is buggy
+		// when a query in a layout that still exists after page change is refreshed earlier than this
+		void svelte
+			.tick()
+			.then(svelte.tick)
+			.then(() => {
+				query_map.forEach(({ resource }, key) => {
+					// Only refresh those that already existed on the old page
+					if (query_keys?.includes(key)) {
+						resource.refresh?.();
+					}
+				});
+			});
+	}
+	return result;
 }
 
 /** @param {import('./types.js').NavigationIntent} intent */
@@ -1993,6 +2038,21 @@ export function invalidateAll() {
 	return _invalidate();
 }
 
+/**
+ * Causes all currently active remote functions to refresh, and all `load` functions belonging to the currently active page to re-run (unless disabled via the option argument).
+ * Returns a `Promise` that resolves when the page is subsequently updated.
+ * @param {{ includeLoadFunctions?: boolean }} [options]
+ * @returns {Promise<void>}
+ */
+export function refreshAll({ includeLoadFunctions = true } = {}) {
+	if (!BROWSER) {
+		throw new Error('Cannot call refreshAll() on the server');
+	}
+
+	force_invalidation = true;
+	return _invalidate(includeLoadFunctions, false);
+}
+
 /**
  * Programmatically preloads the given page, which means
  *  1. ensuring that the code for the page is loaded, and
@@ -2174,29 +2234,7 @@ export async function applyAction(result) {
 	}
 
 	if (result.type === 'error') {
-		const url = new URL(location.href);
-
-		const { branch, route } = current;
-		if (!route) return;
-
-		const error_load = await load_nearest_error_page(current.branch.length, branch, route.errors);
-		if (error_load) {
-			const navigation_result = get_navigation_result_from_branch({
-				url,
-				params: current.params,
-				branch: branch.slice(0, error_load.idx).concat(error_load.node),
-				status: result.status ?? 500,
-				error: result.error,
-				route
-			});
-
-			current = navigation_result.state;
-
-			root.$set(navigation_result.props);
-			update(navigation_result.props.page);
-
-			void tick().then(() => reset_focus(current.url));
-		}
+		await set_nearest_error_page(result.error, result.status);
 	} else if (result.type === 'redirect') {
 		await _goto(result.location, { invalidateAll: true }, 0);
 	} else {
@@ -2221,6 +2259,36 @@ export async function applyAction(result) {
 	}
 }
 
+/**
+ * @param {App.Error} error
+ * @param {number} status
+ */
+export async function set_nearest_error_page(error, status = 500) {
+	const url = new URL(location.href);
+
+	const { branch, route } = current;
+	if (!route) return;
+
+	const error_load = await load_nearest_error_page(current.branch.length, branch, route.errors);
+	if (error_load) {
+		const navigation_result = get_navigation_result_from_branch({
+			url,
+			params: current.params,
+			branch: branch.slice(0, error_load.idx).concat(error_load.node),
+			status,
+			error,
+			route
+		});
+
+		current = navigation_result.state;
+
+		root.$set(navigation_result.props);
+		update(navigation_result.props.page);
+
+		void tick().then(() => reset_focus(current.url));
+	}
+}
+
 function _start_router() {
 	history.scrollRestoration = 'manual';
 

package/src/runtime/client/fetcher.js

@@ -1,5 +1,5 @@
 import { BROWSER, DEV } from 'esm-env';
-import { hash } from '../hash.js';
+import { hash } from '../../utils/hash.js';
 import { b64_decode } from '../utils.js';
 
 let loading = 0;