@sveltejs/kit 1.16.2 → 1.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltejs/kit",
-  "version": "1.16.2",
+  "version": "1.17.0",
   "description": "The fastest way to build Svelte apps",
   "repository": {
     "type": "git",
@@ -14,7 +14,7 @@
     "@sveltejs/vite-plugin-svelte": "^2.1.1",
     "@types/cookie": "^0.5.1",
     "cookie": "^0.5.0",
-    "devalue": "^4.3.0",
+    "devalue": "^4.3.1",
     "esm-env": "^1.0.0",
     "kleur": "^4.1.5",
     "magic-string": "^0.30.0",
@@ -38,8 +38,8 @@
     "svelte": "^3.56.0",
     "svelte-preprocess": "^5.0.3",
     "typescript": "^4.9.4",
-    "uvu": "^0.5.6",
-    "vite": "^4.3.0"
+    "vite": "^4.3.6",
+    "vitest": "^0.31.0"
   },
   "peerDependencies": {
     "svelte": "^3.54.0",
@@ -89,7 +89,7 @@
     "test:integration": "pnpm -r --workspace-concurrency 1 --filter=\"./test/**\" test",
     "test:cross-platform:dev": "pnpm -r --workspace-concurrency 1 --filter=\"./test/**\" test:cross-platform:dev",
     "test:cross-platform:build": "pnpm test:unit && pnpm -r --workspace-concurrency 1 --filter=\"./test/**\" test:cross-platform:build",
-    "test:unit": "uvu src \"(spec\\.js|test[\\\\/]index\\.js)\"",
+    "test:unit": "vitest --config kit.vitest.config.js run",
     "postinstall": "node postinstall.js"
   }
 }

package/src/core/postbuild/crawl.js

@@ -13,6 +13,20 @@ const ATTRIBUTE_NAME = /[^\t\n\f />"'=]/;
 
 const WHITESPACE = /[\s\n\r]/;
 
+const CRAWLABLE_META_NAME_ATTRS = new Set([
+	'og:url',
+	'og:image',
+	'og:image:url',
+	'og:image:secure_url',
+	'og:video',
+	'og:video:url',
+	'og:video:secure_url',
+	'og:audio',
+	'og:audio:url',
+	'og:audio:secure_url',
+	'twitter:image'
+]);
+
 /**
  * @param {string} html
  * @param {string} base
@@ -81,6 +95,9 @@ export function crawl(html, base) {
 
 				const tag = html.slice(start, i).toUpperCase();
 
+				/** @type {Record<string, string>} */
+				const attributes = {};
+
 				if (tag === 'SCRIPT' || tag === 'STYLE') {
 					while (i < html.length) {
 						if (
@@ -95,9 +112,6 @@ export function crawl(html, base) {
 					}
 				}
 
-				let href = '';
-				let rel = '';
-
 				while (i < html.length) {
 					const start = i;
 
@@ -159,44 +173,7 @@ export function crawl(html, base) {
 							}
 
 							value = decode(value);
-
-							if (name === 'href') {
-								if (tag === 'BASE') {
-									base = resolve(base, value);
-								} else {
-									href = resolve(base, value);
-								}
-							} else if (name === 'id') {
-								ids.push(value);
-							} else if (name === 'name') {
-								if (tag === 'A') ids.push(value);
-							} else if (name === 'rel') {
-								rel = value;
-							} else if (name === 'src') {
-								if (value) hrefs.push(resolve(base, value));
-							} else if (name === 'srcset') {
-								const candidates = [];
-								let insideURL = true;
-								value = value.trim();
-								for (let i = 0; i < value.length; i++) {
-									if (
-										value[i] === ',' &&
-										(!insideURL || (insideURL && WHITESPACE.test(value[i + 1])))
-									) {
-										candidates.push(value.slice(0, i));
-										value = value.substring(i + 1).trim();
-										i = 0;
-										insideURL = true;
-									} else if (WHITESPACE.test(value[i])) {
-										insideURL = false;
-									}
-								}
-								candidates.push(value);
-								for (const candidate of candidates) {
-									const src = candidate.split(WHITESPACE)[0];
-									if (src) hrefs.push(resolve(base, src));
-								}
-							}
+							attributes[name] = value;
 						} else {
 							i -= 1;
 						}
@@ -205,8 +182,56 @@ export function crawl(html, base) {
 					i += 1;
 				}
 
-				if (href && !/\bexternal\b/i.test(rel)) {
-					hrefs.push(resolve(base, href));
+				const { href, id, name, property, rel, src, srcset, content } = attributes;
+
+				if (href) {
+					if (tag === 'BASE') {
+						base = resolve(base, href);
+					} else if (!rel || !/\bexternal\b/i.test(rel)) {
+						hrefs.push(resolve(base, href));
+					}
+				}
+
+				if (id) {
+					ids.push(id);
+				}
+
+				if (name && tag === 'A') {
+					ids.push(name);
+				}
+
+				if (src) {
+					hrefs.push(resolve(base, src));
+				}
+
+				if (srcset) {
+					let value = srcset;
+					const candidates = [];
+					let insideURL = true;
+					value = value.trim();
+					for (let i = 0; i < value.length; i++) {
+						if (value[i] === ',' && (!insideURL || (insideURL && WHITESPACE.test(value[i + 1])))) {
+							candidates.push(value.slice(0, i));
+							value = value.substring(i + 1).trim();
+							i = 0;
+							insideURL = true;
+						} else if (WHITESPACE.test(value[i])) {
+							insideURL = false;
+						}
+					}
+					candidates.push(value);
+					for (const candidate of candidates) {
+						const src = candidate.split(WHITESPACE)[0];
+						if (src) hrefs.push(resolve(base, src));
+					}
+				}
+
+				if (tag === 'META' && content) {
+					const attr = name ?? property;
+
+					if (attr && CRAWLABLE_META_NAME_ATTRS.has(attr)) {
+						hrefs.push(resolve(base, content));
+					}
 				}
 			}
 		}

package/src/core/postbuild/prerender.js

@@ -12,6 +12,7 @@ import { get_route_segments } from '../../utils/routing.js';
 import { queue } from './queue.js';
 import { crawl } from './crawl.js';
 import { forked } from '../../utils/fork.js';
+import * as devalue from 'devalue';
 
 export default forked(import.meta.url, prerender);
 
@@ -340,7 +341,11 @@ async function prerender({ out, manifest_path, metadata, verbose, env }) {
 
 					writeFileSync(
 						dest,
-						`<meta http-equiv="refresh" content=${escape_html_attr(`0;url=${location}`)}>`
+						`<script>location.href=${devalue.uneval(
+							location
+						)};</script><meta http-equiv="refresh" content=${escape_html_attr(
+							`0;url=${location}`
+						)}>`
 					);
 
 					written.add(file);

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

@@ -176,20 +176,17 @@ export async function dev(vite, vite_config, svelte_config) {
 							const styles = {};
 
 							for (const dep of deps) {
-								const url = new URL(dep.url, 'http://localhost/');
+								const url = new URL(dep.url, 'dummy:/');
 								const query = url.searchParams;
 
 								if (
-									isCSSRequest(dep.file) ||
-									(query.has('svelte') && query.get('type') === 'style')
+									(isCSSRequest(dep.file) ||
+										(query.has('svelte') && query.get('type') === 'style')) &&
+									!(query.has('raw') || query.has('url') || query.has('inline'))
 								) {
-									// setting `?inline` to load CSS modules as css string
-									query.set('inline', '');
-
 									try {
-										const mod = await loud_ssr_load_module(
-											`${url.pathname}${url.search}${url.hash}`
-										);
+										query.set('inline', '');
+										const mod = await vite.ssrLoadModule(`${url.pathname}${url.search}${url.hash}`);
 										styles[dep.url] = mod.default;
 									} catch {
 										// this can happen with dynamically imported modules, I think

package/src/runtime/app/forms.js

@@ -14,12 +14,26 @@ export function deserialize(result) {
 	return parsed;
 }
 
+/**
+ * @param {string} old_name
+ * @param {string} new_name
+ * @param {string} call_location
+ * @returns void
+ */
+function warn_on_access(old_name, new_name, call_location) {
+	if (!DEV) return;
+	// TODO 2.0: Remove this code
+	console.warn(
+		`\`${old_name}\` has been deprecated in favor of \`${new_name}\`. \`${old_name}\` will be removed in a future version. (Called from ${call_location})`
+	);
+}
+
 /** @type {import('$app/forms').enhance} */
-export function enhance(form, submit = () => {}) {
+export function enhance(form_element, submit = () => {}) {
 	if (
 		DEV &&
-		/** @type {HTMLFormElement} */ (HTMLFormElement.prototype.cloneNode.call(form)).method !==
-			'post'
+		/** @type {HTMLFormElement} */ (HTMLFormElement.prototype.cloneNode.call(form_element))
+			.method !== 'post'
 	) {
 		throw new Error('use:enhance can only be used on <form> fields with method="POST"');
 	}
@@ -35,7 +49,7 @@ export function enhance(form, submit = () => {}) {
 		if (result.type === 'success') {
 			if (reset !== false) {
 				// We call reset from the prototype to avoid DOM clobbering
-				HTMLFormElement.prototype.reset.call(form);
+				HTMLFormElement.prototype.reset.call(form_element);
 			}
 			await invalidateAll();
 		}
@@ -60,14 +74,15 @@ export function enhance(form, submit = () => {}) {
 			// We do cloneNode for avoid DOM clobbering - https://github.com/sveltejs/kit/issues/7593
 			event.submitter?.hasAttribute('formaction')
 				? /** @type {HTMLButtonElement | HTMLInputElement} */ (event.submitter).formAction
-				: /** @type {HTMLFormElement} */ (HTMLFormElement.prototype.cloneNode.call(form)).action
+				: /** @type {HTMLFormElement} */ (HTMLFormElement.prototype.cloneNode.call(form_element))
+						.action
 		);
 
-		const data = new FormData(form);
+		const form_data = new FormData(form_element);
 
 		const submitter_name = event.submitter?.getAttribute('name');
 		if (submitter_name) {
-			data.append(submitter_name, event.submitter?.getAttribute('value') ?? '');
+			form_data.append(submitter_name, event.submitter?.getAttribute('value') ?? '');
 		}
 
 		const controller = new AbortController();
@@ -75,13 +90,22 @@ export function enhance(form, submit = () => {}) {
 		let cancelled = false;
 		const cancel = () => (cancelled = true);
 
+		// TODO 2.0: Remove `data` and `form`
 		const callback =
 			(await submit({
 				action,
 				cancel,
 				controller,
-				data,
-				form,
+				get data() {
+					warn_on_access('data', 'formData', 'use:enhance submit function');
+					return form_data;
+				},
+				formData: form_data,
+				get form() {
+					warn_on_access('form', 'formElement', 'use:enhance submit function');
+					return form_element;
+				},
+				formElement: form_element,
 				submitter: event.submitter
 			})) ?? fallback_callback;
 		if (cancelled) return;
@@ -97,7 +121,7 @@ export function enhance(form, submit = () => {}) {
 					'x-sveltekit-action': 'true'
 				},
 				cache: 'no-store',
-				body: data,
+				body: form_data,
 				signal: controller.signal
 			});
 
@@ -110,8 +134,16 @@ export function enhance(form, submit = () => {}) {
 
 		callback({
 			action,
-			data,
-			form,
+			get data() {
+				warn_on_access('data', 'formData', 'callback returned from use:enhance submit function');
+				return form_data;
+			},
+			formData: form_data,
+			get form() {
+				warn_on_access('form', 'formElement', 'callback returned from use:enhance submit function');
+				return form_element;
+			},
+			formElement: form_element,
 			update: (opts) => fallback_callback({ action, result, reset: opts?.reset }),
 			// @ts-expect-error generic constraints stuff we don't care about
 			result
@@ -119,12 +151,12 @@ export function enhance(form, submit = () => {}) {
 	}
 
 	// @ts-expect-error
-	HTMLFormElement.prototype.addEventListener.call(form, 'submit', handle_submit);
+	HTMLFormElement.prototype.addEventListener.call(form_element, 'submit', handle_submit);
 
 	return {
 		destroy() {
 			// @ts-expect-error
-			HTMLFormElement.prototype.removeEventListener.call(form, 'submit', handle_submit);
+			HTMLFormElement.prototype.removeEventListener.call(form_element, 'submit', handle_submit);
 		}
 	};
 }

package/src/runtime/client/client.js

@@ -272,7 +272,7 @@ export function create_client(app, target) {
 
 	/** @param {import('./types').NavigationFinished} result */
 	function initialize(result) {
-		if (DEV && document.querySelector('vite-error-overlay')) return;
+		if (DEV && result.state.error && document.querySelector('vite-error-overlay')) return;
 
 		current = result.state;
 
@@ -1908,7 +1908,8 @@ function reset_focus() {
 		const tabindex = root.getAttribute('tabindex');
 
 		root.tabIndex = -1;
-		root.focus({ preventScroll: true });
+		// @ts-expect-error
+		root.focus({ preventScroll: true, focusVisible: false });
 
 		// restore `tabindex` as to prevent `root` from stealing input from elements
 		if (tabindex !== null) {

package/src/runtime/server/cookie.js

@@ -107,32 +107,7 @@ export function get_cookies(request, url, trailing_slash) {
 		 * @param {import('cookie').CookieSerializeOptions} opts
 		 */
 		set(name, value, opts = {}) {
-			let path = opts.path ?? default_path;
-
-			new_cookies[name] = {
-				name,
-				value,
-				options: {
-					...defaults,
-					...opts,
-					path
-				}
-			};
-
-			if (__SVELTEKIT_DEV__) {
-				const serialized = serialize(name, value, new_cookies[name].options);
-				if (new TextEncoder().encode(serialized).byteLength > MAX_COOKIE_SIZE) {
-					throw new Error(`Cookie "${name}" is too large, and will be discarded by the browser`);
-				}
-
-				cookie_paths[name] ??= new Set();
-
-				if (!value) {
-					cookie_paths[name].delete(path);
-				} else {
-					cookie_paths[name].add(path);
-				}
-			}
+			set_internal(name, value, { ...defaults, ...opts });
 		},
 
 		/**
@@ -193,7 +168,40 @@ export function get_cookies(request, url, trailing_slash) {
 			.join('; ');
 	}
 
-	return { cookies, new_cookies, get_cookie_header };
+	/**
+	 * @param {string} name
+	 * @param {string} value
+	 * @param {import('cookie').CookieSerializeOptions} opts
+	 */
+	function set_internal(name, value, opts) {
+		let path = opts.path ?? default_path;
+
+		new_cookies[name] = {
+			name,
+			value,
+			options: {
+				...opts,
+				path
+			}
+		};
+
+		if (__SVELTEKIT_DEV__) {
+			const serialized = serialize(name, value, new_cookies[name].options);
+			if (new TextEncoder().encode(serialized).byteLength > MAX_COOKIE_SIZE) {
+				throw new Error(`Cookie "${name}" is too large, and will be discarded by the browser`);
+			}
+
+			cookie_paths[name] ??= new Set();
+
+			if (!value) {
+				cookie_paths[name].delete(path);
+			} else {
+				cookie_paths[name].add(path);
+			}
+		}
+	}
+
+	return { cookies, new_cookies, get_cookie_header, set_internal };
 }
 
 /**

package/src/runtime/server/fetch.js

@@ -9,10 +9,11 @@ import * as paths from '__sveltekit/paths';
  *   manifest: import('types').SSRManifest;
  *   state: import('types').SSRState;
  *   get_cookie_header: (url: URL, header: string | null) => string;
+ *   set_internal: (name: string, value: string, opts: import('cookie').CookieSerializeOptions) => void;
  * }} opts
  * @returns {typeof fetch}
  */
-export function create_fetch({ event, options, manifest, state, get_cookie_header }) {
+export function create_fetch({ event, options, manifest, state, get_cookie_header, set_internal }) {
 	return async (info, init) => {
 		const original_request = normalize_fetch_input(info, init, event.url);
 
@@ -131,7 +132,7 @@ export function create_fetch({ event, options, manifest, state, get_cookie_heade
 						const { name, value, ...options } = set_cookie_parser.parseString(str);
 
 						// options.sameSite is string, something more specific is required - type cast is safe
-						event.cookies.set(
+						set_internal(
 							name,
 							value,
 							/** @type {import('cookie').CookieSerializeOptions} */ (options)

package/src/runtime/server/respond.js

@@ -244,7 +244,7 @@ export async function respond(request, options, manifest, state) {
 			}
 		}
 
-		const { cookies, new_cookies, get_cookie_header } = get_cookies(
+		const { cookies, new_cookies, get_cookie_header, set_internal } = get_cookies(
 			request,
 			url,
 			trailing_slash ?? 'never'
@@ -252,7 +252,14 @@ export async function respond(request, options, manifest, state) {
 
 		cookies_to_add = new_cookies;
 		event.cookies = cookies;
-		event.fetch = create_fetch({ event, options, manifest, state, get_cookie_header });
+		event.fetch = create_fetch({
+			event,
+			options,
+			manifest,
+			state,
+			get_cookie_header,
+			set_internal
+		});
 
 		if (state.prerendering && !state.prerendering.fallback) disable_search(url);
 

package/src/utils/fork.js

@@ -1,5 +1,5 @@
 import { fileURLToPath } from 'node:url';
-import child_process from 'node:child_process';
+import { Worker, parentPort } from 'node:worker_threads';
 
 /**
  * Runs a task in a subprocess so any dangling stuff gets killed upon completion.
@@ -11,23 +11,21 @@ import child_process from 'node:child_process';
  * @returns {(opts: T) => Promise<U>} A function that when called starts the subprocess
  */
 export function forked(module, callback) {
-	if (process.env.SVELTEKIT_FORK && process.send) {
-		process.send({ type: 'ready', module });
-
-		process.on(
+	if (process.env.SVELTEKIT_FORK && parentPort) {
+		parentPort.on(
 			'message',
 			/** @param {any} data */ async (data) => {
 				if (data?.type === 'args' && data.module === module) {
-					if (process.send) {
-						process.send({
-							type: 'result',
-							module,
-							payload: await callback(data.payload)
-						});
-					}
+					parentPort?.postMessage({
+						type: 'result',
+						module,
+						payload: await callback(data.payload)
+					});
 				}
 			}
 		);
+
+		parentPort.postMessage({ type: 'ready', module });
 	}
 
 	/**
@@ -36,20 +34,18 @@ export function forked(module, callback) {
 	 */
 	const fn = function (opts) {
 		return new Promise((fulfil, reject) => {
-			const child = child_process.fork(fileURLToPath(module), {
-				stdio: 'inherit',
+			const worker = new Worker(fileURLToPath(module), {
 				env: {
 					...process.env,
 					SVELTEKIT_FORK: 'true'
-				},
-				serialization: 'advanced'
+				}
 			});
 
-			child.on(
+			worker.on(
 				'message',
 				/** @param {any} data */ (data) => {
 					if (data?.type === 'ready' && data.module === module) {
-						child.send({
+						worker.postMessage({
 							type: 'args',
 							module,
 							payload: opts
@@ -57,13 +53,13 @@ export function forked(module, callback) {
 					}
 
 					if (data?.type === 'result' && data.module === module) {
-						child.kill();
+						worker.terminate();
 						fulfil(data.payload);
 					}
 				}
 			);
 
-			child.on('exit', (code) => {
+			worker.on('exit', (code) => {
 				if (code) {
 					reject(new Error(`Failed with code ${code}`));
 				}

package/src/utils/routing.js

@@ -96,7 +96,7 @@ export function parse_route_id(id) {
 	return { pattern, params };
 }
 
-const basic_param_pattern = /\[(\[)?(?:\.\.\.)?(\w+?)(?:=(\w+))?\]\]?/;
+const basic_param_pattern = /\[(\[)?(?:\.\.\.)?(\w+?)(?:=(\w+))?\]\]?/g;
 
 /**
  * Parses a route ID, then resolves it to a path by replacing parameters with actual values from `entry`.
@@ -112,29 +112,23 @@ export function resolve_entry(id, entry) {
 	return (
 		'/' +
 		segments
-			.map((segment) => {
-				const match = basic_param_pattern.exec(segment);
-
-				// static content -- i.e. not a param
-				if (!match) return segment;
-
-				const optional = !!match[1];
-				const name = match[2];
-				const param_value = entry[name];
-
-				// This is nested so TS correctly narrows the type
-				if (!param_value) {
-					if (optional) return '';
-					throw new Error(`Missing parameter '${name}' in route ${id}`);
-				}
-
-				if (param_value.startsWith('/') || param_value.endsWith('/'))
-					throw new Error(
-						`Parameter '${name}' in route ${id} cannot start or end with a slash -- this would cause an invalid route like foo//bar`
-					);
-
-				return param_value;
-			})
+			.map((segment) =>
+				segment.replace(basic_param_pattern, (_, optional, name) => {
+					const param_value = entry[name];
+
+					// This is nested so TS correctly narrows the type
+					if (!param_value) {
+						if (optional) return '';
+						throw new Error(`Missing parameter '${name}' in route ${id}`);
+					}
+
+					if (param_value.startsWith('/') || param_value.endsWith('/'))
+						throw new Error(
+							`Parameter '${name}' in route ${id} cannot start or end with a slash -- this would cause an invalid route like foo//bar`
+						);
+					return param_value;
+				})
+			)
 			.filter(Boolean)
 			.join('/')
 	);

package/types/ambient.d.ts

@@ -80,15 +80,36 @@ declare module '$app/forms' {
 		Invalid extends Record<string, unknown> | undefined = Record<string, any>
 	> = (input: {
 		action: URL;
+		/**
+		 * use `formData` instead of `data`
+		 * @deprecated
+		 */
 		data: FormData;
+		formData: FormData;
+		/**
+		 * use `formElement` instead of `form`
+		 * @deprecated
+		 */
 		form: HTMLFormElement;
+		formElement: HTMLFormElement;
 		controller: AbortController;
 		cancel(): void;
 		submitter: HTMLElement | null;
 	}) => MaybePromise<
 		| void
 		| ((opts: {
+				/**
+				 * use `formData` instead of `data`
+				 * @deprecated
+				 */
+				data: FormData;
+				formData: FormData;
+				/**
+				 * use `formElement` instead of `form`
+				 * @deprecated
+				 */
 				form: HTMLFormElement;
+				formElement: HTMLFormElement;
 				action: URL;
 				result: ActionResult<Success, Invalid>;
 				/**
@@ -108,7 +129,7 @@ declare module '$app/forms' {
 		Success extends Record<string, unknown> | undefined = Record<string, any>,
 		Invalid extends Record<string, unknown> | undefined = Record<string, any>
 	>(
-		form: HTMLFormElement,
+		formElement: HTMLFormElement,
 		/**
 		 * Called upon submission with the given FormData and the `action` that should be triggered.
 		 * If `cancel` is called, the form will not be submitted.

package/types/index.d.ts

@@ -20,6 +20,7 @@ import {
 	UniqueInterface
 } from './private.js';
 import { BuildData, SSRNodeLoader, SSRRoute, ValidatedConfig } from './internal.js';
+import type { PluginOptions } from '@sveltejs/vite-plugin-svelte';
 
 export { PrerenderOption } from './private.js';
 
@@ -186,6 +187,8 @@ export interface Config {
 	};
 	/** Preprocessor options, if any. Preprocessing can alternatively also be done through Vite's preprocessor capabilities. */
 	preprocess?: any;
+	/** `vite-plugin-svelte` plugin options. */
+	vitePlugin?: PluginOptions;
 	/** Any additional options required by tooling that integrates with Svelte. */
 	[key: string]: any;
 }

package/src/utils/unit_test.js

@@ -1,11 +0,0 @@
-import { suite } from 'uvu';
-
-/**
- * @param {string} name
- * @param {(suite: import('uvu').Test<import('uvu').Context>) => void} fn
- */
-export function describe(name, fn) {
-	const s = suite(name);
-	fn(s);
-	s.run();
-}