@sveltejs/kit 1.0.0-next.273 → 1.0.0-next.277

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,
@@ -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) {
@@ -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
@@ -736,11 +751,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 = [];
 
@@ -752,9 +768,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;
@@ -780,6 +793,7 @@ class Renderer {
 
 				if (props) {
 					node.uses.dependencies.add(url.href);
+					node.uses.url = true;
 				}
 
 				branch.push(node);
@@ -858,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;
 
@@ -937,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];
@@ -949,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);
@@ -974,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;
@@ -981,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: {
@@ -1001,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) {
@@ -1034,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
+			});
+		}
 	}
 
 	/**
@@ -1293,7 +1326,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}`,
 							{
@@ -1331,25 +1366,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.redirect) {
+								return {
+									redirect: node.loaded.redirect,
+									props: {},
+									state: this.current
+								};
+							}
 
-						if (node.loaded.stuff) {
-							stuff_changed = true;
+							if (node.loaded.stuff) {
+								stuff_changed = true;
+							}
 						}
 					}
 				} else {
@@ -1483,7 +1524,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

@@ -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'}
 		});
@@ -1222,12 +1221,15 @@ async function render_response({
 	`;
 
 	if (options.amp) {
+		// inline_style contains CSS files (i.e. `import './styles.css'`)
+		// rendered.css contains the CSS from `<style>` tags in Svelte components
+		const styles = `${inlined_style}\n${rendered.css.code}`;
 		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>
 
-		<style amp-custom>${inlined_style}\n${rendered.css.code}</style>`;
+		<style amp-custom>${styles}</style>`;
 
 		if (options.service_worker) {
 			head +=
@@ -1259,6 +1261,8 @@ async function render_response({
 				}
 
 				if (styles.has(dep)) {
+					// don't load stylesheets that are already inlined
+					// include them in disabled state so that Vite can detect them and doesn't try to add them
 					attributes.push('disabled', 'media="(max-width: 0)"');
 				}
 

package/dist/chunks/index.js

@@ -108,6 +108,7 @@ async function create_plugin(config, cwd) {
 									entry: url.endsWith('.svelte') ? url : url + '?import',
 									css: [],
 									js: [],
+									// in dev we inline all styles to avoid FOUC
 									styles
 								};
 							};
@@ -422,6 +423,11 @@ async function dev({ cwd, port, host, https, config }) {
 		plugins: [
 			svelte({
 				extensions: config.extensions,
+				// In AMP mode, we know that there are no conditional component imports. In that case, we
+				// don't need to include CSS for components that are imported but unused, so we can just
+				// include rendered CSS.
+				// This would also apply if hydrate and router are both false, but we don't know if one
+				// has been enabled at the page level, so we don't do anything there.
 				emitCss: !config.kit.amp,
 				compilerOptions: {
 					hydratable: !!config.kit.browser.hydrate

package/dist/chunks/index3.js

@@ -211,6 +211,11 @@ async function build_client({
 		plugins: [
 			svelte({
 				extensions: config.extensions,
+				// In AMP mode, we know that there are no conditional component imports. In that case, we
+				// don't need to include CSS for components that are imported but unused, so we can just
+				// include rendered CSS.
+				// This would also apply if hydrate and router are both false, but we don't know if one
+				// has been enabled at the page level, so we don't do anything there.
 				emitCss: !config.kit.amp,
 				compilerOptions: {
 					hydratable: !!config.kit.browser.hydrate

package/dist/chunks/index4.js

@@ -13,6 +13,8 @@ function generate_manifest(
 	routes = build_data.manifest_data.routes,
 	format = 'esm'
 ) {
+	/** @typedef {{ index: number, path: string }} LookupEntry */
+	/** @type {Map<string, LookupEntry>} */
 	const bundled_nodes = new Map();
 
 	// 0 and 1 are special, they correspond to the root layout and root error nodes
@@ -52,6 +54,9 @@ function generate_manifest(
 		assets.push(build_data.service_worker);
 	}
 
+	/** @param {string} id */
+	const get_index = (id) => id && /** @type {LookupEntry} */ (bundled_nodes.get(id)).index;
+
 	// prettier-ignore
 	return `{
 		appDir: ${s(build_data.app_dir)},
@@ -71,8 +76,8 @@ function generate_manifest(
 							params: ${get_params(route.params)},
 							path: ${route.path ? s(route.path) : null},
 							shadow: ${route.shadow ? importer(`${relative_path}/${build_data.server.vite_manifest[route.shadow].file}`) : null},
-							a: ${s(route.a.map(component => component && bundled_nodes.get(component).index))},
-							b: ${s(route.b.map(component => component && bundled_nodes.get(component).index))}
+							a: ${s(route.a.map(get_index))},
+							b: ${s(route.b.map(get_index))}
 						}`.replace(/^\t\t/gm, '');
 					} else {
 						if (!build_data.server.vite_manifest[route.file]) {

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.273');
+const prog = sade('svelte-kit').version('1.0.0-next.277');
 
 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.273'}\n`));
+	console.log($.bold().cyan(`\n  SvelteKit v${'1.0.0-next.277'}\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.273",
+  "version": "1.0.0-next.277",
   "repository": {
     "type": "git",
     "url": "https://github.com/sveltejs/kit",