-> v0.17.1

Merge pull request #371 from sveltejs/show-files-on-error
show which file is causing an error/warning
2026-01-13 19:45:26 +00:00 · 2018-08-23 11:23:40 -04:00 · 2018-08-23 11:21:04 -04:00 · 2018-08-23 11:09:02 -04:00 · 2018-08-19 22:07:04 -04:00 · 2018-08-19 22:05:33 -04:00
110 changed files with 10421 additions and 1351 deletions
--- a/.travis.yml
+++ b/.travis.yml
@@ -18,4 +18,4 @@ addons:
 install:
  - export DISPLAY=':99.0'
  - Xvfb :99 -screen 0 1024x768x24 > /dev/null 2>&1 &
-  - npm install
+  - npm ci || npm i
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,141 @@
 # sapper changelog

+## 0.17.1
+
+* Print which file is causing build errors/warnings ([#371](https://github.com/sveltejs/sapper/pull/371))
+
+## 0.17.0
+
+* Use `cheap-watch` instead of `chokidar` ([#364](https://github.com/sveltejs/sapper/issues/364))
+
+## 0.16.1
+
+* Fix file watching regression in previous version
+
+## 0.16.0
+
+* Slim down installed package ([#363](https://github.com/sveltejs/sapper/pull/363))
+
+## 0.15.8
+
+* Only set `preloading: true` on navigation, not prefetch ([#352](https://github.com/sveltejs/sapper/issues/352))
+* Provide fallback for missing preload errors ([#361](https://github.com/sveltejs/sapper/pull/361))
+
+## 0.15.7
+
+* Strip leading slash from redirects ([#291](https://github.com/sveltejs/sapper/issues/291))
+* Pass `(req, res)` to store getter ([#344](https://github.com/sveltejs/sapper/issues/344))
+
+## 0.15.6
+
+* Fix exporting with custom basepath ([#342](https://github.com/sveltejs/sapper/pull/342))
+
+## 0.15.5
+
+* Faster `export` with more explanatory output ([#335](https://github.com/sveltejs/sapper/pull/335))
+* Only blur `activeElement` if it exists ([#332](https://github.com/sveltejs/sapper/issues/332))
+* Don't emit `client_info.json` or `server_info.json` ([#318](https://github.com/sveltejs/sapper/issues/318))
+
+## 0.15.4
+
+* Add `ignore` option ([#326](https://github.com/sveltejs/sapper/pull/326))
+
+## 0.15.3
+
+* Crawl pages in parallel when exporting ([#329](https://github.com/sveltejs/sapper/pull/329))
+* Don't minify inline JS when exporting ([#328](https://github.com/sveltejs/sapper/pull/328))
+
+## 0.15.2
+
+* Collapse component chains where no intermediate layout component is specified ([#312](https://github.com/sveltejs/sapper/issues/312))
+
+## 0.15.1
+
+* Prevent confusing error when no root layout is specified
+
+## 0.15.0
+
+* Nested routes (consult [migration guide](https://sapper.svelte.technology/guide#0-14-to-0-15) and docs on [layouts](https://sapper.svelte.technology/guide#layouts)) ([#262](https://github.com/sveltejs/sapper/issues/262))
+
+## 0.14.2
+
+* Prevent unsafe replacements ([#307](https://github.com/sveltejs/sapper/pull/307))
+
+## 0.14.1
+
+* Route parameters can be qualified with regex characters ([#283](https://github.com/sveltejs/sapper/pull/283))
+
+## 0.14.0
+
+* `4xx.html` and `5xx.html` are replaced with `_error.html` ([#209](https://github.com/sveltejs/sapper/issues/209))
+* Treat `foo/index.json.js` and `foo.json.js` as equivalents ([#297](https://github.com/sveltejs/sapper/issues/297))
+* Return a promise from `goto` ([#270](https://github.com/sveltejs/sapper/issues/270))
+* Use store when rendering error pages ([#293](https://github.com/sveltejs/sapper/issues/293))
+* Prevent console errors when visiting an error page ([#279](https://github.com/sveltejs/sapper/issues/279))
+
+## 0.13.6
+
+* Fix `baseUrl` synthesis ([#296](https://github.com/sveltejs/sapper/issues/296))
+
+## 0.13.5
+
+* Fix handling of fatal errors ([#289](https://github.com/sveltejs/sapper/issues/289))
+
+## 0.13.4
+
+* Focus `<body>` after navigation ([#287](https://github.com/sveltejs/sapper/issues/287))
+* Fix timing of hot reload updates
+* Emit `fatal` event if server crashes ([#285](https://github.com/sveltejs/sapper/pull/285))
+* Emit `stdout` and `stderr` events on dev watcher ([#285](https://github.com/sveltejs/sapper/pull/285))
+* Always refresh client assets in dev ([#286](https://github.com/sveltejs/sapper/pull/286))
+* Correctly initialise rebuild stats
+
+## 0.13.3
+
+* Make `fatal` events clonable for IPC purposes
+
+## 0.13.2
+
+* Emit a `basepath` event ([#284](https://github.com/sveltejs/sapper/pull/284))
+
+## 0.13.1
+
+* Reinstate ten-second interval between dev server heartbeats ([#276](https://github.com/sveltejs/sapper/issues/276))
+
+## 0.13.0
+
+* Expose `dev`, `build`, `export` and `find_page` APIs ([#272](https://github.com/sveltejs/sapper/issues/272))
+
+## 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))
--- a/README.md
+++ b/README.md
@@ -31,6 +31,44 @@ npm run build
 npm start
 ```

+## Development
+
+Pull requests are encouraged and always welcome. [Pick an issue](https://github.com/sveltejs/sapper/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc) and help us out!
+
+To install and work on Sapper locally:
+
+```bash
+git clone git@github.com:sveltejs/sapper.git
+cd sapper
+npm install
+npm run dev
+```
+
+### Linking to a Live Project
+
+You can make changes locally to Sapper and test it against a local Sapper project. For a quick project that takes almost no setup, use the default [sapper-template](https://github.com/sveltejs/sapper-template) project. Instruction on setup are found in that project repository.
+
+To link Sapper to your project, from the root of your local Sapper git checkout:
+
+```bash
+cd sapper
+npm link
+```
+
+Then, to link from `sapper-template` (or any other given project):
+
+```bash
+cd sapper-template
+npm link sapper
+```
+
+You should be good to test changes locally.
+
+### Running Tests
+
+```bash
+npm run test
+```

 ## License

--- a/api.js
+++ b/api.js
@@ -0,0 +1 @@
+module.exports = require('./dist/api.ts.js');
--- a/appveyor.yml
+++ b/appveyor.yml
@@ -10,11 +10,11 @@ build: off
 environment:
  matrix:
    # node.js
-    - nodejs_version: stable
+    - nodejs_version: 10.5

 install:
  - ps: Install-Product node $env:nodejs_version
-  - npm install
+  - npm ci

 test_script:
  - node --version && npm --version
--- a/components/default-layout.html
+++ b/components/default-layout.html
@@ -0,0 +1 @@
+<svelte:component this={child.component} {...child.props}/>
--- a/mocha.opts
+++ b/mocha.opts
@@ -1,4 +1,5 @@
 --require source-map-support/register
+--require ts-node/register
 --recursive
-test/unit/**/*.js
+test/unit/*/*.ts
 test/common/test.js
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "sapper",
-  "version": "0.10.4",
+  "version": "0.17.1",
  "description": "Military-grade apps, engineered by Svelte",
  "main": "dist/middleware.ts.js",
  "bin": {
@@ -12,65 +12,66 @@
    "runtime",
    "webpack",
    "sapper",
+    "components",
    "dist"
  ],
  "directories": {
    "test": "test"
  },
  "dependencies": {
-    "cheerio": "^1.0.0-rc.2",
-    "chokidar": "^2.0.3",
-    "clorox": "^1.0.3",
+    "html-minifier": "^3.5.16",
+    "source-map-support": "^0.5.6",
+    "tslib": "^1.9.1"
+  },
+  "devDependencies": {
+    "@types/glob": "^5.0.34",
+    "@types/mkdirp": "^0.5.2",
+    "@types/mocha": "^5.2.5",
+    "@types/node": "^10.7.1",
+    "@types/rimraf": "^2.0.2",
+    "cheap-watch": "^0.3.0",
+    "compression": "^1.7.1",
    "cookie": "^0.3.1",
-    "devalue": "^1.0.1",
-    "glob": "^7.1.2",
-    "html-minifier": "^3.5.11",
+    "devalue": "^1.0.4",
+    "eslint": "^4.13.1",
+    "eslint-plugin-import": "^2.12.0",
+    "express": "^4.16.3",
+    "kleur": "^2.0.1",
    "mkdirp": "^0.5.1",
+    "mocha": "^5.2.0",
+    "nightmare": "^3.0.0",
    "node-fetch": "^2.1.1",
-    "port-authority": "^1.0.2",
-    "pretty-bytes": "^4.0.2",
+    "npm-run-all": "^4.1.3",
+    "polka": "^0.4.0",
+    "port-authority": "^1.0.5",
+    "pretty-bytes": "^5.0.0",
    "pretty-ms": "^3.1.0",
    "require-relative": "^0.8.7",
    "rimraf": "^2.6.2",
-    "sade": "^1.4.0",
-    "sander": "^0.6.0",
-    "source-map-support": "^0.5.4",
-    "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",
-    "compression": "^1.7.1",
-    "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-plugin-json": "^2.3.0",
+    "rollup": "^0.59.2",
+    "rollup-plugin-commonjs": "^9.1.3",
+    "rollup-plugin-json": "^3.0.0",
+    "rollup-plugin-node-resolve": "^3.3.0",
    "rollup-plugin-string": "^2.0.2",
    "rollup-plugin-typescript": "^0.8.1",
+    "sade": "^1.4.1",
+    "sander": "^0.6.0",
    "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.6.3",
+    "svelte-loader": "^2.9.0",
+    "tiny-glob": "^0.2.2",
+    "ts-node": "^7.0.1",
+    "typescript": "^2.8.3",
+    "url-parse": "^1.2.0",
    "walk-sync": "^0.3.2",
-    "webpack": "^4.1.0"
+    "webpack": "^4.8.3",
+    "webpack-format-messages": "^2.0.1"
  },
  "scripts": {
    "cy:open": "cypress open",
    "test": "mocha --opts mocha.opts",
    "pretest": "npm run build",
-    "build": "rollup -c",
+    "build": "rm -rf dist && rollup -c",
    "dev": "rollup -cw",
    "prepublishOnly": "npm test",
    "update_mime_types": "curl http://svn.apache.org/repos/asf/httpd/httpd/trunk/docs/conf/mime.types | grep -e \"^[^#]\" > src/middleware/mime-types.md"
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -1,6 +1,7 @@
 import typescript from 'rollup-plugin-typescript';
 import string from 'rollup-plugin-string';
 import json from 'rollup-plugin-json';
+import resolve from 'rollup-plugin-node-resolve';
 import commonjs from 'rollup-plugin-commonjs';
 import pkg from './package.json';

@@ -19,13 +20,20 @@ export default [
 		},
 		plugins: [
 			typescript({
-				typescript: require('typescript')
+				typescript: require('typescript'),
+				target: "ES2017"
 			})
 		]
 	},

 	{
-		input: [`src/cli.ts`, `src/core.ts`, `src/middleware.ts`, `src/webpack.ts`],
+		input: [
+			`src/api.ts`,
+			`src/cli.ts`,
+			`src/core.ts`,
+			`src/middleware.ts`,
+			`src/webpack.ts`
+		],
 		output: {
 			dir: 'dist',
 			format: 'cjs',
@@ -37,6 +45,7 @@ export default [
 				include: '**/*.md'
 			}),
 			json(),
+			resolve(),
 			commonjs(),
 			typescript({
 				typescript: require('typescript')
--- a/src/api.ts
+++ b/src/api.ts
@@ -0,0 +1,6 @@
+import { dev } from './api/dev';
+import { build } from './api/build';
+import { exporter } from './api/export';
+import { find_page } from './api/find_page';
+
+export { dev, build, exporter, find_page };
--- a/src/api/build.ts
+++ b/src/api/build.ts
@@ -0,0 +1,109 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import mkdirp from 'mkdirp';
+import rimraf from 'rimraf';
+import { EventEmitter } from 'events';
+import minify_html from './utils/minify_html';
+import { create_compilers, create_main_manifests, create_routes, create_serviceworker_manifest } from '../core';
+import * as events from './interfaces';
+
+export function build(opts: {}) {
+	const emitter = new EventEmitter();
+
+	execute(emitter, opts).then(
+		() => {
+			emitter.emit('done', <events.DoneEvent>{}); // TODO do we need to pass back any info?
+		},
+		error => {
+			emitter.emit('error', <events.ErrorEvent>{
+				error
+			});
+		}
+	);
+
+	return emitter;
+}
+
+async function execute(emitter: EventEmitter, {
+	dest = 'build',
+	app = 'app',
+	webpack = 'webpack',
+	routes = 'routes'
+} = {}) {
+	mkdirp.sync(dest);
+	rimraf.sync(path.join(dest, '**/*'));
+
+	// minify app/template.html
+	// TODO compile this to a function? could be quicker than str.replace(...).replace(...).replace(...)
+	const template = fs.readFileSync(`${app}/template.html`, 'utf-8');
+
+	// remove this in a future version
+	if (template.indexOf('%sapper.base%') === -1) {
+		const error = new Error(`As of Sapper v0.10, your template.html file must include %sapper.base% in the <head>`);
+		error.code = `missing-sapper-base`;
+		throw error;
+	}
+
+	fs.writeFileSync(`${dest}/template.html`, minify_html(template));
+
+	const route_objects = create_routes();
+
+	// create app/manifest/client.js and app/manifest/server.js
+	create_main_manifests({ routes: route_objects });
+
+	const { client, server, serviceworker } = create_compilers({ webpack });
+
+	const client_stats = await compile(client);
+	emitter.emit('build', <events.BuildEvent>{
+		type: 'client',
+		// TODO duration/warnings
+		webpack_stats: client_stats
+	});
+
+	const client_info = client_stats.toJson();
+	fs.writeFileSync(path.join(dest, 'client_assets.json'), JSON.stringify(client_info.assetsByChunkName));
+
+	const server_stats = await compile(server);
+	emitter.emit('build', <events.BuildEvent>{
+		type: 'server',
+		// TODO duration/warnings
+		webpack_stats: server_stats
+	});
+
+	let serviceworker_stats;
+
+	if (serviceworker) {
+		create_serviceworker_manifest({
+			routes: route_objects,
+			client_files: client_stats.toJson().assets.map((chunk: { name: string }) => `client/${chunk.name}`)
+		});
+
+		serviceworker_stats = await compile(serviceworker);
+
+		emitter.emit('build', <events.BuildEvent>{
+			type: 'serviceworker',
+			// TODO duration/warnings
+			webpack_stats: serviceworker_stats
+		});
+	}
+}
+
+function compile(compiler: any) {
+	return new Promise((fulfil, reject) => {
+		compiler.run((err: Error, stats: any) => {
+			if (err) {
+				reject(err);
+				process.exit(1);
+			}
+
+			if (stats.hasErrors()) {
+				console.error(stats.toString({ colors: true }));
+				reject(new Error(`Encountered errors while building app`));
+			}
+
+			else {
+				fulfil(stats);
+			}
+		});
+	});
+}
--- a/src/api/dev.ts
+++ b/src/api/dev.ts
@@ -0,0 +1,493 @@
+import * as path from 'path';
+import * as fs from 'fs';
+import * as http from 'http';
+import * as child_process from 'child_process';
+import * as ports from 'port-authority';
+import mkdirp from 'mkdirp';
+import rimraf from 'rimraf';
+import format_messages from 'webpack-format-messages';
+import { locations } from '../config';
+import { EventEmitter } from 'events';
+import { create_routes, create_main_manifests, create_compilers, create_serviceworker_manifest } from '../core';
+import Deferred from './utils/Deferred';
+import * as events from './interfaces';
+
+export function dev(opts) {
+	return new Watcher(opts);
+}
+
+class Watcher extends EventEmitter {
+	dirs: {
+		app: string;
+		dest: string;
+		routes: string;
+		webpack: string;
+	}
+	port: number;
+	closed: boolean;
+
+	dev_server: DevServer;
+	proc: child_process.ChildProcess;
+	filewatchers: Array<{ close: () => void }>;
+	deferreds: {
+		client: Deferred;
+		server: Deferred;
+	};
+
+	crashed: boolean;
+	restarting: boolean;
+	current_build: {
+		changed: Set<string>;
+		rebuilding: Set<string>;
+		unique_warnings: Set<string>;
+		unique_errors: Set<string>;
+	}
+
+	constructor({
+		app = locations.app(),
+		dest = locations.dest(),
+		routes = locations.routes(),
+		webpack = 'webpack',
+		port = +process.env.PORT
+	}: {
+		app: string,
+		dest: string,
+		routes: string,
+		webpack: string,
+		port: number
+	}) {
+		super();
+
+		this.dirs = { app, dest, routes, webpack };
+		this.port = port;
+		this.closed = false;
+
+		this.filewatchers = [];
+
+		this.current_build = {
+			changed: new Set(),
+			rebuilding: new Set(),
+			unique_errors: new Set(),
+			unique_warnings: new Set()
+		};
+
+		// remove this in a future version
+		const template = fs.readFileSync(path.join(app, 'template.html'), 'utf-8');
+		if (template.indexOf('%sapper.base%') === -1) {
+			const error = new Error(`As of Sapper v0.10, your template.html file must include %sapper.base% in the <head>`);
+			error.code = `missing-sapper-base`;
+			throw error;
+		}
+
+		process.env.NODE_ENV = 'development';
+
+		process.on('exit', () => {
+			this.close();
+		});
+
+		this.init();
+	}
+
+	async init() {
+		if (this.port) {
+			if (!await ports.check(this.port)) {
+				this.emit('fatal', <events.FatalEvent>{
+					message: `Port ${this.port} is unavailable`
+				});
+				return;
+			}
+		} else {
+			this.port = await ports.find(3000);
+		}
+
+		const { dest } = this.dirs;
+		rimraf.sync(dest);
+		mkdirp.sync(dest);
+
+		const dev_port = await ports.find(10000);
+
+		try {
+			const routes = create_routes();
+			create_main_manifests({ routes, dev_port });
+		} catch (err) {
+			this.emit('fatal', <events.FatalEvent>{
+				message: err.message
+			});
+			return;
+		}
+
+		this.dev_server = new DevServer(dev_port);
+
+		this.filewatchers.push(
+			watch_dir(
+				locations.routes(),
+				({ path: file, stats }) => {
+					if (stats.isDirectory()) {
+						return path.basename(file)[0] !== '_';
+					}
+					return true;
+				},
+				() => {
+					const routes = create_routes();
+					create_main_manifests({ routes, dev_port });
+
+					try {
+						const routes = create_routes();
+						create_main_manifests({ routes, dev_port });
+					} catch (err) {
+						this.emit('error', <events.ErrorEvent>{
+							message: err.message
+						});
+					}
+				}
+			),
+
+			fs.watch(`${locations.app()}/template.html`, () => {
+				this.dev_server.send({
+					action: 'reload'
+				});
+			})
+		);
+
+		this.deferreds = {
+			server: new Deferred(),
+			client: new Deferred()
+		};
+
+		// TODO watch the configs themselves?
+		const compilers = create_compilers({ webpack: this.dirs.webpack });
+
+		let log = '';
+
+		const emitFatal = () => {
+			this.emit('fatal', <events.FatalEvent>{
+				message: `Server crashed`,
+				log
+			});
+
+			this.crashed = true;
+			this.proc = null;
+		};
+
+		this.watch(compilers.server, {
+			name: 'server',
+
+			invalid: filename => {
+				this.restart(filename, 'server');
+				this.deferreds.server = new Deferred();
+			},
+
+			result: info => {
+				this.deferreds.client.promise.then(() => {
+					const restart = () => {
+						log = '';
+						this.crashed = false;
+
+						ports.wait(this.port)
+							.then((() => {
+								this.emit('ready', <events.ReadyEvent>{
+									port: this.port,
+									process: this.proc
+								});
+
+								this.deferreds.server.fulfil();
+
+								this.dev_server.send({
+									status: 'completed'
+								});
+							}))
+							.catch(err => {
+								if (this.crashed) return;
+
+								this.emit('fatal', <events.FatalEvent>{
+									message: `Server is not listening on port ${this.port}`,
+									log
+								});
+							});
+					};
+
+					if (this.proc) {
+						this.proc.removeListener('exit', emitFatal);
+						this.proc.kill();
+						this.proc.on('exit', restart);
+					} else {
+						restart();
+					}
+
+					this.proc = child_process.fork(`${dest}/server.js`, [], {
+						cwd: process.cwd(),
+						env: Object.assign({
+							PORT: this.port
+						}, process.env),
+						stdio: ['ipc']
+					});
+
+					this.proc.stdout.on('data', chunk => {
+						log += chunk;
+						this.emit('stdout', chunk);
+					});
+
+					this.proc.stderr.on('data', chunk => {
+						log += chunk;
+						this.emit('stderr', chunk);
+					});
+
+					this.proc.on('message', message => {
+						if (message.__sapper__ && message.event === 'basepath') {
+							this.emit('basepath', {
+								basepath: message.basepath
+							});
+						}
+					});
+
+					this.proc.on('exit', emitFatal);
+				});
+			}
+		});
+
+		let first = true;
+
+		this.watch(compilers.client, {
+			name: 'client',
+
+			invalid: filename => {
+				this.restart(filename, 'client');
+				this.deferreds.client = new Deferred();
+
+				// TODO we should delete old assets. due to a webpack bug
+				// i don't even begin to comprehend, this is apparently
+				// quite difficult
+			},
+
+			result: info => {
+				fs.writeFileSync(path.join(dest, 'client_assets.json'), JSON.stringify(info.assetsByChunkName, null, '  '));
+				this.deferreds.client.fulfil();
+
+				const client_files = info.assets.map((chunk: { name: string }) => `client/${chunk.name}`);
+
+				create_serviceworker_manifest({
+					routes: create_routes(),
+					client_files
+				});
+
+				// we need to wait a beat before watching the service
+				// worker, because of some webpack nonsense
+				setTimeout(watch_serviceworker, 100);
+			}
+		});
+
+		let watch_serviceworker = compilers.serviceworker
+			? () => {
+				watch_serviceworker = noop;
+
+				this.watch(compilers.serviceworker, {
+					name: 'service worker',
+
+					result: info => {
+						fs.writeFileSync(path.join(dest, 'serviceworker_info.json'), JSON.stringify(info, null, '  '));
+					}
+				});
+			}
+			: noop;
+	}
+
+	close() {
+		if (this.closed) return;
+		this.closed = true;
+
+		if (this.dev_server) this.dev_server.close();
+
+		if (this.proc) this.proc.kill();
+		this.filewatchers.forEach(watcher => {
+			watcher.close();
+		});
+	}
+
+	restart(filename: string, type: string) {
+		if (this.restarting) {
+			this.current_build.changed.add(filename);
+			this.current_build.rebuilding.add(type);
+		} else {
+			this.restarting = true;
+
+			this.current_build = {
+				changed: new Set([filename]),
+				rebuilding: new Set([type]),
+				unique_warnings: new Set(),
+				unique_errors: new Set()
+			};
+
+			process.nextTick(() => {
+				this.emit('invalid', <events.InvalidEvent>{
+					changed: Array.from(this.current_build.changed),
+					invalid: {
+						server: this.current_build.rebuilding.has('server'),
+						client: this.current_build.rebuilding.has('client'),
+						serviceworker: this.current_build.rebuilding.has('serviceworker'),
+					}
+				});
+
+				this.restarting = false;
+			});
+		}
+	}
+
+	watch(compiler: any, { name, invalid = noop, result }: {
+		name: string,
+		invalid?: (filename: string) => void;
+		result: (stats: any) => void;
+	}) {
+		compiler.hooks.invalid.tap('sapper', (filename: string) => {
+			invalid(filename);
+		});
+
+		compiler.watch({}, (err: Error, stats: any) => {
+			if (err) {
+				this.emit('error', <events.ErrorEvent>{
+					type: name,
+					message: err.message
+				});
+			} else {
+				const messages = format_messages(stats);
+				const info = stats.toJson();
+
+				this.emit('build', {
+					type: name,
+
+					duration: info.time,
+
+					errors: messages.errors.map((message: string) => {
+						const duplicate = this.current_build.unique_errors.has(message);
+						this.current_build.unique_errors.add(message);
+
+						return mungeWebpackError(message, duplicate);
+					}),
+
+					warnings: messages.warnings.map((message: string) => {
+						const duplicate = this.current_build.unique_warnings.has(message);
+						this.current_build.unique_warnings.add(message);
+
+						return mungeWebpackError(message, duplicate);
+					}),
+				});
+
+				result(info);
+			}
+		});
+	}
+}
+
+const locPattern = /\((\d+):(\d+)\)$/;
+
+function mungeWebpackError(message: string, duplicate: boolean) {
+	// TODO this is all a bit rube goldberg...
+	const lines = message.split('\n');
+
+	const file = lines.shift()
+		.replace('[7m', '') // careful — there is a special character at the beginning of this string
+		.replace('[27m', '')
+		.replace('./', '');
+
+	let line = null;
+	let column = null;
+
+	const match = locPattern.exec(lines[0]);
+	if (match) {
+		lines[0] = lines[0].replace(locPattern, '');
+		line = +match[1];
+		column = +match[2];
+	}
+
+	return {
+		file,
+		line,
+		column,
+		message: lines.join('\n'),
+		originalMessage: message,
+		duplicate
+	};
+}
+
+const INTERVAL = 10000;
+
+class DevServer {
+	clients: Set<http.ServerResponse>;
+	interval: NodeJS.Timer;
+	_: http.Server;
+
+	constructor(port: number, interval = 10000) {
+		this.clients = new Set();
+
+		this._ = http.createServer((req, res) => {
+			if (req.url !== '/__sapper__') return;
+
+			req.socket.setKeepAlive(true);
+			res.writeHead(200, {
+				'Access-Control-Allow-Origin': '*',
+				'Access-Control-Allow-Headers': 'Cache-Control',
+				'Content-Type': 'text/event-stream;charset=utf-8',
+				'Cache-Control': 'no-cache, no-transform',
+				'Connection': 'keep-alive',
+				// While behind nginx, event stream should not be buffered:
+				// http://nginx.org/docs/http/ngx_http_proxy_module.html#proxy_buffering
+				'X-Accel-Buffering': 'no'
+			});
+
+			res.write('\n');
+
+			this.clients.add(res);
+			req.on('close', () => {
+				this.clients.delete(res);
+			});
+		});
+
+		this._.listen(port);
+
+		this.interval = setInterval(() => {
+			this.send(null);
+		}, INTERVAL);
+	}
+
+	close() {
+		this._.close();
+		clearInterval(this.interval);
+	}
+
+	send(data: any) {
+		this.clients.forEach(client => {
+			client.write(`data: ${JSON.stringify(data)}\n\n`);
+		});
+	}
+}
+
+function noop() {}
+
+function watch_dir(
+	dir: string,
+	filter: ({ path, stats }: { path: string, stats: fs.Stats }) => boolean,
+	callback: () => void
+) {
+	let watch;
+	let closed = false;
+
+	import('cheap-watch').then(CheapWatch => {
+		if (closed) return;
+
+		watch = new CheapWatch({ dir, filter, debounce: 50 });
+
+		watch.on('+', ({ isNew }) => {
+			if (isNew) callback();
+		});
+
+		watch.on('-', callback);
+
+		watch.init();
+	});
+
+	return {
+		close: () => {
+			if (watch) watch.close();
+			closed = true;
+		}
+	};
+}
--- a/src/api/export.ts
+++ b/src/api/export.ts
@@ -0,0 +1,165 @@
+import * as child_process from 'child_process';
+import * as path from 'path';
+import * as sander from 'sander';
+import URL from 'url-parse';
+import fetch from 'node-fetch';
+import * as ports from 'port-authority';
+import { EventEmitter } from 'events';
+import clean_html from './utils/clean_html';
+import minify_html from './utils/minify_html';
+import Deferred from './utils/Deferred';
+import * as events from './interfaces';
+
+export function exporter(opts: {}) {
+	const emitter = new EventEmitter();
+
+	execute(emitter, opts).then(
+		() => {
+			emitter.emit('done', <events.DoneEvent>{}); // TODO do we need to pass back any info?
+		},
+		error => {
+			emitter.emit('error', <events.ErrorEvent>{
+				error
+			});
+		}
+	);
+
+	return emitter;
+}
+
+async function execute(emitter: EventEmitter, {
+	build = 'build',
+	dest = 'export',
+	basepath = ''
+} = {}) {
+	const export_dir = path.join(dest, basepath);
+
+	// Prep output directory
+	sander.rimrafSync(export_dir);
+
+	sander.copydirSync('assets').to(export_dir);
+	sander.copydirSync(build, 'client').to(export_dir, 'client');
+
+	if (sander.existsSync(build, 'service-worker.js')) {
+		sander.copyFileSync(build, 'service-worker.js').to(export_dir, 'service-worker.js');
+	}
+
+	if (sander.existsSync(build, 'service-worker.js.map')) {
+		sander.copyFileSync(build, 'service-worker.js.map').to(export_dir, 'service-worker.js.map');
+	}
+
+	const port = await ports.find(3000);
+
+	const origin = `http://localhost:${port}`;
+	const root = new URL(basepath || '', origin);
+
+	emitter.emit('info', {
+		message: `Crawling ${root.href}`
+	});
+
+	const proc = child_process.fork(path.resolve(`${build}/server.js`), [], {
+		cwd: process.cwd(),
+		env: Object.assign({
+			PORT: port,
+			NODE_ENV: 'production',
+			SAPPER_DEST: build,
+			SAPPER_EXPORT: 'true'
+		}, process.env)
+	});
+
+	const seen = new Set();
+	const saved = new Set();
+	const deferreds = new Map();
+
+	function get_deferred(pathname: string) {
+		pathname = pathname.replace(root.pathname, '');
+
+		if (!deferreds.has(pathname)) {
+			deferreds.set(pathname, new Deferred());
+		}
+
+		return deferreds.get(pathname);
+	}
+
+	proc.on('message', message => {
+		if (!message.__sapper__ || message.event !== 'file') return;
+
+		const pathname = new URL(message.url, origin).pathname;
+		let file = pathname.slice(1);
+		let { body } = message;
+
+		if (saved.has(file)) return;
+		saved.add(file);
+
+		const is_html = message.type === 'text/html';
+
+		if (is_html) {
+			file = file === '' ? 'index.html' : `${file}/index.html`;
+			body = minify_html(body);
+		}
+
+		emitter.emit('file', <events.FileEvent>{
+			file,
+			size: body.length,
+			status: message.status
+		});
+
+		sander.writeFileSync(export_dir, file, body);
+
+		get_deferred(pathname).fulfil();
+	});
+
+	async function handle(url: URL) {
+		const pathname = (url.pathname.replace(root.pathname, '') || '/');
+
+		if (seen.has(pathname)) return;
+		seen.add(pathname);
+
+		const deferred = get_deferred(pathname);
+
+		const r = await fetch(url.href);
+		const range = ~~(r.status / 100);
+
+		if (range === 2) {
+			if (r.headers.get('Content-Type') === 'text/html') {
+				const body = await r.text();
+				const urls: URL[] = [];
+
+				const cleaned = clean_html(body);
+
+				const base_match = /<base ([\s\S]+?)>/m.exec(cleaned);
+				const base_href = base_match && get_href(base_match[1]);
+				const base = new URL(base_href || '/', url.href);
+
+				let match;
+				let pattern = /<a ([\s\S]+?)>/gm;
+
+				while (match = pattern.exec(cleaned)) {
+					const attrs = match[1];
+					const href = get_href(attrs);
+
+					if (href) {
+						const url = new URL(href, base.href);
+						if (url.origin === origin) urls.push(url);
+					}
+				}
+
+				await Promise.all(urls.map(handle));
+			}
+		}
+
+		await deferred.promise;
+	}
+
+	return ports.wait(port)
+		.then(() => {
+			// TODO all static routes
+			return handle(root);
+		})
+		.then(() => proc.kill());
+}
+
+function get_href(attrs: string) {
+	const match = /href\s*=\s*(?:"(.+?)"|'(.+?)'|([^\s>]+))/.exec(attrs);
+	return match[1] || match[2] || match[3];
+}
--- a/src/api/find_page.ts
+++ b/src/api/find_page.ts
@@ -0,0 +1,14 @@
+import { locations } from '../config';
+import { create_routes } from '../core';
+
+export function find_page(pathname: string, cwd = locations.routes()) {
+	const { pages } = create_routes(cwd);
+
+	for (let i = 0; i < pages.length; i += 1) {
+		const page = pages[i];
+
+		if (page.pattern.test(pathname)) {
+			return page.parts[page.parts.length - 1].component.file;
+		}
+	}
+}
--- a/src/api/interfaces.ts
+++ b/src/api/interfaces.ts
@@ -0,0 +1,44 @@
+import * as child_process from 'child_process';
+
+export type ReadyEvent = {
+	port: number;
+	process: child_process.ChildProcess;
+};
+
+export type ErrorEvent = {
+	type: string;
+	message: string;
+};
+
+export type FatalEvent = {
+	message: string;
+	log?: string;
+};
+
+export type InvalidEvent = {
+	changed: string[];
+	invalid: {
+		client: boolean;
+		server: boolean;
+		serviceworker: boolean;
+	}
+};
+
+export type BuildEvent = {
+	type: string;
+	errors: Array<{ file: string, message: string, duplicate: boolean }>;
+	warnings: Array<{ file: string, message: string, duplicate: boolean }>;
+	duration: number;
+	webpack_stats: any;
+}
+
+export type FileEvent = {
+	file: string;
+	size: number;
+}
+
+export type FailureEvent = {
+
+}
+
+export type DoneEvent = {}
--- a/src/api/utils/Deferred.ts
+++ b/src/api/utils/Deferred.ts
@@ -0,0 +1,12 @@
+export default class Deferred {
+	promise: Promise<any>;
+	fulfil: (value?: any) => void;
+	reject: (error: Error) => void;
+
+	constructor() {
+		this.promise = new Promise((fulfil, reject) => {
+			this.fulfil = fulfil;
+			this.reject = reject;
+		});
+	}
+}
--- a/src/api/utils/clean_html.ts
+++ b/src/api/utils/clean_html.ts
@@ -0,0 +1,7 @@
+export default function clean_html(html: string) {
+	return html
+		.replace(/<!\[CDATA\[[\s\S]*?\]\]>/gm, '')
+		.replace(/(<script[\s\S]*?>)[\s\S]*?<\/script>/gm, '$1</' + 'script>')
+		.replace(/(<style[\s\S]*?>)[\s\S]*?<\/style>/gm, '$1</' + 'style>')
+		.replace(/<!--[\s\S]*?-->/gm, '');
+}
--- a/src/api/utils/minify_html.ts
+++ b/src/api/utils/minify_html.ts
@@ -1,6 +1,6 @@
 import { minify } from 'html-minifier';

-export function minify_html(html: string) {
+export default function minify_html(html: string) {
 	return minify(html, {
 		collapseBooleanAttributes: true,
 		collapseWhitespace: true,
@@ -8,7 +8,7 @@ export function minify_html(html: string) {
 		decodeEntities: true,
 		html5: true,
 		minifyCSS: true,
-		minifyJS: true,
+		minifyJS: false,
 		removeAttributeQuotes: true,
 		removeComments: true,
 		removeOptionalTags: true,
--- a/src/cli.ts
+++ b/src/cli.ts
@@ -1,11 +1,8 @@
 import * as fs from 'fs';
 import * as path from 'path';
-import * as child_process from 'child_process';
 import sade from 'sade';
-import * as clorox from 'clorox';
+import colors from 'kleur';
 import prettyMs from 'pretty-ms';
-// import upgrade from './cli/upgrade';
-import * as ports from 'port-authority';
 import * as pkg from '../package.json';

 const prog = sade('sapper').version(pkg.version);
@@ -21,10 +18,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 +31,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 ${colors.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);
 		}
 	});

@@ -49,25 +62,29 @@ prog.command('start [dir]')

 prog.command('export [dest]')
 	.describe('Export your app as static files (if possible)')
+	.option('--build', '(Re)build app before exporting', true)
+	.option('--build-dir', 'Specify a custom temporary build directory', '.sapper/prod')
 	.option('--basepath', 'Specify a base path')
-	.action(async (dest = 'export', opts: { basepath?: string }) => {
-		console.log(`> Building...`);
-
+	.action(async (dest = 'export', opts: { build: boolean, 'build-dir': string, basepath?: string }) => {
 		process.env.NODE_ENV = 'production';
-		process.env.SAPPER_DEST = '.sapper/.export';
+		process.env.SAPPER_DEST = opts['build-dir'];

 		const start = Date.now();

 		try {
-			const { build } = await import('./cli/build');
-			await build();
-			console.error(`\n> Built in ${elapsed(start)}. Crawling site...`);
+			if (opts.build) {
+				console.log(`> Building...`);
+				const { build } = await import('./cli/build');
+				await build();
+				console.error(`\n> Built in ${elapsed(start)}`);
+			}

 			const { exporter } = await import('./cli/export');
 			await exporter(dest, opts);
-			console.error(`\n> Finished in ${elapsed(start)}. Type ${clorox.bold.cyan(`npx serve ${dest}`)} to run the app.`);
+			console.error(`\n> Finished in ${elapsed(start)}. Type ${colors.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);
 		}
 	});

@@ -77,4 +94,4 @@ prog.parse(process.argv);

 function elapsed(start: number) {
 	return prettyMs(Date.now() - start);
-}
+}
--- a/src/cli/build.ts
+++ b/src/cli/build.ts
@@ -1,76 +1,32 @@
-import * as fs from 'fs';
-import * as path from 'path';
-import * as clorox from 'clorox';
-import mkdirp from 'mkdirp';
-import rimraf from 'rimraf';
-import { minify_html } from './utils/minify_html';
-import { create_compilers, create_main_manifests, create_routes, create_serviceworker_manifest } from '../core'
+import { build as _build } from '../api/build';
+import colors from 'kleur';
 import { locations } from '../config';

-export async function build() {
-	const output = locations.dest();
-
-	mkdirp.sync(output);
-	rimraf.sync(path.join(output, '**/*'));
-
-	// minify app/template.html
-	// TODO compile this to a function? could be quicker than str.replace(...).replace(...).replace(...)
-	const template = fs.readFileSync(`${locations.app()}/template.html`, 'utf-8');
-
-	// remove this in a future version
-	if (template.indexOf('%sapper.base%') === -1) {
-		console.log(`${clorox.bold.red(`> As of Sapper v0.10, your template.html file must include %sapper.base% in the <head>`)}`);
-		process.exit(1);
-	}
-
-	fs.writeFileSync(`${output}/template.html`, minify_html(template));
-
-	const routes = create_routes();
-
-	// create app/manifest/client.js and app/manifest/server.js
-	create_main_manifests({ routes });
-
-	const { client, server, serviceworker } = create_compilers();
-
-	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()));
-
-	const server_stats = await compile(server);
-	console.log(`${clorox.inverse(`\nbuilt server`)}`);
-	console.log(server_stats.toString({ colors: true }));
-
-	let serviceworker_stats;
-
-	if (serviceworker) {
-		create_serviceworker_manifest({
-			routes,
-			client_files: client_stats.toJson().assets.map((chunk: { name: string }) => `client/${chunk.name}`)
-		});
-
-		serviceworker_stats = await compile(serviceworker);
-		console.log(`${clorox.inverse(`\nbuilt service worker`)}`);
-		console.log(serviceworker_stats.toString({ colors: true }));
-	}
-}
-
-function compile(compiler: any) {
+export function build() {
 	return new Promise((fulfil, reject) => {
-		compiler.run((err: Error, stats: any) => {
-			if (err) {
-				reject(err);
-				process.exit(1);
-			}
+		try {
+			const emitter = _build({
+				dest: locations.dest(),
+				app: locations.app(),
+				routes: locations.routes(),
+				webpack: 'webpack'
+			});

-			if (stats.hasErrors()) {
-				console.error(stats.toString({ colors: true }));
-				reject(new Error(`Encountered errors while building app`));
-			}
+			emitter.on('build', event => {
+				console.log(colors.inverse(`\nbuilt ${event.type}`));
+				console.log(event.webpack_stats.toString({ colors: true }));
+			});

-			else {
-				fulfil(stats);
-			}
-		});
+			emitter.on('error', event => {
+				reject(event.error);
+			});
+
+			emitter.on('done', event => {
+				fulfil();
+			});
+		} catch (err) {
+			console.log(`${colors.bold.red(`> ${err.message}`)}`);
+			process.exit(1);
+		}
 	});
-}
+}
--- a/src/cli/dev.ts
+++ b/src/cli/dev.ts
@@ -1,321 +1,80 @@
-import * as fs from 'fs';
 import * as path from 'path';
-import * as net from 'net';
-import * as clorox from 'clorox';
+import colors from 'kleur';
 import * as child_process from 'child_process';
-import * as http from 'http';
-import mkdirp from 'mkdirp';
-import rimraf from 'rimraf';
-import format_messages from 'webpack-format-messages';
 import prettyMs from 'pretty-ms';
-import * as ports from 'port-authority';
-import { locations } from '../config';
-import { create_compilers, create_main_manifests, create_routes, create_serviceworker_manifest } from '../core';
+import { dev as _dev } from '../api/dev';
+import * as events from '../api/interfaces';

-type Deferred = {
-	promise?: Promise<any>;
-	fulfil?: (value?: any) => void;
-	reject?: (err: Error) => void;
-}
+export function dev(opts: { port: number, open: boolean }) {
+	try {
+		const watcher = _dev(opts);

-function deferred() {
-	const d: Deferred = {};
+		let first = true;

-	d.promise = new Promise((fulfil, reject) => {
-		d.fulfil = fulfil;
-		d.reject = reject;
-	});
+		watcher.on('ready', (event: events.ReadyEvent) => {
+			if (first) {
+				console.log(colors.bold.cyan(`> Listening on http://localhost:${event.port}`));
+				if (opts.open) child_process.exec(`open http://localhost:${event.port}`);
+				first = false;
+			}

-	return d;
-}
+			// TODO clear screen?

-function create_hot_update_server(port: number, interval = 10000) {
-	const clients = new Set();
+			event.process.stdout.on('data', data => {
+				process.stdout.write(data);
+			});

-	const server = http.createServer((req, res) => {
-		if (req.url !== '/__sapper__') return;
-
-		req.socket.setKeepAlive(true);
-		res.writeHead(200, {
-			'Access-Control-Allow-Origin': '*',
-			'Access-Control-Allow-Headers': 'Cache-Control',
-			'Content-Type': 'text/event-stream;charset=utf-8',
-			'Cache-Control': 'no-cache, no-transform',
-			'Connection': 'keep-alive',
-			// While behind nginx, event stream should not be buffered:
-			// http://nginx.org/docs/http/ngx_http_proxy_module.html#proxy_buffering
-			'X-Accel-Buffering': 'no'
+			event.process.stderr.on('data', data => {
+				process.stderr.write(data);
+			});
 		});

-		res.write('\n');
-
-		clients.add(res);
-		req.on('close', () => {
-			clients.delete(res);
-		});
-	});
-
-	server.listen(port);
-
-	function send(data: any) {
-		clients.forEach(client => {
-			client.write(`data: ${JSON.stringify(data)}\n\n`);
-		});
-	}
-
-	setInterval(() => {
-		send(null)
-	}, interval);
-
-	return { send };
-}
-
-export async function dev(opts: { port: number, open: boolean }) {
-	// remove this in a future version
-	const template = fs.readFileSync(path.join(locations.app(), 'template.html'), 'utf-8');
-	if (template.indexOf('%sapper.base%') === -1) {
-		console.log(`${clorox.bold.red(`> As of Sapper v0.10, your template.html file must include %sapper.base% in the <head>`)}`);
-		process.exit(1);
-	}
-
-	process.env.NODE_ENV = 'development';
-
-	let port = opts.port || +process.env.PORT;
-
-	if (port) {
-		if (!await ports.check(port)) {
-			console.log(`${clorox.bold.red(`> Port ${port} is unavailable`)}`);
-			return;
-		}
-	} else {
-		port = await ports.find(3000);
-	}
-
-	const dir = locations.dest();
-	rimraf.sync(dir);
-	mkdirp.sync(dir);
-
-	const dev_port = await ports.find(10000);
-
-	const routes = create_routes();
-	create_main_manifests({ routes, dev_port });
-
-	const hot_update_server = create_hot_update_server(dev_port);
-
-	watch_files(locations.routes(), ['add', 'unlink'], () => {
-		const routes = create_routes();
-		create_main_manifests({ routes, dev_port });
-	});
-
-	watch_files(`${locations.app()}/template.html`, ['change'], () => {
-		hot_update_server.send({
-			action: 'reload'
-		});
-	});
-
-	let proc: child_process.ChildProcess;
-
-	process.on('exit', () => {
-		// sometimes webpack crashes, so we need to kill our children
-		if (proc) proc.kill();
-	});
-
-	const deferreds = {
-		server: deferred(),
-		client: deferred()
-	};
-
-	let restarting = false;
-	let build = {
-		unique_warnings: new Set(),
-		unique_errors: new Set()
-	};
-
-	function restart_build(filename: string) {
-		if (restarting) return;
-
-		restarting = true;
-		build = {
-			unique_warnings: new Set(),
-			unique_errors: new Set()
-		};
-
-		process.nextTick(() => {
-			restarting = false;
+		watcher.on('invalid', (event: events.InvalidEvent) => {
+			const changed = event.changed.map(filename => path.relative(process.cwd(), filename)).join(', ');
+			console.log(`\n${colors.bold.cyan(changed)} changed. rebuilding...`);
 		});

-		console.log(`\n${clorox.bold.cyan(path.relative(process.cwd(), filename))} changed. rebuilding...`);
-	}
-
-	// TODO watch the configs themselves?
-	const compilers = create_compilers();
-
-	function watch(compiler: any, { name, invalid = noop, error = noop, result }: {
-		name: string,
-		invalid?: (filename: string) => void;
-		error?: (error: Error) => void;
-		result: (stats: any) => void;
-	}) {
-		compiler.hooks.invalid.tap('sapper', (filename: string) => {
-			invalid(filename);
+		watcher.on('error', (event: events.ErrorEvent) => {
+			console.log(colors.red(`✗ ${event.type}`));
+			console.log(colors.red(event.message));
 		});

-		compiler.watch({}, (err: Error, stats: any) => {
-			if (err) {
-				console.log(`${clorox.red(`✗ ${name}`)}`);
-				console.log(`${clorox.red(err.message)}`);
-				error(err);
-			} else {
-				const messages = format_messages(stats);
-				const info = stats.toJson();
+		watcher.on('fatal', (event: events.FatalEvent) => {
+			console.log(colors.bold.red(`> ${event.message}`));
+			if (event.log) console.log(event.log);
+		});

-				if (messages.errors.length > 0) {
-					console.log(`${clorox.bold.red(`✗ ${name}`)}`);
+		watcher.on('build', (event: events.BuildEvent) => {
+			if (event.errors.length) {
+				console.log(colors.bold.red(`✗ ${event.type}`));

-					const filtered = messages.errors.filter((message: string) => {
-						return !build.unique_errors.has(message);
-					});
+				event.errors.filter(e => !e.duplicate).forEach(error => {
+					if (error.file) console.log(colors.bold(error.file));
+					console.log(error.message);
+				});

-					filtered.forEach((message: string) => {
-						build.unique_errors.add(message);
-						console.log(message);
-					});
-
-					const hidden = messages.errors.length - filtered.length;
-					if (hidden > 0) {
-						console.log(`${hidden} duplicate ${hidden === 1 ? 'error' : 'errors'} hidden\n`);
-					}
-				} else {
-					if (messages.warnings.length > 0) {
-						console.log(`${clorox.bold.yellow(`• ${name}`)}`);
-
-						const filtered = messages.warnings.filter((message: string) => {
-							return !build.unique_warnings.has(message);
-						});
-
-						filtered.forEach((message: string) => {
-							build.unique_warnings.add(message);
-							console.log(`${message}\n`);
-						});
-
-						const hidden = messages.warnings.length - filtered.length;
-						if (hidden > 0) {
-							console.log(`${hidden} duplicate ${hidden === 1 ? 'warning' : 'warnings'} hidden\n`);
-						}
-					} else {
-						console.log(`${clorox.bold.green(`✔ ${name}`)} ${clorox.gray(`(${prettyMs(info.time)})`)}`);
-					}
-
-					result(info);
+				const hidden = event.errors.filter(e => e.duplicate).length;
+				if (hidden > 0) {
+					console.log(`${hidden} duplicate ${hidden === 1 ? 'error' : 'errors'} hidden\n`);
 				}
+			} else if (event.warnings.length) {
+				console.log(colors.bold.yellow(`• ${event.type}`));
+
+				event.warnings.filter(e => !e.duplicate).forEach(warning => {
+					if (warning.file) console.log(colors.bold(warning.file));
+					console.log(warning.message);
+				});
+
+				const hidden = event.warnings.filter(e => e.duplicate).length;
+				if (hidden > 0) {
+					console.log(`${hidden} duplicate ${hidden === 1 ? 'warning' : 'warnings'} hidden\n`);
+				}
+			} else {
+				console.log(`${colors.bold.green(`✔ ${event.type}`)} ${colors.gray(`(${prettyMs(event.duration)})`)}`);
 			}
 		});
+	} catch (err) {
+		console.log(colors.bold.red(`> ${err.message}`));
+		process.exit(1);
 	}
-
-	watch(compilers.server, {
-		name: 'server',
-
-		invalid: filename => {
-			restart_build(filename);
-			// TODO print message
-			deferreds.server = deferred();
-		},
-
-		result: info => {
-			// TODO log compile errors/warnings
-
-			fs.writeFileSync(path.join(dir, 'server_info.json'), JSON.stringify(info, null, '  '));
-
-			deferreds.client.promise.then(() => {
-				function restart() {
-					ports.wait(port).then(deferreds.server.fulfil);
-				}
-
-				if (proc) {
-					proc.kill();
-					proc.on('exit', restart);
-				} else {
-					restart();
-				}
-
-				proc = child_process.fork(`${dir}/server.js`, [], {
-					cwd: process.cwd(),
-					env: Object.assign({
-						PORT: port
-					}, process.env)
-				});
-			});
-		}
-	});
-
-	let first = true;
-
-	watch(compilers.client, {
-		name: 'client',
-
-		invalid: filename => {
-			restart_build(filename);
-			deferreds.client = deferred();
-
-			// TODO we should delete old assets. due to a webpack bug
-			// i don't even begin to comprehend, this is apparently
-			// quite difficult
-		},
-
-		result: info => {
-			fs.writeFileSync(path.join(dir, 'client_info.json'), JSON.stringify(info, null, '  '));
-			deferreds.client.fulfil();
-
-			const client_files = info.assets.map((chunk: { name: string }) => `client/${chunk.name}`);
-
-			deferreds.server.promise.then(() => {
-				hot_update_server.send({
-					status: 'completed'
-				});
-
-				if (first) {
-					first = false;
-					console.log(`${clorox.bold.cyan(`> Listening on http://localhost:${port}`)}`);
-					if (opts.open) child_process.exec(`open http://localhost:${port}`);
-				}
-			});
-
-			create_serviceworker_manifest({
-				routes: create_routes(),
-				client_files
-			});
-
-			watch_serviceworker();
-		}
-	});
-
-	let watch_serviceworker = compilers.serviceworker
-		? function() {
-			watch_serviceworker = noop;
-
-			watch(compilers.serviceworker, {
-				name: 'service worker',
-
-				result: info => {
-					fs.writeFileSync(path.join(dir, 'serviceworker_info.json'), JSON.stringify(info, null, '  '));
-				}
-			});
-		}
-		: noop;
-}
-
-function noop() {}
-
-function watch_files(pattern: string, events: string[], callback: () => void) {
-	const chokidar = require('chokidar');
-
-	const watcher = chokidar.watch(pattern, {
-		persistent: true,
-		ignoreInitial: true,
-		disableGlobbing: true
-	});
-
-	events.forEach(event => {
-		watcher.on(event, callback);
-	});
-}
+}
--- a/src/cli/export.ts
+++ b/src/cli/export.ts
@@ -1,106 +1,48 @@
-import * as child_process from 'child_process';
-import * as path from 'path';
-import * as sander from 'sander';
-import * as clorox from 'clorox';
-import cheerio from 'cheerio';
-import URL from 'url-parse';
-import fetch from 'node-fetch';
-import * as ports from 'port-authority';
+import { exporter as _exporter } from '../api/export';
+import colors from 'kleur';
 import prettyBytes from 'pretty-bytes';
-import { minify_html } from './utils/minify_html';
 import { locations } from '../config';

-export async function exporter(export_dir: string, { basepath = '' }) {
-	const build_dir = locations.dest();
+function left_pad(str: string, len: number) {
+	while (str.length < len) str = ` ${str}`;
+	return str;
+}

-	export_dir = path.join(export_dir, basepath);
+export function exporter(export_dir: string, { basepath = '' }) {
+	return new Promise((fulfil, reject) => {
+		try {
+			const emitter = _exporter({
+				build: locations.dest(),
+				dest: export_dir,
+				basepath
+			});

-	// Prep output directory
-	sander.rimrafSync(export_dir);
+			emitter.on('file', event => {
+				const pb = prettyBytes(event.size);
+				const size_color = event.size > 150000 ? colors.bold.red : event.size > 50000 ? colors.bold.yellow : colors.bold.gray;
+				const size_label = size_color(left_pad(prettyBytes(event.size), 10));

-	sander.copydirSync('assets').to(export_dir);
-	sander.copydirSync(build_dir, 'client').to(export_dir, 'client');
+				const file_label = event.status === 200
+					? event.file
+					: colors.bold[event.status >= 400 ? 'red' : 'yellow'](`(${event.status}) ${event.file}`);

-	if (sander.existsSync(build_dir, 'service-worker.js')) {
-		sander.copyFileSync(build_dir, 'service-worker.js').to(export_dir, 'service-worker.js');
-	}
+				console.log(`${size_label}   ${file_label}`);
+			});

-	if (sander.existsSync(build_dir, 'service-worker.js.map')) {
-		sander.copyFileSync(build_dir, 'service-worker.js.map').to(export_dir, 'service-worker.js.map');
-	}
+			emitter.on('info', event => {
+				console.log(colors.bold.cyan(`> ${event.message}`));
+			});

-	const port = await ports.find(3000);
+			emitter.on('error', event => {
+				reject(event.error);
+			});

-	const origin = `http://localhost:${port}`;
-
-	const proc = child_process.fork(path.resolve(`${build_dir}/server.js`), [], {
-		cwd: process.cwd(),
-		env: {
-			PORT: port,
-			NODE_ENV: 'production',
-			SAPPER_DEST: build_dir,
-			SAPPER_EXPORT: 'true'
+			emitter.on('done', event => {
+				fulfil();
+			});
+		} catch (err) {
+			console.log(`${colors.bold.red(`> ${err.message}`)}`);
+			process.exit(1);
 		}
 	});
-
-	const seen = new Set();
-	const saved = new Set();
-
-	proc.on('message', message => {
-		if (!message.__sapper__) return;
-
-		let file = new URL(message.url, origin).pathname.slice(1);
-		let { body } = message;
-
-		if (saved.has(file)) return;
-		saved.add(file);
-
-		const is_html = message.type === 'text/html';
-
-		if (is_html) {
-			file = file === '' ? 'index.html' : `${file}/index.html`;
-			body = minify_html(body);
-		}
-
-		console.log(`${clorox.bold.cyan(file)} ${clorox.gray(`(${prettyBytes(body.length)})`)}`);
-
-		sander.writeFileSync(export_dir, file, body);
-	});
-
-	async function handle(url: URL) {
-		const r = await fetch(url.href);
-		const range = ~~(r.status / 100);
-
-		if (range >= 4) {
-			console.log(`${clorox.red(`> Received ${r.status} response when fetching ${url.pathname}`)}`);
-			return;
-		}
-
-		if (range === 2) {
-			if (r.headers.get('Content-Type') === 'text/html') {
-				const body = await r.text();
-				const $ = cheerio.load(body);
-				const urls: URL[] = [];
-
-				const base = new URL($('base').attr('href') || '/', url.href);
-
-				$('a[href]').each((i: number, $a) => {
-					const url = new URL($a.attribs.href, base.href);
-
-					if (url.origin === origin && !seen.has(url.pathname)) {
-						seen.add(url.pathname);
-						urls.push(url);
-					}
-				});
-
-				for (const url of urls) {
-					await handle(url);
-				}
-			}
-		}
-	}
-
-	return ports.wait(port)
-		.then(() => handle(new URL(`/${basepath}`, origin))) // TODO all static routes
-		.then(() => proc.kill());
 }
--- a/src/cli/start.ts
+++ b/src/cli/start.ts
@@ -1,7 +1,7 @@
 import * as fs from 'fs';
 import * as path from 'path';
 import * as child_process from 'child_process';
-import * as clorox from 'clorox';
+import colors from 'kleur';
 import * as ports from 'port-authority';

 export async function start(dir: string, opts: { port: number, open: boolean }) {
@@ -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(`${colors.bold.red(`> ${dir}/server.js does not exist — type ${colors.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(`${colors.bold.red(`> Port ${port} is unavailable`)}`);
 			return;
 		}
 	} else {
@@ -34,6 +34,6 @@ export async function start(dir: string, opts: { port: number, open: boolean })
 	});

 	await ports.wait(port);
-	console.log(`${clorox.bold.cyan(`> Listening on http://localhost:${port}`)}`);
+	console.log(`${colors.bold.cyan(`> Listening on http://localhost:${port}`)}`);
 	if (opts.open) child_process.exec(`open http://localhost:${port}`);
-}
+}
--- a/src/cli/upgrade.ts
+++ b/src/cli/upgrade.ts
@@ -1,5 +1,5 @@
 import * as fs from 'fs';
-import * as clorox from 'clorox';
+import colors from 'kleur';

 export default async function upgrade() {
 	const upgraded = [
@@ -27,10 +27,10 @@ async function upgrade_sapper_main() {

 		if (/\%sapper\.main\%/.test(template)) {
 			if (!pattern.test(template)) {
-				console.log(`${clorox.red(`Could not replace %sapper.main% in ${file}`)}`);
+				console.log(`${colors.red(`Could not replace %sapper.main% in ${file}`)}`);
 			} else {
 				write(file, template.replace(pattern, `%sapper.scripts%`));
-				console.log(`${clorox.green(`Replaced %sapper.main% in ${file}`)}`);
+				console.log(`${colors.green(`Replaced %sapper.main% in ${file}`)}`);
 				replaced = true;
 			}
 		}
--- a/src/config.ts
+++ b/src/config.ts
@@ -6,5 +6,5 @@ export const locations = {
 	base:   () => path.resolve(process.env.SAPPER_BASE || ''),
 	app:    () => path.resolve(process.env.SAPPER_BASE || '', process.env.SAPPER_APP    || 'app'),
 	routes: () => path.resolve(process.env.SAPPER_BASE || '', process.env.SAPPER_ROUTES || 'routes'),
-	dest:   () => path.resolve(process.env.SAPPER_BASE || '', process.env.SAPPER_DEST   || '.sapper')
+	dest:   () => path.resolve(process.env.SAPPER_BASE || '', process.env.SAPPER_DEST   || `.sapper/${dev() ? 'dev' : 'prod'}`)
 };
--- a/src/core/create_compilers.ts
+++ b/src/core/create_compilers.ts
@@ -1,21 +1,21 @@
 import * as path from 'path';
 import relative from 'require-relative';

-export default function create_compilers() {
-	const webpack = relative('webpack', process.cwd());
+export default function create_compilers({ webpack }: { webpack: string }) {
+	const wp = relative('webpack', process.cwd());

-	const serviceworker_config = try_require(path.resolve('webpack/service-worker.config.js'));
+	const serviceworker_config = try_require(path.resolve(`${webpack}/service-worker.config.js`));

 	return {
-		client: webpack(
-			require(path.resolve('webpack/client.config.js'))
+		client: wp(
+			require(path.resolve(`${webpack}/client.config.js`))
 		),

-		server: webpack(
-			require(path.resolve('webpack/server.config.js'))
+		server: wp(
+			require(path.resolve(`${webpack}/server.config.js`))
 		),

-		serviceworker: serviceworker_config && webpack(serviceworker_config)
+		serviceworker: serviceworker_config && wp(serviceworker_config)
 	};
 }

--- a/src/core/create_manifests.ts
+++ b/src/core/create_manifests.ts
@@ -1,29 +1,35 @@
 import * as fs from 'fs';
 import * as path from 'path';
-import * as glob from 'glob';
-import create_routes from './create_routes';
+import glob from 'tiny-glob/sync.js';
 import { posixify, write_if_changed } from './utils';
 import { dev, locations } from '../config';
-import { Route } from '../interfaces';
+import { Page, PageComponent, ServerRoute } from '../interfaces';

 export function create_main_manifests({ routes, dev_port }: {
-	routes: Route[];
+	routes: { components: PageComponent[], pages: Page[], server_routes: ServerRoute[] };
 	dev_port?: number;
 }) {
-	const path_to_routes = path.relative(`${locations.app()}/manifest`, locations.routes());
+	const manifest_dir = path.join(locations.app(), 'manifest');
+	if (!fs.existsSync(manifest_dir)) fs.mkdirSync(manifest_dir);
+
+	const path_to_routes = path.relative(manifest_dir, locations.routes());

 	const client_manifest = generate_client(routes, path_to_routes, dev_port);
 	const server_manifest = generate_server(routes, path_to_routes);

-	write_if_changed(`${locations.app()}/manifest/client.js`, client_manifest);
-	write_if_changed(`${locations.app()}/manifest/server.js`, server_manifest);
+	write_if_changed(
+		`${manifest_dir}/default-layout.html`,
+		`<svelte:component this={child.component} {...child.props}/>`
+	);
+	write_if_changed(`${manifest_dir}/client.js`, client_manifest);
+	write_if_changed(`${manifest_dir}/server.js`, server_manifest);
 }

 export function create_serviceworker_manifest({ routes, client_files }: {
-	routes: Route[];
+	routes: { components: PageComponent[], pages: Page[], server_routes: ServerRoute[] };
 	client_files: string[];
 }) {
-	const assets = glob.sync('**', { cwd: 'assets', nodir: true });
+	const assets = glob('**', { cwd: 'assets', filesOnly: true });

 	let code = `
 		// This file is generated by Sapper — do not edit it!
@@ -33,36 +39,64 @@ export function create_serviceworker_manifest({ routes, client_files }: {

 		export const shell = [\n\t${client_files.map((x: string) => `"${x}"`).join(',\n\t')}\n];

-		export const routes = [\n\t${routes.filter((r: Route) => r.type === 'page' && !/^_[45]xx$/.test(r.id)).map((r: Route) => `{ pattern: ${r.pattern} }`).join(',\n\t')}\n];
+		export const routes = [\n\t${routes.pages.map((r: Page) => `{ pattern: ${r.pattern} }`).join(',\n\t')}\n];
 	`.replace(/^\t\t/gm, '').trim();

 	write_if_changed(`${locations.app()}/manifest/service-worker.js`, code);
 }

-function generate_client(routes: Route[], path_to_routes: string, dev_port?: number) {
+function generate_client(
+	routes: { root: PageComponent, components: PageComponent[], pages: Page[], server_routes: ServerRoute[] },
+	path_to_routes: string,
+	dev_port?: number
+) {
+	const page_ids = new Set(routes.pages.map(page =>
+		page.pattern.toString()));
+
+	const server_routes_to_ignore = routes.server_routes.filter(route =>
+		!page_ids.has(route.pattern.toString()));
+
+	const len = Math.max(...routes.components.map(c => c.name.length));
+
 	let code = `
 		// This file is generated by Sapper — do not edit it!
-		export const routes = [
-			${routes
-				.map(route => {
-					if (route.type !== 'page') {
-						return `{ pattern: ${route.pattern}, ignore: true }`;
-					}
+		import root from '${get_file(path_to_routes, routes.root)}';
+		import error from '${posixify(`${path_to_routes}/_error.html`)}';

-					const file = posixify(`${path_to_routes}/${route.file}`);
+		${routes.components.map(component =>
+		`const ${component.name} = () =>
+			import(/* webpackChunkName: "${component.name}" */ '${get_file(path_to_routes, component)}');`)
+		.join('\n')}

-					if (route.id === '_4xx' || route.id === '_5xx') {
-						return `{ error: '${route.id.slice(1)}', load: () => import(/* webpackChunkName: "${route.id}" */ '${file}') }`;
-					}
+		export const manifest = {
+			ignore: [${server_routes_to_ignore.map(route => route.pattern).join(', ')}],

-					const params = route.params.length === 0
-						? '{}'
-						: `{ ${route.params.map((part, i) => `${part}: match[${i + 1}]`).join(', ')} }`;
+			pages: [
+				${routes.pages.map(page => `{
+					// ${page.parts[page.parts.length - 1].component.file}
+					pattern: ${page.pattern},
+					parts: [
+						${page.parts.map(part => {
+							if (part === null) return 'null';

-					return `{ pattern: ${route.pattern}, params: ${route.params.length > 0 ? `match` : `()`} => (${params}), load: () => import(/* webpackChunkName: "${route.id}" */ '${file}') }`;
-				})
-				.join(',\n\t')}
-		];`.replace(/^\t\t/gm, '').trim();
+							if (part.params.length > 0) {
+								const props = part.params.map((param, i) => `${param}: match[${i + 1}]`);
+								return `{ component: ${part.component.name}, params: match => ({ ${props.join(', ')} }) }`;
+							}
+
+							return `{ component: ${part.component.name} }`;
+						}).join(',\n\t\t\t\t\t\t')}
+					]
+				}`).join(',\n\n\t\t\t\t')}
+			],
+
+			root,
+
+			error
+		};
+
+		// this is included for legacy reasons
+		export const routes = {};`.replace(/^\t\t/gm, '').trim();

 	if (dev()) {
 		const sapper_dev_client = posixify(
@@ -81,36 +115,74 @@ function generate_client(routes: Route[], path_to_routes: string, dev_port?: num
 	return code;
 }

-function generate_server(routes: Route[], path_to_routes: string) {
+function generate_server(
+	routes: { root: PageComponent, components: PageComponent[], pages: Page[], server_routes: ServerRoute[] },
+	path_to_routes: string
+) {
+	const imports = [].concat(
+		routes.server_routes.map(route =>
+			`import * as ${route.name} from '${posixify(`${path_to_routes}/${route.file}`)}';`),
+		routes.components.map(component =>
+			`import ${component.name} from '${get_file(path_to_routes, component)}';`),
+		`import root from '${get_file(path_to_routes, routes.root)}';`,
+		`import error from '${posixify(`${path_to_routes}/_error.html`)}';`
+	);
+
 	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}';`;
-			})
-			.join('\n')}
+		${imports.join('\n')}

-		export const routes = [
-			${routes
-				.map(route => {
-					const file = posixify(`../../${route.file}`);
+		export const manifest = {
+			server_routes: [
+				${routes.server_routes.map(route => `{
+					// ${route.file}
+					pattern: ${route.pattern},
+					handlers: ${route.name},
+					params: ${route.params.length > 0
+						? `match => ({ ${route.params.map((param, i) => `${param}: match[${i + 1}]`).join(', ')} })`
+						: `() => ({})`}
+				}`).join(',\n\n\t\t\t\t')}
+			],

-					if (route.id === '_4xx' || route.id === '_5xx') {
-						return `{ error: '${route.id.slice(1)}', module: ${route.id} }`;
-					}
+			pages: [
+				${routes.pages.map(page => `{
+					// ${page.parts[page.parts.length - 1].component.file}
+					pattern: ${page.pattern},
+					parts: [
+						${page.parts.map(part => {
+							if (part === null) return 'null';

-					const params = route.params.length === 0
-						? '{}'
-						: `{ ${route.params.map((part, i) => `${part}: match[${i + 1}]`).join(', ')} }`;
+							const props = [
+								`name: "${part.component.name}"`,
+								`component: ${part.component.name}`
+							];

-					return `{ id: '${route.id}', type: '${route.type}', pattern: ${route.pattern}, params: ${route.params.length > 0 ? `match` : `()`} => (${params}), module: ${route.id} }`;
-				})
-				.join(',\n\t')
-			}
-		];`.replace(/^\t\t/gm, '').trim();
+							if (part.params.length > 0) {
+								const params = part.params.map((param, i) => `${param}: match[${i + 1}]`);
+								props.push(`params: match => ({ ${params.join(', ')} })`);
+							}
+
+							return `{ ${props.join(', ')} }`;
+						}).join(',\n\t\t\t\t\t\t')}
+					]
+				}`).join(',\n\n\t\t\t\t')}
+			],
+
+			root,
+
+			error
+		};
+
+		// this is included for legacy reasons
+		export const routes = {};`.replace(/^\t\t/gm, '').trim();

 	return code;
+}
+
+function get_file(path_to_routes: string, component: PageComponent) {
+	if (component.default) {
+		return `./default-layout.html`;
+	}
+
+	return posixify(`${path_to_routes}/${component.file}`);
 }
--- a/src/core/create_routes.ts
+++ b/src/core/create_routes.ts
@@ -1,129 +1,295 @@
+import * as fs from 'fs';
 import * as path from 'path';
-import glob from 'glob';
 import { locations } from '../config';
-import { Route } from '../interfaces';
+import { Page, PageComponent, ServerRoute } from '../interfaces';
+import { posixify } from './utils';

-export default function create_routes({ files } = { files: glob.sync('**/*.*', { cwd: locations.routes(), nodir: true }) }) {
-	const routes: Route[] = files
-		.map((file: string) => {
-			if (/(^|\/|\\)_/.test(file)) return;
+export default function create_routes(cwd = locations.routes()) {
+	const components: PageComponent[] = [];
+	const pages: Page[] = [];
+	const server_routes: ServerRoute[] = [];

-			if (/]\[/.test(file)) {
-				throw new Error(`Invalid route ${file} — parameters must be separated`);
-			}
+	const default_layout: PageComponent = {
+		default: true,
+		name: '_default_layout',
+		file: null
+	};

-			const base = file.replace(/\.[^/.]+$/, '');
-			const parts = base.split('/'); // glob output is always posix-style
-			if (parts[parts.length - 1] === 'index') parts.pop();
+	function walk(
+		dir: string,
+		parent_segments: Part[][],
+		parent_params: string[],
+		stack: Array<{
+			component: PageComponent,
+			params: string[]
+		}>
+	) {
+		const items = fs.readdirSync(dir)
+			.map(basename => {
+				const resolved = path.join(dir, basename);
+				const file = path.relative(cwd, resolved);
+				const is_dir = fs.statSync(resolved).isDirectory();

-			const id = (
-				parts.join('_').replace(/[[\]]/g, '$').replace(/^\d/, '_$&').replace(/[^a-zA-Z0-9_$]/g, '_')
-			 ) || '_';
+				const segment = is_dir
+					? basename
+					: basename.slice(0, -path.extname(basename).length);

-			const params: string[] = [];
-			const param_pattern = /\[([^\]]+)\]/g;
-			let match;
-			while (match = param_pattern.exec(base)) {
-				params.push(match[1]);
-			}
+				const parts = get_parts(segment);
+				const is_index = is_dir ? false : basename.startsWith('index.');
+				const is_page = path.extname(basename) === '.html';

-			// TODO can we do all this with sub-parts? or does
-			// nesting make that impossible?
-			let pattern_string = '';
-			let i = parts.length;
-			let nested = true;
-			while (i--) {
-				const part = encodeURIComponent(parts[i].normalize()).replace(/%5B/g, '[').replace(/%5D/g, ']');
-				const dynamic = ~part.indexOf('[');
+				parts.forEach(part => {
+					if (/\]\[/.test(part.content)) {
+						throw new Error(`Invalid route ${file} — parameters must be separated`);
+					}

-				if (dynamic) {
-					const matcher = part.replace(param_pattern, `([^\/]+?)`);
-					pattern_string = nested ? `(?:\\/${matcher}${pattern_string})?` : `\\/${matcher}${pattern_string}`;
-				} else {
-					nested = false;
-					pattern_string = `\\/${part}${pattern_string}`;
-				}
-			}
-
-			const pattern = new RegExp(`^${pattern_string}\\/?$`);
-
-			const test = (url: string) => pattern.test(url);
-
-			const exec = (url: string) => {
-				const match = pattern.exec(url);
-				if (!match) return;
-
-				const result: Record<string, string> = {};
-				params.forEach((param, i) => {
-					result[param] = match[i + 1];
+					if (part.qualifier && /[\(\)\?\:]/.test(part.qualifier.slice(1, -1))) {
+						throw new Error(`Invalid route ${file} — cannot use (, ), ? or : in route qualifiers`);
+					}
 				});

-				return result;
-			};
+				return {
+					basename,
+					parts,
+					file: posixify(file),
+					is_dir,
+					is_index,
+					is_page
+				};
+			})
+			.sort(comparator);

-			return {
-				id,
-				type: path.extname(file) === '.html' ? 'page' : 'route',
-				file,
-				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;
+		items.forEach(item => {
+			if (item.basename[0] === '_') return;

-			const max = Math.max(a.parts.length, b.parts.length);
+			if (item.basename[0] === '.') {
+				if (item.file !== '.well-known') return;
+			}

-			for (let i = 0; i < max; i += 1) {
-				const a_part = a.parts[i];
-				const b_part = b.parts[i];
+			const segments = parent_segments.slice();

-				if (!a_part) return -1;
-				if (!b_part) return 1;
+			if (item.is_index && segments.length > 0) {
+				const last_segment = segments[segments.length - 1].slice();
+				const suffix = item.basename
+					.slice(0, -path.extname(item.basename).length).
+					replace('index', '');

-				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 (suffix) {
+					const last_part = last_segment[last_segment.length - 1];
+					if (last_part.dynamic) {
+						last_segment.push({ dynamic: false, content: suffix });
+					} else {
+						last_segment[last_segment.length - 1] = {
+							dynamic: false,
+							content: `${last_part.content}${suffix}`
+						};
 					}

-					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)
-						);
-					}
+					segments[segments.length - 1] = last_segment;
+				}
+			} else {
+				segments.push(item.parts);
+			}
+
+			const params = parent_params.slice();
+			params.push(...item.parts.filter(p => p.dynamic).map(p => p.content));
+
+			if (item.is_dir) {
+				const index = path.join(dir, item.basename, '_layout.html');
+
+				const component = fs.existsSync(index) && {
+					name: `${get_slug(item.file)}__layout`,
+					file: `${item.file}/_layout.html`
+				};
+
+				if (component) components.push(component);
+
+				walk(
+					path.join(dir, item.basename),
+					segments,
+					params,
+					component
+						? stack.concat({ component, params })
+						: stack.concat(null)
+				);
+			}
+
+			else if (item.is_page) {
+				const component = {
+					name: get_slug(item.file),
+					file: item.file
+				};
+
+				const parts = stack.concat({
+					component,
+					params
+				});
+
+				components.push(component);
+				if (item.basename === 'index.html') {
+					pages.push({
+						pattern: get_pattern(parent_segments),
+						parts
+					});
+				} else {
+					pages.push({
+						pattern: get_pattern(segments),
+						parts
+					});
 				}
 			}

-			throw new Error(`The ${a.file} and ${b.file} routes clash`);
+			else {
+				server_routes.push({
+					name: `route_${get_slug(item.file)}`,
+					pattern: get_pattern(segments),
+					file: item.file,
+					params: params
+				});
+			}
 		});
+	}

-	return routes;
+	const root_file = path.join(cwd, '_layout.html');
+	const root = fs.existsSync(root_file)
+		? {
+			name: 'main',
+			file: '_layout.html'
+		}
+		: default_layout;
+
+	walk(cwd, [], [], []);
+
+	// check for clashes
+	const seen_pages: Map<string, Page> = new Map();
+	pages.forEach(page => {
+		const pattern = page.pattern.toString();
+		if (seen_pages.has(pattern)) {
+			const file = page.parts.pop().component.file;
+			const other_page = seen_pages.get(pattern);
+			const other_file = other_page.parts.pop().component.file;
+
+			throw new Error(`The ${other_file} and ${file} pages clash`);
+		}
+
+		seen_pages.set(pattern, page);
+	});
+
+	const seen_routes: Map<string, ServerRoute> = new Map();
+	server_routes.forEach(route => {
+		const pattern = route.pattern.toString();
+		if (seen_routes.has(pattern)) {
+			const other_route = seen_routes.get(pattern);
+			throw new Error(`The ${other_route.file} and ${route.file} routes clash`);
+		}
+
+		seen_routes.set(pattern, route);
+	});
+
+	return {
+		root,
+		components,
+		pages,
+		server_routes
+	};
 }

-function get_sub_parts(part: string) {
-	return part.split(/[\[\]]/)
-		.map((content, i) => {
-			if (!content) return null;
+type Part = {
+	content: string;
+	dynamic: boolean;
+	qualifier?: string;
+};
+
+function comparator(
+	a: { basename: string, parts: Part[], file: string, is_index: boolean },
+	b: { basename: string, parts: Part[], file: string, is_index: boolean }
+) {
+	if (a.is_index !== b.is_index) return a.is_index ? -1 : 1;
+
+	const max = Math.max(a.parts.length, b.parts.length);
+
+	for (let i = 0; i < max; i += 1) {
+		const a_sub_part = a.parts[i];
+		const b_sub_part = b.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)
+			);
+		}
+
+		// If both parts dynamic, check for regexp patterns
+		if (a_sub_part.dynamic && b_sub_part.dynamic) {
+			const regexp_pattern = /\((.*?)\)/;
+			const a_match = regexp_pattern.exec(a_sub_part.content);
+			const b_match = regexp_pattern.exec(b_sub_part.content);
+
+			if (!a_match && b_match) {
+				return 1; // No regexp, so less specific than b
+			}
+			if (!b_match && a_match) {
+				return -1;
+			}
+			if (a_match && b_match && a_match[1] !== b_match[1]) {
+				return b_match[1].length - a_match[1].length;
+			}
+		}
+	}
+}
+
+function get_parts(part: string): Part[] {
+	return part.split(/\[(.+)\]/)
+		.map((str, i) => {
+			if (!str) return null;
+			const dynamic = i % 2 === 1;
+
+			const [, content, qualifier] = dynamic
+				? /([^(]+)(\(.+\))?$/.exec(str)
+				: [, str, null];
+
 			return {
 				content,
-				dynamic: i % 2 === 1
+				dynamic,
+				qualifier
 			};
 		})
 		.filter(Boolean);
+}
+
+function get_slug(file: string) {
+	return file
+		.replace(/[\\\/]index/, '')
+		.replace(/_default([\/\\index])?\.html$/, 'index')
+		.replace(/[\/\\]/g, '_')
+		.replace(/\.\w+$/, '')
+		.replace(/\[([^(]+)(?:\([^(]+\))?\]/, '$$$1')
+		.replace(/[^a-zA-Z0-9_$]/g, c => {
+			return c === '.' ? '_' : `$${c.charCodeAt(0)}`
+		});
+}
+
+function get_pattern(segments: Part[][]) {
+	return new RegExp(
+		`^` +
+		segments.map(segment => {
+			return '\\/' + segment.map(part => {
+				return part.dynamic
+					? part.qualifier || '([^\\/]+?)'
+					: encodeURI(part.content.normalize())
+						.replace(/\?/g, '%3F')
+						.replace(/#/g, '%23')
+						.replace(/%5B/g, '[')
+						.replace(/%5D/g, ']');
+			}).join('');
+		}).join('') +
+		'\\\/?$'
+	);
 }
--- a/src/core/utils.ts
+++ b/src/core/utils.ts
@@ -1,11 +1,11 @@
-import * as sander from 'sander';
+import * as fs from 'fs';

 const previous_contents = new Map();

 export function write_if_changed(file: string, code: string) {
 	if (code !== previous_contents.get(file)) {
 		previous_contents.set(file, code);
-		sander.writeFileSync(file, code);
+		fs.writeFileSync(file, code);
 		fudge_mtime(file);
 	}
 }
@@ -16,8 +16,8 @@ export function posixify(file: string) {

 export function fudge_mtime(file: string) {
 	// need to fudge the mtime so that webpack doesn't go doolally
-	const { atime, mtime } = sander.statSync(file);
-	sander.utimesSync(
+	const { atime, mtime } = fs.statSync(file);
+	fs.utimesSync(
 		file,
 		new Date(atime.getTime() - 999999),
 		new Date(mtime.getTime() - 999999)
--- a/src/interfaces.ts
+++ b/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>;
@@ -16,4 +18,25 @@ export type Template = {

 export type Store = {
 	get: () => any;
+};
+
+export type PageComponent = {
+	default?: boolean;
+	name: string;
+	file: string;
+};
+
+export type Page = {
+	pattern: RegExp;
+	parts: Array<{
+		component: PageComponent;
+		params: string[];
+	}>
+};
+
+export type ServerRoute = {
+	name: string;
+	pattern: RegExp;
+	file: string;
+	params: string[];
 };
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -1,34 +1,36 @@
 import * as fs from 'fs';
 import * as path from 'path';
-import { resolve, URL } from 'url';
+import { URL } from 'url';
 import { ClientRequest, ServerResponse } from 'http';
 import cookie from 'cookie';
-import mkdirp from 'mkdirp';
-import rimraf from 'rimraf';
 import devalue from 'devalue';
 import fetch from 'node-fetch';
 import { lookup } from './middleware/mime';
-import { create_routes, create_compilers } from './core';
 import { locations, dev } from './config';
-import { Route, Template } from './interfaces';
 import sourceMapSupport from 'source-map-support';

 sourceMapSupport.install();

-type RouteObject = {
-	id: string;
-	type: 'page' | 'route';
+type ServerRoute = {
 	pattern: RegExp;
+	handlers: Record<string, Handler>;
 	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>
-	};
-	error?: string;
+};
+
+type Page = {
+	pattern: RegExp;
+	parts: Array<{
+		name: string;
+		component: Component;
+		params?: (match: RegExpMatchArray) => Record<string, string>;
+	}>
+};
+
+type Manifest = {
+	server_routes: ServerRoute[];
+	pages: Page[];
+	root: Component;
+	error: Component;
 }

 type Handler = (req: Req, res: ServerResponse, next: () => void) => void;
@@ -37,6 +39,20 @@ type Store = {
 	get: () => any
 };

+type Props = {
+	path: string;
+	query: Record<string, string>;
+	params: Record<string, string>;
+	error?: { message: string };
+	status?: number;
+	child: {
+		segment: string;
+		component: Component;
+		props: Props;
+	};
+	[key: string]: any;
+};
+
 interface Req extends ClientRequest {
 	url: string;
 	baseUrl: string;
@@ -44,25 +60,73 @@ interface Req extends ClientRequest {
 	method: string;
 	path: string;
 	params: Record<string, string>;
+	query: Record<string, string>;
 	headers: Record<string, string>;
 }

-export default function middleware({ routes, store }: {
-	routes: RouteObject[],
-	store: (req: Req) => Store
+interface Component {
+	render: (data: any, opts: { store: Store }) => {
+		head: string;
+		css: { code: string, map: any };
+		html: string
+	},
+	preload: (data: any) => any | Promise<any>
+}
+
+const IGNORE = '__SAPPER__IGNORE__';
+function toIgnore(uri: string, val: any) {
+	if (Array.isArray(val)) return val.some(x => toIgnore(uri, x));
+	if (val instanceof RegExp) return val.test(uri);
+	if (typeof val === 'function') return val(uri);
+	return uri.startsWith(val.charCodeAt(0) === 47 ? val : `/${val}`);
+}
+
+export default function middleware(opts: {
+	manifest: Manifest,
+	store: (req: Req, res: ServerResponse) => Store,
+	ignore?: any,
+	routes?: any // legacy
 }) {
+	if (opts.routes) {
+		throw new Error(`As of Sapper 0.15, opts.routes should be opts.manifest`);
+	}
+
 	const output = locations.dest();

-	const client_info = JSON.parse(fs.readFileSync(path.join(output, 'client_info.json'), 'utf-8'));
+	const { manifest, store, ignore } = opts;
+
+	let emitted_basepath = false;

 	const middleware = compose_handlers([
+		ignore && ((req: Req, res: ServerResponse, next: () => void) => {
+			req[IGNORE] = toIgnore(req.path, ignore);
+			next();
+		}),
+
 		(req: Req, res: ServerResponse, next: () => void) => {
+			if (req[IGNORE]) return next();
+
 			if (req.baseUrl === undefined) {
-				req.baseUrl = req.originalUrl
-					? req.originalUrl.slice(0, -req.url.length)
+				let { originalUrl } = req;
+				if (req.url === '/' && originalUrl[originalUrl.length - 1] !== '/') {
+					originalUrl += '/';
+				}
+
+				req.baseUrl = originalUrl
+					? originalUrl.slice(0, -req.url.length)
 					: '';
 			}

+			if (!emitted_basepath && process.send) {
+				process.send({
+					__sapper__: true,
+					event: 'basepath',
+					basepath: req.baseUrl
+				});
+
+				emitted_basepath = true;
+			}
+
 			if (req.path === undefined) {
 				req.path = req.url.replace(/\?.*/, '');
 			}
@@ -90,7 +154,8 @@ export default function middleware({ routes, store }: {
 			cache_control: 'max-age=31536000'
 		}),

-		get_route_handler(client_info.assetsByChunkName, routes, store)
+		get_server_route_handler(manifest.server_routes),
+		get_page_handler(manifest, store)
 	].filter(Boolean));

 	return middleware;
@@ -114,6 +179,8 @@ function serve({ prefix, pathname, cache_control }: {
 		: (file: string) => (cache.has(file) ? cache : cache.set(file, fs.readFileSync(path.resolve(output, file)))).get(file)

 	return (req: Req, res: ServerResponse, next: () => void) => {
+		if (req[IGNORE]) return next();
+
 		if (filter(req)) {
 			const type = lookup(req.path);

@@ -133,255 +200,350 @@ function serve({ prefix, pathname, cache_control }: {
 	};
 }

-const resolved = Promise.resolve();
+function get_server_route_handler(routes: ServerRoute[]) {
+	function handle_route(route: ServerRoute, req: Req, res: ServerResponse, next: () => void) {
+		req.params = route.params(route.pattern.exec(req.path));
+
+		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 = route.handlers[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);
+				};
+
+				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);
+
+					process.send({
+						__sapper__: true,
+						event: 'file',
+						url: req.url,
+						method: req.method,
+						status: res.statusCode,
+						type: headers['content-type'],
+						body: Buffer.concat(chunks).toString()
+					});
+				};
+			}
+
+			const handle_next = (err?: Error) => {
+				if (err) {
+					res.statusCode = 500;
+					res.end(err.message);
+				} else {
+					process.nextTick(next);
+				}
+			};
+
+			try {
+				handle_method(req, res, handle_next);
+			} catch (err) {
+				handle_next(err);
+			}
+		} else {
+			// no matching handler for method
+			process.nextTick(next);
+		}
+	}
+
+	return function find_route(req: Req, res: ServerResponse, next: () => void) {
+		if (req[IGNORE]) return next();
+
+		for (const route of routes) {
+			if (route.pattern.test(req.path)) {
+				handle_route(route, req, res, next);
+				return;
+			}
+		}
+
+		next();
+	};
+}
+
+function get_page_handler(
+	manifest: Manifest,
+	store_getter: (req: Req, res: ServerResponse) => Store
+) {
+	const output = locations.dest();
+
+	const get_chunks = dev()
+		? () => JSON.parse(fs.readFileSync(path.join(output, 'client_assets.json'), 'utf-8'))
+		: (assets => () => assets)(JSON.parse(fs.readFileSync(path.join(output, 'client_assets.json'), 'utf-8')));

-function get_route_handler(chunks: Record<string, string>, 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'));

-	function handle_route(route: RouteObject, req: Req, res: ServerResponse) {
-		req.params = route.params(route.pattern.exec(req.path));
+	const { server_routes, pages } = manifest;
+	const error_route = manifest.error;

-		const mod = route.module;
+	function handle_error(req: Req, res: ServerResponse, statusCode: number, error: Error | string) {
+		handle_page({
+			pattern: null,
+			parts: [
+				{ name: null, component: error_route }
+			]
+		}, req, res, statusCode, error || new Error('Unknown error in preload function'));
+	}

-		if (route.type === 'page') {
-			res.setHeader('Content-Type', 'text/html');
+	function handle_page(page: Page, req: Req, res: ServerResponse, status = 200, error: Error | string = null) {
+		const chunks: Record<string, string | string[]> = get_chunks();

-			// 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(', ');
+		res.setHeader('Content-Type', 'text/html');

-			res.setHeader('Link', link);
+		// preload main.js and current route
+		// TODO detect other stuff we can preload? images, CSS, fonts?
+		let preloaded_chunks = Array.isArray(chunks.main) ? chunks.main : [chunks.main];
+		if (!error) {
+			page.parts.forEach(part => {
+				if (!part) return;

-			const store = store_getter ? store_getter(req) : null;
-			const data = { params: req.params, query: req.query };
+				// using concat because it could be a string or an array. thanks webpack!
+				preloaded_chunks = preloaded_chunks.concat(chunks[part.name]);
+			});
+		}

-			let redirect: { statusCode: number, location: string };
-			let error: { statusCode: number, message: Error | string };
+		const link = preloaded_chunks
+			.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.baseUrl + '/'  :''}`);
+		res.setHeader('Link', link);

-						if (opts) {
-							opts = Object.assign({}, opts);
+		const store = store_getter ? store_getter(req, res) : null;

-							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 preload_error: { statusCode: number, message: Error | string };

-							if (include_cookies) {
-								const cookies: Record<string, string> = {};
-								if (!opts.headers) opts.headers = {};
+		const preload_context = {
+			redirect: (statusCode: number, location: string) => {
+				if (redirect && (redirect.statusCode !== statusCode || redirect.location !== location)) {
+					throw new Error(`Conflicting redirects`);
+				}
+				location = location.replace(/^\//g, ''); // leading slash (only)
+				redirect = { statusCode, location };
+			},
+			error: (statusCode: number, message: Error | string) => {
+				preload_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}`
+					);

-						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 (include_cookies) {
+						const cookies: Record<string, string> = {};
+						if (!opts.headers) opts.headers = {};

-					return;
+						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;
+					}
 				}

-				if (error) {
-					handle_error(req, res, error.statusCode, error.message);
-					return;
-				}
+				return fetch(parsed.href, opts);
+			},
+			store
+		};

-				const serialized = {
-					preloaded: mod.preload && try_serialize(preloaded),
-					store: store && try_serialize(store.get())
-				};
-				Object.assign(data, preloaded);
+		const root_preloaded = manifest.root.preload
+			? manifest.root.preload.call(preload_context, {
+				path: req.path,
+				query: req.query,
+				params: {}
+			})
+			: {};

-				const { html, head, css } = mod.render(data, {
-					store
-				});
+		const match = error ? null : page.pattern.exec(req.path);

-				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('');
+		Promise.all([root_preloaded].concat(page.parts.map(part => {
+			if (!part) return null;

-				let inline_script = `__SAPPER__={${[
-					`baseUrl: "${req.baseUrl}"`,
-					serialized.preloaded && `preloaded: ${serialized.preloaded}`,
-					serialized.store && `store: ${serialized.store}`
-				].filter(Boolean).join(',')}}`
+			return part.component.preload
+				? part.component.preload.call(preload_context, {
+					path: req.path,
+					query: req.query,
+					params: part.params ? part.params(match) : {}
+				})
+				: {};
+		}))).catch(err => {
+			preload_error = { statusCode: 500, message: err };
+			return []; // appease TypeScript
+		}).then(preloaded => {
+			if (redirect) {
+				const location = `${req.baseUrl}/${redirect.location}`;

-				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')`
-				}
-
-				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);
+				res.statusCode = redirect.statusCode;
+				res.setHeader('Location', location);
+				res.end();

 				if (process.send) {
 					process.send({
 						__sapper__: true,
+						event: 'file',
 						url: req.url,
 						method: req.method,
-						status: 200,
+						status: redirect.statusCode,
 						type: 'text/html',
-						body: page
+						body: `<script>window.location.href = "${location}"</script>`
 					});
 				}
+
+				return;
+			}
+
+			if (preload_error) {
+				handle_error(req, res, preload_error.statusCode, preload_error.message);
+				return;
+			}
+
+			const serialized = {
+				preloaded: `[${preloaded.map(data => try_serialize(data)).join(',')}]`,
+				store: store && try_serialize(store.get())
+			};
+
+			const segments = req.path.split('/').filter(Boolean);
+
+			const props: Props = {
+				path: req.path,
+				query: req.query,
+				params: {},
+				child: null
+			};
+
+			if (error) {
+				props.error = error instanceof Error ? error : { message: error };
+				props.status = status;
+			}
+
+			const data = Object.assign({}, props, preloaded[0], {
+				params: {},
+				child: {
+					segment: segments[0]
+				}
 			});
-		}

-		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> = {};
+			let level = data.child;
+			for (let i = 0; i < page.parts.length; i += 1) {
+				const part = page.parts[i];
+				if (!part) continue;

-					// intercept data so that it can be exported
-					res.write = function(chunk: any) {
-						chunks.push(new Buffer(chunk));
-						write.apply(res, arguments);
-					};
+				const get_params = part.params || (() => ({}));

-					res.setHeader = function(name: string, value: string) {
-						headers[name.toLowerCase()] = value;
-						setHeader.apply(res, arguments);
-					};
+				Object.assign(level, {
+					component: part.component,
+					props: Object.assign({}, props, {
+						params: get_params(match)
+					}, preloaded[i + 1])
+				});

-					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()
-						});
-					};
-				}
-
-				const handle_bad_result = (err?: Error) => {
-					if (err) {
-						console.error(err.stack);
-						res.statusCode = 500;
-						res.end(err.message);
-					} else {
-						handle_error(req, res, 404, 'Not found');
-					}
+				level.props.child = <Props["child"]>{
+					segment: segments[i + 1]
 				};
+				level = level.props.child;
+			}

-				try {
-					handler(req, res, handle_bad_result);
-				} catch (err) {
-					handle_bad_result(err);
-				}
+			const { html, head, css } = manifest.root.render(data, {
+				store
+			});
+
+			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('');
+
+			let inline_script = `__SAPPER__={${[
+				error && `error:1`,
+				`baseUrl:"${req.baseUrl}"`,
+				serialized.preloaded && `preloaded:${serialized.preloaded}`,
+				serialized.store && `store:${serialized.store}`
+			].filter(Boolean).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');`;
+			}
+
+			const body = 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.statusCode = status;
+			res.end(body);
+
+			if (process.send) {
+				process.send({
+					__sapper__: true,
+					event: 'file',
+					url: req.url,
+					method: req.method,
+					status,
+					type: 'text/html',
+					body
+				});
+			}
+		}).catch(err => {
+			if (error) {
+				// we encountered an error while rendering the error page — oops
+				res.statusCode = 500;
+				res.end(`<pre>${escape_html(err.message)}</pre>`);
 			} else {
-				// no matching handler for method — 404
-				handle_error(req, res, 404, 'Not found');
+				handle_error(req, res, 500, err);
 			}
-		}
+		});
 	}

-	const not_found_route = routes.find((route: RouteObject) => route.error === '4xx');
-	const error_route = routes.find((route: RouteObject) => route.error === '5xx');
+	return function find_route(req: Req, res: ServerResponse, next: () => void) {
+		if (req[IGNORE]) return next();

-	function handle_error(req: Req, res: ServerResponse, statusCode: number, message: Error | string) {
-		res.statusCode = statusCode;
-		res.setHeader('Content-Type', 'text/html');
-
-		const error = message instanceof Error ? message : new Error(message);
-
-		const not_found = statusCode >= 400 && statusCode < 500;
-
-		const route = not_found
-			? not_found_route
-			: error_route;
-
-		const title: string = not_found
-			? 'Not found'
-			: `Internal server error: ${error.message}`;
-
-		const rendered = route ? route.module.render({
-			status: statusCode,
-			error
-		}, {
-			store: store_getter && store_getter(req)
-		}) : { head: '', css: null, html: title };
-
-		const { head, css, html } = rendered;
-
-		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>` : ''));
-
-		res.end(page);
-	}
-
-	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);
+		if (!server_routes.some(route => route.pattern.test(req.path))) {
+			for (const page of pages) {
+				if (page.pattern.test(req.path)) {
+					handle_page(page, req, res);
+					return;
+				}
 			}
-
-			handle_error(req, res, 404, 'Not found');
-		} catch (error) {
-			handle_error(req, res, 500, error);
 		}
+
+		handle_error(req, res, 404, 'Not found');
 	};
 }

@@ -405,10 +567,6 @@ function compose_handlers(handlers: Handler[]) {
 	};
 }

-function read_json(file: string) {
-	return JSON.parse(fs.readFileSync(file, 'utf-8'));
-}
-
 function try_serialize(data: any) {
 	try {
 		return devalue(data);
@@ -416,3 +574,15 @@ function try_serialize(data: any) {
 		return null;
 	}
 }
+
+function escape_html(html: string) {
+	const chars: Record<string, string> = {
+		'"' : 'quot',
+		"'": '#39',
+		'&': 'amp',
+		'<' : 'lt',
+		'>' : 'gt'
+	};
+
+	return html.replace(/["'&<>]/g, c => `&${chars[c]};`);
+}
--- a/src/runtime/index.ts
+++ b/src/runtime/index.ts
@@ -1,13 +1,39 @@
 import { detach, findAnchor, scroll_state, which } from './utils';
-import { Component, ComponentConstructor, Params, Query, Route, RouteData, ScrollPosition, Store, Target } from './interfaces';
+import { Component, ComponentConstructor, Params, Query, Redirect, Manifest, RouteData, ScrollPosition, Store, Target } from './interfaces';

-const manifest = typeof window !== 'undefined' && window.__SAPPER__;
+const initial_data = typeof window !== 'undefined' && window.__SAPPER__;

-export let component: Component;
+export let root: Component;
 let target: Node;
 let store: Store;
-let routes: Route[];
-let errors: { '4xx': Route, '5xx': Route };
+let manifest: Manifest;
+let segments: string[] = [];
+
+type RootProps = {
+	path: string;
+	params: Record<string, string>;
+	query: Record<string, string>;
+	child: Child;
+};
+
+type Child = {
+	segment?: string;
+	props?: any;
+	component?: Component;
+};
+
+const root_props: RootProps = {
+	path: null,
+	params: null,
+	query: null,
+	child: {
+		segment: null,
+		component: null,
+		props: {}
+	}
+};
+
+export { root as component }; // legacy reasons — drop in a future version

 const history = typeof window !== 'undefined' ? window.history : {
 	pushState: (state: any, title: string, href: string) => {},
@@ -25,36 +51,50 @@ if ('scrollRestoration' in history) {

 function select_route(url: URL): Target {
 	if (url.origin !== window.location.origin) return null;
-	if (!url.pathname.startsWith(manifest.baseUrl)) return null;
+	if (!url.pathname.startsWith(initial_data.baseUrl)) return null;

-	const pathname = url.pathname.slice(manifest.baseUrl.length);
+	const path = url.pathname.slice(initial_data.baseUrl.length);

-	for (const route of routes) {
-		const match = route.pattern.exec(pathname);
+	// avoid accidental clashes between server routes and pages
+	if (manifest.ignore.some(pattern => pattern.test(path))) return;
+
+	for (let i = 0; i < manifest.pages.length; i += 1) {
+		const page = manifest.pages[i];
+
+		const match = page.pattern.exec(path);
 		if (match) {
-			if (route.ignore) return null;
-
-			const params = route.params(match);
-
 			const query: Record<string, string | true> = {};
 			if (url.search.length > 0) {
 				url.search.slice(1).split('&').forEach(searchParam => {
 					const [, key, value] = /([^=]+)=(.*)/.exec(searchParam);
 					query[key] = value || true;
-				})
+				});
 			}
-			return { url, route, data: { params, query } };
+			return { url, path, page, match, query };
 		}
 	}
 }

 let current_token: {};

-function render(Component: ComponentConstructor, data: any, scroll: ScrollPosition, token: {}) {
+function render(data: any, nullable_depth: number, scroll: ScrollPosition, token: {}) {
 	if (current_token !== token) return;

-	if (component) {
-		component.destroy();
+	if (root) {
+		// first, clear out highest-level root component
+		let level = data.child;
+		for (let i = 0; i < nullable_depth; i += 1) {
+			if (i === nullable_depth) break;
+			level = level.props.child;
+		}
+
+		const { component } = level;
+		level.component = null;
+		root.set({ child: data.child });
+
+		// then render new stuff
+		level.component = component;
+		root.set(data);
 	} else {
 		// first load — remove SSR'd <head> contents
 		const start = document.querySelector('#sapper-head-start');
@@ -65,62 +105,169 @@ function render(Component: ComponentConstructor, data: any, scroll: ScrollPositi
 			detach(start);
 			detach(end);
 		}
-	}

-	component = new Component({
-		target,
-		data,
-		store,
-		hydrate: !component
-	});
+		Object.assign(data, root_data);
+
+		root = new manifest.root({
+			target,
+			data,
+			store,
+			hydrate: true
+		});
+	}

 	if (scroll) {
 		window.scrollTo(scroll.x, scroll.y);
 	}
+
+	Object.assign(root_props, data);
+	ready = true;
 }

-function prepare_route(Component: ComponentConstructor, data: RouteData) {
-	let redirect: { statusCode: number, location: string } = null;
+function changed(a: Record<string, string | true>, b: Record<string, string | true>) {
+	return JSON.stringify(a) !== JSON.stringify(b);
+}
+
+let root_preload: Promise<any>;
+let root_data: any;
+
+function prepare_page(target: Target): Promise<{
+	redirect?: Redirect;
+	data?: any;
+	nullable_depth?: number;
+}> {
+	const { page, path, query } = target;
+	const new_segments = path.split('/').filter(Boolean);
+	let changed_from = 0;
+
+	while (
+		segments[changed_from] &&
+		new_segments[changed_from] &&
+		segments[changed_from] === new_segments[changed_from]
+	) changed_from += 1;
+
+	let redirect: Redirect = null;
 	let error: { statusCode: number, message: Error | string } = null;

-	if (!Component.preload) {
-		return { Component, data, redirect, error };
-	}
-
-	if (!component && manifest.preloaded) {
-		return { Component, data: Object.assign(data, manifest.preloaded), redirect, error };
-	}
-
-	return Promise.resolve(Component.preload.call({
+	const preload_context = {
 		store,
 		fetch: (url: string, opts?: any) => window.fetch(url, opts),
 		redirect: (statusCode: number, location: string) => {
+			if (redirect && (redirect.statusCode !== statusCode || redirect.location !== location)) {
+				throw new Error(`Conflicting redirects`);
+			}
 			redirect = { statusCode, location };
 		},
 		error: (statusCode: number, message: Error | string) => {
 			error = { statusCode, message };
 		}
-	}, data)).catch(err => {
-		error = { statusCode: 500, message: err };
-	}).then(preloaded => {
-		if (error) {
-			const route = error.statusCode >= 400 && error.statusCode < 500
-				? errors['4xx']
-				: errors['5xx'];
+	};

-			return route.load().then(({ default: Component }: { 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 };
-			});
+	if (!root_preload) {
+		root_preload = manifest.root.preload
+			? initial_data.preloaded[0] || manifest.root.preload.call(preload_context, {
+				path,
+				query,
+				params: {}
+			})
+			: {};
+	}
+
+	return Promise.all(page.parts.map(async (part, i) => {
+		if (i < changed_from) return null;
+		if (!part) return null;
+
+		const { default: Component } = await part.component();
+		const req = {
+			path,
+			query,
+			params: part.params ? part.params(target.match) : {}
+		};
+
+		const preloaded = ready || !initial_data.preloaded[i + 1]
+			? Component.preload ? await Component.preload.call(preload_context, req) : {}
+			: initial_data.preloaded[i + 1];
+
+		return { Component, preloaded };
+	})).catch(err => {
+		error = { statusCode: 500, message: err };
+		return [];
+	}).then(async results => {
+		if (!root_data) root_data = await root_preload;
+
+		if (redirect) {
+			return { redirect };
 		}

-		Object.assign(data, preloaded)
-		return { Component, data, redirect };
+		segments = new_segments;
+
+		const get_params = page.parts[page.parts.length - 1].params || (() => ({}));
+		const params = get_params(target.match);
+
+		if (error) {
+			const props = {
+				path,
+				query,
+				params,
+				error: typeof error.message === 'string' ? new Error(error.message) : error.message,
+				status: error.statusCode
+			};
+
+			return {
+				data: Object.assign({}, props, {
+					preloading: false,
+					child: {
+						component: manifest.error,
+						props
+					}
+				})
+			};
+		}
+
+		const props = { path, query };
+		const data = {
+			path,
+			preloading: false,
+			child: Object.assign({}, root_props.child, {
+				segment: segments[0]
+			})
+		};
+		if (changed(query, root_props.query)) data.query = query;
+		if (changed(params, root_props.params)) data.params = params;
+
+		let level = data.child;
+		let nullable_depth = 0;
+
+		for (let i = 0; i < page.parts.length; i += 1) {
+			const part = page.parts[i];
+			if (!part) continue;
+
+			const get_params = part.params || (() => ({}));
+
+			if (i < changed_from) {
+				level.props.path = path;
+				level.props.query = query;
+				level.props.child = Object.assign({}, level.props.child);
+
+				nullable_depth += 1;
+			} else {
+				level.component = results[i].Component;
+				level.props = Object.assign({}, level.props, props, {
+					params: get_params(target.match),
+				}, results[i].preloaded);
+
+				level.props.child = {};
+			}
+
+			level = level.props.child;
+			level.segment = segments[i + 1];
+		}
+
+		return { data, nullable_depth };
 	});
 }

-function navigate(target: Target, id: number) {
+async function navigate(target: Target, id: number): Promise<any> {
 	if (id) {
 		// popstate or initial navigation
 		cid = id;
@@ -134,21 +281,24 @@ function navigate(target: Target, id: number) {

 	cid = id;

+	if (root) {
+		root.set({ preloading: true });
+	}
 	const loaded = prefetching && prefetching.href === target.url.href ?
 		prefetching.promise :
-		target.route.load().then(mod => prepare_route(mod.default, target.data));
+		prepare_page(target);

 	prefetching = null;

 	const token = current_token = {};
+	const { redirect, data, nullable_depth } = await loaded;

-	return loaded.then(({ Component, data, redirect }) => {
-		if (redirect) {
-			return goto(redirect.location, { replaceState: true });
-		}
-
-		render(Component, data, scroll_history[id], token);
-	});
+	if (redirect) {
+		await goto(redirect.location, { replaceState: true });
+	} else {
+		render(data, nullable_depth, scroll_history[id], token);
+		if (document.activeElement) document.activeElement.blur();
+	}
 }

 function handle_click(event: MouseEvent) {
@@ -198,7 +348,11 @@ function handle_popstate(event: PopStateEvent) {
 	if (event.state) {
 		const url = new URL(window.location.href);
 		const target = select_route(url);
-		navigate(target, event.state.id);
+		if (target) {
+			navigate(target, event.state.id);
+		} else {
+			window.location.href = window.location.href;
+		}
 	} else {
 		// hashchange
 		cid = ++uid;
@@ -208,21 +362,30 @@ function handle_popstate(event: PopStateEvent) {

 let prefetching: {
 	href: string;
-	promise: Promise<{ Component: ComponentConstructor, data: any }>;
+	promise: Promise<{ redirect?: Redirect, data?: any, nullable_depth?: number }>;
 } = null;

 export function prefetch(href: string) {
-	const selected = select_route(new URL(href, document.baseURI));
+	const target: Target = select_route(new URL(href, document.baseURI));

-	if (selected) {
+	if (target && (!prefetching || href !== prefetching.href)) {
 		prefetching = {
 			href,
-			promise: selected.route.load().then(mod => prepare_route(mod.default, selected.data))
+			promise: prepare_page(target)
 		};
 	}
 }

-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;

@@ -230,17 +393,28 @@ function handle_touchstart_mouseover(event: MouseEvent | TouchEvent) {
 }

 let inited: boolean;
+let ready = false;

-export function init(_target: Node, _routes: Route[], opts?: { store?: (data: any) => Store }) {
-	target = _target;
-	routes = _routes.filter(r => !r.error);
-	errors = {
-		'4xx': _routes.find(r => r.error === '4xx'),
-		'5xx': _routes.find(r => r.error === '5xx')
-	};
+export function init(opts: {
+	App: ComponentConstructor,
+	target: Node,
+	manifest: Manifest,
+	store?: (data: any) => Store,
+	routes?: any // legacy
+}) {
+	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`);
+	}
+
+	if (opts.routes) {
+		throw new Error(`As of Sapper 0.15, opts.routes should be opts.manifest`);
+	}
+
+	target = opts.target;
+	manifest = opts.manifest;

 	if (opts && opts.store) {
-		store = opts.store(manifest.store);
+		store = opts.store(initial_data.store);
 	}

 	if (!inited) { // this check makes HMR possible
@@ -248,8 +422,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;
 	}
@@ -264,33 +438,35 @@ export function init(_target: Node, _routes: Route[], opts?: { store?: (data: an

 		history.replaceState({ id: uid }, '', href);

-		const target = select_route(new URL(window.location.href));
-		return navigate(target, uid);
+		if (!initial_data.error) {
+			const target = select_route(new URL(window.location.href));
+			if (target) return navigate(target, uid);
+		}
 	});
 }

 export function goto(href: string, opts = { replaceState: false }) {
 	const target = select_route(new URL(href, document.baseURI));
+	let promise;

 	if (target) {
-		navigate(target, null);
+		promise = navigate(target, null);
 		if (history) history[opts.replaceState ? 'replaceState' : 'pushState']({ id: cid }, '', href);
 	} else {
 		window.location.href = href;
+		promise = new Promise(f => {}); // never resolves
 	}
+
+	return promise;
 }

 export function prefetchRoutes(pathnames: string[]) {
-	if (!routes) throw new Error(`You must call init() first`);
+	if (!manifest) throw new Error(`You must call init() first`);

-	return routes
+	return manifest.pages
 		.filter(route => {
 			if (!pathnames) return true;
-			return pathnames.some(pathname => {
-				return route.error
-					? route.error === pathname
-					: route.pattern.test(pathname)
-			});
+			return pathnames.some(pathname => route.pattern.test(pathname));
 		})
 		.reduce((promise: Promise<any>, route) => {
 			return promise.then(route.load);
--- a/src/runtime/interfaces.ts
+++ b/src/runtime/interfaces.ts
@@ -3,23 +3,31 @@ 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 {
+	set: (data: any) => void;
 	destroy: () => void;
 }

-export type Route = {
+export type Page = {
 	pattern: RegExp;
-	load: () => Promise<{ default: ComponentConstructor }>;
-	error?: string;
-	params?: (match: RegExpExecArray) => Record<string, string>;
-	ignore?: boolean;
+	parts: Array<{
+		component: () => Promise<{ default: ComponentConstructor }>;
+		params?: (match: RegExpExecArray) => Record<string, string>;
+	}>;
+};
+
+export type Manifest = {
+	ignore: RegExp[];
+	root: ComponentConstructor;
+	error: () => Promise<{ default: ComponentConstructor }>;
+	pages: Page[]
 };

 export type ScrollPosition = {
@@ -29,6 +37,13 @@ export type ScrollPosition = {

 export type Target = {
 	url: URL;
-	route: Route;
-	data: RouteData;
+	path: string;
+	page: Page;
+	match: RegExpExecArray;
+	query: Record<string, string | true>;
+};
+
+export type Redirect = {
+	statusCode: number;
+	location: string;
 };
--- a/test/app/app/client.js
+++ b/test/app/app/client.js
@@ -1,9 +1,11 @@
 import { init, prefetchRoutes } from '../../../runtime.js';
 import { Store } from 'svelte/store.js';
-import { routes } from './manifest/client.js';
+import { manifest } from './manifest/client.js';

 window.init = () => {
-	return init(document.querySelector('#sapper'), routes, {
+	return init({
+		target: document.querySelector('#sapper'),
+		manifest,
 		store: data => new Store(data)
 	});
 };
--- a/test/app/app/server.js
+++ b/test/app/app/server.js
@@ -4,7 +4,7 @@ import express from 'express';
 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 { manifest } from './manifest/server.js';

 let pending;
 let ended;
@@ -85,14 +85,27 @@ const middlewares = [
 		next();
 	},

+	// set up some values for the store
+	(req, res, next) => {
+		req.hello = 'hello';
+		res.locals = { name: 'world' };
+		next();
+	},
+
 	sapper({
-		routes,
-		store: () => {
+		manifest,
+		store: (req, res) => {
 			return new Store({
-				title: 'Stored title'
+				title: `${req.hello} ${res.locals.name}`
 			});
-		}
-	})
+		},
+		ignore: [
+			/foobar/i,
+			'/buzz',
+			'fizz',
+			x => x === '/hello'
+		]
+	}),
 ];

 if (BASEPATH) {
@@ -101,4 +114,8 @@ if (BASEPATH) {
 	app.use(...middlewares);
 }

-app.listen(PORT);
+['foobar', 'buzz', 'fizzer', 'hello'].forEach(uri => {
+	app.get('/'+uri, (req, res) => res.end(uri));
+});
+
+app.listen(PORT);
--- a/test/app/routes/4xx.html
+++ b/test/app/routes/4xx.html
@@ -1,6 +0,0 @@
-<:Head>
-	<title>{{status}}</title>
-</:Head>
-
-<h1>Not found</h1>
-<p>{{error.message}}</p>
--- a/test/app/routes/5xx.html
+++ b/test/app/routes/5xx.html
@@ -1,6 +0,0 @@
-<:Head>
-	<title>Internal server error</title>
-</:Head>
-
-<h1>Internal server error</h1>
-<p>{{error.message}}</p>
--- a/test/app/routes/[x]/[y]/[z].html
+++ b/test/app/routes/[x]/[y]/[z].html
@@ -0,0 +1,20 @@
+<span>z: {segment} {count}</span>
+<a href="foo/bar/qux"></a>
+
+<script>
+	import counts from '../_counts.js';
+
+	export default {
+		preload() {
+			return {
+				count: counts.z += 1
+			};
+		},
+
+		oncreate() {
+			this.set({
+				segment: this.get().params.z
+			});
+		}
+	};
+</script>
--- a/test/app/routes/[x]/[y]/_layout.html
+++ b/test/app/routes/[x]/[y]/_layout.html
@@ -0,0 +1,22 @@
+<span>y: {segment} {count}</span>
+<svelte:component this={child.component} {...child.props}/>
+
+<span>child segment: {child.segment}</span>
+
+<script>
+	import counts from '../_counts.js';
+
+	export default {
+		preload() {
+			return {
+				count: counts.y += 1
+			};
+		},
+
+		oncreate() {
+			this.set({
+				segment: this.get().params.y
+			});
+		}
+	};
+</script>
--- a/test/app/routes/[x]/_counts.js
+++ b/test/app/routes/[x]/_counts.js
@@ -0,0 +1,5 @@
+export default {
+	x: process.browser ? 1 : 0,
+	y: process.browser ? 1 : 0,
+	z: process.browser ? 1 : 0
+};
--- a/test/app/routes/_error.html
+++ b/test/app/routes/_error.html
@@ -0,0 +1,6 @@
+<svelte:head>
+	<title>{status}</title>
+</svelte:head>
+
+<h1>{status}</h1>
+<p>{error.message}</p>
--- a/test/app/routes/_layout.html
+++ b/test/app/routes/_layout.html
@@ -0,0 +1,15 @@
+{#if preloading}
+	<progress class='preloading-progress' value=0.5/>
+{/if}
+
+<svelte:component this={child.component} {rootPreloadFunctionRan} {...child.props}/>
+
+<script>
+	export default {
+		preload() {
+			return {
+				rootPreloadFunctionRan: true
+			};
+		}
+	};
+</script>
--- a/test/app/routes/about.html
+++ b/test/app/routes/about.html
@@ -1,20 +1,26 @@
-<:Head>
+<svelte:head>
 	<title>About</title>
-</:Head>
+</svelte:head>

 <h1>About this site</h1>

 <p>This is the 'about' page. There's not much here.</p>

-<button class='goto' on:click='goto("blog/what-is-sapper")'>What is Sapper?</button>
 <button class='prefetch' on:click='prefetch("blog/why-the-name")'>Why the name?</button>

 <script>
 	import { goto, prefetch } from '../../../runtime.js';

 	export default {
+		oncreate() {
+			window.goto = goto;
+		},
+
+		ondestroy() {
+			window.goto = null;
+		},
+
 		methods: {
-			goto,
 			prefetch
 		}
 	};
--- a/test/app/routes/blog/[slug].html
+++ b/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>
--- a/test/app/routes/blog/index.html
+++ b/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>
--- a/test/app/routes/blog/index.json.js
+++ b/test/app/routes/blog/index.json.js
@@ -1,4 +1,4 @@
-import posts from './blog/_posts.js';
+import posts from './_posts.js';

 const contents = JSON.stringify(posts.map(post => {
 	return {
--- a/test/app/routes/credentials/index.html
+++ b/test/app/routes/credentials/index.html
@@ -1,4 +1,4 @@
-<h1>{{message}}</h1>
+<h1>{message}</h1>

 <script>
 	export default {
--- a/test/app/routes/index.html
+++ b/test/app/routes/index.html
@@ -1,6 +1,6 @@
-<:Head>
+<svelte:head>
 	<title>Sapper project template</title>
-</:Head>
+</svelte:head>

 <h1>Great success!</h1>

@@ -8,10 +8,11 @@
 <a href='about'>about</a>
 <a href='slow-preload'>slow preload</a>
 <a href='redirect-from'>redirect</a>
+<a href='redirect-root'>redirect (root)</a>
 <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>

--- a/test/app/routes/missing-index/ok.html
+++ b/test/app/routes/missing-index/ok.html
@@ -0,0 +1 @@
+<h1>it works</h1>
--- a/test/app/routes/preload-root/index.html
+++ b/test/app/routes/preload-root/index.html
@@ -0,0 +1 @@
+<h1>root preload function ran: {rootPreloadFunctionRan}</h1>
--- a/test/app/routes/preload-values/custom-class.html
+++ b/test/app/routes/preload-values/custom-class.html
@@ -1,4 +1,4 @@
-<h1>{{foo.bar()}}</h1>
+<h1>{foo.bar()}</h1>

 <script>
 	export default {
--- a/test/app/routes/preload-values/index.html
+++ b/test/app/routes/preload-values/index.html
@@ -0,0 +1 @@
+<svelte:component this={child.component} {...child.props}/>
--- a/test/app/routes/preload-values/set.html
+++ b/test/app/routes/preload-values/set.html
@@ -1,4 +1,4 @@
-<h1>{{set.has('x')}}</h1>
+<h1>{set.has('x')}</h1>

 <script>
 	export default {
--- a/test/app/routes/redirect-root.html
+++ b/test/app/routes/redirect-root.html
@@ -0,0 +1,7 @@
+<script>
+	export default {
+		preload() {
+			this.redirect(301, '/');
+		}
+	};
+</script>
--- a/test/app/routes/show-url.html
+++ b/test/app/routes/show-url.html
@@ -1,9 +0,0 @@
-<p>URL is {{url}}</p>
-
-<script>
-	export default {
-		preload({ url }) {
-			if (url) return { url };
-		}
-	};
-</script>
--- a/test/app/routes/store.html
+++ b/test/app/routes/store.html
@@ -1 +1 @@
-<h1>{{$title}}</h1>
+<h1>{$title}</h1>
--- a/test/app/routes/unsafe-replacement.html
+++ b/test/app/routes/unsafe-replacement.html
@@ -0,0 +1,9 @@
+$&
+
+<script>
+	export default {
+		preload() {
+			return '$&';
+		}
+	};
+</script>
--- a/test/common/test.js
+++ b/test/common/test.js
@@ -1,3 +1,4 @@
+const fs = require('fs');
 const path = require('path');
 const assert = require('assert');
 const Nightmare = require('nightmare');
@@ -31,6 +32,8 @@ Nightmare.action('prefetchRoutes', function(done) {

 const cli = path.resolve(__dirname, '../../sapper');

+const wait = ms => new Promise(f => setTimeout(f, ms));
+
 describe('sapper', function() {
 	process.chdir(path.resolve(__dirname, '../app'));

@@ -38,8 +41,9 @@ describe('sapper', function() {
 	rimraf.sync('export');
 	rimraf.sync('build');
 	rimraf.sync('.sapper');
+	rimraf.sync('start.js');

-	this.timeout(process.env.CI ? 30000 : 10000);
+	this.timeout(process.env.CI ? 30000 : 15000);

 	// TODO reinstate dev tests
 	// run({
@@ -55,9 +59,19 @@ describe('sapper', function() {
 		basepath: '/custom-basepath'
 	});

-	describe('export', () => {
+	testExport({});
+
+	testExport({ basepath: '/custom-basepath' });
+});
+
+function testExport({ basepath = '' }) {
+	describe(basepath ? `export --basepath ${basepath}` : 'export', () => {
 		before(() => {
-			return exec(`node ${cli} export`);
+			if (basepath) {
+				process.env.BASEPATH = basepath;
+			}
+
+			return exec(`node ${cli} export ${basepath ? `--basepath ${basepath}` : ''}`);
 		});

 		it('export all pages', () => {
@@ -92,16 +106,18 @@ describe('sapper', function() {
 				'service-worker.js',
 				'svelte-logo-192.png',
 				'svelte-logo-512.png',
-			];
+			].map(file => {
+				return basepath ? `${basepath.replace(/^[\/\\]/, '')}/${file}` : file;
+			});
+
 			// Client scripts that should show up in the extraction directory.
 			const expectedClientRegexes = [
-				/client\/[^/]+\/_(\.\d+)?\.js/,
-				/client\/[^/]+\/about(\.\d+)?\.js/,
-				/client\/[^/]+\/blog_\$slug\$(\.\d+)?\.js/,
-				/client\/[^/]+\/blog(\.\d+)?\.js/,
 				/client\/[^/]+\/main(\.\d+)?\.js/,
-				/client\/[^/]+\/show_url(\.\d+)?\.js/,
-				/client\/[^/]+\/slow_preload(\.\d+)?\.js/,
+				/client\/[^/]+\/index(\.\d+)?\.js/,
+				/client\/[^/]+\/about(\.\d+)?\.js/,
+				/client\/[^/]+\/blog_\$slug(\.\d+)?\.js/,
+				/client\/[^/]+\/blog(\.\d+)?\.js/,
+				/client\/[^/]+\/slow\$45preload(\.\d+)?\.js/,
 			];
 			const allPages = walkSync(dest);

@@ -123,7 +139,7 @@ describe('sapper', function() {
 			});
 		});
 	});
-});
+}

 function run({ mode, basepath = '' }) {
 	describe(`mode=${mode}`, function () {
@@ -131,6 +147,7 @@ function run({ mode, basepath = '' }) {
 		let capture;

 		let base;
+		let captured_basepath;

 		const nightmare = new Nightmare();

@@ -148,7 +165,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 +177,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: {
@@ -173,7 +194,13 @@ function run({ mode, basepath = '' }) {
 				let handler;

 				proc.on('message', message => {
-					if (message.__sapper__) return;
+					if (message.__sapper__) {
+						if (message.event === 'basepath') {
+							captured_basepath = basepath;
+						}
+						return;
+					}
+
 					if (handler) handler(message);
 				});

@@ -253,8 +280,9 @@ function run({ mode, basepath = '' }) {
 					})
 					.then(requests => {
 						assert.deepEqual(requests.map(r => r.url), []);
-						return nightmare.path();
 					})
+					.then(() => wait(100))
+					.then(() => nightmare.path())
 					.then(path => {
 						assert.equal(path, `${basepath}/about`);
 						return nightmare.title();
@@ -268,9 +296,7 @@ function run({ mode, basepath = '' }) {
 				return nightmare
 					.goto(`${base}/about`)
 					.init()
-					.click('.goto')
-					.wait(url => window.location.pathname === url, `${basepath}/blog/what-is-sapper`)
-					.wait(100)
+					.evaluate(() => window.goto('blog/what-is-sapper'))
 					.title()
 					.then(title => {
 						assert.equal(title, 'What is Sapper?');
@@ -301,14 +327,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);
 						});
 					})
@@ -353,16 +382,6 @@ function run({ mode, basepath = '' }) {
 					});
 			});

-			it('passes entire request object to preload', () => {
-				return nightmare
-					.goto(`${base}/show-url`)
-					.init()
-					.evaluate(() => document.querySelector('p').innerHTML)
-					.then(html => {
-						assert.equal(html, `URL is /show-url`);
-					});
-			});
-
 			it('calls a delete handler', () => {
 				return nightmare
 					.goto(`${base}/delete-test`)
@@ -417,6 +436,33 @@ function run({ mode, basepath = '' }) {
 					});
 			});

+			it('redirects on server (root)', () => {
+				return nightmare.goto(`${base}/redirect-root`)
+					.path()
+					.then(path => {
+						assert.equal(path, `${basepath}/`);
+					})
+					.then(() => nightmare.page.title())
+					.then(title => {
+						assert.equal(title, 'Great success!');
+					});
+			});
+
+			it('redirects in client (root)', () => {
+				return nightmare.goto(base)
+					.wait('[href="redirect-root"]')
+					.click('[href="redirect-root"]')
+					.wait(200)
+					.path()
+					.then(path => {
+						assert.equal(path, `${basepath}/`);
+					})
+					.then(() => nightmare.page.title())
+					.then(title => {
+						assert.equal(title, 'Great success!');
+					});
+			});
+
 			it('handles 4xx error on server', () => {
 				return nightmare.goto(`${base}/blog/nope`)
 					.path()
@@ -425,7 +471,7 @@ function run({ mode, basepath = '' }) {
 					})
 					.then(() => nightmare.page.title())
 					.then(title => {
-						assert.equal(title, 'Not found')
+						assert.equal(title, '404')
 					});
 			});

@@ -440,7 +486,7 @@ function run({ mode, basepath = '' }) {
 					})
 					.then(() => nightmare.page.title())
 					.then(title => {
-						assert.equal(title, 'Not found');
+						assert.equal(title, '404');
 					});
 			});

@@ -452,7 +498,7 @@ function run({ mode, basepath = '' }) {
 					})
 					.then(() => nightmare.page.title())
 					.then(title => {
-						assert.equal(title, 'Internal server error')
+						assert.equal(title, '500')
 					});
 			});

@@ -467,10 +513,46 @@ function run({ mode, basepath = '' }) {
 					})
 					.then(() => nightmare.page.title())
 					.then(title => {
-						assert.equal(title, 'Internal server error');
+						assert.equal(title, '500');
 					});
 			});

+			// Ignores are meant for top-level escape.
+			// ~> Sapper **should** own the entire {basepath} when designated.
+			if (!basepath) {
+				it('respects `options.ignore` values (RegExp)', () => {
+					return nightmare.goto(`${base}/foobar`)
+						.evaluate(() => document.documentElement.textContent)
+						.then(text => {
+							assert.equal(text, 'foobar');
+						});
+				});
+
+				it('respects `options.ignore` values (String #1)', () => {
+					return nightmare.goto(`${base}/buzz`)
+						.evaluate(() => document.documentElement.textContent)
+						.then(text => {
+							assert.equal(text, 'buzz');
+						});
+				});
+
+				it('respects `options.ignore` values (String #2)', () => {
+					return nightmare.goto(`${base}/fizzer`)
+						.evaluate(() => document.documentElement.textContent)
+						.then(text => {
+							assert.equal(text, 'fizzer');
+						});
+				});
+
+				it('respects `options.ignore` values (Function)', () => {
+					return nightmare.goto(`${base}/hello`)
+						.evaluate(() => document.documentElement.textContent)
+						.then(text => {
+							assert.equal(text, 'hello');
+						});
+				});
+			}
+
 			it('does not attempt client-side navigation to server routes', () => {
 				return nightmare.goto(`${base}/blog/how-is-sapper-different-from-next`)
 					.init()
@@ -526,11 +608,11 @@ function run({ mode, basepath = '' }) {
 				return nightmare.goto(`${base}/store`)
 					.page.title()
 					.then(title => {
-						assert.equal(title, 'Stored title');
+						assert.equal(title, 'hello world');
 						return nightmare.init().page.title();
 					})
 					.then(title => {
-						assert.equal(title, 'Stored title');
+						assert.equal(title, 'hello world');
 					});
 			});

@@ -559,6 +641,105 @@ 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);
+					});
+			});
+
+			it('emits a basepath', () => {
+				assert.equal(captured_basepath, basepath);
+			});
+
+			// skipped because Nightmare doesn't seem to focus the <a> correctly
+			it.skip('resets the active element after navigation', () => {
+				return nightmare
+					.goto(base)
+					.init()
+					.click('a[href="about"]')
+					.wait(100)
+					.evaluate(() => document.activeElement.nodeName)
+					.then(name => {
+						assert.equal(name, 'BODY');
+					});
+			});
+
+			it('replaces %sapper.xxx% tags safely', () => {
+				return nightmare
+					.goto(`${base}/unsafe-replacement`)
+					.init()
+					.page.html()
+					.then(html => {
+						assert.equal(html.indexOf('%sapper'), -1);
+					});
+			});
+
+			it('only recreates components when necessary', () => {
+				return nightmare
+					.goto(`${base}/foo/bar/baz`)
+					.init()
+					.evaluate(() => document.querySelector('#sapper').textContent)
+					.then(text => {
+						assert.deepEqual(text.split('\n').filter(Boolean), [
+							'y: bar 1',
+							'z: baz 1',
+							'child segment: baz'
+						]);
+
+						return nightmare.click(`a`)
+							.then(() => wait(100))
+							.then(() => {
+								return nightmare.evaluate(() => document.querySelector('#sapper').textContent);
+							});
+					})
+					.then(text => {
+						assert.deepEqual(text.split('\n').filter(Boolean), [
+							'y: bar 1',
+							'z: qux 2',
+							'child segment: qux'
+						]);
+					});
+			});
+
+			it('uses a fallback index component if none is provided', () => {
+				return nightmare.goto(`${base}/missing-index/ok`)
+					.page.title()
+					.then(title => {
+						assert.equal(title, 'it works');
+					});
+			});
+
+			it('runs preload in root component', () => {
+				return nightmare.goto(`${base}/preload-root`)
+					.page.title()
+					.then(title => {
+						assert.equal(title, 'root preload function ran: true');
+					});
+			});
 		});

 		describe('headers', () => {
@@ -571,7 +752,7 @@ function run({ mode, basepath = '' }) {
 						'text/html'
 					);

-					const str = ['main', '_\\.\\d+']
+					const str = ['main', '.+?\\.\\d+']
 						.map(file => {
 							return `<${basepath}/client/[^/]+/${file}\\.js>;rel="preload";as="script"`;
 						})
--- a/test/unit/clean_html/index.ts
+++ b/test/unit/clean_html/index.ts
@@ -0,0 +1,26 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import * as assert from 'assert';
+import clean_html from '../../../src/api/utils/clean_html';
+
+describe('clean_html', () => {
+	const samples = path.join(__dirname, 'samples');
+
+	fs.readdirSync(samples).forEach(dir => {
+		if (dir[0] === '.') return;
+
+		it(dir, () => {
+			const input = fs.readFileSync(`${samples}/${dir}/input.html`, 'utf-8');
+			const expected = fs.readFileSync(`${samples}/${dir}/output.html`, 'utf-8');
+
+			const actual = clean_html(input);
+
+			fs.writeFileSync(`${samples}/${dir}/.actual.html`, actual);
+
+			assert.equal(
+				actual.replace(/\s+$/gm, ''),
+				expected.replace(/\s+$/gm, '')
+			);
+		});
+	});
+});
--- a/test/unit/clean_html/samples/removes-cdata/.actual.html
+++ b/test/unit/clean_html/samples/removes-cdata/.actual.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+<head>
+</head>
+<body>
+	<math>
+		<ms></ms>
+		<mo>+</mo>
+		<mn>3</mn>
+		<mo>=</mo>
+		<ms></ms>
+	</math>
+</body>
+</html>
--- a/test/unit/clean_html/samples/removes-cdata/input.html
+++ b/test/unit/clean_html/samples/removes-cdata/input.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+<head>
+</head>
+<body>
+	<math>
+		<ms><![CDATA[x<y]]></ms>
+		<mo>+</mo>
+		<mn>3</mn>
+		<mo>=</mo>
+		<ms><![CDATA[x<y3]]></ms>
+	</math>
+</body>
+</html>
--- a/test/unit/clean_html/samples/removes-cdata/output.html
+++ b/test/unit/clean_html/samples/removes-cdata/output.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+<head>
+</head>
+<body>
+	<math>
+		<ms></ms>
+		<mo>+</mo>
+		<mn>3</mn>
+		<mo>=</mo>
+		<ms></ms>
+	</math>
+</body>
+</html>
--- a/test/unit/clean_html/samples/removes-comments/.actual.html
+++ b/test/unit/clean_html/samples/removes-comments/.actual.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<html lang="en">
+<head>
+</head>
+<body>
+	<a href="keep-me">keep me</a>
+	
+</body>
+</html>
--- a/test/unit/clean_html/samples/removes-comments/input.html
+++ b/test/unit/clean_html/samples/removes-comments/input.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<html lang="en">
+<head>
+</head>
+<body>
+	<a href="keep-me">keep me</a>
+	<!-- <a href="delete-me">delete me</a> -->
+</body>
+</html>
--- a/test/unit/clean_html/samples/removes-comments/output.html
+++ b/test/unit/clean_html/samples/removes-comments/output.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<html lang="en">
+<head>
+</head>
+<body>
+	<a href="keep-me">keep me</a>
+
+</body>
+</html>
--- a/test/unit/clean_html/samples/removes-script-contents/.actual.html
+++ b/test/unit/clean_html/samples/removes-script-contents/.actual.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+<head>
+</head>
+<body>
+	<script></script>
+
+	<script></script>
+
+	<script src="attributes-are-preserved.js"></script>
+</body>
+</html>
--- a/test/unit/clean_html/samples/removes-script-contents/input.html
+++ b/test/unit/clean_html/samples/removes-script-contents/input.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+<head>
+</head>
+<body>
+	<script>
+		console.log('this should be deleted');
+	</script>
+
+	<script>
+		console.log('so should this');
+	</script>
+
+	<script src="attributes-are-preserved.js"></script>
+</body>
+</html>
--- a/test/unit/clean_html/samples/removes-script-contents/output.html
+++ b/test/unit/clean_html/samples/removes-script-contents/output.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+<head>
+</head>
+<body>
+	<script></script>
+
+	<script></script>
+
+	<script src="attributes-are-preserved.js"></script>
+</body>
+</html>
--- a/test/unit/create_routes.test.js
+++ b/test/unit/create_routes.test.js
@@ -1,241 +0,0 @@
-const assert = require('assert');
-const { create_routes } = require('../../dist/core.ts.js');
-
-describe('create_routes', () => {
-	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),
-			[
-				'index.html',
-				'about.html',
-				'post/bar.html',
-				'post/foo.html',
-				'post/f[xx].html',
-				'post/[id].json.js',
-				'post/[id].html',
-				'[wildcard].html'
-			]
-		);
-	});
-
-	it('prefers index page to nested route', () => {
-		let routes = create_routes({
-			files: [
-				'api/examples/[slug].js',
-				'api/examples/index.js',
-				'blog/[slug].html',
-				'api/gists/[id].js',
-				'api/gists/index.js',
-				'4xx.html',
-				'5xx.html',
-				'blog/index.html',
-				'blog/rss.xml.js',
-				'guide/index.html',
-				'index.html'
-			]
-		});
-
-		assert.deepEqual(
-			routes.map(r => r.file),
-			[
-				'4xx.html',
-				'5xx.html',
-				'index.html',
-				'guide/index.html',
-				'blog/index.html',
-				'blog/rss.xml.js',
-				'blog/[slug].html',
-				'api/examples/index.js',
-				'api/examples/[slug].js',
-				'api/gists/index.js',
-				'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.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', () => {
-		const routes = create_routes({
-			files: ['index.html', 'about.html', '[wildcard].html', 'post/[id].html']
-		});
-
-		let file;
-		let params;
-		for (let i = 0; i < routes.length; i += 1) {
-			const route = routes[i];
-			if (params = route.exec('/post/123')) {
-				file = route.file;
-				break;
-			}
-		}
-
-		assert.equal(file, 'post/[id].html');
-		assert.deepEqual(params, {
-			id: '123'
-		});
-	});
-
-	it('ignores files and directories with leading underscores', () => {
-		const routes = create_routes({
-			files: ['index.html', '_foo.html', 'a/_b/c/d.html', 'e/f/g/h.html', 'i/_j.html']
-		});
-
-		assert.deepEqual(
-			routes.map(r => r.file),
-			[
-				'index.html',
-				'e/f/g/h.html'
-			]
-		);
-	});
-
-	it('matches /foo/:bar before /:baz/qux', () => {
-		const a = create_routes({
-			files: ['foo/[bar].html', '[baz]/qux.html']
-		});
-		const b = create_routes({
-			files: ['[baz]/qux.html', 'foo/[bar].html']
-		});
-
-		assert.deepEqual(
-			a.map(r => r.file),
-			['foo/[bar].html', '[baz]/qux.html']
-		);
-
-		assert.deepEqual(
-			b.map(r => r.file),
-			['foo/[bar].html', '[baz]/qux.html']
-		);
-	});
-
-	it('fails if routes are indistinguishable', () => {
-		assert.throws(() => {
-			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/);
-	});
-
-	it('matches nested routes', () => {
-		const route = create_routes({
-			files: ['settings/[submenu].html']
-		})[0];
-
-		assert.deepEqual(route.exec('/settings/foo'), {
-			submenu: 'foo'
-		});
-
-		assert.deepEqual(route.exec('/settings'), {
-			submenu: null
-		});
-	});
-
-	it('prefers index routes to nested routes', () => {
-		const routes = create_routes({
-			files: ['settings/[submenu].html', 'settings.html']
-		});
-
-		assert.deepEqual(
-			routes.map(r => r.file),
-			['settings.html', 'settings/[submenu].html']
-		);
-	});
-
-	it('matches deeply nested routes', () => {
-		const route = create_routes({
-			files: ['settings/[a]/[b]/index.html']
-		})[0];
-
-		assert.deepEqual(route.exec('/settings/foo/bar'), {
-			a: 'foo',
-			b: 'bar'
-		});
-
-		assert.deepEqual(route.exec('/settings/foo'), {
-			a: 'foo',
-			b: null
-		});
-
-		assert.deepEqual(route.exec('/settings'), {
-			a: null,
-			b: null
-		});
-	});
-
-	it('matches a dynamic part within a part', () => {
-		const route = create_routes({
-			files: ['things/[slug].json.js']
-		})[0];
-
-		assert.deepEqual(route.exec('/things/foo.json'), {
-			slug: 'foo'
-		});
-	});
-
-	it('matches multiple dynamic parts within a part', () => {
-		const route = create_routes({
-			files: ['things/[id]_[slug].json.js']
-		})[0];
-
-		assert.deepEqual(route.exec('/things/someid_someslug.json'), {
-			id: 'someid',
-			slug: 'someslug'
-		});
-	});
-
-	it('fails if dynamic params are not separated', () => {
-		assert.throws(() => {
-			create_routes({
-				files: ['[foo][bar].js']
-			});
-		}, /Invalid route \[foo\]\[bar\]\.js — parameters must be separated/);
-	});
-});
--- a/test/unit/create_routes/index.ts
+++ b/test/unit/create_routes/index.ts
@@ -0,0 +1,157 @@
+import * as path from 'path';
+import * as assert from 'assert';
+import create_routes from '../../../src/core/create_routes';
+
+describe('create_routes', () => {
+	it('creates routes', () => {
+		const { components, pages, server_routes } = create_routes(path.join(__dirname, 'samples/basic'));
+
+		const index = { name: 'index', file: 'index.html' };
+		const about = { name: 'about', file: 'about.html' };
+		const blog = { name: 'blog', file: 'blog/index.html' };
+		const blog_$slug = { name: 'blog_$slug', file: 'blog/[slug].html' };
+
+		assert.deepEqual(components, [
+			index,
+			about,
+			blog,
+			blog_$slug
+		]);
+
+		assert.deepEqual(pages, [
+			{
+				pattern: /^\/?$/,
+				parts: [
+					{ component: index, params: [] }
+				]
+			},
+
+			{
+				pattern: /^\/about\/?$/,
+				parts: [
+					{ component: about, params: [] }
+				]
+			},
+
+			{
+				pattern: /^\/blog\/?$/,
+				parts: [
+					null,
+					{ component: blog, params: [] }
+				]
+			},
+
+			{
+				pattern: /^\/blog\/([^\/]+?)\/?$/,
+				parts: [
+					null,
+					{ component: blog_$slug, params: ['slug'] }
+				]
+			}
+		]);
+
+		assert.deepEqual(server_routes, [
+			{
+				name: 'route_blog_json',
+				pattern: /^\/blog.json\/?$/,
+				file: 'blog/index.json.js',
+				params: []
+			},
+
+			{
+				name: 'route_blog_$slug_json',
+				pattern: /^\/blog\/([^\/]+?).json\/?$/,
+				file: 'blog/[slug].json.js',
+				params: ['slug']
+			}
+		]);
+	});
+
+	it('encodes invalid characters', () => {
+		const { components, pages } = create_routes(path.join(__dirname, 'samples/encoding'));
+
+		// had to remove ? and " because windows
+
+		// const quote = { name: '$34', file: '".html' };
+		const hash = { name: '$35', file: '#.html' };
+		// const question_mark = { name: '$63', file: '?.html' };
+
+		assert.deepEqual(components, [
+			// quote,
+			hash,
+			// question_mark
+		]);
+
+		assert.deepEqual(pages.map(p => p.pattern), [
+			// /^\/%22\/?$/,
+			/^\/%23\/?$/,
+			// /^\/%3F\/?$/
+		]);
+	});
+
+	it('allows regex qualifiers', () => {
+		const { pages } = create_routes(path.join(__dirname, 'samples/qualifiers'));
+
+		assert.deepEqual(pages.map(p => p.pattern), [
+			/^\/([0-9-a-z]{3,})\/?$/,
+			/^\/([a-z]{2})\/?$/,
+			/^\/([^\/]+?)\/?$/
+		]);
+	});
+
+	it('sorts routes correctly', () => {
+		const { pages } = create_routes(path.join(__dirname, 'samples/sorting'));
+
+		assert.deepEqual(pages.map(p => p.parts.map(part => part && part.component.file)), [
+			['index.html'],
+			['about.html'],
+			[null, 'post/index.html'],
+			[null, 'post/bar.html'],
+			[null, 'post/foo.html'],
+			[null, 'post/f[xx].html'],
+			[null, 'post/[id([0-9-a-z]{3,})].html'],
+			[null, 'post/[id].html'],
+			['[wildcard].html']
+		]);
+	});
+
+	it('ignores files and directories with leading underscores', () => {
+		const { server_routes } = create_routes(path.join(__dirname, 'samples/hidden-underscore'));
+
+		assert.deepEqual(server_routes.map(r => r.file), [
+			'index.js',
+			'e/f/g/h.js'
+		]);
+	});
+
+	it('ignores files and directories with leading dots except .well-known', () => {
+		const { server_routes } = create_routes(path.join(__dirname, 'samples/hidden-dot'));
+
+		assert.deepEqual(server_routes.map(r => r.file), [
+			'.well-known/dnt-policy.txt.js'
+		]);
+	});
+
+	it('fails on clashes', () => {
+		assert.throws(() => {
+			const { pages } = create_routes(path.join(__dirname, 'samples/clash-pages'));
+		}, /The \[bar\]\/index\.html and \[foo\]\.html pages clash/);
+
+		assert.throws(() => {
+			const { server_routes } = create_routes(path.join(__dirname, 'samples/clash-routes'));
+			console.log(server_routes);
+		}, /The \[bar\]\/index\.js and \[foo\]\.js routes clash/);
+	});
+
+	it('fails if dynamic params are not separated', () => {
+		assert.throws(() => {
+			create_routes(path.join(__dirname, 'samples/invalid-params'));
+		}, /Invalid route \[foo\]\[bar\]\.js — parameters must be separated/);
+	});
+
+	it('errors when trying to use reserved characters in route regexp', () => {
+		assert.throws(() => {
+			create_routes(path.join(__dirname, 'samples/invalid-qualifier'));
+		}, /Invalid route \[foo\(\[a-z\]\(\[0-9\]\)\)\].js — cannot use \(, \), \? or \: in route qualifiers/);
+	});
+});
--- a/test/unit/create_routes/samples/basic/about.html
+++ b/test/unit/create_routes/samples/basic/about.html
--- a/test/unit/create_routes/samples/basic/blog/[slug].html
+++ b/test/unit/create_routes/samples/basic/blog/[slug].html
--- a/test/unit/create_routes/samples/basic/blog/[slug].json.js
+++ b/test/unit/create_routes/samples/basic/blog/[slug].json.js
--- a/test/unit/create_routes/samples/basic/blog/_default.html
+++ b/test/unit/create_routes/samples/basic/blog/_default.html
--- a/test/unit/create_routes/samples/basic/blog/index.html
+++ b/test/unit/create_routes/samples/basic/blog/index.html
--- a/test/unit/create_routes/samples/basic/blog/index.json.js
+++ b/test/unit/create_routes/samples/basic/blog/index.json.js
--- a/test/unit/create_routes/samples/basic/index.html
+++ b/test/unit/create_routes/samples/basic/index.html
--- a/test/unit/create_routes/samples/clash-pages/[bar]/index.html
+++ b/test/unit/create_routes/samples/clash-pages/[bar]/index.html
--- a/test/unit/create_routes/samples/clash-pages/[foo].html
+++ b/test/unit/create_routes/samples/clash-pages/[foo].html
--- a/test/unit/create_routes/samples/clash-pages/index.html
+++ b/test/unit/create_routes/samples/clash-pages/index.html
--- a/test/unit/create_routes/samples/clash-routes/[bar]/index.js
+++ b/test/unit/create_routes/samples/clash-routes/[bar]/index.js
--- a/test/unit/create_routes/samples/clash-routes/[foo].js
+++ b/test/unit/create_routes/samples/clash-routes/[foo].js
--- a/test/unit/create_routes/samples/clash-routes/index.html
+++ b/test/unit/create_routes/samples/clash-routes/index.html
--- a/test/unit/create_routes/samples/encoding/#.html
+++ b/test/unit/create_routes/samples/encoding/#.html
--- a/test/unit/create_routes/samples/hidden-dot/.unknown/foo.txt.js
+++ b/test/unit/create_routes/samples/hidden-dot/.unknown/foo.txt.js
--- a/test/unit/create_routes/samples/hidden-dot/.well-known/dnt-policy.txt.js
+++ b/test/unit/create_routes/samples/hidden-dot/.well-known/dnt-policy.txt.js
--- a/test/unit/create_routes/samples/hidden-underscore/_foo.js
+++ b/test/unit/create_routes/samples/hidden-underscore/_foo.js
--- a/test/unit/create_routes/samples/hidden-underscore/a/_b/c/d.js
+++ b/test/unit/create_routes/samples/hidden-underscore/a/_b/c/d.js
--- a/test/unit/create_routes/samples/hidden-underscore/e/f/g/h.js
+++ b/test/unit/create_routes/samples/hidden-underscore/e/f/g/h.js
--- a/test/unit/create_routes/samples/hidden-underscore/i/_j.js
+++ b/test/unit/create_routes/samples/hidden-underscore/i/_j.js
--- a/test/unit/create_routes/samples/hidden-underscore/index.html
+++ b/test/unit/create_routes/samples/hidden-underscore/index.html
--- a/test/unit/create_routes/samples/hidden-underscore/index.js
+++ b/test/unit/create_routes/samples/hidden-underscore/index.js
--- a/test/unit/create_routes/samples/invalid-params/[foo][bar].js
+++ b/test/unit/create_routes/samples/invalid-params/[foo][bar].js
--- a/test/unit/create_routes/samples/invalid-qualifier/[foo([a-z]([0-9]))].js
+++ b/test/unit/create_routes/samples/invalid-qualifier/[foo([a-z]([0-9]))].js
--- a/test/unit/create_routes/samples/qualifiers/[slug([0-9-a-z]{3,})].html
+++ b/test/unit/create_routes/samples/qualifiers/[slug([0-9-a-z]{3,})].html
--- a/test/unit/create_routes/samples/qualifiers/[slug([a-z]{2})].html
+++ b/test/unit/create_routes/samples/qualifiers/[slug([a-z]{2})].html
--- a/test/unit/create_routes/samples/qualifiers/[slug].html
+++ b/test/unit/create_routes/samples/qualifiers/[slug].html
--- a/test/unit/create_routes/samples/sorting/[wildcard].html
+++ b/test/unit/create_routes/samples/sorting/[wildcard].html
--- a/test/unit/create_routes/samples/sorting/_layout.html
+++ b/test/unit/create_routes/samples/sorting/_layout.html
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Rich Harris	62b8a79e9f	-> v0.17.1	2018-08-23 11:23:40 -04:00
Rich Harris	7f255563a4	Merge pull request #371 from sveltejs/show-files-on-error show which file is causing an error/warning	2018-08-23 11:21:04 -04:00
Rich Harris	32f4a50f25	show which file is causing an error/warning	2018-08-23 11:09:02 -04:00
Rich Harris	b1a9be2dc3	-> v0.17.0	2018-08-19 22:07:04 -04:00
Rich Harris	c5456d3033	Merge pull request #365 from sveltejs/cheap-watch Use cheap-watch	2018-08-19 22:05:33 -04:00
Rich Harris	9b33dad589	merge master -> cheap-watch	2018-08-19 19:03:12 -04:00
Rich Harris	4315a46ff2	-> v0.16.1	2018-08-19 18:55:41 -04:00
Rich Harris	0fb5827968	fix file watching	2018-08-19 18:55:09 -04:00
Rich Harris	f9bf23dc43	use cheap-watch instead of chokidar (#364 )	2018-08-19 18:52:01 -04:00
Rich Harris	611017fd28	-> v0.16.0	2018-08-19 17:39:02 -04:00
Rich Harris	72b265a35f	Merge pull request #363 from sveltejs/bundle-deps [WIP] Slim down the bundle	2018-08-19 17:36:18 -04:00
Rich Harris	e0d533f2ea	bundle more stuff	2018-08-19 16:15:04 -04:00
Rich Harris	dba83641e4	remove glob and cheerio from dependencies	2018-08-19 15:20:14 -04:00
Rich Harris	14e5c8e761	update lockfile	2018-08-16 12:48:50 -04:00
Rich Harris	cbbf4a95db	-> v0.15.8	2018-08-16 12:46:13 -04:00
Rich Harris	55b7ffd2ed	Merge pull request #361 from sveltejs/handle-unknown-preload-errors handle unknown preload errors	2018-08-16 12:44:27 -04:00
Rich Harris	9f4d4e70de	can remove this, preloading is set false on render	2018-08-16 12:39:54 -04:00
Rich Harris	deef1bbfcf	handle unknown preload errors	2018-08-16 12:25:23 -04:00
Seth Thompson	17b0fc0d0c	nit	2018-08-11 17:52:53 -04:00
Seth Thompson	3c44c511e4	make sure page has expected preloading value	2018-08-11 17:51:44 -04:00
Seth Thompson	7cf1b9613a	prefetching should not set root preloading value, closes #352	2018-08-11 12:26:27 -04:00
Rich Harris	99e5a9601c	-> v0.15.7	2018-08-09 20:14:37 -04:00
Rich Harris	4c9c1dccf5	Merge pull request #350 from sveltejs/gh-344 pass response object to store getter	2018-08-09 20:13:17 -04:00
Rich Harris	2cddd5afa0	Merge pull request #345 from sveltejs/fix/redirect Fix Preload's Redirect	2018-08-09 20:08:51 -04:00
Rich Harris	8c6a0c4773	Merge branch 'master' into gh-344	2018-08-09 20:03:37 -04:00
Rich Harris	af5063552d	Merge pull request #351 from sveltejs/argh-windows doh	2018-08-09 20:02:51 -04:00
Rich Harris	419d154794	fffffuuuuu	2018-08-09 19:53:26 -04:00
Rich Harris	abda059be5	doh	2018-08-09 19:46:09 -04:00
Rich Harris	444908cac5	pass response object to store getter - fixes #344	2018-08-08 10:57:10 -04:00
Luke Edwards	c6da26e1a0	add redirect test to root (“/“)	2018-08-06 20:29:28 -07:00
Luke Edwards	aad87857ce	fix: replace leading slash in preload’s redirect	2018-08-06 20:28:28 -07:00
Rich Harris	666c113297	-> v0.15.6	2018-08-06 22:36:17 -04:00
Rich Harris	84a58f34a0	add test for exporting with custom basepath	2018-08-06 22:35:02 -04:00
Rich Harris	75f5b5c721	Merge pull request #342 from aubergene/gh-338 Remove basepath from deferred urls and add trailing slash to root	2018-08-06 22:06:09 -04:00
Julian Burgess	a176a3b79b	Remove basepath from deferred urls and add trailing slash to root request	2018-08-06 16:43:02 +01:00
Rich Harris	1627a5767a	-> v0.15.5	2018-08-03 01:18:12 -04:00
Rich Harris	6ff3a9e9ab	Merge branch 'master' of github.com:sveltejs/sapper	2018-08-03 01:16:43 -04:00
Rich Harris	3ce2bd30f9	Use npm ci instead of npm install (#336 ) * dont write server_info.json either - second half of #318 * use npm ci * update lockfile * try this	2018-08-03 01:16:26 -04:00
Rich Harris	de4f99807f	Merge branch 'master' of github.com:sveltejs/sapper	2018-08-03 00:11:09 -04:00
Rich Harris	eae8351f77	Better/faster exporting * add --build and --build-dir options to sapper export (#325) * tweak export logging, update port-authority to prevent timeout bug * better logging of export progress * handle case where linked resource is already fetched * default to .sapper/dev instead of .sapper * handle query params and redirects * dont write server_info.json either - second half of #318 * update changelog * update lockfile * try to track down ci test failures * err wut * curiouser and curiouser * ok, seems to work now	2018-08-03 00:10:58 -04:00
Rich Harris	d386308301	update changelog	2018-08-02 13:23:12 -04:00
Rich Harris	13afbc84d7	dont write server_info.json either - second half of #318	2018-08-02 10:59:23 -04:00
Rich Harris	31327b3780	Merge pull request #333 from sveltejs/gh-332 only blur activeElement if there is one	2018-08-02 10:43:27 -04:00
Rich Harris	81f483d7b8	Merge pull request #334 from sveltejs/gh-318 dont emit client_info.json	2018-08-02 08:40:30 -04:00
Rich Harris	1bcf20511b	dont emit client_info.json - fixes #318	2018-08-01 21:46:26 -04:00
Rich Harris	003fa8ab2c	only blur activeElement if there is one - fixes #332	2018-08-01 21:34:30 -04:00
Rich Harris	d1fcd07c92	-> v0.15.4	2018-08-01 08:47:41 -04:00
Rich Harris	47a6d6f662	Merge pull request #326 from lukeed/feat/ignore Add `ignore` option	2018-08-01 08:46:49 -04:00
Luke Edwards	4b2b6440d0	fix: use more specific ignore pattern; ~> leaked into another test’s route	2018-07-31 16:54:29 -07:00
Rich Harris	fc855f30f8	-> v0.15.3	2018-07-31 15:06:47 -04:00
Rich Harris	4a75fff4ec	Merge pull request #329 from sveltejs/parallel-exports parallelize exports	2018-07-31 15:05:38 -04:00
Rich Harris	7b7b695938	Merge pull request #320 from sveltejs/gh-319 Some dev documentation	2018-07-31 14:59:57 -04:00
Rich Harris	2fca2e295f	Merge pull request #328 from sveltejs/export-no-minify-js don't minify JS when minifying HTML	2018-07-31 14:59:27 -04:00
Rich Harris	eae991d369	parallelize exports	2018-07-31 14:56:29 -04:00
Rich Harris	c2b393d3fd	dont minify JS when minifying HTML	2018-07-31 14:43:58 -04:00
Luke Edwards	566addd406	add tests for `opts.ignore`	2018-07-29 14:17:13 -07:00
Luke Edwards	3d77dacbd6	attach `ignore` options to test app, w/ matching routes	2018-07-29 14:17:04 -07:00
Luke Edwards	51b4f9cbbf	add `opts.ignore` support	2018-07-29 14:01:44 -07:00
Robert Hall	1d611be83e	Using npm	2018-07-25 15:50:56 -06:00
Robert Hall	1782904994	Some dev documentation	2018-07-25 10:10:22 -06:00
Rich Harris	e3ddbfc181	Merge pull request #314 from sveltejs/fix-child-segment fix child.segment bug	2018-07-23 17:08:25 -04:00
Rich Harris	8e3830b646	fix child.segment bug	2018-07-23 17:02:35 -04:00
Rich Harris	b28cdff233	-> v0.15.2	2018-07-23 16:38:49 -04:00
Rich Harris	7f586ff1a3	Merge pull request #313 from sveltejs/gh-312 Skip layout components where none is provided	2018-07-23 16:37:30 -04:00
Rich Harris	731d4f535c	skip layout components where none is provided - fixes #312	2018-07-23 16:31:00 -04:00
Rich Harris	f8c731ca21	failing tests for #312	2018-07-23 14:31:11 -04:00
Rich Harris	39eb3be01e	-> v0.15.1	2018-07-22 21:25:33 -04:00
Rich Harris	d0bb728e25	-> v0.15.0	2018-07-22 21:04:03 -04:00
Rich Harris	58de0f9c99	Nested routes Fixes #262	2018-07-22 21:00:37 -04:00
Rich Harris	b75ae7ba96	-> v0.14.2	2018-07-14 21:05:39 -04:00
Rich Harris	091e38082e	Merge pull request #307 from sveltejs/unsafe-replacements prevent unsafe replacements of preloaded data etc	2018-07-15 02:05:20 +01:00
Rich Harris	74acf93c7a	prevent unsafe replacements of preloaded data etc	2018-07-14 20:56:05 -04:00
Rich Harris	0e3775397f	Merge pull request #306 from sveltejs/refactor-route-generation Refactor route generation	2018-07-05 08:25:59 -04:00
Rich Harris	8dc52a04e4	split pages and server routes into separate arrays	2018-07-05 08:14:07 -04:00
Rich Harris	008b607c01	generate pages and server routes separately	2018-07-04 10:53:41 -04:00
Rich Harris	d01a407137	-> v0.14.1	2018-07-02 10:24:54 -04:00
Rich Harris	c0c717d9ec	Merge pull request #283 from elcobvg/feature/route-regexp Feature: use regexp in routes	2018-07-02 10:23:30 -04:00
Elco Brouwer von Gonzenbach	4f011bfc37	Convert whitespace to tabs. Add some unit tests for create routes	2018-07-02 11:52:17 +07:00
Elco Brouwer von Gonzenbach	6c4ab32cf0	Sync update to sapper 0.14.0	2018-06-29 06:57:01 +07:00
Rich Harris	09b4dc1b9a	-> v0.14.0	2018-06-28 13:35:21 -04:00
Rich Harris	bdd5a54527	Merge pull request #301 from sveltejs/gh-297 treat foo/index.json.js as foo.json.js	2018-06-28 13:27:57 -04:00
Rich Harris	b7bb4db8c1	treat foo/index.json.js as foo.json.js - fixes #297	2018-06-28 13:20:41 -04:00
Rich Harris	5b5f33d3cf	error on 4xx.html and 5xx.html	2018-06-28 12:57:59 -04:00
Rich Harris	9611656b76	Merge pull request #300 from sveltejs/gh-293 [WIP] simplify rendering of error pages	2018-06-28 12:52:41 -04:00
Rich Harris	e9a71774d5	Merge pull request #299 from sveltejs/gh-270 return a Promise from goto	2018-06-28 12:18:32 -04:00
Rich Harris	2205b8aec5	oops	2018-06-28 12:03:27 -04:00
Rich Harris	5c4e4d5d36	only navigate if route is found - fixes #279	2018-06-28 11:45:38 -04:00
Rich Harris	e87247493f	replace 4xx.html and 5xx.html with _error.html	2018-06-28 11:38:21 -04:00
Rich Harris	0aeb63a05b	simplify rendering of error pages	2018-06-27 18:35:41 -04:00
Rich Harris	57eeb5659a	return a Promise from goto - fixes #270	2018-06-27 17:32:20 -04:00
Rich Harris	f821c19528	-> v0.13.6	2018-06-27 17:20:45 -04:00
Rich Harris	b9a120164a	Merge pull request #298 from sveltejs/gh-296 fix req.baseUrl synthesis	2018-06-27 17:19:55 -04:00
Rich Harris	087356f781	fix req.baseUrl synthesis	2018-06-27 16:57:04 -04:00
Rich Harris	31110a5326	-> v0.13.5	2018-06-26 18:30:46 -04:00
Rich Harris	667a68768c	Merge pull request #294 from sveltejs/gh-289 fix handling of fatal errors	2018-06-26 18:29:56 -04:00
Rich Harris	5075981a90	fix handling of fatal errors - fixes #289	2018-06-26 13:49:11 -04:00
Rich Harris	611dc4f6be	-> v0.13.4	2018-06-18 22:45:51 -04:00
Rich Harris	0b43eaa992	blur active element on navigation - fixes #287	2018-06-18 22:44:55 -04:00
Rich Harris	47cdc1c4c8	wait until server restarts before emitting hot reload update	2018-06-18 22:31:10 -04:00
Rich Harris	31c071ad72	Merge branch 'master' of github.com:sveltejs/sapper	2018-06-18 12:22:42 -04:00
Rich Harris	e91edaee12	Merge pull request #286 from sveltejs/invalidate-client-assets always refresh client_assets in dev	2018-06-18 12:22:37 -04:00
Rich Harris	34c1fee5db	Merge branch 'master' of github.com:sveltejs/sapper	2018-06-17 13:02:13 -04:00
Rich Harris	5375422633	Merge pull request #285 from sveltejs/event-on-exit emit a fatal event if server crashes	2018-06-17 13:02:03 -04:00
Rich Harris	1dafe934b0	initialise rebuild stats	2018-06-17 13:01:51 -04:00
Rich Harris	e1a33c6a9b	always refresh client_assets in dev	2018-06-17 13:00:27 -04:00
Rich Harris	0800fa016b	emit a fatal event if server crashes	2018-06-16 20:18:32 -04:00
Rich Harris	8f3454c3b1	-> v0.13.3	2018-06-16 13:49:44 -04:00
Rich Harris	f0d7a1aaab	change fatal events to be clonable, for IPC purposes	2018-06-16 13:49:19 -04:00
Rich Harris	8240595d70	-> v0.13.2	2018-06-15 10:58:55 -04:00
Rich Harris	658d8dd50c	Merge pull request #284 from sveltejs/emit-basepath Emit basepath event	2018-06-15 10:57:04 -04:00
Rich Harris	9eeeaa24c1	emit a basepath event on first run	2018-06-14 17:20:46 -04:00
Rich Harris	9c4a3592ff	remove some unused code	2018-06-14 16:34:16 -04:00
Elco Brouwer von Gonzenbach	0e2c2ca101	Correct errors in param pattern and matching patterns	2018-06-13 10:00:39 +07:00
Elco Brouwer von Gonzenbach	8015be8069	Correct spacing	2018-06-12 09:15:54 +07:00
Elco Brouwer von Gonzenbach	e39ad59589	Add regexp option to routes	2018-06-12 09:11:54 +07:00
Rich Harris	be7cff4818	-> v0.13.1	2018-06-05 14:41:12 -04:00
Rich Harris	d6632cf312	Merge pull request #281 from sveltejs/gh-276 reinstate ten second interval between heartbeats	2018-06-05 20:40:17 +02:00
Rich Harris	f6e012ec73	reinstate ten second interval between heartbeats - fixes #276	2018-06-05 14:35:37 -04:00
Rich Harris	087acd5765	-> v0.13.0	2018-05-28 19:49:40 -04:00
Rich Harris	43bf6e8d8a	Merge pull request #273 from sveltejs/gh-272 [WIP] expose dev, build, export APIs	2018-05-28 19:47:08 -04:00
Rich Harris	78be6aa343	add api.js	2018-05-28 18:04:18 -04:00
Rich Harris	8ba57969c2	oops	2018-05-26 12:39:44 -04:00
Rich Harris	58d2f605fc	expose find_page method	2018-05-26 12:31:52 -04:00
Rich Harris	e0b4319c7d	preserve webpack stats, write client assets elsewhere	2018-05-26 12:31:43 -04:00
Rich Harris	98d0df4320	work around webpack silliness	2018-05-23 22:05:40 -04:00
Rich Harris	6aa3ce4f05	make stdout etc available via api	2018-05-23 21:56:35 -04:00
Rich Harris	046db325f1	update deps	2018-05-23 20:41:48 -04:00
Rich Harris	1a4bace5f4	add dev API	2018-05-23 09:05:24 -04:00
Rich Harris	0dbf75f100	create API for exporting	2018-05-22 11:57:24 -04:00
Rich Harris	4f49fd8d5c	create build API	2018-05-22 11:32:06 -04:00
Rich Harris	86f71e1faf	Merge pull request #268 from lukeed/dep/colors Update colors dep	2018-05-22 08:01:23 -04:00
Luke Edwards	147e2c64b5	update webpack-format-messages	2018-05-17 13:03:25 -07:00
Luke Edwards	9063057b0c	swap clorox —> ansi-colors	2018-05-15 09:00:55 -07:00
Rich Harris	25f0d94595	-> v0.12.0	2018-05-05 10:00:58 -04:00
Rich Harris	8155df2e22	Merge branch 'gh-157'	2018-05-05 09:58:12 -04:00
Rich Harris	bb51470004	Merge pull request #259 from sveltejs/gh-157 switch to single App component model	2018-05-05 09:57:28 -04:00
Rich Harris	53446e2ec7	Merge branch 'master' into gh-157	2018-05-05 09:45:04 -04:00
Rich Harris	c4c09550eb	Merge pull request #260 from sveltejs/another-sorting-bug fix sorting	2018-05-05 09:43:16 -04:00
Rich Harris	da47fdec96	fix sorting	2018-05-05 09:38:24 -04:00
Rich Harris	971342ac7a	set preloading: true when appropriate	2018-05-04 23:23:41 -04:00
Rich Harris	3becc1cbe2	error on incorrect init args	2018-05-04 23:06:10 -04:00
Rich Harris	8ee5346900	switch to single App component model (#157 )	2018-05-04 22:46:41 -04:00
Rich Harris	9e4b79c6ff	Merge pull request #258 from sveltejs/gh-208 exit with code 1 if build/export fails	2018-05-04 17:48:29 -04:00
Rich Harris	4ec1c65395	exit with code 1 if build/export fails - fixes #208	2018-05-04 17:42:37 -04:00
Rich Harris	c743d11b3b	-> v0.11.1	2018-05-04 17:22:34 -04:00
Rich Harris	b525eb6480	get tests passing	2018-05-04 17:19:39 -04:00
Rich Harris	210d03fb06	Merge branch 'collision' of https://github.com/akihikodaki/sapper into akihikodaki-collision	2018-05-04 17:08:55 -04:00
Rich Harris	0685cc4cbe	Merge branch 'master' of github.com:sveltejs/sapper	2018-05-04 17:08:47 -04:00
Rich Harris	9e2d0a7fbc	Merge branch 'master' into collision	2018-05-04 17:05:18 -04:00
Rich Harris	a751a3b731	Merge pull request #254 from akihikodaki/dot_strict Ignore files and directories with leading dots except .well-known	2018-05-04 17:04:27 -04:00
Rich Harris	bc7faeeab9	remove unused esm package	2018-05-04 16:55:57 -04:00
Rich Harris	a88c1de2f6	Merge pull request #256 from johnmuhl/esm replace discontinued @std/esm package with esm	2018-05-04 16:53:35 -04:00
john muhl	a231795c4c	replace discontinued @std/esm package with esm	2018-05-04 13:56:17 -05:00
Akihiko Odaki	ba7525c676	Ignore files and directories with leading dots except .well-known	2018-05-04 22:18:23 +09:00
Rich Harris	4843e9a40a	-> v0.11.0	2018-05-03 23:51:04 -04:00
Rich Harris	ca4a1ca9b0	Merge pull request #251 from sveltejs/client-info only save the bits of client_info we need	2018-05-03 23:49:30 -04:00
Rich Harris	ad7c872ee3	Merge pull request #250 from sveltejs/gh-240 implement --launcher	2018-05-03 23:49:06 -04:00
Rich Harris	4f98324a8a	oops, missed one	2018-05-03 23:46:41 -04:00
Rich Harris	1fcf3f79ee	only save the bits of client_info we need	2018-05-03 23:42:19 -04:00
Rich Harris	0b5741194a	Merge pull request #205 from sveltejs/gh-140 prefetch on mouse stop	2018-05-03 23:31:08 -04:00
Rich Harris	9653d4c6ce	Merge pull request #249 from sveltejs/gh-241 allow process.env.NODE_ENV to be overridden when building	2018-05-03 23:30:55 -04:00
Rich Harris	4fa5ed5e2c	simplify	2018-05-03 23:30:09 -04:00
Rich Harris	f4eac2515f	fix tests	2018-05-03 23:23:02 -04:00
Rich Harris	1a5364ae9d	on second thoughts, default to build/index.js	2018-05-03 23:16:56 -04:00
Rich Harris	d7a9074c69	implement --launcher	2018-05-03 23:04:05 -04:00
Rich Harris	00adb53802	allow process.env.NODE_ENV to be overridden when building (#241 )	2018-05-03 22:21:00 -04:00
Rich Harris	b10edddc96	cheat	2018-05-03 22:01:14 -04:00
Rich Harris	93b2d12438	Merge branch 'master' into gh-140	2018-05-03 21:54:52 -04:00
Rich Harris	7303e811be	update tests, move test app to v2	2018-05-03 21:54:23 -04:00
Rich Harris	992d89027d	Merge branch 'master' into collision	2018-05-03 21:44:28 -04:00
Rich Harris	3531cc587d	-> v0.10.7	2018-05-03 21:42:50 -04:00
Rich Harris	562a91fa57	Merge pull request #245 from johnmuhl/patch-1 Include process.env in exporter server options	2018-05-03 21:40:50 -04:00
Rich Harris	93128a0156	Merge pull request #243 from akihikodaki/dot Accept directory entries which starts with dot as routes	2018-05-03 21:39:46 -04:00
Rich Harris	d7a2132966	Merge pull request #234 from akihikodaki/master Do not encode characters allowed in path when generating routes	2018-05-03 21:37:59 -04:00
John Muhl	56ac1aea9d	match sapper start	2018-04-22 22:50:05 -05:00
John Muhl	37a9fb62e2	Include process.env in exporter server options	2018-04-22 20:29:47 -05:00
Rich Harris	a70e88b1f4	-> v0.10.6	2018-04-19 13:03:12 -04:00
Akihiko Odaki	6f9ce9ce85	Accept directory entries which starts with dot as routes It allows to implement .well-known URIs.	2018-04-19 22:04:03 +09:00
Akihiko Odaki	917dd60cc3	Allow to have middleware for the path same with a HTML page HTTP allows to change the type of the content to serve by Accept field in the request. The middleware for the path same with a HTML page will be inserted before the HTML renderer, and can take advantage of this feature, using expressjs's "accepts" method, for example.	2018-04-15 23:11:08 +09:00
Akihiko Odaki	b13cc6f39a	Do not encode characters allowed in path when generating routes In RFC 3986, some characters not allowed in query, which encodeURIComponent is designed for, is allowed in path. A notable example is "@", which is commonly included in paths of social profile pages. Such characters should not be encoded. The new encoding function is conforming to the RFC.	2018-04-14 01:08:27 +09:00
Rich-Harris	2758382c68	-> v0.10.5	2018-04-06 18:32:44 -07:00
Rich Harris	dd7f1ff99c	Merge pull request #231 from sveltejs/fix-missing-service-worker fix missing service worker	2018-04-06 21:31:53 -04:00
Rich-Harris	45142cd037	fix missing service worker	2018-04-06 14:44:50 -07:00
Rich Harris	a6b1527fd3	try using mousemove in tests	2018-03-18 21:53:13 -04:00
Rich Harris	c2f3a2aac0	prefetch on mouse stop (#140 )	2018-03-18 21:41:47 -04:00
				`@@ -0,0 +1 @@`
				`module.exports = require('./dist/api.ts.js');`
				`@@ -0,0 +1 @@`
				`<svelte:component this={child.component} {...child.props}/>`
				`@@ -0,0 +1 @@`
				`<h1>root preload function ran: {rootPreloadFunctionRan}</h1>`