-> v0.12.0

switch to single App component model

CHANGELOG.md

@@ -1,5 +1,15 @@
 # sapper changelog
 
+## 0.12.0
+
+* Each app has a single `<App>` component. See the [migration guide](https://sapper.svelte.technology/guide#0-11-to-0-12) for more information ([#157](https://github.com/sveltejs/sapper/issues/157))
+* Process exits with error code 1 if build/export fails ([#208](https://github.com/sveltejs/sapper/issues/208))
+
+## 0.11.1
+
+* Limit routes with leading dots to `.well-known` URIs ([#252](https://github.com/sveltejs/sapper/issues/252))
+* Allow server routes to sit in front of pages ([#236](https://github.com/sveltejs/sapper/pull/236))
+
 ## 0.11.0
 
 * Create launcher file ([#240](https://github.com/sveltejs/sapper/issues/240))

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sapper",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "Military-grade apps, engineered by Svelte",
   "main": "dist/middleware.ts.js",
   "bin": {
@@ -40,7 +40,6 @@
     "webpack-format-messages": "^1.0.2"
   },
   "devDependencies": {
-    "@std/esm": "^0.26.0",
     "@types/glob": "^5.0.34",
     "@types/mkdirp": "^0.5.2",
     "@types/rimraf": "^2.0.2",
@@ -48,7 +47,6 @@
     "eslint": "^4.13.1",
     "eslint-plugin-import": "^2.8.0",
     "express": "^4.16.3",
-    "get-port": "^3.2.0",
     "mocha": "^5.0.4",
     "nightmare": "^3.0.0",
     "npm-run-all": "^4.1.2",
@@ -61,7 +59,6 @@
     "serve-static": "^1.13.2",
     "svelte": "^2.4.4",
     "svelte-loader": "^2.9.0",
-    "ts-node": "^6.0.2",
     "typescript": "^2.8.3",
     "walk-sync": "^0.3.2",
     "webpack": "^4.1.0"

src/cli.ts

@@ -50,6 +50,7 @@ prog.command('build [dest]')
 			console.error(`\n> Finished in ${elapsed(start)}. Type ${clorox.bold.cyan(`node ${dest}`)} to run the app.`);
 		} catch (err) {
 			console.error(err ? err.details || err.stack || err.message || err : 'Unknown error');
+			process.exit(1);
 		}
 	});
 
@@ -83,6 +84,7 @@ prog.command('export [dest]')
 			console.error(`\n> Finished in ${elapsed(start)}. Type ${clorox.bold.cyan(`npx serve ${dest}`)} to run the app.`);
 		} catch (err) {
 			console.error(err ? err.details || err.stack || err.message || err : 'Unknown error');
+			process.exit(1);
 		}
 	});
 

src/core/create_manifests.ts

@@ -45,11 +45,13 @@ function generate_client(routes: Route[], path_to_routes: string, dev_port?: num
 		export const routes = [
 			${routes
 				.map(route => {
-					if (route.type !== 'page') {
+					const page = route.handlers.find(({ type }) => type === 'page');
+
+					if (!page) {
 						return `{ pattern: ${route.pattern}, ignore: true }`;
 					}
 
-					const file = posixify(`${path_to_routes}/${route.file}`);
+					const file = posixify(`${path_to_routes}/${page.file}`);
 
 					if (route.id === '_4xx' || route.id === '_5xx') {
 						return `{ error: '${route.id.slice(1)}', load: () => import(/* webpackChunkName: "${route.id}" */ '${file}') }`;
@@ -85,28 +87,36 @@ function generate_server(routes: Route[], path_to_routes: string) {
 	let code = `
 		// This file is generated by Sapper — do not edit it!
 		${routes
-			.map(route => {
+			.map(route =>
-				const file = posixify(`${path_to_routes}/${route.file}`);
+				route.handlers
-				return route.type === 'page'
+					.map(({ type, file }, index) => {
-					? `import ${route.id} from '${file}';`
+						const module = posixify(`${path_to_routes}/${file}`);
-					: `import * as ${route.id} from '${file}';`;
+
-			})
+						return type === 'page'
+							? `import ${route.id}${index} from '${module}';`
+							: `import * as ${route.id}${index} from '${module}';`;
+					})
+					.join('\n')
+			)
 			.join('\n')}
 
 		export const routes = [
 			${routes
 				.map(route => {
-					const file = posixify(`../../${route.file}`);
+					const handlers = route.handlers
+						.map(({ type }, index) =>
+							`{ type: '${type}', module: ${route.id}${index} }`)
+						.join(', ');
 
 					if (route.id === '_4xx' || route.id === '_5xx') {
-						return `{ error: '${route.id.slice(1)}', module: ${route.id} }`;
+						return `{ error: '${route.id.slice(1)}', handlers: [${handlers}] }`;
 					}
 
 					const params = route.params.length === 0
 						? '{}'
 						: `{ ${route.params.map((part, i) => `${part}: match[${i + 1}]`).join(', ')} }`;
 
-					return `{ id: '${route.id}', type: '${route.type}', pattern: ${route.pattern}, params: ${route.params.length > 0 ? `match` : `()`} => (${params}), module: ${route.id} }`;
+					return `{ id: '${route.id}', pattern: ${route.pattern}, params: ${route.params.length > 0 ? `match` : `()`} => (${params}), handlers: [${handlers}] }`;
 				})
 				.join(',\n\t')
 			}

src/core/create_routes.ts

@@ -5,8 +5,9 @@ import { Route } from '../interfaces';
 
 export default function create_routes({ files } = { files: glob.sync('**/*.*', { cwd: locations.routes(), dot: true, nodir: true }) }) {
 	const routes: Route[] = files
+		.filter((file: string) => !/(^|\/|\\)_/.test(file))
 		.map((file: string) => {
-			if (/(^|\/|\\)_/.test(file)) return;
+			if (/(^|\/|\\)(_|\.(?!well-known))/.test(file)) return;
 
 			if (/]\[/.test(file)) {
 				throw new Error(`Invalid route ${file} — parameters must be separated`);
@@ -16,6 +17,58 @@ export default function create_routes({ files } = { files: glob.sync('**/*.*', {
 			const parts = base.split('/'); // glob output is always posix-style
 			if (parts[parts.length - 1] === 'index') parts.pop();
 
+			return {
+				files: [file],
+				base,
+				parts
+			};
+		})
+		.filter(Boolean)
+		.filter((a, index, array) => {
+			const found = array.slice(index + 1).find(b => a.base === b.base);
+			if (found) found.files.push(...a.files);
+			return !found;
+		})
+		.sort((a, b) => {
+			if (a.parts[0] === '4xx' || a.parts[0] === '5xx') return -1;
+			if (b.parts[0] === '4xx' || b.parts[0] === '5xx') return 1;
+
+			const max = Math.max(a.parts.length, b.parts.length);
+
+			for (let i = 0; i < max; i += 1) {
+				const a_part = a.parts[i];
+				const b_part = b.parts[i];
+
+				if (!a_part) return -1;
+				if (!b_part) return 1;
+
+				const a_sub_parts = get_sub_parts(a_part);
+				const b_sub_parts = get_sub_parts(b_part);
+				const max = Math.max(a_sub_parts.length, b_sub_parts.length);
+
+				for (let i = 0; i < max; i += 1) {
+					const a_sub_part = a_sub_parts[i];
+					const b_sub_part = b_sub_parts[i];
+
+					if (!a_sub_part) return 1; // b is more specific, so goes first
+					if (!b_sub_part) return -1;
+
+					if (a_sub_part.dynamic !== b_sub_part.dynamic) {
+						return a_sub_part.dynamic ? 1 : -1;
+					}
+
+					if (!a_sub_part.dynamic && a_sub_part.content !== b_sub_part.content) {
+						return (
+							(b_sub_part.content.length - a_sub_part.content.length) ||
+							(a_sub_part.content < b_sub_part.content ? -1 : 1)
+						);
+					}
+				}
+			}
+
+			throw new Error(`The ${a.base} and ${b.base} routes clash`);
+		})
+		.map(({ files, base, parts }) => {
 			const id = (
 				parts.join('_').replace(/[[\]]/g, '$').replace(/^\d/, '_$&').replace(/[^a-zA-Z0-9_$]/g, '_')
 			 ) || '_';
@@ -63,54 +116,26 @@ export default function create_routes({ files } = { files: glob.sync('**/*.*', {
 
 			return {
 				id,
-				type: path.extname(file) === '.html' ? 'page' : 'route',
+				handlers: files.map(file => ({
-				file,
+					type: path.extname(file) === '.html' ? 'page' : 'route',
+					file
+				})).sort((a, b) => {
+					if (a.type === 'page' && b.type === 'route') {
+						return 1;
+					}
+
+					if (a.type === 'route' && b.type === 'page') {
+						return -1;
+					}
+
+					return 0;
+				}),
 				pattern,
 				test,
 				exec,
 				parts,
 				params
 			};
-		})
-		.filter(Boolean)
-		.sort((a: Route, b: Route) => {
-			if (a.file === '4xx.html' || a.file === '5xx.html') return -1;
-			if (b.file === '4xx.html' || b.file === '5xx.html') return 1;
-
-			const max = Math.max(a.parts.length, b.parts.length);
-
-			for (let i = 0; i < max; i += 1) {
-				const a_part = a.parts[i];
-				const b_part = b.parts[i];
-
-				if (!a_part) return -1;
-				if (!b_part) return 1;
-
-				const a_sub_parts = get_sub_parts(a_part);
-				const b_sub_parts = get_sub_parts(b_part);
-				const max = Math.max(a_sub_parts.length, b_sub_parts.length);
-
-				for (let i = 0; i < max; i += 1) {
-					const a_sub_part = a_sub_parts[i];
-					const b_sub_part = b_sub_parts[i];
-
-					if (!a_sub_part) return 1; // b is more specific, so goes first
-					if (!b_sub_part) return -1;
-
-					if (a_sub_part.dynamic !== b_sub_part.dynamic) {
-						return a_sub_part.dynamic ? 1 : -1;
-					}
-
-					if (!a_sub_part.dynamic && a_sub_part.content !== b_sub_part.content) {
-						return (
-							(b_sub_part.content.length - a_sub_part.content.length) ||
-							(a_sub_part.content < b_sub_part.content ? -1 : 1)
-						);
-					}
-				}
-			}
-
-			throw new Error(`The ${a.file} and ${b.file} routes clash`);
 		});
 
 	return routes;

src/interfaces.ts

@@ -1,7 +1,9 @@
 export type Route = {
 	id: string;
-	type: 'page' | 'route';
+	handlers: {
-	file: string;
+		type: 'page' | 'route';
+		file: string;
+	}[];
 	pattern: RegExp;
 	test: (url: string) => boolean;
 	exec: (url: string) => Record<string, string>;

src/middleware.ts

@@ -20,14 +20,7 @@ type RouteObject = {
 	type: 'page' | 'route';
 	pattern: RegExp;
 	params: (match: RegExpMatchArray) => Record<string, string>;
-	module: {
+	module: Component;
-		render: (data: any, opts: { store: Store }) => {
-			head: string;
-			css: { code: string, map: any };
-			html: string
-		},
-		preload: (data: any) => any | Promise<any>
-	};
 	error?: string;
 }
 
@@ -47,10 +40,24 @@ interface Req extends ClientRequest {
 	headers: Record<string, string>;
 }
 
-export default function middleware({ routes, store }: {
+interface Component {
+	render: (data: any, opts: { store: Store }) => {
+		head: string;
+		css: { code: string, map: any };
+		html: string
+	},
+	preload: (data: any) => any | Promise<any>
+}
+
+export default function middleware({ App, routes, store }: {
+	App: Component,
 	routes: RouteObject[],
 	store: (req: Req) => Store
 }) {
+	if (!App) {
+		throw new Error(`As of 0.12, you must supply an App component to Sapper — see https://sapper.svelte.technology/guide#0-11-to-0-12 for more information`);
+	}
+
 	const output = locations.dest();
 
 	const client_info = JSON.parse(fs.readFileSync(path.join(output, 'client_info.json'), 'utf-8'));
@@ -90,7 +97,7 @@ export default function middleware({ routes, store }: {
 			cache_control: 'max-age=31536000'
 		}),
 
-		get_route_handler(client_info.assets, routes, store)
+		get_route_handler(client_info.assets, App, routes, store)
 	].filter(Boolean));
 
 	return middleware;
@@ -135,7 +142,7 @@ function serve({ prefix, pathname, cache_control }: {
 
 const resolved = Promise.resolve();
 
-function get_route_handler(chunks: Record<string, string>, routes: RouteObject[], store_getter: (req: Req) => Store) {
+function get_route_handler(chunks: Record<string, string>, App: Component, routes: RouteObject[], store_getter: (req: Req) => Store) {
 	const template = dev()
 		? () => fs.readFileSync(`${locations.app()}/template.html`, 'utf-8')
 		: (str => () => str)(fs.readFileSync(`${locations.dest()}/template.html`, 'utf-8'));
@@ -143,195 +150,212 @@ function get_route_handler(chunks: Record<string, string>, routes: RouteObject[]
 	function handle_route(route: RouteObject, req: Req, res: ServerResponse) {
 		req.params = route.params(route.pattern.exec(req.path));
 
-		const mod = route.module;
+		const handlers = route.handlers[Symbol.iterator]();
 
-		if (route.type === 'page') {
+		function next() {
-			res.setHeader('Content-Type', 'text/html');
+			try {
+				const { value: handler, done } = handlers.next();
 
-			// preload main.js and current route
+				if (done) {
-			// TODO detect other stuff we can preload? images, CSS, fonts?
+					handle_error(req, res, 404, 'Not found');
-			const link = []
+					return;
-				.concat(chunks.main, chunks[route.id])
+				}
-				.filter(file => !file.match(/\.map$/))
-				.map(file => `<${req.baseUrl}/client/${file}>;rel="preload";as="script"`)
-				.join(', ');
 
-			res.setHeader('Link', link);
+				const mod = handler.module;
 
-			const store = store_getter ? store_getter(req) : null;
+				if (handler.type === 'page') {
-			const data = { params: req.params, query: req.query };
+					res.setHeader('Content-Type', 'text/html');
 
-			let redirect: { statusCode: number, location: string };
+					// preload main.js and current route
-			let error: { statusCode: number, message: Error | string };
+					// TODO detect other stuff we can preload? images, CSS, fonts?
+					const link = []
+						.concat(chunks.main, chunks[route.id])
+						.filter(file => !file.match(/\.map$/))
+						.map(file => `<${req.baseUrl}/client/${file}>;rel="preload";as="script"`)
+						.join(', ');
 
-			Promise.resolve(
+					res.setHeader('Link', link);
-				mod.preload ? mod.preload.call({
-					redirect: (statusCode: number, location: string) => {
-						redirect = { statusCode, location };
-					},
-					error: (statusCode: number, message: Error | string) => {
-						error = { statusCode, message };
-					},
-					fetch: (url: string, opts?: any) => {
-						const parsed = new URL(url, `http://127.0.0.1:${process.env.PORT}${req.baseUrl ? req.baseUrl + '/'  :''}`);
 
-						if (opts) {
+					const store = store_getter ? store_getter(req) : null;
-							opts = Object.assign({}, opts);
+					const props = { params: req.params, query: req.query, path: req.path };
 
-							const include_cookies = (
+					let redirect: { statusCode: number, location: string };
-								opts.credentials === 'include' ||
+					let error: { statusCode: number, message: Error | string };
-								opts.credentials === 'same-origin' && parsed.origin === `http://127.0.0.1:${process.env.PORT}`
-							);
 
-							if (include_cookies) {
+					Promise.resolve(
-								const cookies: Record<string, string> = {};
+						mod.preload ? mod.preload.call({
-								if (!opts.headers) opts.headers = {};
+							redirect: (statusCode: number, location: string) => {
+								redirect = { statusCode, location };
+							},
+							error: (statusCode: number, message: Error | string) => {
+								error = { statusCode, message };
+							},
+							fetch: (url: string, opts?: any) => {
+								const parsed = new URL(url, `http://127.0.0.1:${process.env.PORT}${req.baseUrl ? req.baseUrl + '/'  :''}`);
 
-								const str = []
+								if (opts) {
-									.concat(
+									opts = Object.assign({}, opts);
-										cookie.parse(req.headers.cookie || ''),
-										cookie.parse(opts.headers.cookie || ''),
-										cookie.parse(res.getHeader('Set-Cookie') || '')
-									)
-									.map(cookie => {
-										return Object.keys(cookie)
-											.map(name => `${name}=${encodeURIComponent(cookie[name])}`)
-											.join('; ');
-									})
-									.filter(Boolean)
-									.join(', ');
 
-								opts.headers.cookie = str;
+									const include_cookies = (
-							}
+										opts.credentials === 'include' ||
+										opts.credentials === 'same-origin' && parsed.origin === `http://127.0.0.1:${process.env.PORT}`
+									);
+
+									if (include_cookies) {
+										const cookies: Record<string, string> = {};
+										if (!opts.headers) opts.headers = {};
+
+										const str = []
+											.concat(
+												cookie.parse(req.headers.cookie || ''),
+												cookie.parse(opts.headers.cookie || ''),
+												cookie.parse(res.getHeader('Set-Cookie') || '')
+											)
+											.map(cookie => {
+												return Object.keys(cookie)
+													.map(name => `${name}=${encodeURIComponent(cookie[name])}`)
+													.join('; ');
+											})
+											.filter(Boolean)
+											.join(', ');
+
+										opts.headers.cookie = str;
+									}
+								}
+
+								return fetch(parsed.href, opts);
+							},
+						store
+						}, req) : {}
+					).catch(err => {
+						error = { statusCode: 500, message: err };
+					}).then(preloaded => {
+						if (redirect) {
+							res.statusCode = redirect.statusCode;
+							res.setHeader('Location', `${req.baseUrl}/${redirect.location}`);
+							res.end();
+
+							return;
 						}
 
-						return fetch(parsed.href, opts);
+						if (error) {
-					},
+							handle_error(req, res, error.statusCode, error.message);
-					store
+							return;
-				}, req) : {}
+						}
-			).catch(err => {
-				error = { statusCode: 500, message: err };
-			}).then(preloaded => {
-				if (redirect) {
-					res.statusCode = redirect.statusCode;
-					res.setHeader('Location', `${req.baseUrl}/${redirect.location}`);
-					res.end();
 
-					return;
+						const serialized = {
-				}
+							preloaded: mod.preload && try_serialize(preloaded),
+							store: store && try_serialize(store.get())
+						};
+						Object.assign(props, preloaded);
 
-				if (error) {
+						const { html, head, css } = App.render({ Page: mod, props }, {
-					handle_error(req, res, error.statusCode, error.message);
+							store
-					return;
+						});
-				}
 
-				const serialized = {
+						let scripts = []
-					preloaded: mod.preload && try_serialize(preloaded),
+							.concat(chunks.main) // chunks main might be an array. it might not! thanks, webpack
-					store: store && try_serialize(store.get())
+							.filter(file => !file.match(/\.map$/))
-				};
+							.map(file => `<script src='${req.baseUrl}/client/${file}'></script>`)
-				Object.assign(data, preloaded);
+							.join('');
 
-				const { html, head, css } = mod.render(data, {
+						let inline_script = `__SAPPER__={${[
-					store
+							`baseUrl: "${req.baseUrl}"`,
-				});
+							serialized.preloaded && `preloaded: ${serialized.preloaded}`,
+							serialized.store && `store: ${serialized.store}`
+						].filter(Boolean).join(',')}};`;
 
-				let scripts = []
+						const has_service_worker = fs.existsSync(path.join(locations.dest(), 'service-worker.js'));
-					.concat(chunks.main) // chunks main might be an array. it might not! thanks, webpack
+						if (has_service_worker) {
-					.filter(file => !file.match(/\.map$/))
+							inline_script += `if ('serviceWorker' in navigator) navigator.serviceWorker.register('${req.baseUrl}/service-worker.js');`;
-					.map(file => `<script src='${req.baseUrl}/client/${file}'></script>`)
+						}
-					.join('');
 
-				let inline_script = `__SAPPER__={${[
+						const page = template()
-					`baseUrl: "${req.baseUrl}"`,
+							.replace('%sapper.base%', `<base href="${req.baseUrl}/">`)
-					serialized.preloaded && `preloaded: ${serialized.preloaded}`,
+							.replace('%sapper.scripts%', `<script>${inline_script}</script>${scripts}`)
-					serialized.store && `store: ${serialized.store}`
+							.replace('%sapper.html%', html)
-				].filter(Boolean).join(',')}};`;
+							.replace('%sapper.head%', `<noscript id='sapper-head-start'></noscript>${head}<noscript id='sapper-head-end'></noscript>`)
+							.replace('%sapper.styles%', (css && css.code ? `<style>${css.code}</style>` : ''));
 
-				const has_service_worker = fs.existsSync(path.join(locations.dest(), 'service-worker.js'));
+						res.end(page);
-				if (has_service_worker) {
-					inline_script += `if ('serviceWorker' in navigator) navigator.serviceWorker.register('${req.baseUrl}/service-worker.js');`;
-				}
 
-				const page = template()
+						if (process.send) {
-					.replace('%sapper.base%', `<base href="${req.baseUrl}/">`)
+							process.send({
-					.replace('%sapper.scripts%', `<script>${inline_script}</script>${scripts}`)
+								__sapper__: true,
-					.replace('%sapper.html%', html)
+								url: req.url,
-					.replace('%sapper.head%', `<noscript id='sapper-head-start'></noscript>${head}<noscript id='sapper-head-end'></noscript>`)
+								method: req.method,
-					.replace('%sapper.styles%', (css && css.code ? `<style>${css.code}</style>` : ''));
+								status: 200,
-
+								type: 'text/html',
-				res.end(page);
+								body: page
-
+							});
-				if (process.send) {
+						}
-					process.send({
-						__sapper__: true,
-						url: req.url,
-						method: req.method,
-						status: 200,
-						type: 'text/html',
-						body: page
 					});
 				}
-			});
-		}
 
-		else {
+				else {
-			const method = req.method.toLowerCase();
+					const method = req.method.toLowerCase();
-			// 'delete' cannot be exported from a module because it is a keyword,
+					// 'delete' cannot be exported from a module because it is a keyword,
-			// so check for 'del' instead
+					// so check for 'del' instead
-			const method_export = method === 'delete' ? 'del' : method;
+					const method_export = method === 'delete' ? 'del' : method;
-			const handler = mod[method_export];
+					const handle_method = mod[method_export];
-			if (handler) {
+					if (handle_method) {
-				if (process.env.SAPPER_EXPORT) {
+						if (process.env.SAPPER_EXPORT) {
-					const { write, end, setHeader } = res;
+							const { write, end, setHeader } = res;
-					const chunks: any[] = [];
+							const chunks: any[] = [];
-					const headers: Record<string, string> = {};
+							const headers: Record<string, string> = {};
 
-					// intercept data so that it can be exported
+							// intercept data so that it can be exported
-					res.write = function(chunk: any) {
+							res.write = function(chunk: any) {
-						chunks.push(new Buffer(chunk));
+								chunks.push(new Buffer(chunk));
-						write.apply(res, arguments);
+								write.apply(res, arguments);
-					};
+							};
 
-					res.setHeader = function(name: string, value: string) {
+							res.setHeader = function(name: string, value: string) {
-						headers[name.toLowerCase()] = value;
+								headers[name.toLowerCase()] = value;
-						setHeader.apply(res, arguments);
+								setHeader.apply(res, arguments);
-					};
+							};
 
-					res.end = function(chunk?: any) {
+							res.end = function(chunk?: any) {
-						if (chunk) chunks.push(new Buffer(chunk));
+								if (chunk) chunks.push(new Buffer(chunk));
-						end.apply(res, arguments);
+								end.apply(res, arguments);
 
-						process.send({
+								process.send({
-							__sapper__: true,
+									__sapper__: true,
-							url: req.url,
+									url: req.url,
-							method: req.method,
+									method: req.method,
-							status: res.statusCode,
+									status: res.statusCode,
-							type: headers['content-type'],
+									type: headers['content-type'],
-							body: Buffer.concat(chunks).toString()
+									body: Buffer.concat(chunks).toString()
-						});
+								});
-					};
+							};
-				}
+						}
 
-				const handle_bad_result = (err?: Error) => {
+						const handle_bad_result = (err?: Error) => {
-					if (err) {
+							if (err) {
-						console.error(err.stack);
+								console.error(err.stack);
-						res.statusCode = 500;
+								res.statusCode = 500;
-						res.end(err.message);
+								res.end(err.message);
+							} else {
+								process.nextTick(next);
+							}
+						};
+
+						try {
+							handle_method(req, res, handle_bad_result);
+						} catch (err) {
+							handle_bad_result(err);
+						}
 					} else {
-						handle_error(req, res, 404, 'Not found');
+						// no matching handler for method
+						process.nextTick(next);
 					}
-				};
-
-				try {
-					handler(req, res, handle_bad_result);
-				} catch (err) {
-					handle_bad_result(err);
 				}
-			} else {
+			} catch (error) {
-				// no matching handler for method — 404
+				handle_error(req, res, 500, error);
-				handle_error(req, res, 404, 'Not found');
 			}
 		}
+
+		next();
 	}
 
 	const not_found_route = routes.find((route: RouteObject) => route.error === '4xx');
@@ -349,39 +373,62 @@ function get_route_handler(chunks: Record<string, string>, routes: RouteObject[]
 			? not_found_route
 			: error_route;
 
-		const title: string = not_found
+		function render_page({ head, css, html }) {
-			? 'Not found'
+			const page = template()
-			: `Internal server error: ${error.message}`;
+				.replace('%sapper.base%', `<base href="${req.baseUrl}/">`)
+				.replace('%sapper.scripts%', `<script>__SAPPER__={baseUrl: "${req.baseUrl}"}</script><script src='${req.baseUrl}/client/${chunks.main}'></script>`)
+				.replace('%sapper.html%', html)
+				.replace('%sapper.head%', `<noscript id='sapper-head-start'></noscript>${head}<noscript id='sapper-head-end'></noscript>`)
+				.replace('%sapper.styles%', (css && css.code ? `<style>${css.code}</style>` : ''));
 
-		const rendered = route ? route.module.render({
+			res.end(page);
-			status: statusCode,
+		}
-			error
-		}, {
-			store: store_getter && store_getter(req)
-		}) : { head: '', css: null, html: title };
 
-		const { head, css, html } = rendered;
+		function handle_notfound() {
+			const title: string = not_found
+				? 'Not found'
+				: `Internal server error: ${error.message}`;
 
-		const page = template()
+			render_page({ head: '', css: null, html: title });
-			.replace('%sapper.base%', `<base href="${req.baseUrl}/">`)
+		}
-			.replace('%sapper.scripts%', `<script>__SAPPER__={baseUrl: "${req.baseUrl}"}</script><script src='${req.baseUrl}/client/${chunks.main}'></script>`)
-			.replace('%sapper.html%', html)
-			.replace('%sapper.head%', `<noscript id='sapper-head-start'></noscript>${head}<noscript id='sapper-head-end'></noscript>`)
-			.replace('%sapper.styles%', (css && css.code ? `<style>${css.code}</style>` : ''));
 
-		res.end(page);
+		if (route) {
+			const handlers = route.handlers[Symbol.iterator]();
+
+			function next() {
+				const { value: handler, done } = handlers.next();
+
+				if (done) {
+					handle_notfound();
+				} else if (handler.type === 'page') {
+					render_page(handler.module.render({
+						status: statusCode,
+						error
+					}, {
+						store: store_getter && store_getter(req)
+					}));
+				} else {
+					const handle_method = mod[method_export];
+					if (handle_method) {
+						handle_method(req, res, next);
+					} else {
+						next();
+					}
+				}
+			}
+
+			next();
+		} else {
+			handle_notfound();
+		}
 	}
 
 	return function find_route(req: Req, res: ServerResponse) {
-		try {
+		for (const route of routes) {
-			for (const route of routes) {
+			if (!route.error && route.pattern.test(req.path)) return handle_route(route, req, res);
-				if (!route.error && route.pattern.test(req.path)) return handle_route(route, req, res);
-			}
-
-			handle_error(req, res, 404, 'Not found');
-		} catch (error) {
-			handle_error(req, res, 500, error);
 		}
+
+		handle_error(req, res, 404, 'Not found');
 	};
 }
 

src/runtime/index.ts

@@ -3,6 +3,7 @@ import { Component, ComponentConstructor, Params, Query, Route, RouteData, Scrol
 
 const manifest = typeof window !== 'undefined' && window.__SAPPER__;
 
+export let App: ComponentConstructor;
 export let component: Component;
 let target: Node;
 let store: Store;
@@ -27,10 +28,10 @@ function select_route(url: URL): Target {
 	if (url.origin !== window.location.origin) return null;
 	if (!url.pathname.startsWith(manifest.baseUrl)) return null;
 
-	const pathname = url.pathname.slice(manifest.baseUrl.length);
+	const path = url.pathname.slice(manifest.baseUrl.length);
 
 	for (const route of routes) {
-		const match = route.pattern.exec(pathname);
+		const match = route.pattern.exec(path);
 		if (match) {
 			if (route.ignore) return null;
 
@@ -43,18 +44,24 @@ function select_route(url: URL): Target {
 					query[key] = value || true;
 				})
 			}
-			return { url, route, data: { params, query } };
+			return { url, route, props: { params, query, path } };
 		}
 	}
 }
 
 let current_token: {};
 
-function render(Component: ComponentConstructor, data: any, scroll: ScrollPosition, token: {}) {
+function render(Page: ComponentConstructor, props: any, scroll: ScrollPosition, token: {}) {
 	if (current_token !== token) return;
 
+	const data = {
+		Page,
+		props,
+		preloading: false
+	};
+
 	if (component) {
-		component.destroy();
+		component.set(data);
 	} else {
 		// first load — remove SSR'd <head> contents
 		const start = document.querySelector('#sapper-head-start');
@@ -65,33 +72,39 @@ function render(Component: ComponentConstructor, data: any, scroll: ScrollPositi
 			detach(start);
 			detach(end);
 		}
-	}
 
-	component = new Component({
+		component = new App({
-		target,
+			target,
-		data,
+			data,
-		store,
+			store,
-		hydrate: !component
+			hydrate: true
-	});
+		});
+	}
 
 	if (scroll) {
 		window.scrollTo(scroll.x, scroll.y);
 	}
 }
 
-function prepare_route(Component: ComponentConstructor, data: RouteData) {
+function prepare_route(Page: ComponentConstructor, props: RouteData) {
 	let redirect: { statusCode: number, location: string } = null;
 	let error: { statusCode: number, message: Error | string } = null;
 
-	if (!Component.preload) {
+	if (!Page.preload) {
-		return { Component, data, redirect, error };
+		return { Page, props, redirect, error };
 	}
 
 	if (!component && manifest.preloaded) {
-		return { Component, data: Object.assign(data, manifest.preloaded), redirect, error };
+		return { Page, props: Object.assign(props, manifest.preloaded), redirect, error };
 	}
 
-	return Promise.resolve(Component.preload.call({
+	if (component) {
+		component.set({
+			preloading: true
+		});
+	}
+
+	return Promise.resolve(Page.preload.call({
 		store,
 		fetch: (url: string, opts?: any) => window.fetch(url, opts),
 		redirect: (statusCode: number, location: string) => {
@@ -100,7 +113,7 @@ function prepare_route(Component: ComponentConstructor, data: RouteData) {
 		error: (statusCode: number, message: Error | string) => {
 			error = { statusCode, message };
 		}
-	}, data)).catch(err => {
+	}, props)).catch(err => {
 		error = { statusCode: 500, message: err };
 	}).then(preloaded => {
 		if (error) {
@@ -108,15 +121,15 @@ function prepare_route(Component: ComponentConstructor, data: RouteData) {
 				? errors['4xx']
 				: errors['5xx'];
 
-			return route.load().then(({ default: Component }: { default: ComponentConstructor }) => {
+			return route.load().then(({ default: Page }: { default: ComponentConstructor }) => {
 				const err = error.message instanceof Error ? error.message : new Error(error.message);
-				Object.assign(data, { status: error.statusCode, error: err });
+				Object.assign(props, { status: error.statusCode, error: err });
-				return { Component, data, redirect: null };
+				return { Page, props, redirect: null };
 			});
 		}
 
-		Object.assign(data, preloaded)
+		Object.assign(props, preloaded)
-		return { Component, data, redirect };
+		return { Page, props, redirect };
 	});
 }
 
@@ -136,18 +149,18 @@ function navigate(target: Target, id: number) {
 
 	const loaded = prefetching && prefetching.href === target.url.href ?
 		prefetching.promise :
-		target.route.load().then(mod => prepare_route(mod.default, target.data));
+		target.route.load().then(mod => prepare_route(mod.default, target.props));
 
 	prefetching = null;
 
 	const token = current_token = {};
 
-	return loaded.then(({ Component, data, redirect }) => {
+	return loaded.then(({ Page, props, redirect }) => {
 		if (redirect) {
 			return goto(redirect.location, { replaceState: true });
 		}
 
-		render(Component, data, scroll_history[id], token);
+		render(Page, props, scroll_history[id], token);
 	});
 }
 
@@ -208,7 +221,7 @@ function handle_popstate(event: PopStateEvent) {
 
 let prefetching: {
 	href: string;
-	promise: Promise<{ Component: ComponentConstructor, data: any }>;
+	promise: Promise<{ Page: ComponentConstructor, props: any }>;
 } = null;
 
 export function prefetch(href: string) {
@@ -217,7 +230,7 @@ export function prefetch(href: string) {
 	if (selected && (!prefetching || href !== prefetching.href)) {
 		prefetching = {
 			href,
-			promise: selected.route.load().then(mod => prepare_route(mod.default, selected.data))
+			promise: selected.route.load().then(mod => prepare_route(mod.default, selected.props))
 		};
 	}
 }
@@ -240,12 +253,17 @@ function trigger_prefetch(event: MouseEvent | TouchEvent) {
 
 let inited: boolean;
 
-export function init(_target: Node, _routes: Route[], opts?: { store?: (data: any) => Store }) {
+export function init(opts: { App: ComponentConstructor, target: Node, routes: Route[], store?: (data: any) => Store }) {
-	target = _target;
+	if (opts instanceof HTMLElement) {
-	routes = _routes.filter(r => !r.error);
+		throw new Error(`The signature of init(...) has changed — see https://sapper.svelte.technology/guide#0-11-to-0-12 for more information`);
+	}
+
+	App = opts.App;
+	target = opts.target;
+	routes = opts.routes.filter(r => !r.error);
 	errors = {
-		'4xx': _routes.find(r => r.error === '4xx'),
+		'4xx': opts.routes.find(r => r.error === '4xx'),
-		'5xx': _routes.find(r => r.error === '5xx')
+		'5xx': opts.routes.find(r => r.error === '5xx')
 	};
 
 	if (opts && opts.store) {

src/runtime/interfaces.ts

@@ -3,11 +3,11 @@ import { Store } from '../interfaces';
 export { Store };
 export type Params = Record<string, string>;
 export type Query = Record<string, string | true>;
-export type RouteData = { params: Params, query: Query };
+export type RouteData = { params: Params, query: Query, path: string };
 
 export interface ComponentConstructor {
 	new (options: { target: Node, data: any, store: Store, hydrate: boolean }): Component;
-	preload: (data: { params: Params, query: Query }) => Promise<any>;
+	preload: (props: { params: Params, query: Query }) => Promise<any>;
 };
 
 export interface Component {
@@ -30,5 +30,5 @@ export type ScrollPosition = {
 export type Target = {
 	url: URL;
 	route: Route;
-	data: RouteData;
+	props: RouteData;
 };

test/app/app/App.html

@@ -0,0 +1,6 @@
+{#if preloading}
+	<progress class='preloading-progress' value=0.5/>
+{/if}
+
+<svelte:component this={Page} {...props}/>
+

test/app/app/client.js

@@ -1,9 +1,13 @@
 import { init, prefetchRoutes } from '../../../runtime.js';
 import { Store } from 'svelte/store.js';
 import { routes } from './manifest/client.js';
+import App from './App.html';
 
 window.init = () => {
-	return init(document.querySelector('#sapper'), routes, {
+	return init({
+		target: document.querySelector('#sapper'),
+		App,
+		routes,
 		store: data => new Store(data)
 	});
 };

test/app/app/server.js

@@ -5,6 +5,7 @@ import serve from 'serve-static';
 import sapper from '../../../dist/middleware.ts.js';
 import { Store } from 'svelte/store.js';
 import { routes } from './manifest/server.js';
+import App from './App.html'
 
 let pending;
 let ended;
@@ -86,6 +87,7 @@ const middlewares = [
 	},
 
 	sapper({
+		App,
 		routes,
 		store: () => {
 			return new Store({

test/common/test.js

@@ -574,6 +574,29 @@ function run({ mode, basepath = '' }) {
 					assert.ok(html.indexOf('service-worker.js') !== -1);
 				});
 			});
+
+			it('sets preloading true when appropriate', () => {
+				return nightmare
+					.goto(base)
+					.init()
+					.click('a[href="slow-preload"]')
+					.wait(100)
+					.evaluate(() => {
+						const progress = document.querySelector('progress');
+						return !!progress;
+					})
+					.then(hasProgressIndicator => {
+						assert.ok(hasProgressIndicator);
+					})
+					.then(() => nightmare.evaluate(() => window.fulfil()))
+					.then(() => nightmare.evaluate(() => {
+						const progress = document.querySelector('progress');
+						return !!progress;
+					}))
+					.then(hasProgressIndicator => {
+						assert.ok(!hasProgressIndicator);
+					});
+			});
 		});
 
 		describe('headers', () => {

test/unit/create_routes.test.js

@@ -2,7 +2,29 @@ const assert = require('assert');
 const { create_routes } = require('../../dist/core.ts.js');
 
 describe('create_routes', () => {
-	it('encodes caharcters not allowed in path', () => {
+	it('sorts handlers correctly', () => {
+		const routes = create_routes({
+			files: ['foo.html', 'foo.js']
+		});
+
+		assert.deepEqual(
+			routes.map(r => r.handlers),
+			[
+				[
+					{
+						type: 'route',
+						file: 'foo.js'
+					},
+					{
+						type: 'page',
+						file: 'foo.html'
+					}
+				]
+			]
+		)
+	});
+
+	it('encodes characters not allowed in path', () => {
 		const routes = create_routes({
 			files: [
 				'"',
@@ -27,7 +49,7 @@ describe('create_routes', () => {
 		});
 
 		assert.deepEqual(
-			routes.map(r => r.file),
+			routes.map(r => r.handlers[0].file),
 			[
 				'index.html',
 				'about.html',
@@ -59,7 +81,7 @@ describe('create_routes', () => {
 		});
 
 		assert.deepEqual(
-			routes.map(r => r.file),
+			routes.map(r => r.handlers[0].file),
 			[
 				'4xx.html',
 				'5xx.html',
@@ -95,7 +117,7 @@ describe('create_routes', () => {
 		});
 
 		assert.deepEqual(
-			routes.map(r => r.file),
+			routes.map(r => r.handlers[0].file),
 			[
 				'4xx.html',
 				'5xx.html',
@@ -125,7 +147,7 @@ describe('create_routes', () => {
 		for (let i = 0; i < routes.length; i += 1) {
 			const route = routes[i];
 			if (params = route.exec('/post/123')) {
-				file = route.file;
+				file = route.handlers[0].file;
 				break;
 			}
 		}
@@ -142,7 +164,7 @@ describe('create_routes', () => {
 		});
 
 		assert.deepEqual(
-			routes.map(r => r.file),
+			routes.map(r => r.handlers[0].file),
 			[
 				'index.html',
 				'e/f/g/h.html'
@@ -150,6 +172,17 @@ describe('create_routes', () => {
 		);
 	});
 
+	it('ignores files and directories with leading dots except .well-known', () => {
+		const routes = create_routes({
+			files: ['.well-known', '.unknown']
+		});
+
+		assert.deepEqual(
+			routes.map(r => r.handlers[0].file),
+			['.well-known']
+		);
+	});
+
 	it('matches /foo/:bar before /:baz/qux', () => {
 		const a = create_routes({
 			files: ['foo/[bar].html', '[baz]/qux.html']
@@ -159,12 +192,12 @@ describe('create_routes', () => {
 		});
 
 		assert.deepEqual(
-			a.map(r => r.file),
+			a.map(r => r.handlers[0].file),
 			['foo/[bar].html', '[baz]/qux.html']
 		);
 
 		assert.deepEqual(
-			b.map(r => r.file),
+			b.map(r => r.handlers[0].file),
 			['foo/[bar].html', '[baz]/qux.html']
 		);
 	});
@@ -174,13 +207,7 @@ describe('create_routes', () => {
 			create_routes({
 				files: ['[foo].html', '[bar]/index.html']
 			});
-		}, /The \[foo\].html and \[bar\]\/index.html routes clash/);
+		}, /The \[foo\] and \[bar\]\/index routes clash/);
-
-		assert.throws(() => {
-			create_routes({
-				files: ['foo.html', 'foo.js']
-			});
-		}, /The foo.html and foo.js routes clash/);
 	});
 
 	it('matches nested routes', () => {
@@ -203,7 +230,7 @@ describe('create_routes', () => {
 		});
 
 		assert.deepEqual(
-			routes.map(r => r.file),
+			routes.map(r => r.handlers[0].file),
 			['settings.html', 'settings/[submenu].html']
 		);
 	});