@sveltejs/kit 1.0.0-next.410 → 1.0.0-next.413

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltejs/kit",
-  "version": "1.0.0-next.410",
+  "version": "1.0.0-next.413",
   "repository": {
     "type": "git",
     "url": "https://github.com/sveltejs/kit",
@@ -25,7 +25,7 @@
     "undici": "^5.8.1"
   },
   "devDependencies": {
-    "@playwright/test": "^1.23.4",
+    "@playwright/test": "^1.25.0",
     "@types/connect": "^3.4.35",
     "@types/cookie": "^0.5.1",
     "@types/marked": "^4.0.3",

package/src/core/constants.js

@@ -1,3 +1,5 @@
 // in `vite dev` and `vite preview`, we use a fake asset path so that we can
 // serve local assets while verifying that requests are correctly prefixed
 export const SVELTE_KIT_ASSETS = '/_svelte_kit_assets';
+
+export const GENERATED_COMMENT = '// this file is generated — do not edit it\n';

package/src/core/env.js

@@ -0,0 +1,91 @@
+import { GENERATED_COMMENT } from './constants.js';
+
+/**
+ * @param {string} id
+ * @param {Record<string, string>} env
+ * @returns {string}
+ */
+export function create_module(id, env) {
+	/** @type {string[]} */
+	const declarations = [];
+
+	for (const key in env) {
+		if (!valid_identifier.test(key) || reserved.has(key)) {
+			continue;
+		}
+
+		const comment = `/** @type {import('${id}').${key}} */`;
+		const declaration = `export const ${key} = ${JSON.stringify(env[key])};`;
+
+		declarations.push(`${comment}\n${declaration}`);
+	}
+
+	return GENERATED_COMMENT + declarations.join('\n\n');
+}
+
+/**
+ * @param {string} id
+ * @param {Record<string, string>} env
+ * @returns {string}
+ */
+export function create_types(id, env) {
+	const declarations = Object.keys(env)
+		.filter((k) => valid_identifier.test(k))
+		.map((k) => `\texport const ${k}: string;`)
+		.join('\n');
+
+	return `declare module '${id}' {\n${declarations}\n}`;
+}
+
+export const reserved = new Set([
+	'do',
+	'if',
+	'in',
+	'for',
+	'let',
+	'new',
+	'try',
+	'var',
+	'case',
+	'else',
+	'enum',
+	'eval',
+	'null',
+	'this',
+	'true',
+	'void',
+	'with',
+	'await',
+	'break',
+	'catch',
+	'class',
+	'const',
+	'false',
+	'super',
+	'throw',
+	'while',
+	'yield',
+	'delete',
+	'export',
+	'import',
+	'public',
+	'return',
+	'static',
+	'switch',
+	'typeof',
+	'default',
+	'extends',
+	'finally',
+	'package',
+	'private',
+	'continue',
+	'debugger',
+	'function',
+	'arguments',
+	'interface',
+	'protected',
+	'implements',
+	'instanceof'
+]);
+
+export const valid_identifier = /^[a-zA-Z_$][a-zA-Z0-9_$]*$/;

package/src/core/sync/create_manifest_data/index.js

@@ -67,14 +67,7 @@ export default function create_manifest_data({
 
 			if (file[0] !== '+') return; // not a route file
 
-			const item = analyze(file, config.extensions, config.kit.moduleExtensions);
-
-			if (!item) {
-				throw new Error(
-					`Files and directories prefixed with + are reserved (saw ${project_relative})`
-				);
-			}
-
+			const item = analyze(project_relative, file, config.extensions, config.kit.moduleExtensions);
 			const id = segments.join('/');
 
 			if (/\]\[/.test(id)) {
@@ -275,19 +268,22 @@ export default function create_manifest_data({
 }
 
 /**
+ * @param {string} project_relative
  * @param {string} file
  * @param {string[]} component_extensions
  * @param {string[]} module_extensions
- * @returns {import('./types').RouteFile | null}
+ * @returns {import('./types').RouteFile}
  */
-function analyze(file, component_extensions, module_extensions) {
+function analyze(project_relative, file, component_extensions, module_extensions) {
 	const component_extension = component_extensions.find((ext) => file.endsWith(ext));
 	if (component_extension) {
 		const name = file.slice(0, -component_extension.length);
 		const pattern =
 			/^\+(?:(page(?:@([a-zA-Z0-9_-]+))?)|(layout(?:-([a-zA-Z0-9_-]+))?(?:@([a-zA-Z0-9_-]+))?)|(error))$/;
 		const match = pattern.exec(name);
-		if (!match) return null;
+		if (!match) {
+			throw new Error(`Files prefixed with + are reserved (saw ${project_relative})`);
+		}
 
 		return {
 			kind: 'component',
@@ -302,21 +298,29 @@ function analyze(file, component_extensions, module_extensions) {
 	const module_extension = module_extensions.find((ext) => file.endsWith(ext));
 	if (module_extension) {
 		const name = file.slice(0, -module_extension.length);
-		const pattern = /^\+(?:(server)|(page(\.server)?)|(layout(?:-([a-zA-Z0-9_-]+))?(\.server)?))$/;
+		const pattern =
+			/^\+(?:(server)|(page(?:@([a-zA-Z0-9_-]+))?(\.server)?)|(layout(?:-([a-zA-Z0-9_-]+))?(?:@([a-zA-Z0-9_-]+))?(\.server)?))$/;
 		const match = pattern.exec(name);
-		if (!match) return null;
+		if (!match) {
+			throw new Error(`Files prefixed with + are reserved (saw ${project_relative})`);
+		} else if (match[3] || match[7]) {
+			throw new Error(
+				// prettier-ignore
+				`Only Svelte files can reference named layouts. Remove '@${match[3] || match[7]}' from ${file} (at ${project_relative})`
+			);
+		}
 
-		const kind = !!(match[1] || match[3] || match[6]) ? 'server' : 'shared';
+		const kind = !!(match[1] || match[4] || match[8]) ? 'server' : 'shared';
 
 		return {
 			kind,
 			is_page: !!match[2],
-			is_layout: !!match[4],
-			declares_layout: match[5]
+			is_layout: !!match[5],
+			declares_layout: match[6]
 		};
 	}
 
-	return null;
+	throw new Error(`Files and directories prefixed with + are reserved (saw ${project_relative})`);
 }
 
 /**

package/src/core/sync/utils.js

@@ -42,56 +42,3 @@ export function trim(str) {
 	const pattern = new RegExp(`^${indentation}`, 'gm');
 	return str.replace(pattern, '').trim();
 }
-
-export const reserved = new Set([
-	'do',
-	'if',
-	'in',
-	'for',
-	'let',
-	'new',
-	'try',
-	'var',
-	'case',
-	'else',
-	'enum',
-	'eval',
-	'null',
-	'this',
-	'true',
-	'void',
-	'with',
-	'await',
-	'break',
-	'catch',
-	'class',
-	'const',
-	'false',
-	'super',
-	'throw',
-	'while',
-	'yield',
-	'delete',
-	'export',
-	'import',
-	'public',
-	'return',
-	'static',
-	'switch',
-	'typeof',
-	'default',
-	'extends',
-	'finally',
-	'package',
-	'private',
-	'continue',
-	'debugger',
-	'function',
-	'arguments',
-	'interface',
-	'protected',
-	'implements',
-	'instanceof'
-]);
-
-export const valid_identifier = /^[a-zA-Z_$][a-zA-Z0-9_$]*$/;

package/src/core/sync/write_ambient.js

@@ -1,9 +1,9 @@
 import path from 'path';
-import colors from 'kleur';
 import { get_env } from '../../vite/utils.js';
-import { write_if_changed, reserved, valid_identifier } from './utils.js';
+import { GENERATED_COMMENT } from '../constants.js';
+import { create_types } from '../env.js';
+import { write_if_changed } from './utils.js';
 
-const autogen_comment = '// this file is generated — do not edit it\n';
 const types_reference = '/// <reference types="@sveltejs/kit" />\n\n';
 
 /**
@@ -16,72 +16,12 @@ const types_reference = '/// <reference types="@sveltejs/kit" />\n\n';
 export function write_ambient(config, mode) {
 	const env = get_env(mode, config.env.publicPrefix);
 
-	// TODO when testing src, `$app` points at `src/runtime/app`... will
-	// probably need to fiddle with aliases
-	write_if_changed(
-		path.join(config.outDir, 'runtime/env/static/public.js'),
-		create_env_module('$env/static/public', env.public)
-	);
-
-	write_if_changed(
-		path.join(config.outDir, 'runtime/env/static/private.js'),
-		create_env_module('$env/static/private', env.private)
-	);
-
 	write_if_changed(
 		path.join(config.outDir, 'ambient.d.ts'),
-		autogen_comment +
+		GENERATED_COMMENT +
 			types_reference +
-			create_env_types('$env/static/public', env.public) +
+			create_types('$env/static/public', env.public) +
 			'\n\n' +
-			create_env_types('$env/static/private', env.private)
+			create_types('$env/static/private', env.private)
 	);
 }
-
-/**
- * @param {string} id
- * @param {Record<string, string>} env
- * @returns {string}
- */
-function create_env_module(id, env) {
-	/** @type {string[]} */
-	const declarations = [];
-
-	for (const key in env) {
-		const warning = !valid_identifier.test(key)
-			? 'not a valid identifier'
-			: reserved.has(key)
-			? 'a reserved word'
-			: null;
-
-		if (warning) {
-			console.error(
-				colors
-					.bold()
-					.yellow(`Omitting environment variable "${key}" from ${id} as it is ${warning}`)
-			);
-			continue;
-		}
-
-		const comment = `/** @type {import('${id}').${key}} */`;
-		const declaration = `export const ${key} = ${JSON.stringify(env[key])};`;
-
-		declarations.push(`${comment}\n${declaration}`);
-	}
-
-	return autogen_comment + declarations.join('\n\n');
-}
-
-/**
- * @param {string} id
- * @param {Record<string, string>} env
- * @returns {string}
- */
-function create_env_types(id, env) {
-	const declarations = Object.keys(env)
-		.filter((k) => valid_identifier.test(k))
-		.map((k) => `\texport const ${k}: string;`)
-		.join('\n');
-
-	return `declare module '${id}' {\n${declarations}\n}`;
-}

package/src/core/sync/write_types.js

@@ -616,7 +616,11 @@ export function tweak_types(ts, content, names) {
 
 							const rhs = declaration.initializer;
 
-							if (rhs && (ts.isArrowFunction(rhs) || ts.isFunctionExpression(rhs))) {
+							if (
+								rhs &&
+								(ts.isArrowFunction(rhs) || ts.isFunctionExpression(rhs)) &&
+								rhs.parameters.length
+							) {
 								const arg = rhs.parameters[0];
 
 								const add_parens = content[arg.pos - 1] !== '(';

package/src/runtime/client/client.js

@@ -389,6 +389,7 @@ export function create_client({ target, session, base, trailing_slash }) {
 	 *   status: number;
 	 *   error: HttpError | Error | null;
 	 *   routeId: string | null;
+	 *   validation_errors?: string | undefined;
 	 * }} opts
 	 */
 	async function get_navigation_result_from_branch({
@@ -397,7 +398,8 @@ export function create_client({ target, session, base, trailing_slash }) {
 		branch,
 		status,
 		error,
-		routeId
+		routeId,
+		validation_errors
 	}) {
 		const filtered = /** @type {import('./types').BranchNode[] } */ (branch.filter(Boolean));
 
@@ -412,7 +414,8 @@ export function create_client({ target, session, base, trailing_slash }) {
 				session_id
 			},
 			props: {
-				components: filtered.map((branch_node) => branch_node.node.component)
+				components: filtered.map((branch_node) => branch_node.node.component),
+				errors: validation_errors
 			}
 		};
 
@@ -1211,8 +1214,16 @@ export function create_client({ target, session, base, trailing_slash }) {
 			let result;
 
 			try {
-				const script = document.querySelector(`script[sveltekit\\:data-type="server_data"]`);
-				const server_data = script?.textContent ? JSON.parse(script.textContent) : [];
+				/**
+				 * @param {string} type
+				 * @param {any} fallback
+				 */
+				const parse = (type, fallback) => {
+					const script = document.querySelector(`script[sveltekit\\:data-type="${type}"]`);
+					return script?.textContent ? JSON.parse(script.textContent) : fallback;
+				};
+				const server_data = parse('server_data', []);
+				const validation_errors = parse('validation_errors', undefined);
 
 				const branch_promises = node_ids.map(async (n, i) => {
 					return load_node({
@@ -1243,6 +1254,7 @@ export function create_client({ target, session, base, trailing_slash }) {
 								error.message
 						  )
 						: error,
+					validation_errors,
 					routeId
 				});
 			} catch (e) {

package/src/runtime/server/page/fetch.js

@@ -52,6 +52,7 @@ export function create_fetch({ event, options, state, route }) {
 			if (
 				key !== 'authorization' &&
 				key !== 'connection' &&
+				key !== 'content-length' &&
 				key !== 'cookie' &&
 				key !== 'host' &&
 				key !== 'if-none-match' &&

package/src/runtime/server/page/render.js

@@ -79,20 +79,6 @@ export async function render_response({
 	}
 
 	if (resolve_opts.ssr) {
-		for (const { node } of branch) {
-			if (node.imports) {
-				node.imports.forEach((url) => modulepreloads.add(url));
-			}
-
-			if (node.stylesheets) {
-				node.stylesheets.forEach((url) => stylesheets.add(url));
-			}
-
-			if (node.inline_styles) {
-				Object.entries(await node.inline_styles()).forEach(([k, v]) => inline_styles.set(k, v));
-			}
-		}
-
 		const session = writable($session);
 
 		/** @type {Record<string, any>} */
@@ -112,7 +98,7 @@ export async function render_response({
 				url: state.prerendering ? new PrerenderingURL(event.url) : event.url,
 				data: branch.reduce((acc, { data }) => (Object.assign(acc, data), acc), {})
 			},
-			components: branch.map(({ node }) => node.component)
+			components: await Promise.all(branch.map(({ node }) => node.component()))
 		};
 
 		// TODO remove this for 1.0
@@ -143,6 +129,20 @@ export async function render_response({
 		}
 
 		rendered = options.root.render(props);
+
+		for (const { node } of branch) {
+			if (node.imports) {
+				node.imports.forEach((url) => modulepreloads.add(url));
+			}
+
+			if (node.stylesheets) {
+				node.stylesheets.forEach((url) => stylesheets.add(url));
+			}
+
+			if (node.inline_styles) {
+				Object.entries(await node.inline_styles()).forEach(([k, v]) => inline_styles.set(k, v));
+			}
+		}
 	} else {
 		rendered = { head: '', html: '', css: { code: '', map: null } };
 	}
@@ -266,6 +266,12 @@ export async function render_response({
 			);
 		}
 
+		if (validation_errors) {
+			serialized_data.push(
+				render_json_payload_script({ type: 'validation_errors' }, validation_errors)
+			);
+		}
+
 		body += `\n\t${serialized_data.join('\n\t')}`;
 	}
 

package/src/vite/build/build_server.js

@@ -239,6 +239,8 @@ export async function build_server(options, client) {
 		/** @type {string[]} */
 		const imports = [];
 
+		// String representation of
+		/** @type {import('types').SSRNode} */
 		/** @type {string[]} */
 		const exports = [`export const index = ${i};`];
 
@@ -255,7 +257,9 @@ export async function build_server(options, client) {
 			stylesheets.push(...entry.stylesheets);
 
 			exports.push(
-				`export { default as component } from '../${vite_manifest[node.component].file}';`,
+				`export const component = async () => (await import('../${
+					vite_manifest[node.component].file
+				}')).default;`,
 				`export const file = '${entry.file}';` // TODO what is this?
 			);
 		}

package/src/vite/dev/index.js

@@ -82,19 +82,23 @@ export async function dev(vite, vite_config, svelte_config, illegal_imports) {
 						result.stylesheets = [];
 
 						if (node.component) {
-							const { module, module_node, url } = await resolve(node.component);
-
-							module_nodes.push(module_node);
-
-							result.component = module.default;
-							result.file = url.endsWith('.svelte') ? url : url + '?import'; // TODO what is this for?
-
-							prevent_illegal_vite_imports(
-								module_node,
-								illegal_imports,
-								extensions,
-								svelte_config.kit.outDir
-							);
+							result.component = async () => {
+								const { module_node, module, url } = await resolve(
+									/** @type {string} */ (node.component)
+								);
+
+								module_nodes.push(module_node);
+								result.file = url.endsWith('.svelte') ? url : url + '?import'; // TODO what is this for?
+
+								prevent_illegal_vite_imports(
+									module_node,
+									illegal_imports,
+									extensions,
+									svelte_config.kit.outDir
+								);
+
+								return module.default;
+							};
 						}
 
 						if (node.shared) {

package/src/vite/index.js

@@ -14,8 +14,9 @@ import { generate_manifest } from '../core/generate_manifest/index.js';
 import { runtime_directory, logger } from '../core/utils.js';
 import { find_deps, get_default_config as get_default_build_config } from './build/utils.js';
 import { preview } from './preview/index.js';
-import { get_aliases, resolve_entry, prevent_illegal_rollup_imports } from './utils.js';
+import { get_aliases, resolve_entry, prevent_illegal_rollup_imports, get_env } from './utils.js';
 import { fileURLToPath } from 'node:url';
+import { create_module } from '../core/env.js';
 
 const cwd = process.cwd();
 
@@ -107,6 +108,9 @@ function kit() {
 	/** @type {string | undefined} */
 	let deferred_warning;
 
+	/** @type {{ public: Record<string, string>; private: Record<string, string> }} */
+	let env;
+
 	/**
 	 * @type {{
 	 *   build_dir: string;
@@ -191,13 +195,13 @@ function kit() {
 		 * @see https://vitejs.dev/guide/api-plugin.html#config
 		 */
 		async config(config, config_env) {
-			// The config is created in build_server for SSR mode and passed inline
-			if (config.build?.ssr) {
-				return;
-			}
-
 			vite_config_env = config_env;
 			svelte_config = await load_config();
+			env = get_env(vite_config_env.mode, svelte_config.kit.env.publicPrefix);
+
+			// The config is created in build_server for SSR mode and passed inline
+			if (config.build?.ssr) return;
+
 			is_build = config_env.command === 'build';
 
 			paths = {
@@ -269,6 +273,20 @@ function kit() {
 			return result;
 		},
 
+		async resolveId(id) {
+			// treat $env/static/[public|private] as virtual
+			if (id.startsWith('$env/static/')) return `\0${id}`;
+		},
+
+		async load(id) {
+			switch (id) {
+				case '\0$env/static/private':
+					return create_module('$env/static/private', env.private);
+				case '\0$env/static/public':
+					return create_module('$env/static/public', env.public);
+			}
+		},
+
 		/**
 		 * Stores the final config.
 		 */
@@ -432,9 +450,10 @@ function kit() {
 				await adapt(svelte_config, build_data, prerendered, { log });
 			} else {
 				console.log(colors.bold().yellow('\nNo adapter specified'));
-				// prettier-ignore
+
+				const link = colors.bold().cyan('https://kit.svelte.dev/docs/adapters');
 				console.log(
-					`See ${colors.bold().cyan('https://kit.svelte.dev/docs/adapters')} to learn how to configure your app to run on the platform of your choosing`
+					`See ${link} to learn how to configure your app to run on the platform of your choosing`
 				);
 			}
 

package/src/vite/utils.js

@@ -105,6 +105,8 @@ export function get_aliases(config) {
 	const alias = [
 		{ find: '__GENERATED__', replacement: path.posix.join(config.outDir, 'generated') },
 		{ find: '$app', replacement: `${runtime_directory}/app` },
+		{ find: '$env/dynamic/public', replacement: `${runtime_directory}/env/dynamic/public.js` },
+		{ find: '$env/dynamic/private', replacement: `${runtime_directory}/env/dynamic/private.js` },
 		// For now, we handle `$lib` specially here rather than make it a default value for
 		// `config.kit.alias` since it has special meaning for packaging, etc.
 		{ find: '$lib', replacement: config.files.lib }
@@ -128,21 +130,6 @@ export function get_aliases(config) {
 		}
 	}
 
-	alias.push(
-		{
-			find: '$env/static/public',
-			replacement: path.posix.join(config.outDir, 'runtime/env/static/public.js')
-		},
-		{
-			find: '$env/static/private',
-			replacement: path.posix.join(config.outDir, 'runtime/env/static/private.js')
-		},
-		{
-			find: '$env',
-			replacement: `${runtime_directory}/env`
-		}
-	);
-
 	return alias;
 }
 

package/types/internal.d.ts

@@ -141,7 +141,8 @@ export interface PageData {
 
 export type PayloadScriptAttributes =
 	| { type: 'data'; url: string; body?: string }
-	| { type: 'server_data' };
+	| { type: 'server_data' }
+	| { type: 'validation_errors' };
 
 export interface PrerenderDependency {
 	response: Response;
@@ -195,7 +196,7 @@ export interface SSREndpoint {
 }
 
 export interface SSRNode {
-	component: SSRComponent;
+	component: SSRComponentLoader;
 	/** index into the `components` array in client-manifest.js */
 	index: number;
 	/** client-side module URL for this component */
@@ -280,11 +281,6 @@ export interface SSRErrorPage {
 	id: '__error';
 }
 
-export interface SSRPagePart {
-	id: string;
-	load: SSRComponentLoader;
-}
-
 export type SSRRoute = SSREndpoint | SSRPage;
 
 export interface SSRState {