@sveltejs/kit 1.0.0-next.275 → 1.0.0-next.279

package/assets/app/navigation.js

@@ -45,8 +45,8 @@ async function invalidate_(resource) {
 /**
  * @type {import('$app/navigation').prefetch}
  */
-function prefetch_(href) {
-	return router.prefetch(new URL(href, get_base_uri(document)));
+async function prefetch_(href) {
+	await router.prefetch(new URL(href, get_base_uri(document)));
 }
 
 /**

package/assets/client/start.js

@@ -22,6 +22,21 @@ function normalize_path(path, trailing_slash) {
 	return path;
 }
 
+// We track the scroll position associated with each history entry in sessionStorage,
+// rather than on history.state itself, because when navigation is driven by
+// popstate it's too late to update the scroll position associated with the
+// state we're navigating from
+const SCROLL_KEY = 'sveltekit:scroll';
+
+/** @typedef {{ x: number, y: number }} ScrollPosition */
+/** @type {Record<number, ScrollPosition>} */
+let scroll_positions = {};
+try {
+	scroll_positions = JSON.parse(sessionStorage[SCROLL_KEY]);
+} catch {
+	// do nothing
+}
+
 function scroll_state() {
 	return {
 		x: pageXOffset,
@@ -54,8 +69,8 @@ class Router {
 	/**
 	 * @param {{
 	 *    base: string;
-	 *    routes: import('types/internal').CSRRoute[];
-	 *    trailing_slash: import('types/internal').TrailingSlash;
+	 *    routes: import('types').CSRRoute[];
+	 *    trailing_slash: import('types').TrailingSlash;
 	 *    renderer: import('./renderer').Renderer
 	 * }} opts
 	 */
@@ -71,6 +86,7 @@ class Router {
 		renderer.router = this;
 
 		this.enabled = true;
+		this.initialized = false;
 
 		// make it possible to reset focus
 		document.body.setAttribute('tabindex', '-1');
@@ -83,6 +99,11 @@ class Router {
 			history.replaceState({ ...history.state, 'sveltekit:index': 0 }, '', location.href);
 		}
 
+		// if we reload the page, or Cmd-Shift-T back to it,
+		// recover scroll position
+		const scroll = scroll_positions[this.current_history_index];
+		if (scroll) scrollTo(scroll.x, scroll.y);
+
 		this.hash_navigating = false;
 
 		this.callbacks = {
@@ -95,9 +116,7 @@ class Router {
 	}
 
 	init_listeners() {
-		if ('scrollRestoration' in history) {
-			history.scrollRestoration = 'manual';
-		}
+		history.scrollRestoration = 'manual';
 
 		// Adopted from Nuxt.js
 		// Reset scrollRestoration to auto when leaving page, allowing page reload
@@ -122,28 +141,16 @@ class Router {
 			}
 		});
 
-		// Setting scrollRestoration to manual again when returning to this page.
-		addEventListener('load', () => {
-			history.scrollRestoration = 'manual';
-		});
-
-		// There's no API to capture the scroll location right before the user
-		// hits the back/forward button, so we listen for scroll events
+		addEventListener('visibilitychange', () => {
+			if (document.visibilityState === 'hidden') {
+				this.#update_scroll_positions();
 
-		/** @type {NodeJS.Timeout} */
-		let scroll_timer;
-		addEventListener('scroll', () => {
-			clearTimeout(scroll_timer);
-			scroll_timer = setTimeout(() => {
-				// Store the scroll location in the history
-				// This will persist even if we navigate away from the site and come back
-				const new_state = {
-					...(history.state || {}),
-					'sveltekit:scroll': scroll_state()
-				};
-				history.replaceState(new_state, document.title, window.location.href);
-				// iOS scroll event intervals happen between 30-150ms, sometimes around 200ms
-			}, 200);
+				try {
+					sessionStorage[SCROLL_KEY] = JSON.stringify(scroll_positions);
+				} catch {
+					// do nothing
+				}
+			}
 		});
 
 		/** @param {Event} event */
@@ -216,10 +223,9 @@ class Router {
 				// clicking a hash link and those triggered by popstate
 				this.hash_navigating = true;
 
-				const info = this.parse(url);
-				if (info) {
-					return this.renderer.update(info, [], false);
-				}
+				this.#update_scroll_positions();
+				this.renderer.update_page_store(new URL(url.href));
+
 				return;
 			}
 
@@ -245,7 +251,7 @@ class Router {
 
 				this._navigate({
 					url: new URL(location.href),
-					scroll: event.state['sveltekit:scroll'],
+					scroll: scroll_positions[event.state['sveltekit:index']],
 					keepfocus: false,
 					chain: [],
 					details: null,
@@ -272,6 +278,12 @@ class Router {
 				);
 			}
 		});
+
+		this.initialized = true;
+	}
+
+	#update_scroll_positions() {
+		scroll_positions[this.current_history_index] = scroll_state();
 	}
 
 	/**
@@ -294,7 +306,8 @@ class Router {
 				id: url.pathname + url.search,
 				routes: this.routes.filter(([pattern]) => pattern.test(path)),
 				url,
-				path
+				path,
+				initial: !this.initialized
 			};
 		}
 	}
@@ -344,7 +357,7 @@ class Router {
 
 	/**
 	 * @param {URL} url
-	 * @returns {Promise<import('./types').NavigationResult>}
+	 * @returns {Promise<import('./types').NavigationResult | undefined>}
 	 */
 	async prefetch(url) {
 		const info = this.parse(url);
@@ -421,6 +434,8 @@ class Router {
 			});
 		}
 
+		this.#update_scroll_positions();
+
 		accepted();
 
 		if (!this.navigating) {
@@ -466,7 +481,7 @@ function coalesce_to_error(err) {
 
 /**
  * Hash using djb2
- * @param {import('types/hooks').StrictBody} value
+ * @param {import('types').StrictBody} value
  */
 function hash(value) {
 	let hash = 5381;
@@ -482,8 +497,8 @@ function hash(value) {
 }
 
 /**
- * @param {import('types/page').LoadOutput} loaded
- * @returns {import('types/internal').NormalizedLoadOutput}
+ * @param {import('types').LoadOutput} loaded
+ * @returns {import('types').NormalizedLoadOutput}
  */
 function normalize(loaded) {
 	const has_error_status =
@@ -543,11 +558,11 @@ function normalize(loaded) {
 		);
 	}
 
-	return /** @type {import('types/internal').NormalizedLoadOutput} */ (loaded);
+	return /** @type {import('types').NormalizedLoadOutput} */ (loaded);
 }
 
 /**
- * @typedef {import('types/internal').CSRComponent} CSRComponent
+ * @typedef {import('types').CSRComponent} CSRComponent
  * @typedef {{ from: URL; to: URL }} Navigating
  */
 
@@ -690,7 +705,7 @@ class Renderer {
 		/** @type {Map<string, import('./types').NavigationResult>} */
 		this.cache = new Map();
 
-		/** @type {{id: string | null, promise: Promise<import('./types').NavigationResult> | null}} */
+		/** @type {{id: string | null, promise: Promise<import('./types').NavigationResult | undefined> | null}} */
 		this.loading = {
 			id: null,
 			promise: null
@@ -857,6 +872,11 @@ class Renderer {
 		const token = (this.token = {});
 		let navigation_result = await this._get_navigation_result(info, no_cache);
 
+		if (!navigation_result) {
+			location.href = info.url.href;
+			return;
+		}
+
 		// abort if user navigated during update
 		if (token !== this.token) return;
 
@@ -936,6 +956,10 @@ class Renderer {
 		this.autoscroll = true;
 		this.updating = false;
 
+		if (navigation_result.props.page) {
+			this.page = navigation_result.props.page;
+		}
+
 		if (!this.router) return;
 
 		const leaf_node = navigation_result.state.branch[navigation_result.state.branch.length - 1];
@@ -948,7 +972,7 @@ class Renderer {
 
 	/**
 	 * @param {import('./types').NavigationInfo} info
-	 * @returns {Promise<import('./types').NavigationResult>}
+	 * @returns {Promise<import('./types').NavigationResult | undefined>}
 	 */
 	load(info) {
 		this.loading.promise = this._get_navigation_result(info, false);
@@ -973,6 +997,12 @@ class Renderer {
 		return this.invalidating;
 	}
 
+	/** @param {URL} url */
+	update_page_store(url) {
+		this.stores.page.set({ ...this.page, url });
+		this.stores.page.notify();
+	}
+
 	/** @param {import('./types').NavigationResult} result */
 	_init(result) {
 		this.current = result.state;
@@ -980,6 +1010,8 @@ class Renderer {
 		const style = document.querySelector('style[data-svelte]');
 		if (style) style.remove();
 
+		this.page = result.props.page;
+
 		this.root = new this.Root({
 			target: this.target,
 			props: {
@@ -1000,7 +1032,7 @@ class Renderer {
 	/**
 	 * @param {import('./types').NavigationInfo} info
 	 * @param {boolean} no_cache
-	 * @returns {Promise<import('./types').NavigationResult>}
+	 * @returns {Promise<import('./types').NavigationResult | undefined>}
 	 */
 	async _get_navigation_result(info, no_cache) {
 		if (this.loading.id === info.id && this.loading.promise) {
@@ -1033,11 +1065,13 @@ class Renderer {
 			if (result) return result;
 		}
 
-		return await this._load_error({
-			status: 404,
-			error: new Error(`Not found: ${info.url.pathname}`),
-			url: info.url
-		});
+		if (info.initial) {
+			return await this._load_error({
+				status: 404,
+				error: new Error(`Not found: ${info.url.pathname}`),
+				url: info.url
+			});
+		}
 	}
 
 	/**
@@ -1174,7 +1208,7 @@ class Renderer {
 		if (module.load) {
 			const { started } = this;
 
-			/** @type {import('types/page').LoadInput | import('types/page').ErrorLoadInput} */
+			/** @type {import('types').LoadInput | import('types').ErrorLoadInput} */
 			const load_input = {
 				params: uses_params,
 				props: props || {},
@@ -1209,8 +1243,8 @@ class Renderer {
 			}
 
 			if (error) {
-				/** @type {import('types/page').ErrorLoadInput} */ (load_input).status = status;
-				/** @type {import('types/page').ErrorLoadInput} */ (load_input).error = error;
+				/** @type {import('types').ErrorLoadInput} */ (load_input).status = status;
+				/** @type {import('types').ErrorLoadInput} */ (load_input).error = error;
 			}
 
 			const loaded = await module.load.call(null, load_input);
@@ -1485,11 +1519,11 @@ class Renderer {
  *   session: any;
  *   route: boolean;
  *   spa: boolean;
- *   trailing_slash: import('types/internal').TrailingSlash;
+ *   trailing_slash: import('types').TrailingSlash;
  *   hydrate: {
  *     status: number;
  *     error: Error;
- *     nodes: Array<Promise<import('types/internal').CSRComponent>>;
+ *     nodes: Array<Promise<import('types').CSRComponent>>;
  *     params: Record<string, string>;
  *   };
  * }} opts