@sveltejs/kit 2.26.0 → 2.27.0

package/src/exports/vite/build/build_remote.js

@@ -0,0 +1,129 @@
+/** @import { ManifestData, ServerMetadata } from 'types' */
+import fs from 'node:fs';
+import path from 'node:path';
+import { posixify } from '../../../utils/filesystem.js';
+import { dedent } from '../../../core/sync/utils.js';
+import { import_peer } from '../../../utils/import.js';
+
+/**
+ * Moves the remote files to a sibling file and rewrites the original remote file to import from that sibling file,
+ * enhancing the remote functions with their hashed ID.
+ * This is not done through a self-import like during DEV because we want to treeshake prerendered remote functions
+ * later, which wouldn't work if we do a self-import and iterate over all exports (since we're reading them then).
+ * @param {string} out
+ * @param {ManifestData} manifest_data
+ */
+export function build_remotes(out, manifest_data) {
+	const dir = `${out}/server/remote`;
+
+	for (const remote of manifest_data.remotes) {
+		const entry = `${dir}/${remote.hash}.js`;
+		const tmp = `${remote.hash}.tmp.js`;
+
+		fs.renameSync(entry, `${dir}/${tmp}`);
+		fs.writeFileSync(
+			entry,
+			dedent`
+				import * as $$_self_$$ from './${tmp}';
+
+				for (const [name, fn] of Object.entries($$_self_$$)) {
+					fn.__.id = '${remote.hash}/' + name;
+					fn.__.name = name;
+				}
+
+				export * from './${tmp}';
+			`
+		);
+	}
+}
+
+
+/**
+ * For each remote module, checks if there are treeshakeable prerendered remote functions,
+ * then accomplishes the treeshaking by rewriting the remote files to only include the non-prerendered imports,
+ * replacing the prerendered remote functions with a dummy function that should never be called,
+ * and doing a Vite build. This will not treeshake perfectly yet as everything except the remote files are treated as external,
+ * so it will not go into those files to check what can be treeshaken inside them.
+ * @param {string} out
+ * @param {ManifestData} manifest_data
+ * @param {ServerMetadata} metadata
+ */
+export async function treeshake_prerendered_remotes(out, manifest_data, metadata) {
+	if (manifest_data.remotes.length === 0) {
+		return;
+	}
+
+	const dir = posixify(`${out}/server/remote`);
+
+	const vite = /** @type {typeof import('vite')} */ (await import_peer('vite'));
+	const remote_entry = posixify(`${out}/server/remote-entry.js`);
+
+	const prefix = 'optimized/';
+
+	const input = {
+		// include this file in the bundle, so that Rollup understands
+		// that functions like `prerender` are side-effect free
+		[path.basename(remote_entry.slice(0, -3))]: remote_entry
+	};
+
+	for (const remote of manifest_data.remotes) {
+		const exports = metadata.remotes.get(remote.hash);
+		if (!exports) throw new Error('An impossible situation occurred');
+
+		/** @type {string[]} */
+		const dynamic = [];
+
+		/** @type {string[]} */
+		const prerendered = [];
+
+		for (const [name, value] of exports) {
+			(value.dynamic ? dynamic : prerendered).push(name);
+		}
+
+		const remote_file = posixify(`${dir}/${remote.hash}.js`);
+
+		fs.writeFileSync(
+			remote_file,
+			dedent`
+				import { ${dynamic.join(', ')} } from './${remote.hash}.tmp.js';
+				import { prerender } from '../${path.basename(remote_entry)}';
+
+				${prerendered.map((name) => `export const ${name} = prerender('unchecked', () => { throw new Error('Unexpectedly called prerender function. Did you forget to set { dynamic: true } ?') });`).join('\n')}
+
+				for (const [name, fn] of Object.entries({ ${Array.from(exports.keys()).join(', ')} })) {
+					fn.__.id = '${remote.hash}/' + name;
+					fn.__.name = name;
+				}
+
+				export { ${dynamic.join(', ')} };
+			`
+		);
+
+		input[prefix + remote.hash] = remote_file;
+	}
+
+	const bundle = await vite.build({
+		configFile: false,
+		build: {
+			ssr: true,
+			rollupOptions: {
+				external: (id) => {
+					if (id[0] === '.') return;
+					return !id.startsWith(dir);
+				},
+				input
+			}
+		}
+	});
+
+	// @ts-expect-error TypeScript doesn't know what type `bundle` is
+	for (const chunk of bundle.output) {
+		if (chunk.name.startsWith(prefix)) {
+			fs.writeFileSync(`${dir}/${chunk.fileName.slice(prefix.length)}`, chunk.code);
+		}
+	}
+
+	for (const remote of manifest_data.remotes) {
+		fs.unlinkSync(`${dir}/${remote.hash}.tmp.js`);
+	}
+}

package/src/exports/vite/dev/index.js

@@ -266,6 +266,12 @@ export async function dev(vite, vite_config, svelte_config) {
 					};
 				}),
 				prerendered_routes: new Set(),
+				remotes: Object.fromEntries(
+					manifest_data.remotes.map((remote) => [
+						remote.hash,
+						() => vite.ssrLoadModule(remote.file)
+					])
+				),
 				routes: compact(
 					manifest_data.routes.map((route) => {
 						if (!route.page && !route.endpoint) return null;
@@ -331,6 +337,7 @@ export async function dev(vite, vite_config, svelte_config) {
 			if (
 				file.startsWith(svelte_config.kit.files.routes + path.sep) ||
 				file.startsWith(svelte_config.kit.files.params + path.sep) ||
+				svelte_config.kit.moduleExtensions.some((ext) => file.endsWith(`.remote${ext}`)) ||
 				// in contrast to server hooks, client hooks are written to the client manifest
 				// and therefore need rebuilding when they are added/removed
 				file.startsWith(svelte_config.kit.files.hooks.client)

package/src/exports/vite/index.js

@@ -22,7 +22,7 @@ import { write_client_manifest } from '../../core/sync/write_client_manifest.js'
 import prerender from '../../core/postbuild/prerender.js';
 import analyse from '../../core/postbuild/analyse.js';
 import { s } from '../../utils/misc.js';
-import { hash } from '../../runtime/hash.js';
+import { hash } from '../../utils/hash.js';
 import { dedent, isSvelte5Plus } from '../../core/sync/utils.js';
 import {
 	env_dynamic_private,
@@ -36,6 +36,7 @@ import {
 } from './module_ids.js';
 import { import_peer } from '../../utils/import.js';
 import { compact } from '../../utils/array.js';
+import { build_remotes, treeshake_prerendered_remotes } from './build/build_remote.js';
 
 const cwd = process.cwd();
 
@@ -167,6 +168,9 @@ let secondary_build_started = false;
 /** @type {import('types').ManifestData} */
 let manifest_data;
 
+/** @type {import('types').ServerMetadata['remotes'] | undefined} only set at build time */
+let remote_exports = undefined;
+
 /**
  * Returns the SvelteKit Vite plugin. Vite executes Rollup hooks as well as some of its own.
  * Background reading is available at:
@@ -213,6 +217,9 @@ async function kit({ svelte_config }) {
 	const service_worker_entry_file = resolve_entry(kit.files.serviceWorker);
 	const parsed_service_worker = path.parse(kit.files.serviceWorker);
 
+	const normalized_cwd = vite.normalizePath(cwd);
+	const normalized_lib = vite.normalizePath(kit.files.lib);
+
 	/**
 	 * A map showing which features (such as `$app/server:read`) are defined
 	 * in which chunks, so that we can later determine which routes use which features
@@ -322,7 +329,8 @@ async function kit({ svelte_config }) {
 					__SVELTEKIT_APP_VERSION_FILE__: s(`${kit.appDir}/version.json`),
 					__SVELTEKIT_APP_VERSION_POLL_INTERVAL__: s(kit.version.pollInterval),
 					__SVELTEKIT_DEV__: 'false',
-					__SVELTEKIT_EMBEDDED__: kit.embedded ? 'true' : 'false',
+					__SVELTEKIT_EMBEDDED__: s(kit.embedded),
+					__SVELTEKIT_EXPERIMENTAL__REMOTE_FUNCTIONS__: s(kit.experimental.remoteFunctions),
 					__SVELTEKIT_CLIENT_ROUTING__: kit.router.resolution === 'client' ? 'true' : 'false'
 				};
 
@@ -333,7 +341,8 @@ async function kit({ svelte_config }) {
 				new_config.define = {
 					__SVELTEKIT_APP_VERSION_POLL_INTERVAL__: '0',
 					__SVELTEKIT_DEV__: 'true',
-					__SVELTEKIT_EMBEDDED__: kit.embedded ? 'true' : 'false',
+					__SVELTEKIT_EMBEDDED__: s(kit.embedded),
+					__SVELTEKIT_EXPERIMENTAL__REMOTE_FUNCTIONS__: s(kit.experimental.remoteFunctions),
 					__SVELTEKIT_CLIENT_ROUTING__: kit.router.resolution === 'client' ? 'true' : 'false'
 				};
 
@@ -381,8 +390,6 @@ async function kit({ svelte_config }) {
 					parsed_importer.name === parsed_service_worker.name;
 
 				if (importer_is_service_worker && id !== '$service-worker' && id !== '$env/static/public') {
-					const normalized_cwd = vite.normalizePath(cwd);
-					const normalized_lib = vite.normalizePath(kit.files.lib);
 					throw new Error(
 						`Cannot import ${normalize_id(
 							id,
@@ -400,6 +407,9 @@ async function kit({ svelte_config }) {
 				// ids with :$ don't work with reverse proxies like nginx
 				return `\0virtual:${id.substring(1)}`;
 			}
+			if (id === '__sveltekit/remote') {
+				return `${runtime_directory}/client/remote-functions/index.js`;
+			}
 			if (id.startsWith('__sveltekit/')) {
 				return `\0virtual:${id}`;
 			}
@@ -413,8 +423,6 @@ async function kit({ svelte_config }) {
 				: 'globalThis.__sveltekit_dev';
 
 			if (options?.ssr === false && process.env.TEST !== 'true') {
-				const normalized_cwd = vite.normalizePath(cwd);
-				const normalized_lib = vite.normalizePath(kit.files.lib);
 				if (
 					is_illegal(id, {
 						cwd: normalized_cwd,
@@ -580,6 +588,93 @@ Tips:
 		}
 	};
 
+	/** @type {import('vite').ViteDevServer} */
+	let dev_server;
+
+	/** @type {import('vite').Plugin} */
+	const plugin_remote = {
+		name: 'vite-plugin-sveltekit-remote',
+
+		configureServer(_dev_server) {
+			dev_server = _dev_server;
+		},
+
+		async transform(code, id, opts) {
+			if (!svelte_config.kit.moduleExtensions.some((ext) => id.endsWith(`.remote${ext}`))) {
+				return;
+			}
+
+			const file = posixify(path.relative(cwd, id));
+			const hashed = hash(file);
+
+			if (opts?.ssr) {
+				// in dev, add metadata to remote functions by self-importing
+				if (dev_server) {
+					return (
+						code +
+						dedent`
+							import * as $$_self_$$ from './${path.basename(id)}';
+							import { validate_remote_functions as $$_validate_$$ } from '@sveltejs/kit/internal';
+
+							$$_validate_$$($$_self_$$, ${s(file)});
+
+							for (const [name, fn] of Object.entries($$_self_$$)) {
+								fn.__.id = ${s(hashed)} + '/' + name;
+								fn.__.name = name;
+							}
+						`
+					);
+				}
+
+				// in prod, return as-is, and augment the build result instead.
+				// this allows us to treeshake non-dynamic `prerender` functions
+				return;
+			}
+
+			// For the client, read the exports and create a new module that only contains fetch functions with the correct metadata
+
+			/** @type {Map<string, import('types').RemoteInfo['type']>} */
+			const remotes = new Map();
+
+			// in dev, load the server module here (which will result in this hook
+			// being called again with `opts.ssr === true` if the module isn't
+			// already loaded) so we can determine what it exports
+			if (dev_server) {
+				const module = await dev_server.ssrLoadModule(id);
+
+				for (const [name, value] of Object.entries(module)) {
+					const type = value?.__?.type;
+					if (type) {
+						remotes.set(name, type);
+					}
+				}
+			}
+
+			// in prod, we already built and analysed the server code before
+			// building the client code, so `remote_exports` is populated
+			else if (remote_exports) {
+				const exports = remote_exports.get(hashed);
+				if (!exports) throw new Error('Expected to find metadata for remote file ' + id);
+
+				for (const [name, value] of exports) {
+					remotes.set(name, value.type);
+				}
+			}
+
+			let namespace = '__remote';
+			let uid = 1;
+			while (remotes.has(namespace)) namespace = `__remote${uid++}`;
+
+			const exports = Array.from(remotes).map(([name, type]) => {
+				return `export const ${name} = ${namespace}.${type}('${hashed}/${name}');`;
+			});
+
+			return {
+				code: `import * as ${namespace} from '__sveltekit/remote';\n\n${exports.join('\n')}\n`
+			};
+		}
+	};
+
 	/** @type {import('vite').Plugin} */
 	const plugin_compile = {
 		name: 'vite-plugin-sveltekit-compile',
@@ -602,6 +697,7 @@ Tips:
 				if (ssr) {
 					input.index = `${runtime_directory}/server/index.js`;
 					input.internal = `${kit.outDir}/generated/server/internal.js`;
+					input['remote-entry'] = `${runtime_directory}/app/server/remote/index.js`;
 
 					// add entry points for every endpoint...
 					manifest_data.routes.forEach((route) => {
@@ -633,6 +729,11 @@ Tips:
 						const name = posixify(path.join('entries/matchers', key));
 						input[name] = path.resolve(file);
 					});
+
+					// ...and every .remote file
+					for (const remote of manifest_data.remotes) {
+						input[`remote/${remote.hash}`] = path.resolve(remote.file);
+					}
 				} else if (svelte_config.kit.output.bundleStrategy !== 'split') {
 					input['bundle'] = `${runtime_directory}/client/bundle.js`;
 				} else {
@@ -834,6 +935,8 @@ Tips:
 					output_config: svelte_config.output
 				});
 
+				remote_exports = metadata.remotes;
+
 				log.info('Building app');
 
 				// create client build
@@ -984,6 +1087,9 @@ Tips:
 					static_exports
 				);
 
+				// ...make sure remote exports have their IDs assigned...
+				build_remotes(out, manifest_data);
+
 				// ...and prerender
 				const { prerendered, prerender_map } = await prerender({
 					hash: kit.router.type === 'hash',
@@ -1005,6 +1111,9 @@ Tips:
 					})};\n`
 				);
 
+				// remove prerendered remote functions
+				await treeshake_prerendered_remotes(out, manifest_data, metadata);
+
 				if (service_worker_entry_file) {
 					if (kit.paths.assets) {
 						throw new Error('Cannot use service worker alongside config.kit.paths.assets');
@@ -1075,7 +1184,13 @@ Tips:
 		}
 	};
 
-	return [plugin_setup, plugin_virtual_modules, plugin_guard, plugin_compile];
+	return [
+		plugin_setup,
+		kit.experimental.remoteFunctions && plugin_remote,
+		plugin_virtual_modules,
+		plugin_guard,
+		plugin_compile
+	].filter((p) => !!p);
 }
 
 /**

package/src/exports/vite/module_ids.js

@@ -1,4 +1,5 @@
 import { fileURLToPath } from 'node:url';
+import { posixify } from '../../utils/filesystem.js';
 
 export const env_static_private = '\0virtual:env/static/private';
 export const env_static_public = '\0virtual:env/static/public';
@@ -11,6 +12,6 @@ export const sveltekit_environment = '\0virtual:__sveltekit/environment';
 export const sveltekit_paths = '\0virtual:__sveltekit/paths';
 export const sveltekit_server = '\0virtual:__sveltekit/server';
 
-export const app_server = fileURLToPath(
-	new URL('../../runtime/app/server/index.js', import.meta.url)
+export const app_server = posixify(
+	fileURLToPath(new URL('../../runtime/app/server/index.js', import.meta.url))
 );

package/src/exports/vite/preview/index.js

@@ -128,8 +128,10 @@ export async function preview(vite, vite_config, svelte_config) {
 
 				const { pathname, search } = new URL(/** @type {string} */ (req.url), 'http://dummy');
 
+				const dir = pathname.startsWith(`/${svelte_config.kit.appDir}/remote/`) ? 'data' : 'pages';
+
 				let filename = normalizePath(
-					join(svelte_config.kit.outDir, 'output/prerendered/pages' + pathname)
+					join(svelte_config.kit.outDir, `output/prerendered/${dir}` + pathname)
 				);
 
 				try {

package/src/runtime/app/navigation.js

@@ -5,6 +5,7 @@ export {
 	goto,
 	invalidate,
 	invalidateAll,
+	refreshAll,
 	onNavigate,
 	preloadCode,
 	preloadData,

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

@@ -73,3 +73,5 @@ export function read(asset) {
 }
 
 export { getRequestEvent } from './event.js';
+
+export { query, prerender, command, form } from './remote/index.js';

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

@@ -0,0 +1,91 @@
+/** @import { RemoteCommand } from '@sveltejs/kit' */
+/** @import { RemoteInfo, MaybePromise } from 'types' */
+/** @import { StandardSchemaV1 } from '@standard-schema/spec' */
+import { getRequestEvent } from '../event.js';
+import { check_experimental, create_validator, run_remote_function } from './shared.js';
+import { get_event_state } from '../../../server/event-state.js';
+
+/**
+ * Creates a remote command. 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#command) for full documentation.
+ *
+ * @template Output
+ * @overload
+ * @param {() => Output} fn
+ * @returns {RemoteCommand<void, Output>}
+ * @since 2.27
+ */
+/**
+ * Creates a remote command. 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#command) for full documentation.
+ *
+ * @template Input
+ * @template Output
+ * @overload
+ * @param {'unchecked'} validate
+ * @param {(arg: Input) => Output} fn
+ * @returns {RemoteCommand<Input, Output>}
+ * @since 2.27
+ */
+/**
+ * Creates a remote command. 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#command) for full documentation.
+ *
+ * @template {StandardSchemaV1} Schema
+ * @template Output
+ * @overload
+ * @param {Schema} validate
+ * @param {(arg: StandardSchemaV1.InferOutput<Schema>) => Output} fn
+ * @returns {RemoteCommand<StandardSchemaV1.InferOutput<Schema>, Output>}
+ * @since 2.27
+ */
+/**
+ * @template Input
+ * @template Output
+ * @param {any} validate_or_fn
+ * @param {(arg?: Input) => Output} [maybe_fn]
+ * @returns {RemoteCommand<Input, Output>}
+ * @since 2.27
+ */
+/*@__NO_SIDE_EFFECTS__*/
+export function command(validate_or_fn, maybe_fn) {
+	check_experimental('command');
+
+	/** @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: 'command', id: '', name: '' };
+
+	/** @type {RemoteCommand<Input, Output> & { __: RemoteInfo }} */
+	const wrapper = (arg) => {
+		const event = getRequestEvent();
+
+		if (!event.isRemoteRequest) {
+			throw new Error(
+				`Cannot call a command (\`${__.name}(${maybe_fn ? '...' : ''})\`) during server-side rendering`
+			);
+		}
+
+		get_event_state(event).refreshes ??= {};
+
+		const promise = Promise.resolve(run_remote_function(event, true, arg, validate, fn));
+
+		// @ts-expect-error
+		promise.updates = () => {
+			throw new Error(`Cannot call '${__.name}(...).updates(...)' on the server`);
+		};
+
+		return /** @type {ReturnType<RemoteCommand<Input, Output>>} */ (promise);
+	};
+
+	Object.defineProperty(wrapper, '__', { value: __ });
+
+	return wrapper;
+}

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

@@ -0,0 +1,124 @@
+/** @import { RemoteForm } from '@sveltejs/kit' */
+/** @import { RemoteInfo, MaybePromise } from 'types' */
+import { getRequestEvent } from '../event.js';
+import { check_experimental, run_remote_function } from './shared.js';
+import { get_event_state } from '../../../server/event-state.js';
+
+/**
+ * Creates a form object that can be spread onto a `<form>` element.
+ *
+ * See [Remote functions](https://svelte.dev/docs/kit/remote-functions#form) for full documentation.
+ *
+ * @template T
+ * @param {(data: FormData) => MaybePromise<T>} fn
+ * @returns {RemoteForm<T>}
+ * @since 2.27
+ */
+/*@__NO_SIDE_EFFECTS__*/
+// @ts-ignore we don't want to prefix `fn` with an underscore, as that will be user-visible
+export function form(fn) {
+	check_experimental('form');
+
+	/**
+	 * @param {string | number | boolean} [key]
+	 */
+	function create_instance(key) {
+		/** @type {RemoteForm<T>} */
+		const instance = {};
+
+		instance.method = 'POST';
+		instance.onsubmit = () => {};
+
+		Object.defineProperty(instance, 'enhance', {
+			value: () => {
+				return { action: instance.action, method: instance.method, onsubmit: instance.onsubmit };
+			}
+		});
+
+		const button_props = {
+			type: 'submit',
+			onclick: () => {}
+		};
+
+		Object.defineProperty(button_props, 'enhance', {
+			value: () => {
+				return { type: 'submit', formaction: instance.buttonProps.formaction, onclick: () => {} };
+			}
+		});
+
+		Object.defineProperty(instance, 'buttonProps', {
+			value: button_props
+		});
+
+		/** @type {RemoteInfo} */
+		const __ = {
+			type: 'form',
+			name: '',
+			id: '',
+			/** @param {FormData} form_data */
+			fn: async (form_data) => {
+				const event = getRequestEvent();
+				const state = get_event_state(event);
+
+				state.refreshes ??= {};
+
+				const result = await run_remote_function(event, true, form_data, (d) => d, fn);
+
+				// We don't need to care about args or deduplicating calls, because uneval results are only relevant in full page reloads
+				// where only one form submission is active at the same time
+				if (!event.isRemoteRequest) {
+					state.form_result = [key, result];
+				}
+
+				return result;
+			}
+		};
+
+		Object.defineProperty(instance, '__', { value: __ });
+
+		Object.defineProperty(instance, 'action', {
+			get: () => `?/remote=${__.id}`,
+			enumerable: true
+		});
+
+		Object.defineProperty(button_props, 'formaction', {
+			get: () => `?/remote=${__.id}`,
+			enumerable: true
+		});
+
+		Object.defineProperty(instance, 'result', {
+			get() {
+				try {
+					const { form_result } = get_event_state(getRequestEvent());
+					return form_result && form_result[0] === key ? form_result[1] : undefined;
+				} catch {
+					return undefined;
+				}
+			}
+		});
+
+		if (key == undefined) {
+			Object.defineProperty(instance, 'for', {
+				/** @type {RemoteForm<any>['for']} */
+				value: (key) => {
+					const state = get_event_state(getRequestEvent());
+					let instance = (state.form_instances ??= new Map()).get(key);
+
+					if (!instance) {
+						instance = create_instance(key);
+						instance.__.id = `${__.id}/${encodeURIComponent(JSON.stringify(key))}`;
+						instance.__.name = __.name;
+
+						state.form_instances.set(key, instance);
+					}
+
+					return instance;
+				}
+			});
+		}
+
+		return instance;
+	}
+
+	return create_instance();
+}

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

@@ -0,0 +1,4 @@
+export { command } from './command.js';
+export { form } from './form.js';
+export { prerender } from './prerender.js';
+export { query } from './query.js';