-> v0.22.1

move app logic into templates (#444)

.gitignore

@@ -4,7 +4,8 @@ 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

CHANGELOG.md

@@ -1,5 +1,49 @@
 # sapper changelog
 
+## 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))
+* Decode URLs before writing files in `sapper export` ([#414](https://github.com/sveltejs/sapper/pull/414))
+* Generate server sourcemaps for Rollup apps in dev mode ([#418](https://github.com/sveltejs/sapper/pull/418))
+
 ## 0.19.3
 
 * Better unicode route handling ([#347](https://github.com/sveltejs/sapper/issues/347))

components/default-layout.html

@@ -1 +0,0 @@
-<svelte:component this={child.component} {...child.props}/>

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

package.json

@@ -1,28 +1,24 @@
 {
   "name": "sapper",
-  "version": "0.19.3",
+  "version": "0.22.1",
   "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": {
-    "@types/blessed": "^0.1.10",
-    "blessed": "^0.1.81",
     "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",
@@ -34,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",
@@ -76,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"

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(),

runtime/README.md

@@ -1 +0,0 @@
-This directory exists for legacy reasons and should be deleted before releasing version 1.

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

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

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 = '';
 
@@ -200,8 +210,6 @@ class Watcher extends EventEmitter {
 			handle_result: (result: CompileResult) => {
 				deferred.promise.then(() => {
 					const restart = () => {
-						this.emit('restart');
-
 						log = '';
 						this.crashed = false;
 
@@ -240,12 +248,21 @@ class Watcher extends EventEmitter {
 						restart();
 					}
 
+					// 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.js`, [], {
 						cwd: process.cwd(),
 						env: Object.assign({
 							PORT: this.port
 						}, process.env),
-						stdio: ['ipc']
+						stdio: ['ipc'],
+						execArgv
 					});
 
 					this.proc.stdout.on('data', chunk => {

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')) {
@@ -85,7 +86,7 @@ async function execute(emitter: EventEmitter, opts: Opts) {
 
 	function save(path: string, status: number, type: string, body: string) {
 		const { pathname } = resolve(origin, path);
-		let file = pathname.slice(1);
+		let file = decodeURIComponent(pathname.slice(1));
 
 		if (saved.has(file)) return;
 		saved.add(file);

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;

src/cli.ts

@@ -15,15 +15,13 @@ prog.command('dev')
 	.option('--hot', 'Use hot module replacement (requires webpack)', true)
 	.option('--live', 'Reload on changes if not using --hot', true)
 	.option('--bundler', 'Specify a bundler (rollup or webpack)')
-	.option('--stream', 'Stream logs, instead of boxing them', false)
 	.action(async (opts: {
 		port: number,
 		open: boolean,
 		'dev-port': number,
 		live: boolean,
 		hot: boolean,
-		bundler?: string,
-		stream: boolean
+		bundler?: string
 	}) => {
 		const { dev } = await import('./cli/dev');
 		dev(opts);
@@ -35,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
@@ -82,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,

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'

src/cli/dev.ts

@@ -1,263 +1,80 @@
 import * as path from 'path';
 import colors from 'kleur';
 import * as child_process from 'child_process';
-import * as blessed from 'blessed';
 import prettyMs from 'pretty-ms';
 import { dev as _dev } from '../api/dev';
 import * as events from '../api/interfaces';
 
-function boxed_output() {
-	const screen = blessed.screen({
-		smartCSR: true
-	});
-
-	function box(opts) {
-		opts = Object.assign({
-			width: '100%',
-			height: '50%',
-			scrollable: true,
-			style: {
-				scrollbar: {
-					bg: 'black'
-				}
-			},
-			scrollbar: {},
-			input: true,
-			mouse: true,
-			keys: true,
-			scrollOnInput: false
-		}, opts);
-
-		return blessed.box(opts);
-	}
-
-	const status_box = box({});
-	const log_box = box({
-		bottom: '0'
-	});
-
-	let mouse_is_down = false;
-	let dragging = false;
-	let did_drag = false;
-
-	let divider_is_horizontal = true;
-
-	function update_split(x: number, y: number) {
-		if (divider_is_horizontal) {
-			horizontal_divider.top = y;
-			status_box.width = log_box.width = '100%';
-			status_box.height = y;
-			log_box.height = screen.height - (y + 1);
-			log_box.top = y + 1;
-			log_box.left = 0;
-		} else {
-			vertical_divider.left = x;
-			status_box.height = log_box.height = '100%';
-			status_box.width = x;
-			log_box.width = screen.width - (x + 1);
-			log_box.left = x + 1;
-			log_box.top = 0;
-		}
-
-		screen.render();
-	}
-
-	screen.on('mousedown', data => {
-		if (mouse_is_down) {
-			if (dragging) {
-				update_split(data.x, data.y);
-				did_drag = true;
-			}
-		} else {
-			if (data.y === horizontal_divider.top) {
-				dragging = true;
-			}
-
-			mouse_is_down = true;
-		}
-	});
-
-	screen.on('mouseup', data => {
-		mouse_is_down = false;
-		dragging = false;
-		did_drag = false;
-	});
-
-	const horizontal_divider = blessed.line({
-		top: '50%',
-		orientation: 'horizontal'
-	});
-
-	const vertical_divider = blessed.line({
-		left: '50%',
-		orientation: 'vertical'
-	});
-
-	horizontal_divider.on('click', event => {
-		if (!did_drag) {
-			horizontal_divider.hide();
-			vertical_divider.show();
-			divider_is_horizontal = false;
-			update_split(event.x, event.y);
-		}
-	});
-
-	vertical_divider.on('click', event => {
-		if (!did_drag) {
-			vertical_divider.hide();
-			horizontal_divider.show();
-			divider_is_horizontal = true;
-			update_split(event.x, event.y);
-		}
-	});
-
-	vertical_divider.hide();
-
-	screen.append(status_box);
-	screen.append(log_box);
-	screen.append(horizontal_divider);
-	screen.append(vertical_divider);
-
-	update_split(process.stdout.columns >> 1, process.stdout.rows >> 1);
-
-	screen.key(['escape', 'q', 'C-c'], function(ch, key) {
-		return process.exit(0);
-	});
-
-	const append_log = (data: Buffer | string) => {
-		log_box.setContent(log_box.content + data);
-		screen.render();
-	};
-
-	const append_status = (data: Buffer | string) => {
-		status_box.setContent(status_box.content + data);
-		screen.render();
-	};
-
-	let first = true;
-
-	return {
-		stdout: append_log,
-
-		stderr: append_log,
-
-		clear_logs: () => {
-			let content = `${colors.inverse(` server log • ${new Date().toISOString()}\n`)} \n`;
-			if (first) {
-				content += colors.gray(`> Click/drag the divider to adjust the split\n\n`);
-				first = false;
-			}
-
-			log_box.setContent(content);
-			screen.render();
-		},
-
-		log: (line: string) => {
-			append_status(line + '\n');
-		},
-
-		append: append_status,
-
-		clear: () => {
-			status_box.setContent(`${colors.inverse(` build log • ${new Date().toISOString()}\n`)} \n`);
-			screen.render();
-		}
-	};
-}
-
-function streamed_output() {
-	return {
-		stdout: process.stdout.write.bind(process.stdout),
-
-		stderr: process.stderr.write.bind(process.stderr),
-
-		clear_logs: () => {},
-
-		log: (line: string) => {
-			console.log(line);
-		},
-
-		append: (data: Buffer | string) => {
-			process.stdout.write(data);
-		},
-
-		clear: () => {}
-	};
-}
-
-export function dev(opts: { port: number, open: boolean, bundler?: string, stream: boolean }) {
-	const output = opts.stream
-		? streamed_output()
-		: boxed_output();
-
-	output.clear();
-
+export function dev(opts: { port: number, open: boolean, bundler?: string }) {
 	try {
 		const watcher = _dev(opts);
 
 		let first = true;
 
 		watcher.on('ready', (event: events.ReadyEvent) => {
-			output.log(colors.bold.cyan(`> Listening on http://localhost:${event.port}`));
-
 			if (first) {
+				console.log(colors.bold.cyan(`> Listening on http://localhost:${event.port}`));
 				if (opts.open) child_process.exec(`open http://localhost:${event.port}`);
 				first = false;
 			}
-		});
 
-		watcher.on('restart', output.clear_logs);
-		watcher.on('stdout', output.stdout);
-		watcher.on('stderr', output.stderr);
+			// TODO clear screen?
+
+			event.process.stdout.on('data', data => {
+				process.stdout.write(data);
+			});
+
+			event.process.stderr.on('data', data => {
+				process.stderr.write(data);
+			});
+		});
 
 		watcher.on('invalid', (event: events.InvalidEvent) => {
 			const changed = event.changed.map(filename => path.relative(process.cwd(), filename)).join(', ');
-
-			output.clear();
-			output.log(`${colors.bold.cyan(changed)} changed. rebuilding...`);
+			console.log(`\n${colors.bold.cyan(changed)} changed. rebuilding...`);
 		});
 
 		watcher.on('error', (event: events.ErrorEvent) => {
-			output.log(colors.red(`✗ ${event.type}`));
-			output.log(colors.red(event.message));
+			console.log(colors.red(`✗ ${event.type}`));
+			console.log(colors.red(event.message));
 		});
 
 		watcher.on('fatal', (event: events.FatalEvent) => {
-			output.log(colors.bold.red(`> ${event.message}`));
-			if (event.log) output.log(event.log);
+			console.log(colors.bold.red(`> ${event.message}`));
+			if (event.log) console.log(event.log);
 		});
 
 		watcher.on('build', (event: events.BuildEvent) => {
 			if (event.errors.length) {
-				output.log(colors.bold.red(`✗ ${event.type}`));
+				console.log(colors.bold.red(`✗ ${event.type}`));
 
 				event.errors.filter(e => !e.duplicate).forEach(error => {
-					if (error.file) output.log(colors.bold(error.file));
-					output.log(error.message);
+					if (error.file) console.log(colors.bold(error.file));
+					console.log(error.message);
 				});
 
 				const hidden = event.errors.filter(e => e.duplicate).length;
 				if (hidden > 0) {
-					output.log(`${hidden} duplicate ${hidden === 1 ? 'error' : 'errors'} hidden\n`);
+					console.log(`${hidden} duplicate ${hidden === 1 ? 'error' : 'errors'} hidden\n`);
 				}
 			} else if (event.warnings.length) {
-				output.log(colors.bold.yellow(`• ${event.type}`));
+				console.log(colors.bold.yellow(`• ${event.type}`));
 
 				event.warnings.filter(e => !e.duplicate).forEach(warning => {
-					if (warning.file) output.log(colors.bold(warning.file));
-					output.log(warning.message);
+					if (warning.file) console.log(colors.bold(warning.file));
+					console.log(warning.message);
 				});
 
 				const hidden = event.warnings.filter(e => e.duplicate).length;
 				if (hidden > 0) {
-					output.log(`${hidden} duplicate ${hidden === 1 ? 'warning' : 'warnings'} hidden\n`);
+					console.log(`${hidden} duplicate ${hidden === 1 ? 'warning' : 'warnings'} hidden\n`);
 				}
 			} else {
-				output.log(`${colors.bold.green(`✔ ${event.type}`)} ${colors.gray(`(${prettyMs(event.duration)})`)}`);
+				console.log(`${colors.bold.green(`✔ ${event.type}`)} ${colors.gray(`(${prettyMs(event.duration)})`)}`);
 			}
 		});
 	} catch (err) {
-		output.log(colors.bold.red(`> ${err.message}`));
+		console.log(colors.bold.red(`> ${err.message}`));
 		process.exit(1);
 	}
 }

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

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`);
 }

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'}`)
 };

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

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) {

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,7 +170,8 @@ export default function extract_css(client_result: CompileResult, components: Pa
 		return null;
 	}
 
-	const main = client_result.assets.main;
+	let main = client_result.assets.main;
+	if (process.env.SAPPER_LEGACY_BUILD) main = `legacy/${main}`;
 	const entry = fs.readFileSync(`${dirs.dest}/client/${main}`, 'utf-8');
 
 	const replacements = new Map();

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,35 @@ 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');
 
 		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`);
+	}
 }

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[] = [];

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,100 +64,112 @@ 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> = {};
 
-		${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}: 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 => {
+			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;
+
 		export const manifest = {
 			server_routes: [
 				${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}: match[${i + 1}]`).join(', ')} })`
+						? `match => ({ ${route.params.map((param, i) => `${param}: d(match[${i + 1}])`).join(', ')} })`
 						: `() => ({})`}
 				}`).join(',\n\n\t\t\t\t')}
 			],
@@ -160,12 +184,12 @@ 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) {
-								const params = part.params.map((param, i) => `${param}: match[${i + 1}]`);
+								const params = part.params.map((param, i) => `${param}: d(match[${i + 1}])`);
 								props.push(`params: match => ({ ${params.join(', ')} })`);
 							}
 
@@ -178,12 +202,13 @@ function generate_server(
 			root,
 
 			error
-		};
+		};`.replace(/^\t\t/gm, '').trim();
 
-		// this is included for legacy reasons
-		export const routes = {};`.replace(/^\t\t/gm, '').trim();
-
-	return code;
+	return `// This file is generated by Sapper — do not edit it!\n` + template
+		.replace('__BUILD__DIR__', JSON.stringify(locations.dest()))
+		.replace('__SRC__DIR__', JSON.stringify(locations.src()))
+		.replace('__DEV__', dev() ? 'true' : 'false')
+		.replace(/const manifest = __MANIFEST__;/, code);
 }
 
 function get_file(path_to_routes: string, component: PageComponent) {

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

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

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

src/rollup.ts

@@ -5,7 +5,7 @@ export default {
 
 	client: {
 		input: () => {
-			return `${locations.app()}/client.js`
+			return `${locations.src()}/client.js`
 		},
 
 		output: () => {
@@ -24,20 +24,21 @@ export default {
 
 	server: {
 		input: () => {
-			return `${locations.app()}/server.js`
+			return `${locations.src()}/server.js`
 		},
 
 		output: () => {
 			return {
 				dir: locations.dest(),
-				format: 'cjs'
+				format: 'cjs',
+				sourcemap: dev()
 			};
 		}
 	},
 
 	serviceworker: {
 		input: () => {
-			return `${locations.app()}/service-worker.js`;
+			return `${locations.src()}/service-worker.js`;
 		},
 
 		output: () => {

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

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

src/webpack.ts

@@ -6,7 +6,7 @@ export default {
 	client: {
 		entry: () => {
 			return {
-				main: `${locations.app()}/client`
+				main: `${locations.src()}/client`
 			};
 		},
 
@@ -23,7 +23,7 @@ export default {
 	server: {
 		entry: () => {
 			return {
-				server: `${locations.app()}/server`
+				server: `${locations.src()}/server`
 			};
 		},
 
@@ -40,7 +40,7 @@ export default {
 	serviceworker: {
 		entry: () => {
 			return {
-				'service-worker': `${locations.app()}/service-worker`
+				'service-worker': `${locations.src()}/service-worker`
 			};
 		},
 

templates/src/client/app.ts

@@ -0,0 +1,372 @@
+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): 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_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 = `${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);
+	});
+}
+
+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);
+}

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

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

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

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());
+}

templates/src/client/start/index.ts

@@ -0,0 +1,138 @@
+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) {
+		navigate(target, null);
+		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);
+	}
+}

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

templates/src/server/index.ts

@@ -0,0 +1 @@
+export { default as middleware } from './middleware/index';

templates/src/server/middleware/get_page_handler.ts

@@ -1,300 +1,30 @@
 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';
+import { URL } from 'url';
+import { build_dir, dev, src_dir, IGNORE } from '../placeholders';
+import { Manifest, Page, Props, Req, Res, Store } from './types';
 
-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: {
+export function get_page_handler(
 	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
+	store_getter: (req: Req, res: Res) => Store
 ) {
-	const output = locations.dest();
+	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 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
+		? () => read_template(src_dir)
+		: (str => () => str)(read_template(build_dir));
 
-	const template = dev()
-		? () => fs.readFileSync(`${locations.app()}/template.html`, 'utf-8')
-		: (str => () => str)(fs.readFileSync(`${locations.dest()}/template.html`, 'utf-8'));
+	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: ServerResponse, statusCode: number, error: Error | string) {
+	function handle_error(req: Req, res: Res, statusCode: number, error: Error | string) {
 		handle_page({
 			pattern: null,
 			parts: [
@@ -303,7 +33,7 @@ function get_page_handler(
 		}, 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) {
+	function handle_page(page: Page, req: Req, res: Res, status = 200, error: Error | string = null) {
 		const build_info: {
 			bundler: 'rollup' | 'webpack',
 			shimport: string | null,
@@ -312,6 +42,7 @@ function get_page_handler(
 		 } = 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?
@@ -481,7 +212,6 @@ function get_page_handler(
 				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');`;
 			}
@@ -503,6 +233,7 @@ function get_page_handler(
 			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);
@@ -524,9 +255,12 @@ function get_page_handler(
 				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>${script}</script>`)
+				.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);
@@ -544,7 +278,7 @@ function get_page_handler(
 		});
 	}
 
-	return function find_route(req: Req, res: ServerResponse, next: () => void) {
+	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))) {
@@ -560,24 +294,8 @@ function get_page_handler(
 	};
 }
 
-function compose_handlers(handlers: Handler[]) {
-	return (req: Req, res: ServerResponse, next: () => void) => {
-		let i = 0;
-		function go() {
-			const handler = handlers[i];
-
-			if (handler) {
-				handler(req, res, () => {
-					i += 1;
-					go();
-				});
-			} else {
-				next();
-			}
-		}
-
-		go();
-	};
+function read_template(dir = build_dir) {
+	return fs.readFileSync(`${dir}/template.html`, 'utf-8');
 }
 
 function try_serialize(data: any) {
@@ -598,4 +316,4 @@ function escape_html(html: string) {
 	};
 
 	return html.replace(/["'&<>]/g, c => `&${chars[c]};`);
-}
+}

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();
+	};
+}

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();
+		}
+	};
+}

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

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

test/app/app/client.js

@@ -1,13 +0,0 @@
-import { init, 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;

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;

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
 		}

test/app/src/routes/blog/_posts.js

@@ -106,6 +106,14 @@ const posts = [
 			<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: 'Encödïng test',
+		slug: 'encödïng-test',
+		html: `
+			<p>It works</p>
+		`
 	}
 ];
 

test/app/src/routes/echo/page/[slug].html

@@ -0,0 +1,12 @@
+<h1>{slug} ({message})</h1>
+
+<script>
+	export default {
+		preload({ params, query }) {
+			return {
+				slug: params.slug,
+				message: query.message
+			};
+		}
+	};
+</script>

test/app/src/routes/echo/server-route/[slug].js

@@ -0,0 +1,15 @@
+export function get(req, res) {
+	res.writeHead(200, {
+		'Content-Type': 'text/html'
+	});
+
+	res.end(`
+		<!doctype html>
+		<html>
+			<head><meta charset="utf-8"></head>
+			<body>
+				<h1>${req.params.slug}</h1>
+			</body>
+		</html>
+	`);
+}

test/app/src/routes/index.html

@@ -15,6 +15,8 @@
 <a href='credentials?creds=include'>credentials</a>
 <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>
 

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;
@@ -92,8 +91,7 @@ const middlewares = [
 		next();
 	},
 
-	sapper({
-		manifest,
+	sapper.middleware({
 		store: (req, res) => {
 			return new Store({
 				title: `${req.hello} ${res.locals.name}`

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 => {

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

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

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

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

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 = [
@@ -93,6 +91,7 @@ function testExport({ basepath = '' }) {
 				'blog/how-to-use-sapper/index.html',
 				'blog/what-is-sapper/index.html',
 				'blog/why-the-name/index.html',
+				'blog/encödïng-test/index.html',
 
 				'blog.json',
 				'blog/a-very-long-post.json',
@@ -101,6 +100,7 @@ function testExport({ basepath = '' }) {
 				'blog/how-to-use-sapper.json',
 				'blog/what-is-sapper.json',
 				'blog/why-the-name.json',
+				'blog/encödïng-test.json',
 
 				'favicon.png',
 				'global.css',
@@ -178,10 +178,10 @@ 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`, {
@@ -751,18 +751,67 @@ function run({ mode, basepath = '' }) {
 						assert.equal(title, 'reserved words are okay as routes');
 					});
 			});
+
+			it('encodes req.params and req.query for server-rendered pages', () => {
+				return nightmare.goto(`${base}/echo/page/encöded?message=hëllö+wörld`)
+					.page.title()
+					.then(title => {
+						assert.equal(title, 'encöded (hëllö wörld)');
+					});
+			});
+
+			it('encodes req.params and req.query for client-rendered pages', () => {
+				return nightmare.goto(base).init()
+					.click('a[href="echo/page/encöded?message=hëllö+wörld"]')
+					.wait(100)
+					.page.title()
+					.then(title => {
+						assert.equal(title, 'encöded (hëllö wörld)');
+					});
+			});
+
+			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()
+					.then(title => {
+						assert.equal(title, 'encöded');
+					});
+			});
 		});
 
 		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"`;