@sveltejs/kit 1.0.0-next.451 → 1.0.0-next.454

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltejs/kit",
-  "version": "1.0.0-next.451",
+  "version": "1.0.0-next.454",
   "repository": {
     "type": "git",
     "url": "https://github.com/sveltejs/kit",
@@ -53,7 +53,8 @@
     "!src/core/**/fixtures",
     "!src/core/**/test",
     "types",
-    "svelte-kit.js"
+    "svelte-kit.js",
+    "scripts/special-types"
   ],
   "exports": {
     "./package.json": "./package.json",

package/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);
+```

package/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);
+```

package/scripts/special-types/$env+static+private.md

@@ -0,0 +1,19 @@
+Environment variables [loaded by Vite](https://vitejs.dev/guide/env-and-mode.html#env-files) from `.env` files and `process.env`. Like [`$env/dynamic/private`](https://kit.svelte.dev/docs/modules#$env-dynamic-private), this module cannot be imported into client-side code. This module only includes variables that _do not_ begin with [`config.kit.env.publicPrefix`](https://kit.svelte.dev/docs/configuration#kit-env-publicprefix).
+
+_Unlike_ [`$env/dynamic/private`](https://kit.svelte.dev/docs/modules#$env-dynamic-private), the values exported from this module are statically injected into your bundle at build time, enabling optimisations like dead code elimination.
+
+```ts
+import { API_KEY } from '$env/static/private';
+```
+
+Note that all environment variables referenced in your code should be declared (for example in an `.env` file), even if they don't have a value until the app is deployed:
+
+```
+MY_FEATURE_FLAG=""
+```
+
+You can override `.env` values from the command line like so:
+
+```bash
+MY_FEATURE_FLAG="enabled" npm run dev
+```

package/scripts/special-types/$env+static+public.md

@@ -0,0 +1,7 @@
+Similar to [`$env/static/private`](https://kit.svelte.dev/docs/modules#$env-static-private), except that it only includes environment 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.
+
+Values are replaced statically at build time.
+
+```ts
+import { PUBLIC_BASE_URL } from '$env/static/public';
+```

package/scripts/special-types/$lib.md

@@ -0,0 +1 @@
+This is a simple alias to `src/lib`, or whatever directory is specified as [`config.kit.files.lib`](https://kit.svelte.dev/docs/configuration#files). It allows you to access common components and utility modules without `../../../../` nonsense.

package/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',

package/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));
 }

package/src/exports/vite/index.js

@@ -195,6 +195,7 @@ function kit() {
 		async config(config, config_env) {
 			vite_config_env = config_env;
 			svelte_config = await load_config();
+
 			env = get_env(svelte_config.kit.env, vite_config_env.mode);
 
 			// The config is created in build_server for SSR mode and passed inline

package/src/runtime/client/client.js

@@ -44,6 +44,23 @@ function update_scroll_positions(index) {
 	scroll_positions[index] = scroll_state();
 }
 
+/** @type {Record<string, true>} */
+let warned_about_attributes = {};
+
+function check_for_removed_attributes() {
+	const attrs = ['prefetch', 'noscroll', 'reload'];
+	for (const attr of attrs) {
+		if (document.querySelector(`[sveltekit\\:${attr}]`)) {
+			if (!warned_about_attributes[attr]) {
+				warned_about_attributes[attr] = true;
+				console.error(
+					`The sveltekit:${attr} attribute has been replaced with data-sveltekit-${attr}`
+				);
+			}
+		}
+	}
+}
+
 /**
  * @param {{
  *   target: Element;
@@ -271,6 +288,8 @@ export function create_client({ target, base, trailing_slash }) {
 				};
 				root.$set(navigation_result.props);
 				tick().then(() => (console.warn = warn));
+
+				check_for_removed_attributes();
 			} else {
 				root.$set(navigation_result.props);
 			}
@@ -369,6 +388,8 @@ export function create_client({ target, base, trailing_slash }) {
 				hydrate: true
 			});
 			console.warn = warn;
+
+			check_for_removed_attributes();
 		} else {
 			root = new Root({
 				target,
@@ -1138,7 +1159,7 @@ export function create_client({ target, base, trailing_slash }) {
 			/** @param {Event} event */
 			const trigger_prefetch = (event) => {
 				const a = find_anchor(event);
-				if (a && a.href && a.hasAttribute('sveltekit:prefetch')) {
+				if (a && a.href && a.hasAttribute('data-sveltekit-prefetch')) {
 					prefetch(get_href(a));
 				}
 			};
@@ -1195,7 +1216,7 @@ export function create_client({ target, base, trailing_slash }) {
 				if (
 					a.hasAttribute('download') ||
 					rel.includes('external') ||
-					a.hasAttribute('sveltekit:reload')
+					a.hasAttribute('data-sveltekit-reload')
 				) {
 					return;
 				}
@@ -1222,7 +1243,7 @@ export function create_client({ target, base, trailing_slash }) {
 
 				navigate({
 					url,
-					scroll: a.hasAttribute('sveltekit:noscroll') ? scroll_state() : null,
+					scroll: a.hasAttribute('data-sveltekit-noscroll') ? scroll_state() : null,
 					keepfocus: false,
 					redirect_chain: [],
 					details: {

package/src/runtime/env-private.js

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

package/src/runtime/env-public.js

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

package/types/ambient.d.ts

@@ -10,14 +10,10 @@
  * 	interface PageData {}
  *
  * 	interface Platform {}
- *
- * 	interface PrivateEnv {}
- *
- * 	interface PublicEnv {}
  * }
  * ```
  *
- * By populating these interfaces, you will gain type safety when using `env`, `event.locals` and `event.platform`.
+ * By populating these interfaces, you will gain type safety when using `event.locals`, `event.platform`, and `data` from `load` functions.
  *
  * Note that since it's an ambient declaration file, you have to be careful when using `import` statements. Once you add an `import`
  * at the top level, the declaration file is no longer considered ambient and you lose access to these typings in other files.
@@ -60,16 +56,6 @@ declare namespace App {
 	 * If your adapter provides [platform-specific context](https://kit.svelte.dev/docs/adapters#supported-environments-platform-specific-context) via `event.platform`, you can specify it here.
 	 */
 	export interface Platform {}
-
-	/**
-	 * The interface that defines the dynamic environment variables exported from `$env/dynamic/private`.
-	 */
-	export interface PrivateEnv extends Record<string, string> {}
-
-	/**
-	 * The interface that defines the dynamic environment variables exported from `$env/dynamic/public`.
-	 */
-	export interface PublicEnv extends Record<string, string> {}
 }
 
 /**
@@ -94,39 +80,6 @@ declare module '$app/environment' {
 	export const prerendering: boolean;
 }
 
-/**
- * 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);
- * ```
- */
-declare module '$env/dynamic/private' {
-	export let env: App.PrivateEnv;
-}
-
-/**
- * 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);
- * ```
- */
-declare module '$env/dynamic/public' {
-	export let env: App.PublicEnv;
-}
-
 /**
  * ```ts
  * import {
@@ -169,7 +122,7 @@ declare module '$app/navigation' {
 	 *  1. ensuring that the code for the page is loaded, and
 	 *  2. calling the page's load function with the appropriate options.
 	 *
-	 * This is the same behaviour that SvelteKit triggers when the user taps or mouses over an `<a>` element with `sveltekit:prefetch`.
+	 * This is the same behaviour that SvelteKit triggers when the user taps or mouses over an `<a>` element with `data-sveltekit-prefetch`.
 	 * If the next navigation is to `href`, the values returned from load will be used, making navigation instantaneous.
 	 * Returns a Promise that resolves when the prefetch is complete.
 	 *