feat: Runtime SVELTE_PUBLIC_* env variables

.changeset/new-apples-confess.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+Add support for runtime environment variables (SVELTE*PUBLIC*\*)

packages/kit/src/runtime/app/env.js

@@ -14,5 +14,22 @@ export const mode = import.meta.env.MODE;
  * @type {import('$app/env').amp}
  */
 export const amp = !!import.meta.env.VITE_SVELTEKIT_AMP;
+/**
+ * @type {import('$app/env').env}
+ */
+export const env = extractEnv();
 
 export { prerendering } from '../env.js';
+
+function extractEnv() {
+	if (typeof process === 'object' && typeof process.env === 'object') {
+		return process.env;
+	}
+	if (typeof document !== 'undefined') {
+		const el = document.querySelector('script[type="svelte/env"]');
+		if (el) {
+			return new Function('return ' + el?.textContent)();
+		}
+	}
+	return {};
+}

packages/kit/src/runtime/server/page/render.js

@@ -7,6 +7,8 @@ import { s } from '../../../utils/misc.js';
 import { create_prerendering_url_proxy } from './utils.js';
 import { Csp, csp_ready } from './csp.js';
 
+const envScript = renderEnvScript();
+
 // TODO rename this function/module
 
 const updated = {
@@ -137,6 +139,7 @@ export async function render_response({
 
 		try {
 			rendered = options.root.render(props);
+			rendered.head += envScript;
 		} finally {
 			unsubscribe();
 		}
@@ -355,3 +358,19 @@ function serialize_error(error) {
 	}
 	return serialized;
 }
+
+function renderEnvScript() {
+	/** @type {Record<string, string | undefined>} */
+	const env = {};
+	if (typeof process === 'object' && typeof process.env === 'object') {
+		Object.entries(process.env).forEach(([name, value]) => {
+			if (name.startsWith('SVELTE_PUBLIC_')) {
+				env[name] = value;
+			}
+		});
+	}
+	if (Object.keys(env).length === 0) {
+		return '';
+	}
+	return `\n    <script type="svelte/env">${devalue(env)}</script>`;
+}

packages/kit/types/ambient.d.ts

@@ -67,6 +67,11 @@ declare module '$app/env' {
 	 * By default, `svelte-kit dev` runs with `mode=development` and `svelte-kit build` runs with `mode=production`.
 	 */
 	export const mode: string;
+	/**
+	 * Runtime environment variables.
+	 * Only variables starting with "SVELTE_PUBLIC_" are available on the client, the server has access to all variables.
+	 */
+	export const env: Record<string, string | undefined>;
 }
 
 /**