Generate dynamic env types (#6413)

* use descriptions in generated env types

* generate dynamic env types

* remove references to PublicEnv and PrivateEnv

* generate dynamic env types - closes #6202

Author: Rich-Harris

.changeset/dull-cheetahs-clean.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+[breaking] remove App.PrivateEnv and App.PublicEnv in favour of generated types

.changeset/lovely-otters-lie.md

@@ -0,0 +1,5 @@
+---
+'create-svelte': patch
+---
+
+Remove App.PrivateEnv and App.PublicEnv placeholders

packages/create-svelte/templates/default/src/app.d.ts

@@ -9,8 +9,4 @@ declare namespace App {
 	// interface PageData {}
 
 	// interface Platform {}
-
-	// interface PrivateEnv {}
-
-	// interface PublicEnv {}
 }

packages/create-svelte/templates/libskeleton/src/app.d.ts

@@ -7,6 +7,4 @@ declare namespace App {
 	// interface Locals {}
 	// interface PageData {}
 	// interface Platform {}
-	// interface PrivateEnv {}
-	// interface PublicEnv {}
 }

packages/create-svelte/templates/skeleton/src/app.d.ts

@@ -5,6 +5,4 @@ declare namespace App {
 	// interface Locals {}
 	// interface PageData {}
 	// interface Platform {}
-	// interface PrivateEnv {}
-	// interface PublicEnv {}
 }

packages/kit/scripts/special-types/$env+dynamic+private.md

@@ -0,0 +1,8 @@
+This module provides access to runtime environment variables, as defined by the platform you're running on. For example if you're using [`adapter-node`](https://github.com/sveltejs/kit/tree/master/packages/adapter-node) (or running [`vite preview`](https://kit.svelte.dev/docs/cli)), this is equivalent to `process.env`. This module only includes variables that _do not_ begin with [`config.kit.env.publicPrefix`](https://kit.svelte.dev/docs/configuration#kit-env-publicprefix).
+
+This module cannot be imported into client-side code.
+
+```ts
+import { env } from '$env/dynamic/private';
+console.log(env.DEPLOYMENT_SPECIFIC_VARIABLE);
+```

packages/kit/scripts/special-types/$env+dynamic+public.md

@@ -0,0 +1,8 @@
+Similar to [`$env/dynamic/private`](https://kit.svelte.dev/docs/modules#$env-dynamic-private), but only includes variables that begin with [`config.kit.env.publicPrefix`](https://kit.svelte.dev/docs/configuration#kit-env-publicprefix) (which defaults to `PUBLIC_`), and can therefore safely be exposed to client-side code.
+
+Note that public dynamic environment variables must all be sent from the server to the client, causing larger network requests — when possible, use `$env/static/public` instead.
+
+```ts
+import { env } from '$env/dynamic/public';
+console.log(env.PUBLIC_DEPLOYMENT_SPECIFIC_VARIABLE);
+```

packages/kit/src/core/env.js

@@ -34,7 +34,7 @@ export function create_dynamic_module(type) {
  * @param {Record<string, string>} env
  * @returns {string}
  */
-export function create_types(id, env) {
+export function create_static_types(id, env) {
 	const declarations = Object.keys(env)
 		.filter((k) => valid_identifier.test(k))
 		.map((k) => `\texport const ${k}: string;`)
@@ -43,6 +43,21 @@ export function create_types(id, env) {
 	return `declare module '${id}' {\n${declarations}\n}`;
 }
 
+/**
+ * @param {string} id
+ * @param {Record<string, string>} env
+ * @returns {string}
+ */
+export function create_dynamic_types(id, env) {
+	const properties = Object.keys(env)
+		.filter((k) => valid_identifier.test(k))
+		.map((k) => `\t\t${k}: string;`);
+
+	properties.push(`\t\t[key: string]: string | undefined;`);
+
+	return `declare module '${id}' {\n\texport const env: {\n${properties.join('\n')}\n\t}\n}`;
+}
+
 export const reserved = new Set([
 	'do',
 	'if',

packages/kit/src/core/sync/write_ambient.js

@@ -1,10 +1,43 @@
+import fs from 'fs';
 import path from 'path';
 import { get_env } from '../../exports/vite/utils.js';
 import { GENERATED_COMMENT } from '../../constants.js';
-import { create_types } from '../env.js';
+import { create_dynamic_types, create_static_types } from '../env.js';
 import { write_if_changed } from './utils.js';
+import { fileURLToPath } from 'url';
 
-const types_reference = '/// <reference types="@sveltejs/kit" />\n\n';
+const descriptions_dir = fileURLToPath(new URL('../../../scripts/special-types', import.meta.url));
+
+/** @param {string} filename */
+function read_description(filename) {
+	const content = fs.readFileSync(`${descriptions_dir}/${filename}`, 'utf8');
+	return `/**\n${content
+		.trim()
+		.split('\n')
+		.map((line) => ` * ${line}`)
+		.join('\n')}\n */`;
+}
+
+/**
+ * @param {{ public: Record<string, string>, private: Record<string, string> }} env
+ */
+const template = (env) => `
+${GENERATED_COMMENT}
+
+/// <reference types="@sveltejs/kit" />
+
+${read_description('$env+static+private.md')}
+${create_static_types('$env/static/private', env.private)}
+
+${read_description('$env+static+public.md')}
+${create_static_types('$env/static/public', env.public)}
+
+${read_description('$env+dynamic+private.md')}
+${create_dynamic_types('$env/dynamic/private', env.private)}
+
+${read_description('$env+dynamic+public.md')}
+${create_dynamic_types('$env/dynamic/public', env.public)}
+`;
 
 /**
  * Writes ambient declarations including types reference to @sveltejs/kit,
@@ -16,12 +49,5 @@ const types_reference = '/// <reference types="@sveltejs/kit" />\n\n';
 export function write_ambient(config, mode) {
 	const env = get_env(config.env, mode);
 
-	write_if_changed(
-		path.join(config.outDir, 'ambient.d.ts'),
-		GENERATED_COMMENT +
-			types_reference +
-			create_types('$env/static/public', env.public) +
-			'\n\n' +
-			create_types('$env/static/private', env.private)
-	);
+	write_if_changed(path.join(config.outDir, 'ambient.d.ts'), template(env));
 }

packages/kit/src/runtime/env-private.js

@@ -1,4 +1,3 @@
-/** @type {App.PrivateEnv} */
 export let env = {};
 
 /** @type {(environment: Record<string, string>) => void} */