@sveltejs/kit 1.0.0-next.211 → 1.0.0-next.215

package/assets/kit.js

@@ -598,7 +598,7 @@ async function render_response({
 				navigating: writable(null),
 				session
 			},
-			page: { url, params },
+			page: { url, params, status, error },
 			components: branch.map(({ node }) => node.module.default)
 		};
 

package/assets/runtime/app/navigation.js

@@ -1,4 +1,4 @@
-import { router as router$1 } from '../internal/singletons.js';
+import { renderer, router as router$1 } from '../internal/singletons.js';
 import { g as get_base_uri } from '../chunks/utils.js';
 
 const router = /** @type {import('../client/router').Router} */ (router$1);
@@ -12,11 +12,21 @@ function guard(name) {
 	};
 }
 
+const disableScrollHandling = import.meta.env.SSR
+	? guard('disableScrollHandling')
+	: disableScrollHandling_;
 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_;
 
+/**
+ * @type {import('$app/navigation').goto}
+ */
+async function disableScrollHandling_() {
+	renderer.disable_scroll_handling();
+}
+
 /**
  * @type {import('$app/navigation').goto}
  */
@@ -52,4 +62,4 @@ async function prefetchRoutes_(pathnames) {
 	await Promise.all(promises);
 }
 
-export { goto, invalidate, prefetch, prefetchRoutes };
+export { disableScrollHandling, goto, invalidate, prefetch, prefetchRoutes };

package/assets/runtime/app/stores.js

@@ -57,7 +57,7 @@ const navigating = {
 };
 
 /** @param {string} verb */
-const error = (verb) => {
+const throw_error = (verb) => {
 	throw new Error(
 		ssr
 			? `Can only ${verb} session store in browser`
@@ -77,8 +77,8 @@ const session = {
 
 		return store.subscribe(fn);
 	},
-	set: () => error('set'),
-	update: () => error('update')
+	set: () => throw_error('set'),
+	update: () => throw_error('update')
 };
 
 export { getStores, navigating, page, session, stores };

package/assets/runtime/internal/singletons.js

@@ -1,9 +1,18 @@
 /** @type {import('./router').Router?} */
 let router;
 
-/** @param {import('./router').Router?} _ */
-function init(_) {
-	router = _;
+/** @type {import('./renderer').Renderer} */
+let renderer;
+
+/**
+ * @param {{
+ *   router: import('./router').Router?;
+ *   renderer: import('./renderer').Renderer;
+ * }} opts
+ */
+function init(opts) {
+	router = opts.router;
+	renderer = opts.renderer;
 }
 
-export { init, router };
+export { init, renderer, router };

package/assets/runtime/internal/start.js

@@ -162,16 +162,17 @@ class Router {
 
 			if (!this.owns(url)) return;
 
-			const noscroll = a.hasAttribute('sveltekit:noscroll');
+			// 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.
+				// Also make a delay, otherwise the browser default behaviour would not kick in
+				setTimeout(() => history.pushState({}, '', url.href));
+				return;
+			}
 
-			const i1 = url_string.indexOf('#');
-			const i2 = location.href.indexOf('#');
-			const u1 = i1 >= 0 ? url_string.substring(0, i1) : url_string;
-			const u2 = i2 >= 0 ? location.href.substring(0, i2) : location.href;
 			history.pushState({}, '', url.href);
-			if (u1 === u2) {
-				window.dispatchEvent(new HashChangeEvent('hashchange'));
-			}
+
+			const noscroll = a.hasAttribute('sveltekit:noscroll');
 			this._navigate(url, noscroll ? scroll_state() : null, false, [], url.hash);
 			event.preventDefault();
 		});
@@ -466,6 +467,8 @@ class Renderer {
 		this.session_id = 1;
 		this.invalid = new Set();
 		this.invalidating = null;
+		this.autoscroll = true;
+		this.updating = false;
 
 		/** @type {import('./types').NavigationState} */
 		this.current = {
@@ -508,6 +511,16 @@ class Renderer {
 		ready = true;
 	}
 
+	disable_scroll_handling() {
+		if (import.meta.env.DEV && this.started && !this.updating) {
+			throw new Error('Can only disable scroll handling during navigation');
+		}
+
+		if (this.updating || !this.started) {
+			this.autoscroll = false;
+		}
+	}
+
 	/**
 	 * @param {{
 	 *   status: number;
@@ -563,7 +576,7 @@ class Renderer {
 
 			result = error_args
 				? await this._load_error(error_args)
-				: await this._get_navigation_result_from_branch({ url, params, branch });
+				: await this._get_navigation_result_from_branch({ url, params, branch, status, error });
 		} catch (e) {
 			if (error) throw e;
 
@@ -637,6 +650,8 @@ class Renderer {
 			}
 		}
 
+		this.updating = true;
+
 		if (this.started) {
 			this.current = navigation_result.state;
 
@@ -655,26 +670,9 @@ class Renderer {
 				document.body.focus();
 			}
 
-			const old_page_y_offset = Math.round(pageYOffset);
-			const old_max_page_y_offset = document.documentElement.scrollHeight - innerHeight;
-
 			await 0;
 
-			const new_page_y_offset = Math.round(pageYOffset);
-			const new_max_page_y_offset = document.documentElement.scrollHeight - innerHeight;
-
-			// After `await 0`, the `onMount()` function in the component executed.
-			// Check if no scrolling happened on mount.
-			const no_scroll_happened =
-				// In most cases, we can compare whether `pageYOffset` changed between navigation
-				new_page_y_offset === Math.min(old_page_y_offset, new_max_page_y_offset) ||
-				// But if the page is scrolled to/near the bottom, the browser would also scroll
-				// to/near the bottom of the new page on navigation. Since we can't detect when this
-				// behaviour happens, we naively compare by the y offset from the bottom of the page.
-				old_max_page_y_offset - old_page_y_offset === new_max_page_y_offset - new_page_y_offset;
-
-			// If there was no scrolling, we run on our custom scroll handling
-			if (no_scroll_happened) {
+			if (this.autoscroll) {
 				const deep_linked = hash && document.getElementById(hash.slice(1));
 				if (scroll) {
 					scrollTo(scroll.x, scroll.y);
@@ -694,6 +692,8 @@ class Renderer {
 
 		this.loading.promise = null;
 		this.loading.id = null;
+		this.autoscroll = true;
+		this.updating = false;
 
 		if (!this.router) return;
 
@@ -800,9 +800,11 @@ class Renderer {
 	 *   url: URL;
 	 *   params: Record<string, string>;
 	 *   branch: Array<import('./types').BranchNode | undefined>;
+	 *   status: number;
+	 *   error?: Error;
 	 * }} opts
 	 */
-	async _get_navigation_result_from_branch({ url, params, branch }) {
+	async _get_navigation_result_from_branch({ url, params, branch, status, error }) {
 		const filtered = /** @type {import('./types').BranchNode[] } */ (branch.filter(Boolean));
 		const redirect = filtered.find((f) => f.loaded && f.loaded.redirect);
 
@@ -826,7 +828,7 @@ class Renderer {
 		}
 
 		if (!this.current.url || url.href !== this.current.url.href) {
-			result.props.page = { url, params };
+			result.props.page = { url, params, status, error };
 
 			// TODO remove this for 1.0
 			/**
@@ -1120,12 +1122,12 @@ class Renderer {
 			}
 		}
 
-		return await this._get_navigation_result_from_branch({ url, params, branch });
+		return await this._get_navigation_result_from_branch({ url, params, branch, status, error });
 	}
 
 	/**
 	 * @param {{
-	 *   status?: number;
+	 *   status: number;
 	 *   error: Error;
 	 *   url: URL;
 	 * }} opts
@@ -1153,7 +1155,7 @@ class Renderer {
 			})
 		];
 
-		return await this._get_navigation_result_from_branch({ url, params, branch });
+		return await this._get_navigation_result_from_branch({ url, params, branch, status, error });
 	}
 }
 
@@ -1200,7 +1202,7 @@ async function start({ paths, target, session, route, spa, trailing_slash, hydra
 		  })
 		: null;
 
-	init(router);
+	init({ router, renderer });
 	set_paths(paths);
 
 	if (hydrate) await renderer.start(hydrate);

package/dist/chunks/index.js

@@ -4540,14 +4540,16 @@ function find_deps(node, deps) {
 	}
 }
 
-/** @typedef {{
+/**
+ * @typedef {{
  *   cwd: string,
  *   port: number,
  *   host?: string,
  *   https: boolean,
  *   config: import('types/config').ValidatedConfig
- * }} Options */
-/** @typedef {import('types/internal').SSRComponent} SSRComponent */
+ * }} Options
+ * @typedef {import('types/internal').SSRComponent} SSRComponent
+ */
 
 /** @param {Options} opts */
 async function dev({ cwd, port, host, https, config }) {
@@ -4590,6 +4592,13 @@ async function dev({ cwd, port, host, https, config }) {
 				$lib: config.kit.files.lib
 			}
 		},
+		build: {
+			rollupOptions: {
+				// Vite dependency crawler needs an explicit JS entry point
+				// eventhough server otherwise works without it
+				input: path__default.resolve(`${output}/runtime/internal/start.js`)
+			}
+		},
 		plugins: [
 			svelte({
 				extensions: config.extensions,

package/dist/chunks/index2.js

@@ -686,6 +686,9 @@ function comparator(a, b) {
 		if (!b_sub_part) return -1;
 
 		if (a_sub_part.rest && b_sub_part.rest) {
+			if (a.is_page !== b.is_page) {
+				return a.is_page ? 1 : -1;
+			}
 			// sort alphabetically
 			return a_sub_part.content < b_sub_part.content ? -1 : 1;
 		}

package/dist/chunks/index3.js

@@ -1,11 +1,11 @@
-import fs__default, { writeFileSync } from 'fs';
+import fs__default from 'fs';
 import path__default from 'path';
-import { p as print_config_conflicts, c as copy_assets, b as posixify, r as resolve_entry, a as rimraf, m as mkdirp } from '../cli.js';
+import { p as print_config_conflicts, c as copy_assets, b as posixify, r as resolve_entry, m as mkdirp, a as rimraf } from '../cli.js';
 import { d as deep_merge, a as create_app, c as create_manifest_data } from './index2.js';
 import { S as SVELTE_KIT } from './constants.js';
 import { g as generate_manifest } from './index4.js';
-import { s } from './misc.js';
 import vite from 'vite';
+import { s } from './misc.js';
 import { svelte } from '@sveltejs/vite-plugin-svelte';
 import 'sade';
 import 'child_process';
@@ -249,11 +249,12 @@ async function build_client({
  * @param {{
  *   runtime: string,
  *   hooks: string,
- *   config: import('types/config').ValidatedConfig
+ *   config: import('types/config').ValidatedConfig,
+ *   has_service_worker: boolean
  * }} opts
  * @returns
  */
-const template = ({ config, hooks, runtime }) => `
+const template = ({ config, hooks, runtime, has_service_worker }) => `
 import { respond } from '${runtime}';
 import root from './generated/root.svelte';
 import { set_paths, assets, base } from './runtime/paths.js';
@@ -309,11 +310,7 @@ export class App {
 			prerender: ${config.kit.prerender.enabled},
 			read,
 			root,
-			service_worker: ${
-				config.kit.files.serviceWorker && config.kit.serviceWorker.register
-					? "'/service-worker.js'"
-					: 'null'
-			},
+			service_worker: ${has_service_worker ? "'/service-worker.js'" : 'null'},
 			router: ${s(config.kit.router)},
 			ssr: ${s(config.kit.ssr)},
 			target: ${s(config.kit.target)},
@@ -356,12 +353,25 @@ export class App {
  *   manifest_data: import('types/internal').ManifestData
  *   build_dir: string;
  *   output_dir: string;
+ *   service_worker_entry_file: string | null;
+ *   service_worker_register: boolean;
  * }} options
  * @param {string} runtime
+ * @param {{ vite_manifest: import('vite').Manifest, assets: import('rollup').OutputAsset[] }} client
  */
 async function build_server(
-	{ cwd, assets_base, config, manifest_data, build_dir, output_dir },
-	runtime
+	{
+		cwd,
+		assets_base,
+		config,
+		manifest_data,
+		build_dir,
+		output_dir,
+		service_worker_entry_file,
+		service_worker_register
+	},
+	runtime,
+	client
 ) {
 	let hooks_file = resolve_entry(config.kit.files.hooks);
 	if (!hooks_file || !fs__default.existsSync(hooks_file)) {
@@ -407,7 +417,8 @@ async function build_server(
 		template({
 			config,
 			hooks: app_relative(hooks_file),
-			runtime
+			runtime,
+			has_service_worker: service_worker_register && !!service_worker_entry_file
 		})
 	);
 
@@ -482,10 +493,42 @@ async function build_server(
 		}
 	});
 
+	/** @type {import('vite').Manifest} */
+	const vite_manifest = JSON.parse(fs__default.readFileSync(`${output_dir}/server/manifest.json`, 'utf-8'));
+
+	const styles_lookup = new Map();
+	if (config.kit.amp) {
+		client.assets.forEach((asset) => {
+			if (asset.fileName.endsWith('.css')) {
+				styles_lookup.set(asset.fileName, asset.source);
+			}
+		});
+	}
+
+	mkdirp(`${output_dir}/server/nodes`);
+	manifest_data.components.forEach((component, i) => {
+		const file = `${output_dir}/server/nodes/${i}.js`;
+
+		const js = new Set();
+		const css = new Set();
+		find_deps(component, client.vite_manifest, js, css);
+
+		const styles = config.kit.amp && Array.from(css).map((file) => styles_lookup.get(file));
+
+		const node = `import * as module from '../${vite_manifest[component].file}';
+			export { module };
+			export const entry = '${client.vite_manifest[component].file}';
+			export const js = ${JSON.stringify(Array.from(js))};
+			export const css = ${JSON.stringify(Array.from(css))};
+			${styles ? `export const styles = ${s(styles)}` : ''}
+			`.replace(/^\t\t\t/gm, '');
+
+		fs__default.writeFileSync(file, node);
+	});
+
 	return {
 		chunks,
-		/** @type {import('vite').Manifest} */
-		vite_manifest: JSON.parse(fs__default.readFileSync(`${output_dir}/server/manifest.json`, 'utf-8')),
+		vite_manifest,
 		methods: get_methods(cwd, chunks, manifest_data)
 	};
 }
@@ -564,37 +607,7 @@ async function build(config, { cwd = process.cwd(), runtime = './kit.js' } = {})
 	};
 
 	const client = await build_client(options);
-	const server = await build_server(options, runtime);
-
-	const styles_lookup = new Map();
-	if (options.config.kit.amp) {
-		client.assets.forEach((asset) => {
-			if (asset.fileName.endsWith('.css')) {
-				styles_lookup.set(asset.fileName, asset.source);
-			}
-		});
-	}
-
-	mkdirp(`${output_dir}/server/nodes`);
-	options.manifest_data.components.forEach((component, i) => {
-		const file = `${output_dir}/server/nodes/${i}.js`;
-
-		const js = new Set();
-		const css = new Set();
-		find_deps(component, client.vite_manifest, js, css);
-
-		const styles = config.kit.amp && Array.from(css).map((file) => styles_lookup.get(file));
-
-		const node = `import * as module from '../${server.vite_manifest[component].file}';
-			export { module };
-			export const entry = '${client.vite_manifest[component].file}';
-			export const js = ${JSON.stringify(Array.from(js))};
-			export const css = ${JSON.stringify(Array.from(css))};
-			${styles ? `export const styles = ${s(styles)}` : ''}
-			`.replace(/^\t\t\t/gm, '');
-
-		writeFileSync(file, node);
-	});
+	const server = await build_server(options, runtime, client);
 
 	if (options.service_worker_entry_file) {
 		if (config.kit.paths.assets) {

package/dist/chunks/index5.js

@@ -270,7 +270,7 @@ async function prerender({ cwd, out, log, config, build_data, fallback, all }) {
 
 		const rendered = await app.render(
 			{
-				url: `${config.kit.protocol || 'sveltekit'}://${config.kit.host || 'prerender'}${path}`,
+				url: `${config.kit.protocol || 'http'}://${config.kit.host || 'prerender'}${path}`,
 				method: 'GET',
 				headers: {},
 				rawBody: null
@@ -417,7 +417,7 @@ async function prerender({ cwd, out, log, config, build_data, fallback, all }) {
 	if (fallback) {
 		const rendered = await app.render(
 			{
-				url: `${config.kit.host || 'sveltekit'}://${config.kit.host || 'prerender'}/[fallback]`,
+				url: `${config.kit.protocol || 'http'}://${config.kit.host || 'prerender'}/[fallback]`,
 				method: 'GET',
 				headers: {},
 				rawBody: null

package/dist/cli.js

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

package/dist/ssr.js

@@ -567,7 +567,7 @@ async function render_response({
 				navigating: writable(null),
 				session
 			},
-			page: { url, params },
+			page: { url, params, status, error },
 			components: branch.map(({ node }) => node.module.default)
 		};
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltejs/kit",
-  "version": "1.0.0-next.211",
+  "version": "1.0.0-next.215",
   "repository": {
     "type": "git",
     "url": "https://github.com/sveltejs/kit",
@@ -15,6 +15,7 @@
     "vite": "^2.7.2"
   },
   "devDependencies": {
+    "@playwright/test": "^1.17.1",
     "@rollup/plugin-replace": "^3.0.0",
     "@types/amphtml-validator": "^1.0.1",
     "@types/cookie": "^0.4.1",
@@ -24,6 +25,7 @@
     "@types/sade": "^1.7.3",
     "amphtml-validator": "^1.0.35",
     "cookie": "^0.4.1",
+    "cross-env": "^7.0.3",
     "devalue": "^2.0.1",
     "eslint": "^8.3.0",
     "kleur": "^4.1.4",
@@ -85,6 +87,10 @@
     "test": "npm run test:unit && npm run test:packaging && npm run test:integration",
     "test:unit": "uvu src \"(spec\\.js|test[\\\\/]index\\.js)\" -i packaging",
     "test:packaging": "uvu src/packaging \"(spec\\.js|test[\\\\/]index\\.js)\"",
-    "test:integration": "uvu test test.js"
+    "test:integration": "pnpm test:integration:amp && pnpm test:integration:basics && pnpm test:integration:options && pnpm test:integration:options-2",
+    "test:integration:amp": "cd test/apps/amp && pnpm test",
+    "test:integration:basics": "cd test/apps/basics && pnpm test",
+    "test:integration:options": "cd test/apps/options && pnpm test",
+    "test:integration:options-2": "cd test/apps/options-2 && pnpm test"
   }
 }

package/types/ambient-modules.d.ts

@@ -26,6 +26,11 @@ declare module '$app/env' {
 }
 
 declare module '$app/navigation' {
+	/**
+	 * Disable SvelteKit's built-in scroll handling for the current navigation, in case you need to manually control the scroll position.
+	 * This is generally discouraged, since it breaks user expectations.
+	 */
+	export function disableScrollHandling(): void;
 	/**
 	 * Returns a Promise that resolves when SvelteKit navigates (or fails to navigate, in which case the promise rejects) to the specified href.
 	 *
@@ -93,6 +98,8 @@ declare module '$app/stores' {
 		page: Readable<{
 			url: URL;
 			params: Record<string, string>;
+			status: number;
+			error: Error | null;
 		}>;
 		session: Writable<Session>;
 	};
@@ -103,6 +110,8 @@ declare module '$app/stores' {
 	export const page: Readable<{
 		url: URL;
 		params: Record<string, string>;
+		status: number;
+		error: Error | null;
 	}>;
 	/**
 	 * A readable store.