@sveltejs/kit 1.0.0-next.276 → 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

@@ -86,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');
@@ -223,11 +224,8 @@ class Router {
 				this.hash_navigating = true;
 
 				this.#update_scroll_positions();
+				this.renderer.update_page_store(new URL(url.href));
 
-				const info = this.parse(url);
-				if (info) {
-					return this.renderer.update(info, [], false);
-				}
 				return;
 			}
 
@@ -280,6 +278,8 @@ class Router {
 				);
 			}
 		});
+
+		this.initialized = true;
 	}
 
 	#update_scroll_positions() {
@@ -306,7 +306,8 @@ class Router {
 				id: url.pathname + url.search,
 				routes: this.routes.filter(([pattern]) => pattern.test(path)),
 				url,
-				path
+				path,
+				initial: !this.initialized
 			};
 		}
 	}
@@ -356,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);
@@ -704,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
@@ -871,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;
 
@@ -950,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];
@@ -962,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);
@@ -987,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;
@@ -994,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: {
@@ -1014,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) {
@@ -1047,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
+			});
+		}
 	}
 
 	/**

package/assets/server/index.js

@@ -1221,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 +=
@@ -1258,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.276');
+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.276'}\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.276",
+  "version": "1.0.0-next.277",
   "repository": {
     "type": "git",
     "url": "https://github.com/sveltejs/kit",