@sveltejs/kit 1.0.0-next.222 → 1.0.0-next.227

package/assets/kit.js

@@ -567,7 +567,8 @@ async function render_response({
 }) {
 	const css = new Set(options.manifest._.entry.css);
 	const js = new Set(options.manifest._.entry.js);
-	const styles = new Set();
+	/** @type {Map<string, string>} */
+	const styles = new Map();
 
 	/** @type {Array<{ url: string, body: string, json: string }>} */
 	const serialized_data = [];
@@ -585,7 +586,7 @@ async function render_response({
 		branch.forEach(({ node, loaded, fetched, uses_credentials }) => {
 			if (node.css) node.css.forEach((url) => css.add(url));
 			if (node.js) node.js.forEach((url) => js.add(url));
-			if (node.styles) node.styles.forEach((content) => styles.add(content));
+			if (node.styles) Object.entries(node.styles).forEach(([k, v]) => styles.set(k, v));
 
 			// TODO probably better if `fetched` wasn't populated unless `hydrate`
 			if (fetched && page_config.hydrate) serialized_data.push(...fetched);
@@ -646,94 +647,80 @@ async function render_response({
 		rendered = { head: '', html: '', css: { code: '', map: null } };
 	}
 
-	const include_js = page_config.router || page_config.hydrate;
-	if (!include_js) js.clear();
-
-	// TODO strip the AMP stuff out of the build if not relevant
-	const links = options.amp
-		? styles.size > 0 || rendered.css.code.length > 0
-			? `<style amp-custom>${Array.from(styles).concat(rendered.css.code).join('\n')}</style>`
-			: ''
-		: [
-				// From https://web.dev/priority-hints/:
-				// Generally, preloads will load in the order the parser gets to them for anything above "Medium" priority
-				// Thus, we should list CSS first
-				...Array.from(css).map((dep) => `<link rel="stylesheet" href="${options.prefix}${dep}">`),
-				...Array.from(js).map((dep) => `<link rel="modulepreload" href="${options.prefix}${dep}">`)
-		  ].join('\n\t\t');
-
-	/** @type {string} */
-	let init = '';
+	let { head, html: body } = rendered;
+
+	const inlined_style = Array.from(styles.values()).join('\n');
 
 	if (options.amp) {
-		init = `
+		head += `
 		<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style>
 		<noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
-		<script async src="https://cdn.ampproject.org/v0.js"></script>`;
-		init += options.service_worker
-			? '<script async custom-element="amp-install-serviceworker" src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js"></script>'
-			: '';
-	} else if (include_js) {
-		// prettier-ignore
-		init = `<script type="module">
-			import { start } from ${s(options.prefix + options.manifest._.entry.file)};
-			start({
-				target: ${options.target ? `document.querySelector(${s(options.target)})` : 'document.body'},
-				paths: ${s(options.paths)},
-				session: ${try_serialize($session, (error) => {
-					throw new Error(`Failed to serialize session data: ${error.message}`);
-				})},
-				route: ${!!page_config.router},
-				spa: ${!ssr},
-				trailing_slash: ${s(options.trailing_slash)},
-				hydrate: ${ssr && page_config.hydrate ? `{
-					status: ${status},
-					error: ${serialize_error(error)},
-					nodes: [
-						${(branch || [])
-						.map(({ node }) => `import(${s(options.prefix + node.entry)})`)
-						.join(',\n\t\t\t\t\t\t')}
-					],
-					url: new URL(${s(url.href)}),
-					params: ${devalue(params)}
-				}` : 'null'}
-			});
-		</script>`;
-	}
-
-	if (options.service_worker && !options.amp) {
-		init += `<script>
-			if ('serviceWorker' in navigator) {
-				navigator.serviceWorker.register('${options.service_worker}');
-			}
-		</script>`;
-	}
+		<script async src="https://cdn.ampproject.org/v0.js"></script>
 
-	const head = [
-		rendered.head,
-		styles.size && !options.amp
-			? `<style data-svelte>${Array.from(styles).join('\n')}</style>`
-			: '',
-		links,
-		init
-	].join('\n\n\t\t');
+		<style amp-custom>${inlined_style}\n${rendered.css.code}</style>`;
 
-	let body = rendered.html;
-	if (options.amp) {
 		if (options.service_worker) {
+			head +=
+				'<script async custom-element="amp-install-serviceworker" src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js"></script>';
+
 			body += `<amp-install-serviceworker src="${options.service_worker}" layout="nodisplay"></amp-install-serviceworker>`;
 		}
 	} else {
-		body += serialized_data
-			.map(({ url, body, json }) => {
-				let attributes = `type="application/json" data-type="svelte-data" data-url=${escape_html_attr(
-					url
-				)}`;
-				if (body) attributes += ` data-body="${hash(body)}"`;
-
-				return `<script ${attributes}>${json}</script>`;
-			})
-			.join('\n\n\t');
+		if (inlined_style) {
+			head += `\n\t<style${options.dev ? ' data-svelte' : ''}>${inlined_style}</style>`;
+		}
+		// prettier-ignore
+		head += Array.from(css)
+				.map((dep) => `\n\t<link${styles.has(dep) ? ' disabled' : ''} rel="stylesheet" href="${options.prefix + dep}">`)
+				.join('');
+
+		if (page_config.router || page_config.hydrate) {
+			head += Array.from(js)
+				.map((dep) => `\n\t<link rel="modulepreload" href="${options.prefix + dep}">`)
+				.join('');
+			// prettier-ignore
+			head += `
+			<script type="module">
+				import { start } from ${s(options.prefix + options.manifest._.entry.file)};
+				start({
+					target: ${options.target ? `document.querySelector(${s(options.target)})` : 'document.body'},
+					paths: ${s(options.paths)},
+					session: ${try_serialize($session, (error) => {
+						throw new Error(`Failed to serialize session data: ${error.message}`);
+					})},
+					route: ${!!page_config.router},
+					spa: ${!ssr},
+					trailing_slash: ${s(options.trailing_slash)},
+					hydrate: ${ssr && page_config.hydrate ? `{
+						status: ${status},
+						error: ${serialize_error(error)},
+						nodes: [
+							${(branch || [])
+							.map(({ node }) => `import(${s(options.prefix + node.entry)})`)
+							.join(',\n\t\t\t\t\t\t')}
+						],
+						url: new URL(${s(url.href)}),
+						params: ${devalue(params)}
+					}` : 'null'}
+				});
+			</script>${options.service_worker ? `
+			<script>
+				if ('serviceWorker' in navigator) {
+					navigator.serviceWorker.register('${options.service_worker}');
+				}
+			</script>` : ''}`;
+
+			body += serialized_data
+				.map(({ url, body, json }) => {
+					let attributes = `type="application/json" data-type="svelte-data" data-url=${escape_html_attr(
+						url
+					)}`;
+					if (body) attributes += ` data-body="${hash(body)}"`;
+
+					return `<script ${attributes}>${json}</script>`;
+				})
+				.join('\n\n\t');
+		}
 	}
 
 	/** @type {import('types/helper').ResponseHeaders} */
@@ -1641,8 +1628,9 @@ function read_only_form_data() {
 		 * @param {string} value
 		 */
 		append(key, value) {
-			if (map.has(key)) {
-				(map.get(key) || []).push(value);
+			const existing_values = map.get(key);
+			if (existing_values) {
+				existing_values.push(value);
 			} else {
 				map.set(key, [value]);
 			}
@@ -1664,12 +1652,15 @@ class ReadOnlyFormData {
 	/** @param {string} key */
 	get(key) {
 		const value = this.#map.get(key);
-		return value && value[0];
+		if (!value) {
+			return null;
+		}
+		return value[0];
 	}
 
 	/** @param {string} key */
 	getAll(key) {
-		return this.#map.get(key);
+		return this.#map.get(key) || [];
 	}
 
 	/** @param {string} key */
@@ -1849,6 +1840,28 @@ async function respond(incoming, options, state = {}) {
 		locals: {}
 	};
 
+	const { parameter, allowed } = options.method_override;
+	const method_override = incoming.url.searchParams.get(parameter)?.toUpperCase();
+
+	if (method_override) {
+		if (request.method.toUpperCase() === 'POST') {
+			if (allowed.includes(method_override)) {
+				request.method = method_override;
+			} else {
+				const verb = allowed.length === 0 ? 'enabled' : 'allowed';
+				const body = `${parameter}=${method_override} is not ${verb}. See https://kit.svelte.dev/docs#configuration-methodoverride`;
+
+				return {
+					status: 400,
+					headers: {},
+					body
+				};
+			}
+		} else {
+			throw new Error(`${parameter}=${method_override} is only allowed with POST requests`);
+		}
+	}
+
 	// TODO remove this for 1.0
 	/**
 	 * @param {string} property

package/assets/runtime/app/navigation.js

@@ -19,6 +19,8 @@ const goto = import.meta.env.SSR ? guard('goto') : goto_;
 const invalidate = import.meta.env.SSR ? guard('invalidate') : invalidate_;
 const prefetch = import.meta.env.SSR ? guard('prefetch') : prefetch_;
 const prefetchRoutes = import.meta.env.SSR ? guard('prefetchRoutes') : prefetchRoutes_;
+const beforeNavigate = import.meta.env.SSR ? () => {} : beforeNavigate_;
+const afterNavigate = import.meta.env.SSR ? () => {} : afterNavigate_;
 
 /**
  * @type {import('$app/navigation').goto}
@@ -62,4 +64,18 @@ async function prefetchRoutes_(pathnames) {
 	await Promise.all(promises);
 }
 
-export { disableScrollHandling, goto, invalidate, prefetch, prefetchRoutes };
+/**
+ * @type {import('$app/navigation').beforeNavigate}
+ */
+function beforeNavigate_(fn) {
+	if (router) router.before_navigate(fn);
+}
+
+/**
+ * @type {import('$app/navigation').afterNavigate}
+ */
+function afterNavigate_(fn) {
+	if (router) router.after_navigate(fn);
+}
+
+export { afterNavigate, beforeNavigate, disableScrollHandling, goto, invalidate, prefetch, prefetchRoutes };

package/assets/runtime/internal/start.js

@@ -1,7 +1,7 @@
 import Root from '../../generated/root.svelte';
 import { fallback, routes } from '../../generated/manifest.js';
+import { onMount, tick } from 'svelte';
 import { g as get_base_uri } from '../chunks/utils.js';
-import { tick } from 'svelte';
 import { writable } from 'svelte/store';
 import { init } from './singletons.js';
 import { set_paths } from '../paths.js';
@@ -59,8 +59,21 @@ class Router {
 		// make it possible to reset focus
 		document.body.setAttribute('tabindex', '-1');
 
-		// create initial history entry, so we can return here
-		history.replaceState(history.state || {}, '', location.href);
+		// keeping track of the history index in order to prevent popstate navigation events if needed
+		this.current_history_index = history.state?.['sveltekit:index'] ?? 0;
+
+		if (this.current_history_index === 0) {
+			// create initial history entry, so we can return here
+			history.replaceState({ ...history.state, 'sveltekit:index': 0 }, '', location.href);
+		}
+
+		this.callbacks = {
+			/** @type {Array<({ from, to, cancel }: { from: URL, to: URL | null, cancel: () => void }) => void>} */
+			before_navigate: [],
+
+			/** @type {Array<({ from, to }: { from: URL | null, to: URL }) => void>} */
+			after_navigate: []
+		};
 	}
 
 	init_listeners() {
@@ -72,8 +85,23 @@ class Router {
 		// Reset scrollRestoration to auto when leaving page, allowing page reload
 		// and back-navigation from other pages to use the browser to restore the
 		// scrolling position.
-		addEventListener('beforeunload', () => {
-			history.scrollRestoration = 'auto';
+		addEventListener('beforeunload', (e) => {
+			let should_block = false;
+
+			const intent = {
+				from: this.renderer.current.url,
+				to: null,
+				cancel: () => (should_block = true)
+			};
+
+			this.callbacks.before_navigate.forEach((fn) => fn(intent));
+
+			if (should_block) {
+				e.preventDefault();
+				e.returnValue = '';
+			} else {
+				history.scrollRestoration = 'auto';
+			}
 		});
 
 		// Setting scrollRestoration to manual again when returning to this page.
@@ -128,7 +156,7 @@ class Router {
 		addEventListener('sveltekit:trigger_prefetch', trigger_prefetch);
 
 		/** @param {MouseEvent} event */
-		addEventListener('click', (event) => {
+		addEventListener('click', async (event) => {
 			if (!this.enabled) return;
 
 			// Adapted from https://github.com/visionmedia/page.js
@@ -161,8 +189,6 @@ class Router {
 			// Ignore if <a> has a target
 			if (a instanceof SVGAElement ? a.target.baseVal : a.target) return;
 
-			if (!this.owns(url)) return;
-
 			// Check if new url only differs by hash
 			if (url.href.split('#')[0] === location.href.split('#')[0]) {
 				// Call `pushState` to add url to history so going back works.
@@ -175,22 +201,48 @@ class Router {
 				return;
 			}
 
-			history.pushState({}, '', url.href);
-
-			const noscroll = a.hasAttribute('sveltekit:noscroll');
-			this._navigate(url, noscroll ? scroll_state() : null, false, [], url.hash);
-			event.preventDefault();
+			this._navigate({
+				url,
+				scroll: a.hasAttribute('sveltekit:noscroll') ? scroll_state() : null,
+				keepfocus: false,
+				chain: [],
+				details: {
+					state: {},
+					replaceState: false
+				},
+				accepted: () => event.preventDefault(),
+				blocked: () => event.preventDefault()
+			});
 		});
 
 		addEventListener('popstate', (event) => {
 			if (event.state && this.enabled) {
-				const url = new URL(location.href);
-				this._navigate(url, event.state['sveltekit:scroll'], false, []);
+				// if a popstate-driven navigation is cancelled, we need to counteract it
+				// with history.go, which means we end up back here, hence this check
+				if (event.state['sveltekit:index'] === this.current_history_index) return;
+
+				this._navigate({
+					url: new URL(location.href),
+					scroll: event.state['sveltekit:scroll'],
+					keepfocus: false,
+					chain: [],
+					details: null,
+					accepted: () => {
+						this.current_history_index = event.state['sveltekit:index'];
+					},
+					blocked: () => {
+						const delta = this.current_history_index - event.state['sveltekit:index'];
+						history.go(delta);
+					}
+				});
 			}
 		});
 	}
 
-	/** @param {URL} url */
+	/**
+	 * Returns true if `url` has the same origin and basepath as the app
+	 * @param {URL} url
+	 */
 	owns(url) {
 		return url.origin === location.origin && url.pathname.startsWith(this.base);
 	}
@@ -226,9 +278,19 @@ class Router {
 	) {
 		const url = new URL(href, get_base_uri(document));
 
-		if (this.enabled && this.owns(url)) {
-			history[replaceState ? 'replaceState' : 'pushState'](state, '', href);
-			return this._navigate(url, noscroll ? scroll_state() : null, keepfocus, chain, url.hash);
+		if (this.enabled) {
+			return this._navigate({
+				url,
+				scroll: noscroll ? scroll_state() : null,
+				keepfocus,
+				chain,
+				details: {
+					state,
+					replaceState
+				},
+				accepted: () => {},
+				blocked: () => {}
+			});
 		}
 
 		location.href = url.href;
@@ -259,20 +321,73 @@ class Router {
 		return this.renderer.load(info);
 	}
 
+	/** @param {({ from, to }: { from: URL | null, to: URL }) => void} fn */
+	after_navigate(fn) {
+		onMount(() => {
+			this.callbacks.after_navigate.push(fn);
+
+			return () => {
+				const i = this.callbacks.after_navigate.indexOf(fn);
+				this.callbacks.after_navigate.splice(i, 1);
+			};
+		});
+	}
+
 	/**
-	 * @param {URL} url
-	 * @param {{ x: number, y: number }?} scroll
-	 * @param {boolean} keepfocus
-	 * @param {string[]} chain
-	 * @param {string} [hash]
+	 * @param {({ from, to, cancel }: { from: URL, to: URL | null, cancel: () => void }) => void} fn
 	 */
-	async _navigate(url, scroll, keepfocus, chain, hash) {
-		const info = this.parse(url);
+	before_navigate(fn) {
+		onMount(() => {
+			this.callbacks.before_navigate.push(fn);
+
+			return () => {
+				const i = this.callbacks.before_navigate.indexOf(fn);
+				this.callbacks.before_navigate.splice(i, 1);
+			};
+		});
+	}
+
+	/**
+	 * @param {{
+	 *   url: URL;
+	 *   scroll: { x: number, y: number } | null;
+	 *   keepfocus: boolean;
+	 *   chain: string[];
+	 *   details: {
+	 *     replaceState: boolean;
+	 *     state: any;
+	 *   } | null;
+	 *   accepted: () => void;
+	 *   blocked: () => void;
+	 * }} opts
+	 */
+	async _navigate({ url, scroll, keepfocus, chain, details, accepted, blocked }) {
+		const from = this.renderer.current.url;
+		let should_block = false;
+
+		const intent = {
+			from,
+			to: url,
+			cancel: () => (should_block = true)
+		};
+
+		this.callbacks.before_navigate.forEach((fn) => fn(intent));
 
+		if (should_block) {
+			blocked();
+			return;
+		}
+
+		const info = this.parse(url);
 		if (!info) {
-			throw new Error('Attempted to navigate to a URL that does not belong to this app');
+			location.href = url.href;
+			return new Promise(() => {
+				// never resolves
+			});
 		}
 
+		accepted();
+
 		if (!this.navigating) {
 			dispatchEvent(new CustomEvent('sveltekit:navigation-start'));
 		}
@@ -288,13 +403,24 @@ class Router {
 		}
 
 		info.url = new URL(url.origin + pathname + url.search + url.hash);
-		history.replaceState({}, '', info.url);
 
-		await this.renderer.handle_navigation(info, chain, false, { hash, scroll, keepfocus });
+		if (details) {
+			const change = details.replaceState ? 0 : 1;
+			details.state['sveltekit:index'] = this.current_history_index += change;
+			history[details.replaceState ? 'replaceState' : 'pushState'](details.state, '', info.url);
+		}
+
+		await this.renderer.handle_navigation(info, chain, false, {
+			scroll,
+			keepfocus
+		});
 
 		this.navigating--;
 		if (!this.navigating) {
 			dispatchEvent(new CustomEvent('sveltekit:navigation-end'));
+
+			const navigation = { from, to: url };
+			this.callbacks.after_navigate.forEach((fn) => fn(navigation));
 		}
 	}
 }
@@ -653,10 +779,11 @@ class Renderer {
 				});
 			} else {
 				if (this.router) {
-					this.router.goto(navigation_result.redirect, { replaceState: true }, [
-						...chain,
-						info.url.pathname
-					]);
+					this.router.goto(
+						new URL(navigation_result.redirect, info.url).href,
+						{ replaceState: true },
+						[...chain, info.url.pathname]
+					);
 				} else {
 					location.href = new URL(navigation_result.redirect, location.href).href;
 				}
@@ -678,7 +805,7 @@ class Renderer {
 
 		// opts must be passed if we're navigating
 		if (opts) {
-			const { hash, scroll, keepfocus } = opts;
+			const { scroll, keepfocus } = opts;
 
 			if (!keepfocus) {
 				getSelection()?.removeAllRanges();
@@ -689,7 +816,7 @@ class Renderer {
 			await tick();
 
 			if (this.autoscroll) {
-				const deep_linked = hash && document.getElementById(hash.slice(1));
+				const deep_linked = info.url.hash && document.getElementById(info.url.hash.slice(1));
 				if (scroll) {
 					scrollTo(scroll.x, scroll.y);
 				} else if (deep_linked) {
@@ -765,6 +892,11 @@ class Renderer {
 		});
 
 		this.started = true;
+
+		if (this.router) {
+			const navigation = { from: null, to: new URL(location.href) };
+			this.router.callbacks.after_navigate.forEach((fn) => fn(navigation));
+		}
 	}
 
 	/**