feat: route level config

documentation/docs/20-core-concepts/40-page-options.md

@@ -125,3 +125,51 @@ export const trailingSlash = 'always';
 This option also affects [prerendering](#prerender). If `trailingSlash` is `always`, a route like `/about` will result in an `about/index.html` file, otherwise it will create `about.html`, mirroring static webserver conventions.
 
 > Ignoring trailing slashes is not recommended — the semantics of relative paths differ between the two cases (`./y` from `/x` is `/y`, but from `/x/` is `/x/y`), and `/x` and `/x/` are treated as separate URLs which is harmful to SEO.
+
+## config
+
+With the concept of [adapters](/docs/adapters), SvelteKit is able to run on a variety of platforms. Each of these might have specific configuration to further tweak the deployment — for example with Vercel or Netlify you could chose to deploy some parts of your app on the edge and others on serverless environments.
+
+`config` is an object with key-value pairs at the top level. Beyond that, the concrete shape is dependent on the adapter you're using. Every adapter should provide a `Config` interface to import for type safety. Consult the documentation of your adapter for more information.
+
+```js
+// @filename: ambient.d.ts
+declare module 'some-adapter' {
+	export interface Config { runtime: string }
+}
+
+// @filename: index.js
+---cut---
+/// file: src/routes/+page.js
+/** @type {import('some-adapter').Config} */
+export const config: Config = {
+	runtime: 'edge';
+};
+```
+
+`config` objects are merged at the top level (but _not_ deeper levels). This means you don't need to repeat all the values in a `+page.js` if you want to only override some of the values in the upper `+layout.js`. For example this layout configuration...
+
+```js
+/// file: src/routes/+layout.js
+export const config = {
+	runtime: 'edge',
+	regions: 'all',
+	foo: {
+		bar: true
+	}
+}
+```
+
+...is overridden by this page configuration...
+
+```js
+/// file: src/routes/+page.js
+export const config = {
+	regions: ['us1', 'us2'],
+	foo: {
+		baz: true
+	}
+}
+```
+
+...which results in the config value `{ runtime: 'edge', regions: ['us1', 'us2'], foo: { baz: true } }` for that page.

documentation/docs/25-build-and-deploy/90-adapter-vercel.md

@@ -36,6 +36,10 @@ export default {
 };
 ```
 
+## Config options
+
+Besides the config options shown above, the Vercel adapter also supports the [`runtime`](https://vercel.com/docs/build-output-api/v3#vercel-primitives/serverless-functions/configuration), [`regions`](https://vercel.com/docs/concepts/edge-network/regions), [`maxDuration`](https://vercel.com/docs/build-output-api/v3#vercel-primitives/serverless-functions/configuration) and [`memory`](https://vercel.com/docs/build-output-api/v3#vercel-primitives/serverless-functions/configuration) options for serverless functions and the [`regions`](https://vercel.com/docs/concepts/edge-network/regions) and [`envVarsInUse`](https://vercel.com/docs/build-output-api/v3#vercel-primitives/edge-functions/configuration) options for edge functions. You can set defaults through the adapter options and override them inside `+page/layout(.server).js` files using the [config](/docs/page-options#config) export.
+
 ## Environment Variables
 
 Vercel makes a set of [deployment-specific environment variables](https://vercel.com/docs/concepts/projects/environment-variables#system-environment-variables) available. Like other environment variables, these are accessible from `$env/static/private` and `$env/dynamic/private` (sometimes — more on that later), and inaccessible from their public counterparts. To access one of these variables from the client:

packages/adapter-vercel/files/edge.js

@@ -3,7 +3,7 @@ import { manifest } from 'MANIFEST';
 
 const server = new Server(manifest);
 const initialized = server.init({
-	env: process.env
+	env: /** @type {Record<string, string>} */ (process.env)
 });
 
 /**
@@ -13,7 +13,7 @@ export default async (request) => {
 	await initialized;
 	return server.respond(request, {
 		getClientAddress() {
-			return request.headers.get('x-forwarded-for');
+			return /** @type {string} */ (request.headers.get('x-forwarded-for'));
 		}
 	});
 };

packages/adapter-vercel/files/serverless.js

@@ -8,7 +8,7 @@ installPolyfills();
 const server = new Server(manifest);
 
 await server.init({
-	env: process.env
+	env: /** @type {Record<string, string>} */ (process.env)
 });
 
 /**
@@ -22,15 +22,15 @@ export default async (req, res) => {
 	try {
 		request = await getRequest({ base: `https://${req.headers.host}`, request: req });
 	} catch (err) {
-		res.statusCode = err.status || 400;
+		res.statusCode = /** @type {any} */ (err).status || 400;
 		return res.end('Invalid request body');
 	}
 
 	setResponse(
 		res,
 		await server.respond(request, {
 			getClientAddress() {
-				return request.headers.get('x-forwarded-for');
+				return /** @type {string} */ (request.headers.get('x-forwarded-for'));
 			}
 		})
 	);

packages/adapter-vercel/index.d.ts

@@ -4,6 +4,36 @@ type Options = {
 	edge?: boolean;
 	external?: string[];
 	split?: boolean;
-};
+} & Config;
 
 export default function plugin(options?: Options): Adapter;
+
+export interface Config {
+	/**
+	 * To which runtime to deploy the app. Can be one of:
+	 * - `edge`: https://vercel.com/docs/concepts/functions/edge-functions
+	 * - `serverless` or a string specifying the serverless runtime (like `node16`): https://vercel.com/docs/concepts/functions/serverless-functions
+	 * @default 'serverless'
+	 */
+	runtime?: 'serverless' | 'edge' | (string & {});
+	/**
+	 * To which regions to deploy the app. A list of regions or `'all'` for edge functions.
+	 * More info: https://vercel.com/docs/concepts/edge-network/regions
+	 */
+	regions?: string[] | 'all';
+	/**
+	 * List of environment variable names that will be available for the Edge Function to utilize.
+	 * Edge only.
+	 */
+	envVarsInUse?: string[];
+	/**
+	 * Maximum execution duration (in seconds) that will be allowed for the Serverless Function.
+	 * Serverless only.
+	 */
+	maxDuration?: number;
+	/**
+	 * Amount of memory (RAM in MB) that will be allocated to the Serverless Function.
+	 * Serverless only.
+	 */
+	memory?: number;
+}

packages/adapter-vercel/index.js

@@ -5,7 +5,7 @@ import { nodeFileTrace } from '@vercel/nft';
 import esbuild from 'esbuild';
 
 /** @type {import('.').default} **/
-const plugin = function ({ external = [], edge, split } = {}) {
+const plugin = function ({ external = [], edge, split, ...default_config } = {}) {
 	return {
 		name: '@sveltejs/adapter-vercel',
 
@@ -25,16 +25,17 @@ const plugin = function ({ external = [], edge, split } = {}) {
 				functions: `${dir}/functions`
 			};
 
-			const config = static_vercel_config(builder);
+			const static_config = static_vercel_config(builder);
 
 			builder.log.minor('Generating serverless function...');
 
 			/**
 			 * @param {string} name
 			 * @param {string} pattern
+			 * @param {import('.').Config | undefined} config
 			 * @param {(options: { relativePath: string }) => string} generate_manifest
 			 */
-			async function generate_serverless_function(name, pattern, generate_manifest) {
+			async function generate_serverless_function(name, pattern, config, generate_manifest) {
 				const relativePath = path.posix.relative(tmp, builder.getServerDirectory());
 
 				builder.copy(`${files}/serverless.js`, `${tmp}/index.js`, {
@@ -53,18 +54,20 @@ const plugin = function ({ external = [], edge, split } = {}) {
 					builder,
 					`${tmp}/index.js`,
 					`${dirs.functions}/${name}.func`,
-					`nodejs${node_version.major}.x`
+					`nodejs${node_version.major}.x`,
+					config
 				);
 
-				config.routes.push({ src: pattern, dest: `/${name}` });
+				static_config.routes.push({ src: pattern, dest: `/${name}` });
 			}
 
 			/**
 			 * @param {string} name
 			 * @param {string} pattern
+			 * @param {import('.').Config | undefined} config
 			 * @param {(options: { relativePath: string }) => string} generate_manifest
 			 */
-			async function generate_edge_function(name, pattern, generate_manifest) {
+			async function generate_edge_function(name, pattern, config, generate_manifest) {
 				const tmp = builder.getBuildDirectory(`vercel-tmp/${name}`);
 				const relativePath = path.posix.relative(tmp, builder.getServerDirectory());
 
@@ -95,22 +98,24 @@ const plugin = function ({ external = [], edge, split } = {}) {
 				write(
 					`${dirs.functions}/${name}.func/.vc-config.json`,
 					JSON.stringify({
+						...config,
 						runtime: 'edge',
 						entrypoint: 'index.js'
-						// TODO expose envVarsInUse
 					})
 				);
 
-				config.routes.push({ src: pattern, dest: `/${name}` });
+				static_config.routes.push({ src: pattern, dest: `/${name}` });
 			}
 
-			const generate_function = edge ? generate_edge_function : generate_serverless_function;
-
-			if (split) {
+			if (split || builder.hasRouteLevelConfig) {
 				await builder.createEntries((route) => {
+					const route_config = { ...default_config, ...route.config };
 					return {
 						id: route.pattern.toString(), // TODO is `id` necessary?
-						filter: (other) => route.pattern.toString() === other.pattern.toString(),
+						filter: (other) =>
+							split
+								? route.pattern.toString() === other.pattern.toString()
+								: can_group(route_config, { ...default_config, ...other.config }),
 						complete: async (entry) => {
 							let sliced_pattern = route.pattern
 								.toString()
@@ -126,12 +131,22 @@ const plugin = function ({ external = [], edge, split } = {}) {
 
 							const src = `${sliced_pattern}(?:/__data.json)?$`; // TODO adding /__data.json is a temporary workaround — those endpoints should be treated as distinct routes
 
-							await generate_function(route.id.slice(1) || 'index', src, entry.generateManifest);
+							const generate_function =
+								edge && (!route_config.runtime || route_config.runtime === 'edge')
+									? generate_edge_function
+									: generate_serverless_function;
+							await generate_function(
+								route.id.slice(1) || 'index',
+								src,
+								route_config,
+								entry.generateManifest
+							);
 						}
 					};
 				});
 			} else {
-				await generate_function('render', '/.*', builder.generateManifest);
+				const generate_function = edge ? generate_edge_function : generate_serverless_function;
+				await generate_function('render', '/.*', default_config, builder.generateManifest);
 			}
 
 			builder.log.minor('Copying assets...');
@@ -141,11 +156,44 @@ const plugin = function ({ external = [], edge, split } = {}) {
 
 			builder.log.minor('Writing routes...');
 
-			write(`${dir}/config.json`, JSON.stringify(config, null, '  '));
+			write(`${dir}/config.json`, JSON.stringify(static_config, null, '  '));
 		}
 	};
 };
 
+/**
+ * @param {import('.').Config | undefined} config_a
+ * @param {import('.').Config | undefined} config_b
+ */
+function can_group(config_a, config_b) {
+	if (config_a === config_b) return true;
+	if (!config_a || !config_b) return false;
+
+	if (config_a.runtime !== config_b.runtime) return false;
+	if (config_a.maxDuration !== config_b.maxDuration) return false;
+	if (config_a.memory !== config_b.memory) return false;
+	if (arrays_different(config_a.envVarsInUse, config_b.envVarsInUse)) return false;
+
+	const regions_a = config_a.regions === 'all' ? ['all'] : config_a.regions;
+	const regions_b = config_b.regions === 'all' ? ['all'] : config_b.regions;
+	if (arrays_different(regions_a, regions_b)) return false;
+
+	return true;
+}
+
+/**
+ *
+ * @param {any[] | undefined} a
+ * @param {any[] | undefined} b
+ * @returns
+ */
+function arrays_different(a, b) {
+	if (a === b) return false;
+	if (!a || !b) return true;
+	if (a.length !== b.length) return true;
+	return a.every((e) => b.includes(e));
+}
+
 /**
  * @param {string} file
  * @param {string} data
@@ -228,8 +276,9 @@ function static_vercel_config(builder) {
  * @param {string} entry
  * @param {string} dir
  * @param {string} runtime
+ * @param {import('.').Config | undefined} config
  */
-async function create_function_bundle(builder, entry, dir, runtime) {
+async function create_function_bundle(builder, entry, dir, runtime, config) {
 	fs.rmSync(dir, { force: true, recursive: true });
 
 	let base = entry;
@@ -257,7 +306,7 @@ async function create_function_bundle(builder, entry, dir, runtime) {
 				resolution_failures.set(importer, []);
 			}
 
-			resolution_failures.get(importer).push(module);
+			/** @type {string[]} */ (resolution_failures.get(importer)).push(module);
 		} else {
 			throw error;
 		}
@@ -278,7 +327,8 @@ async function create_function_bundle(builder, entry, dir, runtime) {
 	}
 
 	// find common ancestor directory
-	let common_parts;
+	/** @type {string[]} */
+	let common_parts = [];
 
 	for (const file of traced.fileList) {
 		if (common_parts) {
@@ -324,6 +374,7 @@ async function create_function_bundle(builder, entry, dir, runtime) {
 		`${dir}/.vc-config.json`,
 		JSON.stringify({
 			runtime,
+			...config,
 			handler: path.relative(base + ancestor, entry),
 			launcherType: 'Nodejs'
 		})

packages/adapter-vercel/tsconfig.json

@@ -2,6 +2,7 @@
 	"compilerOptions": {
 		"allowJs": true,
 		"checkJs": true,
+		"strict": true,
 		"noEmit": true,
 		"noImplicitAny": true,
 		"module": "es2022",

packages/kit/src/core/adapt/builder.js

@@ -33,6 +33,9 @@ export function create_builder({ config, build_data, server_metadata, routes, pr
 
 		config,
 		prerendered,
+		hasRouteLevelConfig:
+			!!server_metadata.routes &&
+			!![...server_metadata.routes.values()].some((route) => route.config),
 
 		async compress(directory) {
 			if (!existsSync(directory)) {
@@ -57,6 +60,7 @@ export function create_builder({ config, build_data, server_metadata, routes, pr
 				const methods =
 					/** @type {import('types').HttpMethod[]} */
 					(server_metadata.routes.get(route.id)?.methods);
+				const config = server_metadata.routes.get(route.id)?.config;
 
 				return {
 					id: route.id,
@@ -66,7 +70,8 @@ export function create_builder({ config, build_data, server_metadata, routes, pr
 						content: segment
 					})),
 					pattern: route.pattern,
-					methods
+					methods,
+					config
 				};
 			});