@sveltejs/kit 1.0.0-next.259 → 1.0.0-next.262

package/assets/client/start.js

@@ -189,8 +189,11 @@ class Router {
 			// Ignore if <a> has a target
 			if (a instanceof SVGAElement ? a.target.baseVal : a.target) return;
 
-			// Check if new url only differs by hash
-			if (url.href.split('#')[0] === location.href.split('#')[0]) {
+			// Check if new url only differs by hash and use the browser default behavior in that case
+			// This will ensure the `hashchange` event is fired
+			// 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]) {
 				// 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));
@@ -731,15 +734,29 @@ class Renderer {
 			for (let i = 0; i < nodes.length; i += 1) {
 				const is_leaf = i === nodes.length - 1;
 
+				let props;
+
+				if (is_leaf) {
+					const serialized = document.querySelector('[data-type="svelte-props"]');
+					if (serialized) {
+						props = JSON.parse(/** @type {string} */ (serialized.textContent));
+					}
+				}
+
 				const node = await this._load_node({
 					module: await nodes[i],
 					url,
 					params,
 					stuff,
 					status: is_leaf ? status : undefined,
-					error: is_leaf ? error : undefined
+					error: is_leaf ? error : undefined,
+					props
 				});
 
+				if (props) {
+					node.uses.dependencies.add(url.href);
+				}
+
 				branch.push(node);
 
 				if (node && node.loaded) {
@@ -1092,10 +1109,11 @@ class Renderer {
 	 *   url: URL;
 	 *   params: Record<string, string>;
 	 *   stuff: Record<string, any>;
+	 *   props?: Record<string, any>;
 	 * }} options
 	 * @returns
 	 */
-	async _load_node({ status, error, module, url, params, stuff }) {
+	async _load_node({ status, error, module, url, params, stuff, props }) {
 		/** @type {import('./types').BranchNode} */
 		const node = {
 			module,
@@ -1104,12 +1122,17 @@ class Renderer {
 				url: false,
 				session: false,
 				stuff: false,
-				dependencies: []
+				dependencies: new Set()
 			},
 			loaded: null,
 			stuff
 		};
 
+		if (props) {
+			// shadow endpoint props means we need to mark this URL as a dependency of itself
+			node.uses.dependencies.add(url.href);
+		}
+
 		/** @type {Record<string, string>} */
 		const uses_params = {};
 		for (const key in params) {
@@ -1130,6 +1153,7 @@ class Renderer {
 			/** @type {import('types/page').LoadInput | import('types/page').ErrorLoadInput} */
 			const load_input = {
 				params: uses_params,
+				props: props || {},
 				get url() {
 					node.uses.url = true;
 					return url;
@@ -1145,7 +1169,7 @@ class Renderer {
 				fetch(resource, info) {
 					const requested = typeof resource === 'string' ? resource : resource.url;
 					const { href } = new URL(requested, url);
-					node.uses.dependencies.push(href);
+					node.uses.dependencies.add(href);
 
 					return started ? fetch(resource, info) : initial_fetch(resource, info);
 				}
@@ -1173,6 +1197,8 @@ class Renderer {
 
 			node.loaded = normalize(loaded);
 			if (node.loaded.stuff) node.stuff = node.loaded.stuff;
+		} else if (props) {
+			node.loaded = normalize({ props });
 		}
 
 		return node;
@@ -1191,7 +1217,7 @@ class Renderer {
 			if (cached) return cached;
 		}
 
-		const [pattern, a, b, get_params] = route;
+		const [pattern, a, b, get_params, has_shadow] = route;
 		const params = get_params
 			? // the pattern is for the route which we've already matched to this path
 			  get_params(/** @type {RegExpExecArray}  */ (pattern.exec(path)))
@@ -1235,16 +1261,50 @@ class Renderer {
 					(changed.url && previous.uses.url) ||
 					changed.params.some((param) => previous.uses.params.has(param)) ||
 					(changed.session && previous.uses.session) ||
-					previous.uses.dependencies.some((dep) => this.invalid.has(dep)) ||
+					Array.from(previous.uses.dependencies).some((dep) => this.invalid.has(dep)) ||
 					(stuff_changed && previous.uses.stuff);
 
 				if (changed_since_last_render) {
-					node = await this._load_node({
-						module,
-						url,
-						params,
-						stuff
-					});
+					/** @type {Record<string, any>} */
+					let props = {};
+
+					if (has_shadow && i === a.length - 1) {
+						const res = await fetch(
+							`${url.pathname}${url.pathname.endsWith('/') ? '' : '/'}__data.json`,
+							{
+								headers: {
+									'x-sveltekit-noredirect': 'true'
+								}
+							}
+						);
+
+						if (res.ok) {
+							const redirect = res.headers.get('x-sveltekit-location');
+
+							if (redirect) {
+								return {
+									redirect,
+									props: {},
+									state: this.current
+								};
+							}
+
+							props = await res.json();
+						} else {
+							status = res.status;
+							error = new Error('Failed to load data');
+						}
+					}
+
+					if (!error) {
+						node = await this._load_node({
+							module,
+							url,
+							params,
+							props,
+							stuff
+						});
+					}
 
 					if (node && node.loaded) {
 						if (node.loaded.fallthrough) {

package/assets/server/index.js

@@ -61,6 +61,24 @@ function decode_params(params) {
 	return params;
 }
 
+/** @param {any} body */
+function is_pojo(body) {
+	if (typeof body !== 'object') return false;
+
+	if (body) {
+		if (body instanceof Uint8Array) return false;
+
+		// 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;
+
+		// similarly, it could be a web ReadableStream
+		if (typeof ReadableStream !== 'undefined' && body instanceof ReadableStream) return false;
+	}
+
+	return true;
+}
+
 /** @param {string} body */
 function error(body) {
 	return new Response(body, {
@@ -95,13 +113,10 @@ function is_text(content_type) {
 
 /**
  * @param {import('types/hooks').RequestEvent} event
- * @param {import('types/internal').SSREndpoint} route
- * @param {RegExpExecArray} match
+ * @param {{ [method: string]: import('types/endpoint').RequestHandler }} mod
  * @returns {Promise<Response | undefined>}
  */
-async function render_endpoint(event, route, match) {
-	const mod = await route.load();
-
+async function render_endpoint(event, mod) {
 	/** @type {import('types/endpoint').RequestHandler} */
 	const handler = mod[event.request.method.toLowerCase().replace('delete', 'del')]; // 'delete' is a reserved word
 
@@ -109,11 +124,6 @@ async function render_endpoint(event, route, match) {
 		return;
 	}
 
-	// we're mutating `request` so that we don't have to do { ...request, params }
-	// on the next line, since that breaks the getters that replace path, query and
-	// origin. We could revert that once we remove the getters
-	event.params = route.params ? decode_params(route.params(match)) : {};
-
 	const response = await handler(event);
 	const preface = `Invalid response from route ${event.url.pathname}`;
 
@@ -163,24 +173,6 @@ async function render_endpoint(event, route, match) {
 	});
 }
 
-/** @param {any} body */
-function is_pojo(body) {
-	if (typeof body !== 'object') return false;
-
-	if (body) {
-		if (body instanceof Uint8Array) return false;
-
-		// 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;
-
-		// similarly, it could be a web ReadableStream
-		if (typeof ReadableStream !== 'undefined' && body instanceof ReadableStream) return false;
-	}
-
-	return true;
-}
-
 var chars$1 = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ_$';
 var unsafeChars = /[<>\b\f\n\r\t\0\u2028\u2029]/g;
 var reserved = /^(?:do|if|in|for|int|let|new|try|var|byte|case|char|else|enum|goto|long|this|void|with|await|break|catch|class|const|final|float|short|super|throw|while|yield|delete|double|export|import|native|return|switch|throws|typeof|boolean|default|extends|finally|package|private|abstract|continue|debugger|function|volatile|interface|protected|transient|implements|instanceof|synchronized)$/;
@@ -482,8 +474,7 @@ function coalesce_to_error(err) {
 }
 
 /** @type {Record<string, string>} */
-const escape_json_string_in_html_dict = {
-	'"': '\\"',
+const escape_json_in_html_dict = {
 	'<': '\\u003C',
 	'>': '\\u003E',
 	'/': '\\u002F',
@@ -498,7 +489,24 @@ const escape_json_string_in_html_dict = {
 	'\u2029': '\\u2029'
 };
 
-/** @param {string} str */
+/** @type {Record<string, string>} */
+const escape_json_string_in_html_dict = {
+	'"': '\\"',
+	...escape_json_in_html_dict
+};
+
+/**
+ * Escape a stringified JSON object that's going to be embedded in a `<script>` tag
+ * @param {string} str
+ */
+function escape_json_in_html(str) {
+	return escape(str, escape_json_in_html_dict, (code) => `\\u${code.toString(16).toUpperCase()}`);
+}
+
+/**
+ * Escape a string JSON value to be embedded into a `<script>` tag
+ * @param {string} str
+ */
 function escape_json_string_in_html(str) {
 	return escape(
 		str,
@@ -1076,6 +1084,8 @@ async function render_response({
 	/** @type {Array<{ url: string, body: string, json: string }>} */
 	const serialized_data = [];
 
+	let shadow_props;
+
 	let rendered;
 
 	let is_private = false;
@@ -1086,13 +1096,14 @@ async function render_response({
 	}
 
 	if (ssr) {
-		branch.forEach(({ node, loaded, fetched, uses_credentials }) => {
+		branch.forEach(({ node, props, loaded, fetched, uses_credentials }) => {
 			if (node.css) node.css.forEach((url) => stylesheets.add(url));
 			if (node.js) node.js.forEach((url) => modulepreloads.add(url));
 			if (node.styles) Object.entries(node.styles).forEach(([k, v]) => styles.set(k, v));
 
 			// TODO probably better if `fetched` wasn't populated unless `hydrate`
 			if (fetched && page_config.hydrate) serialized_data.push(...fetched);
+			if (props) shadow_props = props;
 
 			if (uses_credentials) is_private = true;
 
@@ -1271,6 +1282,11 @@ async function render_response({
 					return `<script ${attributes}>${json}</script>`;
 				})
 				.join('\n\t');
+
+			if (shadow_props) {
+				// prettier-ignore
+				body += `<script type="application/json" data-type="svelte-props">${escape_json_in_html(s(shadow_props))}</script>`;
+			}
 		}
 
 		if (options.service_worker) {
@@ -1476,6 +1492,7 @@ function is_root_relative(path) {
  *   $session: any;
  *   stuff: Record<string, any>;
  *   is_error: boolean;
+ *   is_leaf: boolean;
  *   status?: number;
  *   error?: Error;
  * }} opts
@@ -1492,6 +1509,7 @@ async function load_node({
 	$session,
 	stuff,
 	is_error,
+	is_leaf,
 	status,
 	error
 }) {
@@ -1513,13 +1531,40 @@ async function load_node({
 	 */
 	let set_cookie_headers = [];
 
+	/** @type {import('types/helper').Either<import('types/endpoint').Fallthrough, import('types/page').LoadOutput>} */
 	let loaded;
 
-	if (module.load) {
+	/** @type {import('types/endpoint').ShadowData} */
+	const shadow = is_leaf
+		? await load_shadow_data(
+				/** @type {import('types/internal').SSRPage} */ (route),
+				event,
+				!!state.prerender
+		  )
+		: {};
+
+	if (shadow.fallthrough) return;
+
+	if (shadow.cookies) {
+		set_cookie_headers.push(...shadow.cookies);
+	}
+
+	if (shadow.error) {
+		loaded = {
+			status: shadow.status,
+			error: shadow.error
+		};
+	} else if (shadow.redirect) {
+		loaded = {
+			status: shadow.status,
+			redirect: shadow.redirect
+		};
+	} else if (module.load) {
 		/** @type {import('types/page').LoadInput | import('types/page').ErrorLoadInput} */
 		const load_input = {
 			url: state.prerender ? create_prerendering_url_proxy(url) : url,
 			params,
+			props: shadow.body || {},
 			get session() {
 				uses_credentials = true;
 				return $session;
@@ -1751,6 +1796,10 @@ async function load_node({
 		if (!loaded) {
 			throw new Error(`load function must return a value${options.dev ? ` (${node.entry})` : ''}`);
 		}
+	} else if (shadow.body) {
+		loaded = {
+			props: shadow.body
+		};
 	} else {
 		loaded = {};
 	}
@@ -1759,8 +1808,21 @@ async function load_node({
 		return;
 	}
 
+	// generate __data.json files when prerendering
+	if (shadow.body && state.prerender) {
+		const pathname = `${event.url.pathname}/__data.json`;
+
+		const dependency = {
+			response: new Response(undefined),
+			body: JSON.stringify(shadow.body)
+		};
+
+		state.prerender.dependencies.set(pathname, dependency);
+	}
+
 	return {
 		node,
+		props: shadow.body,
 		loaded: normalize(loaded),
 		stuff: loaded.stuff || stuff,
 		fetched,
@@ -1769,6 +1831,127 @@ async function load_node({
 	};
 }
 
+/**
+ *
+ * @param {import('types/internal').SSRPage} route
+ * @param {import('types/hooks').RequestEvent} event
+ * @param {boolean} prerender
+ * @returns {Promise<import('types/endpoint').ShadowData>}
+ */
+async function load_shadow_data(route, event, prerender) {
+	if (!route.shadow) return {};
+
+	try {
+		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');
+		}
+
+		const method = event.request.method.toLowerCase().replace('delete', 'del');
+		const handler = mod[method];
+
+		if (!handler) {
+			return {
+				status: 405,
+				error: new Error(`${method} method not allowed`)
+			};
+		}
+
+		/** @type {import('types/endpoint').ShadowData} */
+		const data = {
+			status: 200,
+			cookies: [],
+			body: {}
+		};
+
+		if (method !== 'get') {
+			const result = await handler(event);
+
+			if (result.fallthrough) return result;
+
+			const { status = 200, headers = {}, body = {} } = result;
+
+			validate_shadow_output(headers, body);
+
+			if (headers['set-cookie']) {
+				/** @type {string[]} */ (data.cookies).push(...headers['set-cookie']);
+			}
+
+			// Redirects are respected...
+			if (status >= 300 && status < 400) {
+				return {
+					status,
+					redirect: /** @type {string} */ (
+						headers instanceof Headers ? headers.get('location') : headers.location
+					)
+				};
+			}
+
+			// ...but 4xx and 5xx status codes _don't_ result in the error page
+			// rendering for non-GET requests — instead, we allow the page
+			// to render with any validation errors etc that were returned
+			data.status = status;
+			data.body = body;
+		}
+
+		if (mod.get) {
+			const result = await mod.get.call(null, event);
+
+			if (result.fallthrough) return result;
+
+			const { status = 200, headers = {}, body = {} } = result;
+
+			validate_shadow_output(headers, body);
+
+			if (headers['set-cookie']) {
+				/** @type {string[]} */ (data.cookies).push(...headers['set-cookie']);
+			}
+
+			if (status >= 400) {
+				return {
+					status,
+					error: new Error('Failed to load data')
+				};
+			}
+
+			if (status >= 300) {
+				return {
+					status,
+					redirect: /** @type {string} */ (
+						headers instanceof Headers ? headers.get('location') : headers.location
+					)
+				};
+			}
+
+			data.body = { ...body, ...data.body };
+		}
+
+		return data;
+	} catch (e) {
+		return {
+			status: 500,
+			error: coalesce_to_error(e)
+		};
+	}
+}
+
+/**
+ * @param {Headers | Partial<import('types/helper').ResponseHeaders>} headers
+ * @param {import('types/helper').JSONValue} body
+ */
+function validate_shadow_output(headers, body) {
+	if (headers instanceof Headers && headers.has('set-cookie')) {
+		throw new Error(
+			'Shadow endpoint request handler cannot use Headers interface with Set-Cookie headers'
+		);
+	}
+
+	if (!is_pojo(body)) {
+		throw new Error('Body returned from shadow endpoint request handler must be a plain object');
+	}
+}
+
 /**
  * @typedef {import('./types.js').Loaded} Loaded
  * @typedef {import('types/internal').SSROptions} SSROptions
@@ -1805,7 +1988,8 @@ async function respond_with_error({ event, options, state, $session, status, err
 				node: default_layout,
 				$session,
 				stuff: {},
-				is_error: false
+				is_error: false,
+				is_leaf: false
 			})
 		);
 
@@ -1821,6 +2005,7 @@ async function respond_with_error({ event, options, state, $session, status, err
 				$session,
 				stuff: layout_loaded ? layout_loaded.stuff : {},
 				is_error: true,
+				is_leaf: false,
 				status,
 				error
 			})
@@ -1953,7 +2138,8 @@ async function respond$1(opts) {
 						url: event.url,
 						node,
 						stuff,
-						is_error: false
+						is_error: false,
+						is_leaf: i === nodes.length - 1
 					});
 
 					if (!loaded) return;
@@ -2008,6 +2194,7 @@ async function respond$1(opts) {
 										node: error_node,
 										stuff: node_loaded.stuff,
 										is_error: true,
+										is_leaf: false,
 										status,
 										error
 									})
@@ -2121,13 +2308,12 @@ function with_cookies(response, set_cookie_headers) {
 /**
  * @param {import('types/hooks').RequestEvent} event
  * @param {import('types/internal').SSRPage} route
- * @param {RegExpExecArray} match
  * @param {import('types/internal').SSROptions} options
  * @param {import('types/internal').SSRState} state
  * @param {boolean} ssr
  * @returns {Promise<Response | undefined>}
  */
-async function render_page(event, route, match, options, state, ssr) {
+async function render_page(event, route, options, state, ssr) {
 	if (state.initiator === route) {
 		// infinite request cycle detected
 		return new Response(`Not found: ${event.url.pathname}`, {
@@ -2135,7 +2321,16 @@ async function render_page(event, route, match, options, state, ssr) {
 		});
 	}
 
-	const params = route.params ? decode_params(route.params(match)) : {};
+	if (route.shadow) {
+		const type = negotiate(event.request.headers.get('accept') || 'text/html', [
+			'text/html',
+			'application/json'
+		]);
+
+		if (type === 'application/json') {
+			return render_endpoint(event, await route.shadow());
+		}
+	}
 
 	const $session = await options.hooks.getSession(event);
 
@@ -2145,7 +2340,7 @@ async function render_page(event, route, match, options, state, ssr) {
 		state,
 		$session,
 		route,
-		params,
+		params: event.params, // TODO this is redundant
 		ssr
 	});
 
@@ -2164,6 +2359,60 @@ async function render_page(event, route, match, options, state, ssr) {
 	}
 }
 
+/**
+ * @param {string} accept
+ * @param {string[]} types
+ */
+function negotiate(accept, types) {
+	const parts = accept
+		.split(',')
+		.map((str, i) => {
+			const match = /([^/]+)\/([^;]+)(?:;q=([0-9.]+))?/.exec(str);
+			if (match) {
+				const [, type, subtype, q = '1'] = match;
+				return { type, subtype, q: +q, i };
+			}
+
+			throw new Error(`Invalid Accept header: ${accept}`);
+		})
+		.sort((a, b) => {
+			if (a.q !== b.q) {
+				return b.q - a.q;
+			}
+
+			if ((a.subtype === '*') !== (b.subtype === '*')) {
+				return a.subtype === '*' ? 1 : -1;
+			}
+
+			if ((a.type === '*') !== (b.type === '*')) {
+				return a.type === '*' ? 1 : -1;
+			}
+
+			return a.i - b.i;
+		});
+
+	let accepted;
+	let min_priority = Infinity;
+
+	for (const mimetype of types) {
+		const [type, subtype] = mimetype.split('/');
+		const priority = parts.findIndex(
+			(part) =>
+				(part.type === type || part.type === '*') &&
+				(part.subtype === subtype || part.subtype === '*')
+		);
+
+		if (priority !== -1 && priority < min_priority) {
+			accepted = mimetype;
+			min_priority = priority;
+		}
+	}
+
+	return accepted;
+}
+
+const DATA_SUFFIX = '/__data.json';
+
 /** @type {import('types/internal').Respond} */
 async function respond(request, options, state = {}) {
 	const url = new URL(request.url);
@@ -2290,14 +2539,46 @@ async function respond(request, options, state = {}) {
 					decoded = decoded.slice(options.paths.base.length) || '/';
 				}
 
+				const is_data_request = decoded.endsWith(DATA_SUFFIX);
+				if (is_data_request) decoded = decoded.slice(0, -DATA_SUFFIX.length) || '/';
+
 				for (const route of options.manifest._.routes) {
 					const match = route.pattern.exec(decoded);
 					if (!match) continue;
 
-					const response =
-						route.type === 'endpoint'
-							? await render_endpoint(event, route, match)
-							: await render_page(event, route, match, options, state, ssr);
+					event.params = route.params ? decode_params(route.params(match)) : {};
+
+					/** @type {Response | undefined} */
+					let response;
+
+					if (is_data_request && route.type === 'page' && route.shadow) {
+						response = await render_endpoint(event, await route.shadow());
+
+						// since redirects are opaque to the browser, we need to repackage
+						// 3xx responses as 200s with a custom header
+						if (
+							response &&
+							response.status >= 300 &&
+							response.status < 400 &&
+							request.headers.get('x-sveltekit-noredirect') === 'true'
+						) {
+							const location = response.headers.get('location');
+
+							if (location) {
+								response = new Response(undefined, {
+									status: 204,
+									headers: {
+										'x-sveltekit-location': location
+									}
+								});
+							}
+						}
+					} else {
+						response =
+							route.type === 'endpoint'
+								? await render_endpoint(event, await route.load())
+								: await render_page(event, route, options, state, ssr);
+					}
 
 					if (response) {
 						// respond with 304 if etag matches

package/dist/chunks/index.js

@@ -118,6 +118,12 @@ async function create_plugin(config, cwd) {
 									type: 'page',
 									pattern: route.pattern,
 									params: get_params(route.params),
+									shadow: route.shadow
+										? async () => {
+												const url = path__default.resolve(cwd, /** @type {string} */ (route.shadow));
+												return await vite.ssrLoadModule(url);
+										  }
+										: null,
 									a: route.a.map((id) => manifest_data.components.indexOf(id)),
 									b: route.b.map((id) => manifest_data.components.indexOf(id))
 								};

package/dist/chunks/index2.js

@@ -165,7 +165,10 @@ function generate_client_manifest(manifest_data, base) {
 							'})';
 
 					const tuple = [route.pattern, get_indices(route.a), get_indices(route.b)];
-					if (params) tuple.push(params);
+
+					// optional items
+					if (params || route.shadow) tuple.push(params || 'null');
+					if (route.shadow) tuple.push('1');
 
 					return `// ${route.a[route.a.length - 1]}\n\t\t[${tuple.join(', ')}]`;
 				}
@@ -382,6 +385,7 @@ var mime = new Mime(standard, other);
  * }} Part
  * @typedef {{
  *   basename: string;
+ *   name: string;
  *   ext: string;
  *   parts: Part[],
  *   file: string;
@@ -427,12 +431,13 @@ function create_manifest_data({
 
 	/**
 	 * @param {string} dir
+	 * @param {string[]} parent_key
 	 * @param {Part[][]} parent_segments
 	 * @param {string[]} parent_params
 	 * @param {Array<string|undefined>} layout_stack // accumulated __layout.svelte components
 	 * @param {Array<string|undefined>} error_stack // accumulated __error.svelte components
 	 */
-	function walk(dir, parent_segments, parent_params, layout_stack, error_stack) {
+	function walk(dir, parent_key, parent_segments, parent_params, layout_stack, error_stack) {
 		/** @type {Item[]} */
 		let items = [];
 		fs__default.readdirSync(dir).forEach((basename) => {
@@ -482,6 +487,7 @@ function create_manifest_data({
 
 			items.push({
 				basename,
+				name,
 				ext,
 				parts,
 				file,
@@ -494,6 +500,7 @@ function create_manifest_data({
 		items = items.sort(comparator);
 
 		items.forEach((item) => {
+			const key = parent_key.slice();
 			const segments = parent_segments.slice();
 
 			if (item.is_index) {
@@ -517,11 +524,13 @@ function create_manifest_data({
 						}
 
 						segments[segments.length - 1] = last_segment;
+						key[key.length - 1] += item.route_suffix;
 					} else {
 						segments.push(item.parts);
 					}
 				}
 			} else {
+				key.push(item.name);
 				segments.push(item.parts);
 			}
 
@@ -555,6 +564,7 @@ function create_manifest_data({
 
 				walk(
 					path__default.join(dir, item.basename),
+					key,
 					segments,
 					params,
 					layout_reset ? [layout_reset] : layout_stack.concat(layout),
@@ -589,10 +599,12 @@ function create_manifest_data({
 
 				routes.push({
 					type: 'page',
+					key: key.join('/'),
 					segments: simple_segments,
 					pattern,
 					params,
 					path,
+					shadow: null,
 					a: /** @type {string[]} */ (concatenated),
 					b: /** @type {string[]} */ (errors)
 				});
@@ -601,6 +613,7 @@ function create_manifest_data({
 
 				routes.push({
 					type: 'endpoint',
+					key: key.join('/'),
 					segments: simple_segments,
 					pattern,
 					file: item.file,
@@ -617,7 +630,24 @@ function create_manifest_data({
 
 	components.push(layout, error);
 
-	walk(config.kit.files.routes, [], [], [layout], [error]);
+	walk(config.kit.files.routes, [], [], [], [layout], [error]);
+
+	// merge matching page/endpoint pairs into shadowed pages
+	let i = routes.length;
+	while (i--) {
+		const route = routes[i];
+		const prev = routes[i - 1];
+
+		if (prev && prev.key === route.key) {
+			if (prev.type !== 'endpoint' || route.type !== 'page') {
+				const relative = path__default.relative(cwd, path__default.resolve(config.kit.files.routes, prev.key));
+				throw new Error(`Duplicate route files: ${relative}`);
+			}
+
+			route.shadow = prev.file;
+			routes.splice(--i, 1);
+		}
+	}
 
 	const assets = fs__default.existsSync(config.kit.files.assets)
 		? list_files({ config, dir: config.kit.files.assets, path: '' })

package/dist/chunks/index3.js

@@ -383,8 +383,10 @@ async function build_server(
 
 	// add entry points for every endpoint...
 	manifest_data.routes.forEach((route) => {
-		if (route.type === 'endpoint') {
-			const resolved = path__default.resolve(cwd, route.file);
+		const file = route.type === 'endpoint' ? route.file : route.shadow;
+
+		if (file) {
+			const resolved = path__default.resolve(cwd, file);
 			const relative = path__default.relative(config.kit.files.routes, resolved);
 			const name = posixify(path__default.join('entries/endpoints', relative.replace(/\.js$/, '')));
 			input[name] = resolved;
@@ -468,24 +470,6 @@ async function build_server(
 
 	const { chunks } = await create_build(merged_config);
 
-	/** @type {Record<string, string[]>} */
-	const lookup = {};
-	chunks.forEach((chunk) => {
-		if (!chunk.facadeModuleId) return;
-		const id = chunk.facadeModuleId.slice(cwd.length + 1);
-		lookup[id] = chunk.exports;
-	});
-
-	/** @type {Record<string, import('types/internal').HttpMethod[]>} */
-	const methods = {};
-	manifest_data.routes.forEach((route) => {
-		if (route.type === 'endpoint' && lookup[route.file]) {
-			methods[route.file] = lookup[route.file]
-				.map((x) => /** @type {import('types/internal').HttpMethod} */ (method_names[x]))
-				.filter(Boolean);
-		}
-	});
-
 	/** @type {import('vite').Manifest} */
 	const vite_manifest = JSON.parse(fs__default.readFileSync(`${output_dir}/server/manifest.json`, 'utf-8'));
 
@@ -576,8 +560,10 @@ function get_methods(cwd, output, manifest_data) {
 	/** @type {Record<string, import('types/internal').HttpMethod[]>} */
 	const methods = {};
 	manifest_data.routes.forEach((route) => {
-		if (route.type === 'endpoint' && lookup[route.file]) {
-			methods[route.file] = lookup[route.file]
+		const file = route.type === 'endpoint' ? route.file : route.shadow;
+
+		if (file && lookup[file]) {
+			methods[file] = lookup[file]
 				.map((x) => /** @type {import('types/internal').HttpMethod} */ (method_names[x]))
 				.filter(Boolean);
 		}

package/dist/chunks/index4.js

@@ -70,6 +70,7 @@ function generate_manifest(
 							pattern: ${route.pattern},
 							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))}
 						}`.replace(/^\t\t/gm, '');

package/dist/cli.js

@@ -995,7 +995,7 @@ async function launch(port, https) {
 	exec(`${cmd} ${https ? 'https' : 'http'}://localhost:${port}`);
 }
 
-const prog = sade('svelte-kit').version('1.0.0-next.259');
+const prog = sade('svelte-kit').version('1.0.0-next.262');
 
 prog
 	.command('dev')
@@ -1153,7 +1153,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.259'}\n`));
+	console.log($.bold().cyan(`\n  SvelteKit v${'1.0.0-next.262'}\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.259",
+  "version": "1.0.0-next.262",
   "repository": {
     "type": "git",
     "url": "https://github.com/sveltejs/kit",
@@ -12,7 +12,7 @@
   "dependencies": {
     "@sveltejs/vite-plugin-svelte": "^1.0.0-next.32",
     "sade": "^1.7.4",
-    "vite": "^2.7.2"
+    "vite": "^2.8.0"
   },
   "devDependencies": {
     "@playwright/test": "^1.17.1",

package/types/endpoint.d.ts

@@ -1,5 +1,5 @@
 import { RequestEvent } from './hooks';
-import { Either, JSONValue, MaybePromise, ResponseHeaders } from './helper';
+import { Either, JSONObject, JSONValue, MaybePromise, ResponseHeaders } from './helper';
 
 type Body = JSONValue | Uint8Array | ReadableStream | import('stream').Readable;
 
@@ -14,5 +14,26 @@ export interface Fallthrough {
 }
 
 export interface RequestHandler<Output extends Body = Body> {
-	(event: RequestEvent): MaybePromise<Either<Response | EndpointOutput<Output>, Fallthrough>>;
+	(event: RequestEvent): MaybePromise<
+		Either<Output extends Response ? Response : EndpointOutput<Output>, Fallthrough>
+	>;
+}
+
+export interface ShadowEndpointOutput<Output extends JSONObject = JSONObject> {
+	status?: number;
+	headers?: Partial<ResponseHeaders>;
+	body?: Output;
+}
+
+export interface ShadowRequestHandler<Output extends JSONObject = JSONObject> {
+	(event: RequestEvent): MaybePromise<Either<ShadowEndpointOutput<Output>, Fallthrough>>;
+}
+
+export interface ShadowData {
+	fallthrough?: boolean;
+	status?: number;
+	error?: Error;
+	redirect?: string;
+	cookies?: string[];
+	body?: JSONObject;
 }

package/types/helper.d.ts

@@ -1,13 +1,7 @@
 type ToJSON = { toJSON(...args: any[]): Exclude<JSONValue, ToJSON> };
 
-export type JSONValue =
-	| string
-	| number
-	| boolean
-	| null
-	| ToJSON
-	| JSONValue[]
-	| { [key: string]: JSONValue };
+export type JSONObject = { [key: string]: JSONValue };
+export type JSONValue = string | number | boolean | null | ToJSON | JSONValue[] | JSONObject;
 
 /** `string[]` is only for set-cookie, everything else must be type of `string` */
 export type ResponseHeaders = Record<string, string | string[]>;

package/types/internal.d.ts

@@ -1,7 +1,7 @@
 import { OutputAsset, OutputChunk } from 'rollup';
 import { ValidatedConfig } from './config';
 import { InternalApp, SSRManifest } from './app';
-import { Fallthrough, RequestHandler } from './endpoint';
+import { Fallthrough, RequestHandler, ShadowRequestHandler } from './endpoint';
 import { Either } from './helper';
 import { ExternalFetch, GetSession, Handle, HandleError, RequestEvent } from './hooks';
 import { Load } from './page';
@@ -74,6 +74,11 @@ export interface SSRPage {
 	type: 'page';
 	pattern: RegExp;
 	params: GetParams;
+	shadow:
+		| null
+		| (() => Promise<{
+				[method: string]: ShadowRequestHandler;
+		  }>);
 	/**
 	 * plan a is to render 1 or more layout components followed by a leaf component.
 	 */
@@ -96,7 +101,8 @@ export interface SSREndpoint {
 
 export type SSRRoute = SSREndpoint | SSRPage;
 
-export type CSRRoute = [RegExp, CSRComponentLoader[], CSRComponentLoader[], GetParams?];
+type HasShadow = 1;
+export type CSRRoute = [RegExp, CSRComponentLoader[], CSRComponentLoader[], GetParams?, HasShadow?];
 
 export type SSRNodeLoader = () => Promise<SSRNode>;
 
@@ -179,6 +185,8 @@ export type HttpMethod = 'get' | 'head' | 'post' | 'put' | 'delete' | 'patch';
 
 export interface PageData {
 	type: 'page';
+	key: string;
+	shadow: string | null;
 	segments: RouteSegment[];
 	pattern: RegExp;
 	params: string[];
@@ -189,6 +197,7 @@ export interface PageData {
 
 export interface EndpointData {
 	type: 'endpoint';
+	key: string;
 	segments: RouteSegment[];
 	pattern: RegExp;
 	params: string[];

package/types/page.d.ts

@@ -4,6 +4,7 @@ import { Either, MaybePromise } from './helper';
 export interface LoadInput<Params = Record<string, string>> {
 	url: URL;
 	params: Params;
+	props: Record<string, any>;
 	fetch(info: RequestInfo, init?: RequestInit): Promise<Response>;
 	session: App.Session;
 	stuff: Partial<App.Stuff>;