@sveltejs/kit 2.26.0 → 2.27.0

package/src/runtime/server/remote.js

@@ -0,0 +1,237 @@
+/** @import { ActionResult, RemoteForm, RequestEvent, SSRManifest } from '@sveltejs/kit' */
+/** @import { RemoteFunctionResponse, RemoteInfo, SSROptions } from 'types' */
+
+import { json, error } from '@sveltejs/kit';
+import { HttpError, Redirect, SvelteKitError } from '@sveltejs/kit/internal';
+import { app_dir, base } from '__sveltekit/paths';
+import { with_event } from '../app/server/event.js';
+import { is_form_content_type } from '../../utils/http.js';
+import { parse_remote_arg, stringify } from '../shared.js';
+import { handle_error_and_jsonify } from './utils.js';
+import { normalize_error } from '../../utils/error.js';
+import { check_incorrect_fail_use } from './page/actions.js';
+import { DEV } from 'esm-env';
+import { get_event_state } from './event-state.js';
+
+/**
+ * @param {RequestEvent} event
+ * @param {SSROptions} options
+ * @param {SSRManifest} manifest
+ * @param {string} id
+ */
+export async function handle_remote_call(event, options, manifest, id) {
+	const [hash, name, prerender_args] = id.split('/');
+	const remotes = manifest._.remotes;
+
+	if (!remotes[hash]) error(404);
+
+	const module = await remotes[hash]();
+	const fn = module[name];
+
+	if (!fn) error(404);
+
+	/** @type {RemoteInfo} */
+	const info = fn.__;
+	const transport = options.hooks.transport;
+
+	/** @type {string[] | undefined} */
+	let form_client_refreshes;
+
+	try {
+		if (info.type === 'form') {
+			if (!is_form_content_type(event.request)) {
+				throw new SvelteKitError(
+					415,
+					'Unsupported Media Type',
+					`Form actions expect form-encoded data — received ${event.request.headers.get(
+						'content-type'
+					)}`
+				);
+			}
+
+			const form_data = await event.request.formData();
+			form_client_refreshes = JSON.parse(
+				/** @type {string} */ (form_data.get('sveltekit:remote_refreshes')) ?? '[]'
+			);
+			form_data.delete('sveltekit:remote_refreshes');
+
+			const fn = info.fn;
+			const data = await with_event(event, () => fn(form_data));
+
+			return json(
+				/** @type {RemoteFunctionResponse} */ ({
+					type: 'result',
+					result: stringify(data, transport),
+					refreshes: stringify(
+						{
+							...get_event_state(event).refreshes,
+							...(await apply_client_refreshes(/** @type {string[]} */ (form_client_refreshes)))
+						},
+						transport
+					)
+				})
+			);
+		}
+
+		if (info.type === 'command') {
+			/** @type {{ payload: string, refreshes: string[] }} */
+			const { payload, refreshes } = await event.request.json();
+			const arg = parse_remote_arg(payload, transport);
+			const data = await with_event(event, () => fn(arg));
+			const refreshed = await apply_client_refreshes(refreshes);
+
+			return json(
+				/** @type {RemoteFunctionResponse} */ ({
+					type: 'result',
+					result: stringify(data, transport),
+					refreshes: stringify({ ...get_event_state(event).refreshes, ...refreshed }, transport)
+				})
+			);
+		}
+
+		const payload =
+			info.type === 'prerender'
+				? prerender_args
+				: /** @type {string} */ (
+						// new URL(...) necessary because we're hiding the URL from the user in the event object
+						new URL(event.request.url).searchParams.get('payload')
+					);
+
+		const data = await with_event(event, () => fn(parse_remote_arg(payload, transport)));
+
+		return json(
+			/** @type {RemoteFunctionResponse} */ ({
+				type: 'result',
+				result: stringify(data, transport)
+			})
+		);
+	} catch (error) {
+		if (error instanceof Redirect) {
+			const refreshes = {
+				...(get_event_state(event).refreshes ?? {}), // could be set by form actions
+				...(await apply_client_refreshes(form_client_refreshes ?? []))
+			};
+			return json({
+				type: 'redirect',
+				location: error.location,
+				refreshes: Object.keys(refreshes).length > 0 ? stringify(refreshes, transport) : undefined
+			});
+		}
+
+		return json(
+			/** @type {RemoteFunctionResponse} */ ({
+				type: 'error',
+				error: await handle_error_and_jsonify(event, options, error),
+				status: error instanceof HttpError || error instanceof SvelteKitError ? error.status : 500
+			}),
+			{
+				headers: {
+					'cache-control': 'private, no-store'
+				}
+			}
+		);
+	}
+
+	/** @param {string[]} refreshes */
+	async function apply_client_refreshes(refreshes) {
+		return Object.fromEntries(
+			await Promise.all(
+				refreshes.map(async (key) => {
+					const [hash, name, payload] = key.split('/');
+					const loader = manifest._.remotes[hash];
+
+					// TODO what do we do in this case? erroring after the mutation has happened is not great
+					if (!loader) error(400, 'Bad Request');
+
+					const module = await loader();
+					const fn = module[name];
+
+					if (!fn) error(400, 'Bad Request');
+
+					return [key, await with_event(event, () => fn(parse_remote_arg(payload, transport)))];
+				})
+			)
+		);
+	}
+}
+
+/**
+ * @param {RequestEvent} event
+ * @param {SSRManifest} manifest
+ * @param {string} id
+ * @returns {Promise<ActionResult>}
+ */
+export async function handle_remote_form_post(event, manifest, id) {
+	const [hash, name, action_id] = id.split('/');
+	const remotes = manifest._.remotes;
+	const module = await remotes[hash]?.();
+
+	let form = /** @type {RemoteForm<any>} */ (module?.[name]);
+
+	if (!form) {
+		event.setHeaders({
+			// https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/405
+			// "The server must generate an Allow header field in a 405 status code response"
+			allow: 'GET'
+		});
+		return {
+			type: 'error',
+			error: new SvelteKitError(
+				405,
+				'Method Not Allowed',
+				`POST method not allowed. No form actions exist for ${DEV ? `the page at ${event.route.id}` : 'this page'}`
+			)
+		};
+	}
+
+	if (action_id) {
+		// @ts-expect-error
+		form = with_event(event, () => form.for(JSON.parse(action_id)));
+	}
+
+	try {
+		const form_data = await event.request.formData();
+		const fn = /** @type {RemoteInfo & { type: 'form' }} */ (/** @type {any} */ (form).__).fn;
+
+		await with_event(event, () => fn(form_data));
+
+		// We don't want the data to appear on `let { form } = $props()`, which is why we're not returning it.
+		// It is instead available on `myForm.result`, setting of which happens within the remote `form` function.
+		return {
+			type: 'success',
+			status: 200
+		};
+	} catch (e) {
+		const err = normalize_error(e);
+
+		if (err instanceof Redirect) {
+			return {
+				type: 'redirect',
+				status: err.status,
+				location: err.location
+			};
+		}
+
+		return {
+			type: 'error',
+			error: check_incorrect_fail_use(err)
+		};
+	}
+}
+
+/**
+ * @param {URL} url
+ */
+export function get_remote_id(url) {
+	return (
+		url.pathname.startsWith(`${base}/${app_dir}/remote/`) &&
+		url.pathname.replace(`${base}/${app_dir}/remote/`, '')
+	);
+}
+
+/**
+ * @param {URL} url
+ */
+export function get_remote_action(url) {
+	return url.searchParams.get('/remote');
+}

package/src/runtime/server/respond.js

@@ -1,6 +1,6 @@
 import { DEV } from 'esm-env';
 import { json, text } from '@sveltejs/kit';
-import { HttpError, Redirect, SvelteKitError } from '@sveltejs/kit/internal';
+import { Redirect, SvelteKitError } from '@sveltejs/kit/internal';
 import { base, app_dir } from '__sveltekit/paths';
 import { is_endpoint_request, render_endpoint } from './endpoint.js';
 import { render_page } from './page/index.js';
@@ -33,7 +33,9 @@ import {
 	strip_data_suffix,
 	strip_resolution_suffix
 } from '../pathname.js';
+import { get_remote_id, handle_remote_call } from './remote.js';
 import { with_event } from '../app/server/event.js';
+import { create_event_state, EVENT_STATE } from './event-state.js';
 
 /* global __SVELTEKIT_ADAPTER_NAME__ */
 /* global __SVELTEKIT_DEV__ */
@@ -64,24 +66,35 @@ export async function respond(request, options, manifest, state) {
 	/** URL but stripped from the potential `/__data.json` suffix and its search param  */
 	const url = new URL(request.url);
 
-	if (options.csrf_check_origin) {
+	const is_route_resolution_request = has_resolution_suffix(url.pathname);
+	const is_data_request = has_data_suffix(url.pathname);
+	const remote_id = get_remote_id(url);
+
+	if (options.csrf_check_origin && request.headers.get('origin') !== url.origin) {
+		const opts = { status: 403 };
+
+		if (remote_id && request.method !== 'GET') {
+			return json(
+				{
+					message: 'Cross-site remote requests are forbidden'
+				},
+				opts
+			);
+		}
+
 		const forbidden =
 			is_form_content_type(request) &&
 			(request.method === 'POST' ||
 				request.method === 'PUT' ||
 				request.method === 'PATCH' ||
-				request.method === 'DELETE') &&
-			request.headers.get('origin') !== url.origin;
+				request.method === 'DELETE');
 
 		if (forbidden) {
-			const csrf_error = new HttpError(
-				403,
-				`Cross-site ${request.method} form submissions are forbidden`
-			);
+			const message = `Cross-site ${request.method} form submissions are forbidden`;
 			if (request.headers.get('accept') === 'application/json') {
-				return json(csrf_error.body, { status: csrf_error.status });
+				return json({ message }, opts);
 			}
-			return text(csrf_error.body.message, { status: csrf_error.status });
+			return text(message, opts);
 		}
 	}
 
@@ -92,14 +105,11 @@ export async function respond(request, options, manifest, state) {
 	/** @type {boolean[] | undefined} */
 	let invalidated_data_nodes;
 
-	/**
-	 * If the request is for a route resolution, first modify the URL, then continue as normal
-	 * for path resolution, then return the route object as a JS file.
-	 */
-	const is_route_resolution_request = has_resolution_suffix(url.pathname);
-	const is_data_request = has_data_suffix(url.pathname);
-
 	if (is_route_resolution_request) {
+		/**
+		 * If the request is for a route resolution, first modify the URL, then continue as normal
+		 * for path resolution, then return the route object as a JS file.
+		 */
 		url.pathname = strip_resolution_suffix(url.pathname);
 	} else if (is_data_request) {
 		url.pathname =
@@ -111,6 +121,9 @@ export async function respond(request, options, manifest, state) {
 			?.split('')
 			.map((node) => node === '1');
 		url.searchParams.delete(INVALIDATED_PARAM);
+	} else if (remote_id) {
+		url.pathname = base;
+		url.search = '';
 	}
 
 	/** @type {Record<string, string>} */
@@ -123,6 +136,7 @@ export async function respond(request, options, manifest, state) {
 
 	/** @type {import('@sveltejs/kit').RequestEvent} */
 	const event = {
+		[EVENT_STATE]: create_event_state(state, options),
 		cookies,
 		// @ts-expect-error `fetch` needs to be created after the `event` itself
 		fetch: null,
@@ -164,7 +178,8 @@ export async function respond(request, options, manifest, state) {
 		},
 		url,
 		isDataRequest: is_data_request,
-		isSubRequest: state.depth > 0
+		isSubRequest: state.depth > 0,
+		isRemoteRequest: !!remote_id
 	};
 
 	event.fetch = create_fetch({
@@ -183,23 +198,25 @@ export async function respond(request, options, manifest, state) {
 		});
 	}
 
-	let resolved_path;
-
-	const prerendering_reroute_state = state.prerendering?.inside_reroute;
-	try {
-		// For the duration or a reroute, disable the prerendering state as reroute could call API endpoints
-		// which would end up in the wrong logic path if not disabled.
-		if (state.prerendering) state.prerendering.inside_reroute = true;
+	let resolved_path = url.pathname;
 
-		// reroute could alter the given URL, so we pass a copy
-		resolved_path =
-			(await options.hooks.reroute({ url: new URL(url), fetch: event.fetch })) ?? url.pathname;
-	} catch {
-		return text('Internal Server Error', {
-			status: 500
-		});
-	} finally {
-		if (state.prerendering) state.prerendering.inside_reroute = prerendering_reroute_state;
+	if (!remote_id) {
+		const prerendering_reroute_state = state.prerendering?.inside_reroute;
+		try {
+			// For the duration or a reroute, disable the prerendering state as reroute could call API endpoints
+			// which would end up in the wrong logic path if not disabled.
+			if (state.prerendering) state.prerendering.inside_reroute = true;
+
+			// reroute could alter the given URL, so we pass a copy
+			resolved_path =
+				(await options.hooks.reroute({ url: new URL(url), fetch: event.fetch })) ?? url.pathname;
+		} catch {
+			return text('Internal Server Error', {
+				status: 500
+			});
+		} finally {
+			if (state.prerendering) state.prerendering.inside_reroute = prerendering_reroute_state;
+		}
 	}
 
 	try {
@@ -254,14 +271,14 @@ export async function respond(request, options, manifest, state) {
 		return get_public_env(request);
 	}
 
-	if (resolved_path.startsWith(`/${app_dir}`)) {
+	if (!remote_id && resolved_path.startsWith(`/${app_dir}`)) {
 		// Ensure that 404'd static assets are not cached - some adapters might apply caching by default
 		const headers = new Headers();
 		headers.set('cache-control', 'public, max-age=0, must-revalidate');
 		return text('Not found', { status: 404, headers });
 	}
 
-	if (!state.prerendering?.fallback) {
+	if (!state.prerendering?.fallback && !remote_id) {
 		// TODO this could theoretically break — should probably be inside a try-catch
 		const matchers = await manifest._.matchers();
 
@@ -476,6 +493,10 @@ export async function respond(request, options, manifest, state) {
 				});
 			}
 
+			if (remote_id) {
+				return await handle_remote_call(event, options, manifest, remote_id);
+			}
+
 			if (route) {
 				const method = /** @type {import('types').HttpMethod} */ (event.request.method);
 

package/src/runtime/shared.js

@@ -1,3 +1,6 @@
+/** @import { Transport } from '@sveltejs/kit' */
+import * as devalue from 'devalue';
+
 /**
  * @param {string} route_id
  * @param {string} dep
@@ -14,3 +17,61 @@ export function validate_depends(route_id, dep) {
 export const INVALIDATED_PARAM = 'x-sveltekit-invalidated';
 
 export const TRAILING_SLASH_PARAM = 'x-sveltekit-trailing-slash';
+
+/**
+ * Try to `devalue.stringify` the data object using the provided transport encoders.
+ * @param {any} data
+ * @param {Transport} transport
+ */
+export function stringify(data, transport) {
+	const encoders = Object.fromEntries(Object.entries(transport).map(([k, v]) => [k, v.encode]));
+
+	return devalue.stringify(data, encoders);
+}
+
+/**
+ * Stringifies the argument (if any) for a remote function in such a way that
+ * it is both a valid URL and a valid file name (necessary for prerendering).
+ * @param {any} value
+ * @param {Transport} transport
+ */
+export function stringify_remote_arg(value, transport) {
+	if (value === undefined) return '';
+
+	// If people hit file/url size limits, we can look into using something like compress_and_encode_text from svelte.dev beyond a certain size
+	const json_string = stringify(value, transport);
+
+	// Convert to UTF-8 bytes, then base64 - handles all Unicode properly (btoa would fail on exotic characters)
+	const utf8_bytes = new TextEncoder().encode(json_string);
+	return btoa(String.fromCharCode(...utf8_bytes))
+		.replace(/=/g, '')
+		.replace(/\+/g, '-')
+		.replace(/\//g, '_');
+}
+
+/**
+ * Parses the argument (if any) for a remote function
+ * @param {string} string
+ * @param {Transport} transport
+ */
+export function parse_remote_arg(string, transport) {
+	if (!string) return undefined;
+
+	const decoders = Object.fromEntries(Object.entries(transport).map(([k, v]) => [k, v.decode]));
+
+	// We don't need to add back the `=`-padding because atob can handle it
+	const base64_restored = string.replace(/-/g, '+').replace(/_/g, '/');
+	const binary_string = atob(base64_restored);
+	const utf8_bytes = new Uint8Array([...binary_string].map((char) => char.charCodeAt(0)));
+	const json_string = new TextDecoder().decode(utf8_bytes);
+
+	return devalue.parse(json_string, decoders);
+}
+
+/**
+ * @param {string} id
+ * @param {string} payload
+ */
+export function create_remote_cache_key(id, payload) {
+	return id + '/' + payload;
+}

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

@@ -4,6 +4,8 @@ declare global {
 	const __SVELTEKIT_APP_VERSION_POLL_INTERVAL__: number;
 	const __SVELTEKIT_DEV__: boolean;
 	const __SVELTEKIT_EMBEDDED__: boolean;
+	/** true if corresponding config option is set to true */
+	const __SVELTEKIT_EXPERIMENTAL__REMOTE_FUNCTIONS__: boolean;
 	/** True if `config.kit.router.resolution === 'client'` */
 	const __SVELTEKIT_CLIENT_ROUTING__: boolean;
 	/**

package/src/types/internal.d.ts

@@ -20,7 +20,8 @@ import {
 	Adapter,
 	ServerInit,
 	ClientInit,
-	Transporter
+	Transport,
+	HandleValidationError
 } from '@sveltejs/kit';
 import {
 	HttpMethod,
@@ -45,6 +46,7 @@ export interface ServerInternalModule {
 	set_safe_public_env(environment: Record<string, string>): void;
 	set_version(version: string): void;
 	set_fix_stack_trace(fix_stack_trace: (error: unknown) => string): void;
+	get_hooks: () => Promise<Record<string, any>>;
 }
 
 export interface Asset {
@@ -149,15 +151,16 @@ export interface ServerHooks {
 	handleFetch: HandleFetch;
 	handle: Handle;
 	handleError: HandleServerError;
+	handleValidationError: HandleValidationError;
 	reroute: Reroute;
-	transport: Record<string, Transporter>;
+	transport: Transport;
 	init?: ServerInit;
 }
 
 export interface ClientHooks {
 	handleError: HandleClientError;
 	reroute: Reroute;
-	transport: Record<string, Transporter>;
+	transport: Transport;
 	init?: ClientInit;
 }
 
@@ -189,6 +192,10 @@ export interface ManifestData {
 		universal: string | null;
 	};
 	nodes: PageNode[];
+	remotes: Array<{
+		file: string;
+		hash: string;
+	}>;
 	routes: RouteData[];
 	matchers: Record<string, string>;
 }
@@ -216,6 +223,11 @@ export interface PrerenderOptions {
 	cache?: string; // including this here is a bit of a hack, but it makes it easy to add <meta http-equiv>
 	fallback?: boolean;
 	dependencies: Map<string, PrerenderDependency>;
+	/**
+	 * For each key the (possibly still pending) result of a prerendered remote function.
+	 * Used to deduplicate requests to the same remote function with the same arguments.
+	 */
+	remote_responses: Map<string, Promise<any>>;
 	/** True for the duration of a call to the `reroute` hook */
 	inside_reroute?: boolean;
 }
@@ -280,7 +292,18 @@ export type ServerNodesResponse = {
 	nodes: Array<ServerDataNode | ServerDataSkippedNode | ServerErrorNode | null>;
 };
 
-export type ServerDataResponse = ServerRedirectNode | ServerNodesResponse;
+export type RemoteFunctionResponse =
+	| (ServerRedirectNode & {
+			/** devalue'd Record<string, any> */
+			refreshes?: string;
+	  })
+	| ServerErrorNode
+	| {
+			type: 'result';
+			result: string;
+			/** devalue'd Record<string, any> */
+			refreshes: string;
+	  };
 
 /**
  * Signals a successful response of the server `load` function.
@@ -347,6 +370,8 @@ export interface ServerMetadata {
 		has_server_load: boolean;
 	}>;
 	routes: Map<string, ServerMetadataRoute>;
+	/** For each hashed remote file, a map of export name -> { type, dynamic }, where `dynamic` is `false` for non-dynamic prerender functions */
+	remotes: Map<string, Map<string, { type: RemoteInfo['type']; dynamic: boolean }>>;
 }
 
 export interface SSRComponent {
@@ -445,6 +470,7 @@ export interface PageNodeIndexes {
 }
 
 export type PrerenderEntryGenerator = () => MaybePromise<Array<Record<string, string>>>;
+export type RemotePrerenderInputsGenerator<Input = any> = () => MaybePromise<Input[]>;
 
 export type SSREndpoint = Partial<Record<HttpMethod, RequestHandler>> & {
 	prerender?: PrerenderOption;
@@ -519,5 +545,26 @@ export type ValidatedKitConfig = Omit<RecursiveRequired<KitConfig>, 'adapter'> &
 	adapter?: Adapter;
 };
 
+export type RemoteInfo =
+	| {
+			type: 'query' | 'command';
+			id: string;
+			name: string;
+	  }
+	| {
+			type: 'form';
+			id: string;
+			name: string;
+			fn: (data: FormData) => Promise<any>;
+	  }
+	| {
+			type: 'prerender';
+			id: string;
+			name: string;
+			has_arg: boolean;
+			dynamic?: boolean;
+			inputs?: RemotePrerenderInputsGenerator;
+	  };
+
 export * from '../exports/index.js';
 export * from './private.js';

package/src/types/synthetic/$env+static+private.md

@@ -14,6 +14,6 @@ MY_FEATURE_FLAG=""
 
 You can override `.env` values from the command line like so:
 
-```bash
+```sh
 MY_FEATURE_FLAG="enabled" npm run dev
 ```

package/src/utils/routing.js

@@ -117,7 +117,7 @@ export function remove_optional_params(id) {
  * @param {string} segment
  */
 function affects_path(segment) {
-	return !/^\([^)]+\)$/.test(segment);
+	return segment !== '' && !/^\([^)]+\)$/.test(segment);
 }
 
 /**

package/src/version.js

@@ -1,4 +1,4 @@
 // generated during release, do not modify
 
 /** @type {string} */
-export const VERSION = '2.26.0';
+export const VERSION = '2.27.0';