@sveltejs/kit 1.0.0-next.224 → 1.0.0-next.229

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/index.js

@@ -76,7 +76,8 @@ async function create_plugin(config, output, cwd) {
 								const deps = new Set();
 								find_deps(node, deps);
 
-								const styles = new Set();
+								/** @type {Record<string, string>} */
+								const styles = {};
 
 								for (const dep of deps) {
 									const parsed = new URL(dep.url, 'http://localhost/');
@@ -89,7 +90,7 @@ async function create_plugin(config, output, cwd) {
 									) {
 										try {
 											const mod = await vite.ssrLoadModule(dep.url);
-											styles.add(mod.default);
+											styles[dep.url] = mod.default;
 										} catch {
 											// this can happen with dynamically imported modules, I think
 											// because the Vite module graph doesn't distinguish between
@@ -103,7 +104,7 @@ async function create_plugin(config, output, cwd) {
 									entry: url.endsWith('.svelte') ? url : url + '?import',
 									css: [],
 									js: [],
-									styles: Array.from(styles)
+									styles
 								};
 							};
 						}),

package/dist/chunks/index2.js

@@ -260,26 +260,12 @@ function generate_app(manifest_data) {
 		${pyramid.replace(/\n/g, '\n\t\t')}
 
 		{#if mounted}
-			<div id="svelte-announcer" aria-live="assertive" aria-atomic="true">
+			<div id="svelte-announcer" aria-live="assertive" aria-atomic="true" style="position: absolute; left: 0; top: 0; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; width: 1px; height: 1px">
 				{#if navigated}
 					{title}
 				{/if}
 			</div>
 		{/if}
-
-		<style>
-			#svelte-announcer {
-				position: absolute;
-				left: 0;
-				top: 0;
-				clip: rect(0 0 0 0);
-				clip-path: inset(50%);
-				overflow: hidden;
-				white-space: nowrap;
-				width: 1px;
-				height: 1px;
-			}
-		</style>
 	`);
 }
 

package/dist/chunks/index3.js

@@ -313,7 +313,7 @@ export class App {
 			prerender: ${config.kit.prerender.enabled},
 			read,
 			root,
-			service_worker: ${has_service_worker ? "'/service-worker.js'" : 'null'},
+			service_worker: ${has_service_worker ? "base + '/service-worker.js'" : 'null'},
 			router: ${s(config.kit.router)},
 			target: ${s(config.kit.target)},
 			template,
@@ -499,16 +499,23 @@ 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`);
+	mkdirp(`${output_dir}/server/stylesheets`);
+
+	const stylesheet_lookup = new Map();
+
+	client.assets.forEach((asset) => {
+		if (asset.fileName.endsWith('.css')) {
+			if (config.kit.amp || asset.source.length < config.kit.inlineStyleThreshold) {
+				const index = stylesheet_lookup.size;
+				const file = `${output_dir}/server/stylesheets/${index}.js`;
+
+				fs__default.writeFileSync(file, `// ${asset.fileName}\nexport default ${s(asset.source)};`);
+				stylesheet_lookup.set(asset.fileName, index);
 			}
-		});
-	}
+		}
+	});
 
-	mkdirp(`${output_dir}/server/nodes`);
 	manifest_data.components.forEach((component, i) => {
 		const file = `${output_dir}/server/nodes/${i}.js`;
 
@@ -516,17 +523,32 @@ async function build_server(
 		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 imports = [`import * as module from '../${vite_manifest[component].file}';`];
+
+		const exports = [
+			'export { module };',
+			`export const entry = '${client.vite_manifest[component].file}';`,
+			`export const js = ${s(Array.from(js))};`,
+			`export const css = ${s(Array.from(css))};`
+		];
 
-		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, '');
+		/** @type {string[]} */
+		const styles = [];
+
+		css.forEach((file) => {
+			if (stylesheet_lookup.has(file)) {
+				const index = stylesheet_lookup.get(file);
+				const name = `stylesheet_${index}`;
+				imports.push(`import ${name} from '../stylesheets/${index}.js';`);
+				styles.push(`\t${s(file)}: ${name}`);
+			}
+		});
+
+		if (styles.length > 0) {
+			exports.push(`export const styles = {\n${styles.join(',\n')}\n};`);
+		}
 
-		fs__default.writeFileSync(file, node);
+		fs__default.writeFileSync(file, `${imports.join('\n')}\n\n${exports.join('\n')}\n`);
 	});
 
 	return {

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

@@ -479,6 +479,8 @@ const options = object(
 
 			hydrate: boolean(true),
 
+			inlineStyleThreshold: number(0),
+
 			methodOverride: object({
 				parameter: string('_method'),
 				allowed: validate([], (input, keypath) => {
@@ -868,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.224');
+const prog = sade('svelte-kit').version('1.0.0-next.229');
 
 prog
 	.command('dev')
@@ -1020,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.224'}\n`));
+	console.log($.bold().cyan(`\n  SvelteKit v${'1.0.0-next.229'}\n`));
 
 	const protocol = https ? 'https:' : 'http:';
 	const exposed = typeof host !== 'undefined' && host !== 'localhost' && host !== '127.0.0.1';