@sveltejs/kit 1.0.0-next.272 → 1.0.0-next.276

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,
@@ -83,6 +98,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 +115,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 +140,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 */
@@ -212,8 +218,12 @@ class Router {
 			// Removing the hash does a full page navigation in the browser, so make sure a hash is present
 			const [base, hash] = url.href.split('#');
 			if (hash !== undefined && base === location.href.split('#')[0]) {
+				// set this flag to distinguish between navigations triggered by
+				// clicking a hash link and those triggered by popstate
 				this.hash_navigating = true;
 
+				this.#update_scroll_positions();
+
 				const info = this.parse(url);
 				if (info) {
 					return this.renderer.update(info, [], false);
@@ -243,7 +253,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,
@@ -259,6 +269,8 @@ class Router {
 		});
 
 		addEventListener('hashchange', () => {
+			// if the hashchange happened as a result of clicking on a link,
+			// we need to update history, otherwise we have to leave it alone
 			if (this.hash_navigating) {
 				this.hash_navigating = false;
 				history.replaceState(
@@ -270,6 +282,10 @@ class Router {
 		});
 	}
 
+	#update_scroll_positions() {
+		scroll_positions[this.current_history_index] = scroll_state();
+	}
+
 	/**
 	 * Returns true if `url` has the same origin and basepath as the app
 	 * @param {URL} url
@@ -417,6 +433,8 @@ class Router {
 			});
 		}
 
+		this.#update_scroll_positions();
+
 		accepted();
 
 		if (!this.navigating) {
@@ -732,11 +750,12 @@ class Renderer {
 	 *   status: number;
 	 *   error: Error;
 	 *   nodes: Array<Promise<CSRComponent>>;
-	 *   url: URL;
 	 *   params: Record<string, string>;
 	 * }} selected
 	 */
-	async start({ status, error, nodes, url, params }) {
+	async start({ status, error, nodes, params }) {
+		const url = new URL(location.href);
+
 		/** @type {Array<import('./types').BranchNode | undefined>} */
 		const branch = [];
 
@@ -748,9 +767,6 @@ class Renderer {
 
 		let error_args;
 
-		// url.hash is empty when coming from the server
-		url.hash = window.location.hash;
-
 		try {
 			for (let i = 0; i < nodes.length; i += 1) {
 				const is_leaf = i === nodes.length - 1;
@@ -776,6 +792,7 @@ class Renderer {
 
 				if (props) {
 					node.uses.dependencies.add(url.href);
+					node.uses.url = true;
 				}
 
 				branch.push(node);
@@ -1289,7 +1306,9 @@ class Renderer {
 					/** @type {Record<string, any>} */
 					let props = {};
 
-					if (has_shadow && i === a.length - 1) {
+					const is_shadow_page = has_shadow && i === a.length - 1;
+
+					if (is_shadow_page) {
 						const res = await fetch(
 							`${url.pathname}${url.pathname.endsWith('/') ? '' : '/'}__data.json${url.search}`,
 							{
@@ -1327,25 +1346,31 @@ class Renderer {
 						});
 					}
 
-					if (node && node.loaded) {
-						if (node.loaded.fallthrough) {
-							return;
-						}
-						if (node.loaded.error) {
-							status = node.loaded.status;
-							error = node.loaded.error;
+					if (node) {
+						if (is_shadow_page) {
+							node.uses.url = true;
 						}
 
-						if (node.loaded.redirect) {
-							return {
-								redirect: node.loaded.redirect,
-								props: {},
-								state: this.current
-							};
-						}
+						if (node.loaded) {
+							if (node.loaded.fallthrough) {
+								return;
+							}
+							if (node.loaded.error) {
+								status = node.loaded.status;
+								error = node.loaded.error;
+							}
 
-						if (node.loaded.stuff) {
-							stuff_changed = true;
+							if (node.loaded.redirect) {
+								return {
+									redirect: node.loaded.redirect,
+									props: {},
+									state: this.current
+								};
+							}
+
+							if (node.loaded.stuff) {
+								stuff_changed = true;
+							}
 						}
 					}
 				} else {
@@ -1479,7 +1504,6 @@ class Renderer {
  *     status: number;
  *     error: Error;
  *     nodes: Array<Promise<import('types/internal').CSRComponent>>;
- *     url: URL;
  *     params: Record<string, string>;
  *   };
  * }} opts

package/assets/server/index.js

@@ -80,7 +80,7 @@ function is_pojo(body) {
 
 		// body could be a node Readable, but we don't want to import
 		// node built-ins, so we use duck typing
-		if (body._readableState && body._writableState && body._events) return false;
+		if (body._readableState && typeof body.pipe === 'function') return false;
 
 		// similarly, it could be a web ReadableStream
 		if (typeof ReadableStream !== 'undefined' && body instanceof ReadableStream) return false;
@@ -1209,7 +1209,6 @@ async function render_response({
 					.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'}
 		});
@@ -1881,7 +1880,7 @@ async function load_shadow_data(route, event, options, prerender) {
 		const mod = await route.shadow();
 
 		if (prerender && (mod.post || mod.put || mod.del || mod.patch)) {
-			throw new Error('Cannot prerender pages that have shadow endpoints with mutative methods');
+			throw new Error('Cannot prerender pages that have endpoints with mutative methods');
 		}
 
 		const method = normalize_request_method(event);
@@ -1988,7 +1987,7 @@ function validate_shadow_output(result) {
 	if (headers instanceof Headers) {
 		if (headers.has('set-cookie')) {
 			throw new Error(
-				'Shadow endpoint request handler cannot use Headers interface with Set-Cookie headers'
+				'Endpoint request handler cannot use Headers interface with Set-Cookie headers'
 			);
 		}
 	} else {
@@ -1996,7 +1995,7 @@ function validate_shadow_output(result) {
 	}
 
 	if (!is_pojo(body)) {
-		throw new Error('Body returned from shadow endpoint request handler must be a plain object');
+		throw new Error('Body returned from endpoint request handler must be a plain object');
 	}
 
 	return { status, headers, body };

package/dist/cli.js

@@ -998,7 +998,7 @@ async function launch(port, https) {
 	exec(`${cmd} ${https ? 'https' : 'http'}://localhost:${port}`);
 }
 
-const prog = sade('svelte-kit').version('1.0.0-next.272');
+const prog = sade('svelte-kit').version('1.0.0-next.276');
 
 prog
 	.command('dev')
@@ -1156,7 +1156,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.272'}\n`));
+	console.log($.bold().cyan(`\n  SvelteKit v${'1.0.0-next.276'}\n`));
 
 	const protocol = https ? 'https:' : 'http:';
 	const exposed = typeof host !== 'undefined' && host !== 'localhost' && host !== '127.0.0.1';

package/package.json

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