-> v0.15.0

Nested routes
Fixes #262
2026-01-13 11:35:28 +00:00 · 2018-07-22 21:04:03 -04:00 · 2018-07-22 21:00:37 -04:00 · 2018-07-14 21:05:39 -04:00 · 2018-07-15 02:05:20 +01:00 · 2018-07-14 20:56:05 -04:00
120 changed files with 3412 additions and 7876 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1,19 +1,13 @@
 .DS_Store
 yarn.lock
+yarn-error.log
 node_modules
 cypress/screenshots
 test/app/.sapper
 test/app/app/manifest
 test/app/export
 test/app/build
+sapper
 runtime.js
-runtime.js.map
-cli.js
-cli.js.map
-middleware.js
-middleware.js.map
-core.js
-core.js.map
-webpack/config.js
-webpack/config.js.map
-yarn-error.log
+dist
+!rollup.config.js
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,155 @@
 # sapper changelog

+## 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))
+
+## 0.10.3
+
+* Downgrade chokidar ([#212](https://github.com/sveltejs/sapper/issues/212))
+
+## 0.10.2
+
+* Attach `store` to error pages
+* Fix sorting edge case ([#215](https://github.com/sveltejs/sapper/pull/215))
+
+## 0.10.1
+
+* Fix server-side `fetch` paths ([#207](https://github.com/sveltejs/sapper/pull/207))
+
+## 0.10.0
+
+* Support mounting on a path (this requires `app/template.html` to include `%sapper.base%`) ([#180](https://github.com/sveltejs/sapper/issues/180))
+* Support per-request server-side `Store` with client-side hydration ([#178](https://github.com/sveltejs/sapper/issues/178))
+* Add `this.fetch` to `preload`, with credentials support ([#178](https://github.com/sveltejs/sapper/issues/178))
+* Exclude sourcemaps from preload links and `<script>` block ([#204](https://github.com/sveltejs/sapper/pull/204))
+* Register service worker in `<script>` block
+
+
+## 0.9.6
+
+* Whoops — `tslib` is a runtime dependency
+
+## 0.9.5
+
+* Stringify clorox output ([#197](https://github.com/sveltejs/sapper/pull/197))
+
+## 0.9.4
+
+* Add `SAPPER_BASE` and `SAPPER_APP` environment variables ([#181](https://github.com/sveltejs/sapper/issues/181))
+* Minify template in `sapper build` ([#15](https://github.com/sveltejs/sapper/issues/15))
+* Minify all HTML files in `sapper export` ([#172](https://github.com/sveltejs/sapper/issues/172))
+* Log exported files ([#195](https://github.com/sveltejs/sapper/pull/195))
+* Add `--open`/`-o` flag to `sapper dev` and `sapper start` ([#186](https://github.com/sveltejs/sapper/issues/186))
+
+## 0.9.3
+
+* Fix path to `sapper-dev-client`
+
+## 0.9.2
+
+* Include `dist` files in package
+
+## 0.9.1
+
+* Include `sapper` bin
+
+## 0.9.0
+
+* Use `devalue` instead of `serialize-javascript`, allowing `preload` to return non-POJOs and cyclical/repeated references, but *not* functions ([#112](https://github.com/sveltejs/sapper/issues/112))
+* Kill child process if webpack crashes ([#177](https://github.com/sveltejs/sapper/issues/177))
+* Support HMR on remote devices ([#165](https://github.com/sveltejs/sapper/issues/165))
+* Remove hard-coded port (([#169](https://github.com/sveltejs/sapper/issues/169)))
+* Allow non-JS files, e.g. TypeScript to be used as entry points and server routes ([#57](https://github.com/sveltejs/sapper/issues/57))
+* Faster startup ([#173](https://github.com/sveltejs/sapper/issues/173))
+
+## 0.8.4
+
+* Fix route sorting ([#175](https://github.com/sveltejs/sapper/pull/175))
+
 ## 0.8.3

 * Automatically select available port, or use `--port` flag for `dev` and `start` ([#169](https://github.com/sveltejs/sapper/issues/169))
--- a/api.js
+++ b/api.js
@@ -0,0 +1 @@
+module.exports = require('./dist/api.ts.js');
--- a/appveyor.yml
+++ b/appveyor.yml
@@ -10,7 +10,7 @@ build: off
 environment:
  matrix:
    # node.js
-    - nodejs_version: stable
+    - nodejs_version: 10.5

 install:
  - ps: Install-Product node $env:nodejs_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,4 @@
 --require source-map-support/register
 --recursive
-test/unit/**/*.js
+test/unit/*/*.js
 test/common/test.js
--- a/package.json
+++ b/package.json
@@ -1,80 +1,74 @@
 {
  "name": "sapper",
-  "version": "0.8.3",
+  "version": "0.15.0",
  "description": "Military-grade apps, engineered by Svelte",
-  "main": "middleware.js",
+  "main": "dist/middleware.ts.js",
  "bin": {
-    "sapper": "cli.js"
+    "sapper": "./sapper"
  },
  "files": [
-    "cli.js",
-    "core.js",
-    "middleware.js",
+    "*.js",
+    "*.ts.js",
    "runtime",
-    "runtime.js",
-    "sapper-dev-client.js",
-    "webpack"
+    "webpack",
+    "sapper",
+    "components",
+    "dist"
  ],
  "directories": {
    "test": "test"
  },
  "dependencies": {
-    "chalk": "^2.3.0",
+    "ansi-colors": "^2.0.1",
    "cheerio": "^1.0.0-rc.2",
-    "chokidar": "^1.7.0",
-    "code-frame": "^5.0.0",
-    "escape-html": "^1.0.3",
-    "express": "^4.16.2",
+    "chokidar": "^2.0.3",
+    "cookie": "^0.3.1",
+    "devalue": "^1.0.1",
    "glob": "^7.1.2",
-    "locate-character": "^2.0.5",
+    "html-minifier": "^3.5.16",
    "mkdirp": "^0.5.1",
-    "mri": "^1.1.0",
-    "node-fetch": "^1.7.3",
-    "port-authority": "^1.0.0",
+    "node-fetch": "^2.1.1",
+    "port-authority": "^1.0.2",
+    "pretty-bytes": "^5.0.0",
    "pretty-ms": "^3.1.0",
-    "relative": "^3.0.2",
    "require-relative": "^0.8.7",
    "rimraf": "^2.6.2",
-    "sade": "^1.4.0",
+    "sade": "^1.4.1",
    "sander": "^0.6.0",
-    "serialize-javascript": "^1.4.0",
-    "source-map-support": "^0.5.3",
-    "tslib": "^1.9.0",
+    "source-map-support": "^0.5.6",
+    "tslib": "^1.9.1",
    "url-parse": "^1.2.0",
-    "walk-sync": "^0.3.2",
-    "webpack-format-messages": "^1.0.1"
+    "webpack-format-messages": "^2.0.1"
  },
  "devDependencies": {
-    "@std/esm": "^0.19.7",
    "@types/glob": "^5.0.34",
    "@types/mkdirp": "^0.5.2",
    "@types/rimraf": "^2.0.2",
    "compression": "^1.7.1",
-    "css-loader": "^0.28.7",
-    "electron": "^1.8.2",
    "eslint": "^4.13.1",
-    "eslint-plugin-import": "^2.8.0",
-    "get-port": "^3.2.0",
-    "mocha": "^4.0.1",
-    "nightmare": "^2.10.0",
-    "npm-run-all": "^4.1.2",
-    "rollup": "^0.53.0",
-    "rollup-plugin-commonjs": "^8.3.0",
-    "rollup-plugin-json": "^2.3.0",
+    "eslint-plugin-import": "^2.12.0",
+    "express": "^4.16.3",
+    "mocha": "^5.2.0",
+    "nightmare": "^3.0.0",
+    "npm-run-all": "^4.1.3",
+    "polka": "^0.4.0",
+    "rollup": "^0.59.2",
+    "rollup-plugin-commonjs": "^9.1.3",
+    "rollup-plugin-json": "^3.0.0",
    "rollup-plugin-string": "^2.0.2",
    "rollup-plugin-typescript": "^0.8.1",
-    "style-loader": "^0.19.1",
-    "svelte": "^1.49.1",
-    "svelte-loader": "^2.3.2",
-    "ts-node": "^4.1.0",
-    "typescript": "^2.6.2",
-    "webpack": "^4.1.0"
+    "serve-static": "^1.13.2",
+    "svelte": "^2.6.3",
+    "svelte-loader": "^2.9.0",
+    "typescript": "^2.8.3",
+    "walk-sync": "^0.3.2",
+    "webpack": "^4.8.3"
  },
  "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
@@ -10,36 +10,46 @@ const external = [].concat(
 	'sapper/core.js'
 );

-const paths = {
-	'sapper/core.js': './core.js'
-};
-
-const plugins = [
-	string({
-		include: '**/*.md'
-	}),
-	json(),
-	commonjs(),
-	typescript({
-		typescript: require('typescript')
-	})
-];
-
 export default [
-	{ name: 'cli', banner: true },
-	{ name: 'core' },
-	{ name: 'middleware' },
-	{ name: 'runtime', format: 'es' },
-	{ name: 'webpack', file: 'webpack/config' }
-].map(obj => ({
-	input: `src/${obj.name}/index.ts`,
-	output: {
-		file: `${obj.file || obj.name}.js`,
-		format: obj.format || 'cjs',
-		banner: obj.banner && '#!/usr/bin/env node',
-		paths,
-		sourcemap: true
+	{
+		input: `src/runtime/index.ts`,
+		output: {
+			file: `runtime.js`,
+			format: 'es'
+		},
+		plugins: [
+			typescript({
+				typescript: require('typescript'),
+				target: "ES2017"
+			})
+		]
 	},
-	external,
-	plugins
-}));
+
+	{
+		input: [
+			`src/api.ts`,
+			`src/cli.ts`,
+			`src/core.ts`,
+			`src/middleware.ts`,
+			`src/webpack.ts`
+		],
+		output: {
+			dir: 'dist',
+			format: 'cjs',
+			sourcemap: true
+		},
+		external,
+		plugins: [
+			string({
+				include: '**/*.md'
+			}),
+			json(),
+			commonjs(),
+			typescript({
+				typescript: require('typescript')
+			})
+		],
+		experimentalCodeSplitting: true,
+		experimentalDynamicImport: true
+	}
+];
--- a/2
+++ b/2
@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+require('./dist/cli.ts.js');
--- a/sapper-dev-client.js
+++ b/sapper-dev-client.js
@@ -11,7 +11,7 @@ function check() {
 export function connect(port) {
 	if (source || !window.EventSource) return;

-	source = new EventSource(`http://localhost:${port}/__sapper__`);
+	source = new EventSource(`http://${window.location.hostname}:${port}/__sapper__`);

 	window.source = source;

--- 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,111 @@
+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 { locations } from '../config';
+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_info.json'), JSON.stringify(client_info));
+	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,487 @@
+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 * 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_files(locations.routes(), ['add', 'unlink'], () => {
+				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
+					});
+				}
+			}),
+
+			watch_files(`${locations.app()}/template.html`, ['change'], () => {
+				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 => {
+				fs.writeFileSync(path.join(dest, 'server_info.json'), JSON.stringify(info, null, '  '));
+
+				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_info.json'), JSON.stringify(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
+	};
+}
+
+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;
+		});
+	}
+}
+
+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_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);
+	});
+
+	return {
+		close: () => watcher.close()
+	};
+}
--- a/src/api/export.ts
+++ b/src/api/export.ts
@@ -0,0 +1,131 @@
+import * as child_process from 'child_process';
+import * as path from 'path';
+import * as sander from 'sander';
+import cheerio from 'cheerio';
+import URL from 'url-parse';
+import fetch from 'node-fetch';
+import * as ports from 'port-authority';
+import { EventEmitter } from 'events';
+import { minify_html } from './utils/minify_html';
+import { locations } from '../config';
+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 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();
+
+	proc.on('message', message => {
+		if (!message.__sapper__ || message.event !== 'file') 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);
+		}
+
+		emitter.emit('file', <events.FileEvent>{
+			file,
+			size: 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) {
+			emitter.emit('failure', <events.FailureEvent>{
+				status: r.status,
+				pathname: 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/api/find_page.ts
+++ b/src/api/find_page.ts
@@ -0,0 +1,15 @@
+import * as glob from 'glob';
+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<{ message: string, duplicate: boolean }>;
+	warnings: Array<{ 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/minify_html.ts
+++ b/src/api/utils/minify_html.ts
@@ -0,0 +1,21 @@
+import { minify } from 'html-minifier';
+
+export function minify_html(html: string) {
+	return minify(html, {
+		collapseBooleanAttributes: true,
+		collapseWhitespace: true,
+		conservativeCollapse: true,
+		decodeEntities: true,
+		html5: true,
+		minifyCSS: true,
+		minifyJS: true,
+		removeAttributeQuotes: true,
+		removeComments: true,
+		removeOptionalTags: true,
+		removeRedundantAttributes: true,
+		removeScriptTypeAttributes: true,
+		removeStyleLinkTypeAttributes: true,
+		sortAttributes: true,
+		sortClassName: true
+	});
+}
--- a/src/cli.ts
+++ b/src/cli.ts
@@ -0,0 +1,97 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import * as child_process from 'child_process';
+import sade from 'sade';
+import * as colors from 'ansi-colors';
+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);
+
+prog.command('dev')
+	.describe('Start a development server')
+	.option('-p, --port', 'Specify a port')
+	.option('-o, --open', 'Open a browser window')
+	.action(async (opts: { port: number, open: boolean }) => {
+		const { dev } = await import('./cli/dev');
+		dev(opts);
+	});
+
+prog.command('build [dest]')
+	.describe('Create a production-ready version of your app')
+	.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 = process.env.NODE_ENV || 'production';
+		process.env.SAPPER_DEST = dest;
+
+		const start = Date.now();
+
+		try {
+			const { build } = await import('./cli/build');
+			await build();
+
+			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);
+		}
+	});
+
+prog.command('start [dir]')
+	.describe('Start your app')
+	.option('-p, --port', 'Specify a port')
+	.option('-o, --open', 'Open a browser window')
+	.action(async (dir = 'build', opts: { port: number, open: boolean }) => {
+		const { start } = await import('./cli/start');
+		start(dir, opts);
+	});
+
+prog.command('export [dest]')
+	.describe('Export your app as static files (if possible)')
+	.option('--basepath', 'Specify a base path')
+	.action(async (dest = 'export', opts: { basepath?: string }) => {
+		console.log(`> Building...`);
+
+		process.env.NODE_ENV = 'production';
+		process.env.SAPPER_DEST = '.sapper/.export';
+
+		const start = Date.now();
+
+		try {
+			const { build } = await import('./cli/build');
+			await build();
+			console.error(`\n> Built in ${elapsed(start)}. Crawling site...`);
+
+			const { exporter } = await import('./cli/export');
+			await exporter(dest, opts);
+			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);
+		}
+	});
+
+// TODO upgrade
+
+prog.parse(process.argv);
+
+function elapsed(start: number) {
+	return prettyMs(Date.now() - start);
+}
--- a/src/cli/build.ts
+++ b/src/cli/build.ts
@@ -1,64 +1,32 @@
-import * as fs from 'fs';
-import * as path from 'path';
-import chalk from 'chalk';
-import mkdirp from 'mkdirp';
-import rimraf from 'rimraf';
-import { create_compilers, create_app, create_routes, create_serviceworker } from 'sapper/core.js'
-import { src, dest, dev } from '../config';
+import { build as _build } from '../api/build';
+import * as colors from 'ansi-colors';
+import { locations } from '../config';

-export default async function build() {
-	const output = dest();
-
-	mkdirp.sync(output);
-	rimraf.sync(path.join(output, '**/*'));
-
-	const routes = create_routes();
-
-	// create app/manifest/client.js and app/manifest/server.js
-	create_app({ routes, src, dev });
-
-	const { client, server, serviceworker } = create_compilers();
-
-	const client_stats = await compile(client);
-	console.log(chalk.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(chalk.inverse(`\nbuilt server`));
-	console.log(server_stats.toString({ colors: true }));
-
-	let serviceworker_stats;
-
-	if (serviceworker) {
-		create_serviceworker({
-			routes,
-			client_files: client_stats.toJson().assets.map((chunk: { name: string }) => `/client/${chunk.name}`),
-			src
-		});
-
-		serviceworker_stats = await compile(serviceworker);
-		console.log(chalk.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,289 +1,78 @@
-import * as fs from 'fs';
 import * as path from 'path';
-import * as net from 'net';
-import * as chalk from 'chalk';
+import * as colors from 'ansi-colors';
 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 { dest } from '../config';
-import { create_compilers, create_app, create_routes, create_serviceworker } from 'sapper/core.js';
+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 default async function dev(port: number) {
-	process.env.NODE_ENV = 'development';
-
-	const dir = dest();
-	rimraf.sync(dir);
-	mkdirp.sync(dir);
-
-	const dev_port = await ports.find(10000);
-
-	const routes = create_routes();
-	create_app({ routes, dev_port });
-
-	const hot_update_server = create_hot_update_server(dev_port);
-
-	watch_files('routes/**/*', ['add', 'unlink'], () => {
-		const routes = create_routes();
-		create_app({ routes, dev_port });
-	});
-
-	watch_files('app/template.html', ['change'], () => {
-		hot_update_server.send({
-			action: 'reload'
-		});
-	});
-
-	let proc: child_process.ChildProcess;
-
-	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${chalk.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.error(chalk.red(`✗ ${name}`));
-				console.error(chalk.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(chalk.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 => {
+					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(chalk.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(`${chalk.bold.green(`✔ ${name}`)} ${chalk.grey(`(${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 => {
+					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(3000).then(deferreds.server.fulfil); // TODO control port
-				}
-
-				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)
-				});
-			});
-		}
-	});
-
-	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'
-				});
-			});
-
-			create_serviceworker({
-				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
-	});
-
-	events.forEach(event => {
-		watcher.on(event, callback);
-	});
 }
--- a/src/cli/export.ts
+++ b/src/cli/export.ts
@@ -1,95 +1,35 @@
-import * as child_process from 'child_process';
-import * as path from 'path';
-import * as sander from 'sander';
-import express from 'express';
-import cheerio from 'cheerio';
-import URL from 'url-parse';
-import fetch from 'node-fetch';
-import * as ports from 'port-authority';
-import { dest } from '../config';
+import { exporter as _exporter } from '../api/export';
+import * as colors from 'ansi-colors';
+import prettyBytes from 'pretty-bytes';
+import { locations } from '../config';

-const app = express();
-
-function read_json(file: string) {
-	return JSON.parse(sander.readFileSync(file, { encoding: 'utf-8' }));
-}
-
-export default async function exporter(export_dir: string) {
-	const build_dir = dest();
-
-	// Prep output directory
-	sander.rimrafSync(export_dir);
-
-	sander.copydirSync('assets').to(export_dir);
-	sander.copydirSync(build_dir, 'client').to(export_dir, 'client');
-
-	if (sander.existsSync(build_dir, 'service-worker.js')) {
-		sander.copyFileSync(build_dir, 'service-worker.js').to(export_dir, 'service-worker.js');
-	}
-
-	const port = await ports.find(3000);
-
-	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'
-		}
-	});
-
-	const seen = new Set();
-	const saved = new Set();
-
-	proc.on('message', message => {
-		if (!message.__sapper__) return;
-
-		const url = new URL(message.url, origin);
-
-		if (saved.has(url.pathname)) return;
-		saved.add(url.pathname);
-
-		if (message.type === 'text/html') {
-			const file = `${export_dir}/${url.pathname}/index.html`;
-			sander.writeFileSync(file, message.body);
-		} else {
-			const file = `${export_dir}/${url.pathname}`;
-			sander.writeFileSync(file, message.body);
-		}
-	});
-
-	function handle(url: URL) {
-		if (url.origin !== origin) return;
-
-		if (seen.has(url.pathname)) return;
-		seen.add(url.pathname);
-
-		return fetch(url.href)
-			.then(r => {
-				if (r.headers.get('Content-Type') === 'text/html') {
-					return r.text().then((body: string) => {
-						const $ = cheerio.load(body);
-						const hrefs: string[] = [];
-
-						$('a[href]').each((i: number, $a) => {
-							hrefs.push($a.attribs.href);
-						});
-
-						return hrefs.reduce((promise, href) => {
-							return promise.then(() => handle(new URL(href, url.href)));
-						}, Promise.resolve());
-					});
-				}
-			})
-			.catch((err: Error) => {
-				console.error(`Error rendering ${url.pathname}: ${err.message}`);
+export function exporter(export_dir: string, { basepath = '' }) {
+	return new Promise((fulfil, reject) => {
+		try {
+			const emitter = _exporter({
+				build: locations.dest(),
+				dest: export_dir,
+				basepath
 			});
-	}

-	return ports.wait(port)
-		.then(() => handle(new URL(origin))) // TODO all static routes
-		.then(() => proc.kill());
+			emitter.on('file', event => {
+				console.log(`${colors.bold.cyan(event.file)} ${colors.gray(`(${prettyBytes(event.size)})`)}`);
+			});
+
+			emitter.on('failure', event => {
+				console.log(`${colors.red(`> Received ${event.status} response when fetching ${event.pathname}`)}`);
+			});
+
+			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/index.ts
+++ b/src/cli/index.ts
@@ -1,112 +0,0 @@
-import * as fs from 'fs';
-import * as path from 'path';
-import * as child_process from 'child_process';
-import sade from 'sade';
-import mri from 'mri';
-import chalk from 'chalk';
-import prettyMs from 'pretty-ms';
-import help from './help.md';
-import build from './build';
-import exporter from './export';
-import dev from './dev';
-import upgrade from './upgrade';
-import * as ports from 'port-authority';
-import * as pkg from '../../package.json';
-
-const prog = sade('sapper').version(pkg.version);
-
-prog.command('dev')
-	.describe('Start a development server')
-	.option('-p, --port', 'Specify a port')
-	.action(async ({ port }: { port: number }) => {
-		if (port) {
-			if (!await ports.check(port)) {
-				console.log(chalk.bold.red(`> Port ${port} is unavailable`));
-				return;
-			}
-		} else {
-			port = await ports.find(3000);
-		}
-
-		dev(port);
-	});
-
-prog.command('build [dest]')
-	.describe('Create a production-ready version of your app')
-	.action((dest = 'build') => {
-		console.log(`> Building...`);
-
-		process.env.NODE_ENV = 'production';
-		process.env.SAPPER_DEST = dest;
-
-		const start = Date.now();
-
-		build()
-			.then(() => {
-				const elapsed = Date.now() - start;
-				console.error(`\n> Finished in ${prettyMs(elapsed)}. Type ${chalk.bold.cyan(dest === 'build' ? 'npx sapper start' : `npx sapper start ${dest}`)} to run the app.`);
-			})
-			.catch(err => {
-				console.error(err ? err.details || err.stack || err.message || err : 'Unknown error');
-			});
-	});
-
-prog.command('start [dir]')
-	.describe('Start your app')
-	.option('-p, --port', 'Specify a port')
-	.action(async (dir = 'build', { port }: { port: number }) => {
-		const resolved = path.resolve(dir);
-		const server = path.resolve(dir, 'server.js');
-
-		if (!fs.existsSync(server)) {
-			console.log(chalk.bold.red(`> ${dir}/server.js does not exist — type ${chalk.bold.cyan(dir === 'build' ? `npx sapper build` : `npx sapper build ${dir}`)} to create it`));
-			return;
-		}
-
-		if (port) {
-			if (!await ports.check(port)) {
-				console.log(chalk.bold.red(`> Port ${port} is unavailable`));
-				return;
-			}
-		} else {
-			port = await ports.find(3000);
-		}
-
-		child_process.fork(server, [], {
-			cwd: process.cwd(),
-			env: Object.assign({
-				NODE_ENV: 'production',
-				PORT: port,
-				SAPPER_DEST: dir
-			}, process.env)
-		});
-	});
-
-prog.command('export [dest]')
-	.describe('Export your app as static files (if possible)')
-	.action((dest = 'export') => {
-		console.log(`> Building...`);
-
-		process.env.NODE_ENV = 'production';
-		process.env.SAPPER_DEST = '.sapper/.export';
-
-		const start = Date.now();
-
-		build()
-			.then(() => {
-				const elapsed = Date.now() - start;
-				console.error(`\n> Built in ${prettyMs(elapsed)}. Exporting...`);
-			})
-			.then(() => exporter(dest))
-			.then(() => {
-				const elapsed = Date.now() - start;
-				console.error(`\n> Finished in ${prettyMs(elapsed)}. Type ${chalk.bold.cyan(`npx serve ${dest}`)} to run the app.`);
-			})
-			.catch(err => {
-				console.error(err ? err.details || err.stack || err.message || err : 'Unknown error');
-			});
-	});
-
-// TODO upgrade
-
-prog.parse(process.argv);
--- a/src/cli/start.ts
+++ b/src/cli/start.ts
@@ -0,0 +1,39 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import * as child_process from 'child_process';
+import * as colors from 'ansi-colors';
+import * as ports from 'port-authority';
+
+export async function start(dir: string, opts: { port: number, open: boolean }) {
+	let port = opts.port || +process.env.PORT;
+
+	const resolved = path.resolve(dir);
+	const server = path.resolve(dir, 'server.js');
+
+	if (!fs.existsSync(server)) {
+		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(`${colors.bold.red(`> Port ${port} is unavailable`)}`);
+			return;
+		}
+	} else {
+		port = await ports.find(3000);
+	}
+
+	child_process.fork(server, [], {
+		cwd: process.cwd(),
+		env: Object.assign({
+			NODE_ENV: 'production',
+			PORT: port,
+			SAPPER_DEST: dir
+		}, process.env)
+	});
+
+	await ports.wait(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 chalk from 'chalk';
+import * as colors from 'ansi-colors';

 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(chalk.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(chalk.green(`Replaced %sapper.main% in ${file}`));
+				console.log(`${colors.green(`Replaced %sapper.main% in ${file}`)}`);
 				replaced = true;
 			}
 		}
@@ -50,4 +50,4 @@ function read(file: string) {

 function write(file: string, data: string) {
 	fs.writeFileSync(file, data);
-}
+}
--- a/src/config.ts
+++ b/src/config.ts
@@ -1,5 +1,10 @@
 import * as path from 'path';

 export const dev = () => process.env.NODE_ENV !== 'production';
-export const src = () => path.resolve(process.env.SAPPER_ROUTES || 'routes');
-export const dest = () => path.resolve(process.env.SAPPER_DEST || '.sapper');
+
+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')
+};
--- a/src/core.ts
+++ b/src/core.ts
@@ -0,0 +1,3 @@
+export * from './core/create_manifests';
+export { default as create_compilers } from './core/create_compilers';
+export { default as create_routes } from './core/create_routes';
--- a/src/core/create_app.ts
+++ b/src/core/create_app.ts
@@ -1,107 +0,0 @@
-import * as fs from 'fs';
-import * as path from 'path';
-import mkdirp from 'mkdirp';
-import create_routes from './create_routes';
-import { fudge_mtime, posixify, write } from './utils';
-import { dev } from '../config';
-import { Route } from '../interfaces';
-
-// in dev mode, we avoid touching the fs unnecessarily
-let last_client_manifest: string = null;
-let last_server_manifest: string = null;
-
-export default function create_app({ routes, dev_port }: {
-	routes: Route[];
-	dev_port: number;
-}) {
-	mkdirp.sync('app/manifest');
-
-	const client_manifest = generate_client(routes, dev_port);
-	const server_manifest = generate_server(routes);
-
-	if (client_manifest !== last_client_manifest) {
-		write(`app/manifest/client.js`, client_manifest);
-		last_client_manifest = client_manifest;
-	}
-
-	if (server_manifest !== last_server_manifest) {
-		write(`app/manifest/server.js`, server_manifest);
-		last_server_manifest = server_manifest;
-	}
-}
-
-function generate_client(routes: Route[], dev_port?: number) {
-	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 }`;
-					}
-
-					const file = posixify(`../../routes/${route.file}`);
-
-					if (route.id === '_4xx' || route.id === '_5xx') {
-						return `{ error: '${route.id.slice(1)}', load: () => import(/* webpackChunkName: "${route.id}" */ '${file}') }`;
-					}
-
-					const params = route.params.length === 0
-						? '{}'
-						: `{ ${route.params.map((part, i) => `${part}: match[${i + 1}]`).join(', ')} }`;
-
-					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 (dev()) {
-		const sapper_dev_client = posixify(
-			path.resolve(__dirname, 'sapper-dev-client.js')
-		);
-
-		code += `
-
-			if (module.hot) {
-				import('${sapper_dev_client}').then(client => {
-					client.connect(${dev_port});
-				});
-			}`.replace(/^\t{3}/gm, '');
-	}
-
-	return code;
-}
-
-function generate_server(routes: Route[]) {
-	let code = `
-		// This file is generated by Sapper — do not edit it!
-		${routes
-			.map(route => {
-				const file = posixify(`../../routes/${route.file}`);
-				return route.type === 'page'
-					? `import ${route.id} from '${file}';`
-					: `import * as ${route.id} from '${file}';`;
-			})
-			.join('\n')}
-
-		export const routes = [
-			${routes
-				.map(route => {
-					const file = posixify(`../../${route.file}`);
-
-					if (route.id === '_4xx' || route.id === '_5xx') {
-						return `{ error: '${route.id.slice(1)}', module: ${route.id} }`;
-					}
-
-					const params = route.params.length === 0
-						? '{}'
-						: `{ ${route.params.map((part, i) => `${part}: match[${i + 1}]`).join(', ')} }`;
-
-					return `{ id: '${route.id}', type: '${route.type}', pattern: ${route.pattern}, params: ${route.params.length > 0 ? `match` : `()`} => (${params}), module: ${route.id} }`;
-				})
-				.join(',\n\t')
-			}
-		];`.replace(/^\t\t/gm, '').trim();
-
-	return code;
-}
--- 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
@@ -0,0 +1,186 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import * as glob from 'glob';
+import { posixify, write_if_changed } from './utils';
+import { dev, locations } from '../config';
+import { Page, PageComponent, ServerRoute } from '../interfaces';
+
+export function create_main_manifests({ routes, dev_port }: {
+	routes: { components: PageComponent[], pages: Page[], server_routes: ServerRoute[] };
+	dev_port?: number;
+}) {
+	const path_to_routes = path.relative(`${locations.app()}/manifest`, 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/default-layout.html`,
+		`<svelte:component this={child.component} {...child.props}/>`
+	);
+	write_if_changed(`${locations.app()}/manifest/client.js`, client_manifest);
+	write_if_changed(`${locations.app()}/manifest/server.js`, server_manifest);
+}
+
+export function create_serviceworker_manifest({ routes, client_files }: {
+	routes: { components: PageComponent[], pages: Page[], server_routes: ServerRoute[] };
+	client_files: string[];
+}) {
+	const assets = glob.sync('**', { cwd: 'assets', nodir: true });
+
+	let code = `
+		// This file is generated by Sapper — do not edit it!
+		export const timestamp = ${Date.now()};
+
+		export const assets = [\n\t${assets.map((x: string) => `"${x}"`).join(',\n\t')}\n];
+
+		export const shell = [\n\t${client_files.map((x: string) => `"${x}"`).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 right_pad(str: string, len: number) {
+	while (str.length < len) str += ' ';
+	return str;
+}
+
+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!
+		import root from '${posixify(`${path_to_routes}/${routes.root.file}`)}';
+		import error from '${posixify(`${path_to_routes}/_error.html`)}';
+
+		${routes.components.map(component =>
+		`const ${component.name} = () =>
+			import(/* webpackChunkName: "${component.name}" */ '${get_file(path_to_routes, component)}');`)
+		.join('\n')}
+
+		export const manifest = {
+			ignore: [${server_routes_to_ignore.map(route => route.pattern).join(', ')}],
+
+			pages: [
+				${routes.pages.map(page => `{
+					// ${page.parts[page.parts.length - 1].component.file}
+					pattern: ${page.pattern},
+					parts: [
+						${page.parts.map(part => {
+							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(
+			path.resolve(__dirname, '../sapper-dev-client.js')
+		);
+
+		code += `
+
+			if (module.hot) {
+				import('${sapper_dev_client}').then(client => {
+					client.connect(${dev_port});
+				});
+			}`.replace(/^\t{3}/gm, '');
+	}
+
+	return code;
+}
+
+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 '${posixify(`${path_to_routes}/${routes.root.file}`)}';`,
+		`import error from '${posixify(`${path_to_routes}/_error.html`)}';`
+	);
+
+	let code = `
+		// This file is generated by Sapper — do not edit it!
+		${imports.join('\n')}
+
+		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')}
+			],
+
+			pages: [
+				${routes.pages.map(page => `{
+					// ${page.parts[page.parts.length - 1].component.file}
+					pattern: ${page.pattern},
+					parts: [
+						${page.parts.map(part => {
+							const props = [
+								`name: "${part.component.name}"`,
+								`component: ${part.component.name}`
+							];
+
+							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,127 +1,306 @@
+import * as fs from 'fs';
 import * as path from 'path';
-import glob from 'glob';
-import { src } from '../config';
-import { Route } from '../interfaces';
+import { locations } from '../config';
+import { Page, PageComponent, ServerRoute } from '../interfaces';
+import { posixify } from './utils';

-export default function create_routes({ files } = { files: glob.sync('**/*.+(html|js|mjs)', { cwd: src() }) }) {
-	const routes: Route[] = files
-		.map((file: string) => {
-			if (/(^|\/|\\)_/.test(file)) return;
+const default_layout_file = posixify(path.resolve(
+	__dirname,
+	'../components/default-layout.html'
+));

-			if (/]\[/.test(file)) {
-				throw new Error(`Invalid route ${file} — parameters must be separated`);
-			}
+export default function create_routes(cwd = locations.routes()) {
+	const components: PageComponent[] = [];
+	const pages: Page[] = [];
+	const server_routes: ServerRoute[] = [];

-			const base = file.replace(/\.[^/.]+$/, '');
-			const parts = base.split('/'); // glob output is always posix-style
-			if (parts[parts.length - 1] === 'index') parts.pop();
+	const default_layout: PageComponent = {
+		default: true,
+		name: '_default_layout',
+		file: null
+	};

-			const id = (
-				parts.join('_').replace(/[[\]]/g, '$').replace(/^\d/, '_$&').replace(/[^a-zA-Z0-9_$]/g, '_')
-			 ) || '_';
+	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 params: string[] = [];
-			const param_pattern = /\[([^\]]+)\]/g;
-			let match;
-			while (match = param_pattern.exec(base)) {
-				params.push(match[1]);
-			}
+				const segment = is_dir
+					? basename
+					: basename.slice(0, -path.extname(basename).length);

-			// 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('[');
+				const parts = get_parts(segment);
+				const is_index = is_dir ? false : basename.startsWith('index.');
+				const is_page = path.extname(basename) === '.html';

-				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}`;
-				}
-			}
+				parts.forEach(part => {
+					if (/\]\[/.test(part.content)) {
+						throw new Error(`Invalid route ${file} — parameters must be separated`);
+					}

-			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) => {
-			let same = true;
+		items.forEach(item => {
+			if (item.basename[0] === '_') return;

-			for (let i = 0; true; i += 1) {
-				const a_part = a.parts[i];
-				const b_part = b.parts[i];
+			if (item.basename[0] === '.') {
+				if (item.file !== '.well-known') return;
+			}

-				if (!a_part && !b_part) {
-					if (same) throw new Error(`The ${a.file} and ${b.file} routes clash`);
-					return 0;
+			const segments = parent_segments.slice();
+
+			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', '');
+
+				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}`
+						};
+					}
+
+					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 layout = fs.existsSync(index)
+					? {
+						name: `${get_slug(item.file)}__layout`,
+						file: `${item.file}/_layout.html`
+					}
+					: null;
+
+				if (layout) {
+					components.push(layout);
+				} else if (components.indexOf(default_layout) === -1) {
+					components.push(default_layout);
 				}

-				if (!a_part) return -1;
-				if (!b_part) return 1;
+				walk(
+					path.join(dir, item.basename),
+					segments,
+					params,
+					stack.concat({
+						component: layout || default_layout,
+						params
+					})
+				);
+			}

-				const a_sub_parts = get_sub_parts(a_part);
-				const b_sub_parts = get_sub_parts(b_part);
+			else if (item.is_page) {
+				const component = {
+					name: get_slug(item.file),
+					file: item.file
+				};

-				for (let i = 0; true; i += 1) {
-					const a_sub_part = a_sub_parts[i];
-					const b_sub_part = b_sub_parts[i];
+				const parts = stack.concat({
+					component,
+					params
+				});

-					if (!a_sub_part && !b_sub_part) break;
-
-					if (!a_sub_part) return 1; // note this is reversed from above — match [foo].json before [foo]
-					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;
-					}
+				components.push(component);
+				if (item.basename === 'index.html') {
+					pages.push({
+						pattern: get_pattern(parent_segments),
+						parts
+					});
+				} else {
+					pages.push({
+						pattern: get_pattern(segments),
+						parts
+					});
 				}
 			}
-		});

-	return routes;
+			else {
+				server_routes.push({
+					name: `route_${get_slug(item.file)}`,
+					pattern: get_pattern(segments),
+					file: item.file,
+					params: params
+				});
+			}
+		});
+	}
+
+	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/create_serviceworker.ts
+++ b/src/core/create_serviceworker.ts
@@ -1,26 +0,0 @@
-import * as fs from 'fs';
-import * as path from 'path';
-import glob from 'glob';
-import create_routes from './create_routes';
-import { fudge_mtime, posixify, write } from './utils';
-import { Route } from '../interfaces';
-
-export default function create_serviceworker({ routes, client_files }: {
-	routes: Route[];
-	client_files: string[];
-}) {
-	const assets = glob.sync('**', { cwd: 'assets', nodir: true });
-
-	let code = `
-		// This file is generated by Sapper — do not edit it!
-		export const timestamp = ${Date.now()};
-
-		export const assets = [\n\t${assets.map((x: string) => `"${x}"`).join(',\n\t')}\n];
-
-		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];
-	`.replace(/^\t\t/gm, '').trim();
-
-	write('app/manifest/service-worker.js', code);
-}
--- a/src/core/index.ts
+++ b/src/core/index.ts
@@ -1,4 +0,0 @@
-export { default as create_app } from './create_app';
-export { default as create_serviceworker } from './create_serviceworker';
-export { default as create_compilers } from './create_compilers';
-export { default as create_routes } from './create_routes';
--- a/src/core/utils.ts
+++ b/src/core/utils.ts
@@ -1,8 +1,13 @@
-import * as fs from 'fs';
+import * as sander from 'sander';

-export function write(file: string, code: string) {
-	fs.writeFileSync(file, code);
-	fudge_mtime(file);
+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);
+		fudge_mtime(file);
+	}
 }

 export function posixify(file: string) {
@@ -11,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 } = fs.statSync(file);
-	fs.utimesSync(
+	const { atime, mtime } = sander.statSync(file);
+	sander.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>;
@@ -12,4 +14,29 @@ export type Route = {
 export type Template = {
 	render: (data: Record<string, string>) => string;
 	stream: (req, res, data: Record<string, string | Promise<string>>) => void;
+};
+
+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
@@ -0,0 +1,540 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import { URL } from 'url';
+import { ClientRequest, ServerResponse } from 'http';
+import cookie from 'cookie';
+import devalue from 'devalue';
+import fetch from 'node-fetch';
+import { lookup } from './middleware/mime';
+import { locations, dev } from './config';
+import sourceMapSupport from 'source-map-support';
+
+sourceMapSupport.install();
+
+type ServerRoute = {
+	pattern: RegExp;
+	handlers: Record<string, Handler>;
+	params: (match: RegExpMatchArray) => Record<string, 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;
+
+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;
+	originalUrl: string;
+	method: string;
+	path: string;
+	params: Record<string, string>;
+	query: Record<string, string>;
+	headers: Record<string, string>;
+}
+
+interface Component {
+	render: (data: any, opts: { store: Store }) => {
+		head: string;
+		css: { code: string, map: any };
+		html: string
+	},
+	preload: (data: any) => any | Promise<any>
+}
+
+export default function middleware(opts: {
+	manifest: Manifest,
+	store: (req: Req) => Store,
+	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 { manifest, store } = opts;
+
+	let emitted_basepath = false;
+
+	const middleware = compose_handlers([
+		(req: Req, res: ServerResponse, next: () => void) => {
+			if (req.baseUrl === undefined) {
+				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(/\?.*/, '');
+			}
+
+			next();
+		},
+
+		fs.existsSync(path.join(output, 'index.html')) && serve({
+			pathname: '/index.html',
+			cache_control: 'max-age=600'
+		}),
+
+		fs.existsSync(path.join(output, 'service-worker.js')) && serve({
+			pathname: '/service-worker.js',
+			cache_control: 'max-age=600'
+		}),
+
+		fs.existsSync(path.join(output, 'service-worker.js.map')) && serve({
+			pathname: '/service-worker.js.map',
+			cache_control: 'max-age=600'
+		}),
+
+		serve({
+			prefix: '/client/',
+			cache_control: 'max-age=31536000'
+		}),
+
+		get_server_route_handler(manifest.server_routes),
+		get_page_handler(manifest, store)
+	].filter(Boolean));
+
+	return middleware;
+}
+
+function serve({ prefix, pathname, cache_control }: {
+	prefix?: string,
+	pathname?: string,
+	cache_control: string
+}) {
+	const filter = pathname
+		? (req: Req) => req.path === pathname
+		: (req: Req) => req.path.startsWith(prefix);
+
+	const output = locations.dest();
+
+	const cache: Map<string, Buffer> = new Map();
+
+	const read = dev()
+		? (file: string) => fs.readFileSync(path.resolve(output, file))
+		: (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 (filter(req)) {
+			const type = lookup(req.path);
+
+			try {
+				const data = read(req.path.slice(1));
+
+				res.setHeader('Content-Type', type);
+				res.setHeader('Cache-Control', cache_control);
+				res.end(data);
+			} catch (err) {
+				res.statusCode = 404;
+				res.end('not found');
+			}
+		} else {
+			next();
+		}
+	};
+}
+
+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) {
+		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) => 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')));
+
+	const template = dev()
+		? () => fs.readFileSync(`${locations.app()}/template.html`, 'utf-8')
+		: (str => () => str)(fs.readFileSync(`${locations.dest()}/template.html`, 'utf-8'));
+
+	const { server_routes, pages } = manifest;
+	const error_route = manifest.error;
+
+	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);
+	}
+
+	function handle_page(page: Page, req: Req, res: ServerResponse, status = 200, error: Error | string = null) {
+		const get_params = page.parts[page.parts.length - 1].params || (() => ({}));
+		const match = error ? null : page.pattern.exec(req.path);
+
+		const chunks: Record<string, string | string[]> = get_chunks();
+
+		res.setHeader('Content-Type', 'text/html');
+
+		// 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 => {
+				// using concat because it could be a string or an array. thanks webpack!
+				preloaded_chunks = preloaded_chunks.concat(chunks[part.name]);
+			});
+		}
+
+		const link = preloaded_chunks
+			.filter(file => !file.match(/\.map$/))
+			.map(file => `<${req.baseUrl}/client/${file}>;rel="preload";as="script"`)
+			.join(', ');
+
+		res.setHeader('Link', link);
+
+		const store = store_getter ? store_getter(req) : null;
+
+		let redirect: { statusCode: number, location: string };
+		let preload_error: { statusCode: number, message: Error | string };
+
+		const preload_context = {
+			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) => {
+				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 + '/' :''}`);
+
+				if (opts) {
+					opts = Object.assign({}, opts);
+
+					const include_cookies = (
+						opts.credentials === 'include' ||
+						opts.credentials === 'same-origin' && parsed.origin === `http://127.0.0.1:${process.env.PORT}`
+					);
+
+					if (include_cookies) {
+						const cookies: Record<string, string> = {};
+						if (!opts.headers) opts.headers = {};
+
+						const str = []
+							.concat(
+								cookie.parse(req.headers.cookie || ''),
+								cookie.parse(opts.headers.cookie || ''),
+								cookie.parse(res.getHeader('Set-Cookie') || '')
+							)
+							.map(cookie => {
+								return Object.keys(cookie)
+									.map(name => `${name}=${encodeURIComponent(cookie[name])}`)
+									.join('; ');
+							})
+							.filter(Boolean)
+							.join(', ');
+
+						opts.headers.cookie = str;
+					}
+				}
+
+				return fetch(parsed.href, opts);
+			},
+			store
+		};
+
+		const root_preloaded = manifest.root.preload
+			? manifest.root.preload.call(preload_context, {
+				path: req.path,
+				query: req.query,
+				params: {}
+			})
+			: {};
+
+		Promise.all([root_preloaded].concat(page.parts.map(part => {
+			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) {
+				res.statusCode = redirect.statusCode;
+				res.setHeader('Location', `${req.baseUrl}/${redirect.location}`);
+				res.end();
+
+				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: {}
+			});
+
+			let level = data.child;
+			for (let i = 0; i < page.parts.length; i += 1) {
+				const part = page.parts[i];
+				const get_params = part.params || (() => ({}));
+
+				Object.assign(level, {
+					segment: segments[i],
+					component: part.component,
+					props: Object.assign({}, props, {
+						params: get_params(match)
+					}, preloaded[i + 1])
+				});
+
+				level.props.child = <Props["child"]>{};
+				level = level.props.child;
+			}
+
+			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: 200,
+					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 {
+				handle_error(req, res, 500, err);
+			}
+		});
+	}
+
+	return function find_route(req: Req, res: ServerResponse) {
+		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');
+	};
+}
+
+function compose_handlers(handlers: Handler[]) {
+	return (req: Req, res: ServerResponse, next: () => void) => {
+		let i = 0;
+		function go() {
+			const handler = handlers[i];
+
+			if (handler) {
+				handler(req, res, () => {
+					i += 1;
+					go();
+				});
+			} else {
+				next();
+			}
+		}
+
+		go();
+	};
+}
+
+function try_serialize(data: any) {
+	try {
+		return devalue(data);
+	} catch (err) {
+		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/middleware/index.ts
+++ b/src/middleware/index.ts
@@ -1,339 +0,0 @@
-import * as fs from 'fs';
-import * as path from 'path';
-import { ClientRequest, ServerResponse } from 'http';
-import mkdirp from 'mkdirp';
-import rimraf from 'rimraf';
-import serialize from 'serialize-javascript';
-import escape_html from 'escape-html';
-import { lookup } from './mime';
-import { create_routes, templates, create_compilers } from 'sapper/core.js';
-import { dest, dev } from '../config';
-import { Route, Template } from '../interfaces';
-import sourceMapSupport from 'source-map-support';
-
-sourceMapSupport.install();
-
-type RouteObject = {
-	id: string;
-	type: 'page' | 'route';
-	pattern: RegExp;
-	params: (match: RegExpMatchArray) => Record<string, string>;
-	module: {
-		render: (data: any) => {
-			head: string;
-			css: { code: string, map: any };
-			html: string
-		},
-		preload: (data: any) => any | Promise<any>
-	};
-	error?: string;
-}
-
-type Handler = (req: Req, res: ServerResponse, next: () => void) => void;
-
-interface Req extends ClientRequest {
-	url: string;
-	method: string;
-	pathname: string;
-	params: Record<string, string>;
-}
-
-export default function middleware({ routes }: {
-	routes: RouteObject[]
-}) {
-	const output = dest();
-
-	const client_info = JSON.parse(fs.readFileSync(path.join(output, 'client_info.json'), 'utf-8'));
-
-	const middleware = compose_handlers([
-		(req: Req, res: ServerResponse, next: () => void) => {
-			req.pathname = req.url.replace(/\?.*/, '');
-			next();
-		},
-
-		fs.existsSync(path.join(output, 'index.html')) && serve({
-			pathname: '/index.html',
-			cache_control: 'max-age=600'
-		}),
-
-		fs.existsSync(path.join(output, 'service-worker.js')) && serve({
-			pathname: '/service-worker.js',
-			cache_control: 'max-age=600'
-		}),
-
-		serve({
-			prefix: '/client/',
-			cache_control: 'max-age=31536000'
-		}),
-
-		get_route_handler(client_info.assetsByChunkName, routes)
-	].filter(Boolean));
-
-	return middleware;
-}
-
-function serve({ prefix, pathname, cache_control }: {
-	prefix?: string,
-	pathname?: string,
-	cache_control: string
-}) {
-	const filter = pathname
-		? (req: Req) => req.pathname === pathname
-		: (req: Req) => req.pathname.startsWith(prefix);
-
-	const output = dest();
-
-	const cache: Map<string, Buffer> = new Map();
-
-	const read = dev()
-		? (file: string) => fs.readFileSync(path.resolve(output, file))
-		: (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 (filter(req)) {
-			const type = lookup(req.pathname);
-
-			try {
-				const data = read(req.pathname.slice(1));
-
-				res.setHeader('Content-Type', type);
-				res.setHeader('Cache-Control', cache_control);
-				res.end(data);
-			} catch (err) {
-				res.statusCode = 404;
-				res.end('not found');
-			}
-		} else {
-			next();
-		}
-	};
-}
-
-const resolved = Promise.resolve();
-
-function get_route_handler(chunks: Record<string, string>, routes: RouteObject[]) {
-	const template = dev()
-		? () => fs.readFileSync('app/template.html', 'utf-8')
-		: (str => () => str)(fs.readFileSync('app/template.html', 'utf-8'));
-
-	function handle_route(route: RouteObject, req: Req, res: ServerResponse) {
-		req.params = route.params(route.pattern.exec(req.pathname));
-
-		const mod = route.module;
-
-		if (route.type === 'page') {
-			res.setHeader('Content-Type', 'text/html');
-
-			// preload main.js and current route
-			// TODO detect other stuff we can preload? images, CSS, fonts?
-			const link = []
-				.concat(chunks.main, chunks[route.id])
-				.map(file => `</client/${file}>;rel="preload";as="script"`)
-				.join(', ');
-
-			res.setHeader('Link', link);
-
-			const data = { params: req.params, query: req.query };
-
-			let redirect: { statusCode: number, location: string };
-			let error: { statusCode: number, message: Error | string };
-
-			Promise.resolve(
-				mod.preload ? mod.preload.call({
-					redirect: (statusCode: number, location: string) => {
-						redirect = { statusCode, location };
-					},
-					error: (statusCode: number, message: Error | string) => {
-						error = { statusCode, message };
-					}
-				}, req) : {}
-			).catch(err => {
-				error = { statusCode: 500, message: err };
-			}).then(preloaded => {
-				if (redirect) {
-					res.statusCode = redirect.statusCode;
-					res.setHeader('Location', redirect.location);
-					res.end();
-
-					return;
-				}
-
-				if (error) {
-					handle_error(req, res, error.statusCode, error.message);
-					return;
-				}
-
-				const serialized = try_serialize(preloaded); // TODO bail on non-POJOs
-				Object.assign(data, preloaded);
-
-				const { html, head, css } = mod.render(data);
-
-				let scripts = []
-					.concat(chunks.main) // chunks main might be an array. it might not! thanks, webpack
-					.map(file => `<script src='/client/${file}'></script>`)
-					.join('');
-
-				scripts = `<script>__SAPPER__ = { preloaded: ${serialized} };</script>${scripts}`;
-
-				const page = template()
-					.replace('%sapper.scripts%', scripts)
-					.replace('%sapper.html%', html)
-					.replace('%sapper.head%', `<noscript id='sapper-head-start'></noscript>${head}<noscript id='sapper-head-end'></noscript>`)
-					.replace('%sapper.styles%', (css && css.code ? `<style>${css.code}</style>` : ''));
-
-				res.end(page);
-
-				if (process.send) {
-					process.send({
-						__sapper__: true,
-						url: req.url,
-						method: req.method,
-						status: 200,
-						type: 'text/html',
-						body: page
-					});
-				}
-			});
-		}
-
-		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> = {};
-
-					// 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,
-							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');
-					}
-				};
-
-				try {
-					handler(req, res, handle_bad_result);
-				} catch (err) {
-					handle_bad_result(err);
-				}
-			} else {
-				// no matching handler for method — 404
-				handle_error(req, res, 404, 'Not found');
-			}
-		}
-	}
-
-	const not_found_route = routes.find((route: RouteObject) => route.error === '4xx');
-	const error_route = routes.find((route: RouteObject) => route.error === '5xx');
-
-	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
-		}) : { head: '', css: null, html: title };
-
-		const { head, css, html } = rendered;
-
-		const page = template()
-			.replace('%sapper.scripts%', `<script src='/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) {
-		const url = req.pathname;
-
-		try {
-			for (const route of routes) {
-				if (!route.error && route.pattern.test(url)) return handle_route(route, req, res);
-			}
-
-			handle_error(req, res, 404, 'Not found');
-		} catch (error) {
-			handle_error(req, res, 500, error);
-		}
-	};
-}
-
-function compose_handlers(handlers: Handler[]) {
-	return (req: Req, res: ServerResponse, next: () => void) => {
-		let i = 0;
-		function go() {
-			const handler = handlers[i];
-
-			if (handler) {
-				handler(req, res, () => {
-					i += 1;
-					go();
-				});
-			} else {
-				next();
-			}
-		}
-
-		go();
-	};
-}
-
-function read_json(file: string) {
-	return JSON.parse(fs.readFileSync(file, 'utf-8'));
-}
-
-function try_serialize(data: any) {
-	try {
-		return serialize(data);
-	} catch (err) {
-		return null;
-	}
-}
--- a/src/middleware/mime-types.md
+++ b/src/middleware/mime-types.md
@@ -29,7 +29,7 @@ application/java-archive			jar
 application/java-serialized-object		ser
 application/java-vm				class
 application/javascript				js
-application/json				json
+application/json				json map
 application/jsonml+json				jsonml
 application/lost+xml				lostxml
 application/mac-binhex40			hqx
--- a/src/runtime/index.ts
+++ b/src/runtime/index.ts
@@ -1,10 +1,39 @@
 import { detach, findAnchor, scroll_state, which } from './utils';
-import { Component, ComponentConstructor, Params, Query, Route, RouteData, ScrollPosition, Target } from './interfaces';
+import { Component, ComponentConstructor, Params, Query, Redirect, Manifest, RouteData, ScrollPosition, Store, Target } from './interfaces';

-export let component: Component;
+const initial_data = typeof window !== 'undefined' && window.__SAPPER__;
+
+export let root: Component;
 let target: Node;
-let routes: Route[];
-let errors: { '4xx': Route, '5xx': Route };
+let store: Store;
+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) => {},
@@ -22,33 +51,50 @@ if ('scrollRestoration' in history) {

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

-	for (const route of routes) {
-		const match = route.pattern.exec(url.pathname);
+	const path = url.pathname.slice(initial_data.baseUrl.length);
+
+	// 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, changed_from: 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 < changed_from; i += 1) {
+			if (i === changed_from) 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');
@@ -59,59 +105,163 @@ function render(Component: ComponentConstructor, data: any, scroll: ScrollPositi
 			detach(start);
 			detach(end);
 		}
-	}

-	component = new Component({
-		target,
-		data,
-		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;
+	changed_from?: number;
+}> {
+	if (root) {
+		root.set({ preloading: true });
+	}
+
+	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 && window.__SAPPER__ && window.__SAPPER__.preloaded) {
-		return { Component, data: Object.assign(data, window.__SAPPER__.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;
+
+		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)
+		};
+		if (changed(query, root_props.query)) data.query = query;
+		if (changed(params, root_props.params)) data.params = params;
+
+		let level = data.child;
+		for (let i = 0; i < page.parts.length; i += 1) {
+			const part = page.parts[i];
+			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);
+			} else {
+				level.segment = new_segments[i];
+				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;
+		}
+
+		return { data, changed_from };
 	});
 }

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

 	const loaded = prefetching && prefetching.href === target.url.href ?
 		prefetching.promise :
-		target.route.load().then(mod => prepare_route(mod.default, target.data));
+		prepare_page(target);

 	prefetching = null;

 	const token = current_token = {};
+	const { redirect, data, changed_from } = 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, changed_from, scroll_history[id], token);
+		document.activeElement.blur();
+	}
 }

 function handle_click(event: MouseEvent) {
@@ -189,7 +339,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;
@@ -199,21 +353,30 @@ function handle_popstate(event: PopStateEvent) {

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

 export function prefetch(href: string) {
-	const selected = select_route(new URL(href));
+	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;

@@ -221,22 +384,37 @@ function handle_touchstart_mouseover(event: MouseEvent | TouchEvent) {
 }

 let inited: boolean;
+let ready = false;

-export function init(_target: Node, _routes: Route[]) {
-	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(initial_data.store);
+	}

 	if (!inited) { // this check makes HMR possible
 		window.addEventListener('click', handle_click);
 		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;
 	}
@@ -251,32 +429,35 @@ export function init(_target: Node, _routes: Route[]) {

 		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, window.location.href));
+	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
@@ -1,22 +1,33 @@
+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, hydrate: boolean }): Component;
-	preload: (data: { params: Params, query: Query }) => Promise<any>;
+	new (options: { target: Node, data: any, store: Store, hydrate: boolean }): Component;
+	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 = {
@@ -26,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/src/webpack/index.ts
+++ b/src/webpack/index.ts
@@ -1,4 +1,4 @@
-import { dest, dev } from '../config';
+import { locations, dev } from './config';

 export default {
 	dev: dev(),
@@ -6,16 +6,16 @@ export default {
 	client: {
 		entry: () => {
 			return {
-				main: './app/client.js'
+				main: `${locations.app()}/client`
 			};
 		},

 		output: () => {
 			return {
-				path: `${dest()}/client`,
+				path: `${locations.dest()}/client`,
 				filename: '[hash]/[name].js',
 				chunkFilename: '[hash]/[name].[id].js',
-				publicPath: '/client/'
+				publicPath: `client/`
 			};
 		}
 	},
@@ -23,13 +23,13 @@ export default {
 	server: {
 		entry: () => {
 			return {
-				server: './app/server.js'
+				server: `${locations.app()}/server`
 			};
 		},

 		output: () => {
 			return {
-				path: dest(),
+				path: locations.dest(),
 				filename: '[name].js',
 				chunkFilename: '[hash]/[name].[id].js',
 				libraryTarget: 'commonjs2'
@@ -40,13 +40,13 @@ export default {
 	serviceworker: {
 		entry: () => {
 			return {
-				'service-worker': './app/service-worker.js'
+				'service-worker': `${locations.app()}/service-worker`
 			};
 		},

 		output: () => {
 			return {
-				path: dest(),
+				path: locations.dest(),
 				filename: '[name].js',
 				chunkFilename: '[name].[id].[hash].js'
 			}
--- a/test/app/app/client.js
+++ b/test/app/app/client.js
@@ -1,8 +1,13 @@
 import { init, prefetchRoutes } from '../../../runtime.js';
-import { routes } from './manifest/client.js';
+import { Store } from 'svelte/store.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)
+	});
 };

 window.prefetchRoutes = prefetchRoutes;
--- a/test/app/app/server.js
+++ b/test/app/app/server.js
@@ -1,9 +1,10 @@
 import fs from 'fs';
+import { resolve } from 'url';
 import express from 'express';
-import compression from 'compression';
 import serve from 'serve-static';
-import sapper from '../../../middleware';
-import { routes } from './manifest/server.js';
+import sapper from '../../../dist/middleware.ts.js';
+import { Store } from 'svelte/store.js';
+import { manifest } from './manifest/server.js';

 let pending;
 let ended;
@@ -30,56 +31,74 @@ process.on('message', message => {

 const app = express();

-app.use((req, res, next) => {
-	if (pending) pending.add(req.url);
-
-	const { write, end } = res;
-	const chunks = [];
-
-	res.write = function(chunk) {
-		chunks.push(new Buffer(chunk));
-		write.apply(res, arguments);
-	};
-
-	res.end = function(chunk) {
-		if (chunk) chunks.push(new Buffer(chunk));
-		end.apply(res, arguments);
-
-		if (pending) pending.delete(req.url);
-
-		process.send({
-			method: req.method,
-			url: req.url,
-			status: res.statusCode,
-			headers: res._headers,
-			body: Buffer.concat(chunks).toString()
-		});
-
-		if (pending && pending.size === 0 && ended) {
-			process.send({ type: 'done' });
-		}
-	};
-
-	next();
-});
-
-const { PORT = 3000 } = process.env;
+const { PORT = 3000, BASEPATH = '' } = process.env;
+const base = `http://localhost:${PORT}${BASEPATH}/`;

 // this allows us to do e.g. `fetch('/api/blog')` on the server
 const fetch = require('node-fetch');
 global.fetch = (url, opts) => {
-	if (url[0] === '/') url = `http://localhost:${PORT}${url}`;
-	return fetch(url, opts);
+	return fetch(resolve(base, url), opts);
 };

-app.use(compression({ threshold: 0 }));
+const middlewares = [
+	serve('assets'),

-app.use(serve('assets'));
+	// set test cookie
+	(req, res, next) => {
+		res.setHeader('Set-Cookie', 'test=woohoo!; Max-Age=3600');
+		next();
+	},

-app.use(sapper({
-	routes
-}));
+	// emit messages so we can capture requests
+	(req, res, next) => {
+		if (!pending) return next();

-app.listen(PORT, () => {
-	console.log(`listening on port ${PORT}`);
-});
+		pending.add(req.url);
+
+		const { write, end } = res;
+		const chunks = [];
+
+		res.write = function(chunk) {
+			chunks.push(new Buffer(chunk));
+			write.apply(res, arguments);
+		};
+
+		res.end = function(chunk) {
+			if (chunk) chunks.push(new Buffer(chunk));
+			end.apply(res, arguments);
+
+			if (pending) pending.delete(req.url);
+
+			process.send({
+				method: req.method,
+				url: req.url,
+				status: res.statusCode,
+				headers: res._headers,
+				body: Buffer.concat(chunks).toString()
+			});
+
+			if (pending && pending.size === 0 && ended) {
+				process.send({ type: 'done' });
+			}
+		};
+
+		next();
+	},
+
+	sapper({
+		manifest,
+		store: () => {
+			return new Store({
+				title: 'Stored title'
+			});
+		}
+	})
+];
+
+if (BASEPATH) {
+	app.use(BASEPATH, ...middlewares);
+} else {
+	app.use(...middlewares);
+}
+
+app.listen(PORT);
--- a/test/app/app/template.html
+++ b/test/app/app/template.html
@@ -5,15 +5,11 @@
 	<meta name='viewport' content='width=device-width'>
 	<meta name='theme-color' content='#aa1e1e'>

-	<link rel='stylesheet' href='/global.css'>
-	<link rel='manifest' href='/manifest.json'>
-	<link rel='icon' type='image/png' href='/favicon.png'>
+	%sapper.base%

-	<script>
-		// if ('serviceWorker' in navigator) {
-		// 	navigator.serviceWorker.register('/service-worker.js');
-		// }
-	</script>
+	<link rel='stylesheet' href='global.css'>
+	<link rel='manifest' href='manifest.json'>
+	<link rel='icon' type='image/png' href='favicon.png'>

 	<!-- Sapper generates a <style> tag containing critical CSS
 	     for the current page. CSS for the rest of the app is
--- a/test/app/package-lock.json
+++ b/test/app/package-lock.json
--- a/test/app/package.json
+++ b/test/app/package.json
@@ -1,28 +0,0 @@
-{
-  "name": "TODO",
-  "description": "TODO",
-  "version": "0.0.1",
-  "scripts": {
-    "dev": "node server.js",
-    "build": "sapper build",
-    "start": "cross-env NODE_ENV=production node server.js",
-    "prestart": "npm run build"
-  },
-  "dependencies": {
-    "compression": "^1.7.2",
-    "cross-env": "^5.1.3",
-    "css-loader": "^0.28.10",
-    "express": "^4.16.2",
-    "extract-text-webpack-plugin": "^3.0.2",
-    "glob": "^7.1.2",
-    "marked": "^0.3.17",
-    "node-fetch": "^1.7.3",
-    "npm-run-all": "^4.1.2",
-    "serve-static": "^1.13.2",
-    "style-loader": "^0.19.0",
-    "svelte": "^1.56.0",
-    "svelte-loader": "^2.3.3",
-    "uglifyjs-webpack-plugin": "^1.2.2",
-    "webpack": "^4.1.0"
-  }
-}
--- a/test/app/routes/4xx.html
+++ b/test/app/routes/4xx.html
@@ -1,18 +0,0 @@
-<:Head>
-	<title>{{status}}</title>
-</:Head>
-
-<Layout page='home'>
-	<h1>Not found</h1>
-	<p>{{error.message}}</p>
-</Layout>
-
-<script>
-	import Layout from './_components/Layout.html';
-
-	export default {
-		components: {
-			Layout
-		}
-	};
-</script>
--- a/test/app/routes/5xx.html
+++ b/test/app/routes/5xx.html
@@ -1,18 +0,0 @@
-<:Head>
-	<title>Internal server error</title>
-</:Head>
-
-<Layout page='home'>
-	<h1>Internal server error</h1>
-	<p>{{error.message}}</p>
-</Layout>
-
-<script>
-	import Layout from './_components/Layout.html';
-
-	export default {
-		components: {
-			Layout
-		}
-	};
-</script>
--- 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,20 @@
+<span>y: {segment} {count}</span>
+<svelte:component this={child.component} {...child.props}/>
+
+<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/[x]/_layout.html
+++ b/test/app/routes/[x]/_layout.html
@@ -0,0 +1,20 @@
+<span>x: {segment} {count}</span>
+<svelte:component this={child.component} {...child.props}/>
+
+<script>
+	import counts from './_counts.js';
+
+	export default {
+		preload() {
+			return {
+				count: counts.x += 1
+			};
+		},
+
+		oncreate() {
+			this.set({
+				segment: this.get().params.x
+			});
+		}
+	};
+</script>
--- a/test/app/routes/_components/Layout.html
+++ b/test/app/routes/_components/Layout.html
@@ -1,15 +0,0 @@
-<Nav page={{page}}/>
-
-<main>
-	<slot></slot>
-</main>
-
-<script>
-	import Nav from './Nav.html';
-
-	export default {
-		components: {
-			Nav
-		}
-	};
-</script>
--- a/test/app/routes/_components/Nav.html
+++ b/test/app/routes/_components/Nav.html
@@ -1,57 +0,0 @@
-<nav>
-	<ul>
-		<li><a href='/'>home</a></li>
-		<li><a href='/about'>about</a></li>
-		<li><a href='/slow-preload'>slow preload</a></li>
-		<li><a href='/redirect-from'>redirect</a></li>
-		<li><a href='/blog/nope'>broken link</a></li>
-		<li><a href='/blog/throw-an-error'>error link</a></li>
-		<li><a rel=prefetch class='{{page === "blog"  ? "selected" : ""}}' href='/blog'>blog</a></li>
-	</ul>
-</nav>
-
-<style>
-	nav {
-		border-bottom: 1px solid rgba(170,30,30,0.1);
-		font-weight: 300;
-		padding: 0 1em;
-	}
-
-	ul {
-		margin: 0;
-		padding: 0;
-	}
-
-	/* clearfix */
-	ul::after {
-		content: '';
-		display: block;
-		clear: both;
-	}
-
-	li {
-		display: block;
-		float: left;
-	}
-
-	.selected {
-		position: relative;
-		display: inline-block;
-	}
-
-	.selected::after {
-		position: absolute;
-		content: '';
-		width: calc(100% - 1em);
-		height: 2px;
-		background-color: rgb(170,30,30);
-		display: block;
-		bottom: -1px;
-	}
-
-	a {
-		text-decoration: none;
-		padding: 1em 0.5em;
-		display: block;
-	}
-</style>
--- 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,27 +1,26 @@
-<:Head>
+<svelte:head>
 	<title>About</title>
-</:Head>
+</svelte:head>

-<Layout page='about'>
-	<h1>About this site</h1>
+<h1>About this site</h1>

-	<p>This is the 'about' page. There's not much here.</p>
+<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='goto("/blog/why-the-name")'>Why the name?</button>
-</Layout>
+<button class='prefetch' on:click='prefetch("blog/why-the-name")'>Why the name?</button>

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

 	export default {
-		components: {
-			Layout
+		oncreate() {
+			window.goto = goto;
+		},
+
+		ondestroy() {
+			window.goto = null;
 		},

 		methods: {
-			goto,
 			prefetch
 		}
 	};
--- a/test/app/routes/api/delete/[id].js
+++ b/test/app/routes/api/delete/[id].js
@@ -1,5 +1,5 @@
 export function del(req, res) {
-	res.set({
+	res.writeHead(200, {
 		'Content-Type': 'application/json'
 	});

--- a/test/app/routes/blog/[slug].html
+++ b/test/app/routes/blog/[slug].html
@@ -1,59 +1,15 @@
-<:Head>
-	<title>{{post.title}}</title>
-</:Head>
+<svelte:head>
+	<title>{post.title}</title>
+</svelte:head>

-<Layout page='blog'>
-	<h1>{{post.title}}</h1>
+<h1>{post.title}</h1>

-	<div class='content'>
-		{{{post.html}}}
-	</div>
-</Layout>
-
-<style>
-	/*
-		By default, CSS is locally scoped to the component,
-		and any unused styles are dead-code-eliminated.
-		In this page, Svelte can't know which elements are
-		going to appear inside the {{{post.html}}} block,
-		so we have to use the :global(...) modifier to target
-		all elements inside .content
-	*/
-	.content :global(h2) {
-		font-size: 1.4em;
-		font-weight: 500;
-	}
-
-	.content :global(pre) {
-		background-color: #f9f9f9;
-		box-shadow: inset 1px 1px 5px rgba(0,0,0,0.05);
-		padding: 0.5em;
-		border-radius: 2px;
-		overflow-x: auto;
-	}
-
-	.content :global(pre) :global(code) {
-		background-color: transparent;
-		padding: 0;
-	}
-
-	.content :global(ul) {
-		line-height: 1.5;
-	}
-
-	.content :global(li) {
-		margin: 0 0 0.5em 0;
-	}
-</style>
+<div class='content'>
+	{@html post.html}
+</div>

 <script>
-	import Layout from '../_components/Layout.html';
-
 	export default {
-		components: {
-			Layout
-		},
-
 		preload({ params, query }) {
 			// the `slug` parameter is available because this file
 			// is called [slug].html
@@ -63,7 +19,7 @@
 				return this.error(500, 'something went wrong');
 			}

-			return fetch(`/blog/${slug}.json`).then(r => {
+			return fetch(`blog/${slug}.json`).then(r => {
 				if (r.status === 200) {
 					return r.json().then(post => ({ post }));
 					this.error(r.status, '')
--- a/test/app/routes/blog/[slug].json.js
+++ b/test/app/routes/blog/[slug].json.js
@@ -11,7 +11,7 @@ export function get(req, res, next) {
 	const { slug } = req.params;

 	if (slug in lookup) {
-		res.set({
+		res.writeHead(200, {
 			'Content-Type': 'application/json',
 			'Cache-Control': `no-cache`
 		});
--- a/test/app/routes/blog/_posts.js
+++ b/test/app/routes/blog/_posts.js
@@ -14,7 +14,7 @@ const posts = [
 		html: `
 			<p>First, you have to know what <a href='https://svelte.technology'>Svelte</a> is. Svelte is a UI framework with a bold new idea: rather than providing a library that you write code with (like React or Vue, for example), it's a compiler that turns your components into highly optimized vanilla JavaScript. If you haven't already read the <a href='https://svelte.technology/blog/frameworks-without-the-framework'>introductory blog post</a>, you should!</p>

-			<p>Sapper is a Next.js-style framework (<a href='/blog/how-is-sapper-different-from-next'>more on that here</a>) built around Svelte. It makes it embarrassingly easy to create extremely high performance web apps. Out of the box, you get:</p>
+			<p>Sapper is a Next.js-style framework (<a href='blog/how-is-sapper-different-from-next'>more on that here</a>) built around Svelte. It makes it embarrassingly easy to create extremely high performance web apps. Out of the box, you get:</p>

 			<ul>
 				<li>Code-splitting, dynamic imports and hot module replacement, powered by webpack</li>
@@ -70,8 +70,8 @@ const posts = [
 			<ul>
 				<li>It's powered by <a href='https://svelte.technology'>Svelte</a> instead of React, so it's faster and your apps are smaller</li>
 				<li>Instead of route masking, we encode route parameters in filenames. For example, the page you're looking at right now is <code>routes/blog/[slug].html</code></li>
-				<li>As well as pages (Svelte components, which render on server or client), you can create <em>server routes</em> in your <code>routes</code> directory. These are just <code>.js</code> files that export functions corresponding to HTTP methods, and receive Express <code>request</code> and <code>response</code> objects as arguments. This makes it very easy to, for example, add a JSON API such as the one <a href='/blog/how-is-sapper-different-from-next.json'>powering this very page</a></li>
-				<li>Links are just <code>&lt;a&gt;</code> elements, rather than framework-specific <code>&lt;Link&gt;</code> components. That means, for example, that <a href='/blog/how-can-i-get-involved'>this link right here</a>, despite being inside a blob of HTML, works with the router as you'd expect.</li>
+				<li>As well as pages (Svelte components, which render on server or client), you can create <em>server routes</em> in your <code>routes</code> directory. These are just <code>.js</code> files that export functions corresponding to HTTP methods, and receive Express <code>request</code> and <code>response</code> objects as arguments. This makes it very easy to, for example, add a JSON API such as the one <a href='blog/how-is-sapper-different-from-next.json'>powering this very page</a></li>
+				<li>Links are just <code>&lt;a&gt;</code> elements, rather than framework-specific <code>&lt;Link&gt;</code> components. That means, for example, that <a href='blog/how-can-i-get-involved'>this link right here</a>, despite being inside a blob of HTML, works with the router as you'd expect.</li>
 			</ul>
 		`
 	},
--- a/test/app/routes/blog/index.html
+++ b/test/app/routes/blog/index.html
@@ -1,38 +1,23 @@
-<:Head>
+<svelte:head>
 	<title>Blog</title>
-</:Head>
+</svelte:head>

-<Layout page='blog'>
-	<h1>Recent posts</h1>
+<h1>Recent posts</h1>

-	<ul>
-		{{#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}}
-	</ul>
-</Layout>
-
-<style>
-	ul {
-		margin: 0 0 1em 0;
-		line-height: 1.5;
-	}
-</style>
+<ul>
+	{#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}
+</ul>

 <script>
-	import Layout from '../_components/Layout.html';
-
 	export default {
-		components: {
-			Layout
-		},
-
 		preload({ params, query }) {
-			return fetch(`/blog.json`).then(r => r.json()).then(posts => {
+			return fetch(`blog.json`).then(r => r.json()).then(posts => {
 				return { posts };
 			});
 		}
--- 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 {
@@ -8,7 +8,7 @@ const contents = JSON.stringify(posts.map(post => {
 }));

 export function get(req, res) {
-	res.set({
+	res.writeHead(200, {
 		'Content-Type': 'application/json',
 		'Cache-Control': `max-age=${30 * 60 * 1e3}` // cache for 30 minutes
 	});
--- a/test/app/routes/credentials/index.html
+++ b/test/app/routes/credentials/index.html
@@ -0,0 +1,11 @@
+<h1>{message}</h1>
+
+<script>
+	export default {
+		preload({ query }) {
+			return this.fetch(`credentials/test.json`, {
+				credentials: query.creds
+			}).then(r => r.json());
+		}
+	};
+</script>
--- a/test/app/routes/credentials/test.json.js
+++ b/test/app/routes/credentials/test.json.js
@@ -0,0 +1,28 @@
+export function get(req, res) {
+	const cookies = req.headers.cookie
+		? req.headers.cookie.split(/,\s+/).reduce((cookies, cookie) => {
+			const [pair] = cookie.split('; ');
+			const [name, value] = pair.split('=');
+			cookies[name] = value;
+			return cookies;
+		}, {})
+		: {};
+
+	if (cookies.test) {
+		res.writeHead(200, {
+			'Content-Type': 'application/json'
+		});
+
+		res.end(JSON.stringify({
+			message: cookies.test
+		}));
+	} else {
+		res.writeHead(403, {
+			'Content-Type': 'application/json'
+		});
+
+		res.end(JSON.stringify({
+			message: 'unauthorized'
+		}));
+	}
+}
--- a/test/app/routes/delete-test.html
+++ b/test/app/routes/delete-test.html
@@ -4,7 +4,7 @@
 	export default {
 		methods: {
 			del() {
-				fetch(`/api/delete/42`, { method: 'DELETE' })
+				fetch(`api/delete/42`, { method: 'DELETE' })
 					.then(r => r.json())
 					.then(data => {
 						window.deleted = data;
--- a/test/app/routes/index.html
+++ b/test/app/routes/index.html
@@ -1,60 +1,26 @@
-<:Head>
+<svelte:head>
 	<title>Sapper project template</title>
-</:Head>
+</svelte:head>

-<Layout page='home'>
-	<h1>Great success!</h1>
+<h1>Great success!</h1>

-	<figure>
-		<img alt='borat' src='/great-success.png'>
-		<figcaption>HIGH FIVE!</figcaption>
-	</figure>
-
-	<p><strong>Try editing this file (routes/index.html) to test hot module reloading.</strong></p>
-</Layout>
+<a href='.'>home</a>
+<a href='about'>about</a>
+<a href='slow-preload'>slow preload</a>
+<a href='redirect-from'>redirect</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>

 <div class='hydrate-test'></div>

 <style>
-	h1, figure, p {
-		text-align: center;
-		margin: 0 auto;
-	}
-
 	h1 {
+		text-align: center;
 		font-size: 2.8em;
 		text-transform: uppercase;
 		font-weight: 700;
 		margin: 0 0 0.5em 0;
 	}
-
-	figure {
-		margin: 0 0 1em 0;
-	}
-
-	img {
-		width: 100%;
-		max-width: 400px;
-		margin: 0 0 1em 0;
-	}
-
-	p {
-		margin: 1em auto;
-	}
-
-	@media (min-width: 480px) {
-		h1 {
-			font-size: 4em;
-		}
-	}
-</style>
-
-<script>
-	import Layout from './_components/Layout.html';
-
-	export default {
-		components: {
-			Layout
-		}
-	};
-</script>
+</style>
--- 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.html
+++ b/test/app/routes/preload-root.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
@@ -0,0 +1,17 @@
+<h1>{foo.bar()}</h1>
+
+<script>
+	export default {
+		preload() {
+			class Foo {
+				bar() {
+					return 42;
+				}
+			}
+
+			return {
+				foo: new Foo()
+			};
+		}
+	};
+</script>
--- 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
@@ -0,0 +1,11 @@
+<h1>{set.has('x')}</h1>
+
+<script>
+	export default {
+		preload() {
+			return {
+				set: new Set(['x'])
+			};
+		}
+	};
+</script>
--- a/test/app/routes/redirect-from.html
+++ b/test/app/routes/redirect-from.html
@@ -1,7 +1,7 @@
 <script>
 	export default {
 		preload() {
-			this.redirect(301, '/redirect-to');
+			this.redirect(301, 'redirect-to');
 		}
 	};
 </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
@@ -0,0 +1 @@
+<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/app/webpack/server.config.js
+++ b/test/app/webpack/server.config.js
@@ -1,5 +1,4 @@
 const config = require('../../../webpack/config.js');
-const pkg = require('../package.json');
 const sapper_pkg = require('../../../package.json');

 module.exports = {
@@ -9,7 +8,10 @@ module.exports = {
 	resolve: {
 		extensions: ['.js', '.html']
 	},
-	externals: Object.keys(pkg.dependencies).concat(Object.keys(sapper_pkg.dependencies)),
+	externals: [].concat(
+		Object.keys(sapper_pkg.dependencies),
+		Object.keys(sapper_pkg.devDependencies)
+	),
 	module: {
 		rules: [
 			{
--- a/test/common/test.js
+++ b/test/common/test.js
@@ -1,7 +1,7 @@
+const fs = require('fs');
 const path = require('path');
 const assert = require('assert');
 const Nightmare = require('nightmare');
-const express = require('express');
 const serve = require('serve-static');
 const walkSync = require('walk-sync');
 const fetch = require('node-fetch');
@@ -13,6 +13,10 @@ Nightmare.action('page', {
 		this.evaluate_now(() => document.querySelector('h1').textContent, done);
 	},

+	html(done) {
+		this.evaluate_now(() => document.documentElement.innerHTML, done);
+	},
+
 	text(done) {
 		this.evaluate_now(() => document.body.textContent, done);
 	}
@@ -26,7 +30,9 @@ Nightmare.action('prefetchRoutes', function(done) {
 	this.evaluate_now(() => window.prefetchRoutes(), done);
 });

-const cli = path.resolve(__dirname, '../../cli.js');
+const cli = path.resolve(__dirname, '../../sapper');
+
+const wait = ms => new Promise(f => setTimeout(f, ms));

 describe('sapper', function() {
 	process.chdir(path.resolve(__dirname, '../app'));
@@ -35,12 +41,23 @@ describe('sapper', function() {
 	rimraf.sync('export');
 	rimraf.sync('build');
 	rimraf.sync('.sapper');
+	rimraf.sync('start.js');

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

 	// TODO reinstate dev tests
-	// run('development');
-	run('production');
+	// run({
+	// 	mode: 'development'
+	// });
+
+	run({
+		mode: 'production'
+	});
+
+	run({
+		mode: 'production',
+		basepath: '/custom-basepath'
+	});

 	describe('export', () => {
 		before(() => {
@@ -82,13 +99,12 @@ describe('sapper', function() {
 			];
 			// 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);

@@ -112,17 +128,31 @@ describe('sapper', function() {
 	});
 });

-function run(env) {
-	describe(`env=${env}`, function () {
+function run({ mode, basepath = '' }) {
+	describe(`mode=${mode}`, function () {
 		let proc;
-		let nightmare;
 		let capture;

 		let base;
+		let captured_basepath;
+
+		const nightmare = new Nightmare();
+
+		nightmare.on('console', (type, ...args) => {
+			console[type](...args);
+		});
+
+		nightmare.on('page', (type, ...args) => {
+			if (type === 'error') {
+				console.error(args[1]);
+			} else {
+				console.warn(type, args);
+			}
+		});

 		before(() => {
-			const promise = env === 'production'
-				? exec(`node ${cli} build`).then(() => ports.find(3000))
+			const promise = mode === 'production'
+				? exec(`node ${cli} build -l`).then(() => ports.find(3000))
 				: ports.find(3000).then(port => {
 					exec(`node ${cli} dev`);
 					return ports.wait(port).then(() => port);
@@ -130,13 +160,19 @@ function run(env) {

 			return promise.then(port => {
 				base = `http://localhost:${port}`;
+				if (basepath) base += basepath;

-				const dir = env === 'production' ? 'build' : '.sapper';
+				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: {
-						NODE_ENV: env,
+						NODE_ENV: mode,
+						BASEPATH: basepath,
 						SAPPER_DEST: dir,
 						PORT: port
 					}
@@ -145,7 +181,13 @@ function run(env) {
 				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);
 				});

@@ -184,30 +226,13 @@ function run(env) {

 		after(() => {
 			// give a chance to clean up
-			return new Promise(fulfil => {
-				proc.on('exit', fulfil);
-				proc.kill();
-			});
-		});
-
-		beforeEach(() => {
-			nightmare = new Nightmare();
-
-			nightmare.on('console', (type, ...args) => {
-				console[type](...args);
-			});
-
-			nightmare.on('page', (type, ...args) => {
-				if (type === 'error') {
-					console.error(args[1]);
-				} else {
-					console.warn(type, args);
-				}
-			});
-		});
-
-		afterEach(() => {
-			return nightmare.end();
+			return Promise.all([
+				nightmare.end(),
+				new Promise(fulfil => {
+					proc.on('exit', fulfil);
+					proc.kill();
+				})
+			]);
 		});

 		describe('basic functionality', () => {
@@ -236,16 +261,17 @@ function run(env) {
 			});

 			it('navigates to a new page without reloading', () => {
-				return capture(() => nightmare.goto(base).init().prefetchRoutes())
+				return nightmare.goto(base).init().prefetchRoutes()
 					.then(() => {
-						return capture(() => nightmare.click('a[href="/about"]'));
+						return capture(() => nightmare.click('a[href="about"]'));
 					})
 					.then(requests => {
 						assert.deepEqual(requests.map(r => r.url), []);
-						return nightmare.path();
 					})
+					.then(() => wait(100))
+					.then(() => nightmare.path())
 					.then(path => {
-						assert.equal(path, '/about');
+						assert.equal(path, `${basepath}/about`);
 						return nightmare.title();
 					})
 					.then(title => {
@@ -257,9 +283,7 @@ function run(env) {
 				return nightmare
 					.goto(`${base}/about`)
 					.init()
-					.click('.goto')
-					.wait(() => window.location.pathname === '/blog/what-is-sapper')
-					.wait(100)
+					.evaluate(() => window.goto('blog/what-is-sapper'))
 					.title()
 					.then(title => {
 						assert.equal(title, 'What is Sapper?');
@@ -267,9 +291,7 @@ function run(env) {
 			});

 			it('prefetches programmatically', () => {
-				return nightmare
-					.goto(`${base}/about`)
-					.init()
+				return capture(() => nightmare.goto(`${base}/about`).init())
 					.then(() => {
 						return capture(() => {
 							return nightmare
@@ -278,7 +300,7 @@ function run(env) {
 						});
 					})
 					.then(requests => {
-						assert.ok(!!requests.find(r => r.url === '/blog/why-the-name.json'));
+						assert.ok(!!requests.find(r => r.url === `/blog/why-the-name.json`));
 					});
 			});

@@ -292,28 +314,31 @@ function run(env) {
 					});
 			});

-			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);
 						});
 					})
 					.then(mouseover_requests => {
-						assert.ok(mouseover_requests.findIndex(r => r.url === '/blog/what-is-sapper.json') !== -1);
+						assert.ok(mouseover_requests.findIndex(r => r.url === `/blog/what-is-sapper.json`) !== -1);

 						return capture(() => {
 							return nightmare
-								.click('[href="/blog/what-is-sapper"]')
+								.click('[href="blog/what-is-sapper"]')
 								.wait(200);
 						});
 					})
 					.then(click_requests => {
-						assert.ok(click_requests.findIndex(r => r.url === '/blog/what-is-sapper.json') === -1);
+						assert.ok(click_requests.findIndex(r => r.url === `/blog/what-is-sapper.json`) === -1);
 					});
 			});

@@ -321,13 +346,13 @@ function run(env) {
 				return nightmare
 					.goto(base)
 					.init()
-					.click('a[href="/slow-preload"]')
+					.click('a[href="slow-preload"]')
 					.wait(100)
-					.click('a[href="/about"]')
+					.click('a[href="about"]')
 					.wait(100)
 					.then(() => nightmare.path())
 					.then(path => {
-						assert.equal(path, '/about');
+						assert.equal(path, `${basepath}/about`);
 						return nightmare.title();
 					})
 					.then(title => {
@@ -336,7 +361,7 @@ function run(env) {
 					})
 					.then(() => nightmare.path())
 					.then(path => {
-						assert.equal(path, '/about');
+						assert.equal(path, `${basepath}/about`);
 						return nightmare.title();
 					})
 					.then(title => {
@@ -344,16 +369,6 @@ function run(env) {
 					});
 			});

-			it('passes entire request object to preload', () => {
-				return nightmare
-					.goto(`${base}/show-url`)
-					.init()
-					.evaluate(() => document.querySelector('p').innerHTML)
-					.end().then(html => {
-						assert.equal(html, `URL is /show-url`);
-					});
-			});
-
 			it('calls a delete handler', () => {
 				return nightmare
 					.goto(`${base}/delete-test`)
@@ -385,7 +400,7 @@ function run(env) {
 				return nightmare.goto(`${base}/redirect-from`)
 					.path()
 					.then(path => {
-						assert.equal(path, '/redirect-to');
+						assert.equal(path, `${basepath}/redirect-to`);
 					})
 					.then(() => nightmare.page.title())
 					.then(title => {
@@ -395,12 +410,12 @@ function run(env) {

 			it('redirects in client', () => {
 				return nightmare.goto(base)
-					.wait('[href="/redirect-from"]')
-					.click('[href="/redirect-from"]')
+					.wait('[href="redirect-from"]')
+					.click('[href="redirect-from"]')
 					.wait(200)
 					.path()
 					.then(path => {
-						assert.equal(path, '/redirect-to');
+						assert.equal(path, `${basepath}/redirect-to`);
 					})
 					.then(() => nightmare.page.title())
 					.then(title => {
@@ -412,26 +427,26 @@ function run(env) {
 				return nightmare.goto(`${base}/blog/nope`)
 					.path()
 					.then(path => {
-						assert.equal(path, '/blog/nope');
+						assert.equal(path, `${basepath}/blog/nope`);
 					})
 					.then(() => nightmare.page.title())
 					.then(title => {
-						assert.equal(title, 'Not found')
+						assert.equal(title, '404')
 					});
 			});

 			it('handles 4xx error in client', () => {
 				return nightmare.goto(base)
 					.init()
-					.click('[href="/blog/nope"]')
+					.click('[href="blog/nope"]')
 					.wait(200)
 					.path()
 					.then(path => {
-						assert.equal(path, '/blog/nope');
+						assert.equal(path, `${basepath}/blog/nope`);
 					})
 					.then(() => nightmare.page.title())
 					.then(title => {
-						assert.equal(title, 'Not found');
+						assert.equal(title, '404');
 					});
 			});

@@ -439,33 +454,33 @@ function run(env) {
 				return nightmare.goto(`${base}/blog/throw-an-error`)
 					.path()
 					.then(path => {
-						assert.equal(path, '/blog/throw-an-error');
+						assert.equal(path, `${basepath}/blog/throw-an-error`);
 					})
 					.then(() => nightmare.page.title())
 					.then(title => {
-						assert.equal(title, 'Internal server error')
+						assert.equal(title, '500')
 					});
 			});

 			it('handles non-4xx error in client', () => {
 				return nightmare.goto(base)
 					.init()
-					.click('[href="/blog/throw-an-error"]')
+					.click('[href="blog/throw-an-error"]')
 					.wait(200)
 					.path()
 					.then(path => {
-						assert.equal(path, '/blog/throw-an-error');
+						assert.equal(path, `${basepath}/blog/throw-an-error`);
 					})
 					.then(() => nightmare.page.title())
 					.then(title => {
-						assert.equal(title, 'Internal server error');
+						assert.equal(title, '500');
 					});
 			});

 			it('does not attempt client-side navigation to server routes', () => {
 				return nightmare.goto(`${base}/blog/how-is-sapper-different-from-next`)
 					.init()
-					.click(`[href="/blog/how-is-sapper-different-from-next.json"]`)
+					.click(`[href="blog/how-is-sapper-different-from-next.json"]`)
 					.wait(200)
 					.page.text()
 					.then(text => {
@@ -488,11 +503,172 @@ function run(env) {
 						assert.equal(title, `I'm afraid I just blue myself`);
 					});
 			});
+
+			it('serializes Set objects returned from preload', () => {
+				return nightmare.goto(`${base}/preload-values/set`)
+					.page.title()
+					.then(title => {
+						assert.equal(title, 'true');
+						return nightmare.init().page.title();
+					})
+					.then(title => {
+						assert.equal(title, 'true');
+					});
+			});
+
+			it('bails on custom classes returned from preload', () => {
+				return nightmare.goto(`${base}/preload-values/custom-class`)
+					.page.title()
+					.then(title => {
+						assert.equal(title, '42');
+						return nightmare.init().page.title();
+					})
+					.then(title => {
+						assert.equal(title, '42');
+					});
+			});
+
+			it('renders store props', () => {
+				return nightmare.goto(`${base}/store`)
+					.page.title()
+					.then(title => {
+						assert.equal(title, 'Stored title');
+						return nightmare.init().page.title();
+					})
+					.then(title => {
+						assert.equal(title, 'Stored title');
+					});
+			});
+
+			it('sends cookies when using this.fetch with credentials: "include"', () => {
+				return nightmare.goto(`${base}/credentials?creds=include`)
+					.page.title()
+					.then(title => {
+						assert.equal(title, 'woohoo!');
+					});
+			});
+
+			it('does not send cookies when using this.fetch without credentials', () => {
+				return nightmare.goto(`${base}/credentials`)
+					.page.title()
+					.then(title => {
+						assert.equal(title, 'unauthorized');
+					});
+			});
+
+			it('delegates to fetch on the client', () => {
+				return nightmare.goto(base).init()
+					.click('[href="credentials?creds=include"]')
+					.wait(100)
+					.page.title()
+					.then(title => {
+						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), [
+							'x: foo 1',
+							'y: bar 1',
+							'z: baz 1'
+						]);
+
+						return nightmare.click(`a`)
+							.then(() => wait(100))
+							.then(() => {
+								return nightmare.evaluate(() => document.querySelector('#sapper').textContent);
+							});
+					})
+					.then(text => {
+						assert.deepEqual(text.split('\n').filter(Boolean), [
+							'x: foo 1',
+							'y: bar 1',
+							'z: qux 2'
+						]);
+					});
+			});
+
+			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', () => {
 			it('sets Content-Type and Link...preload headers', () => {
-				return capture(() => nightmare.goto(base).end()).then(requests => {
+				return capture(() => nightmare.goto(base)).then(requests => {
 					const { headers } = requests[0];

 					assert.equal(
@@ -500,8 +676,16 @@ function run(env) {
 						'text/html'
 					);

+					const str = ['main', '.+?\\.\\d+']
+						.map(file => {
+							return `<${basepath}/client/[^/]+/${file}\\.js>;rel="preload";as="script"`;
+						})
+						.join(', ');
+
+					const regex = new RegExp(str);
+
 					assert.ok(
-						/<\/client\/[^/]+\/main\.js>;rel="preload";as="script", <\/client\/[^/]+\/_\.\d+\.js>;rel="preload";as="script"/.test(headers['link']),
+						regex.test(headers['link']),
 						headers['link']
 					);
 				});
@@ -512,7 +696,7 @@ function run(env) {

 function exec(cmd) {
 	return new Promise((fulfil, reject) => {
-		const parts = cmd.split(' ');
+		const parts = cmd.trim().split(' ');
 		const proc = require('child_process').spawn(parts.shift(), parts);

 		proc.stdout.on('data', data => {
--- a/test/unit/create_routes.test.js
+++ b/test/unit/create_routes.test.js
@@ -1,167 +0,0 @@
-const assert = require('assert');
-const { create_routes } = require('../../core.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/foo.html',
-				'post/bar.html',
-				'post/f[xx].html',
-				'post/[id].json.js',
-				'post/[id].html',
-				'[wildcard].html'
-			]
-		);
-	});
-
-	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.js
+++ b/test/unit/create_routes/index.js
@@ -0,0 +1,165 @@
+const path = require('path');
+const assert = require('assert');
+const { create_routes } = require('../../../dist/core.ts.js');
+
+
+const _default_layout = {
+	default: true,
+	name: '_default_layout',
+	file: null
+};
+
+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,
+			_default_layout,
+			blog,
+			blog_$slug
+		]);
+
+		assert.deepEqual(pages, [
+			{
+				pattern: /^\/?$/,
+				parts: [
+					{ component: index, params: [] }
+				]
+			},
+
+			{
+				pattern: /^\/about\/?$/,
+				parts: [
+					{ component: about, params: [] }
+				]
+			},
+
+			{
+				pattern: /^\/blog\/?$/,
+				parts: [
+					{ component: _default_layout, params: [] },
+					{ component: blog, params: [] }
+				]
+			},
+
+			{
+				pattern: /^\/blog\/([^\/]+?)\/?$/,
+				parts: [
+					{ component: _default_layout, params: [] },
+					{ 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.component.file)), [
+			['index.html'],
+			['about.html'],
+			[_default_layout.file, 'post/index.html'],
+			[_default_layout.file, 'post/bar.html'],
+			[_default_layout.file, 'post/foo.html'],
+			[_default_layout.file, 'post/f[xx].html'],
+			[_default_layout.file, 'post/[id([0-9-a-z]{3,})].html'],
+			[_default_layout.file, '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/Show More
+++ b/Show More
Author	SHA1	Message	Date
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	ceb1caf1de	-> v0.10.4	2018-04-03 21:43:30 -04:00
Rich Harris	7e263a3076	Merge pull request #227 from naturalethic/upgrade-chokidar-disable-globbing-issue-212 Upgrade chokidar disable globbing issue 212	2018-04-03 21:42:34 -04:00
Rich Harris	ec88d4a430	Remove unnecessary globbing pattern	2018-04-03 21:38:28 -04:00
Joshua Kifer	909ea72108	Update dev.ts	2018-04-03 14:04:08 -07:00
Joshua Kifer	cd09d75d99	Merge branch 'master' into upgrade-chokidar-disable-globbing-issue-212	2018-04-03 13:00:07 -07:00
Joshua Kifer	0e3abe489a	Re-upgrade chokidar, disable globbing	2018-04-03 12:58:06 -07:00
Joshua Kifer	a5d141d2f1	Update (#1 ) * Downgrade chokidar to 1.7.0 * -> v0.10.3	2018-04-03 12:49:55 -07:00
Rich-Harris	87eae6164b	-> v0.10.3	2018-04-02 15:39:34 -04:00
Rich Harris	97e00f5a9c	Merge pull request #226 from naturalethic/downgrade-chokidar Downgrade chokidar to 1.7.0	2018-04-02 15:38:40 -04:00
Joshua Kifer	bd55558b5e	Downgrade chokidar to 1.7.0	2018-04-02 12:24:57 -07:00
Rich-Harris	25dc4b3a4c	-> v0.10.2	2018-03-25 15:20:48 -04:00
Rich Harris	72c27b78a3	Merge pull request #215 from sveltejs/stable-sort Stable sort	2018-03-25 15:19:43 -04:00
Rich-Harris	25809ec409	enforce stable sort	2018-03-25 15:12:35 -04:00
Rich-Harris	3220c522d7	attach store to error pages	2018-03-20 16:08:23 -04:00
Rich Harris	d5d25f1d30	-> v0.10.1	2018-03-18 22:47:11 -04:00
Rich Harris	7ccd6ba329	Merge pull request #207 from sveltejs/fix-fetch-paths fix server-side fetch paths	2018-03-18 22:41:01 -04:00
Rich Harris	35c30ae2c5	fix server-side fetch paths	2018-03-18 22:36:55 -04:00
Rich Harris	2c61f6d396	-> v0.10.0	2018-03-18 22:17:53 -04:00
Rich Harris	86233a8eab	Merge pull request #206 from sveltejs/sapper-base-error app/template.html must have %sapper.base%	2018-03-18 22:13:24 -04:00
Rich Harris	c140b128ee	expect %sapper.base%	2018-03-18 22:06:11 -04: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
Rich Harris	66ac9773c0	Merge pull request #204 from nolanlawson/ignore-source-maps Add support for sourcemap *.map files	2018-03-18 21:23:26 -04:00
Rich Harris	e60714bb98	Merge pull request #203 from sveltejs/gh-178-fetch implement this.fetch	2018-03-18 21:21:00 -04:00
Nolan Lawson	52dfd6e939	Don't preload .map files	2018-03-18 16:31:53 -07:00
Nolan Lawson	fc2312eba6	Add full *.map file support	2018-03-18 16:17:41 -07:00
Nolan Lawson	cf90476255	Ignore source map files in %sapper.scripts%	2018-03-18 11:13:24 -07:00
Rich Harris	1e8d7d10ab	implement this.fetch (#178 )	2018-03-17 19:21:25 -04:00
Rich Harris	cf6621b83c	Merge pull request #202 from sveltejs/gh-178-store add server- and client-side store management (#178)	2018-03-17 16:10:48 -04:00
Rich Harris	9812cbd71c	add server- and client-side store management (#178 )	2018-03-17 13:45:59 -04:00
Rich Harris	67a81a3cac	Merge pull request #201 from sveltejs/simplify-tests simplify tests	2018-03-17 13:24:42 -04:00
Rich Harris	67463683cc	simplify tests	2018-03-17 13:18:18 -04:00
Rich Harris	b94481b716	Support being mounted on a path — fixes #180	2018-03-17 11:55:02 -04:00
Rich Harris	a95ddee48d	add protocol to startup message	2018-03-16 10:51:19 -04:00
Rich Harris	953694f77f	update deps	2018-03-16 10:51:04 -04:00
Rich Harris	2f24cb0429	-> v0.9.6	2018-03-11 22:01:06 -04:00
Rich Harris	687071902d	-> v0.9.5	2018-03-11 21:30:17 -04:00
Rich Harris	cd3fcfdf3c	move deps to devDeps	2018-03-11 21:29:34 -04:00
Rich Harris	dad48e4abd	Merge pull request #197 from sveltejs/fix-clorox workaround clorox bug	2018-03-11 21:29:12 -04:00
Rich Harris	37d3d57694	workaround clorox bug	2018-03-11 20:51:14 -04:00
Rich Harris	9a5d273590	-> v0.9.4	2018-03-11 19:00:39 -04:00
Rich Harris	3816fe71ad	Merge pull request #196 from sveltejs/gh-186 implement --open	2018-03-11 16:52:41 -04:00
Rich Harris	69f5b9cac7	implement --open - fixes #186	2018-03-11 16:01:13 -04:00
Rich Harris	ad14320dc3	Merge pull request #195 from sveltejs/export-logs show which files are being exported	2018-03-11 15:50:13 -04:00
Rich Harris	43563bd8e5	show which files are being exported	2018-03-11 15:44:53 -04:00
Rich Harris	02d558b97c	Merge pull request #194 from sveltejs/gh-172 minify HTML on export	2018-03-11 15:19:07 -04:00
Rich Harris	866286c95e	minify HTML on export	2018-03-11 14:57:10 -04:00
Rich Harris	e1b5e336dc	Merge pull request #193 from sveltejs/gh-15 minify HTML templates	2018-03-11 14:14:39 -04:00
Rich Harris	1d71b86c0f	remove all hard-coded locations (#181 )	2018-03-11 13:43:11 -04:00
Rich Harris	bdc248f09a	minify HTML at build time (also fixes #181 )	2018-03-11 13:35:29 -04:00
Rich Harris	be63ea7c96	add SAPPER_BASE and SAPPER_APP environment variables	2018-03-11 13:29:39 -04:00
Rich Harris	819ec0b776	minify HTML templates - fixes #15	2018-03-11 13:10:43 -04:00
Rich Harris	d22d37fb18	Merge pull request #192 from sveltejs/misc-tidy-up a few small tweaks	2018-03-11 13:10:15 -04:00
Rich Harris	8ec433581a	a few small tweaks	2018-03-11 12:54:35 -04:00
Rich Harris	0d0e4d664e	-> v0.9.3	2018-03-10 23:32:06 -05:00
Rich Harris	4348fad16d	-> v0.9.2	2018-03-10 23:29:41 -05:00
Rich Harris	4314897a78	-> v0.9.1	2018-03-10 23:28:14 -05:00
Rich Harris	b1c57466c0	-> v0.9.0	2018-03-10 23:24:03 -05:00
Rich Harris	ef55fc5ddd	move built files to dist	2018-03-10 23:20:11 -05:00
Rich Harris	e011fce935	Merge pull request #191 from sveltejs/gh-173 use code-splitting etc	2018-03-10 23:14:53 -05:00
Rich Harris	ba3d9c85c5	clorox seems to have a bug with inverse (TODO investigate)	2018-03-10 23:09:02 -05:00
Rich Harris	cddd7adaad	lazy-load stuff	2018-03-10 23:00:36 -05:00
Rich Harris	d8412f33ba	ignore some files	2018-03-10 22:33:33 -05:00
Rich Harris	254e41b11e	use code-splitting etc	2018-03-10 22:26:53 -05:00
Rich Harris	491c5e3b92	Merge pull request #190 from sveltejs/gh-57 allow server routes to be .ts files (or anything else)	2018-03-10 20:46:25 -05:00
Rich Harris	4441ceb91d	Merge pull request #189 from sveltejs/introduce-spelling-error use wrong spelling of "grey"	2018-03-10 20:45:56 -05:00
Rich Harris	77e418cd21	Merge pull request #188 from sveltejs/gh-112 use devalue instead of serialize-javascript	2018-03-10 20:45:39 -05:00
Rich Harris	4171786953	ensure directories are not mistaken for routes	2018-03-10 20:38:48 -05:00
Rich Harris	5f7cbadd8d	remove extensions from entry points	2018-03-10 20:16:46 -05:00
Rich Harris	9bac32eea4	allow server routes to be .ts files (or anything else) - fixes #57	2018-03-10 20:08:23 -05:00
Rich Harris	3a19657ad9	use wrong spelling of "grey"	2018-03-10 20:04:44 -05:00
Rich Harris	d1b6d029e9	merge master -> gh-112	2018-03-10 19:36:08 -05:00
Rich Harris	45b1147228	use devalue instead of serialize-javascript - fixes #112	2018-03-10 19:27:04 -05:00
Rich Harris	c827fda703	Merge pull request #187 from lukeed/fix/chalk Replace Chalk with Clorox	2018-03-10 16:11:35 -05:00
Luke Edwards	dd39909371	replace chalk with clorox	2018-03-10 12:30:36 -08:00
Rich Harris	fb24c862f3	Merge pull request #185 from sveltejs/gh-165 use window.location.hostname in dev client	2018-03-10 10:44:48 -05:00
Rich Harris	542115f82e	Merge pull request #184 from sveltejs/gh-169-b Fix hard-coded port	2018-03-10 10:28:21 -05:00
Rich Harris	61000a4795	use window.location.hostname in dev client - fixes #165	2018-03-10 10:26:00 -05:00
Rich Harris	7f98d50e15	treat PORT=xxxx the same as --port xxxx	2018-03-10 10:09:18 -05:00
Rich Harris	c580259c07	dont hardcode port	2018-03-10 10:01:42 -05:00
Rich Harris	e8f3aff0da	Merge pull request #183 from sveltejs/use-polka Use polka, remove unused dependencies	2018-03-10 09:54:22 -05:00
Rich Harris	c82031a8e5	remove some unused deps	2018-03-10 09:48:52 -05:00
Rich Harris	1eed1023aa	switch to polka, remove unused deps	2018-03-10 09:39:07 -05:00
Rich Harris	c1a2d93da6	Merge pull request #182 from sveltejs/gh-177 kill child process if webpack crashes	2018-03-10 08:51:05 -05:00
Rich Harris	504654b58e	kill child process if webpack crashes - fixes #177	2018-03-09 21:02:05 -05:00
Rich Harris	b1067103a4	-> v0.8.4	2018-03-07 15:57:46 -05:00
Rich Harris	06af8e87da	Merge pull request #175 from sveltejs/fix-route-sorting fix route sorting	2018-03-07 14:32:56 -05:00
Rich Harris	8bb0999878	fix route sorting	2018-03-07 14:26:30 -05: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>`