Vite Environment API - Cloudflare environment support

package.json

@@ -28,6 +28,11 @@
 		"playwright": "^1.44.1",
 		"typescript-eslint": "^8.0.0"
 	},
+	"pnpm": {
+		"overrides": {
+			"vite": "6.0.0-alpha.23"
+		}
+	},
 	"packageManager": "pnpm@9.10.0",
 	"engines": {
 		"pnpm": "^9.0.0"

packages/kit/package.json

@@ -26,6 +26,7 @@
 		"kleur": "^4.1.5",
 		"magic-string": "^0.30.5",
 		"mrmime": "^2.0.0",
+		"pathe": "^1.1.2",
 		"sade": "^1.8.1",
 		"set-cookie-parser": "^2.6.0",
 		"sirv": "^2.0.4",

packages/kit/src/core/config/index.spec.js

@@ -76,6 +76,9 @@ const get_defaults = (prefix = '') => ({
 			publicPrefix: 'PUBLIC_',
 			privatePrefix: ''
 		},
+		environments: {
+			ssr: null
+		},
 		files: {
 			assets: join(prefix, 'static'),
 			hooks: {

packages/kit/src/core/config/options.js

@@ -120,6 +120,13 @@ const options = object(
 				privatePrefix: string('')
 			}),
 
+			// New environments option. The fallback for each environment could eventually be a default Node environment.
+			environments: object({
+				ssr: validate(null, (input) => {
+					return input;
+				})
+			}),
+
 			files: object({
 				assets: string('static'),
 				hooks: object({

packages/kit/src/exports/public.d.ts

@@ -1,6 +1,7 @@
 import 'svelte'; // pick up `declare module "*.svelte"`
 import 'vite/client'; // pick up `declare module "*.jpg"`, etc.
 import '../types/ambient.js';
+import { Plugin } from 'vite';
 
 import { CompileOptions } from 'svelte/compiler';
 import {
@@ -407,6 +408,12 @@ export interface KitConfig {
 		 */
 		privatePrefix?: string;
 	};
+	/**
+	 * The new `environments` option. The user provides a factory function that is then used to create the plugin.
+	 */
+	environments?: {
+		ssr?: (environmentName: string, options?: any) => Plugin[];
+	};
 	/**
 	 * Where to find various files within your project.
 	 */

packages/kit/src/exports/vite/constants.js

@@ -0,0 +1 @@
+export const SSR_ENVIRONMENT_NAME = '__ssr_environment__';

packages/kit/src/exports/vite/dev/cloudflare_entrypoint.js

@@ -0,0 +1,33 @@
+// This should be exported from @sveltejs/kit so that the path isn't relative
+import { Server } from '../../../runtime/server/index.js';
+
+export default {
+	/**
+	 * This fetch handler is the entrypoint for the environment.
+	 * @param {Request & { cf: any }} request
+	 * @param {any} env
+	 * @param {any} context
+	 */
+	fetch: async (request, env, context) => {
+		const environment_context = await import('__sveltekit/environment_context');
+		const server = new Server(environment_context.manifest);
+
+		await server.init({
+			env: environment_context.env
+		});
+
+		return server.respond(request, {
+			getClientAddress: () => {
+				if (environment_context.remote_address) return environment_context.remote_address;
+				throw new Error('Could not determine clientAddress');
+			},
+			// We can provide the platform properties directly as the code is executed in a workerd environment.
+			platform: {
+				env,
+				cf: request.cf,
+				context,
+				caches
+			}
+		});
+	}
+};

packages/kit/src/exports/vite/dev/default_environment.js

@@ -0,0 +1,27 @@
+import { createNodeDevEnvironment } from 'vite';
+
+/**
+ * A default Node environment to pass to kit.environments.ssr in the Svelte config. This could eventually be used as the fallback for this option.
+ * @returns {(environment_name: string) => import('vite').Plugin[]}
+ */
+export function node() {
+	// @ts-ignore
+	return function default_environment(environment_name) {
+		return [
+			{
+				name: 'vite-plugin-sveltekit-default-environment',
+				config: () => {
+					return {
+						environments: {
+							[environment_name]: {
+								dev: {
+									createEnvironment: createNodeDevEnvironment
+								}
+							}
+						}
+					};
+				}
+			}
+		];
+	};
+}

packages/kit/src/exports/vite/dev/index.js

@@ -1,11 +1,11 @@
 import fs from 'node:fs';
 import path from 'node:path';
 import process from 'node:process';
-import { URL } from 'node:url';
+import { fileURLToPath, URL } from 'node:url';
 import { AsyncLocalStorage } from 'node:async_hooks';
 import colors from 'kleur';
 import sirv from 'sirv';
-import { isCSSRequest, loadEnv, buildErrorMessage } from 'vite';
+import { isCSSRequest, loadEnv, buildErrorMessage, createServerModuleRunner } from 'vite';
 import { createReadableStream, getRequest, setResponse } from '../../../exports/node/index.js';
 import { installPolyfills } from '../../../exports/node/polyfills.js';
 import { coalesce_to_error } from '../../../utils/error.js';
@@ -18,16 +18,19 @@ import { compact } from '../../../utils/array.js';
 import { not_found } from '../utils.js';
 import { SCHEME } from '../../../utils/url.js';
 import { check_feature } from '../../../utils/features.js';
+import { sveltekit_environment_context } from '../module_ids.js';
+import { SSR_ENVIRONMENT_NAME } from '../constants.js';
 
 const cwd = process.cwd();
 
 /**
  * @param {import('vite').ViteDevServer} vite
  * @param {import('vite').ResolvedConfig} vite_config
  * @param {import('types').ValidatedConfig} svelte_config
+ * @param {import('types').EnvironmentContext} environment_context
  * @return {Promise<Promise<() => void>>}
  */
-export async function dev(vite, vite_config, svelte_config) {
+export async function dev(vite, vite_config, svelte_config, environment_context) {
 	installPolyfills();
 
 	const async_local_storage = new AsyncLocalStorage();
@@ -98,10 +101,30 @@ export async function dev(vite, vite_config, svelte_config) {
 		return { module, module_node, url };
 	}
 
+	/**
+	 * Used to invalidate the `sveltekit_environment_context` module when the manifest is updated.
+	 */
+	function invalidate_environment_context_module() {
+		for (const environment in vite.environments) {
+			const module = vite.environments[environment].moduleGraph.getModuleById(
+				sveltekit_environment_context
+			);
+
+			if (module) {
+				vite.environments[environment].moduleGraph.invalidateModule(module);
+			}
+		}
+	}
+
 	function update_manifest() {
 		try {
 			({ manifest_data } = sync.create(svelte_config));
 
+			// Update the `manifest_data` used in the `sveltekit_environment_context` virtual module.
+			environment_context.manifest_data = manifest_data;
+			// Invalidate the virtual module.
+			invalidate_environment_context_module();
+
 			if (manifest_error) {
 				manifest_error = null;
 				vite.ws.send({ type: 'full-reload' });
@@ -420,8 +443,36 @@ export async function dev(vite, vite_config, svelte_config) {
 	});
 
 	const env = loadEnv(vite_config.mode, svelte_config.kit.env.dir, '');
+	// Update the `env` used in the `sveltekit_environment_context` virtual module.
+	environment_context.env = env;
 	const emulator = await svelte_config.kit.adapter?.emulate?.();
 
+	/**
+	 * The environment that was provided to `kit.environments.ssr` in the Svelte config.
+	 * @type { ((import('vite').DevEnvironment & { api?: { getHandler: (opts: { entrypoint: string }) => Promise<(req: Request) => Promise<Response>> }})) | undefined }
+	 */
+	const devEnv = vite.environments[SSR_ENVIRONMENT_NAME];
+
+	const __dirname = fileURLToPath(new URL('.', import.meta.url));
+
+	/** @type {((req: Request) => Promise<Response>) | undefined} */
+	let handler;
+
+	// Create the handler for the Cloudflare or Node environment if it exists.
+	if (devEnv) {
+		if (devEnv.api) {
+			handler = await devEnv.api.getHandler({
+				entrypoint: path.join(__dirname, 'cloudflare_entrypoint.js')
+			});
+			console.log('Running in Cloudflare environment');
+		} else {
+			const module_runner = createServerModuleRunner(vite.environments[SSR_ENVIRONMENT_NAME]);
+			const entrypoint = await module_runner.import(path.join(__dirname, 'node_entrypoint.js'));
+			handler = entrypoint.default.fetch;
+			console.log('Running in Node environment');
+		}
+	}
+
 	return () => {
 		const serve_static_middleware = vite.middlewares.stack.find(
 			(middleware) =>
@@ -433,6 +484,9 @@ export async function dev(vite, vite_config, svelte_config) {
 		remove_static_middlewares(vite.middlewares);
 
 		vite.middlewares.use(async (req, res) => {
+			// Update the `remote_address` used in the `sveltekit_environment_context` virtual module.
+			environment_context.remote_address = req.socket.remoteAddress;
+
 			// Vite's base middleware strips out the base path. Restore it
 			const original_url = req.url;
 			req.url = req.originalUrl;
@@ -522,18 +576,21 @@ export async function dev(vite, vite_config, svelte_config) {
 					return;
 				}
 
-				const rendered = await server.respond(request, {
-					getClientAddress: () => {
-						const { remoteAddress } = req.socket;
-						if (remoteAddress) return remoteAddress;
-						throw new Error('Could not determine clientAddress');
-					},
-					read: (file) => fs.readFileSync(path.join(svelte_config.kit.files.assets, file)),
-					before_handle: (event, config, prerender) => {
-						async_local_storage.enterWith({ event, config, prerender });
-					},
-					emulator
-				});
+				// Render using the environment handler if it has been created. Else, fallback to the default behaviour.
+				const rendered = handler
+					? await handler(request)
+					: await server.respond(request, {
+							getClientAddress: () => {
+								const { remoteAddress } = req.socket;
+								if (remoteAddress) return remoteAddress;
+								throw new Error('Could not determine clientAddress');
+							},
+							read: (file) => fs.readFileSync(path.join(svelte_config.kit.files.assets, file)),
+							before_handle: (event, config, prerender) => {
+								async_local_storage.enterWith({ event, config, prerender });
+							},
+							emulator
+						});
 
 				if (rendered.status === 404) {
 					// @ts-expect-error

packages/kit/src/exports/vite/dev/node_entrypoint.js

@@ -0,0 +1,24 @@
+// This should be exported from @sveltejs/kit so that the path isn't relative
+import { Server } from '../../../runtime/server/index.js';
+
+export default {
+	/**
+	 * This fetch handler is the entrypoint for the environment.
+	 * @param {Request} request
+	 */
+	fetch: async (request) => {
+		const environment_context = await import('__sveltekit/environment_context');
+		const server = new Server(environment_context.manifest);
+
+		await server.init({
+			env: environment_context.env
+		});
+
+		return server.respond(request, {
+			getClientAddress: () => {
+				if (environment_context.remote_address) return environment_context.remote_address;
+				throw new Error('Could not determine clientAddress');
+			}
+		});
+	}
+};