-> v0.22.10

Merge pull request #466 from sveltejs/css-basepath
no need to use basepath in <link>
2026-01-13 11:35:28 +00:00 · 2018-10-05 21:25:49 -04:00 · 2018-10-05 21:22:15 -04:00 · 2018-10-05 21:16:27 -04:00 · 2018-10-05 20:59:45 -04:00 · 2018-10-05 20:57:15 -04:00
99 changed files with 2431 additions and 1848 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -4,10 +4,12 @@ yarn-error.log
 node_modules
 cypress/screenshots
 test/app/.sapper
-test/app/app/manifest
+test/app/src/manifest
+__sapper__
 test/app/export
 test/app/build
 sapper
 runtime.js
 dist
-!rollup.config.js
+!rollup.config.js
+templates/*.js
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,81 @@
 # sapper changelog

+## 0.22.10
+
+* Handle `sapper-noscroll` attribute on `<a>` elements ([#376](https://github.com/sveltejs/sapper/issues/376))
+* Fix CSS paths when using a base path ([#466](https://github.com/sveltejs/sapper/pull/466))
+
+## 0.22.9
+
+* Fix legacy builds ([#462](https://github.com/sveltejs/sapper/pull/462))
+
+## 0.22.8
+
+* Ensure CSS placeholders are overwritten ([#462](https://github.com/sveltejs/sapper/pull/462))
+
+## 0.22.7
+
+* Fix cookies ([#460](https://github.com/sveltejs/sapper/pull/460))
+
+## 0.22.6
+
+* Normalise chunk filenames on Windows ([#456](https://github.com/sveltejs/sapper/pull/456))
+* Load modules with credentials ([#458](https://github.com/sveltejs/sapper/pull/458))
+
+## 0.22.5
+
+* Fix `sapper dev`. Oops.
+
+## 0.22.4
+
+* Ensure launcher does not overwrite a module ([#455](https://github.com/sveltejs/sapper/pull/455))
+
+## 0.22.3
+
+* Prevent server from accidentally importing dev client
+
+## 0.22.2
+
+* Make paths in generated code relative to project
+
+## 0.22.1
+
+* Fix `pkg.files`
+
+## 0.22.0
+
+* Move generated files into `__sapper__` ([#453](https://github.com/sveltejs/sapper/pull/453))
+* Change default build and export directories to `__sapper__/build` and `__sapper__/export` ([#453](https://github.com/sveltejs/sapper/pull/453))
+
+## 0.21.1
+
+* Read template from build directory in production
+
+## 0.21.0
+
+* Change project folder structure ([#432](https://github.com/sveltejs/sapper/issues/432))
+* Escape filenames ([#446](https://github.com/sveltejs/sapper/pull/446/))
+
+## 0.20.4
+
+* Fix legacy build CSS ([#439](https://github.com/sveltejs/sapper/issues/439))
+* Enable debugging in Chrome and VSCode ([#435](https://github.com/sveltejs/sapper/issues/435))
+
+## 0.20.3
+
+* Inject `nonce` attribute if `res.locals.nonce` is present ([#424](https://github.com/sveltejs/sapper/pull/424))
+* Prevent service worker caching ([#428](https://github.com/sveltejs/sapper/pull/428))
+* Consistent caching for HTML responses ([#429](https://github.com/sveltejs/sapper/pull/429))
+
+## 0.20.2
+
+* Add `immutable` cache control header for hashed assets ([#425](https://github.com/sveltejs/sapper/pull/425))
+* Handle value-less query string params ([#426](https://github.com/sveltejs/sapper/issues/426))
+
+## 0.20.1
+
+* Update shimport
+
 ## 0.20.0

 * Decode `req.params` and `req.query` ([#417](https://github.com/sveltejs/sapper/issues/417))
--- a/components/default-layout.html
+++ b/components/default-layout.html
@@ -1 +0,0 @@
-<svelte:component this={child.component} {...child.props}/>
--- a/index.js
+++ b/index.js
@@ -0,0 +1 @@
+throw new Error(`As of Sapper 0.22, you should not import 'sapper' directly. See https://sapper.svelte.technology/guide#0-21-to-0-22 for more information`);
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,26 +1,24 @@
 {
  "name": "sapper",
-  "version": "0.20.0",
+  "version": "0.22.10",
  "description": "Military-grade apps, engineered by Svelte",
-  "main": "dist/middleware.js",
  "bin": {
    "sapper": "./sapper"
  },
  "files": [
    "*.js",
-    "runtime",
    "webpack",
    "config",
    "sapper",
-    "components",
-    "dist/*.js"
+    "dist/*.js",
+    "templates/*.js"
  ],
  "directories": {
    "test": "test"
  },
  "dependencies": {
    "html-minifier": "^3.5.16",
-    "shimport": "^0.0.10",
+    "shimport": "0.0.11",
    "source-map-support": "^0.5.6",
    "sourcemap-codec": "^1.4.1",
    "string-hash": "^1.1.3",
@@ -32,6 +30,7 @@
    "@types/mocha": "^5.2.5",
    "@types/node": "^10.7.1",
    "@types/rimraf": "^2.0.2",
+    "agadoo": "^1.0.1",
    "cheap-watch": "^0.3.0",
    "compression": "^1.7.1",
    "cookie": "^0.3.1",
@@ -74,6 +73,7 @@
    "test": "mocha --opts mocha.opts",
    "pretest": "npm run build",
    "build": "rm -rf dist && rollup -c",
+    "prepare": "npm run build",
    "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
@@ -4,6 +4,7 @@ import json from 'rollup-plugin-json';
 import resolve from 'rollup-plugin-node-resolve';
 import commonjs from 'rollup-plugin-commonjs';
 import pkg from './package.json';
+import { builtinModules } from 'module';

 const external = [].concat(
 	Object.keys(pkg.dependencies),
@@ -11,27 +12,37 @@ const external = [].concat(
 	'sapper/core.js'
 );

-export default [
-	{
-		input: `src/runtime/index.ts`,
+function template(kind, external) {
+	return {
+		input: `templates/src/${kind}/index.ts`,
 		output: {
-			file: `runtime.js`,
+			file: `templates/${kind}.js`,
 			format: 'es'
 		},
+		external,
 		plugins: [
+			resolve(),
+			commonjs(),
+			string({
+				include: '**/*.md'
+			}),
 			typescript({
 				typescript: require('typescript'),
 				target: "ES2017"
 			})
 		]
-	},
+	};
+}
+
+export default [
+	template('client', ['__ROOT__', '__ERROR__']),
+	template('server', builtinModules),

 	{
 		input: [
 			`src/api.ts`,
 			`src/cli.ts`,
 			`src/core.ts`,
-			`src/middleware.ts`,
 			`src/rollup.ts`,
 			`src/webpack.ts`
 		],
@@ -42,9 +53,6 @@ export default [
 		},
 		external,
 		plugins: [
-			string({
-				include: '**/*.md'
-			}),
 			json(),
 			resolve(),
 			commonjs(),
--- a/runtime/README.md
+++ b/runtime/README.md
@@ -1 +0,0 @@
-This directory exists for legacy reasons and should be deleted before releasing version 1.
--- a/runtime/app.js
+++ b/runtime/app.js
@@ -1,2 +0,0 @@
-console.error('sapper/runtime/app.js has been deprecated in favour of sapper/runtime.js');
-export * from '../runtime.js';
--- a/src/api/build.ts
+++ b/src/api/build.ts
@@ -3,18 +3,16 @@ import * as path from 'path';
 import mkdirp from 'mkdirp';
 import rimraf from 'rimraf';
 import { EventEmitter } from 'events';
-import * as codec from 'sourcemap-codec';
-import hash from 'string-hash';
 import minify_html from './utils/minify_html';
 import { create_compilers, create_main_manifests, create_manifest_data, create_serviceworker_manifest } from '../core';
 import * as events from './interfaces';
 import { copy_shimport } from './utils/copy_shimport';
-import { Dirs, PageComponent } from '../interfaces';
-import { CompileResult } from '../core/create_compilers/interfaces';
+import { Dirs } from '../interfaces';
+import read_template from '../core/read_template';

 type Opts = {
 	legacy: boolean;
-	bundler: string;
+	bundler: 'rollup' | 'webpack';
 };

 export function build(opts: Opts, dirs: Dirs) {
@@ -39,9 +37,9 @@ async function execute(emitter: EventEmitter, opts: Opts, dirs: Dirs) {
 	mkdirp.sync(`${dirs.dest}/client`);
 	copy_shimport(dirs.dest);

-	// minify app/template.html
+	// minify src/template.html
 	// TODO compile this to a function? could be quicker than str.replace(...).replace(...).replace(...)
-	const template = fs.readFileSync(`${dirs.app}/template.html`, 'utf-8');
+	const template = read_template();

 	// remove this in a future version
 	if (template.indexOf('%sapper.base%') === -1) {
@@ -54,10 +52,10 @@ async function execute(emitter: EventEmitter, opts: Opts, dirs: Dirs) {

 	const manifest_data = create_manifest_data();

-	// create app/manifest/client.js and app/manifest/server.js
+	// create src/manifest/client.js and src/manifest/server.js
 	create_main_manifests({ bundler: opts.bundler, manifest_data });

-	const { client, server, serviceworker } = create_compilers(opts.bundler, dirs);
+	const { client, server, serviceworker } = await create_compilers(opts.bundler);

 	const client_result = await client.compile();
 	emitter.emit('build', <events.BuildEvent>{
@@ -70,7 +68,7 @@ async function execute(emitter: EventEmitter, opts: Opts, dirs: Dirs) {

 	if (opts.legacy) {
 		process.env.SAPPER_LEGACY_BUILD = 'true';
-		const { client } = create_compilers(opts.bundler, dirs);
+		const { client } = await create_compilers(opts.bundler);

 		const client_result = await client.compile();

@@ -80,6 +78,7 @@ async function execute(emitter: EventEmitter, opts: Opts, dirs: Dirs) {
 			result: client_result
 		});

+		client_result.to_json(manifest_data, dirs);
 		build_info.legacy_assets = client_result.assets;
 		delete process.env.SAPPER_LEGACY_BUILD;
 	}
--- a/src/api/dev.ts
+++ b/src/api/dev.ts
@@ -15,6 +15,7 @@ import * as events from './interfaces';
 import validate_bundler from '../cli/utils/validate_bundler';
 import { copy_shimport } from './utils/copy_shimport';
 import { ManifestData } from '../interfaces';
+import read_template from '../core/read_template';

 export function dev(opts) {
 	return new Watcher(opts);
@@ -23,7 +24,7 @@ export function dev(opts) {
 class Watcher extends EventEmitter {
 	bundler: string;
 	dirs: {
-		app: string;
+		src: string;
 		dest: string;
 		routes: string;
 		rollup: string;
@@ -36,6 +37,8 @@ class Watcher extends EventEmitter {
 	live: boolean;
 	hot: boolean;

+	devtools_port: number;
+
 	dev_server: DevServer;
 	proc: child_process.ChildProcess;
 	filewatchers: Array<{ close: () => void }>;
@@ -51,23 +54,25 @@ class Watcher extends EventEmitter {
 	}

 	constructor({
-		app = locations.app(),
+		src = locations.src(),
 		dest = locations.dest(),
 		routes = locations.routes(),
 		'dev-port': dev_port,
 		live,
 		hot,
+		'devtools-port': devtools_port,
 		bundler,
 		webpack = 'webpack',
 		rollup = 'rollup',
 		port = +process.env.PORT
 	}: {
-		app: string,
+		src: string,
 		dest: string,
 		routes: string,
 		'dev-port': number,
 		live: boolean,
 		hot: boolean,
+		'devtools-port': number,
 		bundler?: string,
 		webpack: string,
 		rollup: string,
@@ -76,7 +81,7 @@ class Watcher extends EventEmitter {
 		super();

 		this.bundler = validate_bundler(bundler);
-		this.dirs = { app, dest, routes, webpack, rollup };
+		this.dirs = { src, dest, routes, webpack, rollup };
 		this.port = port;
 		this.closed = false;

@@ -84,6 +89,8 @@ class Watcher extends EventEmitter {
 		this.live = live;
 		this.hot = hot;

+		this.devtools_port = devtools_port;
+
 		this.filewatchers = [];

 		this.current_build = {
@@ -94,7 +101,7 @@ class Watcher extends EventEmitter {
 		};

 		// remove this in a future version
-		const template = fs.readFileSync(path.join(app, 'template.html'), 'utf-8');
+		const template = read_template();
 		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`;
@@ -129,6 +136,9 @@ class Watcher extends EventEmitter {

 		if (!this.dev_port) this.dev_port = await ports.find(10000);

+		// Chrome looks for debugging targets on ports 9222 and 9229 by default
+		if (!this.devtools_port) this.devtools_port = await ports.find(9222);
+
 		let manifest_data: ManifestData;

 		try {
@@ -166,7 +176,7 @@ class Watcher extends EventEmitter {
 				}
 			),

-			fs.watch(`${locations.app()}/template.html`, () => {
+			fs.watch(`${locations.src()}/template.html`, () => {
 				this.dev_server.send({
 					action: 'reload'
 				});
@@ -176,7 +186,7 @@ class Watcher extends EventEmitter {
 		let deferred = new Deferred();

 		// TODO watch the configs themselves?
-		const compilers: Compilers = create_compilers(this.bundler, this.dirs);
+		const compilers: Compilers = await create_compilers(this.bundler, this.dirs);

 		let log = '';

@@ -238,12 +248,21 @@ class Watcher extends EventEmitter {
 						restart();
 					}

-					this.proc = child_process.fork(`${dest}/server.js`, [], {
+					// we need to give the child process its own DevTools port,
+					// otherwise Node will try to use the parent's (and fail)
+					const debugArgRegex = /--inspect(?:-brk|-port)?|--debug-port/;
+					const execArgv = process.execArgv.slice();
+					if (execArgv.some((arg: string) => !!arg.match(debugArgRegex))) {
+						execArgv.push(`--inspect-port=${this.devtools_port}`);
+					}
+
+					this.proc = child_process.fork(`${dest}/server/server.js`, [], {
 						cwd: process.cwd(),
 						env: Object.assign({
 							PORT: this.port
 						}, process.env),
-						stdio: ['ipc']
+						stdio: ['ipc'],
+						execArgv
 					});

 					this.proc.stdout.on('data', chunk => {
--- a/src/api/export.ts
+++ b/src/api/export.ts
@@ -13,6 +13,7 @@ import * as events from './interfaces';
 type Opts = {
 	build: string,
 	dest: string,
+	static: string,
 	basepath?: string,
 	timeout: number | false
 };
@@ -46,7 +47,7 @@ async function execute(emitter: EventEmitter, opts: Opts) {
 	// Prep output directory
 	sander.rimrafSync(export_dir);

-	sander.copydirSync('assets').to(export_dir);
+	sander.copydirSync(opts.static).to(export_dir);
 	sander.copydirSync(opts.build, 'client').to(export_dir, 'client');

 	if (sander.existsSync(opts.build, 'service-worker.js')) {
@@ -70,7 +71,7 @@ async function execute(emitter: EventEmitter, opts: Opts) {
 		message: `Crawling ${root.href}`
 	});

-	const proc = child_process.fork(path.resolve(`${opts.build}/server.js`), [], {
+	const proc = child_process.fork(path.resolve(`${opts.build}/server/server.js`), [], {
 		cwd: process.cwd(),
 		env: Object.assign({
 			PORT: port,
--- a/src/api/interfaces.ts
+++ b/src/api/interfaces.ts
@@ -1,5 +1,5 @@
 import * as child_process from 'child_process';
-import { CompileResult } from '../core/create_compilers';
+import { CompileResult } from '../core/create_compilers/interfaces';

 export type ReadyEvent = {
 	port: number;
--- a/src/cli.ts
+++ b/src/cli.ts
@@ -33,7 +33,7 @@ prog.command('build [dest]')
 	.option('--bundler', 'Specify a bundler (rollup or webpack, blank for auto)')
 	.option('--legacy', 'Create separate legacy build')
 	.example(`build custom-dir -p 4567`)
-	.action(async (dest = 'build', opts: {
+	.action(async (dest = '__sapper__/build', opts: {
 		port: string,
 		legacy: boolean,
 		bundler?: string
@@ -58,7 +58,7 @@ prog.command('build [dest]')
 				process.env.PORT = process.env.PORT || ${opts.port || 3000};

 				console.log('Starting server on port ' + process.env.PORT);
-				require('./server.js');
+				require('./server/server.js');
 			`.replace(/^\t+/gm, '').trim());

 			console.error(`\n> Finished in ${elapsed(start)}. Type ${colors.bold.cyan(`node ${dest}`)} to run the app.`);
@@ -80,12 +80,12 @@ prog.command('start [dir]')
 prog.command('export [dest]')
 	.describe('Export your app as static files (if possible)')
 	.option('--build', '(Re)build app before exporting', true)
-	.option('--build-dir', 'Specify a custom temporary build directory', '.sapper/prod')
+	.option('--build-dir', 'Specify a custom temporary build directory', '__sapper__/build')
 	.option('--basepath', 'Specify a base path')
 	.option('--timeout', 'Milliseconds to wait for a page (--no-timeout to disable)', 5000)
 	.option('--legacy', 'Create separate legacy build')
 	.option('--bundler', 'Specify a bundler (rollup or webpack, blank for auto)')
-	.action(async (dest = 'export', opts: {
+	.action(async (dest = '__sapper__/export', opts: {
 		build: boolean,
 		legacy: boolean,
 		bundler?: string,
--- a/src/cli/build.ts
+++ b/src/cli/build.ts
@@ -18,7 +18,7 @@ export function build(opts: { bundler?: string, legacy?: boolean }) {
 				bundler
 			}, {
 				dest: locations.dest(),
-				app: locations.app(),
+				src: locations.src(),
 				routes: locations.routes(),
 				webpack: 'webpack',
 				rollup: 'rollup'
--- a/src/cli/export.ts
+++ b/src/cli/export.ts
@@ -15,6 +15,7 @@ export function exporter(export_dir: string, {
 		try {
 			const emitter = _exporter({
 				build: locations.dest(),
+				static: locations.static(),
 				dest: export_dir,
 				basepath,
 				timeout
--- a/src/cli/utils/validate_bundler.ts
+++ b/src/cli/utils/validate_bundler.ts
@@ -1,15 +1,19 @@
 import * as fs from 'fs';

-export default function validate_bundler(bundler?: string) {
+export default function validate_bundler(bundler?: 'rollup' | 'webpack') {
 	if (!bundler) {
 		bundler = (
-			fs.existsSync('rollup') ? 'rollup' :
-			fs.existsSync('webpack') ? 'webpack' :
+			fs.existsSync('rollup.config.js') ? 'rollup' :
+			fs.existsSync('webpack.config.js') ? 'webpack' :
 			null
 		);

 		if (!bundler) {
-			throw new Error(`Could not find a 'rollup' or 'webpack' directory`);
+			// TODO remove in a future version
+			deprecate_dir('rollup');
+			deprecate_dir('webpack');
+
+			throw new Error(`Could not find rollup.config.js or webpack.config.js`);
 		}
 	}

@@ -18,4 +22,17 @@ export default function validate_bundler(bundler?: string) {
 	}

 	return bundler;
+}
+
+function deprecate_dir(bundler: 'rollup' | 'webpack') {
+	try {
+		const stats = fs.statSync(bundler);
+		if (!stats.isDirectory()) return;
+	} catch (err) {
+		// do nothing
+		return;
+	}
+
+	// TODO link to docs, once those docs exist
+	throw new Error(`As of Sapper 0.21, build configuration should be placed in a single ${bundler}.config.js file`);
 }
--- a/src/config.ts
+++ b/src/config.ts
@@ -4,7 +4,8 @@ export const dev = () => process.env.NODE_ENV !== 'production';

 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/${dev() ? 'dev' : 'prod'}`)
+	src:    () => path.resolve(process.env.SAPPER_BASE || '', process.env.SAPPER_SRC    || 'src'),
+	static: () => path.resolve(process.env.SAPPER_BASE || '', process.env.SAPPER_STATIC || 'static'),
+	routes: () => path.resolve(process.env.SAPPER_BASE || '', process.env.SAPPER_ROUTES || 'src/routes'),
+	dest:   () => path.resolve(process.env.SAPPER_BASE || '', process.env.SAPPER_DEST   || `__sapper__/${dev() ? 'dev' : 'build'}`)
 };
--- a/src/core/create_compilers/RollupCompiler.ts
+++ b/src/core/create_compilers/RollupCompiler.ts
@@ -15,8 +15,8 @@ export default class RollupCompiler {
 	chunks: any[];
 	css_files: Array<{ id: string, code: string }>;

-	constructor(config: string) {
-		this._ = this.get_config(path.resolve(config));
+	constructor(config: any) {
+		this._ = this.get_config(config);
 		this.input = null;
 		this.warnings = [];
 		this.errors = [];
@@ -24,31 +24,8 @@ export default class RollupCompiler {
 		this.css_files = [];
 	}

-	async get_config(input: string) {
-		if (!rollup) rollup = relative('rollup', process.cwd());
-
-		const bundle = await rollup.rollup({
-			input,
-			external: (id: string) => {
-				return (id[0] !== '.' && !path.isAbsolute(id)) || id.slice(-5, id.length) === '.json';
-			}
-		});
-
-		const { code } = await bundle.generate({ format: 'cjs' });
-
-		// temporarily override require
-		const defaultLoader = require.extensions['.js'];
-		require.extensions['.js'] = (module: any, filename: string) => {
-			if (filename === input) {
-				module._compile(code, filename);
-			} else {
-				defaultLoader(module, filename);
-			}
-		};
-
-		const mod: any = require(input);
-		delete require.cache[input];
-
+	async get_config(mod: any) {
+		// TODO this is hacky, and doesn't need to apply to all three compilers
 		(mod.plugins || (mod.plugins = [])).push({
 			name: 'sapper-internal',
 			options: (opts: any) => {
@@ -157,4 +134,34 @@ export default class RollupCompiler {
 			}
 		});
 	}
+
+	static async load_config() {
+		if (!rollup) rollup = relative('rollup', process.cwd());
+
+		const input = path.resolve('rollup.config.js');
+
+		const bundle = await rollup.rollup({
+			input,
+			external: (id: string) => {
+				return (id[0] !== '.' && !path.isAbsolute(id)) || id.slice(-5, id.length) === '.json';
+			}
+		});
+
+		const { code } = await bundle.generate({ format: 'cjs' });
+
+		// temporarily override require
+		const defaultLoader = require.extensions['.js'];
+		require.extensions['.js'] = (module: any, filename: string) => {
+			if (filename === input) {
+				module._compile(code, filename);
+			} else {
+				defaultLoader(module, filename);
+			}
+		};
+
+		const config: any = require(input);
+		delete require.cache[input];
+
+		return config;
+	}
 }
--- a/src/core/create_compilers/RollupResult.ts
+++ b/src/core/create_compilers/RollupResult.ts
@@ -38,11 +38,18 @@ export default class RollupResult implements CompileResult {
 		// webpack, but we can have a route -> [chunk] map or something
 		this.assets = {};

-		compiler.chunks.forEach(chunk => {
-			if (compiler.input in chunk.modules) {
-				this.assets.main = chunk.fileName;
+		if (typeof compiler.input === 'string') {
+			compiler.chunks.forEach(chunk => {
+				if (compiler.input in chunk.modules) {
+					this.assets.main = chunk.fileName;
+				}
+			});
+		} else {
+			for (const name in compiler.input) {
+				const file = compiler.input[name];
+				this.assets[name] = compiler.chunks.find(chunk => file in chunk.modules).fileName;
 			}
-		});
+		}

 		this.summary = compiler.chunks.map(chunk => {
 			const size_color = chunk.code.length > 150000 ? colors.bold.red : chunk.code.length > 50000 ? colors.bold.yellow : colors.bold.white;
--- a/src/core/create_compilers/WebpackCompiler.ts
+++ b/src/core/create_compilers/WebpackCompiler.ts
@@ -1,4 +1,3 @@
-import * as path from 'path';
 import relative from 'require-relative';
 import { CompileResult } from './interfaces';
 import WebpackResult from './WebpackResult';
@@ -8,9 +7,9 @@ let webpack: any;
 export class WebpackCompiler {
 	_: any;

-	constructor(config: string) {
+	constructor(config: any) {
 		if (!webpack) webpack = relative('webpack', process.cwd());
-		this._ = webpack(require(path.resolve(config)));
+		this._ = webpack(config);
 	}

 	oninvalid(cb: (filename: string) => void) {
--- a/src/core/create_compilers/extract_css.ts
+++ b/src/core/create_compilers/extract_css.ts
@@ -4,6 +4,7 @@ import hash from 'string-hash';
 import * as codec from 'sourcemap-codec';
 import { PageComponent, Dirs } from '../../interfaces';
 import { CompileResult } from './interfaces';
+import { posixify } from '../utils'

 const inline_sourcemap_header = 'data:application/json;charset=utf-8;base64,';

@@ -75,7 +76,7 @@ export default function extract_css(client_result: CompileResult, components: Pa
 	const component_owners = new Map();
 	client_result.chunks.forEach(chunk => {
 		chunk.modules.forEach(module => {
-			const component = path.relative(dirs.routes, module);
+			const component = posixify(path.relative(dirs.routes, module));
 			component_owners.set(component, chunk);
 		});
 	});
@@ -169,8 +170,8 @@ export default function extract_css(client_result: CompileResult, components: Pa
 		return null;
 	}

-	const main = client_result.assets.main;
-	const entry = fs.readFileSync(`${dirs.dest}/client/${main}`, 'utf-8');
+	let asset_dir = `${dirs.dest}/client`;
+	if (process.env.SAPPER_LEGACY_BUILD) asset_dir += '/legacy';

 	const replacements = new Map();

@@ -184,10 +185,10 @@ export default function extract_css(client_result: CompileResult, components: Pa
 				const output_file_name = chunk.file.replace(/\.js$/, '.css');

 				map.file = output_file_name;
-				map.sources = map.sources.map(source => path.relative(`${dirs.dest}/client`, source));
+				map.sources = map.sources.map(source => path.relative(`${asset_dir}`, source));

-				fs.writeFileSync(`${dirs.dest}/client/${output_file_name}`, `${code}\n/* sourceMappingURL=client/${output_file_name}.map */`);
-				fs.writeFileSync(`${dirs.dest}/client/${output_file_name}.map`, JSON.stringify(map, null, '  '));
+				fs.writeFileSync(`${asset_dir}/${output_file_name}`, `${code}\n/* sourceMappingURL=./${output_file_name}.map */`);
+				fs.writeFileSync(`${asset_dir}/${output_file_name}.map`, JSON.stringify(map, null, '  '));

 				return true;
 			}
@@ -203,11 +204,17 @@ export default function extract_css(client_result: CompileResult, components: Pa
 		result.chunks[component.file] = files;
 	});

-	const replaced = entry.replace(/["']__SAPPER_CSS_PLACEHOLDER:(.+?)__["']/g, (m, route) => {
-		return JSON.stringify(replacements.get(route));
-	});
+	fs.readdirSync(asset_dir).forEach(file => {
+		if (fs.statSync(`${asset_dir}/${file}`).isDirectory()) return;

-	fs.writeFileSync(`${dirs.dest}/client/${main}`, replaced);
+		const source = fs.readFileSync(`${asset_dir}/${file}`, 'utf-8');
+
+		const replaced = source.replace(/["']__SAPPER_CSS_PLACEHOLDER:(.+?)__["']/g, (m, route) => {
+			return JSON.stringify(replacements.get(route));
+		});
+
+		fs.writeFileSync(`${asset_dir}/${file}`, replaced);
+	});

 	const leftover = get_css_from_modules(Array.from(unaccounted_for));
 	if (leftover) {
@@ -218,10 +225,10 @@ export default function extract_css(client_result: CompileResult, components: Pa
 		const output_file_name = `main.${main_hash}.css`;

 		map.file = output_file_name;
-		map.sources = map.sources.map(source => path.relative(`${dirs.dest}/client`, source));
+		map.sources = map.sources.map(source => path.relative(asset_dir, source));

-		fs.writeFileSync(`${dirs.dest}/client/${output_file_name}`, `${code}\n/* sourceMappingURL=client/${output_file_name}.map */`);
-		fs.writeFileSync(`${dirs.dest}/client/${output_file_name}.map`, JSON.stringify(map, null, '  '));
+		fs.writeFileSync(`${asset_dir}/${output_file_name}`, `${code}\n/* sourceMappingURL=client/${output_file_name}.map */`);
+		fs.writeFileSync(`${asset_dir}/${output_file_name}.map`, JSON.stringify(map, null, '  '));

 		result.main = output_file_name;
 	}
--- a/src/core/create_compilers/index.ts
+++ b/src/core/create_compilers/index.ts
@@ -1,5 +1,4 @@
-import * as fs from 'fs';
-import { Dirs } from '../../interfaces';
+import * as path from 'path';
 import RollupCompiler from './RollupCompiler';
 import { WebpackCompiler } from './WebpackCompiler';

@@ -11,27 +10,52 @@ export type Compilers = {
 	serviceworker?: Compiler;
 }

-export default function create_compilers(bundler: string, dirs: Dirs): Compilers {
+export default async function create_compilers(bundler: 'rollup' | 'webpack'): Promise<Compilers> {
 	if (bundler === 'rollup') {
-		const sw = `${dirs.rollup}/service-worker.config.js`;
+		const config = await RollupCompiler.load_config();
+		validate_config(config, 'rollup');
+
+		normalize_rollup_config(config.client);
+		normalize_rollup_config(config.server);
+
+		if (config.serviceworker) {
+			normalize_rollup_config(config.serviceworker);
+		}

 		return {
-			client: new RollupCompiler(`${dirs.rollup}/client.config.js`),
-			server: new RollupCompiler(`${dirs.rollup}/server.config.js`),
-			serviceworker: fs.existsSync(sw) && new RollupCompiler(sw)
+			client: new RollupCompiler(config.client),
+			server: new RollupCompiler(config.server),
+			serviceworker: config.serviceworker && new RollupCompiler(config.serviceworker)
 		};
 	}

 	if (bundler === 'webpack') {
-		const sw = `${dirs.webpack}/service-worker.config.js`;
+		const config = require(path.resolve('webpack.config.js'));
+		validate_config(config, 'webpack');

 		return {
-			client: new WebpackCompiler(`${dirs.webpack}/client.config.js`),
-			server: new WebpackCompiler(`${dirs.webpack}/server.config.js`),
-			serviceworker: fs.existsSync(sw) && new WebpackCompiler(sw)
+			client: new WebpackCompiler(config.client),
+			server: new WebpackCompiler(config.server),
+			serviceworker: config.serviceworker && new WebpackCompiler(config.serviceworker)
 		};
 	}

 	// this shouldn't be possible...
 	throw new Error(`Invalid bundler option '${bundler}'`);
-}
+}
+
+function validate_config(config: any, bundler: 'rollup' | 'webpack') {
+	if (!config.client || !config.server) {
+		throw new Error(`${bundler}.config.js must export a { client, server, serviceworker? } object`);
+	}
+}
+
+function normalize_rollup_config(config: any) {
+	if (typeof config.input === 'string') {
+		config.input = path.normalize(config.input);
+	} else {
+		for (const name in config.input) {
+			config.input[name] = path.normalize(config.input[name]);
+		}
+	}
+}
--- a/src/core/create_manifest_data.ts
+++ b/src/core/create_manifest_data.ts
@@ -5,6 +5,11 @@ import { Page, PageComponent, ServerRoute, ManifestData } from '../interfaces';
 import { posixify, reserved_words } from './utils';

 export default function create_manifest_data(cwd = locations.routes()): ManifestData {
+	// TODO remove in a future version
+	if (!fs.existsSync(cwd)) {
+		throw new Error(`As of Sapper 0.21, the routes/ directory should become src/routes/`);
+	}
+
 	const components: PageComponent[] = [];
 	const pages: Page[] = [];
 	const server_routes: ServerRoute[] = [];
--- a/src/core/create_manifests.ts
+++ b/src/core/create_manifests.ts
@@ -1,7 +1,7 @@
 import * as fs from 'fs';
 import * as path from 'path';
 import glob from 'tiny-glob/sync.js';
-import { posixify, write_if_changed } from './utils';
+import { posixify, stringify, write_if_changed } from './utils';
 import { dev, locations } from '../config';
 import { Page, PageComponent, ServerRoute, ManifestData } from '../interfaces';

@@ -10,7 +10,7 @@ export function create_main_manifests({ bundler, manifest_data, dev_port }: {
 	manifest_data: ManifestData;
 	dev_port?: number;
 }) {
-	const manifest_dir = path.join(locations.app(), 'manifest');
+	const manifest_dir = '__sapper__';
 	if (!fs.existsSync(manifest_dir)) fs.mkdirSync(manifest_dir);

 	const path_to_routes = path.relative(manifest_dir, locations.routes());
@@ -30,20 +30,32 @@ export function create_serviceworker_manifest({ manifest_data, client_files }: {
 	manifest_data: ManifestData;
 	client_files: string[];
 }) {
-	const assets = glob('**', { cwd: 'assets', filesOnly: true });
+	let files;
+
+	// TODO remove in a future version
+	if (fs.existsSync(locations.static())) {
+		files = glob('**', { cwd: locations.static(), filesOnly: true });
+	} else {
+		if (fs.existsSync('assets')) {
+			throw new Error(`As of Sapper 0.21, the assets/ directory should become static/`);
+		}
+
+		files = [];
+	}

 	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 files = [\n\t${files.map((x: string) => stringify(x)).join(',\n\t')}\n];
+		export { files as assets }; // legacy

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

 		export const routes = [\n\t${manifest_data.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);
+	write_if_changed(`__sapper__/service-worker.js`, code);
 }

 function generate_client(
@@ -52,92 +64,102 @@ function generate_client(
 	bundler: string,
 	dev_port?: number
 ) {
+	const template_file = path.resolve(__dirname, '../templates/client.js');
+	const template = fs.readFileSync(template_file, 'utf-8');
+
 	const page_ids = new Set(manifest_data.pages.map(page =>
 		page.pattern.toString()));

 	const server_routes_to_ignore = manifest_data.server_routes.filter(route =>
 		!page_ids.has(route.pattern.toString()));

-	let code = `
-		// This file is generated by Sapper — do not edit it!
-		import root from '${get_file(path_to_routes, manifest_data.root)}';
-		import error from '${posixify(`${path_to_routes}/_error.html`)}';
+	const component_indexes: Record<string, number> = {};

-		const d = decodeURIComponent;
-
-		${manifest_data.components.map(component => {
+	const components = `[
+		${manifest_data.components.map((component, i) => {
 			const annotation = bundler === 'webpack'
 				? `/* webpackChunkName: "${component.name}" */ `
 				: '';

 			const source = get_file(path_to_routes, component);

-			return `const ${component.name} = {
-			js: () => import(${annotation}'${source}'),
-			css: "__SAPPER_CSS_PLACEHOLDER:${component.file}__"
-		};`;
-		}).join('\n')}
+			component_indexes[component.name] = i;

-		export const manifest = {
-			ignore: [${server_routes_to_ignore.map(route => route.pattern).join(', ')}],
+			return `{
+			js: () => import(${annotation}${stringify(source)}),
+			css: "__SAPPER_CSS_PLACEHOLDER:${stringify(component.file, false)}__"
+		}`;
+		}).join(',\n\t\t')}
+	]`.replace(/^\t/gm, '').trim();

-			pages: [
-				${manifest_data.pages.map(page => `{
-					// ${page.parts[page.parts.length - 1].component.file}
-					pattern: ${page.pattern},
-					parts: [
-						${page.parts.map(part => {
-							if (part === null) return 'null';
+	let needs_decode = false;

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

-							return `{ component: ${part.component.name} }`;
-						}).join(',\n\t\t\t\t\t\t')}
-					]
-				}`).join(',\n\n\t\t\t\t')}
-			],
+					if (part.params.length > 0) {
+						needs_decode = true;
+						const props = part.params.map((param, i) => `${param}: d(match[${i + 1}])`);
+						return `{ i: ${component_indexes[part.component.name]}, params: match => ({ ${props.join(', ')} }) }`;
+					}

-			root,
+					return `{ i: ${component_indexes[part.component.name]} }`;
+				}).join(',\n\t\t\t\t')}
+			]
+		}`).join(',\n\n\t\t')}
+	]`.replace(/^\t/gm, '').trim();

-			error
-		};
+	if (needs_decode) {
+		pages = `(d => ${pages})(decodeURIComponent)`
+	}

-		// this is included for legacy reasons
-		export const routes = {};`.replace(/^\t\t/gm, '').trim();
+	let footer = '';

 	if (dev()) {
 		const sapper_dev_client = posixify(
 			path.resolve(__dirname, '../sapper-dev-client.js')
 		);

-		code += `
+		footer = `

-			import('${sapper_dev_client}').then(client => {
-				client.connect(${dev_port});
-			});`.replace(/^\t{3}/gm, '');
+			if (typeof window !== 'undefined') {
+				import(${stringify(sapper_dev_client)}).then(client => {
+					client.connect(${dev_port});
+				});
+			}`.replace(/^\t{3}/gm, '');
 	}

-	return code;
+	return `// This file is generated by Sapper — do not edit it!\n` + template
+		.replace('__ROOT__', stringify(get_file(path_to_routes, manifest_data.root), false))
+		.replace('__ERROR__', stringify(posixify(`${path_to_routes}/_error.html`), false))
+		.replace('__IGNORE__', `[${server_routes_to_ignore.map(route => route.pattern).join(', ')}]`)
+		.replace('__COMPONENTS__', components)
+		.replace('__PAGES__', pages) +
+		footer;
 }

 function generate_server(
 	manifest_data: ManifestData,
 	path_to_routes: string
 ) {
+	const template_file = path.resolve(__dirname, '../templates/server.js');
+	const template = fs.readFileSync(template_file, 'utf-8');
+
 	const imports = [].concat(
 		manifest_data.server_routes.map(route =>
-			`import * as ${route.name} from '${posixify(`${path_to_routes}/${route.file}`)}';`),
+			`import * as __${route.name} from ${stringify(posixify(`${path_to_routes}/${route.file}`))};`),
 		manifest_data.components.map(component =>
-			`import ${component.name} from '${get_file(path_to_routes, component)}';`),
-		`import root from '${get_file(path_to_routes, manifest_data.root)}';`,
-		`import error from '${posixify(`${path_to_routes}/_error.html`)}';`
+			`import __${component.name} from ${stringify(get_file(path_to_routes, component))};`),
+		`import root from ${stringify(get_file(path_to_routes, manifest_data.root))};`,
+		`import error from ${stringify(posixify(`${path_to_routes}/_error.html`))};`
 	);

 	let code = `
-		// This file is generated by Sapper — do not edit it!
 		${imports.join('\n')}

 		const d = decodeURIComponent;
@@ -147,7 +169,7 @@ function generate_server(
 				${manifest_data.server_routes.map(route => `{
 					// ${route.file}
 					pattern: ${route.pattern},
-					handlers: ${route.name},
+					handlers: __${route.name},
 					params: ${route.params.length > 0
 						? `match => ({ ${route.params.map((param, i) => `${param}: d(match[${i + 1}])`).join(', ')} })`
 						: `() => ({})`}
@@ -164,8 +186,8 @@ function generate_server(

 							const props = [
 								`name: "${part.component.name}"`,
-								`file: "${part.component.file}"`,
-								`component: ${part.component.name}`
+								`file: ${stringify(part.component.file)}`,
+								`component: __${part.component.name}`
 							];

 							if (part.params.length > 0) {
@@ -182,12 +204,16 @@ function generate_server(
 			root,

 			error
-		};
+		};`.replace(/^\t\t/gm, '').trim();

-		// this is included for legacy reasons
-		export const routes = {};`.replace(/^\t\t/gm, '').trim();
+	const build_dir = path.relative(process.cwd(), locations.dest());
+	const src_dir = path.relative(process.cwd(), locations.src());

-	return code;
+	return `// This file is generated by Sapper — do not edit it!\n` + template
+		.replace('__BUILD__DIR__', JSON.stringify(build_dir))
+		.replace('__SRC__DIR__', JSON.stringify(src_dir))
+		.replace('__DEV__', dev() ? 'true' : 'false')
+		.replace(/const manifest = __MANIFEST__;/, code);
 }

 function get_file(path_to_routes: string, component: PageComponent) {
--- a/src/core/read_template.ts
+++ b/src/core/read_template.ts
@@ -0,0 +1,17 @@
+import * as fs from 'fs';
+import { locations } from '../config';
+
+export default function read_template(dir = locations.src()) {
+	try {
+		return fs.readFileSync(`${dir}/template.html`, 'utf-8');
+	} catch (err) {
+		if (fs.existsSync(`app/template.html`)) {
+			throw new Error(`As of Sapper 0.21, the default folder structure has been changed:
+  app/    --> src/
+  routes/ --> src/routes/
+  assets/ --> static/`);
+		}
+
+		throw err;
+	}
+}
--- a/src/core/utils.ts
+++ b/src/core/utils.ts
@@ -14,6 +14,11 @@ export function posixify(file: string) {
 	return file.replace(/[/\\]/g, '/');
 }

+export function stringify(string: string, includeQuotes: boolean = true) {
+	const quoted = JSON.stringify(string);
+	return includeQuotes ? quoted : quoted.slice(1, -1);
+}
+
 export function fudge_mtime(file: string) {
 	// need to fudge the mtime so that webpack doesn't go doolally
 	const { atime, mtime } = fs.statSync(file);
--- a/src/interfaces.ts
+++ b/src/interfaces.ts
@@ -43,7 +43,7 @@ export type ServerRoute = {

 export type Dirs = {
 	dest: string,
-	app: string,
+	src: string,
 	routes: string,
 	webpack: string,
 	rollup: string
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -1,601 +0,0 @@
-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>
-}
-
-const IGNORE = '__SAPPER__IGNORE__';
-function toIgnore(uri: string, val: any) {
-	if (Array.isArray(val)) return val.some(x => toIgnore(uri, x));
-	if (val instanceof RegExp) return val.test(uri);
-	if (typeof val === 'function') return val(uri);
-	return uri.startsWith(val.charCodeAt(0) === 47 ? val : `/${val}`);
-}
-
-export default function middleware(opts: {
-	manifest: Manifest,
-	store: (req: Req, res: ServerResponse) => Store,
-	ignore?: any,
-	routes?: any // legacy
-}) {
-	if (opts.routes) {
-		throw new Error(`As of Sapper 0.15, opts.routes should be opts.manifest`);
-	}
-
-	const output = locations.dest();
-
-	const { manifest, store, ignore } = opts;
-
-	let emitted_basepath = false;
-
-	const middleware = compose_handlers([
-		ignore && ((req: Req, res: ServerResponse, next: () => void) => {
-			req[IGNORE] = toIgnore(req.path, ignore);
-			next();
-		}),
-
-		(req: Req, res: ServerResponse, next: () => void) => {
-			if (req[IGNORE]) return next();
-
-			if (req.baseUrl === undefined) {
-				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: dev() ? 'no-cache' : '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 (req[IGNORE]) return next();
-
-		if (filter(req)) {
-			const type = lookup(req.path);
-
-			try {
-				const file = decodeURIComponent(req.path.slice(1));
-				const data = read(file);
-
-				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(Buffer.from(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(Buffer.from(chunk));
-					end.apply(res, arguments);
-
-					process.send({
-						__sapper__: true,
-						event: 'file',
-						url: req.url,
-						method: req.method,
-						status: res.statusCode,
-						type: headers['content-type'],
-						body: Buffer.concat(chunks).toString()
-					});
-				};
-			}
-
-			const handle_next = (err?: Error) => {
-				if (err) {
-					res.statusCode = 500;
-					res.end(err.message);
-				} else {
-					process.nextTick(next);
-				}
-			};
-
-			try {
-				handle_method(req, res, handle_next);
-			} catch (err) {
-				handle_next(err);
-			}
-		} else {
-			// no matching handler for method
-			process.nextTick(next);
-		}
-	}
-
-	return function find_route(req: Req, res: ServerResponse, next: () => void) {
-		if (req[IGNORE]) return next();
-
-		for (const route of routes) {
-			if (route.pattern.test(req.path)) {
-				handle_route(route, req, res, next);
-				return;
-			}
-		}
-
-		next();
-	};
-}
-
-function get_page_handler(
-	manifest: Manifest,
-	store_getter: (req: Req, res: ServerResponse) => Store
-) {
-	const output = locations.dest();
-
-	const get_build_info = dev()
-		? () => JSON.parse(fs.readFileSync(path.join(output, 'build.json'), 'utf-8'))
-		: (assets => () => assets)(JSON.parse(fs.readFileSync(path.join(output, 'build.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 || new Error('Unknown error in preload function'));
-	}
-
-	function handle_page(page: Page, req: Req, res: ServerResponse, status = 200, error: Error | string = null) {
-		const build_info: {
-			bundler: 'rollup' | 'webpack',
-			shimport: string | null,
-			assets: Record<string, string | string[]>,
-			legacy_assets?: Record<string, string>
-		 } = get_build_info();
-
-		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(build_info.assets.main) ? build_info.assets.main : [build_info.assets.main];
-		if (!error) {
-			page.parts.forEach(part => {
-				if (!part) return;
-
-				// using concat because it could be a string or an array. thanks webpack!
-				preloaded_chunks = preloaded_chunks.concat(build_info.assets[part.name]);
-			});
-		}
-
-		const link = preloaded_chunks
-			.filter(file => 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, res) : 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`);
-				}
-				location = location.replace(/^\//g, ''); // leading slash (only)
-				redirect = { statusCode, location };
-			},
-			error: (statusCode: number, message: Error | string) => {
-				preload_error = { statusCode, message };
-			},
-			fetch: (url: string, opts?: any) => {
-				const parsed = new URL(url, `http://127.0.0.1:${process.env.PORT}${req.baseUrl ? req.baseUrl + '/' :''}`);
-
-				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) {
-						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: {}
-			})
-			: {};
-
-		const match = error ? null : page.pattern.exec(req.path);
-
-		Promise.all([root_preloaded].concat(page.parts.map(part => {
-			if (!part) return null;
-
-			return part.component.preload
-				? part.component.preload.call(preload_context, {
-					path: req.path,
-					query: req.query,
-					params: part.params ? part.params(match) : {}
-				})
-				: {};
-		}))).catch(err => {
-			preload_error = { statusCode: 500, message: err };
-			return []; // appease TypeScript
-		}).then(preloaded => {
-			if (redirect) {
-				const location = `${req.baseUrl}/${redirect.location}`;
-
-				res.statusCode = redirect.statusCode;
-				res.setHeader('Location', 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: {
-					segment: segments[0]
-				}
-			});
-
-			let level = data.child;
-			for (let i = 0; i < page.parts.length; i += 1) {
-				const part = page.parts[i];
-				if (!part) continue;
-
-				const get_params = part.params || (() => ({}));
-
-				Object.assign(level, {
-					component: part.component,
-					props: Object.assign({}, props, {
-						params: get_params(match)
-					}, preloaded[i + 1])
-				});
-
-				level.props.child = <Props["child"]>{
-					segment: segments[i + 1]
-				};
-				level = level.props.child;
-			}
-
-			const { html, head, css } = manifest.root.render(data, {
-				store
-			});
-
-			let 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) {
-				script += `if('serviceWorker' in navigator)navigator.serviceWorker.register('${req.baseUrl}/service-worker.js');`;
-			}
-
-			const file = [].concat(build_info.assets.main).filter(file => file && /\.js$/.test(file))[0];
-			const main = `${req.baseUrl}/client/${file}`;
-
-			if (build_info.bundler === 'rollup') {
-				if (build_info.legacy_assets) {
-					const legacy_main = `${req.baseUrl}/client/legacy/${build_info.legacy_assets.main}`;
-					script += `(function(){try{eval("async function x(){}");var main="${main}"}catch(e){main="${legacy_main}"};try{new Function("import('"+main+"')")();}catch(e){var s=document.createElement("script");s.src="${req.baseUrl}/client/shimport@${build_info.shimport}.js";s.setAttribute("data-main",main);document.head.appendChild(s);}}());`;
-				} else {
-					script += `try{new Function("import('${main}')")();}catch(e){var s=document.createElement("script");s.src="${req.baseUrl}/client/shimport@${build_info.shimport}.js";s.setAttribute("data-main","${main}");document.head.appendChild(s);}`;
-				}
-			} else {
-				script += `</script><script src="${main}">`;
-			}
-
-			let styles: string;
-
-			// TODO make this consistent across apps
-			if (build_info.css && build_info.css.main) {
-				const css_chunks = new Set();
-				if (build_info.css.main) css_chunks.add(build_info.css.main);
-				page.parts.forEach(part => {
-					if (!part) return;
-					const css_chunks_for_part = build_info.css.chunks[part.file];
-
-					if (css_chunks_for_part) {
-						css_chunks_for_part.forEach(file => {
-							css_chunks.add(file);
-						});
-					}
-				});
-
-				styles = Array.from(css_chunks)
-					.map(href => `<link rel="stylesheet" href="client/${href}">`)
-					.join('')
-			} else {
-				styles = (css && css.code ? `<style>${css.code}</style>` : '');
-			}
-
-			const body = template()
-				.replace('%sapper.base%', () => `<base href="${req.baseUrl}/">`)
-				.replace('%sapper.scripts%', () => `<script>${script}</script>`)
-				.replace('%sapper.html%', () => html)
-				.replace('%sapper.head%', () => `<noscript id='sapper-head-start'></noscript>${head}<noscript id='sapper-head-end'></noscript>`)
-				.replace('%sapper.styles%', () => styles);
-
-			res.statusCode = status;
-			res.end(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, next: () => void) {
-		if (req[IGNORE]) return next();
-
-		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/rollup.ts
+++ b/src/rollup.ts
@@ -5,7 +5,7 @@ export default {

 	client: {
 		input: () => {
-			return `${locations.app()}/client.js`
+			return `${locations.src()}/client.js`
 		},

 		output: () => {
@@ -24,12 +24,14 @@ export default {

 	server: {
 		input: () => {
-			return `${locations.app()}/server.js`
+			return {
+				server: `${locations.src()}/server.js`
+			};
 		},

 		output: () => {
 			return {
-				dir: locations.dest(),
+				dir: `${locations.dest()}/server`,
 				format: 'cjs',
 				sourcemap: dev()
 			};
@@ -38,7 +40,7 @@ export default {

 	serviceworker: {
 		input: () => {
-			return `${locations.app()}/service-worker.js`;
+			return `${locations.src()}/service-worker.js`;
 		},

 		output: () => {
--- a/src/runtime/index.ts
+++ b/src/runtime/index.ts
@@ -1,504 +0,0 @@
-import { detach, findAnchor, scroll_state, which } from './utils';
-import { Component, ComponentConstructor, Params, Query, Redirect, Manifest, RouteData, ScrollPosition, Store, Target, ComponentLoader } from './interfaces';
-
-const initial_data = typeof window !== 'undefined' && window.__SAPPER__;
-
-export let root: Component;
-let target: Node;
-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) => {},
-	replaceState: (state: any, title: string, href: string) => {},
-	scrollRestoration: ''
-};
-
-const scroll_history: Record<string, ScrollPosition> = {};
-let uid = 1;
-let cid: number;
-
-if ('scrollRestoration' in history) {
-	history.scrollRestoration = 'manual';
-}
-
-function select_route(url: URL): Target {
-	if (url.origin !== window.location.origin) return null;
-	if (!url.pathname.startsWith(initial_data.baseUrl)) return null;
-
-	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) {
-			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 ? decodeURIComponent(value.replace(/\+/g, ' ')) : true;
-				});
-			}
-			return { url, path, page, match, query };
-		}
-	}
-}
-
-let current_token: {};
-
-function render(data: any, nullable_depth: number, scroll: ScrollPosition, token: {}) {
-	if (current_token !== token) return;
-
-	if (root) {
-		// first, clear out highest-level root component
-		let level = data.child;
-		for (let i = 0; i < nullable_depth; i += 1) {
-			if (i === nullable_depth) break;
-			level = level.props.child;
-		}
-
-		const { component } = level;
-		level.component = null;
-		root.set({ child: data.child });
-
-		// then render new stuff
-		level.component = component;
-		root.set(data);
-	} else {
-		// first load — remove SSR'd <head> contents
-		const start = document.querySelector('#sapper-head-start');
-		const end = document.querySelector('#sapper-head-end');
-
-		if (start && end) {
-			while (start.nextSibling !== end) detach(start.nextSibling);
-			detach(start);
-			detach(end);
-		}
-
-		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 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 load_css(chunk: string) {
-	const href = `${initial_data.baseUrl}client/${chunk}`;
-	if (document.querySelector(`link[href="${href}"]`)) return;
-
-	return new Promise((fulfil, reject) => {
-		const link = document.createElement('link');
-		link.rel = 'stylesheet';
-		link.href = href;
-
-		link.onload = () => fulfil();
-		link.onerror = reject;
-
-		document.head.appendChild(link);
-	});
-}
-
-function load_component(component: ComponentLoader): Promise<ComponentConstructor> {
-	// TODO this is temporary — once placeholders are
-	// always rewritten, scratch the ternary
-	const promises: Array<Promise<any>> = (typeof component.css === 'string' ? [] : component.css.map(load_css));
-	promises.unshift(component.js());
-	return Promise.all(promises).then(values => values[0].default);
-}
-
-function prepare_page(target: Target): Promise<{
-	redirect?: Redirect;
-	data?: any;
-	nullable_depth?: number;
-}> {
-	const { page, path, query } = target;
-	const new_segments = path.split('/').filter(Boolean);
-	let changed_from = 0;
-
-	while (
-		segments[changed_from] &&
-		new_segments[changed_from] &&
-		segments[changed_from] === new_segments[changed_from]
-	) changed_from += 1;
-
-	let redirect: Redirect = null;
-	let error: { statusCode: number, message: Error | string } = null;
-
-	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 };
-		}
-	};
-
-	if (!root_preload) {
-		root_preload = manifest.root.preload
-			? initial_data.preloaded[0] || manifest.root.preload.call(preload_context, {
-				path,
-				query,
-				params: {}
-			})
-			: {};
-	}
-
-	return Promise.all(page.parts.map(async (part, i) => {
-		if (i < changed_from) return null;
-		if (!part) return null;
-
-		const Component = await load_component(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 };
-		}
-
-		segments = new_segments;
-
-		const get_params = page.parts[page.parts.length - 1].params || (() => ({}));
-		const params = get_params(target.match);
-
-		if (error) {
-			const props = {
-				path,
-				query,
-				params,
-				error: typeof error.message === 'string' ? new Error(error.message) : error.message,
-				status: error.statusCode
-			};
-
-			return {
-				data: Object.assign({}, props, {
-					preloading: false,
-					child: {
-						component: manifest.error,
-						props
-					}
-				})
-			};
-		}
-
-		const props = { path, query };
-		const data = {
-			path,
-			preloading: false,
-			child: Object.assign({}, root_props.child, {
-				segment: segments[0]
-			})
-		};
-		if (changed(query, root_props.query)) data.query = query;
-		if (changed(params, root_props.params)) data.params = params;
-
-		let level = data.child;
-		let nullable_depth = 0;
-
-		for (let i = 0; i < page.parts.length; i += 1) {
-			const part = page.parts[i];
-			if (!part) continue;
-
-			const get_params = part.params || (() => ({}));
-
-			if (i < changed_from) {
-				level.props.path = path;
-				level.props.query = query;
-				level.props.child = Object.assign({}, level.props.child);
-
-				nullable_depth += 1;
-			} else {
-				level.component = results[i].Component;
-				level.props = Object.assign({}, level.props, props, {
-					params: get_params(target.match),
-				}, results[i].preloaded);
-
-				level.props.child = {};
-			}
-
-			level = level.props.child;
-			level.segment = segments[i + 1];
-		}
-
-		return { data, nullable_depth };
-	});
-}
-
-async function navigate(target: Target, id: number): Promise<any> {
-	if (id) {
-		// popstate or initial navigation
-		cid = id;
-	} else {
-		// clicked on a link. preserve scroll state
-		scroll_history[cid] = scroll_state();
-
-		id = cid = ++uid;
-		scroll_history[cid] = { x: 0, y: 0 };
-	}
-
-	cid = id;
-
-	if (root) {
-		root.set({ preloading: true });
-	}
-	const loaded = prefetching && prefetching.href === target.url.href ?
-		prefetching.promise :
-		prepare_page(target);
-
-	prefetching = null;
-
-	const token = current_token = {};
-	const { redirect, data, nullable_depth } = await loaded;
-
-	if (redirect) {
-		await goto(redirect.location, { replaceState: true });
-	} else {
-		render(data, nullable_depth, scroll_history[id], token);
-		if (document.activeElement) document.activeElement.blur();
-	}
-}
-
-function handle_click(event: MouseEvent) {
-	// Adapted from https://github.com/visionmedia/page.js
-	// MIT license https://github.com/visionmedia/page.js#license
-	if (which(event) !== 1) return;
-	if (event.metaKey || event.ctrlKey || event.shiftKey) return;
-	if (event.defaultPrevented) return;
-
-	const a: HTMLAnchorElement | SVGAElement = <HTMLAnchorElement | SVGAElement>findAnchor(<Node>event.target);
-	if (!a) return;
-
-	if (!a.href) return;
-
-	// check if link is inside an svg
-	// in this case, both href and target are always inside an object
-	const svg = typeof a.href === 'object' && a.href.constructor.name === 'SVGAnimatedString';
-	const href = String(svg ? (<SVGAElement>a).href.baseVal : a.href);
-
-	if (href === window.location.href) {
-		event.preventDefault();
-		return;
-	}
-
-	// Ignore if tag has
-	// 1. 'download' attribute
-	// 2. rel='external' attribute
-	if (a.hasAttribute('download') || a.getAttribute('rel') === 'external') return;
-
-	// Ignore if <a> has a target
-	if (svg ? (<SVGAElement>a).target.baseVal : a.target) return;
-
-	const url = new URL(href);
-
-	// Don't handle hash changes
-	if (url.pathname === window.location.pathname && url.search === window.location.search) return;
-
-	const target = select_route(url);
-	if (target) {
-		navigate(target, null);
-		event.preventDefault();
-		history.pushState({ id: cid }, '', url.href);
-	}
-}
-
-function handle_popstate(event: PopStateEvent) {
-	scroll_history[cid] = scroll_state();
-
-	if (event.state) {
-		const url = new URL(window.location.href);
-		const target = select_route(url);
-		if (target) {
-			navigate(target, event.state.id);
-		} else {
-			window.location.href = window.location.href;
-		}
-	} else {
-		// hashchange
-		cid = ++uid;
-		history.replaceState({ id: cid }, '', window.location.href);
-	}
-}
-
-let prefetching: {
-	href: string;
-	promise: Promise<{ redirect?: Redirect, data?: any, nullable_depth?: number }>;
-} = null;
-
-export function prefetch(href: string) {
-	const target: Target = select_route(new URL(href, document.baseURI));
-
-	if (target && (!prefetching || href !== prefetching.href)) {
-		prefetching = {
-			href,
-			promise: prepare_page(target)
-		};
-	}
-}
-
-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;
-
-	prefetch(a.href);
-}
-
-let inited: boolean;
-let ready = false;
-
-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', trigger_prefetch);
-		window.addEventListener('mousemove', handle_mousemove);
-
-		inited = true;
-	}
-
-	return Promise.resolve().then(() => {
-		const { hash, href } = window.location;
-
-		const deep_linked = hash && document.getElementById(hash.slice(1));
-		scroll_history[uid] = deep_linked ?
-			{ x: 0, y: deep_linked.getBoundingClientRect().top } :
-			scroll_state();
-
-		history.replaceState({ id: uid }, '', href);
-
-		if (!initial_data.error) {
-			const target = select_route(new URL(window.location.href));
-			if (target) return navigate(target, uid);
-		}
-	});
-}
-
-export function goto(href: string, opts = { replaceState: false }) {
-	const target = select_route(new URL(href, document.baseURI));
-	let promise;
-
-	if (target) {
-		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 (!manifest) throw new Error(`You must call init() first`);
-
-	return manifest.pages
-		.filter(route => {
-			if (!pathnames) return true;
-			return pathnames.some(pathname => route.pattern.test(pathname));
-		})
-		.reduce((promise: Promise<any>, route) => promise.then(() => {
-			return Promise.all(route.parts.map(part => part && load_component(part.component)));
-		}), Promise.resolve());
-}
-
-// remove this in 0.9
-export { prefetchRoutes as preloadRoutes };
--- a/src/runtime/utils.ts
+++ b/src/runtime/utils.ts
@@ -1,19 +0,0 @@
-export function detach(node: Node) {
-	node.parentNode.removeChild(node);
-}
-
-export function findAnchor(node: Node) {
-	while (node && node.nodeName.toUpperCase() !== 'A') node = node.parentNode; // SVG <a> elements have a lowercase name
-	return node;
-}
-
-export function which(event: MouseEvent) {
-	return event.which === null ? event.button : event.which;
-}
-
-export function scroll_state() {
-	return {
-		x: window.scrollX,
-		y: window.scrollY
-	};
-}
--- a/src/webpack.ts
+++ b/src/webpack.ts
@@ -6,7 +6,7 @@ export default {
 	client: {
 		entry: () => {
 			return {
-				main: `${locations.app()}/client`
+				main: `${locations.src()}/client`
 			};
 		},

@@ -23,13 +23,13 @@ export default {
 	server: {
 		entry: () => {
 			return {
-				server: `${locations.app()}/server`
+				server: `${locations.src()}/server`
 			};
 		},

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

--- a/templates/src/client/app.ts
+++ b/templates/src/client/app.ts
@@ -0,0 +1,374 @@
+import RootComponent from '__ROOT__';
+import ErrorComponent from '__ERROR__';
+import {
+	Target,
+	ScrollPosition,
+	Component,
+	Redirect,
+	ComponentLoader,
+	ComponentConstructor,
+	RootProps,
+	Page
+} from './types';
+import goto from './goto';
+
+const ignore = __IGNORE__;
+export const components: ComponentLoader[] = __COMPONENTS__;
+export const pages: Page[] = __PAGES__;
+
+let ready = false;
+let root_component: Component;
+let segments: string[] = [];
+let current_token: {};
+let root_preload: Promise<any>;
+let root_data: any;
+
+const root_props: RootProps = {
+	path: null,
+	params: null,
+	query: null,
+	child: {
+		segment: null,
+		component: null,
+		props: {}
+	}
+};
+
+export let prefetching: {
+	href: string;
+	promise: Promise<{ redirect?: Redirect, data?: any, nullable_depth?: number }>;
+} = null;
+export function set_prefetching(href, promise) {
+	prefetching = { href, promise };
+}
+
+export let store;
+export function set_store(fn) {
+	store = fn(initial_data.store);
+}
+
+export let target: Node;
+export function set_target(element) {
+	target = element;
+}
+
+export let uid = 1;
+export function set_uid(n) {
+	uid = n;
+}
+
+export let cid: number;
+export function set_cid(n) {
+	cid = n;
+}
+
+export const initial_data = typeof __SAPPER__ !== 'undefined' && __SAPPER__;
+
+const _history = typeof history !== 'undefined' ? history : {
+	pushState: (state: any, title: string, href: string) => {},
+	replaceState: (state: any, title: string, href: string) => {},
+	scrollRestoration: ''
+};
+export { _history as history };
+
+export const scroll_history: Record<string, ScrollPosition> = {};
+
+export function select_route(url: URL): Target {
+	if (url.origin !== location.origin) return null;
+	if (!url.pathname.startsWith(initial_data.baseUrl)) return null;
+
+	const path = url.pathname.slice(initial_data.baseUrl.length);
+
+	// avoid accidental clashes between server routes and pages
+	if (ignore.some(pattern => pattern.test(path))) return;
+
+	for (let i = 0; i < pages.length; i += 1) {
+		const page = pages[i];
+
+		const match = page.pattern.exec(path);
+		if (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] = decodeURIComponent((value || '').replace(/\+/g, ' '));
+				});
+			}
+			return { url, path, page, match, query };
+		}
+	}
+}
+
+export function scroll_state() {
+	return {
+		x: scrollX,
+		y: scrollY
+	};
+}
+
+export function navigate(target: Target, id: number, noscroll = false): Promise<any> {
+	if (id) {
+		// popstate or initial navigation
+		cid = id;
+	} else {
+		const current_scroll = scroll_state();
+
+		// clicked on a link. preserve scroll state
+		scroll_history[cid] = current_scroll;
+
+		id = cid = ++uid;
+		scroll_history[cid] = noscroll ? current_scroll : { x: 0, y: 0 };
+	}
+
+	cid = id;
+
+	if (root_component) {
+		root_component.set({ preloading: true });
+	}
+	const loaded = prefetching && prefetching.href === target.url.href ?
+		prefetching.promise :
+		prepare_page(target);
+
+	prefetching = null;
+
+	const token = current_token = {};
+
+	return loaded.then(({ redirect, data, nullable_depth }) => {
+		if (redirect) {
+			return goto(redirect.location, { replaceState: true });
+		}
+
+		render(data, nullable_depth, scroll_history[id], token);
+		if (document.activeElement) document.activeElement.blur();
+	});
+}
+
+function render(data: any, nullable_depth: number, scroll: ScrollPosition, token: {}) {
+	if (current_token !== token) return;
+
+	if (root_component) {
+		// first, clear out highest-level root component
+		let level = data.child;
+		for (let i = 0; i < nullable_depth; i += 1) {
+			if (i === nullable_depth) break;
+			level = level.props.child;
+		}
+
+		const { component } = level;
+		level.component = null;
+		root_component.set({ child: data.child });
+
+		// then render new stuff
+		level.component = component;
+		root_component.set(data);
+	} else {
+		// first load — remove SSR'd <head> contents
+		const start = document.querySelector('#sapper-head-start');
+		const end = document.querySelector('#sapper-head-end');
+
+		if (start && end) {
+			while (start.nextSibling !== end) detach(start.nextSibling);
+			detach(start);
+			detach(end);
+		}
+
+		Object.assign(data, root_data);
+
+		root_component = new RootComponent({
+			target,
+			data,
+			store,
+			hydrate: true
+		});
+	}
+
+	if (scroll) {
+		scrollTo(scroll.x, scroll.y);
+	}
+
+	Object.assign(root_props, data);
+	ready = true;
+}
+
+export function prepare_page(target: Target): Promise<{
+	redirect?: Redirect;
+	data?: any;
+	nullable_depth?: number;
+}> {
+	const { page, path, query } = target;
+	const new_segments = path.split('/').filter(Boolean);
+	let changed_from = 0;
+
+	while (
+		segments[changed_from] &&
+		new_segments[changed_from] &&
+		segments[changed_from] === new_segments[changed_from]
+	) changed_from += 1;
+
+	let redirect: Redirect = null;
+	let error: { statusCode: number, message: Error | string } = null;
+
+	const preload_context = {
+		store,
+		fetch: (url: string, opts?: any) => 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 };
+		}
+	};
+
+	if (!root_preload) {
+		root_preload = RootComponent.preload
+			? initial_data.preloaded[0] || RootComponent.preload.call(preload_context, {
+				path,
+				query,
+				params: {}
+			})
+			: {};
+	}
+
+	return Promise.all(page.parts.map((part, i) => {
+		if (i < changed_from) return null;
+		if (!part) return null;
+
+		return load_component(components[part.i]).then(Component => {
+			const req = {
+				path,
+				query,
+				params: part.params ? part.params(target.match) : {}
+			};
+
+			let preloaded;
+			if (ready || !initial_data.preloaded[i + 1]) {
+				preloaded = Component.preload
+					? Component.preload.call(preload_context, req)
+					: {};
+			} else {
+				preloaded = initial_data.preloaded[i + 1];
+			}
+
+			return Promise.resolve(preloaded).then(preloaded => {
+				return { Component, preloaded };
+			});
+		});
+	})).catch(err => {
+		error = { statusCode: 500, message: err };
+		return [];
+	}).then(results => {
+		if (root_data) {
+			return results;
+		} else {
+			return Promise.resolve(root_preload).then(value => {
+				root_data = value;
+				return results;
+			});
+		}
+	}).then(results => {
+		if (redirect) {
+			return { 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: ErrorComponent,
+						props
+					}
+				})
+			};
+		}
+
+		const props = { path, query };
+		const data = {
+			path,
+			preloading: false,
+			child: Object.assign({}, root_props.child, {
+				segment: segments[0]
+			})
+		};
+		if (changed(query, root_props.query)) data.query = query;
+		if (changed(params, root_props.params)) data.params = params;
+
+		let level = data.child;
+		let nullable_depth = 0;
+
+		for (let i = 0; i < page.parts.length; i += 1) {
+			const part = page.parts[i];
+			if (!part) continue;
+
+			const get_params = part.params || (() => ({}));
+
+			if (i < changed_from) {
+				level.props.path = path;
+				level.props.query = query;
+				level.props.child = Object.assign({}, level.props.child);
+
+				nullable_depth += 1;
+			} else {
+				level.component = results[i].Component;
+				level.props = Object.assign({}, level.props, props, {
+					params: get_params(target.match),
+				}, results[i].preloaded);
+
+				level.props.child = {};
+			}
+
+			level = level.props.child;
+			level.segment = segments[i + 1];
+		}
+
+		return { data, nullable_depth };
+	});
+}
+
+function load_css(chunk: string) {
+	const href = `client/${chunk}`;
+	if (document.querySelector(`link[href="${href}"]`)) return;
+
+	return new Promise((fulfil, reject) => {
+		const link = document.createElement('link');
+		link.rel = 'stylesheet';
+		link.href = href;
+
+		link.onload = () => fulfil();
+		link.onerror = reject;
+
+		document.head.appendChild(link);
+	});
+}
+
+export function load_component(component: ComponentLoader): Promise<ComponentConstructor> {
+	// TODO this is temporary — once placeholders are
+	// always rewritten, scratch the ternary
+	const promises: Array<Promise<any>> = (typeof component.css === 'string' ? [] : component.css.map(load_css));
+	promises.unshift(component.js());
+	return Promise.all(promises).then(values => values[0].default);
+}
+
+function detach(node: Node) {
+	node.parentNode.removeChild(node);
+}
+
+function changed(a: Record<string, string | true>, b: Record<string, string | true>) {
+	return JSON.stringify(a) !== JSON.stringify(b);
+}
--- a/templates/src/client/goto/index.ts
+++ b/templates/src/client/goto/index.ts
@@ -0,0 +1,13 @@
+import { history, select_route, navigate, cid } from '../app';
+
+export default function goto(href: string, opts = { replaceState: false }) {
+	const target = select_route(new URL(href, document.baseURI));
+
+	if (target) {
+		history[opts.replaceState ? 'replaceState' : 'pushState']({ id: cid }, '', href);
+		return navigate(target, null).then(() => {});
+	}
+
+	location.href = href;
+	return new Promise(f => {}); // never resolves
+}
--- a/templates/src/client/index.ts
+++ b/templates/src/client/index.ts
@@ -0,0 +1,4 @@
+export { default as start } from './start/index';
+export { default as goto } from './goto/index';
+export { default as prefetch } from './prefetch/index';
+export { default as prefetchRoutes } from './prefetchRoutes/index';
--- a/templates/src/client/prefetch/index.ts
+++ b/templates/src/client/prefetch/index.ts
@@ -0,0 +1,10 @@
+import { select_route, prefetching, set_prefetching, prepare_page } from '../app';
+import { Target } from '../types';
+
+export default function prefetch(href: string) {
+	const target: Target = select_route(new URL(href, document.baseURI));
+
+	if (target && (!prefetching || href !== prefetching.href)) {
+		set_prefetching(href, prepare_page(target));
+	}
+}
--- a/templates/src/client/prefetchRoutes/index.ts
+++ b/templates/src/client/prefetchRoutes/index.ts
@@ -0,0 +1,12 @@
+import { components, pages, load_component } from "../app";
+
+export default function prefetchRoutes(pathnames: string[]) {
+	return pages
+		.filter(route => {
+			if (!pathnames) return true;
+			return pathnames.some(pathname => route.pattern.test(pathname));
+		})
+		.reduce((promise: Promise<any>, route) => promise.then(() => {
+			return Promise.all(route.parts.map(part => part && load_component(components[part.i])));
+		}), Promise.resolve());
+}
--- a/templates/src/client/start/index.ts
+++ b/templates/src/client/start/index.ts
@@ -0,0 +1,139 @@
+import {
+	cid,
+	history,
+	initial_data,
+	navigate,
+	scroll_history,
+	scroll_state,
+	select_route,
+	set_store,
+	set_target,
+	uid,
+	set_uid,
+	set_cid
+} from '../app';
+import prefetch from '../prefetch/index';
+import { Store } from '../types';
+
+export default function start(opts: {
+	target: Node,
+	store?: (data: any) => Store
+}) {
+	if ('scrollRestoration' in history) {
+		history.scrollRestoration = 'manual';
+	}
+
+	set_target(opts.target);
+	if (opts.store) set_store(opts.store);
+
+	addEventListener('click', handle_click);
+	addEventListener('popstate', handle_popstate);
+
+	// prefetch
+	addEventListener('touchstart', trigger_prefetch);
+	addEventListener('mousemove', handle_mousemove);
+
+	return Promise.resolve().then(() => {
+		const { hash, href } = location;
+
+		const deep_linked = hash && document.getElementById(hash.slice(1));
+		scroll_history[uid] = deep_linked ?
+			{ x: 0, y: deep_linked.getBoundingClientRect().top } :
+			scroll_state();
+
+		history.replaceState({ id: uid }, '', href);
+
+		if (!initial_data.error) {
+			const target = select_route(new URL(location.href));
+			if (target) return navigate(target, uid);
+		}
+	});
+}
+
+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>find_anchor(<Node>event.target);
+	if (!a || a.rel !== 'prefetch') return;
+
+	prefetch(a.href);
+}
+
+function handle_click(event: MouseEvent) {
+	// Adapted from https://github.com/visionmedia/page.js
+	// MIT license https://github.com/visionmedia/page.js#license
+	if (which(event) !== 1) return;
+	if (event.metaKey || event.ctrlKey || event.shiftKey) return;
+	if (event.defaultPrevented) return;
+
+	const a: HTMLAnchorElement | SVGAElement = <HTMLAnchorElement | SVGAElement>find_anchor(<Node>event.target);
+	if (!a) return;
+
+	if (!a.href) return;
+
+	// check if link is inside an svg
+	// in this case, both href and target are always inside an object
+	const svg = typeof a.href === 'object' && a.href.constructor.name === 'SVGAnimatedString';
+	const href = String(svg ? (<SVGAElement>a).href.baseVal : a.href);
+
+	if (href === location.href) {
+		event.preventDefault();
+		return;
+	}
+
+	// Ignore if tag has
+	// 1. 'download' attribute
+	// 2. rel='external' attribute
+	if (a.hasAttribute('download') || a.getAttribute('rel') === 'external') return;
+
+	// Ignore if <a> has a target
+	if (svg ? (<SVGAElement>a).target.baseVal : a.target) return;
+
+	const url = new URL(href);
+
+	// Don't handle hash changes
+	if (url.pathname === location.pathname && url.search === location.search) return;
+
+	const target = select_route(url);
+	if (target) {
+		const noscroll = a.hasAttribute('sapper-noscroll')
+		navigate(target, null, noscroll);
+		event.preventDefault();
+		history.pushState({ id: cid }, '', url.href);
+	}
+}
+
+function which(event: MouseEvent) {
+	return event.which === null ? event.button : event.which;
+}
+
+function find_anchor(node: Node) {
+	while (node && node.nodeName.toUpperCase() !== 'A') node = node.parentNode; // SVG <a> elements have a lowercase name
+	return node;
+}
+
+function handle_popstate(event: PopStateEvent) {
+	scroll_history[cid] = scroll_state();
+
+	if (event.state) {
+		const url = new URL(location.href);
+		const target = select_route(url);
+		if (target) {
+			navigate(target, event.state.id);
+		} else {
+			location.href = location.href;
+		}
+	} else {
+		// hashchange
+		set_uid(uid + 1);
+		set_cid(uid);
+		history.replaceState({ id: cid }, '', location.href);
+	}
+}
--- a/templates/src/client/types.ts
+++ b/templates/src/client/types.ts
@@ -1,10 +1,20 @@
-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, path: string };

+type Child = {
+	segment?: string;
+	props?: any;
+	component?: Component;
+};
+
+export type RootProps = {
+	path: string;
+	params: Record<string, string>;
+	query: Record<string, string>;
+	child: Child;
+};
+
 export interface ComponentConstructor {
 	new (options: { target: Node, data: any, store: Store, hydrate: boolean }): Component;
 	preload: (props: { params: Params, query: Query }) => Promise<any>;
@@ -23,7 +33,7 @@ export type ComponentLoader = {
 export type Page = {
 	pattern: RegExp;
 	parts: Array<{
-		component: ComponentLoader;
+		i: number;
 		params?: (match: RegExpExecArray) => Record<string, string>;
 	}>;
 };
@@ -51,4 +61,8 @@ export type Target = {
 export type Redirect = {
 	statusCode: number;
 	location: string;
-};
+};
+
+export type Store = {
+	get: () => any;
+}
--- a/templates/src/server/index.ts
+++ b/templates/src/server/index.ts
@@ -0,0 +1 @@
+export { default as middleware } from './middleware/index';
--- a/templates/src/server/middleware/get_page_handler.ts
+++ b/templates/src/server/middleware/get_page_handler.ts
@@ -0,0 +1,321 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import cookie from 'cookie';
+import devalue from 'devalue';
+import fetch from 'node-fetch';
+import { URL } from 'url';
+import { build_dir, dev, src_dir, IGNORE } from '../placeholders';
+import { Manifest, Page, Props, Req, Res, Store } from './types';
+
+export function get_page_handler(
+	manifest: Manifest,
+	store_getter: (req: Req, res: Res) => Store
+) {
+	const get_build_info = dev
+		? () => JSON.parse(fs.readFileSync(path.join(build_dir, 'build.json'), 'utf-8'))
+		: (assets => () => assets)(JSON.parse(fs.readFileSync(path.join(build_dir, 'build.json'), 'utf-8')));
+
+	const template = dev
+		? () => read_template(src_dir)
+		: (str => () => str)(read_template(build_dir));
+
+	const has_service_worker = fs.existsSync(path.join(build_dir, 'service-worker.js'));
+
+	const { server_routes, pages } = manifest;
+	const error_route = manifest.error;
+
+	function handle_error(req: Req, res: Res, statusCode: number, error: Error | string) {
+		handle_page({
+			pattern: null,
+			parts: [
+				{ name: null, component: error_route }
+			]
+		}, req, res, statusCode, error || new Error('Unknown error in preload function'));
+	}
+
+	function handle_page(page: Page, req: Req, res: Res, status = 200, error: Error | string = null) {
+		const build_info: {
+			bundler: 'rollup' | 'webpack',
+			shimport: string | null,
+			assets: Record<string, string | string[]>,
+			legacy_assets?: Record<string, string>
+		 } = get_build_info();
+
+		res.setHeader('Content-Type', 'text/html');
+		res.setHeader('Cache-Control', dev ? 'no-cache' : 'max-age=600');
+
+		// preload main.js and current route
+		// TODO detect other stuff we can preload? images, CSS, fonts?
+		let preloaded_chunks = Array.isArray(build_info.assets.main) ? build_info.assets.main : [build_info.assets.main];
+		if (!error) {
+			page.parts.forEach(part => {
+				if (!part) return;
+
+				// using concat because it could be a string or an array. thanks webpack!
+				preloaded_chunks = preloaded_chunks.concat(build_info.assets[part.name]);
+			});
+		}
+
+		const link = preloaded_chunks
+			.filter(file => 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, res) : 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`);
+				}
+				location = location.replace(/^\//g, ''); // leading slash (only)
+				redirect = { statusCode, location };
+			},
+			error: (statusCode: number, message: Error | string) => {
+				preload_error = { statusCode, message };
+			},
+			fetch: (url: string, opts?: any) => {
+				const parsed = new URL(url, `http://127.0.0.1:${process.env.PORT}${req.baseUrl ? req.baseUrl + '/' :''}`);
+
+				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) {
+						if (!opts.headers) opts.headers = {};
+
+						const cookies = Object.assign(
+							{},
+							cookie.parse(req.headers.cookie || ''),
+							cookie.parse(opts.headers.cookie || '')
+						);
+
+						const set_cookie = res.getHeader('Set-Cookie');
+						(Array.isArray(set_cookie) ? set_cookie : [set_cookie]).forEach(str => {
+							const match = /([^=]+)=([^;]+)/.exec(<string>str);
+							if (match) cookies[match[1]] = match[2];
+						});
+
+						const str = Object.keys(cookies)
+							.map(key => `${key}=${cookies[key]}`)
+							.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: {}
+			})
+			: {};
+
+		const match = error ? null : page.pattern.exec(req.path);
+
+		Promise.all([root_preloaded].concat(page.parts.map(part => {
+			if (!part) return null;
+
+			return part.component.preload
+				? part.component.preload.call(preload_context, {
+					path: req.path,
+					query: req.query,
+					params: part.params ? part.params(match) : {}
+				})
+				: {};
+		}))).catch(err => {
+			preload_error = { statusCode: 500, message: err };
+			return []; // appease TypeScript
+		}).then(preloaded => {
+			if (redirect) {
+				const location = `${req.baseUrl}/${redirect.location}`;
+
+				res.statusCode = redirect.statusCode;
+				res.setHeader('Location', 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: {
+					segment: segments[0]
+				}
+			});
+
+			let level = data.child;
+			for (let i = 0; i < page.parts.length; i += 1) {
+				const part = page.parts[i];
+				if (!part) continue;
+
+				const get_params = part.params || (() => ({}));
+
+				Object.assign(level, {
+					component: part.component,
+					props: Object.assign({}, props, {
+						params: get_params(match)
+					}, preloaded[i + 1])
+				});
+
+				level.props.child = <Props["child"]>{
+					segment: segments[i + 1]
+				};
+				level = level.props.child;
+			}
+
+			const { html, head, css } = manifest.root.render(data, {
+				store
+			});
+
+			let script = `__SAPPER__={${[
+				error && `error:1`,
+				`baseUrl:"${req.baseUrl}"`,
+				serialized.preloaded && `preloaded:${serialized.preloaded}`,
+				serialized.store && `store:${serialized.store}`
+			].filter(Boolean).join(',')}};`;
+
+			if (has_service_worker) {
+				script += `if('serviceWorker' in navigator)navigator.serviceWorker.register('${req.baseUrl}/service-worker.js');`;
+			}
+
+			const file = [].concat(build_info.assets.main).filter(file => file && /\.js$/.test(file))[0];
+			const main = `${req.baseUrl}/client/${file}`;
+
+			if (build_info.bundler === 'rollup') {
+				if (build_info.legacy_assets) {
+					const legacy_main = `${req.baseUrl}/client/legacy/${build_info.legacy_assets.main}`;
+					script += `(function(){try{eval("async function x(){}");var main="${main}"}catch(e){main="${legacy_main}"};var s=document.createElement("script");try{new Function("if(0)import('')")();s.src=main;s.type="module";s.crossOrigin="use-credentials";}catch(e){s.src="${req.baseUrl}/client/shimport@${build_info.shimport}.js";s.setAttribute("data-main",main);}document.head.appendChild(s);}());`;
+				} else {
+					script += `var s=document.createElement("script");try{new Function("if(0)import('')")();s.src="${main}";s.type="module";s.crossOrigin="use-credentials";}catch(e){s.src="${req.baseUrl}/client/shimport@${build_info.shimport}.js";s.setAttribute("data-main","${main}")}document.head.appendChild(s)`;
+				}
+			} else {
+				script += `</script><script src="${main}">`;
+			}
+
+			let styles: string;
+
+			// TODO make this consistent across apps
+			// TODO embed build_info in placeholder.ts
+			if (build_info.css && build_info.css.main) {
+				const css_chunks = new Set();
+				if (build_info.css.main) css_chunks.add(build_info.css.main);
+				page.parts.forEach(part => {
+					if (!part) return;
+					const css_chunks_for_part = build_info.css.chunks[part.file];
+
+					if (css_chunks_for_part) {
+						css_chunks_for_part.forEach(file => {
+							css_chunks.add(file);
+						});
+					}
+				});
+
+				styles = Array.from(css_chunks)
+					.map(href => `<link rel="stylesheet" href="client/${href}">`)
+					.join('')
+			} else {
+				styles = (css && css.code ? `<style>${css.code}</style>` : '');
+			}
+
+			// users can set a CSP nonce using res.locals.nonce
+			const nonce_attr = (res.locals && res.locals.nonce) ? ` nonce="${res.locals.nonce}"` : '';
+
+			const body = template()
+				.replace('%sapper.base%', () => `<base href="${req.baseUrl}/">`)
+				.replace('%sapper.scripts%', () => `<script${nonce_attr}>${script}</script>`)
+				.replace('%sapper.html%', () => html)
+				.replace('%sapper.head%', () => `<noscript id='sapper-head-start'></noscript>${head}<noscript id='sapper-head-end'></noscript>`)
+				.replace('%sapper.styles%', () => styles);
+
+			res.statusCode = status;
+			res.end(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: Res, next: () => void) {
+		if (req[IGNORE]) return next();
+
+		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 read_template(dir = build_dir) {
+	return fs.readFileSync(`${dir}/template.html`, 'utf-8');
+}
+
+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/templates/src/server/middleware/get_server_route_handler.ts
+++ b/templates/src/server/middleware/get_server_route_handler.ts
@@ -0,0 +1,78 @@
+import { IGNORE } from '../placeholders';
+import { Req, Res, ServerRoute } from './types';
+
+export function get_server_route_handler(routes: ServerRoute[]) {
+	function handle_route(route: ServerRoute, req: Req, res: Res, 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(Buffer.from(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(Buffer.from(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: Res, next: () => void) {
+		if (req[IGNORE]) return next();
+
+		for (const route of routes) {
+			if (route.pattern.test(req.path)) {
+				handle_route(route, req, res, next);
+				return;
+			}
+		}
+
+		next();
+	};
+}
--- a/templates/src/server/middleware/index.ts
+++ b/templates/src/server/middleware/index.ts
@@ -0,0 +1,143 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import { build_dir, dev, manifest, IGNORE } from '../placeholders';
+import { Handler, Req, Res, Store } from './types';
+import { get_server_route_handler } from './get_server_route_handler';
+import { get_page_handler } from './get_page_handler';
+import { lookup } from './mime';
+
+export default function middleware(opts: {
+	store?: (req: Req, res: Res) => Store,
+	ignore?: any
+} = {}) {
+	const { store, ignore } = opts;
+
+	let emitted_basepath = false;
+
+	return compose_handlers([
+		ignore && ((req: Req, res: Res, next: () => void) => {
+			req[IGNORE] = should_ignore(req.path, ignore);
+			next();
+		}),
+
+		(req: Req, res: Res, next: () => void) => {
+			if (req[IGNORE]) return next();
+
+			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(build_dir, 'index.html')) && serve({
+			pathname: '/index.html',
+			cache_control: dev ? 'no-cache' : 'max-age=600'
+		}),
+
+		fs.existsSync(path.join(build_dir, 'service-worker.js')) && serve({
+			pathname: '/service-worker.js',
+			cache_control: 'no-cache, no-store, must-revalidate'
+		}),
+
+		fs.existsSync(path.join(build_dir, 'service-worker.js.map')) && serve({
+			pathname: '/service-worker.js.map',
+			cache_control: 'no-cache, no-store, must-revalidate'
+		}),
+
+		serve({
+			prefix: '/client/',
+			cache_control: dev ? 'no-cache' : 'max-age=31536000, immutable'
+		}),
+
+		get_server_route_handler(manifest.server_routes),
+
+		get_page_handler(manifest, store)
+	].filter(Boolean));
+}
+
+export function compose_handlers(handlers: Handler[]) {
+	return (req: Req, res: Res, next: () => void) => {
+		let i = 0;
+		function go() {
+			const handler = handlers[i];
+
+			if (handler) {
+				handler(req, res, () => {
+					i += 1;
+					go();
+				});
+			} else {
+				next();
+			}
+		}
+
+		go();
+	};
+}
+
+export function should_ignore(uri: string, val: any) {
+	if (Array.isArray(val)) return val.some(x => should_ignore(uri, x));
+	if (val instanceof RegExp) return val.test(uri);
+	if (typeof val === 'function') return val(uri);
+	return uri.startsWith(val.charCodeAt(0) === 47 ? val : `/${val}`);
+}
+
+export 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 cache: Map<string, Buffer> = new Map();
+
+	const read = dev
+		? (file: string) => fs.readFileSync(path.resolve(build_dir, file))
+		: (file: string) => (cache.has(file) ? cache : cache.set(file, fs.readFileSync(path.resolve(build_dir, file)))).get(file)
+
+	return (req: Req, res: Res, next: () => void) => {
+		if (req[IGNORE]) return next();
+
+		if (filter(req)) {
+			const type = lookup(req.path);
+
+			try {
+				const file = decodeURIComponent(req.path.slice(1));
+				const data = read(file);
+
+				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();
+		}
+	};
+}
--- a/templates/src/server/middleware/mime-types.md
+++ b/templates/src/server/middleware/mime-types.md
--- a/templates/src/server/middleware/mime.ts
+++ b/templates/src/server/middleware/mime.ts
--- a/templates/src/server/middleware/types.ts
+++ b/templates/src/server/middleware/types.ts
@@ -0,0 +1,69 @@
+import { ClientRequest, ServerResponse } from 'http';
+
+export type ServerRoute = {
+	pattern: RegExp;
+	handlers: Record<string, Handler>;
+	params: (match: RegExpMatchArray) => Record<string, string>;
+};
+
+export type Page = {
+	pattern: RegExp;
+	parts: Array<{
+		name: string;
+		component: Component;
+		params?: (match: RegExpMatchArray) => Record<string, string>;
+	}>
+};
+
+export type Manifest = {
+	server_routes: ServerRoute[];
+	pages: Page[];
+	root: Component;
+	error: Component;
+}
+
+export type Handler = (req: Req, res: Res, next: () => void) => void;
+
+export type Store = {
+	get: () => any
+};
+
+export 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;
+};
+
+export 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>;
+}
+
+export interface Res extends ServerResponse {
+	write: (data: any) => void;
+}
+
+export { ServerResponse };
+
+interface Component {
+	render: (data: any, opts: { store: Store }) => {
+		head: string;
+		css: { code: string, map: any };
+		html: string
+	},
+	preload: (data: any) => any | Promise<any>
+}
--- a/templates/src/server/placeholders.ts
+++ b/templates/src/server/placeholders.ts
@@ -0,0 +1,11 @@
+import { Manifest } from './types';
+
+export const manifest: Manifest = __MANIFEST__;
+
+export const build_dir = __BUILD__DIR__;
+
+export const src_dir = __SRC__DIR__;
+
+export const dev = __DEV__;
+
+export const IGNORE = '__SAPPER__IGNORE__';
--- a/test/app/app/client.js
+++ b/test/app/app/client.js
@@ -1,14 +0,0 @@
-import { init, goto, prefetchRoutes } from '../../../runtime.js';
-import { Store } from 'svelte/store.js';
-import { manifest } from './manifest/client.js';
-
-window.init = () => {
-	return init({
-		target: document.querySelector('#sapper'),
-		manifest,
-		store: data => new Store(data)
-	});
-};
-
-window.prefetchRoutes = prefetchRoutes;
-window.goto = goto;
--- a/test/app/routes/credentials/test.json.js
+++ b/test/app/routes/credentials/test.json.js
@@ -1,28 +0,0 @@
-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/src/client.js
+++ b/test/app/src/client.js
@@ -0,0 +1,12 @@
+import { Store } from 'svelte/store.js';
+import * as sapper from '../__sapper__/client.js';
+
+window.init = () => {
+	return sapper.start({
+		target: document.querySelector('#sapper'),
+		store: data => new Store(data)
+	});
+};
+
+window.prefetchRoutes = sapper.prefetchRoutes;
+window.goto = sapper.goto;
--- a/test/app/src/routes/[x]/[y]/[z].html
+++ b/test/app/src/routes/[x]/[y]/[z].html
--- a/test/app/src/routes/[x]/[y]/_layout.html
+++ b/test/app/src/routes/[x]/[y]/_layout.html
--- a/test/app/src/routes/[x]/_counts.js
+++ b/test/app/src/routes/[x]/_counts.js
--- a/test/app/src/routes/_error.html
+++ b/test/app/src/routes/_error.html
--- a/test/app/src/routes/_layout.html
+++ b/test/app/src/routes/_layout.html
--- a/test/app/src/routes/about.html
+++ b/test/app/src/routes/about.html
@@ -9,17 +9,9 @@
 <button class='prefetch' on:click='prefetch("blog/why-the-name")'>Why the name?</button>

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

 	export default {
-		oncreate() {
-			window.goto = goto;
-		},
-
-		ondestroy() {
-			window.goto = null;
-		},
-
 		methods: {
 			prefetch
 		}
--- a/test/app/src/routes/api/delete/[id].js
+++ b/test/app/src/routes/api/delete/[id].js
--- a/test/app/src/routes/blog/[slug].html
+++ b/test/app/src/routes/blog/[slug].html
--- a/test/app/src/routes/blog/[slug].json.js
+++ b/test/app/src/routes/blog/[slug].json.js
--- a/test/app/src/routes/blog/_posts.js
+++ b/test/app/src/routes/blog/_posts.js
@@ -97,6 +97,33 @@ const posts = [
 			<p>Nellie is blowing them all AWAY. I will be a bigger and hairier mole than the one on your inner left thigh! I'll sacrifice anything for my children.</p>
 			<p>Up yours, granny! You couldn't handle it! Hey, Dad. Look at you. You're a year older…and a year closer to death. Buster: Oh yeah, I guess that's kind of funny. Bob Loblaw Law Blog. The guy runs a prison, he can have any piece of ass he wants.</p>

+			<p><a href="blog/another-long-post">clicking this link should reset scroll</a></p>
+			<p><a href="blog/another-long-post" sapper-noscroll>clicking this link should not affect scroll</a></p>
+
+			<h2 id='three'>Three</h2>
+			<p>I prematurely shot my wad on what was supposed to be a dry run, so now I'm afraid I have something of a mess on my hands. Dead Dove DO NOT EAT. Never once touched my per diem. I'd go to Craft Service, get some raw veggies, bacon, Cup-A-Soup…baby, I got a stew goin'. You're losing blood, aren't you? Gob: Probably, my socks are wet. Sure, let the little fruit do it. HUZZAH! Although George Michael had only got to second base, he'd gone in head first, like Pete Rose. I will pack your sweet pink mouth with so much ice cream you'll be the envy of every Jerry and Jane on the block!</p>
+			<p>Gosh Mom… after all these years, God's not going to take a call from you. Come on, this is a Bluth family celebration. It's no place for children.</p>
+			<p>And I wouldn't just lie there, if that's what you're thinking. That's not what I WAS thinking. Who? i just dont want him to point out my cracker ass in front of ann. When a man needs to prove to a woman that he's actually… When a man loves a woman… Heyyyyyy Uncle Father Oscar. [Stabbing Gob] White power! Gob: I'm white! Let me take off my assistant's skirt and put on my Barbra-Streisand-in-The-Prince-of-Tides ass-masking therapist pantsuit. In the mid '90s, Tobias formed a folk music band with Lindsay and Maebe which he called Dr. Funke's 100 Percent Natural Good Time Family Band Solution. The group was underwritten by the Natural Food Life Company, a division of Chem-Grow, an Allen Crayne acqusition, which was part of the Squimm Group. Their motto was simple: We keep you alive.</p>
+
+			<h2 id='four'>Four</h2>
+			<p>If you didn't have adult onset diabetes, I wouldn't mind giving you a little sugar. Everybody dance NOW. And the soup of the day is bread. Great, now I'm gonna smell to high heaven like a tuna melt!</p>
+			<p>That's how Tony Wonder lost a nut. She calls it a Mayonegg. Go ahead, touch the Cornballer. There's a new daddy in town. A discipline daddy.</p>
+		`
+	},
+
+	{
+		title: 'Another long post',
+		slug: 'another-long-post',
+		html: `
+			<h2 id='one'>One</h2>
+			<p>I'll have a vodka rocks. (Mom, it's breakfast time.) And a piece of toast. Let me out that Queen. Fried cheese… with club sauce.</p>
+			<p>Her lawyers are claiming the seal is worth $250,000. And that's not even including Buster's Swatch. This was a big get for God. What, so the guy we are meeting with can't even grow his own hair? COME ON! She's always got to wedge herself in the middle of us so that she can control everything. Yeah. Mom's awesome. It's, like, Hey, you want to go down to the whirlpool? Yeah, I don't have a husband. I call it Swing City. The CIA should've just Googled for his hideout, evidently. There are dozens of us! DOZENS! Yeah, like I'm going to take a whiz through this $5,000 suit. COME ON.</p>
+
+			<h2 id='two'>Two</h2>
+			<p>Tobias Fünke costume. Heart attack never stopped old big bear.</p>
+			<p>Nellie is blowing them all AWAY. I will be a bigger and hairier mole than the one on your inner left thigh! I'll sacrifice anything for my children.</p>
+			<p>Up yours, granny! You couldn't handle it! Hey, Dad. Look at you. You're a year older…and a year closer to death. Buster: Oh yeah, I guess that's kind of funny. Bob Loblaw Law Blog. The guy runs a prison, he can have any piece of ass he wants.</p>
+
 			<h2 id='three'>Three</h2>
 			<p>I prematurely shot my wad on what was supposed to be a dry run, so now I'm afraid I have something of a mess on my hands. Dead Dove DO NOT EAT. Never once touched my per diem. I'd go to Craft Service, get some raw veggies, bacon, Cup-A-Soup…baby, I got a stew goin'. You're losing blood, aren't you? Gob: Probably, my socks are wet. Sure, let the little fruit do it. HUZZAH! Although George Michael had only got to second base, he'd gone in head first, like Pete Rose. I will pack your sweet pink mouth with so much ice cream you'll be the envy of every Jerry and Jane on the block!</p>
 			<p>Gosh Mom… after all these years, God's not going to take a call from you. Come on, this is a Bluth family celebration. It's no place for children.</p>
--- a/test/app/src/routes/blog/index.html
+++ b/test/app/src/routes/blog/index.html
--- a/test/app/src/routes/blog/index.json.js
+++ b/test/app/src/routes/blog/index.json.js
--- a/test/app/src/routes/const.html
+++ b/test/app/src/routes/const.html
--- a/test/app/src/routes/credentials/index.html
+++ b/test/app/src/routes/credentials/index.html
--- a/test/app/src/routes/credentials/test.json.js
+++ b/test/app/src/routes/credentials/test.json.js
@@ -0,0 +1,23 @@
+import cookie from 'cookie';
+
+export function get(req, res) {
+	if (req.headers.cookie) {
+		const cookies = cookie.parse(req.headers.cookie);
+
+		res.writeHead(200, {
+			'Content-Type': 'application/json'
+		});
+
+		res.end(JSON.stringify({
+			message: `a: ${cookies.a}, b: ${cookies.b}, max-age: ${cookies['max-age']}`
+		}));
+	} else {
+		res.writeHead(403, {
+			'Content-Type': 'application/json'
+		});
+
+		res.end(JSON.stringify({
+			message: 'unauthorized'
+		}));
+	}
+}
--- a/test/app/src/routes/delete-test.html
+++ b/test/app/src/routes/delete-test.html
--- a/test/app/src/routes/echo/page/[slug].html
+++ b/test/app/src/routes/echo/page/[slug].html
--- a/test/app/src/routes/echo/server-route/[slug].js
+++ b/test/app/src/routes/echo/server-route/[slug].js
--- a/test/app/src/routes/fünke.html
+++ b/test/app/src/routes/fünke.html
--- a/test/app/src/routes/fünke.json.js
+++ b/test/app/src/routes/fünke.json.js
--- a/test/app/src/routes/index.html
+++ b/test/app/src/routes/index.html
@@ -16,6 +16,7 @@
 <a rel=prefetch class='{page === "blog"  ? "selected" : ""}' href='blog'>blog</a>
 <a href="const">const</a>
 <a href="echo/page/encöded?message=hëllö+wörld">echo/page/encöded?message=hëllö+wörld</a>
+<a href="echo/page/empty?message">echo/page/empty?message</a>

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

--- a/test/app/src/routes/missing-index/ok.html
+++ b/test/app/src/routes/missing-index/ok.html
--- a/test/app/src/routes/non-sapper-redirect-to.html
+++ b/test/app/src/routes/non-sapper-redirect-to.html
--- a/test/app/src/routes/preload-root/index.html
+++ b/test/app/src/routes/preload-root/index.html
--- a/test/app/src/routes/preload-values/custom-class.html
+++ b/test/app/src/routes/preload-values/custom-class.html
--- a/test/app/src/routes/preload-values/index.html
+++ b/test/app/src/routes/preload-values/index.html
--- a/test/app/src/routes/preload-values/set.html
+++ b/test/app/src/routes/preload-values/set.html
--- a/test/app/src/routes/redirect-from.html
+++ b/test/app/src/routes/redirect-from.html
--- a/test/app/src/routes/redirect-root.html
+++ b/test/app/src/routes/redirect-root.html
--- a/test/app/src/routes/redirect-to.html
+++ b/test/app/src/routes/redirect-to.html
--- a/test/app/src/routes/slow-preload.html
+++ b/test/app/src/routes/slow-preload.html
--- a/test/app/src/routes/store.html
+++ b/test/app/src/routes/store.html
--- a/test/app/src/routes/throw-an-error.js
+++ b/test/app/src/routes/throw-an-error.js
--- a/test/app/src/routes/unsafe-replacement.html
+++ b/test/app/src/routes/unsafe-replacement.html
--- a/test/app/src/server.js
+++ b/test/app/src/server.js
@@ -2,9 +2,8 @@ import fs from 'fs';
 import { resolve } from 'url';
 import express from 'express';
 import serve from 'serve-static';
-import sapper from '../../../dist/middleware.js';
 import { Store } from 'svelte/store.js';
-import { manifest } from './manifest/server.js';
+import * as sapper from '../__sapper__/server.js';

 let pending;
 let ended;
@@ -45,7 +44,7 @@ const middlewares = [

 	// set test cookie
 	(req, res, next) => {
-		res.setHeader('Set-Cookie', 'test=woohoo!; Max-Age=3600');
+		res.setHeader('Set-Cookie', ['a=1; Path=/', 'b=2; Path=/']);
 		next();
 	},

@@ -92,8 +91,7 @@ const middlewares = [
 		next();
 	},

-	sapper({
-		manifest,
+	sapper.middleware({
 		store: (req, res) => {
 			return new Store({
 				title: `${req.hello} ${res.locals.name}`
--- a/test/app/src/service-worker.js
+++ b/test/app/src/service-worker.js
@@ -1,10 +1,10 @@
-import { assets, shell, timestamp, routes } from './manifest/service-worker.js';
+import { files, shell, timestamp, routes } from '../__sapper__/service-worker.js';

 const ASSETS = `cachetimestamp`;

 // `shell` is an array of all the files generated by webpack,
 // `assets` is an array of everything in the `assets` directory
-const to_cache = shell.concat(assets);
+const to_cache = shell.concat(files);
 const cached = new Set(to_cache);

 self.addEventListener('install', event => {
--- a/test/app/src/template.html
+++ b/test/app/src/template.html
--- a/test/app/static/favicon.png
+++ b/test/app/static/favicon.png
--- a/test/app/static/global.css
+++ b/test/app/static/global.css
--- a/test/app/static/great-success.png
+++ b/test/app/static/great-success.png
--- a/test/app/static/manifest.json
+++ b/test/app/static/manifest.json
--- a/test/app/static/svelte-logo-192.png
+++ b/test/app/static/svelte-logo-192.png
--- a/test/app/static/svelte-logo-512.png
+++ b/test/app/static/svelte-logo-512.png
--- a/test/app/webpack.config.js
+++ b/test/app/webpack.config.js
@@ -0,0 +1,84 @@
+const path = require('path');
+const webpack = require('webpack');
+const config = require('../../config/webpack.js');
+const sapper_pkg = require('../../package.json');
+
+const mode = process.env.NODE_ENV;
+const isDev = mode === 'development';
+
+module.exports = {
+	client: {
+		entry: config.client.entry(),
+		output: config.client.output(),
+		resolve: {
+			extensions: ['.js', '.html']
+		},
+		module: {
+			rules: [
+				{
+					test: /\.html$/,
+					exclude: /node_modules/,
+					use: {
+						loader: 'svelte-loader',
+						options: {
+							hydratable: true,
+							cascade: false,
+							store: true
+						}
+					}
+				}
+			]
+		},
+		mode,
+		optimization: {
+			minimize: false
+		},
+		plugins: [
+			isDev && new webpack.HotModuleReplacementPlugin()
+		].filter(Boolean),
+		devtool: isDev && 'inline-source-map'
+	},
+
+	server: {
+		entry: config.server.entry(),
+		output: config.server.output(),
+		target: 'node',
+		resolve: {
+			extensions: ['.js', '.html']
+		},
+		externals: [].concat(
+			Object.keys(sapper_pkg.dependencies),
+			Object.keys(sapper_pkg.devDependencies)
+		),
+		module: {
+			rules: [
+				{
+					test: /\.html$/,
+					exclude: /node_modules/,
+					use: {
+						loader: 'svelte-loader',
+						options: {
+							css: false,
+							cascade: false,
+							store: true,
+							generate: 'ssr'
+						}
+					}
+				}
+			]
+		},
+		mode,
+		optimization: {
+			minimize: false
+		},
+		performance: {
+			hints: false // it doesn't matter if server.js is large
+		}
+	},
+
+	serviceworker: {
+		entry: config.serviceworker.entry(),
+		output: config.serviceworker.output(),
+		mode
+	}
+};
--- a/test/app/webpack/client.config.js
+++ b/test/app/webpack/client.config.js
@@ -1,34 +0,0 @@
-const config = require('../../../config/webpack.js');
-const webpack = require('webpack');
-
-const mode = process.env.NODE_ENV;
-const isDev = mode === 'development';
-
-module.exports = {
-	entry: config.client.entry(),
-	output: config.client.output(),
-	resolve: {
-		extensions: ['.js', '.html']
-	},
-	module: {
-		rules: [
-			{
-				test: /\.html$/,
-				exclude: /node_modules/,
-				use: {
-					loader: 'svelte-loader',
-					options: {
-						hydratable: true,
-						cascade: false,
-						store: true
-					}
-				}
-			}
-		]
-	},
-	mode,
-	plugins: [
-		isDev && new webpack.HotModuleReplacementPlugin()
-	].filter(Boolean),
-	devtool: isDev && 'inline-source-map'
-};
--- a/test/app/webpack/server.config.js
+++ b/test/app/webpack/server.config.js
@@ -1,36 +0,0 @@
-const config = require('../../../config/webpack.js');
-const sapper_pkg = require('../../../package.json');
-
-module.exports = {
-	entry: config.server.entry(),
-	output: config.server.output(),
-	target: 'node',
-	resolve: {
-		extensions: ['.js', '.html']
-	},
-	externals: [].concat(
-		Object.keys(sapper_pkg.dependencies),
-		Object.keys(sapper_pkg.devDependencies)
-	),
-	module: {
-		rules: [
-			{
-				test: /\.html$/,
-				exclude: /node_modules/,
-				use: {
-					loader: 'svelte-loader',
-					options: {
-						css: false,
-						cascade: false,
-						store: true,
-						generate: 'ssr'
-					}
-				}
-			}
-		]
-	},
-	mode: process.env.NODE_ENV,
-	performance: {
-		hints: false // it doesn't matter if server.js is large
-	}
-};
--- a/test/app/webpack/service-worker.config.js
+++ b/test/app/webpack/service-worker.config.js
@@ -1,7 +0,0 @@
-const config = require('../../../config/webpack.js');
-
-module.exports = {
-	entry: config.serviceworker.entry(),
-	output: config.serviceworker.output(),
-	mode: process.env.NODE_ENV
-};
--- a/test/common/test.js
+++ b/test/common/test.js
@@ -5,6 +5,7 @@ const Nightmare = require('nightmare');
 const walkSync = require('walk-sync');
 const rimraf = require('rimraf');
 const ports = require('port-authority');
+const fetch = require('node-fetch');

 Nightmare.action('page', {
 	title(done) {
@@ -36,10 +37,7 @@ describe('sapper', function() {
 	process.chdir(path.resolve(__dirname, '../app'));

 	// clean up after previous test runs
-	rimraf.sync('export');
-	rimraf.sync('build');
-	rimraf.sync('.sapper');
-	rimraf.sync('start.js');
+	rimraf.sync('__sapper__');

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

@@ -73,7 +71,7 @@ function testExport({ basepath = '' }) {
 		});

 		it('export all pages', () => {
-			const dest = path.resolve(__dirname, '../app/export');
+			const dest = path.resolve(__dirname, '../app/__sapper__/export');

 			// Pages that should show up in the extraction directory.
 			const expectedPages = [
@@ -180,13 +178,13 @@ function run({ mode, basepath = '' }) {
 				base = `http://localhost:${port}`;
 				if (basepath) base += basepath;

-				const dir = mode === 'production' ? 'build' : '.sapper';
+				const dir = mode === 'production' ? '__sapper__/build' : '__sapper__/dev';

 				if (mode === 'production') {
-					assert.ok(fs.existsSync('build/index.js'));
+					assert.ok(fs.existsSync('__sapper__/build/index.js'));
 				}

-				proc = require('child_process').fork(`${dir}/server.js`, {
+				proc = require('child_process').fork(`${dir}/server/server.js`, {
 					cwd: process.cwd(),
 					env: {
 						NODE_ENV: mode,
@@ -625,7 +623,7 @@ function run({ mode, basepath = '' }) {
 				return nightmare.goto(`${base}/credentials?creds=include`)
 					.page.title()
 					.then(title => {
-						assert.equal(title, 'woohoo!');
+						assert.equal(title, 'a: 1, b: 2, max-age: undefined');
 					});
 			});

@@ -643,7 +641,7 @@ function run({ mode, basepath = '' }) {
 					.wait(100)
 					.page.title()
 					.then(title => {
-						assert.equal(title, 'woohoo!');
+						assert.equal(title, 'a: 1, b: 2, max-age: undefined');
 					});
 			});

@@ -772,6 +770,24 @@ function run({ mode, basepath = '' }) {
 					});
 			});

+			it('accepts value-less query string parameter on server', () => {
+				return nightmare.goto(`${base}/echo/page/empty?message`)
+					.page.title()
+					.then(title => {
+						assert.equal(title, 'empty ()');
+					});
+			});
+
+			it('accepts value-less query string parameter on client', () => {
+				return nightmare.goto(base).init()
+					.click('a[href="echo/page/empty?message"]')
+					.wait(100)
+					.page.title()
+					.then(title => {
+						assert.equal(title, 'empty ()');
+					});
+			});
+
 			it('encodes req.params for server routes', () => {
 				return nightmare.goto(`${base}/echo/server-route/encöded`)
 					.page.title()
@@ -779,18 +795,47 @@ function run({ mode, basepath = '' }) {
 						assert.equal(title, 'encöded');
 					});
 			});
+
+			it('resets scroll when a link is clicked', () => {
+				return nightmare.goto(`${base}/blog/a-very-long-post`)
+					.init()
+					.evaluate(() => window.scrollTo(0, 200))
+					.click('[href="blog/another-long-post"]')
+					.wait(100)
+					.evaluate(() => window.scrollY)
+					.then(scrollY => {
+						assert.equal(scrollY, 0);
+					});
+			});
+
+			it('preserves scroll when a link with sapper-noscroll is clicked', () => {
+				return nightmare.goto(`${base}/blog/a-very-long-post`)
+					.init()
+					.evaluate(() => window.scrollTo(0, 200))
+					.click('[href="blog/another-long-post"][sapper-noscroll]')
+					.wait(100)
+					.evaluate(() => window.scrollY)
+					.then(scrollY => {
+						assert.equal(scrollY, 200);
+					});
+			});
 		});

 		describe('headers', () => {
-			it('sets Content-Type and Link...preload headers', () => {
-				return capture(() => nightmare.goto(base)).then(requests => {
-					const { headers } = requests[0];
+			it('sets Content-Type, Link...preload, and Cache-Control headers', () => {
+				return capture(() => fetch(base)).then(responses => {
+					const { headers } = responses[0];

 					assert.equal(
 						headers['content-type'],
 						'text/html'
 					);

+					assert.equal(
+						headers['cache-control'],
+						'max-age=600'
+					);
+
 					const str = ['main', '.+?\\.\\d+']
 						.map(file => {
 							return `<${basepath}/client/[^/]+/${file}\\.js>;rel="preload";as="script"`;
Author	SHA1	Message	Date
Rich Harris	18acef3190	-> v0.22.10	2018-10-05 21:25:49 -04:00
Rich Harris	d7f6ca8b4d	Merge pull request #466 from sveltejs/css-basepath no need to use basepath in <link>	2018-10-05 21:22:15 -04:00
Rich Harris	00321932ef	no need to use basepath in <link>	2018-10-05 21:16:27 -04:00
Rich Harris	7eb1ec727c	add tests for #376	2018-10-05 20:59:45 -04:00
Rich Harris	3f586e19a1	minor tweaks	2018-10-05 20:57:15 -04:00
Daniil Khanin	05b702938f	implement sapper no scroll	2018-10-05 00:13:08 +03:00
Rich Harris	3026e7c36e	remove some leftover logging	2018-10-02 11:39:38 -04:00
Rich Harris	27a5aed83e	-> v0.22.9	2018-10-02 11:13:36 -04:00
Rich Harris	bb04af41bd	fix legacy builds	2018-10-02 11:13:09 -04:00
Rich Harris	9403799393	-> v0.22.8	2018-10-02 10:37:19 -04:00
Rich Harris	472c0c198a	Merge pull request #462 from sveltejs/overwrite-css-placeholders ensure CSS placeholders are overwritten	2018-10-02 10:36:39 -04:00
Rich Harris	02256ae214	ensure CSS placeholders are overwritten	2018-10-02 10:27:02 -04:00
Rich Harris	e2d325ec9f	-> v0.22.7	2018-10-01 22:58:44 -04:00
Rich Harris	954bcba333	Merge pull request #460 from sveltejs/cookies more robust cookies	2018-10-01 22:58:30 -04:00
Rich Harris	709c9992e3	more robust cookies	2018-10-01 22:47:11 -04:00
Rich Harris	9773781262	-> v0.22.6	2018-10-01 20:55:25 -04:00
Rich Harris	48b1fafc33	Merge pull request #459 from sveltejs/gh-458 inject a <script> with crossOrigin - fixes #458	2018-10-01 20:48:42 -04:00
Rich Harris	d1624add66	Merge pull request #456 from mrkishi/windows-paths Fix rollup input paths on Windows	2018-10-01 20:48:21 -04:00
Rich Harris	e2206d0e0d	inject a <script> with crossOrigin - fixes #458	2018-10-01 18:55:38 -04:00
Rich Harris	9cd4da4c39	-> v0.22.5	2018-10-01 17:54:29 -04:00
Rich Harris	6ded1a5975	slap self in face	2018-10-01 17:52:57 -04:00
mrkishi	584ddd1c85	Fix rollup input paths on Windows	2018-10-01 17:47:44 -03:00
Rich Harris	4071acf7c0	-> v0.22.4	2018-10-01 15:53:40 -04:00
Rich Harris	e8773d3196	Merge pull request #455 from sveltejs/deconflict-server put server assets in subfolder	2018-10-01 15:52:14 -04:00
Rich Harris	01a519a4d9	fix everything i just broke	2018-10-01 15:47:01 -04:00
Rich Harris	d9ad1d1b10	put server assets in subfolder	2018-10-01 15:21:35 -04:00
Rich Harris	0826a58995	-> v0.22.3	2018-10-01 12:13:52 -04:00
Rich Harris	6a74097b0c	ensure dev client is not imported if server imports client.js	2018-10-01 12:13:03 -04:00
Rich Harris	278be67228	-> v0.22.2	2018-09-30 22:06:19 -04:00
Rich Harris	64921dfc3c	make directories relative to project	2018-09-30 22:05:55 -04:00
Rich Harris	c8962ccf8c	update gitignore	2018-09-30 21:12:46 -04:00
Rich Harris	664c093391	-> v0.22.1	2018-09-30 21:10:17 -04:00
Rich Harris	4375feac83	-> v0.22.0	2018-09-30 21:05:31 -04:00
Rich Harris	4d7d448597	Merge pull request #453 from sveltejs/gh-444 move app logic into templates (#444)	2018-09-30 21:03:10 -04:00
Rich Harris	2e2b8dcd83	small tweak	2018-09-30 18:26:44 -04:00
Rich Harris	b915bab070	gah cant use agadoo because of placeholder imports	2018-09-30 18:21:28 -04:00
Rich Harris	8530d06d00	golf things down a bit	2018-09-30 18:11:40 -04:00
Rich Harris	a43764a971	put everything in __sapper__	2018-09-30 14:55:54 -04:00
Rich Harris	4f6efbda79	node 6 support	2018-09-30 12:54:50 -04:00
Rich Harris	5573258a10	update tests	2018-09-30 11:32:58 -04:00
Rich Harris	2185f89669	enforce client app treeshakeability	2018-09-30 10:50:25 -04:00
Rich Harris	e30842caa8	move app logic into templates (#444 )	2018-09-30 10:30:00 -04:00
Rich Harris	ff24877d8f	-> v0.21.1	2018-09-23 23:21:37 -04:00
Rich Harris	9cf90ce01d	-> v0.21.0	2018-09-23 21:48:53 -04:00
Rich Harris	e7f9ddae86	Merge pull request #446 from mrkishi/escaping-issues Fix filenames	2018-09-23 21:47:28 -04:00
Rich Harris	ffa1e1f704	Merge branch 'master' into escaping-issues	2018-09-23 21:41:02 -04:00
Rich Harris	80bb958b47	Merge pull request #443 from sveltejs/gh-432 update folder structure	2018-09-23 21:39:05 -04:00
mrkishi	532f559fc5	Update package-lock.json	2018-09-21 15:40:12 -03:00
mrkishi	0bd1b0b8e2	Fix filename escaping issues	2018-09-21 15:34:59 -03:00
Rich Harris	10c5ff4169	remove test app manifest from repo	2018-09-19 17:51:56 -04:00
Rich Harris	273823dfd7	move config into single file, add errors to help people migrate	2018-09-19 16:27:30 -04:00
Rich Harris	8f064fe5ac	update folder structure (#432 )	2018-09-19 12:02:11 -04:00
Rich Harris	f29e7efbd6	const -> let	2018-09-19 11:25:04 -04:00
Rich Harris	e66e3cd7eb	-> v0.20.4	2018-09-19 11:11:42 -04:00
Rich Harris	ff415b391b	Merge pull request #436 from nsivertsen/devtools Enable debugging in Chrome and VS Code - fixes #435	2018-09-19 11:09:19 -04:00
Rich Harris	91182ad0a2	Merge pull request #441 from silentworks/bugfix/legacy-manifest Fix for legacy manifest file	2018-09-19 10:43:50 -04:00
Andrew Smith	467041a3cd	Fix for legacy manifest file	2018-09-13 19:45:30 +01:00
Nikolai Sivertsen	520949c5e1	Enable debugging in Chrome and VS Code - fixes 435	2018-09-12 16:55:45 +02:00
Rich Harris	8c07d9d2ac	-> v0.20.3	2018-09-08 10:24:21 -04:00
Rich Harris	7bd684a80e	Merge pull request #428 from nolanlawson/cache-control-service-worker Set service-worker max-age to 0	2018-09-08 10:20:04 -04:00
Rich Harris	cbb5e8755b	Use MDN recommendation for preventing SW caching	2018-09-08 10:12:55 -04:00
Rich Harris	7ef72dbb77	Merge pull request #429 from nolanlawson/consistent-cache-control Use consistent cache-control:max-age=600 for HTML pages	2018-09-08 09:40:56 -04:00
Nolan Lawson	87ff9c2aeb	fix test	2018-09-07 17:25:17 -07:00
Nolan Lawson	2d1f535314	use consistent cache-control:max-age=600 for HTML pages	2018-09-07 16:46:40 -07:00
Rich Harris	cd1b53b80d	Merge pull request #424 from nolanlawson/csp-nonce Allow scripts to contain a CSP nonce	2018-09-07 19:46:07 -04:00
Rich Harris	0a7be736c0	snake_case	2018-09-07 19:45:40 -04:00
Nolan Lawson	5ee53a98c6	set service-worker max-age to 0	2018-09-07 16:28:38 -07:00
Rich Harris	0e8ed6612c	-> v0.20.2	2018-09-07 18:19:39 -04:00
Rich Harris	5ec748b95d	Merge pull request #427 from sveltejs/gh-426 handle value-less query string parameters	2018-09-07 18:18:28 -04:00
Rich Harris	64b16715cd	handle value-less query string parameters - fixes #426	2018-09-07 18:02:58 -04:00
Rich Harris	9ea5e5e251	Merge pull request #425 from nolanlawson/cache-control-immutable Add cache-control:immutable for immutable assets	2018-09-07 17:12:23 -04:00
Rich Harris	68b78f56d6	remove unused file	2018-09-07 16:42:56 -04:00
Nolan Lawson	68e93a8fa0	add cache-control:immutable for immutable assets	2018-09-07 11:07:50 -07:00
Nolan Lawson	e377515867	allow scripts to contain a CSP nonce	2018-09-07 09:46:53 -07:00
Rich Harris	99ae39b8a8	-> v0.20.1	2018-09-06 18:57:11 -04:00
				`@@ -1 +0,0 @@`
				`<svelte:component this={child.component} {...child.props}/>`
				`@@ -0,0 +1 @@`
				throw new Error(`As of Sapper 0.22, you should not import 'sapper' directly. See https://sapper.svelte.technology/guide#0-21-to-0-22 for more information`);
				`@@ -1 +0,0 @@`
				`This directory exists for legacy reasons and should be deleted before releasing version 1.`
				`@@ -0,0 +1 @@`
				`export { default as middleware } from './middleware/index';`