@sveltejs/kit 2.26.1 → 2.27.1

package/README.md

@@ -4,7 +4,7 @@ This is the [SvelteKit](https://svelte.dev/docs/kit) framework and CLI.
 
 The quickest way to get started is via the [sv](https://npmjs.com/package/sv) package:
 
-```bash
+```sh
 npx sv create my-app
 cd my-app
 npm install

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltejs/kit",
-  "version": "2.26.1",
+  "version": "2.27.1",
   "description": "SvelteKit is the fastest way to build Svelte apps",
   "keywords": [
     "framework",
@@ -18,6 +18,7 @@
   "homepage": "https://svelte.dev",
   "type": "module",
   "dependencies": {
+    "@standard-schema/spec": "^1.0.0",
     "@sveltejs/acorn-typescript": "^1.0.5",
     "@types/cookie": "^0.6.0",
     "acorn": "^8.14.1",
@@ -37,7 +38,7 @@
     "@types/connect": "^3.4.38",
     "@types/node": "^18.19.119",
     "@types/set-cookie-parser": "^2.4.7",
-    "dts-buddy": "^0.6.1",
+    "dts-buddy": "^0.6.2",
     "rollup": "^4.14.2",
     "svelte": "^5.35.5",
     "svelte-preprocess": "^6.0.0",

package/src/core/adapt/builder.js

@@ -219,7 +219,12 @@ export function create_builder({
 
 		writePrerendered(dest) {
 			const source = `${config.kit.outDir}/output/prerendered`;
-			return [...copy(`${source}/pages`, dest), ...copy(`${source}/dependencies`, dest)];
+
+			return [
+				...copy(`${source}/pages`, dest),
+				...copy(`${source}/dependencies`, dest),
+				...copy(`${source}/data`, dest)
+			];
 		},
 
 		writeServer(dest) {

package/src/core/config/options.js

@@ -120,6 +120,10 @@ const options = object(
 				privatePrefix: string('')
 			}),
 
+			experimental: object({
+				remoteFunctions: boolean(false)
+			}),
+
 			files: object({
 				assets: string('static'),
 				hooks: object({

package/src/core/generate_manifest/index.js

@@ -59,7 +59,7 @@ export function generate_manifest({ build_data, prerendered, relative_path, rout
 		assets.push(build_data.service_worker);
 	}
 
-	// In case of server side route resolution, we need to include all matchers. Prerendered routes are not part
+	// In case of server-side route resolution, we need to include all matchers. Prerendered routes are not part
 	// of the server manifest, and they could reference matchers that then would not be included.
 	const matchers = new Set(
 		build_data.client?.nodes ? Object.keys(build_data.manifest_data.matchers) : undefined
@@ -100,6 +100,9 @@ export function generate_manifest({ build_data, prerendered, relative_path, rout
 				nodes: [
 					${(node_paths).map(loader).join(',\n')}
 				],
+				remotes: {
+					${build_data.manifest_data.remotes.map((remote) => `'${remote.hash}': ${loader(join_relative(relative_path, resolve_symlinks(build_data.server_manifest, remote.file).chunk.file))}`).join(',\n')}
+				},
 				routes: [
 					${routes.map(route => {
 						if (!route.page && !route.endpoint) return;

package/src/core/postbuild/analyse.js

@@ -11,6 +11,7 @@ import { check_feature } from '../../utils/features.js';
 import { createReadableStream } from '@sveltejs/kit/node';
 import { PageNodes } from '../../utils/page_nodes.js';
 import { build_server_nodes } from '../../exports/vite/build/build_server.js';
+import { validate_remote_functions } from '@sveltejs/kit/internal';
 
 export default forked(import.meta.url, analyse);
 
@@ -82,7 +83,8 @@ async function analyse({
 	/** @type {import('types').ServerMetadata} */
 	const metadata = {
 		nodes: [],
-		routes: new Map()
+		routes: new Map(),
+		remotes: new Map()
 	};
 
 	const nodes = await Promise.all(manifest._.nodes.map((loader) => loader()));
@@ -164,6 +166,28 @@ async function analyse({
 		});
 	}
 
+	// analyse remotes
+	for (const remote of manifest_data.remotes) {
+		const loader = manifest._.remotes[remote.hash];
+		const module = await loader();
+
+		validate_remote_functions(module, remote.file);
+
+		const exports = new Map();
+
+		for (const name in module) {
+			const info = /** @type {import('types').RemoteInfo} */ (module[name].__);
+			const type = info.type;
+
+			exports.set(name, {
+				type,
+				dynamic: type !== 'prerender' || info.dynamic
+			});
+		}
+
+		metadata.remotes.set(remote.hash, exports);
+	}
+
 	return { metadata, static_exports };
 }
 

package/src/core/postbuild/fallback.js

@@ -41,7 +41,8 @@ async function generate_fallback({ manifest_path, env }) {
 		},
 		prerendering: {
 			fallback: true,
-			dependencies: new Map()
+			dependencies: new Map(),
+			remote_responses: new Map()
 		},
 		read: (file) => readFileSync(join(config.files.assets, file))
 	});

package/src/core/postbuild/prerender.js

@@ -14,6 +14,7 @@ import { forked } from '../../utils/fork.js';
 import * as devalue from 'devalue';
 import { createReadableStream } from '@sveltejs/kit/node';
 import generate_fallback from './fallback.js';
+import { stringify_remote_arg } from '../../runtime/shared.js';
 
 export default forked(import.meta.url, prerender);
 
@@ -184,8 +185,12 @@ async function prerender({ hash, out, manifest_path, metadata, verbose, env }) {
 			files.add(posixify(`${config.appDir}/immutable/${file}`));
 		}
 	}
+
+	const remote_prefix = `${config.paths.base}/${config.appDir}/remote/`;
+
 	const seen = new Set();
 	const written = new Set();
+	const remote_responses = new Map();
 
 	/** @type {Map<string, Set<string>>} */
 	const expected_hashlinks = new Map();
@@ -229,7 +234,8 @@ async function prerender({ hash, out, manifest_path, metadata, verbose, env }) {
 				throw new Error('Cannot read clientAddress during prerendering');
 			},
 			prerendering: {
-				dependencies
+				dependencies,
+				remote_responses
 			},
 			read: (file) => {
 				// stuff we just wrote
@@ -258,7 +264,8 @@ async function prerender({ hash, out, manifest_path, metadata, verbose, env }) {
 
 		const body = Buffer.from(await response.arrayBuffer());
 
-		save('pages', response, body, decoded, encoded, referrer, 'linked');
+		const category = decoded.startsWith(remote_prefix) ? 'data' : 'pages';
+		save(category, response, body, decoded, encoded, referrer, 'linked');
 
 		for (const [dependency_path, result] of dependencies) {
 			// this seems circuitous, but using new URL allows us to not care
@@ -282,8 +289,10 @@ async function prerender({ hash, out, manifest_path, metadata, verbose, env }) {
 
 			const body = result.body ?? new Uint8Array(await result.response.arrayBuffer());
 
+			const category = decoded_dependency_path.startsWith(remote_prefix) ? 'data' : 'dependencies';
+
 			save(
-				'dependencies',
+				category,
 				result.response,
 				body,
 				decoded_dependency_path,
@@ -336,7 +345,7 @@ async function prerender({ hash, out, manifest_path, metadata, verbose, env }) {
 	}
 
 	/**
-	 * @param {'pages' | 'dependencies'} category
+	 * @param {'pages' | 'dependencies' | 'data'} category
 	 * @param {Response} response
 	 * @param {string | Uint8Array} body
 	 * @param {string} decoded
@@ -451,19 +460,30 @@ async function prerender({ hash, out, manifest_path, metadata, verbose, env }) {
 		}
 	}
 
-	let has_prerenderable_routes = false;
+	let should_prerender = false;
 
 	for (const value of prerender_map.values()) {
 		if (value) {
-			has_prerenderable_routes = true;
+			should_prerender = true;
 			break;
 		}
 	}
 
-	if (
-		(config.prerender.entries.length === 0 && route_level_entries.length === 0) ||
-		!has_prerenderable_routes
-	) {
+	/** @type {Array<import('types').RemoteInfo & { type: 'prerender'}>} */
+	const prerender_functions = [];
+
+	for (const loader of Object.values(manifest._.remotes)) {
+		const module = await loader();
+
+		for (const fn of Object.values(module)) {
+			if (fn?.__?.type === 'prerender') {
+				prerender_functions.push(fn.__);
+				should_prerender = true;
+			}
+		}
+	}
+
+	if (!should_prerender) {
 		return { prerendered, prerender_map };
 	}
 
@@ -499,6 +519,17 @@ async function prerender({ hash, out, manifest_path, metadata, verbose, env }) {
 		}
 	}
 
+	const transport = (await internal.get_hooks()).transport ?? {};
+	for (const info of prerender_functions) {
+		if (info.has_arg) {
+			for (const arg of (await info.inputs?.()) ?? []) {
+				void enqueue(null, remote_prefix + info.id + '/' + stringify_remote_arg(arg, transport));
+			}
+		} else {
+			void enqueue(null, remote_prefix + info.id);
+		}
+	}
+
 	await q.done();
 
 	// handle invalid fragment links

package/src/core/sync/create_manifest_data/index.js

@@ -4,10 +4,11 @@ import process from 'node:process';
 import colors from 'kleur';
 import { lookup } from 'mrmime';
 import { list_files, runtime_directory } from '../../utils.js';
-import { posixify, resolve_entry } from '../../../utils/filesystem.js';
+import { posixify, resolve_entry, walk } from '../../../utils/filesystem.js';
 import { parse_route_id } from '../../../utils/routing.js';
 import { sort_routes } from './sort.js';
 import { isSvelte5Plus } from '../utils.js';
+import { hash } from '../../../utils/hash.js';
 
 /**
  * Generates the manifest data used for the client-side manifest and types generation.
@@ -27,6 +28,7 @@ export default function create_manifest_data({
 	const hooks = create_hooks(config, cwd);
 	const matchers = create_matchers(config, cwd);
 	const { nodes, routes } = create_routes_and_nodes(cwd, config, fallback);
+	const remotes = create_remotes(config, cwd);
 
 	for (const route of routes) {
 		for (const param of route.params) {
@@ -41,6 +43,7 @@ export default function create_manifest_data({
 		hooks,
 		matchers,
 		nodes,
+		remotes,
 		routes
 	};
 }
@@ -465,6 +468,37 @@ function create_routes_and_nodes(cwd, config, fallback) {
 	};
 }
 
+/**
+ * @param {import('types').ValidatedConfig} config
+ * @param {string} cwd
+ */
+function create_remotes(config, cwd) {
+	if (!config.kit.experimental.remoteFunctions) return [];
+
+	const extensions = config.kit.moduleExtensions.map((ext) => `.remote${ext}`);
+
+	/** @type {import('types').ManifestData['remotes']} */
+	const remotes = [];
+
+	// TODO could files live in other directories, including node_modules?
+	for (const dir of [config.kit.files.lib, config.kit.files.routes]) {
+		if (!fs.existsSync(dir)) continue;
+
+		for (const file of walk(dir)) {
+			if (extensions.some((ext) => file.endsWith(ext))) {
+				const posixified = posixify(path.relative(cwd, `${dir}/${file}`));
+
+				remotes.push({
+					hash: hash(posixified),
+					file: posixified
+				});
+			}
+		}
+	}
+
+	return remotes;
+}
+
 /**
  * @param {string} project_relative
  * @param {string} file

package/src/core/sync/write_server.js

@@ -1,6 +1,6 @@
 import path from 'node:path';
 import process from 'node:process';
-import { hash } from '../../runtime/hash.js';
+import { hash } from '../../utils/hash.js';
 import { posixify, resolve_entry } from '../../utils/filesystem.js';
 import { s } from '../../utils/misc.js';
 import { load_error_page, load_template } from '../config/index.js';
@@ -67,8 +67,9 @@ export async function get_hooks() {
 	let handle;
 	let handleFetch;
 	let handleError;
+	let handleValidationError;
 	let init;
-	${server_hooks ? `({ handle, handleFetch, handleError, init } = await import(${s(server_hooks)}));` : ''}
+	${server_hooks ? `({ handle, handleFetch, handleError, handleValidationError, init } = await import(${s(server_hooks)}));` : ''}
 
 	let reroute;
 	let transport;
@@ -78,6 +79,7 @@ export async function get_hooks() {
 		handle,
 		handleFetch,
 		handleError,
+		handleValidationError,
 		init,
 		reroute,
 		transport

package/src/exports/index.js

@@ -188,7 +188,7 @@ export function text(body, init) {
  */
 /**
  * Create an `ActionFailure` object. Call when form submission fails.
- * @template {Record<string, unknown> | undefined} [T=undefined]
+ * @template [T=undefined]
  * @param {number} status The [HTTP status code](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status#client_error_responses). Must be in the range 400-599.
  * @param {T} data Data associated with the failure (e.g. validation errors)
  * @overload

package/src/exports/internal/index.js

@@ -49,7 +49,7 @@ export class SvelteKitError extends Error {
 }
 
 /**
- * @template {Record<string, unknown> | undefined} [T=undefined]
+ * @template [T=undefined]
  */
 export class ActionFailure {
 	/**
@@ -61,3 +61,5 @@ export class ActionFailure {
 		this.data = data;
 	}
 }
+
+export { validate_remote_functions } from './remote-functions.js';

package/src/exports/internal/remote-functions.js

@@ -0,0 +1,21 @@
+/**
+ * @param {Record<string, any>} module
+ * @param {string} file
+ */
+export function validate_remote_functions(module, file) {
+	if (module.default) {
+		throw new Error(
+			`Cannot export \`default\` from a remote module (${file}) — please use named exports instead`
+		);
+	}
+
+	for (const name in module) {
+		const type = module[name]?.__?.type;
+
+		if (type !== 'form' && type !== 'command' && type !== 'query' && type !== 'prerender') {
+			throw new Error(
+				`\`${name}\` exported from ${file} is invalid — all exports from this file must be remote functions`
+			);
+		}
+	}
+}

package/src/exports/public.d.ts

@@ -17,7 +17,8 @@ import {
 	RouteSegment
 } from '../types/private.js';
 import { BuildData, SSRNodeLoader, SSRRoute, ValidatedConfig } from 'types';
-import type { SvelteConfig, PluginOptions } from '@sveltejs/vite-plugin-svelte';
+import type { SvelteConfig } from '@sveltejs/vite-plugin-svelte';
+import type { StandardSchemaV1 } from '@standard-schema/spec';
 import {
 	RouteId as AppRouteId,
 	LayoutParams as AppLayoutParams,
@@ -78,7 +79,7 @@ type OptionalUnion<
 
 declare const uniqueSymbol: unique symbol;
 
-export interface ActionFailure<T extends Record<string, unknown> | undefined = undefined> {
+export interface ActionFailure<T = undefined> {
 	status: number;
 	data: T;
 	[uniqueSymbol]: true; // necessary or else UnpackValidationError could wrongly unpack objects with the same shape as ActionFailure
@@ -407,6 +408,16 @@ export interface KitConfig {
 		 */
 		privatePrefix?: string;
 	};
+	/**
+	 * Experimental features which are exempt from semantic versioning. These features may be changed or removed at any time.
+	 */
+	experimental?: {
+		/**
+		 * Whether to enable the experimental remote functions feature. This feature is not yet stable and may be changed or removed at any time.
+		 * @default false
+		 */
+		remoteFunctions?: boolean;
+	};
 	/**
 	 * Where to find various files within your project.
 	 */
@@ -774,6 +785,14 @@ export type HandleServerError = (input: {
 	message: string;
 }) => MaybePromise<void | App.Error>;
 
+/**
+ * The [`handleValidationError`](https://svelte.dev/docs/kit/hooks#Server-hooks-handleValidationError) hook runs when the argument to a remote function fails validation.
+ *
+ * It will be called with the validation issues and the event, and must return an object shape that matches `App.Error`.
+ */
+export type HandleValidationError<Issue extends StandardSchemaV1.Issue = StandardSchemaV1.Issue> =
+	(input: { issues: Issue[]; event: RequestEvent }) => MaybePromise<App.Error>;
+
 /**
  * The client-side [`handleError`](https://svelte.dev/docs/kit/hooks#Shared-hooks-handleError) hook runs when an unexpected error is thrown while navigating.
  *
@@ -1248,6 +1267,11 @@ export interface RequestEvent<
 	 * `true` for `+server.js` calls coming from SvelteKit without the overhead of actually making an HTTP request. This happens when you make same-origin `fetch` requests on the server.
 	 */
 	isSubRequest: boolean;
+	/**
+	 * `true` if the request comes from the client via a remote function. The `url` property will be stripped of the internal information
+	 * related to the data request in this case. Use this property instead if the distinction is important to you.
+	 */
+	isRemoteRequest: boolean;
 }
 
 /**
@@ -1322,6 +1346,8 @@ export interface SSRManifest {
 	_: {
 		client: NonNullable<BuildData['client']>;
 		nodes: SSRNodeLoader[];
+		/** hashed filename -> import to that file */
+		remotes: Record<string, () => Promise<any>>;
 		routes: SSRRoute[];
 		prerendered_routes: Set<string>;
 		matchers: () => Promise<Record<string, ParamMatcher>>;
@@ -1499,4 +1525,138 @@ export interface Snapshot<T = any> {
 	restore: (snapshot: T) => void;
 }
 
+/**
+ * The return value of a remote `form` function. See [Remote functions](https://svelte.dev/docs/kit/remote-functions#form) for full documentation.
+ */
+export type RemoteForm<Result> = {
+	method: 'POST';
+	/** The URL to send the form to. */
+	action: string;
+	/** Event handler that intercepts the form submission on the client to prevent a full page reload */
+	onsubmit: (event: SubmitEvent) => void;
+	/** Use the `enhance` method to influence what happens when the form is submitted. */
+	enhance(
+		callback: (opts: {
+			form: HTMLFormElement;
+			data: FormData;
+			submit: () => Promise<void> & {
+				updates: (...queries: Array<RemoteQuery<any> | RemoteQueryOverride>) => Promise<void>;
+			};
+		}) => void
+	): {
+		method: 'POST';
+		action: string;
+		onsubmit: (event: SubmitEvent) => void;
+	};
+	/**
+	 * Create an instance of the form for the given key.
+	 * The key is stringified and used for deduplication to potentially reuse existing instances.
+	 * Useful when you have multiple forms that use the same remote form action, for example in a loop.
+	 * ```svelte
+	 * {#each todos as todo}
+	 *	{@const todoForm = updateTodo.for(todo.id)}
+	 *	<form {...todoForm}>
+	 *		{#if todoForm.result?.invalid}<p>Invalid data</p>{/if}
+	 *		...
+	 *	</form>
+	 *	{/each}
+	 * ```
+	 */
+	for(key: string | number | boolean): Omit<RemoteForm<Result>, 'for'>;
+	/** The result of the form submission */
+	get result(): Result | undefined;
+	/** Spread this onto a `<button>` or `<input type="submit">` */
+	buttonProps: {
+		type: 'submit';
+		formmethod: 'POST';
+		formaction: string;
+		onclick: (event: Event) => void;
+		/** Use the `enhance` method to influence what happens when the form is submitted. */
+		enhance(
+			callback: (opts: {
+				form: HTMLFormElement;
+				data: FormData;
+				submit: () => Promise<void> & {
+					updates: (...queries: Array<RemoteQuery<any> | RemoteQueryOverride>) => Promise<void>;
+				};
+			}) => void
+		): {
+			type: 'submit';
+			formmethod: 'POST';
+			formaction: string;
+			onclick: (event: Event) => void;
+		};
+	};
+};
+
+/**
+ * The return value of a remote `command` function. See [Remote functions](https://svelte.dev/docs/kit/remote-functions#command) for full documentation.
+ */
+export type RemoteCommand<Input, Output> = (arg: Input) => Promise<Awaited<Output>> & {
+	updates(...queries: Array<RemoteQuery<any> | RemoteQueryOverride>): Promise<Awaited<Output>>;
+};
+
+export type RemoteResource<T> = Promise<Awaited<T>> & {
+	/** The error in case the query fails. Most often this is a [`HttpError`](https://svelte.dev/docs/kit/@sveltejs-kit#HttpError) but it isn't guaranteed to be. */
+	get error(): any;
+	/** `true` before the first result is available and during refreshes */
+	get loading(): boolean;
+} & (
+		| {
+				/** The current value of the query. Undefined until `ready` is `true` */
+				get current(): undefined;
+				ready: false;
+		  }
+		| {
+				/** The current value of the query. Undefined until `ready` is `true` */
+				get current(): Awaited<T>;
+				ready: true;
+		  }
+	);
+
+export type RemoteQuery<T> = RemoteResource<T> & {
+	/**
+	 * On the client, this function will re-fetch the query from the server.
+	 *
+	 * On the server, this can be called in the context of a `command` or `form` and the refreshed data will accompany the action response back to the client.
+	 * This prevents SvelteKit needing to refresh all queries on the page in a second server round-trip.
+	 */
+	refresh(): Promise<void>;
+	/**
+	 * Temporarily override the value of a query. This is used with the `updates` method of a [command](https://svelte.dev/docs/kit/remote-functions#command-Single-flight-mutations) or [enhanced form submission](https://svelte.dev/docs/kit/remote-functions#form-enhance) to provide optimistic updates.
+	 *
+	 * ```svelte
+	 * <script>
+	 *   import { getTodos, addTodo } from './todos.remote.js';
+	 *   const todos = getTodos();
+	 * </script>
+	 *
+	 * <form {...addTodo.enhance(async ({ data, submit }) => {
+	 *   await submit().updates(
+	 *     todos.withOverride((todos) => [...todos, { text: data.get('text') }])
+	 *   );
+	 * }}>
+	 *   <input type="text" name="text" />
+	 *   <button type="submit">Add Todo</button>
+	 * </form>
+	 * ```
+	 */
+	withOverride(update: (current: Awaited<T>) => Awaited<T>): RemoteQueryOverride;
+};
+
+export interface RemoteQueryOverride {
+	_key: string;
+	release(): void;
+}
+
+/**
+ * The return value of a remote `prerender` function. See [Remote functions](https://svelte.dev/docs/kit/remote-functions#prerender) for full documentation.
+ */
+export type RemotePrerenderFunction<Input, Output> = (arg: Input) => RemoteResource<Output>;
+
+/**
+ * The return value of a remote `query` function. See [Remote functions](https://svelte.dev/docs/kit/remote-functions#query) for full documentation.
+ */
+export type RemoteQueryFunction<Input, Output> = (arg: Input) => RemoteQuery<Output>;
+
 export * from './index.js';