@sveltejs/kit 1.0.0-next.581 → 1.0.0-next.583

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltejs/kit",
-  "version": "1.0.0-next.581",
+  "version": "1.0.0-next.583",
   "repository": {
     "type": "git",
     "url": "https://github.com/sveltejs/kit",
@@ -35,7 +35,7 @@
     "marked": "^4.2.3",
     "rollup": "^3.7.0",
     "svelte": "^3.54.0",
-    "svelte-preprocess": "^4.10.7",
+    "svelte-preprocess": "^5.0.0",
     "typescript": "^4.9.3",
     "uvu": "^0.5.6",
     "vite": "^4.0.0"

package/src/core/prerender/prerender.js

@@ -22,11 +22,12 @@ const [, , client_out_dir, manifest_path, results_path, verbose, env] = process.
 prerender();
 
 /**
- * @template T
+ * @template {{message: string}} T
+ * @template {Omit<T, 'message'>} K
  * @param {import('types').Logger} log
  * @param {'fail' | 'warn' | 'ignore' | ((details: T) => void)} input
- * @param {(details: T) => string} format
- * @returns {(details: T) => void}
+ * @param {(details: K) => string} format
+ * @returns {(details: K) => void}
  */
 function normalise_error_handler(log, input, format) {
 	switch (input) {
@@ -41,6 +42,7 @@ function normalise_error_handler(log, input, format) {
 		case 'ignore':
 			return () => {};
 		default:
+			// @ts-expect-error TS thinks T might be of a different kind, but it's not
 			return (details) => input({ ...details, message: format(details) });
 	}
 }

package/src/exports/vite/build/utils.js

@@ -108,39 +108,22 @@ export function resolve_symlinks(manifest, file) {
 }
 
 /**
- * The Vite configuration that we use by default.
+ * Partial Vite configuration that we use by default for setting up the build.
+ * Can be used in a non-SvelteKit Vite server and build process such as Storybook.
  * @param {{
  *   config: import('types').ValidatedConfig;
- *   input: Record<string, string>;
  *   ssr: boolean;
- *   outDir: string;
  * }} options
  * @return {import('vite').UserConfig}
  */
-export function get_default_build_config({ config, input, ssr, outDir }) {
+export function get_build_setup_config({ config, ssr }) {
 	const prefix = `${config.kit.appDir}/immutable`;
 
 	return {
-		appType: 'custom',
-		base: ssr ? assets_base(config.kit) : './',
 		build: {
-			cssCodeSplit: true,
 			// don't use the default name to avoid collisions with 'static/manifest.json'
 			manifest: 'vite-manifest.json',
-			outDir,
-			rollupOptions: {
-				input,
-				output: {
-					format: 'esm',
-					entryFileNames: ssr ? '[name].js' : `${prefix}/[name]-[hash].js`,
-					chunkFileNames: ssr ? 'chunks/[name].js' : `${prefix}/chunks/[name]-[hash].js`,
-					assetFileNames: `${prefix}/assets/[name]-[hash][extname]`,
-					hoistTransitiveImports: false
-				},
-				preserveEntrySignatures: 'strict'
-			},
-			ssr,
-			target: ssr ? 'node14.8' : undefined
+			ssr
 		},
 		define: {
 			__SVELTEKIT_ADAPTER_NAME__: JSON.stringify(config.kit.adapter?.name),
@@ -148,7 +131,6 @@ export function get_default_build_config({ config, input, ssr, outDir }) {
 			__SVELTEKIT_APP_VERSION_POLL_INTERVAL__: JSON.stringify(config.kit.version.pollInterval),
 			__SVELTEKIT_EMBEDDED__: config.kit.embedded ? 'true' : 'false'
 		},
-		publicDir: ssr ? false : config.kit.files.assets,
 		resolve: {
 			alias: [...get_app_aliases(config.kit), ...get_config_aliases(config.kit)]
 		},
@@ -156,7 +138,16 @@ export function get_default_build_config({ config, input, ssr, outDir }) {
 			exclude: ['@sveltejs/kit']
 		},
 		ssr: {
-			noExternal: ['@sveltejs/kit']
+			noExternal: [
+				// TODO document why this is necessary
+				'@sveltejs/kit',
+				// This ensures that esm-env is inlined into the server output with the
+				// export conditions resolved correctly through Vite. This prevents adapters
+				// that bundle later on to resolve the export conditions incorrectly
+				// and for example include browser-only code in the server output
+				// because they for example use esbuild.build with `platform: 'browser'`
+				'esm-env'
+			]
 		},
 		worker: {
 			rollupOptions: {
@@ -170,6 +161,57 @@ export function get_default_build_config({ config, input, ssr, outDir }) {
 	};
 }
 
+/**
+ * Partial Vite configuration that we use by default for setting up the build.
+ * Cannot be used in a non-SvelteKit Vite server and build process such as Storybook.
+ * @param {{
+ *   config: import('types').ValidatedConfig;
+ *   input: Record<string, string>;
+ *   ssr: boolean;
+ *   outDir: string;
+ * }} options
+ * @return {import('vite').UserConfig}
+ */
+export function get_build_compile_config({ config, input, ssr, outDir }) {
+	const prefix = `${config.kit.appDir}/immutable`;
+
+	return {
+		appType: 'custom',
+		base: ssr ? assets_base(config.kit) : './',
+		build: {
+			cssCodeSplit: true,
+			outDir,
+			rollupOptions: {
+				input,
+				output: {
+					format: 'esm',
+					entryFileNames: ssr ? '[name].js' : `${prefix}/[name]-[hash].js`,
+					chunkFileNames: ssr ? 'chunks/[name].js' : `${prefix}/chunks/[name]-[hash].js`,
+					assetFileNames: `${prefix}/assets/[name]-[hash][extname]`,
+					hoistTransitiveImports: false
+				},
+				preserveEntrySignatures: 'strict'
+			},
+			target: ssr ? 'node16.14' : undefined
+		},
+		publicDir: ssr ? false : config.kit.files.assets
+	};
+}
+
+/**
+ * The Vite configuration that we use by default for building.
+ * @param {{
+ *   config: import('types').ValidatedConfig;
+ *   input: Record<string, string>;
+ *   ssr: boolean;
+ *   outDir: string;
+ * }} options
+ * @return {import('vite').UserConfig}
+ */
+export function get_default_build_config(options) {
+	return vite.mergeConfig(get_build_setup_config(options), get_build_compile_config(options));
+}
+
 /**
  * @param {import('types').ValidatedKitConfig} config
  * @returns {string}

package/src/exports/vite/dev/index.js

@@ -11,7 +11,7 @@ import { posixify, resolve_entry, to_fs } from '../../../utils/filesystem.js';
 import { load_error_page, load_template } from '../../../core/config/index.js';
 import { SVELTE_KIT_ASSETS } from '../../../constants.js';
 import * as sync from '../../../core/sync/sync.js';
-import { get_mime_lookup, runtime_base, runtime_prefix } from '../../../core/utils.js';
+import { get_mime_lookup, runtime_prefix } from '../../../core/utils.js';
 import { compact } from '../../../utils/array.js';
 import { not_found } from '../utils.js';
 
@@ -49,7 +49,22 @@ export async function dev(vite, vite_config, svelte_config) {
 	}
 
 	async function update_manifest() {
-		({ manifest_data } = await sync.create(svelte_config));
+		try {
+			({ manifest_data } = await sync.create(svelte_config));
+		} catch (error) {
+			console.error(colors.bold().red('Failed to update manifest'));
+			console.error(error);
+			vite.ws.send({
+				type: 'error',
+				err: {
+					message: `Failed to udpate manifest: ${
+						/** @type {Error} */ (error)?.message ?? 'Unknown error'
+					}`,
+					stack: /** @type {Error} */ (error)?.stack ?? ''
+				}
+			});
+			return;
+		}
 
 		manifest = {
 			appDir: svelte_config.kit.appDir,
@@ -221,13 +236,16 @@ export async function dev(vite, vite_config, svelte_config) {
 		}, 100);
 	};
 
+	// flag to skip watchers if server is already restarting
+	let restarting = false;
+
 	// Debounce add/unlink events because in case of folder deletion or moves
 	// they fire in rapid succession, causing needless invocations.
 	watch('add', () => debounce(update_manifest));
 	watch('unlink', () => debounce(update_manifest));
 	watch('change', (file) => {
 		// Don't run for a single file if the whole manifest is about to get updated
-		if (timeout) return;
+		if (timeout || restarting) return;
 
 		sync.update(svelte_config, manifest_data, file);
 	});
@@ -238,12 +256,23 @@ export async function dev(vite, vite_config, svelte_config) {
 	// send the vite client a full-reload event without path being set
 	if (appTemplate !== 'index.html') {
 		vite.watcher.on('change', (file) => {
-			if (file === appTemplate) {
+			if (file === appTemplate && !restarting) {
 				vite.ws.send({ type: 'full-reload' });
 			}
 		});
 	}
 
+	// changing the svelte config requires restarting the dev server
+	// the config is only read on start and passed on to vite-plugin-svelte
+	// which needs up-to-date values to operate correctly
+	vite.watcher.on('change', (file) => {
+		if (path.basename(file) === 'svelte.config.js') {
+			console.log(`svelte config changed, restarting vite dev-server. changed file: ${file}`);
+			restarting = true;
+			vite.restart();
+		}
+	});
+
 	const assets = svelte_config.kit.paths.assets ? SVELTE_KIT_ASSETS : svelte_config.kit.paths.base;
 	const asset_server = sirv(svelte_config.kit.files.assets, {
 		dev: true,
@@ -284,11 +313,6 @@ export async function dev(vite, vite_config, svelte_config) {
 		}
 	});
 
-	// set `import { version } from '$app/environment'`
-	(await vite.ssrLoadModule(`${runtime_prefix}/env.js`)).set_version(
-		svelte_config.kit.version.name
-	);
-
 	return () => {
 		const serve_static_middleware = vite.middlewares.stack.find(
 			(middleware) =>
@@ -408,13 +432,6 @@ export async function dev(vite, vite_config, svelte_config) {
 					`/${posixify(path.relative(cwd, `${svelte_config.kit.outDir}/generated/root.svelte`))}`
 				);
 
-				const paths = await vite.ssrLoadModule(`${runtime_base}/paths.js`);
-
-				paths.set_paths({
-					base: svelte_config.kit.paths.base,
-					assets
-				});
-
 				let request;
 
 				try {

package/src/exports/vite/index.js

@@ -1,24 +1,27 @@
 import { fork } from 'node:child_process';
 import fs from 'node:fs';
 import path from 'node:path';
-import colors from 'kleur';
+import { fileURLToPath } from 'node:url';
+
 import { svelte } from '@sveltejs/vite-plugin-svelte';
+import colors from 'kleur';
 import * as vite from 'vite';
+
 import { mkdirp, posixify, resolve_entry, rimraf } from '../../utils/filesystem.js';
+import { SVELTE_KIT_ASSETS } from '../../constants.js';
+import { create_static_module, create_dynamic_module } from '../../core/env.js';
 import * as sync from '../../core/sync/sync.js';
+import { create_assets } from '../../core/sync/create_manifest_data/index.js';
+import { runtime_base, runtime_directory, runtime_prefix, logger } from '../../core/utils.js';
+import { load_config } from '../../core/config/index.js';
+import { generate_manifest } from '../../core/generate_manifest/index.js';
 import { build_server } from './build/build_server.js';
 import { build_service_worker } from './build/build_service_worker.js';
-import { load_config } from '../../core/config/index.js';
+import { find_deps, get_build_setup_config, get_build_compile_config } from './build/utils.js';
 import { dev } from './dev/index.js';
-import { generate_manifest } from '../../core/generate_manifest/index.js';
-import { runtime_directory, logger } from '../../core/utils.js';
-import { find_deps, get_default_build_config } from './build/utils.js';
+import { is_illegal, module_guard, normalize_id } from './graph_analysis/index.js';
 import { preview } from './preview/index.js';
 import { get_config_aliases, get_app_aliases, get_env } from './utils.js';
-import { fileURLToPath } from 'node:url';
-import { create_static_module, create_dynamic_module } from '../../core/env.js';
-import { is_illegal, module_guard, normalize_id } from './graph_analysis/index.js';
-import { create_assets } from '../../core/sync/create_manifest_data/index.js';
 
 export { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
@@ -168,7 +171,7 @@ function kit({ svelte_config }) {
 			}
 		});
 
-		return get_default_build_config({
+		return get_build_compile_config({
 			config: svelte_config,
 			input,
 			ssr: false,
@@ -200,8 +203,8 @@ function kit({ svelte_config }) {
 	check_vite_version();
 
 	/** @type {import('vite').Plugin} */
-	const plugin_build = {
-		name: 'vite-plugin-sveltekit-build',
+	const plugin_setup = {
+		name: 'vite-plugin-sveltekit-setup',
 
 		/**
 		 * Build the SvelteKit-provided Vite config to be merged with the user's vite.config.js file.
@@ -226,7 +229,7 @@ function kit({ svelte_config }) {
 			if (is_build) {
 				manifest_data = (await sync.all(svelte_config, config_env.mode)).manifest_data;
 
-				const new_config = vite_client_build_config();
+				const new_config = get_build_setup_config({ config: svelte_config, ssr: false });
 
 				const warning = warn_overridden_config(config, new_config);
 				if (warning) console.error(warning + '\n');
@@ -252,20 +255,10 @@ function kit({ svelte_config }) {
 			// dev and preview config can be shared
 			/** @type {import('vite').UserConfig} */
 			const result = {
-				appType: 'custom',
-				base: './',
-				build: {
-					rollupOptions: {
-						// Vite dependency crawler needs an explicit JS entry point
-						// eventhough server otherwise works without it
-						input: `${runtime_directory}/client/start.js`
-					}
-				},
 				define: {
 					__SVELTEKIT_APP_VERSION_POLL_INTERVAL__: '0',
 					__SVELTEKIT_EMBEDDED__: svelte_config.kit.embedded ? 'true' : 'false'
 				},
-				publicDir: svelte_config.kit.files.assets,
 				resolve: {
 					alias: [...get_app_aliases(svelte_config.kit), ...get_config_aliases(svelte_config.kit)]
 				},
@@ -554,12 +547,68 @@ function kit({ svelte_config }) {
 				fs.unlinkSync(`${paths.output_dir}/client/${vite_config.build.manifest}`);
 				fs.unlinkSync(`${paths.output_dir}/server/${vite_config.build.manifest}`);
 			}
+		},
+
+		/**
+		 * @see https://vitejs.dev/guide/api-plugin.html#configureserver
+		 */
+		async configureServer(vite) {
+			// set `import { version } from '$app/environment'`
+			(await vite.ssrLoadModule(`${runtime_prefix}/env.js`)).set_version(
+				svelte_config.kit.version.name
+			);
+
+			// set `import { base, assets } from '$app/paths'`
+			const { base, assets } = svelte_config.kit.paths;
+
+			(await vite.ssrLoadModule(`${runtime_base}/paths.js`)).set_paths({
+				base,
+				assets: assets ? SVELTE_KIT_ASSETS : base
+			});
 		}
 	};
 
 	/** @type {import('vite').Plugin} */
-	const plugin_middleware = {
-		name: 'vite-plugin-sveltekit-middleware',
+	const plugin_compile = {
+		name: 'vite-plugin-sveltekit-compile',
+
+		/**
+		 * Build the SvelteKit-provided Vite config to be merged with the user's vite.config.js file.
+		 * @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;
+
+			if (config_env.command === 'build') {
+				const new_config = vite_client_build_config();
+
+				const warning = warn_overridden_config(config, new_config);
+				if (warning) console.error(warning + '\n');
+
+				return new_config;
+			}
+
+			// dev and preview config can be shared
+			/** @type {import('vite').UserConfig} */
+			const result = {
+				appType: 'custom',
+				base: svelte_config.kit.paths.base,
+				build: {
+					rollupOptions: {
+						// Vite dependency crawler needs an explicit JS entry point
+						// eventhough server otherwise works without it
+						input: `${runtime_directory}/client/start.js`
+					}
+				},
+				publicDir: svelte_config.kit.files.assets
+			};
+
+			const warning = warn_overridden_config(config, result);
+			if (warning) console.error(warning);
+
+			return result;
+		},
 
 		/**
 		 * Adds the SvelteKit middleware to do SSR in dev mode.
@@ -578,7 +627,7 @@ function kit({ svelte_config }) {
 		}
 	};
 
-	return [plugin_build, plugin_middleware];
+	return [plugin_setup, plugin_compile];
 }
 
 function check_vite_version() {
@@ -634,8 +683,12 @@ function warn_overridden_config(config, resolved_config) {
  * @param {string[]} out used locally to compute the return value
  */
 function find_overridden_config(config, resolved_config, enforced_config, path, out) {
+	if (config == null || resolved_config == null) {
+		return out;
+	}
+
 	for (const key in enforced_config) {
-		if (typeof config === 'object' && config !== null && key in config) {
+		if (typeof config === 'object' && key in config && key in resolved_config) {
 			const enforced = enforced_config[key];
 
 			if (enforced === true) {
@@ -647,7 +700,6 @@ function find_overridden_config(config, resolved_config, enforced_config, path,
 			}
 		}
 	}
-
 	return out;
 }
 

package/src/exports/vite/utils.js

@@ -173,8 +173,12 @@ export function not_found(req, res, base) {
 
 	if (type === 'text/html') {
 		res.setHeader('Content-Type', 'text/html');
-		res.end(`Not found (did you mean <a href="${prefixed}">${prefixed}</a>?)`);
+		res.end(
+			`The server is configured with a public base URL of /path-base - did you mean to visit <a href="${prefixed}">${prefixed}</a> instead?`
+		);
 	} else {
-		res.end(`Not found (did you mean ${prefixed}?)`);
+		res.end(
+			`The server is configured with a public base URL of /path-base - did you mean to visit ${prefixed} instead?`
+		);
 	}
 }

package/src/runtime/app/forms.js

@@ -107,6 +107,7 @@ export function enhance(form, submit = () => {}) {
 			});
 
 			result = deserialize(await response.text());
+			if (result.type === 'error') result.status = response.status;
 		} catch (error) {
 			if (/** @type {any} */ (error)?.name === 'AbortError') return;
 			result = { type: 'error', error };

package/src/runtime/client/client.js

@@ -1387,7 +1387,7 @@ export function create_client({ target, base }) {
 						url,
 						params: current.params,
 						branch: branch.slice(0, error_load.idx).concat(error_load.node),
-						status: 500, // TODO might not be 500?
+						status: result.status ?? 500,
 						error: result.error,
 						route
 					});

package/types/ambient.d.ts

@@ -160,8 +160,17 @@ declare module '$app/forms' {
 	 * Usage:
 	 *
 	 * ```js
-	 * const response = await fetch('/form?/action', { method: 'POST', body: formData });
-	 * const result = deserialize(await response.text());
+	 * import { deserialize } from '$app/forms';
+	 *
+	 * async function handleSubmit(event) {
+	 *   const response = await fetch('/form?/action', {
+	 *     method: 'POST',
+	 *     body: new FormData(event.target)
+	 *   });
+	 *
+	 *   const result = deserialize(await response.text());
+	 *   // ...
+	 * }
 	 * ```
 	 */
 	export function deserialize<
@@ -220,6 +229,8 @@ declare module '$app/navigation' {
 	 *
 	 * ```ts
 	 * // Example: Match '/path' regardless of the query parameters
+	 * import { invalidate } from '$app/navigation';
+	 *
 	 * invalidate((url) => url.pathname === '/path');
 	 * ```
 	 * @param url The invalidated URL
@@ -356,6 +367,7 @@ declare module '@sveltejs/kit/hooks' {
 	 * /// file: src/hooks.server.js
 	 * import { sequence } from '@sveltejs/kit/hooks';
 	 *
+	 * /// type: import('@sveltejs/kit').Handle
 	 * async function first({ event, resolve }) {
 	 * 	console.log('first pre-processing');
 	 * 	const result = await resolve(event, {
@@ -369,6 +381,7 @@ declare module '@sveltejs/kit/hooks' {
 	 * 	return result;
 	 * }
 	 *
+	 * /// type: import('@sveltejs/kit').Handle
 	 * async function second({ event, resolve }) {
 	 * 	console.log('second pre-processing');
 	 * 	const result = await resolve(event, {
@@ -434,4 +447,5 @@ declare module '@sveltejs/kit/vite' {
 	 * Returns the SvelteKit Vite plugins.
 	 */
 	export function sveltekit(): Promise<Plugin[]>;
+	export { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 }

package/types/index.d.ts

@@ -464,8 +464,7 @@ export interface KitConfig {
 		 *         }
 		 *
 		 *         // otherwise fail the build
-		 *           throw new Error(message);
-		 *         }
+		 *         throw new Error(message);
 		 *       }
 		 *     }
 		 *   }
@@ -1075,7 +1074,7 @@ export type ActionResult<
 	| { type: 'success'; status: number; data?: Success }
 	| { type: 'failure'; status: number; data?: Invalid }
 	| { type: 'redirect'; status: number; location: string }
-	| { type: 'error'; error: any };
+	| { type: 'error'; status?: number; error: any };
 
 /**
  * Creates an `HttpError` object with an HTTP status code and an optional message.

package/types/private.d.ts

@@ -192,11 +192,12 @@ export interface PrerenderHttpErrorHandler {
 		path: string;
 		referrer: string | null;
 		referenceType: 'linked' | 'fetched';
+		message: string;
 	}): void;
 }
 
 export interface PrerenderMissingIdHandler {
-	(details: { path: string; id: string; referrers: string[] }): void;
+	(details: { path: string; id: string; referrers: string[]; message: string }): void;
 }
 
 export type PrerenderHttpErrorHandlerValue = 'fail' | 'warn' | 'ignore' | PrerenderHttpErrorHandler;