-> v0.12.0

switch to single App component model

CHANGELOG.md

@@ -1,5 +1,52 @@
 # 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))
+* Only keep necessary parts of webpack stats ([#251](https://github.com/sveltejs/sapper/pull/251))
+* Allow `NODE_ENV` to be overridden when building ([#241](https://github.com/sveltejs/sapper/issues/241))
+
+## 0.10.7
+
+* Allow routes to have a leading `.` ([#243](https://github.com/sveltejs/sapper/pull/243))
+* Only encode necessary characters in routes ([#234](https://github.com/sveltejs/sapper/pull/234))
+* Preserve existing `process.env` when exporting ([#245](https://github.com/sveltejs/sapper/pull/245))
+
+## 0.10.6
+
+* Fix error reporting in `sapper start`
+
+## 0.10.5
+
+* Fix missing service worker ([#231](https://github.com/sveltejs/sapper/pull/231))
+
+## 0.10.4
+
+* Upgrade chokidar, this time with a fix ([#227](https://github.com/sveltejs/sapper/pull/227))
+
+## 0.10.3
+
+* Downgrade chokidar ([#212](https://github.com/sveltejs/sapper/issues/212))
+
+## 0.10.2
+
+* Attach `store` to error pages
+* Fix sorting edge case ([#215](https://github.com/sveltejs/sapper/pull/215))
+
+## 0.10.1
+
+* Fix server-side `fetch` paths ([#207](https://github.com/sveltejs/sapper/pull/207))
+
 ## 0.10.0
 
 * Support mounting on a path (this requires `app/template.html` to include `%sapper.base%`) ([#180](https://github.com/sveltejs/sapper/issues/180))

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sapper",
-  "version": "0.10.0",
+  "version": "0.12.0",
   "description": "Military-grade apps, engineered by Svelte",
   "main": "dist/middleware.ts.js",
   "bin": {
@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "cheerio": "^1.0.0-rc.2",
-    "chokidar": "^2.0.2",
+    "chokidar": "^2.0.3",
     "clorox": "^1.0.3",
     "cookie": "^0.3.1",
     "devalue": "^1.0.1",
@@ -34,13 +34,12 @@
     "rimraf": "^2.6.2",
     "sade": "^1.4.0",
     "sander": "^0.6.0",
-    "source-map-support": "^0.5.4",
+    "source-map-support": "^0.5.5",
     "tslib": "^1.9.0",
     "url-parse": "^1.2.0",
     "webpack-format-messages": "^1.0.2"
   },
   "devDependencies": {
-    "@std/esm": "^0.25.3",
     "@types/glob": "^5.0.34",
     "@types/mkdirp": "^0.5.2",
     "@types/rimraf": "^2.0.2",
@@ -48,21 +47,19 @@
     "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",
     "polka": "^0.3.4",
-    "rollup": "^0.57.0",
-    "rollup-plugin-commonjs": "^9.1.0",
+    "rollup": "^0.58.2",
+    "rollup-plugin-commonjs": "^9.1.3",
     "rollup-plugin-json": "^2.3.0",
     "rollup-plugin-string": "^2.0.2",
     "rollup-plugin-typescript": "^0.8.1",
     "serve-static": "^1.13.2",
-    "svelte": "^1.57.4",
-    "svelte-loader": "^2.5.1",
-    "ts-node": "^5.0.1",
-    "typescript": "^2.6.2",
+    "svelte": "^2.4.4",
+    "svelte-loader": "^2.9.0",
+    "typescript": "^2.8.3",
     "walk-sync": "^0.3.2",
     "webpack": "^4.1.0"
   },

src/cli.ts

@@ -21,10 +21,12 @@ prog.command('dev')
 
 prog.command('build [dest]')
 	.describe('Create a production-ready version of your app')
-	.action(async (dest = 'build') => {
+	.option('-p, --port', 'Default of process.env.PORT', '3000')
+	.example(`build custom-dir -p 4567`)
+	.action(async (dest = 'build', opts: { port: string }) => {
 		console.log(`> Building...`);
 
-		process.env.NODE_ENV = 'production';
+		process.env.NODE_ENV = process.env.NODE_ENV || 'production';
 		process.env.SAPPER_DEST = dest;
 
 		const start = Date.now();
@@ -32,9 +34,23 @@ prog.command('build [dest]')
 		try {
 			const { build } = await import('./cli/build');
 			await build();
-			console.error(`\n> Finished in ${elapsed(start)}. Type ${clorox.bold.cyan(dest === 'build' ? 'npx sapper start' : `npx sapper start ${dest}`)} to run the app.`);
+
+			const launcher = path.resolve(dest, 'index.js');
+
+			fs.writeFileSync(launcher, `
+				// generated by sapper build at ${new Date().toISOString()}
+				process.env.NODE_ENV = process.env.NODE_ENV || 'production';
+				process.env.SAPPER_DEST = __dirname;
+				process.env.PORT = process.env.PORT || ${opts.port || 3000};
+
+				console.log('Starting server on port ' + process.env.PORT);
+				require('./server.js');
+			`.replace(/^\t+/gm, '').trim());
+
+			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);
 		}
 	});
 
@@ -68,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/cli/build.ts

@@ -35,7 +35,9 @@ export async function build() {
 	const client_stats = await compile(client);
 	console.log(`${clorox.inverse(`\nbuilt client`)}`);
 	console.log(client_stats.toString({ colors: true }));
-	fs.writeFileSync(path.join(output, 'client_info.json'), JSON.stringify(client_stats.toJson()));
+	fs.writeFileSync(path.join(output, 'client_info.json'), JSON.stringify({
+		assets: client_stats.toJson().assetsByChunkName
+	}));
 
 	const server_stats = await compile(server);
 	console.log(`${clorox.inverse(`\nbuilt server`)}`);

src/cli/dev.ts

@@ -102,7 +102,7 @@ export async function dev(opts: { port: number, open: boolean }) {
 
 	const hot_update_server = create_hot_update_server(dev_port);
 
-	watch_files(`${locations.routes()}/**/*`, ['add', 'unlink'], () => {
+	watch_files(locations.routes(), ['add', 'unlink'], () => {
 		const routes = create_routes();
 		create_main_manifests({ routes, dev_port });
 	});
@@ -263,7 +263,9 @@ export async function dev(opts: { port: number, open: boolean }) {
 		},
 
 		result: info => {
-			fs.writeFileSync(path.join(dir, 'client_info.json'), JSON.stringify(info, null, '  '));
+			fs.writeFileSync(path.join(dir, 'client_info.json'), JSON.stringify({
+				assets: info.assetsByChunkName
+			}, null, '  '));
 			deferreds.client.fulfil();
 
 			const client_files = info.assets.map((chunk: { name: string }) => `client/${chunk.name}`);
@@ -311,7 +313,8 @@ function watch_files(pattern: string, events: string[], callback: () => void) {
 
 	const watcher = chokidar.watch(pattern, {
 		persistent: true,
-		ignoreInitial: true
+		ignoreInitial: true,
+		disableGlobbing: true
 	});
 
 	events.forEach(event => {

src/cli/export.ts

@@ -35,12 +35,12 @@ export async function exporter(export_dir: string, { basepath = '' }) {
 
 	const proc = child_process.fork(path.resolve(`${build_dir}/server.js`), [], {
 		cwd: process.cwd(),
-		env: {
+		env: Object.assign({
 			PORT: port,
 			NODE_ENV: 'production',
 			SAPPER_DEST: build_dir,
 			SAPPER_EXPORT: 'true'
-		}
+		}, process.env)
 	});
 
 	const seen = new Set();
@@ -103,4 +103,4 @@ export async function exporter(export_dir: string, { basepath = '' }) {
 	return ports.wait(port)
 		.then(() => handle(new URL(`/${basepath}`, origin))) // TODO all static routes
 		.then(() => proc.kill());
-}
+}

src/cli/start.ts

@@ -11,13 +11,13 @@ export async function start(dir: string, opts: { port: number, open: boolean })
 	const server = path.resolve(dir, 'server.js');
 
 	if (!fs.existsSync(server)) {
-		console.log(clorox.bold.red(`> ${dir}/server.js does not exist — type ${clorox.bold.cyan(dir === 'build' ? `npx sapper build` : `npx sapper build ${dir}`)} to create it`));
+		console.log(`${clorox.bold.red(`> ${dir}/server.js does not exist — type ${clorox.bold.cyan(dir === 'build' ? `npx sapper build` : `npx sapper build ${dir}`)} to create it`)}`);
 		return;
 	}
 
 	if (port) {
 		if (!await ports.check(port)) {
-			console.log(clorox.bold.red(`> Port ${port} is unavailable`));
+			console.log(`${clorox.bold.red(`> Port ${port} is unavailable`)}`);
 			return;
 		}
 	} else {

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 => {
-				const file = posixify(`${path_to_routes}/${route.file}`);
-				return route.type === 'page'
-					? `import ${route.id} from '${file}';`
-					: `import * as ${route.id} from '${file}';`;
-			})
+			.map(route =>
+				route.handlers
+					.map(({ type, file }, index) => {
+						const module = posixify(`${path_to_routes}/${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

@@ -3,10 +3,11 @@ import glob from 'glob';
 import { locations } from '../config';
 import { Route } from '../interfaces';
 
-export default function create_routes({ files } = { files: glob.sync('**/*.*', { cwd: locations.routes(), nodir: true }) }) {
+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, '_')
 			 ) || '_';
@@ -33,7 +86,7 @@ export default function create_routes({ files } = { files: glob.sync('**/*.*', {
 			let i = parts.length;
 			let nested = true;
 			while (i--) {
-				const part = encodeURIComponent(parts[i].normalize()).replace(/%5B/g, '[').replace(/%5D/g, ']');
+				const part = encodeURI(parts[i].normalize()).replace(/\?/g, '%3F').replace(/#/g, '%23').replace(/%5B/g, '[').replace(/%5D/g, ']');
 				const dynamic = ~part.indexOf('[');
 
 				if (dynamic) {
@@ -63,51 +116,26 @@ export default function create_routes({ files } = { files: glob.sync('**/*.*', {
 
 			return {
 				id,
-				type: path.extname(file) === '.html' ? 'page' : 'route',
-				file,
+				handlers: files.map(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;
-					}
-				}
-			}
-
-			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';
-	file: string;
+	handlers: {
+		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: {
-		render: (data: any, opts: { store: Store }) => {
-			head: string;
-			css: { code: string, map: any };
-			html: string
-		},
-		preload: (data: any) => any | Promise<any>
-	};
+	module: Component;
 	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.assetsByChunkName, 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') {
-			res.setHeader('Content-Type', 'text/html');
+		function next() {
+			try {
+				const { value: handler, done } = handlers.next();
 
-			// preload main.js and current route
-			// 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(', ');
+				if (done) {
+					handle_error(req, res, 404, 'Not found');
+					return;
+				}
 
-			res.setHeader('Link', link);
+				const mod = handler.module;
 
-			const store = store_getter ? store_getter(req) : null;
-			const data = { params: req.params, query: req.query };
+				if (handler.type === 'page') {
+					res.setHeader('Content-Type', 'text/html');
 
-			let redirect: { statusCode: number, location: string };
-			let error: { statusCode: number, message: Error | string };
+					// preload main.js and current route
+					// 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(
-				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.path}`);
+					res.setHeader('Link', link);
 
-						if (opts) {
-							opts = Object.assign({}, opts);
+					const store = store_getter ? store_getter(req) : null;
+					const props = { params: req.params, query: req.query, path: req.path };
 
-							const include_cookies = (
-								opts.credentials === 'include' ||
-								opts.credentials === 'same-origin' && parsed.origin === `http://127.0.0.1:${process.env.PORT}`
-							);
+					let redirect: { statusCode: number, location: string };
+					let error: { statusCode: number, message: Error | string };
 
-							if (include_cookies) {
-								const cookies: Record<string, string> = {};
-								if (!opts.headers) opts.headers = {};
+					Promise.resolve(
+						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 + '/'  :''}`);
 
-								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(', ');
+								if (opts) {
+									opts = Object.assign({}, opts);
 
-								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);
-					},
-					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();
+						if (error) {
+							handle_error(req, res, error.statusCode, error.message);
+							return;
+						}
 
-					return;
-				}
+						const serialized = {
+							preloaded: mod.preload && try_serialize(preloaded),
+							store: store && try_serialize(store.get())
+						};
+						Object.assign(props, preloaded);
 
-				if (error) {
-					handle_error(req, res, error.statusCode, error.message);
-					return;
-				}
+						const { html, head, css } = App.render({ Page: mod, props }, {
+							store
+						});
 
-				const serialized = {
-					preloaded: mod.preload && try_serialize(preloaded),
-					store: store && try_serialize(store.get())
-				};
-				Object.assign(data, preloaded);
+						let scripts = []
+							.concat(chunks.main) // chunks main might be an array. it might not! thanks, webpack
+							.filter(file => !file.match(/\.map$/))
+							.map(file => `<script src='${req.baseUrl}/client/${file}'></script>`)
+							.join('');
 
-				const { html, head, css } = mod.render(data, {
-					store
-				});
+						let inline_script = `__SAPPER__={${[
+							`baseUrl: "${req.baseUrl}"`,
+							serialized.preloaded && `preloaded: ${serialized.preloaded}`,
+							serialized.store && `store: ${serialized.store}`
+						].filter(Boolean).join(',')}};`;
 
-				let scripts = []
-					.concat(chunks.main) // chunks main might be an array. it might not! thanks, webpack
-					.filter(file => !file.match(/\.map$/))
-					.map(file => `<script src='${req.baseUrl}/client/${file}'></script>`)
-					.join('');
+						const has_service_worker = fs.existsSync(path.join(locations.dest(), 'service-worker.js'));
+						if (has_service_worker) {
+							inline_script += `if ('serviceWorker' in navigator) navigator.serviceWorker.register('${req.baseUrl}/service-worker.js');`;
+						}
 
-				let inline_script = `__SAPPER__={${[
-					`baseUrl: "${req.baseUrl}"`,
-					serialized.preloaded && `preloaded: ${serialized.preloaded}`,
-					serialized.store && `store: ${serialized.store}`
-				].filter(Boolean).join(',')}}`
+						const page = template()
+							.replace('%sapper.base%', `<base href="${req.baseUrl}/">`)
+							.replace('%sapper.scripts%', `<script>${inline_script}</script>${scripts}`)
+							.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 has_service_worker = fs.existsSync(path.join(locations.dest(), 'service-worker.js'));
-				if (has_service_worker) {
-					`if ('serviceWorker' in navigator) navigator.serviceWorker.register('${req.baseUrl}/service-worker.js')`
-				}
+						res.end(page);
 
-				const page = template()
-					.replace('%sapper.base%', `<base href="${req.baseUrl}/">`)
-					.replace('%sapper.scripts%', `<script>${inline_script}</script>${scripts}`)
-					.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 (process.send) {
-					process.send({
-						__sapper__: true,
-						url: req.url,
-						method: req.method,
-						status: 200,
-						type: 'text/html',
-						body: page
+						if (process.send) {
+							process.send({
+								__sapper__: true,
+								url: req.url,
+								method: req.method,
+								status: 200,
+								type: 'text/html',
+								body: page
+							});
+						}
 					});
 				}
-			});
-		}
 
-		else {
-			const method = req.method.toLowerCase();
-			// 'delete' cannot be exported from a module because it is a keyword,
-			// so check for 'del' instead
-			const method_export = method === 'delete' ? 'del' : method;
-			const handler = mod[method_export];
-			if (handler) {
-				if (process.env.SAPPER_EXPORT) {
-					const { write, end, setHeader } = res;
-					const chunks: any[] = [];
-					const headers: Record<string, string> = {};
+				else {
+					const method = req.method.toLowerCase();
+					// 'delete' cannot be exported from a module because it is a keyword,
+					// so check for 'del' instead
+					const method_export = method === 'delete' ? 'del' : method;
+					const handle_method = mod[method_export];
+					if (handle_method) {
+						if (process.env.SAPPER_EXPORT) {
+							const { write, end, setHeader } = res;
+							const chunks: any[] = [];
+							const headers: Record<string, string> = {};
 
-					// intercept data so that it can be exported
-					res.write = function(chunk: any) {
-						chunks.push(new Buffer(chunk));
-						write.apply(res, arguments);
-					};
+							// intercept data so that it can be exported
+							res.write = function(chunk: any) {
+								chunks.push(new Buffer(chunk));
+								write.apply(res, arguments);
+							};
 
-					res.setHeader = function(name: string, value: string) {
-						headers[name.toLowerCase()] = value;
-						setHeader.apply(res, arguments);
-					};
+							res.setHeader = function(name: string, value: string) {
+								headers[name.toLowerCase()] = value;
+								setHeader.apply(res, arguments);
+							};
 
-					res.end = function(chunk?: any) {
-						if (chunk) chunks.push(new Buffer(chunk));
-						end.apply(res, arguments);
+							res.end = function(chunk?: any) {
+								if (chunk) chunks.push(new Buffer(chunk));
+								end.apply(res, arguments);
 
-						process.send({
-							__sapper__: true,
-							url: req.url,
-							method: req.method,
-							status: res.statusCode,
-							type: headers['content-type'],
-							body: Buffer.concat(chunks).toString()
-						});
-					};
-				}
+								process.send({
+									__sapper__: true,
+									url: req.url,
+									method: req.method,
+									status: res.statusCode,
+									type: headers['content-type'],
+									body: Buffer.concat(chunks).toString()
+								});
+							};
+						}
 
-				const handle_bad_result = (err?: Error) => {
-					if (err) {
-						console.error(err.stack);
-						res.statusCode = 500;
-						res.end(err.message);
+						const handle_bad_result = (err?: Error) => {
+							if (err) {
+								console.error(err.stack);
+								res.statusCode = 500;
+								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 {
-				// no matching handler for method — 404
-				handle_error(req, res, 404, 'Not found');
+			} catch (error) {
+				handle_error(req, res, 500, error);
 			}
 		}
+
+		next();
 	}
 
 	const not_found_route = routes.find((route: RouteObject) => route.error === '4xx');
@@ -349,37 +373,62 @@ function get_route_handler(chunks: Record<string, string>, routes: RouteObject[]
 			? not_found_route
 			: error_route;
 
-		const title: string = not_found
-			? 'Not found'
-			: `Internal server error: ${error.message}`;
+		function render_page({ head, css, html }) {
+			const page = template()
+				.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({
-			status: statusCode,
-			error
-		}) : { head: '', css: null, html: title };
+			res.end(page);
+		}
 
-		const { head, css, html } = rendered;
+		function handle_notfound() {
+			const title: string = not_found
+				? 'Not found'
+				: `Internal server error: ${error.message}`;
 
-		const page = template()
-			.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>` : ''));
+			render_page({ head: '', css: null, html: title });
+		}
 
-		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) {
-				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);
+		for (const route of routes) {
+			if (!route.error && route.pattern.test(req.path)) return handle_route(route, req, res);
 		}
+
+		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({
-		target,
-		data,
-		store,
-		hydrate: !component
-	});
+		component = new App({
+			target,
+			data,
+			store,
+			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) {
-		return { Component, data, redirect, error };
+	if (!Page.preload) {
+		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 });
-				return { Component, data, redirect: null };
+				Object.assign(props, { status: error.statusCode, error: err });
+				return { Page, props, redirect: null };
 			});
 		}
 
-		Object.assign(data, preloaded)
-		return { Component, data, redirect };
+		Object.assign(props, preloaded)
+		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,21 +221,30 @@ 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) {
 	const selected = select_route(new URL(href, document.baseURI));
 
-	if (selected) {
+	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))
 		};
 	}
 }
 
-function handle_touchstart_mouseover(event: MouseEvent | TouchEvent) {
+let mousemove_timeout: NodeJS.Timer;
+
+function handle_mousemove(event: MouseEvent) {
+	clearTimeout(mousemove_timeout);
+	mousemove_timeout = setTimeout(() => {
+		trigger_prefetch(event);
+	}, 20);
+}
+
+function trigger_prefetch(event: MouseEvent | TouchEvent) {
 	const a: HTMLAnchorElement = <HTMLAnchorElement>findAnchor(<Node>event.target);
 	if (!a || a.rel !== 'prefetch') return;
 
@@ -231,12 +253,17 @@ function handle_touchstart_mouseover(event: MouseEvent | TouchEvent) {
 
 let inited: boolean;
 
-export function init(_target: Node, _routes: Route[], opts?: { store?: (data: any) => Store }) {
-	target = _target;
-	routes = _routes.filter(r => !r.error);
+export function init(opts: { App: ComponentConstructor, target: Node, routes: Route[], store?: (data: any) => Store }) {
+	if (opts instanceof HTMLElement) {
+		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'),
-		'5xx': _routes.find(r => r.error === '5xx')
+		'4xx': opts.routes.find(r => r.error === '4xx'),
+		'5xx': opts.routes.find(r => r.error === '5xx')
 	};
 
 	if (opts && opts.store) {
@@ -248,8 +275,8 @@ export function init(_target: Node, _routes: Route[], opts?: { store?: (data: an
 		window.addEventListener('popstate', handle_popstate);
 
 		// prefetch
-		window.addEventListener('touchstart', handle_touchstart_mouseover);
-		window.addEventListener('mouseover', handle_touchstart_mouseover);
+		window.addEventListener('touchstart', trigger_prefetch);
+		window.addEventListener('mousemove', handle_mousemove);
 
 		inited = true;
 	}

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/app/routes/4xx.html

@@ -1,6 +1,6 @@
-<:Head>
-	<title>{{status}}</title>
-</:Head>
+<svelte:head>
+	<title>{status}</title>
+</svelte:head>
 
 <h1>Not found</h1>
-<p>{{error.message}}</p>
+<p>{error.message}</p>

test/app/routes/5xx.html

@@ -1,6 +1,6 @@
-<:Head>
+<svelte:head>
 	<title>Internal server error</title>
-</:Head>
+</svelte:head>
 
 <h1>Internal server error</h1>
-<p>{{error.message}}</p>
+<p>{error.message}</p>

test/app/routes/about.html

@@ -1,6 +1,6 @@
-<:Head>
+<svelte:head>
 	<title>About</title>
-</:Head>
+</svelte:head>
 
 <h1>About this site</h1>
 

test/app/routes/blog/[slug].html

@@ -1,11 +1,11 @@
-<:Head>
-	<title>{{post.title}}</title>
-</:Head>
+<svelte:head>
+	<title>{post.title}</title>
+</svelte:head>
 
-<h1>{{post.title}}</h1>
+<h1>{post.title}</h1>
 
 <div class='content'>
-	{{{post.html}}}
+	{@html post.html}
 </div>
 
 <script>

test/app/routes/blog/index.html

@@ -1,17 +1,17 @@
-<:Head>
+<svelte:head>
 	<title>Blog</title>
-</:Head>
+</svelte:head>
 
 <h1>Recent posts</h1>
 
 <ul>
-	{{#each posts as post}}
+	{#each posts as post}
 		<!-- we're using the non-standard `rel=prefetch` attribute to
 				tell Sapper to load the data for the page as soon as
 				the user hovers over the link or taps it, instead of
 				waiting for the 'click' event -->
-		<li><a rel='prefetch' href='blog/{{post.slug}}'>{{post.title}}</a></li>
-	{{/each}}
+		<li><a rel='prefetch' href='blog/{post.slug}'>{post.title}</a></li>
+	{/each}
 </ul>
 
 <script>

test/app/routes/credentials/index.html

@@ -1,9 +1,8 @@
-<h1>{{message}}</h1>
+<h1>{message}</h1>
 
 <script>
 	export default {
 		preload({ query }) {
-			console.log(`here ${this.fetch}`);
 			return this.fetch(`credentials/test.json`, {
 				credentials: query.creds
 			}).then(r => r.json());

test/app/routes/index.html

@@ -1,6 +1,6 @@
-<:Head>
+<svelte:head>
 	<title>Sapper project template</title>
-</:Head>
+</svelte:head>
 
 <h1>Great success!</h1>
 
@@ -11,7 +11,7 @@
 <a href='blog/nope'>broken link</a>
 <a href='blog/throw-an-error'>error link</a>
 <a href='credentials?creds=include'>credentials</a>
-<a rel=prefetch class='{{page === "blog"  ? "selected" : ""}}' href='blog'>blog</a>
+<a rel=prefetch class='{page === "blog"  ? "selected" : ""}' href='blog'>blog</a>
 
 <div class='hydrate-test'></div>
 

test/app/routes/preload-values/custom-class.html

@@ -1,4 +1,4 @@
-<h1>{{foo.bar()}}</h1>
+<h1>{foo.bar()}</h1>
 
 <script>
 	export default {

test/app/routes/preload-values/set.html

@@ -1,4 +1,4 @@
-<h1>{{set.has('x')}}</h1>
+<h1>{set.has('x')}</h1>
 
 <script>
 	export default {

test/app/routes/show-url.html

@@ -1,4 +1,4 @@
-<p>URL is {{url}}</p>
+<p>URL is {url}</p>
 
 <script>
 	export default {

test/app/routes/store.html

@@ -1 +1 @@
-<h1>{{$title}}</h1>
+<h1>{$title}</h1>

test/common/test.js

@@ -1,3 +1,4 @@
+const fs = require('fs');
 const path = require('path');
 const assert = require('assert');
 const Nightmare = require('nightmare');
@@ -38,6 +39,7 @@ describe('sapper', function() {
 	rimraf.sync('export');
 	rimraf.sync('build');
 	rimraf.sync('.sapper');
+	rimraf.sync('start.js');
 
 	this.timeout(process.env.CI ? 30000 : 10000);
 
@@ -148,7 +150,7 @@ function run({ mode, basepath = '' }) {
 
 		before(() => {
 			const promise = mode === 'production'
-				? exec(`node ${cli} build`).then(() => ports.find(3000))
+				? exec(`node ${cli} build -l`).then(() => ports.find(3000))
 				: ports.find(3000).then(port => {
 					exec(`node ${cli} dev`);
 					return ports.wait(port).then(() => port);
@@ -160,6 +162,10 @@ function run({ mode, basepath = '' }) {
 
 				const dir = mode === 'production' ? 'build' : '.sapper';
 
+				if (mode === 'production') {
+					assert.ok(fs.existsSync('build/index.js'));
+				}
+
 				proc = require('child_process').fork(`${dir}/server.js`, {
 					cwd: process.cwd(),
 					env: {
@@ -301,14 +307,17 @@ function run({ mode, basepath = '' }) {
 					});
 			});
 
-			it('reuses prefetch promise', () => {
+			it.skip('reuses prefetch promise', () => {
 				return nightmare
 					.goto(`${base}/blog`)
 					.init()
 					.then(() => {
 						return capture(() => {
 							return nightmare
-								.mouseover('[href="blog/what-is-sapper"]')
+								.evaluate(() => {
+									const a = document.querySelector('[href="blog/what-is-sapper"]');
+									a.dispatchEvent(new MouseEvent('mousemove'));
+								})
 								.wait(200);
 						});
 					})
@@ -559,6 +568,35 @@ function run({ mode, basepath = '' }) {
 						assert.equal(title, 'woohoo!');
 					});
 			});
+
+			it('includes service worker', () => {
+				return nightmare.goto(base).page.html().then(html => {
+					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,18 +2,59 @@ const assert = require('assert');
 const { create_routes } = require('../../dist/core.ts.js');
 
 describe('create_routes', () => {
+	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: [
+				'"',
+				'#',
+				'?'
+			]
+		});
+
+		assert.deepEqual(
+			routes.map(r => r.pattern),
+			[
+				/^\/%22\/?$/,
+				/^\/%23\/?$/,
+				/^\/%3F\/?$/
+			]
+		);
+	});
+
 	it('sorts routes correctly', () => {
 		const routes = create_routes({
 			files: ['index.html', 'about.html', 'post/f[xx].html', '[wildcard].html', 'post/foo.html', 'post/[id].html', 'post/bar.html', 'post/[id].json.js']
 		});
 
 		assert.deepEqual(
-			routes.map(r => r.file),
+			routes.map(r => r.handlers[0].file),
 			[
 				'index.html',
 				'about.html',
-				'post/foo.html',
 				'post/bar.html',
+				'post/foo.html',
 				'post/f[xx].html',
 				'post/[id].json.js',
 				'post/[id].html',
@@ -23,7 +64,7 @@ describe('create_routes', () => {
 	});
 
 	it('prefers index page to nested route', () => {
-		const routes = create_routes({
+		let routes = create_routes({
 			files: [
 				'api/examples/[slug].js',
 				'api/examples/index.js',
@@ -40,7 +81,7 @@ describe('create_routes', () => {
 		});
 
 		assert.deepEqual(
-			routes.map(r => r.file),
+			routes.map(r => r.handlers[0].file),
 			[
 				'4xx.html',
 				'5xx.html',
@@ -55,6 +96,45 @@ describe('create_routes', () => {
 				'api/gists/[id].js',
 			]
 		);
+
+		routes = create_routes({
+			files: [
+				'4xx.html',
+				'5xx.html',
+				'api/blog/[slug].js',
+				'api/blog/index.js',
+				'api/guide/contents.js',
+				'api/guide/index.js',
+				'blog/[slug].html',
+				'blog/index.html',
+				'blog/rss.xml.js',
+				'gist/[id].js',
+				'gist/create.js',
+				'guide/index.html',
+				'index.html',
+				'repl/index.html'
+			]
+		});
+
+		assert.deepEqual(
+			routes.map(r => r.handlers[0].file),
+			[
+				'4xx.html',
+				'5xx.html',
+				'index.html',
+				'guide/index.html',
+				'blog/index.html',
+				'blog/rss.xml.js',
+				'blog/[slug].html',
+				'gist/create.js',
+				'gist/[id].js',
+				'repl/index.html',
+				'api/guide/index.js',
+				'api/guide/contents.js',
+				'api/blog/index.js',
+				'api/blog/[slug].js',
+			]
+		);
 	});
 
 	it('generates params', () => {
@@ -67,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;
 			}
 		}
@@ -84,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'
@@ -92,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']
@@ -101,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']
 		);
 	});
@@ -116,13 +207,7 @@ describe('create_routes', () => {
 			create_routes({
 				files: ['[foo].html', '[bar]/index.html']
 			});
-		}, /The \[foo\].html and \[bar\]\/index.html routes clash/);
-
-		assert.throws(() => {
-			create_routes({
-				files: ['foo.html', 'foo.js']
-			});
-		}, /The foo.html and foo.js routes clash/);
+		}, /The \[foo\] and \[bar\]\/index routes clash/);
 	});
 
 	it('matches nested routes', () => {
@@ -145,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']
 		);
 	});