print warnings in dev mode for unused data

.gitignore

@@ -4,13 +4,10 @@ yarn-error.log
 node_modules
 cypress/screenshots
 test/app/.sapper
-test/app/src/manifest
+test/app/app/manifest
-__sapper__
 test/app/export
 test/app/build
 sapper
 runtime.js
 dist
-!rollup.config.js
+!rollup.config.js
-/runtime/app.mjs
-/runtime/server.mjs

.travis.yml

@@ -3,6 +3,7 @@ sudo: false
 language: node_js
 
 node_js:
+  - "6"
   - "stable"
 
 env:
@@ -17,4 +18,4 @@ addons:
 install:
   - export DISPLAY=':99.0'
   - Xvfb :99 -screen 0 1024x768x24 > /dev/null 2>&1 &
-  - npm ci || npm i
+  - npm install

CHANGELOG.md

@@ -1,231 +1,5 @@
 # sapper changelog
 
-## 0.25.0
-
-* Force refresh on `goto(current_url)` ([#484](https://github.com/sveltejs/sapper/pull/484))
-* Fix preloading navigation bug ([#532](https://github.com/sveltejs/sapper/issues/532))
-* Don't mutate opts.headers ([#528](https://github.com/sveltejs/sapper/issues/528))
-* Don't crawl hundreds of pages simultaneously ([#369](https://github.com/sveltejs/sapper/pull/369))
-
-## 0.24.3
-
-* Add service-worker-index.html shell file for offline support ([#422](https://github.com/sveltejs/sapper/issues/422))
-* Don't cache .map files ([#534](https://github.com/sveltejs/sapper/issues/534))
-
-## 0.24.2
-
-* Support Rollup 1.0 ([#541](https://github.com/sveltejs/sapper/pull/541))
-
-## 0.24.1
-
-* Include CSS chunks in webpack build info to avoid duplication ([#529](https://github.com/sveltejs/sapper/pull/529))
-* Fix preload `as` for styles ([#530](https://github.com/sveltejs/sapper/pull/530))
-
-## 0.24.0
-
-* Handle external URLs in `this.redirect` ([#490](https://github.com/sveltejs/sapper/issues/490))
-* Strip leading `/` from basepath ([#495](https://github.com/sveltejs/sapper/issues/495))
-* Treat duplicate query string parameters as arrays ([#497](https://github.com/sveltejs/sapper/issues/497))
-* Don't buffer `stdout` and `stderr` ([#305](https://github.com/sveltejs/sapper/issues/305))
-* Posixify `build_dir` ([#498](https://github.com/sveltejs/sapper/pull/498))
-* Use `page[XY]Offset` instead of `scroll[XY]` ([#480](https://github.com/sveltejs/sapper/issues/480))
-
-## 0.23.5
-
-* Include lazily-imported CSS in main CSS chunk ([#492](https://github.com/sveltejs/sapper/pull/492))
-* Make search param decoding spec-compliant ([#493](https://github.com/sveltejs/sapper/pull/493))
-* Handle async route errors ([#488](https://github.com/sveltejs/sapper/pull/488))
-
-## 0.23.4
-
-* Ignore empty anchors when exporting ([#491](https://github.com/sveltejs/sapper/pull/491))
-
-## 0.23.3
-
-* Clear `error` and `status` on successful render ([#477](https://github.com/sveltejs/sapper/pull/477))
-
-## 0.23.2
-
-* Fix entry point CSS ([#471](https://github.com/sveltejs/sapper/pull/471))
-
-## 0.23.1
-
-* Scroll to deeplink that matches current URL ([#472](https://github.com/sveltejs/sapper/pull/472))
-* Scroll to deeplink on another page ([#341](https://github.com/sveltejs/sapper/issues/341))
-
-## 0.23.0
-
-* Overhaul internal APIs ([#468](https://github.com/sveltejs/sapper/pull/468))
-* Remove unused `sapper start` and `sapper upgrade` ([#468](https://github.com/sveltejs/sapper/pull/468))
-* Remove magic environment variables ([#469](https://github.com/sveltejs/sapper/pull/469))
-* Preserve SSI comments ([#470](https://github.com/sveltejs/sapper/pull/470))
-
-## 0.22.10
-
-* Handle `sapper-noscroll` attribute on `<a>` elements ([#376](https://github.com/sveltejs/sapper/issues/376))
-* Fix CSS paths when using a base path ([#466](https://github.com/sveltejs/sapper/pull/466))
-
-## 0.22.9
-
-* Fix legacy builds ([#462](https://github.com/sveltejs/sapper/pull/462))
-
-## 0.22.8
-
-* Ensure CSS placeholders are overwritten ([#462](https://github.com/sveltejs/sapper/pull/462))
-
-## 0.22.7
-
-* Fix cookies ([#460](https://github.com/sveltejs/sapper/pull/460))
-
-## 0.22.6
-
-* Normalise chunk filenames on Windows ([#456](https://github.com/sveltejs/sapper/pull/456))
-* Load modules with credentials ([#458](https://github.com/sveltejs/sapper/pull/458))
-
-## 0.22.5
-
-* Fix `sapper dev`. Oops.
-
-## 0.22.4
-
-* Ensure launcher does not overwrite a module ([#455](https://github.com/sveltejs/sapper/pull/455))
-
-## 0.22.3
-
-* Prevent server from accidentally importing dev client
-
-## 0.22.2
-
-* Make paths in generated code relative to project
-
-## 0.22.1
-
-* Fix `pkg.files`
-
-## 0.22.0
-
-* Move generated files into `__sapper__` ([#453](https://github.com/sveltejs/sapper/pull/453))
-* Change default build and export directories to `__sapper__/build` and `__sapper__/export` ([#453](https://github.com/sveltejs/sapper/pull/453))
-
-## 0.21.1
-
-* Read template from build directory in production
-
-## 0.21.0
-
-* Change project folder structure ([#432](https://github.com/sveltejs/sapper/issues/432))
-* Escape filenames ([#446](https://github.com/sveltejs/sapper/pull/446/))
-
-## 0.20.4
-
-* Fix legacy build CSS ([#439](https://github.com/sveltejs/sapper/issues/439))
-* Enable debugging in Chrome and VSCode ([#435](https://github.com/sveltejs/sapper/issues/435))
-
-## 0.20.3
-
-* Inject `nonce` attribute if `res.locals.nonce` is present ([#424](https://github.com/sveltejs/sapper/pull/424))
-* Prevent service worker caching ([#428](https://github.com/sveltejs/sapper/pull/428))
-* Consistent caching for HTML responses ([#429](https://github.com/sveltejs/sapper/pull/429))
-
-## 0.20.2
-
-* Add `immutable` cache control header for hashed assets ([#425](https://github.com/sveltejs/sapper/pull/425))
-* Handle value-less query string params ([#426](https://github.com/sveltejs/sapper/issues/426))
-
-## 0.20.1
-
-* Update shimport
-
-## 0.20.0
-
-* Decode `req.params` and `req.query` ([#417](https://github.com/sveltejs/sapper/issues/417))
-* 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))
-
-## 0.19.2
-
-* Ignore editor tmp files ([#220](https://github.com/sveltejs/sapper/issues/220))
-* Ignore clicks an `<a>` element without `href` ([#235](https://github.com/sveltejs/sapper/issues/235))
-* Allow routes that are reserved JavaScript words ([#315](https://github.com/sveltejs/sapper/issues/315))
-* Print out webpack errors ([#403](https://github.com/sveltejs/sapper/issues/403))
-
-## 0.19.1
-
-* Don't include local origin in export redirects ([#409](https://github.com/sveltejs/sapper/pull/409))
-
-## 0.19.0
-
-* Extract styles out of JS into .css files, for Rollup apps ([#388](https://github.com/sveltejs/sapper/issues/388))
-* Fix `prefetchRoutes` ([#380](https://github.com/sveltejs/sapper/issues/380))
-
-## 0.18.7
-
-* Support differential bundling for Rollup apps via a `--legacy` flag ([#280](https://github.com/sveltejs/sapper/issues/280))
-
-## 0.18.6
-
-* Bundle missing dependency
-
-## 0.18.5
-
-* Bugfix
-
-## 0.18.4
-
-* Handle non-Sapper responses when exporting ([#382](https://github.com/sveltejs/sapper/issues/392))
-* Add `--dev-port` flag to `sapper dev` ([#381](https://github.com/sveltejs/sapper/issues/381))
-
-## 0.18.3
-
-* Fix service worker Rollup build config
-
-## 0.18.2
-
-* Update `pkg.files`
-
-## 0.18.1
-
-* Add live reloading ([#385](https://github.com/sveltejs/sapper/issues/385))
-
-## 0.18.0
-
-* Rollup support ([#379](https://github.com/sveltejs/sapper/pull/379))
-* Fail `export` if a page times out (configurable with `--timeout`) ([#378](https://github.com/sveltejs/sapper/pull/378))
-
-## 0.17.1
-
-* Print which file is causing build errors/warnings ([#371](https://github.com/sveltejs/sapper/pull/371))
-
-## 0.17.0
-
-* Use `cheap-watch` instead of `chokidar` ([#364](https://github.com/sveltejs/sapper/issues/364))
-
-## 0.16.1
-
-* Fix file watching regression in previous version
-
-## 0.16.0
-
-* Slim down installed package ([#363](https://github.com/sveltejs/sapper/pull/363))
-
-## 0.15.8
-
-* Only set `preloading: true` on navigation, not prefetch ([#352](https://github.com/sveltejs/sapper/issues/352))
-* Provide fallback for missing preload errors ([#361](https://github.com/sveltejs/sapper/pull/361))
-
-## 0.15.7
-
-* Strip leading slash from redirects ([#291](https://github.com/sveltejs/sapper/issues/291))
-* Pass `(req, res)` to store getter ([#344](https://github.com/sveltejs/sapper/issues/344))
-
-## 0.15.6
-
-* Fix exporting with custom basepath ([#342](https://github.com/sveltejs/sapper/pull/342))
-
 ## 0.15.5
 
 * Faster `export` with more explanatory output ([#335](https://github.com/sveltejs/sapper/pull/335))

README.md

@@ -11,11 +11,9 @@ Sapper is a framework for building high-performance universal web apps. [Read th
 ## Get started
 
 Clone the [starter project template](https://github.com/sveltejs/sapper-template) with [degit](https://github.com/rich-harris/degit)...
-When cloning you have to choose between rollup or webpack:
 
 ```bash
-npx degit "sveltejs/sapper-template#rollup" my-app
+npx degit sveltejs/sapper-template my-app
-# or: npx degit "sveltejs/sapper-template#webpack" my-app
 ```
 
 ...then install dependencies and start the dev server...

api.js

@@ -1 +1 @@
-module.exports = require('./dist/api.js');
+module.exports = require('./dist/api.ts.js');

appveyor.yml

@@ -10,11 +10,11 @@ build: off
 environment:
   matrix:
     # node.js
-    - nodejs_version: 11
+    - nodejs_version: 10.5
 
 install:
   - ps: Install-Product node $env:nodejs_version
-  - npm ci
+  - npm install
 
 test_script:
   - node --version && npm --version

components/default-layout.html

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

config/rollup.js

@@ -1 +0,0 @@
-module.exports = require('../dist/rollup.js');

config/webpack.js

@@ -1 +0,0 @@
-module.exports = require('../dist/webpack.js');

cypress.json

@@ -0,0 +1,9 @@
+{
+	"baseUrl": "http://localhost:3000",
+	"videoRecording": false,
+	"fixturesFolder": "test/cypress/fixtures",
+	"integrationFolder": "test/cypress/integration",
+	"pluginsFile": false,
+	"screenshotsFolder": "test/cypress/screenshots",
+	"supportFile": "test/cypress/support/index.js"
+}

index.js

@@ -1 +0,0 @@
-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`);

mocha.opts

@@ -1,4 +1,4 @@
 --require source-map-support/register
---require sucrase/register
 --recursive
-test/apps/*/test.ts
+test/unit/*/*.js
+test/common/test.js

package.json

@@ -1,76 +1,77 @@
 {
   "name": "sapper",
-  "version": "0.26.0-alpha.12",
+  "version": "0.15.4",
   "description": "Military-grade apps, engineered by Svelte",
+  "main": "dist/middleware.ts.js",
   "bin": {
     "sapper": "./sapper"
   },
   "files": [
     "*.js",
+    "*.ts.js",
+    "runtime",
     "webpack",
-    "config",
     "sapper",
-    "dist/*.js",
+    "components",
-    "runtime/*.mjs",
+    "dist"
-    "runtime/internal"
   ],
   "directories": {
     "test": "test"
   },
   "dependencies": {
-    "html-minifier": "^3.5.21",
+    "ansi-colors": "^2.0.1",
-    "http-link-header": "^1.0.2",
+    "cheerio": "^1.0.0-rc.2",
-    "shimport": "0.0.14",
+    "chokidar": "^2.0.3",
-    "sourcemap-codec": "^1.4.4",
+    "cookie": "^0.3.1",
-    "string-hash": "^1.1.3"
+    "devalue": "^1.0.4",
+    "glob": "^7.1.2",
+    "html-minifier": "^3.5.16",
+    "mkdirp": "^0.5.1",
+    "node-fetch": "^2.1.1",
+    "port-authority": "^1.0.5",
+    "pretty-bytes": "^5.0.0",
+    "pretty-ms": "^3.1.0",
+    "require-relative": "^0.8.7",
+    "rimraf": "^2.6.2",
+    "sade": "^1.4.1",
+    "sander": "^0.6.0",
+    "source-map-support": "^0.5.6",
+    "tslib": "^1.9.1",
+    "url-parse": "^1.2.0",
+    "webpack-format-messages": "^2.0.1"
   },
   "devDependencies": {
-    "@types/mocha": "^5.2.5",
+    "@types/glob": "^5.0.34",
-    "@types/node": "^10.12.21",
+    "@types/mkdirp": "^0.5.2",
-    "@types/puppeteer": "^1.11.3",
+    "@types/rimraf": "^2.0.2",
-    "agadoo": "^1.0.1",
+    "compression": "^1.7.1",
-    "cheap-watch": "^1.0.2",
+    "eslint": "^4.13.1",
-    "cookie": "^0.3.1",
+    "eslint-plugin-import": "^2.12.0",
-    "devalue": "^1.1.0",
+    "express": "^4.16.3",
-    "eslint": "^5.12.1",
-    "eslint-plugin-import": "^2.16.0",
-    "kleur": "^3.0.1",
     "mocha": "^5.2.0",
-    "node-fetch": "^2.3.0",
+    "nightmare": "^3.0.0",
-    "npm-run-all": "^4.1.5",
+    "npm-run-all": "^4.1.3",
-    "polka": "^0.5.1",
+    "polka": "^0.4.0",
-    "port-authority": "^1.0.5",
+    "rollup": "^0.59.2",
-    "pretty-bytes": "^5.1.0",
+    "rollup-plugin-commonjs": "^9.1.3",
-    "puppeteer": "^1.12.0",
+    "rollup-plugin-json": "^3.0.0",
-    "require-relative": "^0.8.7",
-    "rollup": "^1.1.2",
-    "rollup-plugin-commonjs": "^9.2.0",
-    "rollup-plugin-json": "^3.1.0",
-    "rollup-plugin-node-resolve": "^4.0.0",
-    "rollup-plugin-replace": "^2.1.0",
     "rollup-plugin-string": "^2.0.2",
-    "rollup-plugin-sucrase": "^2.1.0",
+    "rollup-plugin-typescript": "^0.8.1",
-    "rollup-plugin-svelte": "^5.0.3",
+    "serve-static": "^1.13.2",
-    "sade": "^1.4.2",
+    "svelte": "^2.6.3",
-    "sirv": "^0.2.2",
+    "svelte-loader": "^2.9.0",
-    "sucrase": "^3.9.5",
+    "typescript": "^2.8.3",
-    "svelte": "^3.0.0-beta.11",
+    "walk-sync": "^0.3.2",
-    "svelte-loader": "^2.13.3",
+    "webpack": "^4.8.3"
-    "webpack": "^4.29.0",
-    "webpack-format-messages": "^2.0.5",
-    "yootils": "0.0.14"
-  },
-  "peerDependencies": {
-    "svelte": "^3.0.0"
   },
   "scripts": {
+    "cy:open": "cypress open",
     "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 \"^[^#]\" > runtime/src/server/middleware/mime-types.md"
+    "update_mime_types": "curl http://svn.apache.org/repos/asf/httpd/httpd/trunk/docs/conf/mime.types | grep -e \"^[^#]\" > src/middleware/mime-types.md"
   },
   "repository": "https://github.com/sveltejs/sapper",
   "keywords": [

rollup.config.js

@@ -1,53 +1,37 @@
-import sucrase from 'rollup-plugin-sucrase';
+import typescript from 'rollup-plugin-typescript';
 import string from 'rollup-plugin-string';
 import json from 'rollup-plugin-json';
-import resolve from 'rollup-plugin-node-resolve';
 import commonjs from 'rollup-plugin-commonjs';
 import pkg from './package.json';
-import { builtinModules } from 'module';
 
 const external = [].concat(
 	Object.keys(pkg.dependencies),
 	Object.keys(process.binding('natives')),
-	'sapper/core.js',
+	'sapper/core.js'
-	'svelte/compiler'
 );
 
-function template(kind, external) {
+export default [
-	return {
+	{
-		input: `runtime/src/${kind}/index.ts`,
+		input: `src/runtime/index.ts`,
 		output: {
-			file: `runtime/${kind}.mjs`,
+			file: `runtime.js`,
-			format: 'es',
+			format: 'es'
-			paths: id => id.replace('@sapper', '.')
 		},
-		external,
 		plugins: [
-			resolve({
+			typescript({
-				extensions: ['.mjs', '.js', '.ts']
+				typescript: require('typescript'),
-			}),
+				target: "ES2017"
-			commonjs(),
-			string({
-				include: '**/*.md'
-			}),
-			sucrase({
-				transforms: ['typescript']
 			})
 		]
-	};
+	},
-}
-
-export default [
-	template('app', id => /^(svelte\/?|@sapper\/)/.test(id)),
-	template('server', id => /^(svelte\/?|@sapper\/)/.test(id) || builtinModules.includes(id)),
 
 	{
 		input: [
 			`src/api.ts`,
 			`src/cli.ts`,
 			`src/core.ts`,
-			`src/config/rollup.ts`,
+			`src/middleware.ts`,
-			`src/config/webpack.ts`
+			`src/webpack.ts`
 		],
 		output: {
 			dir: 'dist',
@@ -56,14 +40,16 @@ export default [
 		},
 		external,
 		plugins: [
-			json(),
+			string({
-			resolve({
+				include: '**/*.md'
-				extensions: ['.mjs', '.js', '.ts']
 			}),
+			json(),
 			commonjs(),
-			sucrase({
+			typescript({
-				transforms: ['typescript']
+				typescript: require('typescript')
 			})
-		]
+		],
+		experimentalCodeSplitting: true,
+		experimentalDynamicImport: true
 	}
-];
+];

runtime/README.md

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

runtime/app.js

@@ -0,0 +1,2 @@
+console.error('sapper/runtime/app.js has been deprecated in favour of sapper/runtime.js');
+export * from '../runtime.js';

runtime/internal/Sapper.svelte

@@ -1,12 +0,0 @@
-<script>
-	import { setContext } from 'svelte';
-	import { CONTEXT_KEY } from './shared';
-
-	export let Root;
-	export let props;
-	export let session;
-
-	setContext(CONTEXT_KEY, session);
-</script>
-
-<Root {...props}/>

runtime/internal/error.svelte

@@ -1,7 +0,0 @@
-<h1>{status}</h1>
-
-<p>{error.message}</p>
-
-{#if process.env.NODE_ENV === 'development'}
-	<pre>{error.stack}</pre>
-{/if}

runtime/internal/layout.svelte

@@ -1 +0,0 @@
-<slot></slot>

runtime/internal/shared.mjs

@@ -1,10 +0,0 @@
-import { writable } from 'svelte/store';
-
-export const stores = {
-	preloading: writable(false),
-	page: writable(null)
-};
-
-export const CONTEXT_KEY = {};
-
-export const preload = () => ({});

runtime/src/app/app.ts

@@ -1,349 +0,0 @@
-import { writable } from 'svelte/store.mjs';
-import App from '@sapper/internal/App.svelte';
-import { stores } from '@sapper/internal/shared';
-import { Root, root_preload, ErrorComponent, ignore, components, routes } from '@sapper/internal/manifest-client';
-import {
-	Target,
-	ScrollPosition,
-	Component,
-	Redirect,
-	ComponentLoader,
-	ComponentConstructor,
-	Route,
-	Query,
-	Page
-} from './types';
-import goto from './goto';
-
-declare const __SAPPER__;
-export const initial_data = typeof __SAPPER__ !== 'undefined' && __SAPPER__;
-
-let ready = false;
-let root_component: Component;
-let current_token: {};
-let root_preloaded: Promise<any>;
-let current_branch = [];
-
-const session = writable(initial_data && initial_data.session);
-
-let $session;
-let session_dirty: boolean;
-
-session.subscribe(async value => {
-	$session = value;
-
-	if (!ready) return;
-	session_dirty = true;
-
-	const target = select_target(new URL(location.href));
-
-	const token = current_token = {};
-	const { redirect, props, branch } = await hydrate_target(target);
-	if (token !== current_token) return; // a secondary navigation happened while we were loading
-
-	await render(redirect, branch, props, target.page);
-});
-
-export let prefetching: {
-	href: string;
-	promise: Promise<{ redirect?: Redirect, data?: any }>;
-} = 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;
-}
-
-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 extract_query(search: string) {
-	const query = Object.create(null);
-	if (search.length > 0) {
-		search.slice(1).split('&').forEach(searchParam => {
-			let [, key, value] = /([^=]*)(?:=(.*))?/.exec(decodeURIComponent(searchParam));
-			value = (value || '').replace(/\+/g, ' ');
-			if (typeof query[key] === 'string') query[key] = [<string>query[key]];
-			if (typeof query[key] === 'object') (query[key] as string[]).push(value);
-			else query[key] = value;
-		});
-	}
-	return query;
-}
-
-export function select_target(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 page routes
-	if (ignore.some(pattern => pattern.test(path))) return;
-
-	for (let i = 0; i < routes.length; i += 1) {
-		const route = routes[i];
-
-		const match = route.pattern.exec(path);
-
-		if (match) {
-			const query: Query = extract_query(url.search);
-			const part = route.parts[route.parts.length - 1];
-			const params = part.params ? part.params(match) : {};
-
-			const page = { path, query, params };
-
-			return { href: url.href, route, match, page };
-		}
-	}
-}
-
-export function handle_error(url: URL) {
-	const { pathname, search } = location;
-	const { session, preloaded, status, error } = initial_data;
-
-	if (!root_preloaded) {
-		root_preloaded = preloaded && preloaded[0]
-	}
-
-	const props = {
-		error,
-		status,
-		session,
-		level0: {
-			props: root_preloaded
-		},
-		level1: {
-			props: {
-				status,
-				error
-			},
-			component: ErrorComponent
-		},
-		segments: preloaded
-
-	}
-	const query = extract_query(search);
-	render(null, [], props, { path: pathname, query, params: {} });
-}
-
-export function scroll_state() {
-	return {
-		x: pageXOffset,
-		y: pageYOffset
-	};
-}
-
-export async function navigate(target: Target, id: number, noscroll?: boolean, hash?: string): Promise<any> {
-	if (id) {
-		// popstate or initial navigation
-		cid = id;
-	} else {
-		const current_scroll = scroll_state();
-
-		// clicked on a link. preserve scroll state
-		scroll_history[cid] = current_scroll;
-
-		id = cid = ++uid;
-		scroll_history[cid] = noscroll ? current_scroll : { x: 0, y: 0 };
-	}
-
-	cid = id;
-
-	if (root_component) stores.preloading.set(true);
-
-	const loaded = prefetching && prefetching.href === target.href ?
-		prefetching.promise :
-		hydrate_target(target);
-
-	prefetching = null;
-
-	const token = current_token = {};
-	const { redirect, props, branch } = await loaded;
-	if (token !== current_token) return; // a secondary navigation happened while we were loading
-
-	await render(redirect, branch, props, target.page);
-	if (document.activeElement) document.activeElement.blur();
-
-	if (!noscroll) {
-		let scroll = scroll_history[id];
-
-		if (hash) {
-			// scroll is an element id (from a hash), we need to compute y.
-			const deep_linked = document.getElementById(hash.slice(1));
-
-			if (deep_linked) {
-				scroll = {
-					x: 0,
-					y: deep_linked.getBoundingClientRect().top
-				};
-			}
-		}
-
-		scroll_history[cid] = scroll;
-		if (scroll) scrollTo(scroll.x, scroll.y);
-	}
-}
-
-async function render(redirect: Redirect, branch: any[], props: any, page: Page) {
-	if (redirect) return goto(redirect.location, { replaceState: true });
-
-	stores.page.set(page);
-	stores.preloading.set(false);
-
-	if (root_component) {
-		root_component.$set(props);
-	} else {
-		props.session = session;
-		props.level0 = {
-			props: await root_preloaded
-		};
-
-		// 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);
-		}
-
-		root_component = new App({
-			target,
-			props,
-			hydrate: true
-		});
-	}
-
-	current_branch = branch;
-	ready = true;
-	session_dirty = false;
-}
-
-export async function hydrate_target(target: Target): Promise<{
-	redirect?: Redirect;
-	props?: any;
-	branch?: Array<{ Component: ComponentConstructor, preload: (page) => Promise<any>, segment: string }>;
-}> {
-	const { route, page } = target;
-	const segments = page.path.split('/').filter(Boolean);
-
-	let redirect: Redirect = null;
-
-	const props = { error: null, status: 200, segments: [segments[0]] };
-
-	const preload_context = {
-		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: (status: number, error: Error | string) => {
-			props.error = typeof error === 'string' ? new Error(error) : error;
-			props.status = status;
-		}
-	};
-
-	if (!root_preloaded) {
-		root_preloaded = initial_data.preloaded[0] || root_preload.call(preload_context, {
-			path: page.path,
-			query: page.query,
-			params: {}
-		}, $session);
-	}
-
-	let branch;
-	let l = 1;
-
-	try {
-		branch = await Promise.all(route.parts.map(async (part, i) => {
-			props.segments[l] = segments[i + 1]; // TODO make this less confusing
-			if (!part) return null;
-
-			const j = l++;
-
-			const segment = segments[i];
-			if (!session_dirty && current_branch[i] && current_branch[i].segment === segment && current_branch[i].part === part.i) return current_branch[i];
-
-			const { default: component, preload } = await load_component(components[part.i]);
-
-			let preloaded;
-			if (ready || !initial_data.preloaded[i + 1]) {
-				preloaded = preload
-					? await preload.call(preload_context, {
-						path: page.path,
-						query: page.query,
-						params: part.params ? part.params(target.match) : {}
-					}, $session)
-					: {};
-			} else {
-				preloaded = initial_data.preloaded[i + 1];
-			}
-
-			return (props[`level${j}`] = { component, props: preloaded, segment, part: part.i });
-		}));
-	} catch (error) {
-		props.error = error;
-		props.status = 500;
-		branch = [];
-	}
-
-	return { redirect, props, branch };
-}
-
-function load_css(chunk: string) {
-	const href = `client/${chunk}`;
-	if (document.querySelector(`link[href="${href}"]`)) return;
-
-	return new Promise((fulfil, reject) => {
-		const link = document.createElement('link');
-		link.rel = 'stylesheet';
-		link.href = href;
-
-		link.onload = () => fulfil();
-		link.onerror = reject;
-
-		document.head.appendChild(link);
-	});
-}
-
-export function load_component(component: ComponentLoader): Promise<{
-	default: ComponentConstructor,
-	preload?: (input: any) => any
-}> {
-	// 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]);
-}
-
-function detach(node: Node) {
-	node.parentNode.removeChild(node);
-}

runtime/src/app/goto/index.ts

@@ -1,13 +0,0 @@
-import { history, select_target, navigate, cid } from '../app';
-
-export default function goto(href: string, opts = { replaceState: false }) {
-	const target = select_target(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
-}

runtime/src/app/index.ts

@@ -1,12 +0,0 @@
-import { getContext } from 'svelte';
-import { CONTEXT_KEY, stores } from '@sapper/internal/shared';
-
-export const preloading = { subscribe: stores.preloading.subscribe };
-export const page = { subscribe: stores.page.subscribe };
-
-export const getSession = () => getContext(CONTEXT_KEY);
-
-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';

runtime/src/app/prefetch/index.ts

@@ -1,14 +0,0 @@
-import { select_target, prefetching, set_prefetching, hydrate_target } from '../app';
-import { Target } from '../types';
-
-export default function prefetch(href: string) {
-	const target: Target = select_target(new URL(href, document.baseURI));
-
-	if (target) {
-		if (!prefetching || href !== prefetching.href) {
-			set_prefetching(href, hydrate_target(target));
-		}
-
-		return prefetching.promise;
-	}
-}

runtime/src/app/prefetchRoutes/index.ts

@@ -1,13 +0,0 @@
-import { components, routes } from '@sapper/internal/manifest-client';
-import { load_component } from '../app';
-
-export default function prefetchRoutes(pathnames: string[]) {
-	return routes
-		.filter(pathnames
-			? route => pathnames.some(pathname => route.pattern.test(pathname))
-			: () => true
-		)
-		.reduce((promise: Promise<any>, route) => promise.then(() => {
-			return Promise.all(route.parts.map(part => part && load_component(components[part.i])));
-		}), Promise.resolve());
-}

runtime/src/app/start/index.ts

@@ -1,133 +0,0 @@
-import {
-	cid,
-	history,
-	initial_data,
-	navigate,
-	scroll_history,
-	scroll_state,
-	select_target,
-	handle_error,
-	set_target,
-	uid,
-	set_uid,
-	set_cid
-} from '../app';
-import prefetch from '../prefetch/index';
-
-export default function start(opts: {
-	target: Node
-}) {
-	if ('scrollRestoration' in history) {
-		history.scrollRestoration = 'manual';
-	}
-
-	set_target(opts.target);
-
-	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;
-
-		history.replaceState({ id: uid }, '', href);
-
-		const url = new URL(location.href);
-
-		if (initial_data.error) return handle_error(url);
-
-		const target = select_target(url);
-		if (target) return navigate(target, uid, false, hash);
-	});
-}
-
-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) {
-		if (!location.hash) 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_target(url);
-	if (target) {
-		const noscroll = a.hasAttribute('sapper-noscroll');
-		navigate(target, null, noscroll, url.hash);
-		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_target(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);
-	}
-}

runtime/src/server/constants.js

@@ -1 +0,0 @@
-export const IGNORE = '__SAPPER__IGNORE__';

runtime/src/server/index.ts

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

runtime/src/server/middleware/get_page_handler.ts

@@ -1,367 +0,0 @@
-import { writable } from 'svelte/store.mjs';
-import fs from 'fs';
-import path from 'path';
-import cookie from 'cookie';
-import devalue from 'devalue';
-import fetch from 'node-fetch';
-import URL from 'url';
-import { IGNORE } from '../constants';
-import { Manifest, Page, Props, Req, Res } from './types';
-import { build_dir, dev, src_dir } from '@sapper/internal/manifest-server';
-import { stores } from '@sapper/internal/shared';
-import App from '@sapper/internal/App.svelte';
-
-export function get_page_handler(
-	manifest: Manifest,
-	session_getter: (req: Req, res: Res) => any
-) {
-	const get_build_info = dev
-		? () => JSON.parse(fs.readFileSync(path.join(build_dir, 'build.json'), 'utf-8'))
-		: (assets => () => assets)(JSON.parse(fs.readFileSync(path.join(build_dir, 'build.json'), 'utf-8')));
-
-	const template = dev
-		? () => read_template(src_dir)
-		: (str => () => str)(read_template(build_dir));
-
-	const has_service_worker = fs.existsSync(path.join(build_dir, 'service-worker.js'));
-
-	const { server_routes, pages } = manifest;
-	const error_route = manifest.error;
-
-	function handle_error(req: Req, res: Res, statusCode: number, error: Error | string) {
-		handle_page({
-			pattern: null,
-			parts: [
-				{ name: null, component: error_route }
-			]
-		}, req, res, statusCode, error || new Error('Unknown error in preload function'));
-	}
-
-	async function handle_page(page: Page, req: Req, res: Res, status = 200, error: Error | string = null) {
-		const is_service_worker_index = req.path === '/service-worker-index.html';
-		const build_info: {
-			bundler: 'rollup' | 'webpack',
-			shimport: string | null,
-			assets: Record<string, string | string[]>,
-			legacy_assets?: Record<string, string>
-		 } = get_build_info();
-
-		res.setHeader('Content-Type', 'text/html');
-		res.setHeader('Cache-Control', dev ? 'no-cache' : 'max-age=600');
-
-		// preload main.js and current route
-		// TODO detect other stuff we can preload? images, CSS, fonts?
-		let preloaded_chunks = Array.isArray(build_info.assets.main) ? build_info.assets.main : [build_info.assets.main];
-		if (!error && !is_service_worker_index) {
-			page.parts.forEach(part => {
-				if (!part) return;
-
-				// using concat because it could be a string or an array. thanks webpack!
-				preloaded_chunks = preloaded_chunks.concat(build_info.assets[part.name]);
-			});
-		}
-
-		if (build_info.bundler === 'rollup') {
-			// TODO add dependencies and CSS
-			const link = preloaded_chunks
-				.filter(file => file && !file.match(/\.map$/))
-				.map(file => `<${req.baseUrl}/client/${file}>;rel="modulepreload"`)
-				.join(', ');
-
-			res.setHeader('Link', link);
-		} else {
-			const link = preloaded_chunks
-				.filter(file => file && !file.match(/\.map$/))
-				.map((file) => {
-					const as = /\.css$/.test(file) ? 'style' : 'script';
-					return `<${req.baseUrl}/client/${file}>;rel="preload";as="${as}"`;
-				})
-				.join(', ');
-
-			res.setHeader('Link', link);
-		}
-
-		const session = session_getter(req, res);
-
-		let redirect: { statusCode: number, location: string };
-		let preload_error: { statusCode: number, message: Error | string };
-
-		const preload_context = {
-			redirect: (statusCode: number, location: string) => {
-				if (redirect && (redirect.statusCode !== statusCode || redirect.location !== location)) {
-					throw new Error(`Conflicting redirects`);
-				}
-				location = location.replace(/^\//g, ''); // leading slash (only)
-				redirect = { statusCode, location };
-			},
-			error: (statusCode: number, message: Error | string) => {
-				preload_error = { statusCode, message };
-			},
-			fetch: (url: string, opts?: any) => {
-				const parsed = new URL.URL(url, `http://127.0.0.1:${process.env.PORT}${req.baseUrl ? req.baseUrl + '/' :''}`);
-
-				if (opts) {
-					opts = Object.assign({}, opts);
-
-					const include_cookies = (
-						opts.credentials === 'include' ||
-						opts.credentials === 'same-origin' && parsed.origin === `http://127.0.0.1:${process.env.PORT}`
-					);
-
-					if (include_cookies) {
-						opts.headers = Object.assign({}, opts.headers);
-
-						const cookies = Object.assign(
-							{},
-							cookie.parse(req.headers.cookie || ''),
-							cookie.parse(opts.headers.cookie || '')
-						);
-
-						const set_cookie = res.getHeader('Set-Cookie');
-						(Array.isArray(set_cookie) ? set_cookie : [set_cookie]).forEach(str => {
-							const match = /([^=]+)=([^;]+)/.exec(<string>str);
-							if (match) cookies[match[1]] = match[2];
-						});
-
-						const str = Object.keys(cookies)
-							.map(key => `${key}=${cookies[key]}`)
-							.join('; ');
-
-						opts.headers.cookie = str;
-					}
-				}
-
-				return fetch(parsed.href, opts);
-			}
-		};
-
-		let preloaded;
-		let match;
-		let params;
-
-		try {
-			const root_preloaded = manifest.root_preload
-				? manifest.root_preload.call(preload_context, {
-					path: req.path,
-					query: req.query,
-					params: {}
-				}, session)
-				: {};
-
-			match = error ? null : page.pattern.exec(req.path);
-
-
-			let toPreload = [root_preloaded];
-			if (!is_service_worker_index) {
-				toPreload = toPreload.concat(page.parts.map(part => {
-					if (!part) return null;
-
-					// the deepest level is used below, to initialise the store
-					params = part.params ? part.params(match) : {};
-
-					return part.preload
-						? part.preload.call(preload_context, {
-							path: req.path,
-							query: req.query,
-							params
-						}, session)
-						: {};
-				}))
-			}
-
-			preloaded = await Promise.all(toPreload);
-		} catch (err) {
-			preload_error = { statusCode: 500, message: err };
-			preloaded = []; // appease TypeScript
-		}
-
-		try {
-			if (redirect) {
-				const location = URL.resolve(req.baseUrl || '/', redirect.location);
-
-				res.statusCode = redirect.statusCode;
-				res.setHeader('Location', location);
-				res.end();
-
-				return;
-			}
-
-			if (preload_error) {
-				handle_error(req, res, preload_error.statusCode, preload_error.message);
-				return;
-			}
-
-			const segments = req.path.split('/').filter(Boolean);
-
-			// TODO make this less confusing
-			const layout_segments = [segments[0]];
-			let l = 1;
-
-			page.parts.forEach((part, i) => {
-				layout_segments[l] = segments[i + 1];
-				if (!part) return null;
-				l++;
-			});
-
-			const props = {
-				segments: layout_segments,
-				status: error ? status : 200,
-				error: error ? error instanceof Error ? error : { message: error } : null,
-				session: writable(session),
-				level0: {
-					props: preloaded[0]
-				},
-				level1: {
-					segment: segments[0],
-					props: {}
-				}
-			};
-
-			if (!is_service_worker_index) {
-				let l = 1;
-				for (let i = 0; i < page.parts.length; i += 1) {
-					const part = page.parts[i];
-					if (!part) continue;
-
-					props[`level${l++}`] = {
-						component: part.component,
-						props: preloaded[i + 1] || {},
-						segment: segments[i]
-					};
-				}
-			}
-
-			stores.page.set({
-				path: req.path,
-				query: req.query,
-				params: params
-			});
-
-			const { html, head, css } = App.render(props);
-
-			const serialized = {
-				preloaded: `[${preloaded.map(data => try_serialize(data)).join(',')}]`,
-				session: session && try_serialize(session, err => {
-					throw new Error(`Failed to serialize session data: ${err.message}`);
-				}),
-				error: error && try_serialize(props.error)
-			};
-
-			let script = `__SAPPER__={${[
-				error && `error:${serialized.error},status:${status}`,
-				`baseUrl:"${req.baseUrl}"`,
-				serialized.preloaded && `preloaded:${serialized.preloaded}`,
-				serialized.session && `session:${serialized.session}`
-			].filter(Boolean).join(',')}};`;
-
-			if (has_service_worker) {
-				script += `if('serviceWorker' in navigator)navigator.serviceWorker.register('${req.baseUrl}/service-worker.js');`;
-			}
-
-			const file = [].concat(build_info.assets.main).filter(file => file && /\.js$/.test(file))[0];
-			const main = `${req.baseUrl}/client/${file}`;
-
-			if (build_info.bundler === 'rollup') {
-				if (build_info.legacy_assets) {
-					const legacy_main = `${req.baseUrl}/client/legacy/${build_info.legacy_assets.main}`;
-					script += `(function(){try{eval("async function x(){}");var main="${main}"}catch(e){main="${legacy_main}"};var s=document.createElement("script");try{new Function("if(0)import('')")();s.src=main;s.type="module";s.crossOrigin="use-credentials";}catch(e){s.src="${req.baseUrl}/client/shimport@${build_info.shimport}.js";s.setAttribute("data-main",main);}document.head.appendChild(s);}());`;
-				} else {
-					script += `var s=document.createElement("script");try{new Function("if(0)import('')")();s.src="${main}";s.type="module";s.crossOrigin="use-credentials";}catch(e){s.src="${req.baseUrl}/client/shimport@${build_info.shimport}.js";s.setAttribute("data-main","${main}")}document.head.appendChild(s)`;
-				}
-			} else {
-				script += `</script><script src="${main}">`;
-			}
-
-			let styles: string;
-
-			// TODO make this consistent across apps
-			// TODO embed build_info in placeholder.ts
-			if (build_info.css && build_info.css.main) {
-				const css_chunks = new Set();
-				if (build_info.css.main) css_chunks.add(build_info.css.main);
-				page.parts.forEach(part => {
-					if (!part) return;
-					const css_chunks_for_part = build_info.css.chunks[part.file];
-
-					if (css_chunks_for_part) {
-						css_chunks_for_part.forEach(file => {
-							css_chunks.add(file);
-						});
-					}
-				});
-
-				styles = Array.from(css_chunks)
-					.map(href => `<link rel="stylesheet" href="client/${href}">`)
-					.join('')
-			} else {
-				styles = (css && css.code ? `<style>${css.code}</style>` : '');
-			}
-
-			// users can set a CSP nonce using res.locals.nonce
-			const nonce_attr = (res.locals && res.locals.nonce) ? ` nonce="${res.locals.nonce}"` : '';
-
-			const body = template()
-				.replace('%sapper.base%', () => `<base href="${req.baseUrl}/">`)
-				.replace('%sapper.scripts%', () => `<script${nonce_attr}>${script}</script>`)
-				.replace('%sapper.html%', () => html)
-				.replace('%sapper.head%', () => `<noscript id='sapper-head-start'></noscript>${head}<noscript id='sapper-head-end'></noscript>`)
-				.replace('%sapper.styles%', () => styles);
-
-			res.statusCode = status;
-			res.end(body);
-		} catch(err) {
-			console.log(err);
-			if (error) {
-				// we encountered an error while rendering the error page — oops
-				res.statusCode = 500;
-				res.end(`<pre>${escape_html(err.message)}</pre>`);
-			} else {
-				handle_error(req, res, 500, err);
-			}
-		}
-	}
-
-	return function find_route(req: Req, res: Res, next: () => void) {
-		if (req[IGNORE]) return next();
-
-		if (req.path === '/service-worker-index.html') {
-			const homePage = pages.find(page => page.pattern.test('/'));
-			handle_page(homePage, req, res);
-			return;
-		}
-
-		for (const page of pages) {
-			if (page.pattern.test(req.path)) {
-				handle_page(page, req, res);
-				return;
-			}
-		}
-
-		handle_error(req, res, 404, 'Not found');
-	};
-}
-
-function read_template(dir = build_dir) {
-	return fs.readFileSync(`${dir}/template.html`, 'utf-8');
-}
-
-function try_serialize(data: any, fail?: (err) => void) {
-	try {
-		return devalue(data);
-	} catch (err) {
-		if (fail) fail(err);
-		return null;
-	}
-}
-
-function escape_html(html: string) {
-	const chars: Record<string, string> = {
-		'"' : 'quot',
-		"'": '#39',
-		'&': 'amp',
-		'<' : 'lt',
-		'>' : 'gt'
-	};
-
-	return html.replace(/["'&<>]/g, c => `&${chars[c]};`);
-}

runtime/src/server/middleware/get_server_route_handler.ts

@@ -1,78 +0,0 @@
-import { IGNORE } from '../constants';
-import { Req, Res, ServerRoute } from './types';
-
-export function get_server_route_handler(routes: ServerRoute[]) {
-	async 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 {
-				await 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();
-	};
-}

runtime/src/server/middleware/index.ts

@@ -1,141 +0,0 @@
-import fs from 'fs';
-import path from 'path';
-import { build_dir, dev, manifest } from '@sapper/internal/manifest-server';
-import { Handler, Req, Res } from './types';
-import { get_server_route_handler } from './get_server_route_handler';
-import { get_page_handler } from './get_page_handler';
-import { lookup } from './mime';
-import { IGNORE } from '../constants';
-
-export default function middleware(opts: {
-	session?: (req: Req, res: Res) => any,
-	ignore?: any
-} = {}) {
-	const { session, 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, '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, session || noop)
-	].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();
-		}
-	};
-}
-
-function noop(){}

runtime/src/server/middleware/types.ts

@@ -1,63 +0,0 @@
-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>;
-		preload?: (data: any) => any | Promise<any>;
-	}>
-};
-
-export type Manifest = {
-	server_routes: ServerRoute[];
-	pages: Page[];
-	root: Component;
-	root_preload?: (data: any) => any | Promise<any>;
-	error: Component;
-}
-
-export type Handler = (req: Req, res: Res, next: () => void) => void;
-
-export type Props = {
-	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) => {
-		head: string;
-		css: { code: string, map: any };
-		html: string
-	}
-}

sapper

@@ -1,2 +1,2 @@
 #!/usr/bin/env node
-require('./dist/cli.js');
+require('./dist/cli.ts.js');

sapper-dev-client.js

@@ -1,8 +1,6 @@
 let source;
 
 function check() {
-	if (typeof module === 'undefined') return;
-
 	if (module.hot.status() === 'idle') {
 		module.hot.check(true).then(modules => {
 			console.log(`[SAPPER] applied HMR update`);

src/api.ts

@@ -1,4 +1,6 @@
-export { dev } from './api/dev';
+import { dev } from './api/dev';
-export { build } from './api/build';
+import { build } from './api/build';
-export { export } from './api/export';
+import { exporter } from './api/export';
-export { find_page } from './api/find_page';
+import { find_page } from './api/find_page';
+
+export { dev, build, exporter, find_page };

src/api/build.ts

@@ -1,63 +1,41 @@
 import * as fs from 'fs';
 import * as path from 'path';
-import minify_html from './utils/minify_html';
+import mkdirp from 'mkdirp';
-import { create_compilers, create_app, create_manifest_data, create_serviceworker_manifest } from '../core';
+import rimraf from 'rimraf';
-import { copy_shimport } from './utils/copy_shimport';
+import { EventEmitter } from 'events';
-import read_template from '../core/read_template';
+import { minify_html } from './utils/minify_html';
-import { CompileResult } from '../core/create_compilers/interfaces';
+import { create_compilers, create_main_manifests, create_routes, create_serviceworker_manifest } from '../core';
-import { noop } from './utils/noop';
+import * as events from './interfaces';
-import validate_bundler from './utils/validate_bundler';
-import { copy_runtime } from './utils/copy_runtime';
-import { rimraf, mkdirp } from './utils/fs_utils';
 
-type Opts = {
+export function build(opts: {}) {
-	cwd?: string;
+	const emitter = new EventEmitter();
-	src?: string;
-	routes?: string;
-	dest?: string;
-	output?: string;
-	static?: string;
-	legacy?: boolean;
-	bundler?: 'rollup' | 'webpack';
-	oncompile?: ({ type, result }: { type: string, result: CompileResult }) => void;
-};
 
-export async function build({
+	execute(emitter, opts).then(
-	cwd,
+		() => {
-	src = 'src',
+			emitter.emit('done', <events.DoneEvent>{}); // TODO do we need to pass back any info?
-	routes = 'src/routes',
+		},
-	output = 'src/node_modules/@sapper',
+		error => {
-	static: static_files = 'static',
+			emitter.emit('error', <events.ErrorEvent>{
-	dest = '__sapper__/build',
+				error
+			});
+		}
+	);
 
-	bundler,
+	return emitter;
-	legacy = false,
+}
-	oncompile = noop
-}: Opts = {}) {
-	bundler = validate_bundler(bundler);
 
-	cwd = path.resolve(cwd);
+async function execute(emitter: EventEmitter, {
-	src = path.resolve(cwd, src);
+	dest = 'build',
-	dest = path.resolve(cwd, dest);
+	app = 'app',
-	routes = path.resolve(cwd, routes);
+	webpack = 'webpack',
-	output = path.resolve(cwd, output);
+	routes = 'routes'
-	static_files = path.resolve(cwd, static_files);
+} = {}) {
+	mkdirp.sync(dest);
+	rimraf.sync(path.join(dest, '**/*'));
 
-	if (legacy && bundler === 'webpack') {
+	// minify app/template.html
-		throw new Error(`Legacy builds are not supported for projects using webpack`);
-	}
-
-	rimraf(output);
-	mkdirp(output);
-	copy_runtime(output);
-
-	rimraf(dest);
-	mkdirp(`${dest}/client`);
-	copy_shimport(dest);
-
-	// minify src/template.html
 	// TODO compile this to a function? could be quicker than str.replace(...).replace(...).replace(...)
-	const template = read_template(src);
+	const template = fs.readFileSync(`${app}/template.html`, 'utf-8');
 
 	// remove this in a future version
 	if (template.indexOf('%sapper.base%') === -1) {
@@ -68,74 +46,64 @@ export async function build({
 
 	fs.writeFileSync(`${dest}/template.html`, minify_html(template));
 
-	const manifest_data = create_manifest_data(routes);
+	const route_objects = create_routes();
 
-	// create src/node_modules/@sapper/app.mjs and server.mjs
+	// create app/manifest/client.js and app/manifest/server.js
-	create_app({
+	create_main_manifests({ routes: route_objects });
-		bundler,
-		manifest_data,
-		cwd,
-		src,
-		dest,
-		routes,
-		output,
-		dev: false
-	});
 
-	const { client, server, serviceworker } = await create_compilers(bundler, cwd, src, dest, true);
+	const { client, server, serviceworker } = create_compilers({ webpack });
 
-	const client_result = await client.compile();
+	const client_stats = await compile(client);
-	oncompile({
+	emitter.emit('build', <events.BuildEvent>{
 		type: 'client',
-		result: client_result
+		// TODO duration/warnings
+		webpack_stats: client_stats
 	});
 
-	const build_info = client_result.to_json(manifest_data, { src, routes, dest });
+	const client_info = client_stats.toJson();
+	fs.writeFileSync(path.join(dest, 'client_assets.json'), JSON.stringify(client_info.assetsByChunkName));
 
-	if (legacy) {
+	const server_stats = await compile(server);
-		process.env.SAPPER_LEGACY_BUILD = 'true';
+	emitter.emit('build', <events.BuildEvent>{
-		const { client } = await create_compilers(bundler, cwd, src, dest, true);
-
-		const client_result = await client.compile();
-
-		oncompile({
-			type: 'client (legacy)',
-			result: client_result
-		});
-
-		client_result.to_json(manifest_data, { src, routes, dest });
-		build_info.legacy_assets = client_result.assets;
-		delete process.env.SAPPER_LEGACY_BUILD;
-	}
-
-	fs.writeFileSync(path.join(dest, 'build.json'), JSON.stringify(build_info));
-
-	const server_stats = await server.compile();
-	oncompile({
 		type: 'server',
-		result: server_stats
+		// TODO duration/warnings
+		webpack_stats: server_stats
 	});
 
 	let serviceworker_stats;
 
 	if (serviceworker) {
-
-		const client_files = client_result.chunks
-			.filter(chunk => !chunk.file.endsWith('.map')) // SW does not need to cache sourcemap files
-			.map(chunk => `client/${chunk.file}`);
-
 		create_serviceworker_manifest({
-			manifest_data,
+			routes: route_objects,
-			output,
+			client_files: client_stats.toJson().assets.map((chunk: { name: string }) => `client/${chunk.name}`)
-			client_files,
-			static_files
 		});
 
-		serviceworker_stats = await serviceworker.compile();
+		serviceworker_stats = await compile(serviceworker);
 
-		oncompile({
+		emitter.emit('build', <events.BuildEvent>{
 			type: 'serviceworker',
-			result: serviceworker_stats
+			// TODO duration/warnings
+			webpack_stats: serviceworker_stats
 		});
 	}
-}
+}
+
+function compile(compiler: any) {
+	return new Promise((fulfil, reject) => {
+		compiler.run((err: Error, stats: any) => {
+			if (err) {
+				reject(err);
+				process.exit(1);
+			}
+
+			if (stats.hasErrors()) {
+				console.error(stats.toString({ colors: true }));
+				reject(new Error(`Encountered errors while building app`));
+			}
+
+			else {
+				fulfil(stats);
+			}
+		});
+	});
+}

src/api/dev.ts

@@ -3,61 +3,36 @@ import * as fs from 'fs';
 import * as http from 'http';
 import * as child_process from 'child_process';
 import * as ports from 'port-authority';
+import mkdirp from 'mkdirp';
+import rimraf from 'rimraf';
+import format_messages from 'webpack-format-messages';
+import { locations } from '../config';
 import { EventEmitter } from 'events';
-import { create_manifest_data, create_app, create_compilers, create_serviceworker_manifest } from '../core';
+import { create_routes, create_main_manifests, create_compilers, create_serviceworker_manifest } from '../core';
-import { Compiler, Compilers } from '../core/create_compilers';
-import { CompileResult } from '../core/create_compilers/interfaces';
 import Deferred from './utils/Deferred';
-import validate_bundler from './utils/validate_bundler';
+import * as events from './interfaces';
-import { copy_shimport } from './utils/copy_shimport';
-import { ManifestData, FatalEvent, ErrorEvent, ReadyEvent, InvalidEvent } from '../interfaces';
-import read_template from '../core/read_template';
-import { noop } from './utils/noop';
-import { copy_runtime } from './utils/copy_runtime';
-import { rimraf, mkdirp } from './utils/fs_utils';
 
-type Opts = {
+export function dev(opts) {
-	cwd?: string,
-	src?: string,
-	dest?: string,
-	routes?: string,
-	output?: string,
-	static?: string,
-	'dev-port'?: number,
-	live?: boolean,
-	hot?: boolean,
-	'devtools-port'?: number,
-	bundler?: 'rollup' | 'webpack',
-	port?: number
-};
-
-export function dev(opts: Opts) {
 	return new Watcher(opts);
 }
 
 class Watcher extends EventEmitter {
-	bundler: 'rollup' | 'webpack';
 	dirs: {
-		cwd: string;
+		app: string;
-		src: string;
 		dest: string;
 		routes: string;
-		output: string;
+		webpack: string;
-		static: string;
 	}
 	port: number;
 	closed: boolean;
 
-	dev_port: number;
-	live: boolean;
-	hot: boolean;
-
-	devtools_port: number;
-
 	dev_server: DevServer;
 	proc: child_process.ChildProcess;
 	filewatchers: Array<{ close: () => void }>;
-	deferred: Deferred;
+	deferreds: {
+		client: Deferred;
+		server: Deferred;
+	};
 
 	crashed: boolean;
 	restarting: boolean;
@@ -69,42 +44,24 @@ class Watcher extends EventEmitter {
 	}
 
 	constructor({
-		cwd = '.',
+		app = locations.app(),
-		src = 'src',
+		dest = locations.dest(),
-		routes = 'src/routes',
+		routes = locations.routes(),
-		output = 'src/node_modules/@sapper',
+		webpack = 'webpack',
-		static: static_files = 'static',
-		dest = '__sapper__/dev',
-		'dev-port': dev_port,
-		live,
-		hot,
-		'devtools-port': devtools_port,
-		bundler,
 		port = +process.env.PORT
-	}: Opts) {
+	}: {
+		app: string,
+		dest: string,
+		routes: string,
+		webpack: string,
+		port: number
+	}) {
 		super();
 
-		cwd = path.resolve(cwd);
+		this.dirs = { app, dest, routes, webpack };
-
-		this.bundler = validate_bundler(bundler);
-		this.dirs = {
-			cwd,
-			src: path.resolve(cwd, src),
-			dest: path.resolve(cwd, dest),
-			routes: path.resolve(cwd, routes),
-			output: path.resolve(cwd, output),
-			static: path.resolve(cwd, static_files)
-		};
-
 		this.port = port;
 		this.closed = false;
 
-		this.dev_port = dev_port;
-		this.live = live;
-		this.hot = hot;
-
-		this.devtools_port = devtools_port;
-
 		this.filewatchers = [];
 
 		this.current_build = {
@@ -115,7 +72,7 @@ class Watcher extends EventEmitter {
 		};
 
 		// remove this in a future version
-		const template = read_template(src);
+		const template = fs.readFileSync(path.join(app, 'template.html'), 'utf-8');
 		if (template.indexOf('%sapper.base%') === -1) {
 			const error = new Error(`As of Sapper v0.10, your template.html file must include %sapper.base% in the <head>`);
 			error.code = `missing-sapper-base`;
@@ -134,7 +91,7 @@ class Watcher extends EventEmitter {
 	async init() {
 		if (this.port) {
 			if (!await ports.check(this.port)) {
-				this.emit('fatal', <FatalEvent>{
+				this.emit('fatal', <events.FatalEvent>{
 					message: `Port ${this.port} is unavailable`
 				});
 				return;
@@ -143,86 +100,60 @@ class Watcher extends EventEmitter {
 			this.port = await ports.find(3000);
 		}
 
-		const { cwd, src, dest, routes, output, static: static_files } = this.dirs;
+		const { dest } = this.dirs;
+		rimraf.sync(dest);
+		mkdirp.sync(dest);
 
-		rimraf(output);
+		const dev_port = await ports.find(10000);
-		mkdirp(output);
-		copy_runtime(output);
-
-		rimraf(dest);
-		mkdirp(`${dest}/client`);
-		if (this.bundler === 'rollup') copy_shimport(dest);
-
-		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 {
-			manifest_data = create_manifest_data(routes);
+			const routes = create_routes();
-			create_app({
+			create_main_manifests({ routes, dev_port });
-				bundler: this.bundler,
-				manifest_data,
-				dev: true,
-				dev_port: this.dev_port,
-				cwd, src, dest, routes, output
-			});
 		} catch (err) {
-			this.emit('fatal', <FatalEvent>{
+			this.emit('fatal', <events.FatalEvent>{
 				message: err.message
 			});
 			return;
 		}
 
-		this.dev_server = new DevServer(this.dev_port);
+		this.dev_server = new DevServer(dev_port);
 
 		this.filewatchers.push(
-			watch_dir(
+			watch_files(locations.routes(), ['add', 'unlink'], () => {
-				routes,
+				const routes = create_routes();
-				({ path: file, stats }) => {
+				create_main_manifests({ routes, dev_port });
-					if (stats.isDirectory()) {
-						return path.basename(file)[0] !== '_';
-					}
-					return true;
-				},
-				() => {
-					try {
-						const new_manifest_data = create_manifest_data(routes);
-						create_app({
-							bundler: this.bundler,
-							manifest_data, // TODO is this right? not new_manifest_data?
-							dev: true,
-							dev_port: this.dev_port,
-							cwd, src, dest, routes, output
-						});
 
-						manifest_data = new_manifest_data;
+				try {
-					} catch (error) {
+					const routes = create_routes();
-						this.emit('error', <ErrorEvent>{
+					create_main_manifests({ routes, dev_port });
-							type: 'manifest',
+				} catch (err) {
-							error
+					this.emit('error', <events.ErrorEvent>{
-						});
+						message: err.message
-					}
+					});
 				}
-			),
+			}),
 
-			fs.watch(`${src}/template.html`, () => {
+			watch_files(`${locations.app()}/template.html`, ['change'], () => {
 				this.dev_server.send({
 					action: 'reload'
 				});
 			})
 		);
 
-		let deferred = new Deferred();
+		this.deferreds = {
+			server: new Deferred(),
+			client: new Deferred()
+		};
 
 		// TODO watch the configs themselves?
-		const compilers: Compilers = await create_compilers(this.bundler, cwd, src, dest, false);
+		const compilers = create_compilers({ webpack: this.dirs.webpack });
+
+		let log = '';
 
 		const emitFatal = () => {
-			this.emit('fatal', <FatalEvent>{
+			this.emit('fatal', <events.FatalEvent>{
-				message: `Server crashed`
+				message: `Server crashed`,
+				log
 			});
 
 			this.crashed = true;
@@ -234,35 +165,34 @@ class Watcher extends EventEmitter {
 
 			invalid: filename => {
 				this.restart(filename, 'server');
+				this.deferreds.server = new Deferred();
 			},
 
-			handle_result: (result: CompileResult) => {
+			result: info => {
-				deferred.promise.then(() => {
+				this.deferreds.client.promise.then(() => {
 					const restart = () => {
+						log = '';
 						this.crashed = false;
 
 						ports.wait(this.port)
 							.then((() => {
-								this.emit('ready', <ReadyEvent>{
+								this.emit('ready', <events.ReadyEvent>{
 									port: this.port,
 									process: this.proc
 								});
 
-								if (this.hot && this.bundler === 'webpack') {
+								this.deferreds.server.fulfil();
-									this.dev_server.send({
+
-										status: 'completed'
+								this.dev_server.send({
-									});
+									status: 'completed'
-								} else {
+								});
-									this.dev_server.send({
-										action: 'reload'
-									});
-								}
 							}))
 							.catch(err => {
 								if (this.crashed) return;
 
-								this.emit('fatal', <FatalEvent>{
+								this.emit('fatal', <events.FatalEvent>{
-									message: `Server is not listening on port ${this.port}`
+									message: `Server is not listening on port ${this.port}`,
+									log
 								});
 							});
 					};
@@ -275,37 +205,27 @@ class Watcher extends EventEmitter {
 						restart();
 					}
 
-					// we need to give the child process its own DevTools port,
+					this.proc = child_process.fork(`${dest}/server.js`, [], {
-					// otherwise Node will try to use the parent's (and fail)
-					const debugArgRegex = /--inspect(?:-brk|-port)?|--debug-port/;
-					const execArgv = process.execArgv.slice();
-					if (execArgv.some((arg: string) => !!arg.match(debugArgRegex))) {
-						execArgv.push(`--inspect-port=${this.devtools_port}`);
-					}
-
-					this.proc = child_process.fork(`${dest}/server/server.js`, [], {
 						cwd: process.cwd(),
 						env: Object.assign({
 							PORT: this.port
 						}, process.env),
-						stdio: ['ipc'],
+						stdio: ['ipc']
-						execArgv
 					});
 
 					this.proc.stdout.on('data', chunk => {
+						log += chunk;
 						this.emit('stdout', chunk);
 					});
 
 					this.proc.stderr.on('data', chunk => {
+						log += chunk;
 						this.emit('stderr', chunk);
 					});
 
 					this.proc.on('message', message => {
-						if (message.__sapper__ && message.event === 'basepath') {
+						if (!message.__sapper__) return;
-							this.emit('basepath', {
+						this.emit(message.event, message);
-								basepath: message.basepath
-							});
-						}
 					});
 
 					this.proc.on('exit', emitFatal);
@@ -313,37 +233,31 @@ class Watcher extends EventEmitter {
 			}
 		});
 
+		let first = true;
+
 		this.watch(compilers.client, {
 			name: 'client',
 
 			invalid: filename => {
 				this.restart(filename, 'client');
-				deferred = new Deferred();
+				this.deferreds.client = new Deferred();
 
 				// TODO we should delete old assets. due to a webpack bug
 				// i don't even begin to comprehend, this is apparently
 				// quite difficult
 			},
 
-			handle_result: (result: CompileResult) => {
+			result: info => {
-				fs.writeFileSync(
+				fs.writeFileSync(path.join(dest, 'client_assets.json'), JSON.stringify(info.assetsByChunkName, null, '  '));
-					path.join(dest, 'build.json'),
+				this.deferreds.client.fulfil();
 
-					// TODO should be more explicit that to_json has effects
+				const client_files = info.assets.map((chunk: { name: string }) => `client/${chunk.name}`);
-					JSON.stringify(result.to_json(manifest_data, this.dirs), null, '  ')
-				);
-
-				const client_files = result.chunks.map(chunk => `client/${chunk.file}`);
 
 				create_serviceworker_manifest({
-					manifest_data,
+					routes: create_routes(),
-					output,
+					client_files
-					client_files,
-					static_files
 				});
 
-				deferred.fulfil();
-
 				// we need to wait a beat before watching the service
 				// worker, because of some webpack nonsense
 				setTimeout(watch_serviceworker, 100);
@@ -355,7 +269,11 @@ class Watcher extends EventEmitter {
 				watch_serviceworker = noop;
 
 				this.watch(compilers.serviceworker, {
-					name: 'service worker'
+					name: 'service worker',
+
+					result: info => {
+						fs.writeFileSync(path.join(dest, 'serviceworker_info.json'), JSON.stringify(info, null, '  '));
+					}
 				});
 			}
 			: noop;
@@ -388,7 +306,7 @@ class Watcher extends EventEmitter {
 			};
 
 			process.nextTick(() => {
-				this.emit('invalid', <InvalidEvent>{
+				this.emit('invalid', <events.InvalidEvent>{
 					changed: Array.from(this.current_build.changed),
 					invalid: {
 						server: this.current_build.rebuilding.has('server'),
@@ -402,34 +320,82 @@ class Watcher extends EventEmitter {
 		}
 	}
 
-	watch(compiler: Compiler, { name, invalid = noop, handle_result = noop }: {
+	watch(compiler: any, { name, invalid = noop, result }: {
 		name: string,
 		invalid?: (filename: string) => void;
-		handle_result?: (result: CompileResult) => void;
+		result: (stats: any) => void;
 	}) {
-		compiler.oninvalid(invalid);
+		compiler.hooks.invalid.tap('sapper', (filename: string) => {
+			invalid(filename);
+		});
 
-		compiler.watch((error?: Error, result?: CompileResult) => {
+		compiler.watch({}, (err: Error, stats: any) => {
-			if (error) {
+			if (err) {
-				this.emit('error', <ErrorEvent>{
+				this.emit('error', <events.ErrorEvent>{
 					type: name,
-					error
+					message: err.message
 				});
 			} else {
+				const messages = format_messages(stats);
+				const info = stats.toJson();
+
 				this.emit('build', {
 					type: name,
 
-					duration: result.duration,
+					duration: info.time,
-					errors: result.errors,
+
-					warnings: result.warnings
+					errors: messages.errors.map((message: string) => {
+						const duplicate = this.current_build.unique_errors.has(message);
+						this.current_build.unique_errors.add(message);
+
+						return mungeWebpackError(message, duplicate);
+					}),
+
+					warnings: messages.warnings.map((message: string) => {
+						const duplicate = this.current_build.unique_warnings.has(message);
+						this.current_build.unique_warnings.add(message);
+
+						return mungeWebpackError(message, duplicate);
+					}),
 				});
 
-				handle_result(result);
+				result(info);
 			}
 		});
 	}
 }
 
+const locPattern = /\((\d+):(\d+)\)$/;
+
+function mungeWebpackError(message: string, duplicate: boolean) {
+	// TODO this is all a bit rube goldberg...
+	const lines = message.split('\n');
+
+	const file = lines.shift()
+		.replace('', '') // careful — there is a special character at the beginning of this string
+		.replace('', '')
+		.replace('./', '');
+
+	let line = null;
+	let column = null;
+
+	const match = locPattern.exec(lines[0]);
+	if (match) {
+		lines[0] = lines[0].replace(locPattern, '');
+		line = +match[1];
+		column = +match[2];
+	}
+
+	return {
+		file,
+		line,
+		column,
+		message: lines.join('\n'),
+		originalMessage: message,
+		duplicate
+	};
+}
+
 const INTERVAL = 10000;
 
 class DevServer {
@@ -482,32 +448,22 @@ class DevServer {
 	}
 }
 
-function watch_dir(
+function noop() {}
-	dir: string,
-	filter: ({ path, stats }: { path: string, stats: fs.Stats }) => boolean,
-	callback: () => void
-) {
-	let watch: any;
-	let closed = false;
 
-	import('cheap-watch').then(({ default: CheapWatch }) => {
+function watch_files(pattern: string, events: string[], callback: () => void) {
-		if (closed) return;
+	const chokidar = require('chokidar');
 
-		watch = new CheapWatch({ dir, filter, debounce: 50 });
+	const watcher = chokidar.watch(pattern, {
+		persistent: true,
+		ignoreInitial: true,
+		disableGlobbing: true
+	});
 
-		watch.on('+', ({ isNew }: { isNew: boolean }) => {
+	events.forEach(event => {
-			if (isNew) callback();
+		watcher.on(event, callback);
-		});
-
-		watch.on('-', callback);
-
-		watch.init();
 	});
 
 	return {
-		close: () => {
+		close: () => watcher.close()
-			if (watch) watch.close();
-			closed = true;
-		}
 	};
-}
+}

src/api/export.ts

@@ -1,217 +1,143 @@
 import * as child_process from 'child_process';
-import * as fs from 'fs';
 import * as path from 'path';
-import * as url from 'url';
+import * as sander from 'sander';
+import cheerio from 'cheerio';
+import URL from 'url-parse';
 import fetch from 'node-fetch';
-import * as yootils from 'yootils';
 import * as ports from 'port-authority';
-import clean_html from './utils/clean_html';
+import { EventEmitter } from 'events';
-import minify_html from './utils/minify_html';
+import { minify_html } from './utils/minify_html';
 import Deferred from './utils/Deferred';
-import { noop } from './utils/noop';
+import * as events from './interfaces';
-import { parse as parseLinkHeader } from 'http-link-header';
-import { rimraf, copy, mkdirp } from './utils/fs_utils';
 
-type Opts = {
+export function exporter(opts: {}) {
-	build_dir?: string,
+	const emitter = new EventEmitter();
-	export_dir?: string,
-	cwd?: string,
-	static?: string,
-	basepath?: string,
-	timeout?: number | false,
-	oninfo?: ({ message }: { message: string }) => void;
-	onfile?: ({ file, size, status }: { file: string, size: number, status: number }) => void;
-};
 
-type Ref = {
+	execute(emitter, opts).then(
-	uri: string,
+		() => {
-	rel: string,
+			emitter.emit('done', <events.DoneEvent>{}); // TODO do we need to pass back any info?
-	as: string
+		},
-};
+		error => {
+			emitter.emit('error', <events.ErrorEvent>{
+				error
+			});
+		}
+	);
 
-function resolve(from: string, to: string) {
+	return emitter;
-	return url.parse(url.resolve(from, to));
 }
 
-type URL = url.UrlWithStringQuery;
+async function execute(emitter: EventEmitter, {
-
+	build = 'build',
-export { _export as export };
+	dest = 'export',
-
+	basepath = ''
-async function _export({
+} = {}) {
-	cwd,
+	const export_dir = path.join(dest, basepath);
-	static: static_files = 'static',
-	build_dir = '__sapper__/build',
-	export_dir = '__sapper__/export',
-	basepath = '',
-	timeout = 5000,
-	oninfo = noop,
-	onfile = noop
-}: Opts = {}) {
-	basepath = basepath.replace(/^\//, '')
-
-	cwd = path.resolve(cwd);
-	static_files = path.resolve(cwd, static_files);
-	build_dir = path.resolve(cwd, build_dir);
-	export_dir = path.resolve(cwd, export_dir, basepath);
 
 	// Prep output directory
-	rimraf(export_dir);
+	sander.rimrafSync(export_dir);
 
-	copy(static_files, export_dir);
+	sander.copydirSync('assets').to(export_dir);
-	copy(path.join(build_dir, 'client'), path.join(export_dir, 'client'));
+	sander.copydirSync(build, 'client').to(export_dir, 'client');
-	copy(path.join(build_dir, 'service-worker.js'), path.join(export_dir, 'service-worker.js'));
-	copy(path.join(build_dir, 'service-worker.js.map'), path.join(export_dir, 'service-worker.js.map'));
 
-	const defaultPort = process.env.PORT ? parseInt(process.env.PORT) : 3000;
+	if (sander.existsSync(build, 'service-worker.js')) {
-	const port = await ports.find(defaultPort);
+		sander.copyFileSync(build, 'service-worker.js').to(export_dir, 'service-worker.js');
+	}
 
-	const protocol = 'http:';
+	if (sander.existsSync(build, 'service-worker.js.map')) {
-	const host = `localhost:${port}`;
+		sander.copyFileSync(build, 'service-worker.js.map').to(export_dir, 'service-worker.js.map');
-	const origin = `${protocol}//${host}`;
+	}
 
-	const root = resolve(origin, basepath);
+	const port = await ports.find(3000);
-	if (!root.href.endsWith('/')) root.href += '/';
 
-	oninfo({
+	const origin = `http://localhost:${port}`;
-		message: `Crawling ${root.href}`
+
+	emitter.emit('info', {
+		message: `Crawling ${origin}`
 	});
 
-	const proc = child_process.fork(path.resolve(`${build_dir}/server/server.js`), [], {
+	const proc = child_process.fork(path.resolve(`${build}/server.js`), [], {
-		cwd,
+		cwd: process.cwd(),
 		env: Object.assign({
 			PORT: port,
 			NODE_ENV: 'production',
+			SAPPER_DEST: build,
 			SAPPER_EXPORT: 'true'
 		}, process.env)
 	});
 
 	const seen = new Set();
 	const saved = new Set();
+	const deferreds = new Map();
 
-	function save(url: string, status: number, type: string, body: string) {
+	function get_deferred(pathname: string) {
-		const { pathname } = resolve(origin, url);
+		if (!deferreds.has(pathname)) {
-		let file = decodeURIComponent(pathname.slice(1));
+			deferreds.set(pathname, new Deferred())	;
-
-		if (saved.has(file)) return;
-		saved.add(file);
-
-		const is_html = type === 'text/html';
-
-		if (is_html) {
-			if (pathname !== '/service-worker-index.html') {
-				file = file === '' ? 'index.html' : `${file}/index.html`;
-			}
-			body = minify_html(body);
 		}
 
-		onfile({
+		return deferreds.get(pathname);
-			file,
-			size: body.length,
-			status
-		});
-
-		const export_file = path.join(export_dir, file);
-		mkdirp(path.dirname(export_file));
-		fs.writeFileSync(export_file, body);
 	}
 
 	proc.on('message', message => {
 		if (!message.__sapper__ || message.event !== 'file') return;
-		save(message.url, message.status, message.type, message.body);
+
+		const pathname = new URL(message.url, origin).pathname;
+		let file = pathname.slice(1);
+		let { body } = message;
+
+		if (saved.has(file)) return;
+		saved.add(file);
+
+		const is_html = message.type === 'text/html';
+
+		if (is_html) {
+			file = file === '' ? 'index.html' : `${file}/index.html`;
+			body = minify_html(body);
+		}
+
+		emitter.emit('file', <events.FileEvent>{
+			file,
+			size: body.length,
+			status: message.status
+		});
+
+		sander.writeFileSync(export_dir, file, body);
+
+		get_deferred(pathname).fulfil();
 	});
 
 	async function handle(url: URL) {
-		let pathname = url.pathname;
+		const pathname = url.pathname || '/';
-		if (pathname !== '/service-worker-index.html') {
-		  pathname = pathname.replace(root.pathname, '') || '/'
-		}
 
 		if (seen.has(pathname)) return;
 		seen.add(pathname);
 
-		const timeout_deferred = new Deferred();
+		const deferred = get_deferred(pathname);
-		const the_timeout = setTimeout(() => {
-			timeout_deferred.reject(new Error(`Timed out waiting for ${url.href}`));
-		}, timeout);
-
-		const r = await Promise.race([
-			fetch(url.href, {
-				redirect: 'manual'
-			}),
-			timeout_deferred.promise
-		]);
-
-		clearTimeout(the_timeout); // prevent it hanging at the end
-
-		let type = r.headers.get('Content-Type');
-
-		let body = await r.text();
 
+		const r = await fetch(url.href);
 		const range = ~~(r.status / 100);
 
 		if (range === 2) {
-			if (type === 'text/html') {
+			if (r.headers.get('Content-Type') === 'text/html') {
-				// parse link rel=preload headers and embed them in the HTML
+				const body = await r.text();
-				let link = parseLinkHeader(r.headers.get('Link') || '');
+				const $ = cheerio.load(body);
-				link.refs.forEach((ref: Ref) => {
+				const urls: URL[] = [];
-					if (ref.rel === 'preload') {
+
-						body = body.replace('</head>',
+				const base = new URL($('base').attr('href') || '/', url.href);
-							`<link rel="preload" as=${JSON.stringify(ref.as)} href=${JSON.stringify(ref.uri)}></head>`)
+
-					}
+				$('a[href]').each((i: number, $a) => {
+					const url = new URL($a.attribs.href, base.href);
+					if (url.origin === origin) urls.push(url);
 				});
-				if (pathname !== '/service-worker-index.html') {
-					const cleaned = clean_html(body);
 
-					const q = yootils.queue(8);
+				await Promise.all(urls.map(handle));
-
-					const base_match = /<base ([\s\S]+?)>/m.exec(cleaned);
-					const base_href = base_match && get_href(base_match[1]);
-					const base = resolve(url.href, base_href);
-
-					let match;
-					let pattern = /<a ([\s\S]+?)>/gm;
-
-					while (match = pattern.exec(cleaned)) {
-						const attrs = match[1];
-						const href = get_href(attrs);
-
-						if (href) {
-							const url = resolve(base.href, href);
-
-							if (url.protocol === protocol && url.host === host) {
-								q.add(() => handle(url));
-							}
-						}
-					}
-
-					await q.close();
-				}
 			}
 		}
 
-		if (range === 3) {
+		await deferred.promise;
-			const location = r.headers.get('Location');
-
-			type = 'text/html';
-			body = `<script>window.location.href = "${location.replace(origin, '')}"</script>`;
-
-			await handle(resolve(root.href, location));
-		}
-
-		save(pathname, r.status, type, body);
 	}
 
 	return ports.wait(port)
-		.then(() => handle(root))
+		.then(() => handle(new URL(`/${basepath}`, origin))) // TODO all static routes
-		.then(() => handle(resolve(root.href, 'service-worker-index.html')))
+		.then(() => proc.kill());
-		.then(() => proc.kill())
-		.catch(err => {
-			proc.kill();
-			throw err;
-		});
-}
-
-function get_href(attrs: string) {
-	const match = /href\s*=\s*(?:"(.*?)"|'(.*?)'|([^\s>]*))/.exec(attrs);
-	return match && (match[1] || match[2] || match[3]);
 }

src/api/find_page.ts

@@ -1,7 +1,9 @@
-import { create_manifest_data } from '../core';
+import * as glob from 'glob';
+import { locations } from '../config';
+import { create_routes } from '../core';
 
-export function find_page(pathname: string, cwd = 'src/routes') {
+export function find_page(pathname: string, cwd = locations.routes()) {
-	const { pages } = create_manifest_data(cwd);
+	const { pages } = create_routes(cwd);
 
 	for (let i = 0; i < pages.length; i += 1) {
 		const page = pages[i];

src/api/interfaces.ts

@@ -0,0 +1,44 @@
+import * as child_process from 'child_process';
+
+export type ReadyEvent = {
+	port: number;
+	process: child_process.ChildProcess;
+};
+
+export type ErrorEvent = {
+	type: string;
+	message: string;
+};
+
+export type FatalEvent = {
+	message: string;
+	log?: string;
+};
+
+export type InvalidEvent = {
+	changed: string[];
+	invalid: {
+		client: boolean;
+		server: boolean;
+		serviceworker: boolean;
+	}
+};
+
+export type BuildEvent = {
+	type: string;
+	errors: Array<{ message: string, duplicate: boolean }>;
+	warnings: Array<{ message: string, duplicate: boolean }>;
+	duration: number;
+	webpack_stats: any;
+}
+
+export type FileEvent = {
+	file: string;
+	size: number;
+}
+
+export type FailureEvent = {
+
+}
+
+export type DoneEvent = {}

src/api/utils/clean_html.ts

@@ -1,7 +0,0 @@
-export default function clean_html(html: string) {
-	return html
-		.replace(/<!\[CDATA\[[\s\S]*?\]\]>/gm, '')
-		.replace(/(<script[\s\S]*?>)[\s\S]*?<\/script>/gm, '$1</' + 'script>')
-		.replace(/(<style[\s\S]*?>)[\s\S]*?<\/style>/gm, '$1</' + 'style>')
-		.replace(/<!--[\s\S]*?-->/gm, '');
-}

src/api/utils/copy_runtime.ts

@@ -1,21 +0,0 @@
-import * as fs from 'fs';
-import * as path from 'path';
-import { mkdirp } from './fs_utils';
-
-const runtime = [
-	'app.mjs',
-	'server.mjs',
-	'internal/shared.mjs',
-	'internal/layout.svelte',
-	'internal/error.svelte'
-].map(file => ({
-	file,
-	source: fs.readFileSync(path.join(__dirname, `../runtime/${file}`), 'utf-8')
-}));
-
-export function copy_runtime(output: string) {
-	runtime.forEach(({ file, source }) => {
-		mkdirp(path.dirname(`${output}/${file}`));
-		fs.writeFileSync(`${output}/${file}`, source);
-	});
-}

src/api/utils/copy_shimport.ts

@@ -1,9 +0,0 @@
-import * as fs from 'fs';
-
-export function copy_shimport(dest: string) {
-	const shimport_version = require('shimport/package.json').version;
-	fs.writeFileSync(
-		`${dest}/client/shimport@${shimport_version}.js`,
-		fs.readFileSync(require.resolve('shimport/index.js'))
-	);
-}

src/api/utils/fs_utils.ts

@@ -1,46 +0,0 @@
-import * as fs from 'fs';
-import * as path from 'path';
-
-export function mkdirp(dir: string) {
-	const parent = path.dirname(dir);
-	if (parent === dir) return;
-
-	mkdirp(parent);
-
-	try {
-		fs.mkdirSync(dir);
-	} catch (err) {
-		// ignore
-	}
-}
-
-export function rimraf(thing: string) {
-	if (!fs.existsSync(thing)) return;
-
-	const stats = fs.statSync(thing);
-
-	if (stats.isDirectory()) {
-		fs.readdirSync(thing).forEach(file => {
-			rimraf(path.join(thing, file));
-		});
-
-		fs.rmdirSync(thing);
-	} else {
-		fs.unlinkSync(thing);
-	}
-}
-
-export function copy(from: string, to: string) {
-	if (!fs.existsSync(from)) return;
-
-	const stats = fs.statSync(from);
-
-	if (stats.isDirectory()) {
-		fs.readdirSync(from).forEach(file => {
-			copy(path.join(from, file), path.join(to, file));
-		});
-	} else {
-		mkdirp(path.dirname(to));
-		fs.writeFileSync(to, fs.readFileSync(from));
-	}
-}

src/api/utils/minify_html.ts

@@ -1,13 +1,12 @@
 import { minify } from 'html-minifier';
 
-export default function minify_html(html: string) {
+export function minify_html(html: string) {
 	return minify(html, {
 		collapseBooleanAttributes: true,
 		collapseWhitespace: true,
 		conservativeCollapse: true,
 		decodeEntities: true,
 		html5: true,
-		ignoreCustomComments: [/^#/],
 		minifyCSS: true,
 		minifyJS: false,
 		removeAttributeQuotes: true,

src/api/utils/noop.ts

@@ -1 +0,0 @@
-export function noop() {}

src/api/utils/validate_bundler.ts

@@ -1,38 +0,0 @@
-import * as fs from 'fs';
-
-export default function validate_bundler(bundler?: 'rollup' | 'webpack') {
-	if (!bundler) {
-		bundler = (
-			fs.existsSync('rollup.config.js') ? 'rollup' :
-			fs.existsSync('webpack.config.js') ? 'webpack' :
-			null
-		);
-
-		if (!bundler) {
-			// 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`);
-		}
-	}
-
-	if (bundler !== 'rollup' && bundler !== 'webpack') {
-		throw new Error(`'${bundler}' is not a valid option for --bundler — must be either 'rollup' or 'webpack'`);
-	}
-
-	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/cli.ts

@@ -1,295 +1,97 @@
 import * as fs from 'fs';
 import * as path from 'path';
 import sade from 'sade';
-import colors from 'kleur';
+import * as colors from 'ansi-colors';
+import prettyMs from 'pretty-ms';
 import * as pkg from '../package.json';
-import { elapsed, repeat, left_pad, format_milliseconds } from './utils';
-import { InvalidEvent, ErrorEvent, FatalEvent, BuildEvent, ReadyEvent } from './interfaces';
 
 const prog = sade('sapper').version(pkg.version);
 
-if (process.argv[2] === 'start') {
-	// remove this in a future version
-	console.error(colors.bold().red(`'sapper start' has been removed`));
-	console.error(`Use 'node [build_dir]' instead`);
-	process.exit(1);
-}
-
-const start = Date.now();
-
 prog.command('dev')
 	.describe('Start a development server')
 	.option('-p, --port', 'Specify a port')
 	.option('-o, --open', 'Open a browser window')
-	.option('--dev-port', 'Specify a port for development server')
+	.action(async (opts: { port: number, open: boolean }) => {
-	.option('--hot', 'Use hot module replacement (requires webpack)', true)
+		const { dev } = await import('./cli/dev');
-	.option('--live', 'Reload on changes if not using --hot', true)
+		dev(opts);
-	.option('--bundler', 'Specify a bundler (rollup or webpack)')
-	.option('--cwd', 'Current working directory', '.')
-	.option('--src', 'Source directory', 'src')
-	.option('--routes', 'Routes directory', 'src/routes')
-	.option('--static', 'Static files directory', 'static')
-	.option('--output', 'Sapper output directory', 'src/node_modules/@sapper')
-	.option('--build-dir', 'Development build directory', '__sapper__/dev')
-	.action(async (opts: {
-		port: number,
-		open: boolean,
-		'dev-port': number,
-		live: boolean,
-		hot: boolean,
-		bundler?: 'rollup' | 'webpack',
-		cwd: string,
-		src: string,
-		routes: string,
-		static: string,
-		output: string,
-		'build-dir': string
-	}) => {
-		const { dev } = await import('./api/dev');
-
-		try {
-			const watcher = dev({
-				cwd: opts.cwd,
-				src: opts.src,
-				routes: opts.routes,
-				static: opts.static,
-				output: opts.output,
-				dest: opts['build-dir'],
-				port: opts.port,
-				'dev-port': opts['dev-port'],
-				live: opts.live,
-				hot: opts.hot,
-				bundler: opts.bundler
-			});
-
-			let first = true;
-
-			watcher.on('stdout', data => {
-				process.stdout.write(data);
-			});
-
-			watcher.on('stderr', data => {
-				process.stderr.write(data);
-			});
-
-			watcher.on('ready', async (event: ReadyEvent) => {
-				if (first) {
-					console.log(colors.bold().cyan(`> Listening on http://localhost:${event.port}`));
-					if (opts.open) {
-						const { exec } = await import('child_process');
-						exec(`open http://localhost:${event.port}`);
-					}
-					first = false;
-				}
-			});
-
-			watcher.on('invalid', (event: InvalidEvent) => {
-				const changed = event.changed.map(filename => path.relative(process.cwd(), filename)).join(', ');
-				console.log(`\n${colors.bold().cyan(changed)} changed. rebuilding...`);
-			});
-
-			watcher.on('error', (event: ErrorEvent) => {
-				const { type, error } = event;
-
-				console.log(colors.bold().red(`✗ ${type}`));
-
-				if (error.loc && error.loc.file) {
-					console.log(colors.bold(`${path.relative(process.cwd(), error.loc.file)} (${error.loc.line}:${error.loc.column})`));
-				}
-
-				console.log(colors.red(event.error.message));
-				if (error.frame) console.log(error.frame);
-			});
-
-			watcher.on('fatal', (event: FatalEvent) => {
-				console.log(colors.bold().red(`> ${event.message}`));
-				if (event.log) console.log(event.log);
-			});
-
-			watcher.on('build', (event: BuildEvent) => {
-				if (event.errors.length) {
-					console.log(colors.bold().red(`✗ ${event.type}`));
-
-					event.errors.filter(e => !e.duplicate).forEach(error => {
-						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) {
-						console.log(`${hidden} duplicate ${hidden === 1 ? 'error' : 'errors'} hidden\n`);
-					}
-				} else if (event.warnings.length) {
-					console.log(colors.bold().yellow(`• ${event.type}`));
-
-					event.warnings.filter(e => !e.duplicate).forEach(warning => {
-						if (warning.file) console.log(colors.bold(warning.file));
-						console.log(warning.message);
-					});
-
-					const hidden = event.warnings.filter(e => e.duplicate).length;
-					if (hidden > 0) {
-						console.log(`${hidden} duplicate ${hidden === 1 ? 'warning' : 'warnings'} hidden\n`);
-					}
-				} else {
-					console.log(`${colors.bold().green(`✔ ${event.type}`)} ${colors.gray(`(${format_milliseconds(event.duration)})`)}`);
-				}
-			});
-		} catch (err) {
-			console.log(colors.bold().red(`> ${err.message}`));
-			console.log(colors.gray(err.stack));
-			process.exit(1);
-		}
 	});
 
 prog.command('build [dest]')
 	.describe('Create a production-ready version of your app')
 	.option('-p, --port', 'Default of process.env.PORT', '3000')
-	.option('--bundler', 'Specify a bundler (rollup or webpack, blank for auto)')
-	.option('--legacy', 'Create separate legacy build')
-	.option('--cwd', 'Current working directory', '.')
-	.option('--src', 'Source directory', 'src')
-	.option('--routes', 'Routes directory', 'src/routes')
-	.option('--output', 'Sapper output directory', 'src/node_modules/@sapper')
 	.example(`build custom-dir -p 4567`)
-	.action(async (dest = '__sapper__/build', opts: {
+	.action(async (dest = 'build', opts: { port: string }) => {
-		port: string,
-		legacy: boolean,
-		bundler?: 'rollup' | 'webpack',
-		cwd: string,
-		src: string,
-		routes: string,
-		output: string
-	}) => {
 		console.log(`> Building...`);
 
+		process.env.NODE_ENV = process.env.NODE_ENV || 'production';
+		process.env.SAPPER_DEST = dest;
+
+		const start = Date.now();
+
 		try {
-			await _build(opts.bundler, opts.legacy, opts.cwd, opts.src, opts.routes, opts.output, dest);
+			const { build } = await import('./cli/build');
+			await build();
 
 			const launcher = path.resolve(dest, 'index.js');
 
 			fs.writeFileSync(launcher, `
 				// generated by sapper build at ${new Date().toISOString()}
 				process.env.NODE_ENV = process.env.NODE_ENV || 'production';
+				process.env.SAPPER_DEST = __dirname;
 				process.env.PORT = process.env.PORT || ${opts.port || 3000};
 
 				console.log('Starting server on port ' + process.env.PORT);
-				require('./server/server.js');
+				require('./server.js');
 			`.replace(/^\t+/gm, '').trim());
 
-			console.error(`\n> Finished in ${elapsed(start)}. Type ${colors.bold().cyan(`node ${dest}`)} to run the app.`);
+			console.error(`\n> Finished in ${elapsed(start)}. Type ${colors.bold.cyan(`node ${dest}`)} to run the app.`);
 		} catch (err) {
-			console.log(`${colors.bold().red(`> ${err.message}`)}`);
+			console.error(err ? err.details || err.stack || err.message || err : 'Unknown error');
-			console.log(colors.gray(err.stack));
 			process.exit(1);
 		}
 	});
 
+prog.command('start [dir]')
+	.describe('Start your app')
+	.option('-p, --port', 'Specify a port')
+	.option('-o, --open', 'Open a browser window')
+	.action(async (dir = 'build', opts: { port: number, open: boolean }) => {
+		const { start } = await import('./cli/start');
+		start(dir, opts);
+	});
+
 prog.command('export [dest]')
 	.describe('Export your app as static files (if possible)')
 	.option('--build', '(Re)build app before exporting', true)
+	.option('--build-dir', 'Specify a custom temporary build directory', '.sapper/prod')
 	.option('--basepath', 'Specify a base path')
-	.option('--timeout', 'Milliseconds to wait for a page (--no-timeout to disable)', 5000)
+	.action(async (dest = 'export', opts: { build: boolean, 'build-dir': string, basepath?: string }) => {
-	.option('--legacy', 'Create separate legacy build')
+		process.env.NODE_ENV = 'production';
-	.option('--bundler', 'Specify a bundler (rollup or webpack, blank for auto)')
+		process.env.SAPPER_DEST = opts['build-dir'];
-	.option('--cwd', 'Current working directory', '.')
+
-	.option('--src', 'Source directory', 'src')
+		const start = Date.now();
-	.option('--routes', 'Routes directory', 'src/routes')
+
-	.option('--static', 'Static files directory', 'static')
-	.option('--output', 'Sapper output directory', 'src/node_modules/@sapper')
-	.option('--build-dir', 'Intermediate build directory', '__sapper__/build')
-	.action(async (dest = '__sapper__/export', opts: {
-		build: boolean,
-		legacy: boolean,
-		bundler?: 'rollup' | 'webpack',
-		basepath?: string,
-		timeout: number | false,
-		cwd: string,
-		src: string,
-		routes: string,
-		static: string,
-		output: string,
-		'build-dir': string,
-	}) => {
 		try {
 			if (opts.build) {
 				console.log(`> Building...`);
-				await _build(opts.bundler, opts.legacy, opts.cwd, opts.src, opts.routes, opts.output, opts['build-dir']);
+				const { build } = await import('./cli/build');
+				await build();
 				console.error(`\n> Built in ${elapsed(start)}`);
 			}
 
-			const { export: _export } = await import('./api/export');
+			const { exporter } = await import('./cli/export');
-			const { default: pb } = await import('pretty-bytes');
+			await exporter(dest, opts);
-
+			console.error(`\n> Finished in ${elapsed(start)}. Type ${colors.bold.cyan(`npx serve ${dest}`)} to run the app.`);
-			await _export({
-				cwd: opts.cwd,
-				static: opts.static,
-				build_dir: opts['build-dir'],
-				export_dir: dest,
-				basepath: opts.basepath,
-				timeout: opts.timeout,
-
-				oninfo: event => {
-					console.log(colors.bold().cyan(`> ${event.message}`));
-				},
-
-				onfile: event => {
-					const size_color = event.size > 150000 ? colors.bold().red : event.size > 50000 ? colors.bold().yellow : colors.bold().gray;
-						const size_label = size_color(left_pad(pb(event.size), 10));
-
-						const file_label = event.status === 200
-							? event.file
-							: colors.bold()[event.status >= 400 ? 'red' : 'yellow'](`(${event.status}) ${event.file}`);
-
-						console.log(`${size_label}   ${file_label}`);
-				}
-			});
-
-			console.error(`\n> Finished in ${elapsed(start)}. Type ${colors.bold().cyan(`npx serve ${dest}`)} to run the app.`);
 		} catch (err) {
-			console.error(colors.bold().red(`> ${err.message}`));
+			console.error(err ? err.details || err.stack || err.message || err : 'Unknown error');
 			process.exit(1);
 		}
 	});
 
+// TODO upgrade
+
 prog.parse(process.argv);
 
-
+function elapsed(start: number) {
-async function _build(
+	return prettyMs(Date.now() - start);
-	bundler: 'rollup' | 'webpack',
-	legacy: boolean,
-	cwd: string,
-	src: string,
-	routes: string,
-	output: string,
-	dest: string
-) {
-	const { build } = await import('./api/build');
-
-	await build({
-		bundler,
-		legacy,
-		cwd,
-		src,
-		routes,
-		dest,
-
-		oncompile: event => {
-			let banner = `built ${event.type}`;
-			let c = (txt: string) => colors.cyan(txt);
-
-			const { warnings } = event.result;
-			if (warnings.length > 0) {
-				banner += ` with ${warnings.length} ${warnings.length === 1 ? 'warning' : 'warnings'}`;
-				c = (txt: string) => colors.cyan(txt);
-			}
-
-			console.log();
-			console.log(c(`┌─${repeat('─', banner.length)}─┐`));
-			console.log(c(`│ ${colors.bold(banner)       } │`));
-			console.log(c(`└─${repeat('─', banner.length)}─┘`));
-
-			console.log(event.result.print());
-		}
-	});
 }

src/cli/build.ts

@@ -0,0 +1,32 @@
+import { build as _build } from '../api/build';
+import * as colors from 'ansi-colors';
+import { locations } from '../config';
+
+export function build() {
+	return new Promise((fulfil, reject) => {
+		try {
+			const emitter = _build({
+				dest: locations.dest(),
+				app: locations.app(),
+				routes: locations.routes(),
+				webpack: 'webpack'
+			});
+
+			emitter.on('build', event => {
+				console.log(colors.inverse(`\nbuilt ${event.type}`));
+				console.log(event.webpack_stats.toString({ colors: true }));
+			});
+
+			emitter.on('error', event => {
+				reject(event.error);
+			});
+
+			emitter.on('done', event => {
+				fulfil();
+			});
+		} catch (err) {
+			console.log(`${colors.bold.red(`> ${err.message}`)}`);
+			process.exit(1);
+		}
+	});
+}

src/cli/dev.ts

@@ -0,0 +1,105 @@
+import * as path from 'path';
+import * as colors from 'ansi-colors';
+import * as child_process from 'child_process';
+import prettyMs from 'pretty-ms';
+import pb from 'pretty-bytes';
+import { dev as _dev } from '../api/dev';
+import * as events from '../api/interfaces';
+
+export function dev(opts: { port: number, open: boolean }) {
+	try {
+		const watcher = _dev(opts);
+
+		let first = true;
+
+		watcher.on('ready', (event: events.ReadyEvent) => {
+			if (first) {
+				console.log(`${colors.bold.cyan(`> Listening on http://localhost:${event.port}`)}`);
+				if (opts.open) child_process.exec(`open http://localhost:${event.port}`);
+				first = false;
+			}
+
+			// 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(', ');
+			console.log(`\n${colors.bold.cyan(changed)} changed. rebuilding...`);
+		});
+
+		watcher.on('error', (event: events.ErrorEvent) => {
+			console.log(`${colors.red(`✗ ${event.type}`)}`);
+			console.log(`${colors.red(event.message)}`);
+		});
+
+		watcher.on('fatal', (event: events.FatalEvent) => {
+			console.log(`${colors.bold.red(`> ${event.message}`)}`);
+			if (event.log) console.log(event.log);
+		});
+
+		watcher.on('preload', (event) => {
+			if (event.size > 25000) {
+				console.log(colors.bold.yellow(`${event.url} — large amount of preloaded data`));
+				console.log(`${colors.bold(pb(event.size))} of data was preloaded in total, above the recommended limit of ${pb(25000)}`);
+			}
+		});
+
+		watcher.on('unused_data', (event) => {
+			console.log(colors.bold.yellow(`${event.url} — unused preloaded data`));
+			console.log(`More data was returned from \`preload\` than was used during the initial render. Consider only returning essential data.`);
+
+			event.discrepancies.forEach(discrepancy => {
+				console.log(`${colors.bold(discrepancy.file)} loaded ${colors.bold(pb(discrepancy.preloaded))}, of which ${discrepancy.rendered > 2 ? `only ${colors.bold(pb(discrepancy.rendered))}` : 'none'} was used. The following properties were not referenced:`);
+
+				const slice = discrepancy.props.length > 12
+					? discrepancy.props.slice(0, 10)
+					: discrepancy.props;
+
+				console.log(slice.map((prop: string) => `• ${prop}`).join('\n'));
+
+				if (discrepancy.props.length > slice.length) {
+					console.log(`...and ${discrepancy.props.length - slice.length} more`);
+				}
+			});
+		});
+
+		watcher.on('build', (event: events.BuildEvent) => {
+			if (event.errors.length) {
+				console.log(`${colors.bold.red(`✗ ${event.type}`)}`);
+
+				event.errors.filter(e => !e.duplicate).forEach(error => {
+					console.log(error.message);
+				});
+
+				const hidden = event.errors.filter(e => e.duplicate).length;
+				if (hidden > 0) {
+					console.log(`${hidden} duplicate ${hidden === 1 ? 'error' : 'errors'} hidden\n`);
+				}
+			} else if (event.warnings.length) {
+				console.log(`${colors.bold.yellow(`• ${event.type}`)}`);
+
+				event.warnings.filter(e => !e.duplicate).forEach(warning => {
+					console.log(warning.message);
+				});
+
+				const hidden = event.warnings.filter(e => e.duplicate).length;
+				if (hidden > 0) {
+					console.log(`${hidden} duplicate ${hidden === 1 ? 'warning' : 'warnings'} hidden\n`);
+				}
+			} else {
+				console.log(`${colors.bold.green(`✔ ${event.type}`)} ${colors.gray(`(${prettyMs(event.duration)})`)}`);
+			}
+		});
+	} catch (err) {
+		console.log(`${colors.bold.red(`> ${err.message}`)}`);
+		process.exit(1);
+	}
+}

src/cli/export.ts

@@ -0,0 +1,48 @@
+import { exporter as _exporter } from '../api/export';
+import * as colors from 'ansi-colors';
+import prettyBytes from 'pretty-bytes';
+import { locations } from '../config';
+
+function left_pad(str: string, len: number) {
+	while (str.length < len) str = ` ${str}`;
+	return str;
+}
+
+export function exporter(export_dir: string, { basepath = '' }) {
+	return new Promise((fulfil, reject) => {
+		try {
+			const emitter = _exporter({
+				build: locations.dest(),
+				dest: export_dir,
+				basepath
+			});
+
+			emitter.on('file', event => {
+				const pb = prettyBytes(event.size);
+				const size_color = event.size > 150000 ? colors.bold.red : event.size > 50000 ? colors.bold.yellow : colors.bold.gray;
+				const size_label = size_color(left_pad(prettyBytes(event.size), 10));
+
+				const file_label = event.status === 200
+					? event.file
+					: colors.bold[event.status >= 400 ? 'red' : 'yellow'](`(${event.status}) ${event.file}`);
+
+				console.log(`${size_label}   ${file_label}`);
+			});
+
+			emitter.on('info', event => {
+				console.log(colors.bold.cyan(`> ${event.message}`));
+			});
+
+			emitter.on('error', event => {
+				reject(event.error);
+			});
+
+			emitter.on('done', event => {
+				fulfil();
+			});
+		} catch (err) {
+			console.log(`${colors.bold.red(`> ${err.message}`)}`);
+			process.exit(1);
+		}
+	});
+}

src/cli/start.ts

@@ -0,0 +1,39 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import * as child_process from 'child_process';
+import * as colors from 'ansi-colors';
+import * as ports from 'port-authority';
+
+export async function start(dir: string, opts: { port: number, open: boolean }) {
+	let port = opts.port || +process.env.PORT;
+
+	const resolved = path.resolve(dir);
+	const server = path.resolve(dir, 'server.js');
+
+	if (!fs.existsSync(server)) {
+		console.log(`${colors.bold.red(`> ${dir}/server.js does not exist — type ${colors.bold.cyan(dir === 'build' ? `npx sapper build` : `npx sapper build ${dir}`)} to create it`)}`);
+		return;
+	}
+
+	if (port) {
+		if (!await ports.check(port)) {
+			console.log(`${colors.bold.red(`> Port ${port} is unavailable`)}`);
+			return;
+		}
+	} else {
+		port = await ports.find(3000);
+	}
+
+	child_process.fork(server, [], {
+		cwd: process.cwd(),
+		env: Object.assign({
+			NODE_ENV: 'production',
+			PORT: port,
+			SAPPER_DEST: dir
+		}, process.env)
+	});
+
+	await ports.wait(port);
+	console.log(`${colors.bold.cyan(`> Listening on http://localhost:${port}`)}`);
+	if (opts.open) child_process.exec(`open http://localhost:${port}`);
+}

src/cli/upgrade.ts

@@ -0,0 +1,53 @@
+import * as fs from 'fs';
+import * as colors from 'ansi-colors';
+
+export default async function upgrade() {
+	const upgraded = [
+		await upgrade_sapper_main()
+	].filter(Boolean);
+
+	if (upgraded.length === 0) {
+		console.log(`No changes!`);
+	}
+}
+
+async function upgrade_sapper_main() {
+	const _2xx = read('templates/2xx.html');
+	const _4xx = read('templates/4xx.html');
+	const _5xx = read('templates/5xx.html');
+
+	const pattern = /<script src='\%sapper\.main\%'><\/script>/;
+
+	let replaced = false;
+
+	['2xx', '4xx', '5xx'].forEach(code => {
+		const file = `templates/${code}.html`
+		const template = read(file);
+		if (!template) return;
+
+		if (/\%sapper\.main\%/.test(template)) {
+			if (!pattern.test(template)) {
+				console.log(`${colors.red(`Could not replace %sapper.main% in ${file}`)}`);
+			} else {
+				write(file, template.replace(pattern, `%sapper.scripts%`));
+				console.log(`${colors.green(`Replaced %sapper.main% in ${file}`)}`);
+				replaced = true;
+			}
+		}
+	});
+
+	return replaced;
+}
+
+function read(file: string) {
+	try {
+		return fs.readFileSync(file, 'utf-8');
+	} catch (err) {
+		console.error(err);
+		return null;
+	}
+}
+
+function write(file: string, data: string) {
+	fs.writeFileSync(file, data);
+}

src/config.ts

@@ -0,0 +1,10 @@
+import * as path from 'path';
+
+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/config/env.ts

@@ -1,7 +0,0 @@
-export let dev: boolean;
-export let src: string;
-export let dest: string;
-
-export const set_dev = (_: boolean) => dev = _;
-export const set_src = (_: string) => src = _;
-export const set_dest = (_: string) => dest = _;

src/config/rollup.ts

@@ -1,53 +0,0 @@
-import { dev, src, dest } from './env';
-
-export default {
-	dev,
-
-	client: {
-		input: () => {
-			return `${src}/client.js`
-		},
-
-		output: () => {
-			let dir = `${dest}/client`;
-			if (process.env.SAPPER_LEGACY_BUILD) dir += `/legacy`;
-
-			return {
-				dir,
-				entryFileNames: '[name].[hash].js',
-				chunkFileNames: '[name].[hash].js',
-				format: 'esm',
-				sourcemap: dev
-			};
-		}
-	},
-
-	server: {
-		input: () => {
-			return {
-				server: `${src}/server.js`
-			};
-		},
-
-		output: () => {
-			return {
-				dir: `${dest}/server`,
-				format: 'cjs',
-				sourcemap: dev
-			};
-		}
-	},
-
-	serviceworker: {
-		input: () => {
-			return `${src}/service-worker.js`;
-		},
-
-		output: () => {
-			return {
-				file: `${dest}/service-worker.js`,
-				format: 'iife'
-			}
-		}
-	}
-};

src/core.ts

@@ -1,3 +1,3 @@
-export * from './core/create_app';
+export * from './core/create_manifests';
-export { default as create_compilers } from './core/create_compilers/index';
+export { default as create_compilers } from './core/create_compilers';
-export { default as create_manifest_data } from './core/create_manifest_data';
+export { default as create_routes } from './core/create_routes';

src/core/create_app.ts

@@ -1,291 +0,0 @@
-import * as fs from 'fs';
-import * as path from 'path';
-import { posixify, stringify, walk, write_if_changed } from '../utils';
-import { Page, PageComponent, ManifestData } from '../interfaces';
-
-export function create_app({
-	bundler,
-	manifest_data,
-	dev_port,
-	dev,
-	cwd,
-	src,
-	dest,
-	routes,
-	output
-}: {
-	bundler: string,
-	manifest_data: ManifestData;
-	dev_port?: number;
-	dev: boolean;
-	cwd: string;
-	src: string;
-	dest: string;
-	routes: string;
-	output: string
-}) {
-	if (!fs.existsSync(output)) fs.mkdirSync(output);
-
-	const path_to_routes = path.relative(`${output}/internal`, routes);
-
-	const client_manifest = generate_client_manifest(manifest_data, path_to_routes, bundler, dev, dev_port);
-	const server_manifest = generate_server_manifest(manifest_data, path_to_routes, cwd, src, dest, dev);
-
-	const app = generate_app(manifest_data, path_to_routes);
-
-	write_if_changed(`${output}/internal/manifest-client.mjs`, client_manifest);
-	write_if_changed(`${output}/internal/manifest-server.mjs`, server_manifest);
-	write_if_changed(`${output}/internal/App.svelte`, app);
-}
-
-export function create_serviceworker_manifest({ manifest_data, output, client_files, static_files }: {
-	manifest_data: ManifestData;
-	output: string;
-	client_files: string[];
-	static_files: string;
-}) {
-	let files: string[] = ['service-worker-index.html'];
-
-	if (fs.existsSync(static_files)) {
-		files = files.concat(walk(static_files));
-	} else {
-		// TODO remove in a future version
-		if (fs.existsSync('assets')) {
-			throw new Error(`As of Sapper 0.21, the assets/ directory should become static/`);
-		}
-	}
-
-	let code = `
-		// This file is generated by Sapper — do not edit it!
-		export const timestamp = ${Date.now()};
-
-		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) => 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(`${output}/service-worker.js`, code);
-}
-
-function generate_client_manifest(
-	manifest_data: ManifestData,
-	path_to_routes: string,
-	bundler: string,
-	dev: boolean,
-	dev_port?: number
-) {
-	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()));
-
-	const component_indexes: Record<string, number> = {};
-
-	const components = `[
-		${manifest_data.components.map((component, i) => {
-			const annotation = bundler === 'webpack'
-				? `/* webpackChunkName: "${component.name}" */ `
-				: '';
-
-			const source = get_file(path_to_routes, component);
-
-			component_indexes[component.name] = i;
-
-			return `{
-					js: () => import(${annotation}${stringify(source)}),
-					css: "__SAPPER_CSS_PLACEHOLDER:${stringify(component.file, false)}__"
-				}`;
-		}).join(',\n\t\t\t\t')}
-	]`.replace(/^\t/gm, '');
-
-	let needs_decode = false;
-
-	let routes = `[
-				${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';
-
-							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(', ')} }) }`;
-							}
-
-							return `{ i: ${component_indexes[part.component.name]} }`;
-						}).join(',\n\t\t\t\t\t\t')}
-					]
-				}`).join(',\n\n\t\t\t\t')}
-	]`.replace(/^\t/gm, '');
-
-	if (needs_decode) {
-		routes = `(d => ${routes})(decodeURIComponent)`
-	}
-
-	return `
-		// This file is generated by Sapper — do not edit it!
-		export { default as Root } from '${stringify(get_file(path_to_routes, manifest_data.root), false)}';
-		export { preload as root_preload } from '${manifest_data.root.has_preload ? stringify(get_file(path_to_routes, manifest_data.root), false) : './shared'}';
-		export { default as ErrorComponent } from '${stringify(get_file(path_to_routes, manifest_data.error), false)}';
-
-		export const ignore = [${server_routes_to_ignore.map(route => route.pattern).join(', ')}];
-
-		export const components = ${components};
-
-		export const routes = ${routes};
-
-		${dev ? `if (typeof window !== 'undefined') {
-			import(${stringify(posixify(path.resolve(__dirname, '../sapper-dev-client.js')))}).then(client => {
-				client.connect(${dev_port});
-			});
-		}` : ''}
-	`.replace(/^\t{2}/gm, '').trim();
-}
-
-function generate_server_manifest(
-	manifest_data: ManifestData,
-	path_to_routes: string,
-	cwd: string,
-	src: string,
-	dest: string,
-	dev: boolean
-) {
-	const imports = [].concat(
-		manifest_data.server_routes.map((route, i) =>
-			`import * as route_${i} from ${stringify(posixify(`${path_to_routes}/${route.file}`))};`),
-		manifest_data.components.map((component, i) =>
-			`import component_${i}${component.has_preload ? `, { preload as preload_${i} }` : ''} from ${stringify(get_file(path_to_routes, component))};`),
-		`import root${manifest_data.root.has_preload ? `, { preload as root_preload }` : ''} from ${stringify(get_file(path_to_routes, manifest_data.root))};`,
-		`import error from ${stringify(get_file(path_to_routes, manifest_data.error))};`
-	);
-
-	const component_lookup: Record<string, number> = {};
-	manifest_data.components.forEach((component, i) => {
-		component_lookup[component.name] = i;
-	});
-
-	let code = `
-		`.replace(/^\t\t/gm, '').trim();
-
-	const build_dir = posixify(path.relative(cwd, dest));
-	const src_dir = posixify(path.relative(cwd, src));
-
-	return `
-		// 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, i) => `{
-					// ${route.file}
-					pattern: ${route.pattern},
-					handlers: route_${i},
-					params: ${route.params.length > 0
-						? `match => ({ ${route.params.map((param, i) => `${param}: d(match[${i + 1}])`).join(', ')} })`
-						: `() => ({})`}
-				}`).join(',\n\n\t\t\t\t')}
-			],
-
-			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';
-
-							const props = [
-								`name: "${part.component.name}"`,
-								`file: ${stringify(part.component.file)}`,
-								`component: component_${component_lookup[part.component.name]}`,
-								part.component.has_preload && `preload: preload_${component_lookup[part.component.name]}`
-							].filter(Boolean);
-
-							if (part.params.length > 0) {
-								const params = part.params.map((param, i) => `${param}: d(match[${i + 1}])`);
-								props.push(`params: match => ({ ${params.join(', ')} })`);
-							}
-
-							return `{ ${props.join(', ')} }`;
-						}).join(',\n\t\t\t\t\t\t')}
-					]
-				}`).join(',\n\n\t\t\t\t')}
-			],
-
-			root,
-			root_preload${manifest_data.root.has_preload ? '' : `: () => {}`},
-			error
-		};
-
-		export const build_dir = ${JSON.stringify(build_dir)};
-
-		export const src_dir = ${JSON.stringify(src_dir)};
-
-		export const dev = ${dev ? 'true' : 'false'};
-	`.replace(/^\t{2}/gm, '').trim();
-}
-
-function generate_app(manifest_data: ManifestData, path_to_routes: string) {
-	// TODO remove default layout altogether
-
-	const max_depth = Math.max(...manifest_data.pages.map(page => page.parts.filter(Boolean).length));
-
-	const levels = [];
-	for (let i = 0; i < max_depth; i += 1) {
-		levels.push(i + 1);
-	}
-
-	let l = max_depth;
-
-	let pyramid = `<svelte:component this={level${l}.component} {...level${l}.props}/>`;
-
-	while (l-- > 1) {
-		pyramid = `
-			<svelte:component this={level${l}.component} segment={segments[${l}]} {...level${l}.props}>
-				{#if level${l + 1}}
-					${pyramid.replace(/\n/g, '\n\t\t\t\t\t')}
-				{/if}
-			</svelte:component>
-		`.replace(/^\t\t\t/gm, '').trim();
-	}
-
-	return `
-		<!-- This file is generated by Sapper — do not edit it! -->
-		<script>
-			import { setContext } from 'svelte';
-			import { CONTEXT_KEY } from './shared';
-			import Layout from '${get_file(path_to_routes, manifest_data.root)}';
-			import Error from '${get_file(path_to_routes, manifest_data.error)}';
-
-			export let session;
-			export let error;
-			export let status;
-			export let segments;
-			export let level0;
-			${levels.map(l => `export let level${l} = null;`).join('\n\t\t\t')}
-
-			setContext(CONTEXT_KEY, session);
-		</script>
-
-		<Layout segment={segments[0]} {...level0.props}>
-			{#if error}
-				<Error {error} {status}/>
-			{:else}
-				${pyramid.replace(/\n/g, '\n\t\t\t\t')}
-			{/if}
-		</Layout>
-	`.replace(/^\t\t/gm, '').trim();
-}
-
-function get_file(path_to_routes: string, component: PageComponent) {
-	if (component.default) return `./${component.type}.svelte`;
-	return posixify(`${path_to_routes}/${component.file}`);
-}

src/core/create_compilers.ts

@@ -0,0 +1,29 @@
+import * as path from 'path';
+import relative from 'require-relative';
+
+export default function create_compilers({ webpack }: { webpack: string }) {
+	const wp = relative('webpack', process.cwd());
+
+	const serviceworker_config = try_require(path.resolve(`${webpack}/service-worker.config.js`));
+
+	return {
+		client: wp(
+			require(path.resolve(`${webpack}/client.config.js`))
+		),
+
+		server: wp(
+			require(path.resolve(`${webpack}/server.config.js`))
+		),
+
+		serviceworker: serviceworker_config && wp(serviceworker_config)
+	};
+}
+
+function try_require(specifier: string) {
+	try {
+		return require(specifier);
+	} catch (err) {
+		if (err.code === 'MODULE_NOT_FOUND') return null;
+		throw err;
+	}
+}

src/core/create_compilers/RollupCompiler.ts

@@ -1,169 +0,0 @@
-import * as path from 'path';
-import relative from 'require-relative';
-import { CompileResult } from './interfaces';
-import RollupResult from './RollupResult';
-
-let rollup: any;
-
-export default class RollupCompiler {
-	_: Promise<any>;
-	_oninvalid: (filename: string) => void;
-	_start: number;
-	input: string;
-	warnings: any[];
-	errors: any[];
-	chunks: any[];
-	css_files: Array<{ id: string, code: string }>;
-
-	constructor(config: any) {
-		this._ = this.get_config(config);
-		this.input = null;
-		this.warnings = [];
-		this.errors = [];
-		this.chunks = [];
-		this.css_files = [];
-	}
-
-	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) => {
-				this.input = opts.input;
-			},
-			renderChunk: (code: string, chunk: any) => {
-				this.chunks.push(chunk);
-			},
-			transform: (code: string, id: string) => {
-				if (/\.css$/.test(id)) {
-					this.css_files.push({ id, code });
-					return ``;
-				}
-			}
-		});
-
-		const onwarn = mod.onwarn || ((warning: any, handler: (warning: any) => void) => {
-			handler(warning);
-		});
-
-		mod.onwarn = (warning: any) => {
-			onwarn(warning, (warning: any) => {
-				this.warnings.push(warning);
-			});
-		};
-
-		return mod;
-	}
-
-	oninvalid(cb: (filename: string) => void) {
-		this._oninvalid = cb;
-	}
-
-	async compile(): Promise<CompileResult> {
-		const config = await this._;
-
-		const start = Date.now();
-
-		try {
-			const bundle = await rollup.rollup(config);
-			await bundle.write(config.output);
-
-			return new RollupResult(Date.now() - start, this);
-		} catch (err) {
-			if (err.filename) {
-				// TODO this is a bit messy. Also, can
-				// Rollup emit other kinds of error?
-				err.message = [
-					`Failed to build — error in ${err.filename}: ${err.message}`,
-					err.frame
-				].filter(Boolean).join('\n');
-			}
-
-			throw err;
-		}
-	}
-
-	async watch(cb: (err?: Error, stats?: any) => void) {
-		const config = await this._;
-
-		const watcher = rollup.watch(config);
-
-		watcher.on('change', (id: string) => {
-			this.chunks = [];
-			this.warnings = [];
-			this.errors = [];
-			this._oninvalid(id);
-		});
-
-		watcher.on('event', (event: any) => {
-			switch (event.code) {
-				case 'FATAL':
-					// TODO kill the process?
-					if (event.error.filename) {
-						// TODO this is a bit messy. Also, can
-						// Rollup emit other kinds of error?
-						event.error.message = [
-							`Failed to build — error in ${event.error.filename}: ${event.error.message}`,
-							event.error.frame
-						].filter(Boolean).join('\n');
-					}
-
-					cb(event.error);
-					break;
-
-				case 'ERROR':
-					this.errors.push(event.error);
-					cb(null, new RollupResult(Date.now() - this._start, this));
-					break;
-
-				case 'START':
-				case 'END':
-					// TODO is there anything to do with this info?
-					break;
-
-				case 'BUNDLE_START':
-					this._start = Date.now();
-					break;
-
-				case 'BUNDLE_END':
-					cb(null, new RollupResult(Date.now() - this._start, this));
-					break;
-
-				default:
-					console.log(`Unexpected event ${event.code}`);
-			}
-		});
-	}
-
-	static async load_config(cwd: string) {
-		if (!rollup) rollup = relative('rollup', cwd);
-
-		const input = path.resolve(cwd, 'rollup.config.js');
-
-		const bundle = await rollup.rollup({
-			input,
-			inlineDynamicImports: true,
-			external: (id: string) => {
-				return (id[0] !== '.' && !path.isAbsolute(id)) || id.slice(-5, id.length) === '.json';
-			}
-		});
-
-		const resp = await bundle.generate({ format: 'cjs' });
-		const { code } = resp.output ? resp.output[0] : resp;
-
-		// 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/RollupResult.ts

@@ -1,119 +0,0 @@
-import * as path from 'path';
-import colors from 'kleur';
-import pb from 'pretty-bytes';
-import RollupCompiler from './RollupCompiler';
-import extract_css from './extract_css';
-import { left_pad } from '../../utils';
-import { CompileResult, BuildInfo, CompileError, Chunk, CssFile } from './interfaces';
-import { ManifestData, Dirs } from '../../interfaces';
-
-export default class RollupResult implements CompileResult {
-	duration: number;
-	errors: CompileError[];
-	warnings: CompileError[];
-	chunks: Chunk[];
-	assets: Record<string, string>;
-	css_files: CssFile[];
-	css: {
-		main: string,
-		chunks: Record<string, string[]>
-	};
-	summary: string;
-
-	constructor(duration: number, compiler: RollupCompiler) {
-		this.duration = duration;
-
-		this.errors = compiler.errors.map(munge_warning_or_error);
-		this.warnings = compiler.warnings.map(munge_warning_or_error); // TODO emit this as they happen
-
-		this.chunks = compiler.chunks.map(chunk => ({
-			file: chunk.fileName,
-			imports: chunk.imports.filter(Boolean),
-			modules: Object.keys(chunk.modules)
-		}));
-
-		this.css_files = compiler.css_files;
-
-		// TODO populate this properly. We don't have named chunks, as in
-		// webpack, but we can have a route -> [chunk] map or something
-		this.assets = {};
-
-		if (typeof compiler.input === 'string') {
-			compiler.chunks.forEach(chunk => {
-				if (compiler.input in chunk.modules) {
-					this.assets.main = chunk.fileName;
-				}
-			});
-		} else {
-			for (const name in compiler.input) {
-				const file = compiler.input[name];
-				const chunk = compiler.chunks.find(chunk => file in chunk.modules);
-				if (chunk) this.assets[name] = chunk.fileName;
-			}
-		}
-
-		this.summary = compiler.chunks.map(chunk => {
-			const size_color = chunk.code.length > 150000 ? colors.bold().red : chunk.code.length > 50000 ? colors.bold().yellow : colors.bold().white;
-			const size_label = left_pad(pb(chunk.code.length), 10);
-
-			const lines = [size_color(`${size_label} ${chunk.fileName}`)];
-
-			const deps = Object.keys(chunk.modules)
-				.map(file => {
-					return {
-						file: path.relative(process.cwd(), file),
-						size: chunk.modules[file].renderedLength
-					};
-				})
-				.filter(dep => dep.size > 0)
-				.sort((a, b) => b.size - a.size);
-
-			const total_unminified = deps.reduce((t, d) => t + d.size, 0);
-
-			deps.forEach((dep, i) => {
-				const c = i === deps.length - 1 ? '└' : '│';
-				let line = `           ${c} ${dep.file}`;
-
-				if (deps.length > 1) {
-					const p = (100 * dep.size / total_unminified).toFixed(1);
-					line += ` (${p}%)`;
-				}
-
-				lines.push(colors.gray(line));
-			});
-
-			return lines.join('\n');
-		}).join('\n');
-	}
-
-	to_json(manifest_data: ManifestData, dirs: Dirs): BuildInfo {
-		// TODO extract_css has side-effects that don't belong
-		// in a method called to_json
-		return {
-			bundler: 'rollup',
-			shimport: require('shimport/package.json').version,
-			assets: this.assets,
-			css: extract_css(this, manifest_data.components, dirs)
-		};
-	}
-
-	print() {
-		const blocks: string[] = this.warnings.map(warning => {
-			return warning.file
-				? `> ${colors.bold(warning.file)}\n${warning.message}`
-				: `> ${warning.message}`;
-		});
-
-		blocks.push(this.summary);
-
-		return blocks.join('\n\n');
-	}
-}
-
-function munge_warning_or_error(warning_or_error: any) {
-	return {
-		file: warning_or_error.filename,
-		message: [warning_or_error.message, warning_or_error.frame].filter(Boolean).join('\n')
-	};
-}
-

src/core/create_compilers/WebpackCompiler.ts

@@ -1,46 +0,0 @@
-import relative from 'require-relative';
-import { CompileResult } from './interfaces';
-import WebpackResult from './WebpackResult';
-
-let webpack: any;
-
-export class WebpackCompiler {
-	_: any;
-
-	constructor(config: any) {
-		if (!webpack) webpack = relative('webpack', process.cwd());
-		this._ = webpack(config);
-	}
-
-	oninvalid(cb: (filename: string) => void) {
-		this._.hooks.invalid.tap('sapper', cb);
-	}
-
-	compile(): Promise<CompileResult> {
-		return new Promise((fulfil, reject) => {
-			this._.run((err: Error, stats: any) => {
-				if (err) {
-					reject(err);
-					process.exit(1);
-				}
-
-				const result = new WebpackResult(stats);
-
-				if (result.errors.length) {
-					console.error(stats.toString({ colors: true }));
-					reject(new Error(`Encountered errors while building app`));
-				}
-
-				else {
-					fulfil(result);
-				}
-			});
-		});
-	}
-
-	watch(cb: (err?: Error, stats?: any) => void) {
-		this._.watch({}, (err?: Error, stats?: any) => {
-			cb(err, stats && new WebpackResult(stats));
-		});
-	}
-}

src/core/create_compilers/WebpackResult.ts

@@ -1,87 +0,0 @@
-import format_messages from 'webpack-format-messages';
-import { CompileResult, BuildInfo, CompileError, Chunk, CssFile } from './interfaces';
-import { ManifestData, Dirs, PageComponent } from '../../interfaces';
-
-const locPattern = /\((\d+):(\d+)\)$/;
-
-function munge_warning_or_error(message: string) {
-	// TODO this is all a bit rube goldberg...
-	const lines = message.split('\n');
-
-	const file = lines.shift()
-		.replace('', '') // careful — there is a special character at the beginning of this string
-		.replace('', '')
-		.replace('./', '');
-
-	let line = null;
-	let column = null;
-
-	const match = locPattern.exec(lines[0]);
-	if (match) {
-		lines[0] = lines[0].replace(locPattern, '');
-		line = +match[1];
-		column = +match[2];
-	}
-
-	return {
-		file,
-		message: lines.join('\n')
-	};
-}
-
-export default class WebpackResult implements CompileResult {
-	duration: number;
-	errors: CompileError[];
-	warnings: CompileError[];
-	chunks: Chunk[];
-	assets: Record<string, string>;
-	css_files: CssFile[];
-	stats: any;
-
-	constructor(stats: any) {
-		this.stats = stats;
-
-		const info = stats.toJson();
-
-		const messages = format_messages(stats);
-
-		this.errors = messages.errors.map(munge_warning_or_error);
-		this.warnings = messages.warnings.map(munge_warning_or_error);
-
-		this.duration = info.time;
-
-		this.chunks = info.assets.map((chunk: { name: string }) => ({ file: chunk.name }));
-		this.assets = info.assetsByChunkName;
-	}
-
-	to_json(manifest_data: ManifestData, dirs: Dirs): BuildInfo {
-		const extract_css = (assets: string[] | string) => {
-			assets = Array.isArray(assets) ? assets : [assets];
-			return assets.find(asset => /\.css$/.test(asset));
-		};
-
-		return {
-			bundler: 'webpack',
-			shimport: null, // webpack has its own loader
-			assets: this.assets,
-			css: {
-				main: extract_css(this.assets.main),
-				chunks: manifest_data.components
-					.reduce((chunks: Record<string, string[]>, component: PageComponent) => {
-						const css_dependencies = [];
-						const css = extract_css(this.assets[component.name]);
-
-						if (css) css_dependencies.push(css);
-
-						chunks[component.file] = css_dependencies;
-
-						return chunks;
-					}, {})
-			}
-		};
-	}
-
-	print() {
-		return this.stats.toString({ colors: true });
-	}
-}

src/core/create_compilers/extract_css.ts

@@ -1,248 +0,0 @@
-import * as fs from 'fs';
-import * as path from 'path';
-import hash from 'string-hash';
-import * as codec from 'sourcemap-codec';
-import { PageComponent, Dirs } from '../../interfaces';
-import { CompileResult, Chunk } from './interfaces';
-import { posixify } from '../../utils'
-
-const inline_sourcemap_header = 'data:application/json;charset=utf-8;base64,';
-
-function extract_sourcemap(raw: string, id: string) {
-	let raw_map: string;
-	let map = null;
-
-	const code = raw.replace(/\/\*#\s+sourceMappingURL=(.+)\s+\*\//g, (m, url) => {
-		if (raw_map) {
-			// TODO should not happen!
-			throw new Error(`Found multiple sourcemaps in single CSS file (${id})`);
-		}
-
-		raw_map = url;
-		return '';
-	}).trim();
-
-	if (raw_map) {
-		if (raw_map.startsWith(inline_sourcemap_header)) {
-			const json = Buffer.from(raw_map.slice(inline_sourcemap_header.length), 'base64').toString();
-			map = JSON.parse(json);
-		} else {
-			// TODO do we want to handle non-inline sourcemaps? could be a rabbit hole
-		}
-	}
-
-	return {
-		code,
-		map
-	};
-}
-
-type SourceMap = {
-	version: 3;
-	file: string;
-	sources: string[];
-	sourcesContent: string[];
-	names: string[];
-	mappings: string;
-};
-
-function get_css_from_modules(modules: string[], css_map: Map<string, string>, dirs: Dirs) {
-	const parts: string[] = [];
-	const mappings: number[][][] = [];
-
-	const combined_map: SourceMap = {
-		version: 3,
-		file: null,
-		sources: [],
-		sourcesContent: [],
-		names: [],
-		mappings: null
-	};
-
-	modules.forEach(module => {
-		if (!/\.css$/.test(module)) return;
-
-		const css = css_map.get(module);
-
-		const { code, map } = extract_sourcemap(css, module);
-
-		parts.push(code);
-
-		if (map) {
-			const lines = codec.decode(map.mappings);
-
-			if (combined_map.sources.length > 0 || combined_map.names.length > 0) {
-				lines.forEach(line => {
-					line.forEach(segment => {
-						// adjust source index
-						segment[1] += combined_map.sources.length;
-
-						// adjust name index
-						if (segment[4]) segment[4] += combined_map.names.length;
-					});
-				});
-			}
-
-			combined_map.sources.push(...map.sources);
-			combined_map.sourcesContent.push(...map.sourcesContent);
-			combined_map.names.push(...map.names);
-
-			mappings.push(...lines);
-		}
-	});
-
-	if (parts.length > 0) {
-		combined_map.mappings = codec.encode(mappings);
-
-		combined_map.sources = combined_map.sources.map(source => path.relative(`${dirs.dest}/client`, source));
-
-		return {
-			code: parts.join('\n'),
-			map: combined_map
-		};
-	}
-
-	return null;
-}
-
-export default function extract_css(client_result: CompileResult, components: PageComponent[], dirs: Dirs) {
-	const result: {
-		main: string | null;
-		chunks: Record<string, string[]>
-	} = {
-		main: null,
-		chunks: {}
-	};
-
-	if (!client_result.css_files) return; // Rollup-only for now
-
-	let asset_dir = `${dirs.dest}/client`;
-	if (process.env.SAPPER_LEGACY_BUILD) asset_dir += '/legacy';
-
-	const unclaimed = new Set(client_result.css_files.map(x => x.id));
-
-	const lookup = new Map();
-	client_result.chunks.forEach(chunk => {
-		lookup.set(chunk.file, chunk);
-	});
-
-	const css_map = new Map();
-	client_result.css_files.forEach(css_module => {
-		css_map.set(css_module.id, css_module.code);
-	});
-
-	const chunks_with_css = new Set();
-
-	// concatenate and emit CSS
-	client_result.chunks.forEach(chunk => {
-		const css_modules = chunk.modules.filter(m => css_map.has(m));
-		if (!css_modules.length) return;
-
-		const css = get_css_from_modules(css_modules, css_map, dirs);
-
-		const { code, map } = css;
-
-		const output_file_name = chunk.file.replace(/\.js$/, '.css');
-
-		map.file = output_file_name;
-		map.sources = map.sources.map(source => path.relative(`${asset_dir}`, source));
-
-		fs.writeFileSync(`${asset_dir}/${output_file_name}`, `${code}\n/* sourceMappingURL=./${output_file_name}.map */`);
-		fs.writeFileSync(`${asset_dir}/${output_file_name}.map`, JSON.stringify(map, null, '  '));
-
-		chunks_with_css.add(chunk);
-	});
-
-	const entry = path.resolve(dirs.src, 'client.js');
-	const entry_chunk = client_result.chunks.find(chunk => chunk.modules.indexOf(entry) !== -1);
-
-	const entry_chunk_dependencies: Set<Chunk> = new Set([entry_chunk]);
-	const entry_css_modules: string[] = [];
-
-	// recursively find the chunks this component depends on
-	entry_chunk_dependencies.forEach(chunk => {
-		if (!chunk) return; // TODO why does this happen?
-
-		chunk.imports.forEach(file => {
-			entry_chunk_dependencies.add(lookup.get(file));
-		});
-
-		if (chunks_with_css.has(chunk)) {
-			chunk.modules.forEach(file => {
-				unclaimed.delete(file);
-				if (css_map.has(file)) {
-					entry_css_modules.push(file);
-				}
-			});
-		}
-	});
-
-	// figure out which (css-having) chunks each component depends on
-	components.forEach(component => {
-		const resolved = path.resolve(dirs.routes, component.file);
-		const chunk: Chunk = client_result.chunks.find(chunk => chunk.modules.indexOf(resolved) !== -1);
-
-		if (!chunk) {
-			// this should never happen!
-			return;
-			// throw new Error(`Could not find chunk that owns ${component.file}`);
-		}
-
-		const chunk_dependencies: Set<Chunk> = new Set([chunk]);
-		const css_dependencies: string[] = [];
-
-		// recursively find the chunks this component depends on
-		chunk_dependencies.forEach(chunk => {
-			if (!chunk) return; // TODO why does this happen?
-
-			chunk.imports.forEach(file => {
-				chunk_dependencies.add(lookup.get(file));
-			});
-
-			if (chunks_with_css.has(chunk)) {
-				css_dependencies.push(chunk.file.replace(/\.js$/, '.css'));
-
-				chunk.modules.forEach(file => {
-					unclaimed.delete(file);
-				});
-			}
-		});
-
-		result.chunks[component.file] = css_dependencies;
-	});
-
-	fs.readdirSync(asset_dir).forEach(file => {
-		if (fs.statSync(`${asset_dir}/${file}`).isDirectory()) return;
-
-		const source = fs.readFileSync(`${asset_dir}/${file}`, 'utf-8');
-
-		const replaced = source.replace(/["']__SAPPER_CSS_PLACEHOLDER:(.+?)__["']/g, (m, route) => {
-			return JSON.stringify(result.chunks[route]);
-		});
-
-		fs.writeFileSync(`${asset_dir}/${file}`, replaced);
-	});
-
-	unclaimed.forEach(file => {
-		entry_css_modules.push(file);
-	});
-
-	const leftover = get_css_from_modules(entry_css_modules, css_map, dirs);
-	if (leftover) {
-		const { code, map } = leftover;
-
-		const main_hash = hash(code);
-
-		const output_file_name = `main.${main_hash}.css`;
-
-		map.file = output_file_name;
-		map.sources = map.sources.map(source => path.relative(asset_dir, source));
-
-		fs.writeFileSync(`${asset_dir}/${output_file_name}`, `${code}\n/* sourceMappingURL=client/${output_file_name}.map */`);
-		fs.writeFileSync(`${asset_dir}/${output_file_name}.map`, JSON.stringify(map, null, '  '));
-
-		result.main = output_file_name;
-	}
-
-	return result;
-}

src/core/create_compilers/index.ts

@@ -1,72 +0,0 @@
-import * as path from 'path';
-import RollupCompiler from './RollupCompiler';
-import { WebpackCompiler } from './WebpackCompiler';
-import { set_dev, set_src, set_dest } from '../../config/env';
-
-export type Compiler = RollupCompiler | WebpackCompiler;
-
-export type Compilers = {
-	client: Compiler;
-	server: Compiler;
-	serviceworker?: Compiler;
-}
-
-export default async function create_compilers(
-	bundler: 'rollup' | 'webpack',
-	cwd: string,
-	src: string,
-	dest: string,
-	dev: boolean
-): Promise<Compilers> {
-	set_dev(dev);
-	set_src(src);
-	set_dest(dest);
-
-	if (bundler === 'rollup') {
-		const config = await RollupCompiler.load_config(cwd);
-		validate_config(config, 'rollup');
-
-		normalize_rollup_config(config.client);
-		normalize_rollup_config(config.server);
-
-		if (config.serviceworker) {
-			normalize_rollup_config(config.serviceworker);
-		}
-
-		return {
-			client: new RollupCompiler(config.client),
-			server: new RollupCompiler(config.server),
-			serviceworker: config.serviceworker && new RollupCompiler(config.serviceworker)
-		};
-	}
-
-	if (bundler === 'webpack') {
-		const config = require(path.resolve(cwd, 'webpack.config.js'));
-		validate_config(config, 'webpack');
-
-		return {
-			client: new WebpackCompiler(config.client),
-			server: new WebpackCompiler(config.server),
-			serviceworker: config.serviceworker && new WebpackCompiler(config.serviceworker)
-		};
-	}
-
-	// this shouldn't be possible...
-	throw new Error(`Invalid bundler option '${bundler}'`);
-}
-
-function validate_config(config: any, bundler: 'rollup' | 'webpack') {
-	if (!config.client || !config.server) {
-		throw new Error(`${bundler}.config.js must export a { client, server, serviceworker? } object`);
-	}
-}
-
-function normalize_rollup_config(config: any) {
-	if (typeof config.input === 'string') {
-		config.input = path.normalize(config.input);
-	} else {
-		for (const name in config.input) {
-			config.input[name] = path.normalize(config.input[name]);
-		}
-	}
-}

src/core/create_compilers/interfaces.ts

@@ -1,39 +0,0 @@
-import { ManifestData, Dirs } from '../../interfaces';
-
-export type Chunk = {
-	file: string;
-	imports: string[];
-	modules: string[];
-}
-
-export type CssFile = {
-	id: string;
-	code: string;
-};
-
-export class CompileError {
-	file: string;
-	message: string;
-}
-
-export interface CompileResult {
-	duration: number;
-	errors: CompileError[];
-	warnings: CompileError[];
-	chunks: Chunk[];
-	assets: Record<string, string>;
-	css_files: CssFile[];
-
-	to_json: (manifest_data: ManifestData, dirs: Dirs) => BuildInfo
-}
-
-export type BuildInfo = {
-	bundler: string;
-	shimport: string;
-	assets: Record<string, string>;
-	legacy_assets?: Record<string, string>;
-	css: {
-		main: string | null,
-		chunks: Record<string, string[]>
-	}
-}

src/core/create_manifests.ts

@@ -0,0 +1,191 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import * as glob from 'glob';
+import { posixify, write_if_changed } from './utils';
+import { dev, locations } from '../config';
+import { Page, PageComponent, ServerRoute } from '../interfaces';
+
+export function create_main_manifests({ routes, dev_port }: {
+	routes: { components: PageComponent[], pages: Page[], server_routes: ServerRoute[] };
+	dev_port?: number;
+}) {
+	const path_to_routes = path.relative(`${locations.app()}/manifest`, locations.routes());
+
+	const client_manifest = generate_client(routes, path_to_routes, dev_port);
+	const server_manifest = generate_server(routes, path_to_routes);
+
+	write_if_changed(
+		`${locations.app()}/manifest/default-layout.html`,
+		`<svelte:component this={child.component} {...child.props}/>`
+	);
+	write_if_changed(`${locations.app()}/manifest/client.js`, client_manifest);
+	write_if_changed(`${locations.app()}/manifest/server.js`, server_manifest);
+}
+
+export function create_serviceworker_manifest({ routes, client_files }: {
+	routes: { components: PageComponent[], pages: Page[], server_routes: ServerRoute[] };
+	client_files: string[];
+}) {
+	const assets = glob.sync('**', { cwd: 'assets', nodir: true });
+
+	let code = `
+		// This file is generated by Sapper — do not edit it!
+		export const timestamp = ${Date.now()};
+
+		export const assets = [\n\t${assets.map((x: string) => `"${x}"`).join(',\n\t')}\n];
+
+		export const shell = [\n\t${client_files.map((x: string) => `"${x}"`).join(',\n\t')}\n];
+
+		export const routes = [\n\t${routes.pages.map((r: Page) => `{ pattern: ${r.pattern} }`).join(',\n\t')}\n];
+	`.replace(/^\t\t/gm, '').trim();
+
+	write_if_changed(`${locations.app()}/manifest/service-worker.js`, code);
+}
+
+function right_pad(str: string, len: number) {
+	while (str.length < len) str += ' ';
+	return str;
+}
+
+function generate_client(
+	routes: { root: PageComponent, components: PageComponent[], pages: Page[], server_routes: ServerRoute[] },
+	path_to_routes: string,
+	dev_port?: number
+) {
+	const page_ids = new Set(routes.pages.map(page =>
+		page.pattern.toString()));
+
+	const server_routes_to_ignore = routes.server_routes.filter(route =>
+		!page_ids.has(route.pattern.toString()));
+
+	const len = Math.max(...routes.components.map(c => c.name.length));
+
+	let code = `
+		// This file is generated by Sapper — do not edit it!
+		import root from '${get_file(path_to_routes, routes.root)}';
+		import error from '${posixify(`${path_to_routes}/_error.html`)}';
+
+		${routes.components.map(component =>
+		`const ${component.name} = () =>
+			import(/* webpackChunkName: "${component.name}" */ '${get_file(path_to_routes, component)}');`)
+		.join('\n')}
+
+		export const manifest = {
+			ignore: [${server_routes_to_ignore.map(route => route.pattern).join(', ')}],
+
+			pages: [
+				${routes.pages.map(page => `{
+					// ${page.parts[page.parts.length - 1].component.file}
+					pattern: ${page.pattern},
+					parts: [
+						${page.parts.map(part => {
+							if (part === null) return 'null';
+
+							if (part.params.length > 0) {
+								const props = part.params.map((param, i) => `${param}: match[${i + 1}]`);
+								return `{ component: ${part.component.name}, params: match => ({ ${props.join(', ')} }) }`;
+							}
+
+							return `{ component: ${part.component.name} }`;
+						}).join(',\n\t\t\t\t\t\t')}
+					]
+				}`).join(',\n\n\t\t\t\t')}
+			],
+
+			root,
+
+			error
+		};
+
+		// this is included for legacy reasons
+		export const routes = {};`.replace(/^\t\t/gm, '').trim();
+
+	if (dev()) {
+		const sapper_dev_client = posixify(
+			path.resolve(__dirname, '../sapper-dev-client.js')
+		);
+
+		code += `
+
+			if (module.hot) {
+				import('${sapper_dev_client}').then(client => {
+					client.connect(${dev_port});
+				});
+			}`.replace(/^\t{3}/gm, '');
+	}
+
+	return code;
+}
+
+function generate_server(
+	routes: { root: PageComponent, components: PageComponent[], pages: Page[], server_routes: ServerRoute[] },
+	path_to_routes: string
+) {
+	const imports = [].concat(
+		routes.server_routes.map(route =>
+			`import * as ${route.name} from '${posixify(`${path_to_routes}/${route.file}`)}';`),
+		routes.components.map(component =>
+			`import ${component.name} from '${get_file(path_to_routes, component)}';`),
+		`import root from '${get_file(path_to_routes, routes.root)}';`,
+		`import error from '${posixify(`${path_to_routes}/_error.html`)}';`
+	);
+
+	let code = `
+		// This file is generated by Sapper — do not edit it!
+		${imports.join('\n')}
+
+		export const manifest = {
+			server_routes: [
+				${routes.server_routes.map(route => `{
+					// ${route.file}
+					pattern: ${route.pattern},
+					handlers: ${route.name},
+					params: ${route.params.length > 0
+						? `match => ({ ${route.params.map((param, i) => `${param}: match[${i + 1}]`).join(', ')} })`
+						: `() => ({})`}
+				}`).join(',\n\n\t\t\t\t')}
+			],
+
+			pages: [
+				${routes.pages.map(page => `{
+					// ${page.parts[page.parts.length - 1].component.file}
+					pattern: ${page.pattern},
+					parts: [
+						${page.parts.map(part => {
+							if (part === null) return 'null';
+
+							const props = [
+								`name: "${part.component.name}"`,
+								`file: "${part.component.file}"`,
+								`component: ${part.component.name}`
+							];
+
+							if (part.params.length > 0) {
+								const params = part.params.map((param, i) => `${param}: match[${i + 1}]`);
+								props.push(`params: match => ({ ${params.join(', ')} })`);
+							}
+
+							return `{ ${props.join(', ')} }`;
+						}).join(',\n\t\t\t\t\t\t')}
+					]
+				}`).join(',\n\n\t\t\t\t')}
+			],
+
+			root,
+
+			error
+		};
+
+		// this is included for legacy reasons
+		export const routes = {};`.replace(/^\t\t/gm, '').trim();
+
+	return code;
+}
+
+function get_file(path_to_routes: string, component: PageComponent) {
+	if (component.default) {
+		return `./default-layout.html`;
+	}
+
+	return posixify(`${path_to_routes}/${component.file}`);
+}

src/core/create_routes.ts

@@ -1,48 +1,23 @@
 import * as fs from 'fs';
 import * as path from 'path';
-import svelte from 'svelte/compiler';
+import { locations } from '../config';
-import { Page, PageComponent, ServerRoute, ManifestData } from '../interfaces';
+import { Page, PageComponent, ServerRoute } from '../interfaces';
-import { posixify, reserved_words } from '../utils';
+import { posixify } from './utils';
 
-const component_extensions = ['.svelte', '.html']; // TODO make this configurable (to include e.g. .svelte.md?)
+const default_layout_file = posixify(path.resolve(
-
+	__dirname,
-export default function create_manifest_data(cwd: string): ManifestData {
+	'../components/default-layout.html'
-	// 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/`);
-	}
-
-	function has_preload(file: string) {
-		const source = fs.readFileSync(path.join(cwd, file), 'utf-8');
-
-		if (/preload/.test(source)) {
-			try {
-				const { vars } = svelte.compile(source.replace(/<style\b[^>]*>[^]*?<\/style>/g, ''), { generate: false });
-				return vars.some((variable: any) => variable.module && variable.export_name === 'preload');
-			} catch (err) {}
-		}
-
-		return false;
-	}
 
+export default function create_routes(cwd = locations.routes()) {
 	const components: PageComponent[] = [];
 	const pages: Page[] = [];
 	const server_routes: ServerRoute[] = [];
 
 	const default_layout: PageComponent = {
 		default: true,
-		type: 'layout',
 		name: '_default_layout',
-		file: null,
+		file: null
-		has_preload: false
-	};
-
-	const default_error: PageComponent = {
-		default: true,
-		type: 'error',
-		name: '_default_error',
-		file: null,
-		has_preload: false
 	};
 
 	function walk(
@@ -60,16 +35,13 @@ export default function create_manifest_data(cwd: string): ManifestData {
 				const file = path.relative(cwd, resolved);
 				const is_dir = fs.statSync(resolved).isDirectory();
 
-				const ext = path.extname(basename);
-				if (!is_dir && !/^\.[a-z]+$/i.test(ext)) return null; // filter out tmp files etc
-
 				const segment = is_dir
 					? basename
 					: basename.slice(0, -path.extname(basename).length);
 
 				const parts = get_parts(segment);
 				const is_index = is_dir ? false : basename.startsWith('index.');
-				const is_page = component_extensions.indexOf(ext) !== -1;
+				const is_page = path.extname(basename) === '.html';
 
 				parts.forEach(part => {
 					if (/\]\[/.test(part.content)) {
@@ -83,7 +55,6 @@ export default function create_manifest_data(cwd: string): ManifestData {
 
 				return {
 					basename,
-					ext,
 					parts,
 					file: posixify(file),
 					is_dir,
@@ -91,7 +62,6 @@ export default function create_manifest_data(cwd: string): ManifestData {
 					is_page
 				};
 			})
-			.filter(Boolean)
 			.sort(comparator);
 
 		items.forEach(item => {
@@ -130,15 +100,11 @@ export default function create_manifest_data(cwd: string): ManifestData {
 			params.push(...item.parts.filter(p => p.dynamic).map(p => p.content));
 
 			if (item.is_dir) {
-				const ext = component_extensions.find((ext: string) => {
+				const index = path.join(dir, item.basename, '_layout.html');
-					const index = path.join(dir, item.basename, `_layout${ext}`);
-					return fs.existsSync(index);
-				});
 
-				const component = ext && {
+				const component = fs.existsSync(index) && {
 					name: `${get_slug(item.file)}__layout`,
-					file: `${item.file}/_layout${ext}`,
+					file: `${item.file}/_layout.html`
-					has_preload: has_preload(`${item.file}/_layout${ext}`)
 				};
 
 				if (component) components.push(component);
@@ -154,32 +120,34 @@ export default function create_manifest_data(cwd: string): ManifestData {
 			}
 
 			else if (item.is_page) {
-				const is_index = item.basename === `index${item.ext}`;
-
 				const component = {
 					name: get_slug(item.file),
-					file: item.file,
+					file: item.file
-					has_preload: has_preload(item.file)
 				};
 
+				const parts = stack.concat({
+					component,
+					params
+				});
+
 				components.push(component);
-
+				if (item.basename === 'index.html') {
-				const parts = (is_index && stack[stack.length - 1] === null)
+					pages.push({
-					? stack.slice(0, -1).concat({ component, params })
+						pattern: get_pattern(parent_segments),
-					: stack.concat({ component, params })
+						parts
-
+					});
-				const page = {
+				} else {
-					pattern: get_pattern(is_index ? parent_segments : segments, true),
+					pages.push({
-					parts
+						pattern: get_pattern(segments),
-				};
+						parts
-
+					});
-				pages.push(page);
+				}
 			}
 
 			else {
 				server_routes.push({
 					name: `route_${get_slug(item.file)}`,
-					pattern: get_pattern(segments, false),
+					pattern: get_pattern(segments),
 					file: item.file,
 					params: params
 				});
@@ -187,24 +155,14 @@ export default function create_manifest_data(cwd: string): ManifestData {
 		});
 	}
 
-	const root_ext = component_extensions.find(ext => fs.existsSync(path.join(cwd, `_layout${ext}`)));
+	const root_file = path.join(cwd, '_layout.html');
-	const root = root_ext
+	const root = fs.existsSync(root_file)
 		? {
 			name: 'main',
-			file: `_layout${root_ext}`,
+			file: '_layout.html'
-			has_preload: has_preload(`_layout${root_ext}`)
 		}
 		: default_layout;
 
-	const error_ext = component_extensions.find(ext => fs.existsSync(path.join(cwd, `_error${ext}`)));
-	const error = error_ext
-		? {
-			name: 'error',
-			file: `_error${error_ext}`,
-			has_preload: has_preload(`_error${error_ext}`)
-		}
-		: default_error;
-
 	walk(cwd, [], [], []);
 
 	// check for clashes
@@ -235,7 +193,6 @@ export default function create_manifest_data(cwd: string): ManifestData {
 
 	return {
 		root,
-		error,
 		components,
 		pages,
 		server_routes
@@ -313,7 +270,7 @@ function get_parts(part: string): Part[] {
 }
 
 function get_slug(file: string) {
-	let name = file
+	return file
 		.replace(/[\\\/]index/, '')
 		.replace(/_default([\/\\index])?\.html$/, 'index')
 		.replace(/[\/\\]/g, '_')
@@ -322,12 +279,9 @@ function get_slug(file: string) {
 		.replace(/[^a-zA-Z0-9_$]/g, c => {
 			return c === '.' ? '_' : `$${c.charCodeAt(0)}`
 		});
-
-	if (reserved_words.has(name)) name += '_';
-	return name;
 }
 
-function get_pattern(segments: Part[][], add_trailing_slash: boolean) {
+function get_pattern(segments: Part[][]) {
 	return new RegExp(
 		`^` +
 		segments.map(segment => {
@@ -341,6 +295,6 @@ function get_pattern(segments: Part[][], add_trailing_slash: boolean) {
 						.replace(/%5D/g, ']');
 			}).join('');
 		}).join('') +
-		(add_trailing_slash ? '\\\/?$' : '$')
+		'\\\/?$'
 	);
-}
+}

src/core/read_template.ts

@@ -1,16 +0,0 @@
-import * as fs from 'fs';
-
-export default function read_template(dir: string) {
-	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

@@ -0,0 +1,25 @@
+import * as sander from 'sander';
+
+const previous_contents = new Map();
+
+export function write_if_changed(file: string, code: string) {
+	if (code !== previous_contents.get(file)) {
+		previous_contents.set(file, code);
+		sander.writeFileSync(file, code);
+		fudge_mtime(file);
+	}
+}
+
+export function posixify(file: string) {
+	return file.replace(/[/\\]/g, '/');
+}
+
+export function fudge_mtime(file: string) {
+	// need to fudge the mtime so that webpack doesn't go doolally
+	const { atime, mtime } = sander.statSync(file);
+	sander.utimesSync(
+		file,
+		new Date(atime.getTime() - 999999),
+		new Date(mtime.getTime() - 999999)
+	);
+}

src/interfaces.ts

@@ -1,6 +1,3 @@
-import * as child_process from 'child_process';
-import { CompileResult } from './core/create_compilers/interfaces';
-
 export type Route = {
 	id: string;
 	handlers: {
@@ -19,18 +16,14 @@ export type Template = {
 	stream: (req, res, data: Record<string, string | Promise<string>>) => void;
 };
 
-export type WritableStore<T> = {
+export type Store = {
-	set: (value: T) => void;
+	get: () => any;
-	update: (fn: (value: T) => T) => void;
-	subscribe: (fn: (T: any) => void) => () => void;
 };
 
 export type PageComponent = {
 	default?: boolean;
-	type?: string;
 	name: string;
 	file: string;
-	has_preload: boolean;
 };
 
 export type Page = {
@@ -46,60 +39,4 @@ export type ServerRoute = {
 	pattern: RegExp;
 	file: string;
 	params: string[];
-};
+};
-
-export type Dirs = {
-	dest: string,
-	src: string,
-	routes: string
-};
-
-export type ManifestData = {
-	root: PageComponent;
-	error: PageComponent;
-	components: PageComponent[];
-	pages: Page[];
-	server_routes: ServerRoute[];
-};
-
-export type ReadyEvent = {
-	port: number;
-	process: child_process.ChildProcess;
-};
-
-export type ErrorEvent = {
-	type: string;
-	error: Error;
-};
-
-export type FatalEvent = {
-	message: string;
-};
-
-export type InvalidEvent = {
-	changed: string[];
-	invalid: {
-		client: boolean;
-		server: boolean;
-		serviceworker: boolean;
-	}
-};
-
-export type BuildEvent = {
-	type: string;
-	errors: Array<{ file: string, message: string, duplicate: boolean }>;
-	warnings: Array<{ file: string, message: string, duplicate: boolean }>;
-	duration: number;
-	result: CompileResult;
-};
-
-export type FileEvent = {
-	file: string;
-	size: number;
-};
-
-export type FailureEvent = {
-
-};
-
-export type DoneEvent = {};

src/middleware.ts

@@ -0,0 +1,642 @@
+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 prettyBytes from 'pretty-bytes';
+import { wrap_data } from './middleware/wrap_data';
+import { list_unused_properties } from './middleware/list_unused_properties';
+
+sourceMapSupport.install();
+
+type ServerRoute = {
+	pattern: RegExp;
+	handlers: Record<string, Handler>;
+	params: (match: RegExpMatchArray) => Record<string, string>;
+};
+
+type Page = {
+	pattern: RegExp;
+	parts: Array<{
+		name: string;
+		component: Component;
+		params?: (match: RegExpMatchArray) => Record<string, string>;
+	}>
+};
+
+type Manifest = {
+	server_routes: ServerRoute[];
+	pages: Page[];
+	root: Component;
+	error: Component;
+}
+
+type Handler = (req: Req, res: ServerResponse, next: () => void) => void;
+
+type Store = {
+	get: () => any
+};
+
+type Props = {
+	path: string;
+	query: Record<string, string>;
+	params: Record<string, string>;
+	error?: { message: string };
+	status?: number;
+	child: {
+		segment: string;
+		component: Component;
+		props: Props;
+	};
+	[key: string]: any;
+};
+
+interface Req extends ClientRequest {
+	url: string;
+	baseUrl: string;
+	originalUrl: string;
+	method: string;
+	path: string;
+	params: Record<string, string>;
+	query: Record<string, string>;
+	headers: Record<string, string>;
+}
+
+interface Component {
+	render: (data: any, opts: { store: Store }) => {
+		head: string;
+		css: { code: string, map: any };
+		html: string
+	},
+	preload: (data: any) => any | Promise<any>
+}
+
+const IGNORE = '__SAPPER__IGNORE__';
+function toIgnore(uri: string, val: any) {
+	if (Array.isArray(val)) return val.some(x => toIgnore(uri, x));
+	if (val instanceof RegExp) return val.test(uri);
+	if (typeof val === 'function') return val(uri);
+	return uri.startsWith(val.charCodeAt(0) === 47 ? val : `/${val}`);
+}
+
+export default function middleware(opts: {
+	manifest: Manifest,
+	store: (req: Req) => 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: '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 data = read(req.path.slice(1));
+
+				res.setHeader('Content-Type', type);
+				res.setHeader('Cache-Control', cache_control);
+				res.end(data);
+			} catch (err) {
+				res.statusCode = 404;
+				res.end('not found');
+			}
+		} else {
+			next();
+		}
+	};
+}
+
+function get_server_route_handler(routes: ServerRoute[]) {
+	function handle_route(route: ServerRoute, req: Req, res: ServerResponse, next: () => void) {
+		req.params = route.params(route.pattern.exec(req.path));
+
+		const method = req.method.toLowerCase();
+		// 'delete' cannot be exported from a module because it is a keyword,
+		// so check for 'del' instead
+		const method_export = method === 'delete' ? 'del' : method;
+		const handle_method = route.handlers[method_export];
+		if (handle_method) {
+			if (process.env.SAPPER_EXPORT) {
+				const { write, end, setHeader } = res;
+				const chunks: any[] = [];
+				const headers: Record<string, string> = {};
+
+				// intercept data so that it can be exported
+				res.write = function(chunk: any) {
+					chunks.push(new Buffer(chunk));
+					write.apply(res, arguments);
+				};
+
+				res.setHeader = function(name: string, value: string) {
+					headers[name.toLowerCase()] = value;
+					setHeader.apply(res, arguments);
+				};
+
+				res.end = function(chunk?: any) {
+					if (chunk) chunks.push(new Buffer(chunk));
+					end.apply(res, arguments);
+
+					process.send({
+						__sapper__: true,
+						event: 'file',
+						url: req.url,
+						method: req.method,
+						status: res.statusCode,
+						type: headers['content-type'],
+						body: Buffer.concat(chunks).toString()
+					});
+				};
+			}
+
+			const handle_next = (err?: Error) => {
+				if (err) {
+					res.statusCode = 500;
+					res.end(err.message);
+				} else {
+					process.nextTick(next);
+				}
+			};
+
+			try {
+				handle_method(req, res, handle_next);
+			} catch (err) {
+				handle_next(err);
+			}
+		} else {
+			// no matching handler for method
+			process.nextTick(next);
+		}
+	}
+
+	return function find_route(req: Req, res: ServerResponse, next: () => void) {
+		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) => Store) {
+	const output = locations.dest();
+
+	const get_chunks = dev()
+		? () => JSON.parse(fs.readFileSync(path.join(output, 'client_assets.json'), 'utf-8'))
+		: (assets => () => assets)(JSON.parse(fs.readFileSync(path.join(output, 'client_assets.json'), 'utf-8')));
+
+	const template = dev()
+		? () => fs.readFileSync(`${locations.app()}/template.html`, 'utf-8')
+		: (str => () => str)(fs.readFileSync(`${locations.dest()}/template.html`, 'utf-8'));
+
+	const { server_routes, pages } = manifest;
+	const error_route = manifest.error;
+
+	const should_wrap_data = dev() || process.env.SAPPER_EXPORT;
+
+	function handle_error(req: Req, res: ServerResponse, statusCode: number, error: Error | string) {
+		handle_page({
+			pattern: null,
+			parts: [
+				{ name: null, component: error_route }
+			]
+		}, req, res, statusCode, error);
+	}
+
+	function handle_page(page: Page, req: Req, res: ServerResponse, status = 200, error: Error | string = null) {
+		const get_params = page.parts[page.parts.length - 1].params || (() => ({}));
+		const match = error ? null : page.pattern.exec(req.path);
+
+		const chunks: Record<string, string | string[]> = get_chunks();
+
+		res.setHeader('Content-Type', 'text/html');
+
+		// preload main.js and current route
+		// TODO detect other stuff we can preload? images, CSS, fonts?
+		let preloaded_chunks = Array.isArray(chunks.main) ? chunks.main : [chunks.main];
+		if (!error) {
+			page.parts.forEach(part => {
+				if (!part) return;
+
+				// using concat because it could be a string or an array. thanks webpack!
+				preloaded_chunks = preloaded_chunks.concat(chunks[part.name]);
+			});
+		}
+
+		const link = preloaded_chunks
+			.filter(file => !file.match(/\.map$/))
+			.map(file => `<${req.baseUrl}/client/${file}>;rel="preload";as="script"`)
+			.join(', ');
+
+		res.setHeader('Link', link);
+
+		const store = store_getter ? store_getter(req) : null;
+
+		let redirect: { statusCode: number, location: string };
+		let preload_error: { statusCode: number, message: Error | string };
+
+		const preload_context = {
+			redirect: (statusCode: number, location: string) => {
+				if (redirect && (redirect.statusCode !== statusCode || redirect.location !== location)) {
+					throw new Error(`Conflicting redirects`);
+				}
+				redirect = { statusCode, location };
+			},
+			error: (statusCode: number, message: Error | string) => {
+				preload_error = { statusCode, message };
+			},
+			fetch: (url: string, opts?: any) => {
+				const parsed = new URL(url, `http://127.0.0.1:${process.env.PORT}${req.baseUrl ? req.baseUrl + '/' :''}`);
+
+				if (opts) {
+					opts = Object.assign({}, opts);
+
+					const include_cookies = (
+						opts.credentials === 'include' ||
+						opts.credentials === 'same-origin' && parsed.origin === `http://127.0.0.1:${process.env.PORT}`
+					);
+
+					if (include_cookies) {
+						const cookies: Record<string, string> = {};
+						if (!opts.headers) opts.headers = {};
+
+						const str = []
+							.concat(
+								cookie.parse(req.headers.cookie || ''),
+								cookie.parse(opts.headers.cookie || ''),
+								cookie.parse(res.getHeader('Set-Cookie') || '')
+							)
+							.map(cookie => {
+								return Object.keys(cookie)
+									.map(name => `${name}=${encodeURIComponent(cookie[name])}`)
+									.join('; ');
+							})
+							.filter(Boolean)
+							.join(', ');
+
+						opts.headers.cookie = str;
+					}
+				}
+
+				return fetch(parsed.href, opts);
+			},
+			store
+		};
+
+		const root_preloaded = manifest.root.preload
+			? manifest.root.preload.call(preload_context, {
+				path: req.path,
+				query: req.query,
+				params: {}
+			})
+			: {};
+
+		Promise.all([root_preloaded].concat(page.parts.map(part => {
+			if (!part) return null;
+
+			return part.component.preload
+				? part.component.preload.call(preload_context, {
+					path: req.path,
+					query: req.query,
+					params: part.params ? part.params(match) : {}
+				})
+				: {};
+		}))).catch(err => {
+			preload_error = { statusCode: 500, message: err };
+			return []; // appease TypeScript
+		}).then(preloaded => {
+			if (redirect) {
+				const location = `${req.baseUrl}/${redirect.location}`;
+
+				res.statusCode = redirect.statusCode;
+				res.setHeader('Location', location);
+				res.end();
+
+				if (process.send) {
+					process.send({
+						__sapper__: true,
+						event: 'file',
+						url: req.url,
+						method: req.method,
+						status: redirect.statusCode,
+						type: 'text/html',
+						body: `<script>window.location.href = "${location}"</script>`
+					});
+				}
+
+				return;
+			}
+
+			if (preload_error) {
+				handle_error(req, res, preload_error.statusCode, preload_error.message);
+				return;
+			}
+
+			const segments = req.path.split('/').filter(Boolean);
+
+			const props: Props = {
+				path: req.path,
+				query: req.query,
+				params: {},
+				child: null
+			};
+
+			if (error) {
+				props.error = error instanceof Error ? error : { message: error };
+				props.status = status;
+			}
+
+			const data = Object.assign({}, props, preloaded[0], {
+				params: {},
+				child: {
+					segment: segments[0]
+				}
+			});
+
+			// in dev and export modes, we wrap data in proxies to see
+			// how much of it is used in the initial render
+			const wrapped = should_wrap_data && wrap_data(preloaded);
+
+			// this is an easy way to 'reify' top-level values
+			const _preloaded = should_wrap_data
+				? wrapped.data.map((x: any) => x)
+				: preloaded;
+
+			let level = data.child;
+			for (let i = 0; i < page.parts.length; i += 1) {
+				const part = page.parts[i];
+				if (!part) continue;
+
+				const get_params = part.params || (() => ({}));
+
+				Object.assign(level, {
+					component: part.component,
+					props: Object.assign({}, props, {
+						params: get_params(match)
+					}, _preloaded[i + 1])
+				});
+
+				level.props.child = <Props["child"]>{
+					segment: segments[i + 1]
+				};
+				level = level.props.child;
+			}
+
+			const { html, head, css } = manifest.root.render(data, {
+				store
+			});
+
+			let scripts = []
+				.concat(chunks.main) // chunks main might be an array. it might not! thanks, webpack
+				.filter(file => !file.match(/\.map$/))
+				.map(file => `<script src='${req.baseUrl}/client/${file}'></script>`)
+				.join('');
+
+			const unwrapped = should_wrap_data && wrapped.unwrap();
+
+			const preloaded_serialized = preloaded.map(try_serialize);
+
+			if (should_wrap_data && process.send) {
+				const discrepancies = [];
+
+				unwrapped.forEach((clone, i) => {
+					const loaded = preloaded_serialized[i];
+					if (!loaded) return;
+
+					const rendered = try_serialize(clone);
+
+					if (rendered !== loaded) {
+						const part = page.parts[i - 1];
+						const file = part ? part.file : '_layout.html';
+
+						discrepancies.push({
+							file,
+							preloaded: loaded.length,
+							rendered: rendered.length,
+							props: list_unused_properties(preloaded[i], clone)
+						});
+					}
+				});
+
+				if (discrepancies.length) {
+					process.send({
+						__sapper__: true,
+						event: 'unused_data',
+						url: req.url,
+						discrepancies
+					});
+				}
+			}
+
+			const serialized = {
+				preloaded: `[${preloaded_serialized.join(',')}]`,
+				store: store && try_serialize(store.get())
+			};
+
+			let inline_script = `__SAPPER__={${[
+				error && `error:1`,
+				`baseUrl:"${req.baseUrl}"`,
+				serialized.preloaded && `preloaded:${serialized.preloaded}`,
+				serialized.store && `store:${serialized.store}`
+			].filter(Boolean).join(',')}};`;
+
+			const has_service_worker = fs.existsSync(path.join(locations.dest(), 'service-worker.js'));
+			if (has_service_worker) {
+				inline_script += `if ('serviceWorker' in navigator) navigator.serviceWorker.register('${req.baseUrl}/service-worker.js');`;
+			}
+
+			const body = template()
+				.replace('%sapper.base%', () => `<base href="${req.baseUrl}/">`)
+				.replace('%sapper.scripts%', () => `<script>${inline_script}</script>${scripts}`)
+				.replace('%sapper.html%', () => html)
+				.replace('%sapper.head%', () => `<noscript id='sapper-head-start'></noscript>${head}<noscript id='sapper-head-end'></noscript>`)
+				.replace('%sapper.styles%', () => (css && css.code ? `<style>${css.code}</style>` : ''));
+
+			res.statusCode = status;
+			res.end(body);
+
+			if (process.send) {
+				process.send({
+					__sapper__: true,
+					event: 'preload',
+					url: req.url,
+					size: serialized.preloaded.length
+				});
+
+				process.send({
+					__sapper__: true,
+					event: 'file',
+					url: req.url,
+					method: req.method,
+					status,
+					type: 'text/html',
+					body
+				});
+			}
+		}).catch(err => {
+			if (error) {
+				// we encountered an error while rendering the error page — oops
+				res.statusCode = 500;
+				res.end(`<pre>${escape_html(err.message)}</pre>`);
+			} else {
+				handle_error(req, res, 500, err);
+			}
+		});
+	}
+
+	return function find_route(req: Req, res: ServerResponse, next: () => void) {
+		if (req[IGNORE]) return next();
+
+		if (!server_routes.some(route => route.pattern.test(req.path))) {
+			for (const page of pages) {
+				if (page.pattern.test(req.path)) {
+					handle_page(page, req, res);
+					return;
+				}
+			}
+		}
+
+		handle_error(req, res, 404, 'Not found');
+	};
+}
+
+function compose_handlers(handlers: Handler[]) {
+	return (req: Req, res: ServerResponse, next: () => void) => {
+		let i = 0;
+		function go() {
+			const handler = handlers[i];
+
+			if (handler) {
+				handler(req, res, () => {
+					i += 1;
+					go();
+				});
+			} else {
+				next();
+			}
+		}
+
+		go();
+	};
+}
+
+function try_serialize(data: any) {
+	try {
+		return devalue(data);
+	} catch (err) {
+		return null;
+	}
+}
+
+function escape_html(html: string) {
+	const chars: Record<string, string> = {
+		'"' : 'quot',
+		"'": '#39',
+		'&': 'amp',
+		'<' : 'lt',
+		'>' : 'gt'
+	};
+
+	return html.replace(/["'&<>]/g, c => `&${chars[c]};`);
+}

src/middleware/list_unused_properties.ts

@@ -0,0 +1,34 @@
+export function list_unused_properties(all: any, used: any) {
+	const props: string[] = [];
+
+	const seen = new Set();
+
+	function walk(keypath: string, a: any, b: any) {
+		if (seen.has(a)) return;
+		seen.add(a);
+
+		if (!a || typeof a !== 'object') return;
+
+		const is_array = Array.isArray(a);
+
+		for (const key in a) {
+			const child_keypath = keypath
+				? is_array ? `${keypath}[${key}]` : `${keypath}.${key}`
+				: key;
+
+			if (hasProp.call(b, key)) {
+				const a_child = a[key];
+				const b_child = b[key];
+
+				walk(child_keypath, a_child, b_child);
+			} else {
+				props.push(child_keypath);
+			}
+		}
+	}
+
+	walk(null, all, used);
+	return props;
+}
+
+const hasProp = Object.prototype.hasOwnProperty;

src/middleware/wrap_data.ts

@@ -0,0 +1,85 @@
+type Obj = Record<string, any>;
+
+export function wrap_data(data: any) {
+	const proxies = new Map();
+	const clones = new Map();
+
+	const handler = {
+		get(target: any, property: string): any {
+			const value = target[property];
+			const intercepted = intercept(value);
+
+			const target_clone = clones.get(target);
+			const child_clone = clones.get(value);
+
+			if (target_clone && target.hasOwnProperty(property)) {
+				target_clone[property] = child_clone || value;
+			}
+
+			return intercepted;
+		},
+	};
+
+	function get_or_create_proxy(obj: any) {
+		if (!proxies.has(obj)) {
+			proxies.set(obj, new Proxy(obj, handler));
+		}
+
+		return proxies.get(obj);
+	}
+
+	function intercept(obj: any) {
+		if (clones.has(obj)) return obj;
+
+		if (obj && typeof obj === 'object') {
+			if (Array.isArray(obj)) {
+				clones.set(obj, []);
+				return get_or_create_proxy(obj);
+			}
+
+			else if (isPlainObject(obj)) {
+				clones.set(obj, {});
+				return get_or_create_proxy(obj);
+			}
+		}
+
+		clones.set(obj, obj);
+		return obj;
+	}
+
+	return {
+		data: intercept(data),
+		unwrap: () => {
+			return clones.get(data);
+		}
+	};
+}
+
+const objectProtoOwnPropertyNames = Object.getOwnPropertyNames(Object.prototype).sort().join('\0')
+
+function isPlainObject(obj: any) {
+	const proto = Object.getPrototypeOf(obj);
+
+	if (
+		proto !== Object.prototype &&
+		proto !== null &&
+		Object.getOwnPropertyNames(proto).sort().join('\0') !== objectProtoOwnPropertyNames
+	) {
+		return false;
+	}
+
+	if (Object.getOwnPropertySymbols(obj).length > 0) {
+		return false;
+	}
+
+	return true;
+}
+
+
+function pick(obj: Obj, props: string[]) {
+	const picked: Obj = {};
+	props.forEach(prop => {
+		picked[prop] = obj[prop];
+	});
+	return picked;
+}

src/runtime/index.ts

@@ -0,0 +1,478 @@
+import { detach, findAnchor, scroll_state, which } from './utils';
+import { Component, ComponentConstructor, Params, Query, Redirect, Manifest, RouteData, ScrollPosition, Store, Target } 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 prepare_page(target: Target): Promise<{
+	redirect?: Redirect;
+	data?: any;
+	nullable_depth?: number;
+}> {
+	if (root) {
+		root.set({ preloading: true });
+	}
+
+	const { page, path, query } = target;
+	const new_segments = path.split('/').filter(Boolean);
+	let changed_from = 0;
+
+	while (
+		segments[changed_from] &&
+		new_segments[changed_from] &&
+		segments[changed_from] === new_segments[changed_from]
+	) changed_from += 1;
+
+	let redirect: Redirect = null;
+	let error: { statusCode: number, message: Error | string } = null;
+
+	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 { default: Component } = await part.component();
+		const req = {
+			path,
+			query,
+			params: part.params ? part.params(target.match) : {}
+		};
+
+		const preloaded = ready || !initial_data.preloaded[i + 1]
+			? Component.preload ? await Component.preload.call(preload_context, req) : {}
+			: initial_data.preloaded[i + 1];
+
+		return { Component, preloaded };
+	})).catch(err => {
+		error = { statusCode: 500, message: err };
+		return [];
+	}).then(async results => {
+		if (!root_data) root_data = await root_preload;
+
+		if (redirect) {
+			return { redirect };
+		}
+
+		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;
+
+	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;
+
+	// 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) => {
+			return promise.then(route.load);
+		}, Promise.resolve());
+}
+
+// remove this in 0.9
+export { prefetchRoutes as preloadRoutes };

src/runtime/interfaces.ts

@@ -1,32 +1,24 @@
+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 interface ComponentConstructor {
-	new (options: { target: Node, props: any, hydrate: boolean }): Component;
+	new (options: { target: Node, data: any, store: Store, hydrate: boolean }): Component;
 	preload: (props: { params: Params, query: Query }) => Promise<any>;
 };
 
 export interface Component {
-	$set: (data: any) => void;
+	set: (data: any) => void;
-	$destroy: () => void;
+	destroy: () => void;
 }
 
-export type ComponentLoader = {
+export type Page = {
-	js: () => Promise<{ default: ComponentConstructor }>,
-	css: string[]
-};
-
-export type Route = {
 	pattern: RegExp;
 	parts: Array<{
-		i: number;
+		component: () => Promise<{ default: ComponentConstructor }>;
 		params?: (match: RegExpExecArray) => Record<string, string>;
 	}>;
 };
@@ -35,7 +27,7 @@ export type Manifest = {
 	ignore: RegExp[];
 	root: ComponentConstructor;
 	error: () => Promise<{ default: ComponentConstructor }>;
-	pages: Route[]
+	pages: Page[]
 };
 
 export type ScrollPosition = {
@@ -44,19 +36,14 @@ export type ScrollPosition = {
 };
 
 export type Target = {
-	href: string;
+	url: URL;
-	route: Route;
+	path: string;
-	match: RegExpExecArray;
 	page: Page;
+	match: RegExpExecArray;
+	query: Record<string, string | true>;
 };
 
 export type Redirect = {
 	statusCode: number;
 	location: string;
-};
-
-export type Page = {
-	path: string;
-	params: Record<string, string>;
-	query: Record<string, string | string[]>;
 };

src/runtime/utils.ts

@@ -0,0 +1,19 @@
+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/types.d.ts

@@ -1 +0,0 @@
-declare module 'svelte/compiler';

src/utils.ts

@@ -1,119 +0,0 @@
-import * as fs from 'fs';
-import * as path from 'path';
-
-export function left_pad(str: string, len: number) {
-	while (str.length < len) str = ` ${str}`;
-	return str;
-}
-
-export function repeat(str: string, i: number) {
-	let result = '';
-	while (i--) result += str;
-	return result;
-}
-
-export function format_milliseconds(ms: number) {
-	if (ms < 1000) return `${ms}ms`;
-	if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
-
-	const minutes = ~~(ms / 60000);
-	const seconds = Math.round((ms % 60000) / 1000);
-	return `${minutes}m${seconds < 10 ? '0' : ''}${seconds}s`;
-}
-
-export function elapsed(start: number) {
-	return format_milliseconds(Date.now() - start);
-}
-
-export function walk(cwd: string, dir = cwd, files: string[] = []) {
-	fs.readdirSync(dir).forEach(file => {
-		const resolved = path.resolve(dir, file);
-		if (fs.statSync(resolved).isDirectory()) {
-			walk(cwd, resolved, files);
-		} else {
-			files.push(posixify(path.relative(cwd, resolved)));
-		}
-	});
-
-	return files;
-}
-
-export function posixify(str: string) {
-	return str.replace(/\\/g, '/');
-}
-
-const previous_contents = new Map();
-
-export function write_if_changed(file: string, code: string) {
-	if (code !== previous_contents.get(file)) {
-		previous_contents.set(file, code);
-		fs.writeFileSync(file, code);
-		fudge_mtime(file);
-	}
-}
-
-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);
-	fs.utimesSync(
-		file,
-		new Date(atime.getTime() - 999999),
-		new Date(mtime.getTime() - 999999)
-	);
-}
-
-export const reserved_words = new Set([
-	'arguments',
-	'await',
-	'break',
-	'case',
-	'catch',
-	'class',
-	'const',
-	'continue',
-	'debugger',
-	'default',
-	'delete',
-	'do',
-	'else',
-	'enum',
-	'eval',
-	'export',
-	'extends',
-	'false',
-	'finally',
-	'for',
-	'function',
-	'if',
-	'implements',
-	'import',
-	'in',
-	'instanceof',
-	'interface',
-	'let',
-	'new',
-	'null',
-	'package',
-	'private',
-	'protected',
-	'public',
-	'return',
-	'static',
-	'super',
-	'switch',
-	'this',
-	'throw',
-	'true',
-	'try',
-	'typeof',
-	'var',
-	'void',
-	'while',
-	'with',
-	'yield',
-]);

src/webpack.ts

@@ -1,18 +1,18 @@
-import { dev, src, dest } from './env';
+import { locations, dev } from './config';
 
 export default {
-	dev,
+	dev: dev(),
 
 	client: {
 		entry: () => {
 			return {
-				main: `${src}/client`
+				main: `${locations.app()}/client`
 			};
 		},
 
 		output: () => {
 			return {
-				path: `${dest}/client`,
+				path: `${locations.dest()}/client`,
 				filename: '[hash]/[name].js',
 				chunkFilename: '[hash]/[name].[id].js',
 				publicPath: `client/`
@@ -23,13 +23,13 @@ export default {
 	server: {
 		entry: () => {
 			return {
-				server: `${src}/server`
+				server: `${locations.app()}/server`
 			};
 		},
 
 		output: () => {
 			return {
-				path: `${dest}/server`,
+				path: locations.dest(),
 				filename: '[name].js',
 				chunkFilename: '[hash]/[name].[id].js',
 				libraryTarget: 'commonjs2'
@@ -40,13 +40,13 @@ export default {
 	serviceworker: {
 		entry: () => {
 			return {
-				'service-worker': `${src}/service-worker`
+				'service-worker': `${locations.app()}/service-worker`
 			};
 		},
 
 		output: () => {
 			return {
-				path: dest,
+				path: locations.dest(),
 				filename: '[name].js',
 				chunkFilename: '[name].[id].[hash].js'
 			}

test/app/.gitignore

@@ -0,0 +1,7 @@
+.DS_Store
+node_modules
+.sapper
+yarn.lock
+cypress/screenshots
+templates/.*
+dist

test/app/README.md

@@ -0,0 +1,81 @@
+# sapper-template
+
+The default [Sapper](https://github.com/sveltejs/sapper) template. To clone it and get started:
+
+```bash
+npx degit sveltejs/sapper-template my-app
+cd my-app
+npm install # or yarn!
+npm run dev
+```
+
+Open up [localhost:3000](http://localhost:3000) and start clicking around.
+
+
+## Structure
+
+Sapper expects to find three directories in the root of your project — `assets`, `routes` and `templates`.
+
+
+### assets
+
+The [assets](assets) directory contains any static assets that should be available. These are served using [serve-static](https://github.com/expressjs/serve-static).
+
+In your [service-worker.js](templates/service-worker.js) file, Sapper makes these files available as `__assets__` so that you can cache them (though you can choose not to, for example if you don't want to cache very large files).
+
+
+### routes
+
+This is the heart of your Sapper app. There are two kinds of routes — *pages*, and *server routes*.
+
+**Pages** are Svelte components written in `.html` files. When a user first visits the application, they will be served a server-rendered version of the route in question, plus some JavaScript that 'hydrates' the page and initialises a client-side router. From that point forward, navigating to other pages is handled entirely on the client for a fast, app-like feel. (Sapper will preload and cache the code for these subsequent pages, so that navigation is instantaneous.)
+
+**Server routes** are modules written in `.js` files, that export functions corresponding to HTTP methods. Each function receives Express `request` and `response` objects as arguments, plus a `next` function. This is useful for creating a JSON API, for example.
+
+There are three simple rules for naming the files that define your routes:
+
+* A file called `routes/about.html` corresponds to the `/about` route. A file called `routes/blog/[slug].html` corresponds to the `/blog/:slug` route, in which case `params.slug` is available to the route
+* The file `routes/index.html` (or `routes/index.js`) corresponds to the root of your app. `routes/about/index.html` is treated the same as `routes/about.html`.
+* Files and directories with a leading underscore do *not* create routes. This allows you to colocate helper modules and components with the routes that depend on them — for example you could have a file called `routes/_helpers/datetime.js` and it would *not* create a `/_helpers/datetime` route
+
+
+### templates
+
+This directory should contain the following files at a minimum:
+
+* [2xx.html](templates/2xx.html) — a template for the page to serve for valid requests
+* [4xx.html](templates/4xx.html) — a template for 4xx-range errors (such as 404 Not Found)
+* [5xx.html](templates/5xx.html) — a template for 5xx-range errors (such as 500 Internal Server Error)
+* [main.js](templates/main.js) — this module initialises Sapper
+* [service-worker.js](templates/service-worker.js) — your app's service worker
+
+Inside the HTML templates, Sapper will inject various values as indicated by `%sapper.xxxx%` tags. Inside JavaScript files, Sapper will replace strings like `__dev__` with the appropriate value.
+
+In lieu of documentation (bear with us), consult the files to see what variables are available and how they're used.
+
+
+## Webpack config
+
+Sapper uses webpack to provide code-splitting, dynamic imports and hot module reloading, as well as compiling your Svelte components. As long as you don't do anything daft, you can edit the configuration files to add whatever loaders and plugins you'd like.
+
+
+## Production mode and deployment
+
+To start a production version of your app, run `npm start`. This will disable hot module replacement, and activate the appropriate webpack plugins.
+
+You can deploy your application to any environment that supports Node 8 or above. As an example, to deploy to [Now](https://zeit.co/now), run these commands:
+
+```bash
+npm install -g now
+now
+```
+
+
+## Bugs and feedback
+
+Sapper is in early development, and may have the odd rough edge here and there. Please be vocal over on the [Sapper issue tracker](https://github.com/sveltejs/sapper/issues).
+
+
+## License
+
+[LIL](LICENSE)

test/app/app/client.js

@@ -0,0 +1,13 @@
+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/app/server.js

@@ -0,0 +1,114 @@
+import fs from 'fs';
+import { resolve } from 'url';
+import express from 'express';
+import serve from 'serve-static';
+import sapper from '../../../dist/middleware.ts.js';
+import { Store } from 'svelte/store.js';
+import { manifest } from './manifest/server.js';
+
+let pending;
+let ended;
+
+process.on('message', message => {
+	if (message.action === 'start') {
+		if (pending) {
+			throw new Error(`Already capturing`);
+		}
+
+		pending = new Set();
+		ended = false;
+		process.send({ type: 'ready' });
+	}
+
+	if (message.action === 'end') {
+		ended = true;
+		if (pending.size === 0) {
+			process.send({ type: 'done' });
+			pending = null;
+		}
+	}
+});
+
+const app = express();
+
+const { PORT = 3000, BASEPATH = '' } = process.env;
+const base = `http://localhost:${PORT}${BASEPATH}/`;
+
+// this allows us to do e.g. `fetch('/api/blog')` on the server
+const fetch = require('node-fetch');
+global.fetch = (url, opts) => {
+	return fetch(resolve(base, url), opts);
+};
+
+const middlewares = [
+	serve('assets'),
+
+	// set test cookie
+	(req, res, next) => {
+		res.setHeader('Set-Cookie', 'test=woohoo!; Max-Age=3600');
+		next();
+	},
+
+	// emit messages so we can capture requests
+	(req, res, next) => {
+		if (!pending) return next();
+
+		pending.add(req.url);
+
+		const { write, end } = res;
+		const chunks = [];
+
+		res.write = function(chunk) {
+			chunks.push(new Buffer(chunk));
+			write.apply(res, arguments);
+		};
+
+		res.end = function(chunk) {
+			if (chunk) chunks.push(new Buffer(chunk));
+			end.apply(res, arguments);
+
+			if (pending) pending.delete(req.url);
+
+			process.send({
+				method: req.method,
+				url: req.url,
+				status: res.statusCode,
+				headers: res._headers,
+				body: Buffer.concat(chunks).toString()
+			});
+
+			if (pending && pending.size === 0 && ended) {
+				process.send({ type: 'done' });
+			}
+		};
+
+		next();
+	},
+
+	sapper({
+		manifest,
+		store: () => {
+			return new Store({
+				title: 'Stored title'
+			});
+		},
+		ignore: [
+			/foobar/i,
+			'/buzz',
+			'fizz',
+			x => x === '/hello'
+		]
+	}),
+];
+
+if (BASEPATH) {
+	app.use(BASEPATH, ...middlewares);
+} else {
+	app.use(...middlewares);
+}
+
+['foobar', 'buzz', 'fizzer', 'hello'].forEach(uri => {
+	app.get('/'+uri, (req, res) => res.end(uri));
+});
+
+app.listen(PORT);

test/app/app/service-worker.js

@@ -1,10 +1,10 @@
-import { timestamp, files, shell, routes } from '@sapper/service-worker';
+import { assets, shell, timestamp, routes } from './manifest/service-worker.js';
 
-const ASSETS = `cache${timestamp}`;
+const ASSETS = `cachetimestamp`;
 
 // `shell` is an array of all the files generated by webpack,
-// `files` is an array of everything in the `static` directory
+// `assets` is an array of everything in the `assets` directory
-const to_cache = shell.concat(ASSETS);
+const to_cache = shell.concat(assets);
 const cached = new Set(to_cache);
 
 self.addEventListener('install', event => {
@@ -26,24 +26,19 @@ self.addEventListener('activate', event => {
 				if (key !== ASSETS) await caches.delete(key);
 			}
 
-			self.clients.claim();
+			await self.clients.claim();
 		})
 	);
 });
 
 self.addEventListener('fetch', event => {
-	if (event.request.method !== 'GET') return;
-
 	const url = new URL(event.request.url);
 
 	// don't try to handle e.g. data: URIs
 	if (!url.protocol.startsWith('http')) return;
 
-	// ignore dev server requests
-	if (url.hostname === self.location.hostname && url.port !== self.location.port) return;
-
 	// always serve assets and webpack-generated files from cache
-	if (url.host === self.location.host && cached.has(url.pathname)) {
+	if (cached.has(url.pathname)) {
 		event.respondWith(caches.match(event.request));
 		return;
 	}
@@ -58,14 +53,12 @@ self.addEventListener('fetch', event => {
 	}
 	*/
 
-	if (event.request.cache === 'only-if-cached') return;
-
 	// for everything else, try the network first, falling back to
 	// cache if the user is offline. (If the pages never change, you
 	// might prefer a cache-first approach to a network-first one.)
 	event.respondWith(
 		caches
-			.open(`offline${timestamp}`)
+			.open('offline')
 			.then(async cache => {
 				try {
 					const response = await fetch(event.request);

test/app/app/template.html

@@ -0,0 +1,33 @@
+<!doctype html>
+<html lang='en'>
+<head>
+	<meta charset='utf-8'>
+	<meta name='viewport' content='width=device-width'>
+	<meta name='theme-color' content='#aa1e1e'>
+
+	%sapper.base%
+
+	<link rel='stylesheet' href='global.css'>
+	<link rel='manifest' href='manifest.json'>
+	<link rel='icon' type='image/png' href='favicon.png'>
+
+	<!-- Sapper generates a <style> tag containing critical CSS
+	     for the current page. CSS for the rest of the app is
+	     lazily loaded when it precaches secondary pages -->
+	%sapper.styles%
+
+	<!-- This contains the contents of the <:Head> component, if
+	     the current page has one -->
+	%sapper.head%
+</head>
+<body>
+	<!-- The application will be rendered inside this element,
+	     because `templates/main.js` references it -->
+	<div id='sapper'>%sapper.html%</div>
+
+	<!-- Sapper creates a <script> tag containing `templates/main.js`
+	     and anything else it needs to hydrate the app and
+	     initialise the router -->
+	%sapper.scripts%
+</body>
+</html>

test/app/assets/global.css

@@ -0,0 +1,45 @@
+body {
+	margin: 0;
+	font-family: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+	font-size: 14px;
+	line-height: 1.5;
+	color: #333;
+}
+
+main {
+	position: relative;
+	max-width: 56em;
+	background-color: white;
+	padding: 2em;
+	margin: 0 auto;
+	box-sizing: border-box;
+}
+
+h1, h2, h3, h4, h5, h6 {
+	margin: 0 0 0.5em 0;
+	font-weight: 400;
+	line-height: 1.2;
+}
+
+h1 {
+	font-size: 2em;
+}
+
+a {
+	color: inherit;
+}
+
+code {
+	font-family: menlo, inconsolata, monospace;
+	font-size: calc(1em - 2px);
+	color: #555;
+	background-color: #f0f0f0;
+	padding: 0.2em 0.4em;
+	border-radius: 2px;
+}
+
+@media (min-width: 400px) {
+	body {
+		font-size: 16px;
+	}
+}

test/app/assets/manifest.json

@@ -0,0 +1,20 @@
+{
+	"background_color": "#ffffff",
+	"theme_color": "#aa1e1e",
+	"name": "TODO",
+	"short_name": "TODO",
+	"display": "minimal-ui",
+	"start_url": "/",
+	"icons": [
+		{
+			"src": "svelte-logo-192.png",
+			"sizes": "192x192",
+			"type": "image/png"
+		},
+		{
+			"src": "svelte-logo-512.png",
+			"sizes": "512x512",
+			"type": "image/png"
+		}
+	]
+}

test/app/routes/[x]/[y]/[z].html

@@ -0,0 +1,20 @@
+<span>z: {segment} {count}</span>
+<a href="foo/bar/qux"></a>
+
+<script>
+	import counts from '../_counts.js';
+
+	export default {
+		preload() {
+			return {
+				count: counts.z += 1
+			};
+		},
+
+		oncreate() {
+			this.set({
+				segment: this.get().params.z
+			});
+		}
+	};
+</script>

test/app/routes/[x]/[y]/_layout.html

@@ -0,0 +1,22 @@
+<span>y: {segment} {count}</span>
+<svelte:component this={child.component} {...child.props}/>
+
+<span>child segment: {child.segment}</span>
+
+<script>
+	import counts from '../_counts.js';
+
+	export default {
+		preload() {
+			return {
+				count: counts.y += 1
+			};
+		},
+
+		oncreate() {
+			this.set({
+				segment: this.get().params.y
+			});
+		}
+	};
+</script>

test/app/routes/_error.html

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

test/app/routes/_layout.html

@@ -0,0 +1,15 @@
+{#if preloading}
+	<progress class='preloading-progress' value=0.5/>
+{/if}
+
+<svelte:component this={child.component} {rootPreloadFunctionRan} {...child.props}/>
+
+<script>
+	export default {
+		preload() {
+			return {
+				rootPreloadFunctionRan: true
+			};
+		}
+	};
+</script>