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

package/assets/kit.js

@@ -1628,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]);
 			}
@@ -1651,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 */

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

package/dist/chunks/index5.js

@@ -256,9 +256,22 @@ function crawl(html) {
 							} else if (name === 'src') {
 								hrefs.push(value);
 							} else if (name === 'srcset') {
-								const candidates = value.split(',');
+								const candidates = [];
+								let insideURL = true;
+								value = value.trim();
+								for (let i = 0; i < value.length; i++) {
+									if (value[i] === ',' && (!insideURL || (insideURL && value[i + 1] === ' '))) {
+										candidates.push(value.slice(0, i));
+										value = value.substring(i + 1).trim();
+										i = 0;
+										insideURL = true;
+									} else if (value[i] === ' ') {
+										insideURL = false;
+									}
+								}
+								candidates.push(value);
 								for (const candidate of candidates) {
-									const src = candidate.trim().split(WHITESPACE)[0];
+									const src = candidate.split(WHITESPACE)[0];
 									hrefs.push(src);
 								}
 							}

package/dist/cli.js

@@ -870,7 +870,7 @@ async function launch(port, https) {
 	exec(`${cmd} ${https ? 'https' : 'http'}://localhost:${port}`);
 }
 
-const prog = sade('svelte-kit').version('1.0.0-next.225');
+const prog = sade('svelte-kit').version('1.0.0-next.227');
 
 prog
 	.command('dev')
@@ -1022,7 +1022,7 @@ async function check_port(port) {
 function welcome({ port, host, https, open, loose, allow, cwd }) {
 	if (open) launch(port, https);
 
-	console.log($.bold().cyan(`\n  SvelteKit v${'1.0.0-next.225'}\n`));
+	console.log($.bold().cyan(`\n  SvelteKit v${'1.0.0-next.227'}\n`));
 
 	const protocol = https ? 'https:' : 'http:';
 	const exposed = typeof host !== 'undefined' && host !== 'localhost' && host !== '127.0.0.1';

package/dist/ssr.js

@@ -1558,8 +1558,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]);
 			}
@@ -1581,12 +1582,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 */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltejs/kit",
-  "version": "1.0.0-next.225",
+  "version": "1.0.0-next.227",
   "repository": {
     "type": "git",
     "url": "https://github.com/sveltejs/kit",

package/types/ambient-modules.d.ts

@@ -72,6 +72,19 @@ declare module '$app/navigation' {
 	 * Returns a Promise that resolves when the routes have been prefetched.
 	 */
 	export function prefetchRoutes(routes?: string[]): Promise<any>;
+
+	/**
+	 * A navigation interceptor that triggers before we navigate to a new route.
+	 * This is helpful if we want to conditionally prevent a navigation from completing or lookup the upcoming url.
+	 */
+	export function beforeNavigate(
+		fn: ({ from, to, cancel }: { from: URL; to: URL | null; cancel: () => void }) => void
+	): any;
+
+	/**
+	 * A lifecycle function that runs when the page mounts, and also whenever SvelteKit navigates to a new URL but stays on this component.
+	 */
+	export function afterNavigate(fn: ({ from, to }: { from: URL | null; to: URL }) => void): any;
 }
 
 declare module '$app/paths' {

package/types/helper.d.ts

@@ -1,5 +1,5 @@
 interface ReadOnlyFormData {
-	get(key: string): string;
+	get(key: string): string | null;
 	getAll(key: string): string[];
 	has(key: string): boolean;
 	entries(): Generator<[string, string], void>;