-> v0.9.6

workaround clorox bug

.gitignore

@@ -1,18 +1,14 @@
 .DS_Store
 yarn.lock
+yarn-error.log
 node_modules
 cypress/screenshots
 test/app/.sapper
 test/app/app/manifest
 test/app/export
-runtime.js
+test/app/build
-runtime.js.map
+*.js
-cli.js
+*.js.map
-cli.js.map
+*.ts.js
-middleware.js
+*.ts.js.map
-middleware.js.map
+!rollup.config.js
-core.js
-core.js.map
-webpack/config.js
-webpack/config.js.map
-yarn-error.log

CHANGELOG.md

@@ -1,5 +1,52 @@
 # sapper changelog
 
+## 0.9.6
+
+* Whoops — `tslib` is a runtime dependency
+
+## 0.9.5
+
+* Stringify clorox output ([#197](https://github.com/sveltejs/sapper/pull/197))
+
+## 0.9.4
+
+* Add `SAPPER_BASE` and `SAPPER_APP` environment variables ([#181](https://github.com/sveltejs/sapper/issues/181))
+* Minify template in `sapper build` ([#15](https://github.com/sveltejs/sapper/issues/15))
+* Minify all HTML files in `sapper export` ([#172](https://github.com/sveltejs/sapper/issues/172))
+* Log exported files ([#195](https://github.com/sveltejs/sapper/pull/195))
+* Add `--open`/`-o` flag to `sapper dev` and `sapper start` ([#186](https://github.com/sveltejs/sapper/issues/186))
+
+## 0.9.3
+
+* Fix path to `sapper-dev-client`
+
+## 0.9.2
+
+* Include `dist` files in package
+
+## 0.9.1
+
+* Include `sapper` bin
+
+## 0.9.0
+
+* Use `devalue` instead of `serialize-javascript`, allowing `preload` to return non-POJOs and cyclical/repeated references, but *not* functions ([#112](https://github.com/sveltejs/sapper/issues/112))
+* Kill child process if webpack crashes ([#177](https://github.com/sveltejs/sapper/issues/177))
+* Support HMR on remote devices ([#165](https://github.com/sveltejs/sapper/issues/165))
+* Remove hard-coded port (([#169](https://github.com/sveltejs/sapper/issues/169)))
+* Allow non-JS files, e.g. TypeScript to be used as entry points and server routes ([#57](https://github.com/sveltejs/sapper/issues/57))
+* Faster startup ([#173](https://github.com/sveltejs/sapper/issues/173))
+
+## 0.8.4
+
+* Fix route sorting ([#175](https://github.com/sveltejs/sapper/pull/175))
+
+## 0.8.3
+
+* Automatically select available port, or use `--port` flag for `dev` and `start` ([#169](https://github.com/sveltejs/sapper/issues/169))
+* Show stats after build/export ([#168](https://github.com/sveltejs/sapper/issues/168))
+* Various CLI improvements ([#170](https://github.com/sveltejs/sapper/pull/170))
+
 ## 0.8.2
 
 * Rename `preloadRoutes` to `prefetchRoutes` ([#166](https://github.com/sveltejs/sapper/issues/166))

package.json

@@ -1,44 +1,40 @@
 {
   "name": "sapper",
-  "version": "0.8.2",
+  "version": "0.9.6",
   "description": "Military-grade apps, engineered by Svelte",
-  "main": "middleware.js",
+  "main": "dist/middleware.ts.js",
   "bin": {
-    "sapper": "cli.js"
+    "sapper": "./sapper"
   },
   "files": [
-    "cli.js",
+    "*.js",
-    "core.js",
+    "*.ts.js",
-    "middleware.js",
     "runtime",
-    "runtime.js",
+    "webpack",
-    "sapper-dev-client.js",
+    "sapper",
-    "webpack"
+    "dist"
   ],
   "directories": {
     "test": "test"
   },
   "dependencies": {
-    "chalk": "^2.3.0",
     "cheerio": "^1.0.0-rc.2",
     "chokidar": "^1.7.0",
-    "code-frame": "^5.0.0",
+    "clorox": "^1.0.3",
-    "escape-html": "^1.0.3",
+    "devalue": "^1.0.1",
-    "express": "^4.16.2",
-    "get-port": "^3.2.0",
     "glob": "^7.1.2",
-    "locate-character": "^2.0.5",
+    "html-minifier": "^3.5.10",
     "mkdirp": "^0.5.1",
-    "mri": "^1.1.0",
     "node-fetch": "^1.7.3",
+    "port-authority": "^1.0.2",
+    "pretty-bytes": "^4.0.2",
     "pretty-ms": "^3.1.0",
-    "relative": "^3.0.2",
     "require-relative": "^0.8.7",
     "rimraf": "^2.6.2",
+    "sade": "^1.4.0",
     "sander": "^0.6.0",
-    "serialize-javascript": "^1.4.0",
     "source-map-support": "^0.5.3",
-    "tslib": "^1.8.1",
+    "tslib": "^1.9.0",
     "url-parse": "^1.2.0",
     "walk-sync": "^0.3.2",
     "webpack-format-messages": "^1.0.1"
@@ -49,19 +45,19 @@
     "@types/mkdirp": "^0.5.2",
     "@types/rimraf": "^2.0.2",
     "compression": "^1.7.1",
-    "css-loader": "^0.28.7",
-    "electron": "^1.8.2",
     "eslint": "^4.13.1",
     "eslint-plugin-import": "^2.8.0",
+    "get-port": "^3.2.0",
     "mocha": "^4.0.1",
     "nightmare": "^2.10.0",
     "npm-run-all": "^4.1.2",
-    "rollup": "^0.53.0",
+    "polka": "^0.3.4",
+    "rollup": "^0.56.5",
     "rollup-plugin-commonjs": "^8.3.0",
     "rollup-plugin-json": "^2.3.0",
     "rollup-plugin-string": "^2.0.2",
     "rollup-plugin-typescript": "^0.8.1",
-    "style-loader": "^0.19.1",
+    "serve-static": "^1.13.2",
     "svelte": "^1.49.1",
     "svelte-loader": "^2.3.2",
     "ts-node": "^4.1.0",

rollup.config.js

@@ -10,36 +10,39 @@ const external = [].concat(
 	'sapper/core.js'
 );
 
-const paths = {
-	'sapper/core.js': './core.js'
-};
-
-const plugins = [
-	string({
-		include: '**/*.md'
-	}),
-	json(),
-	commonjs(),
-	typescript({
-		typescript: require('typescript')
-	})
-];
-
 export default [
-	{ name: 'cli', banner: true },
+	{
-	{ name: 'core' },
+		input: `src/runtime/index.ts`,
-	{ name: 'middleware' },
+		output: {
-	{ name: 'runtime', format: 'es' },
+			file: `runtime.js`,
-	{ name: 'webpack', file: 'webpack/config' }
+			format: 'es'
-].map(obj => ({
+		},
-	input: `src/${obj.name}/index.ts`,
+		plugins: [
-	output: {
+			typescript({
-		file: `${obj.file || obj.name}.js`,
+				typescript: require('typescript')
-		format: obj.format || 'cjs',
+			})
-		banner: obj.banner && '#!/usr/bin/env node',
+		]
-		paths,
-		sourcemap: true
 	},
-	external,
+
-	plugins
+	{
-}));
+		input: [`src/cli.ts`, `src/core.ts`, `src/middleware.ts`, `src/webpack.ts`],
+		output: {
+			dir: 'dist',
+			format: 'cjs',
+			sourcemap: true
+		},
+		external,
+		plugins: [
+			string({
+				include: '**/*.md'
+			}),
+			json(),
+			commonjs(),
+			typescript({
+				typescript: require('typescript')
+			})
+		],
+		experimentalCodeSplitting: true,
+		experimentalDynamicImport: true
+	}
+];

runtime.js

@@ -0,0 +1,271 @@
+function detach(node) {
+    node.parentNode.removeChild(node);
+}
+function findAnchor(node) {
+    while (node && node.nodeName.toUpperCase() !== 'A')
+        node = node.parentNode; // SVG <a> elements have a lowercase name
+    return node;
+}
+function which(event) {
+    return event.which === null ? event.button : event.which;
+}
+function scroll_state() {
+    return {
+        x: window.scrollX,
+        y: window.scrollY
+    };
+}
+
+var component;
+var target;
+var routes;
+var errors;
+var history = typeof window !== 'undefined' ? window.history : {
+    pushState: function (state, title, href) { },
+    replaceState: function (state, title, href) { },
+    scrollRestoration: ''
+};
+var scroll_history = {};
+var uid = 1;
+var cid;
+if ('scrollRestoration' in history) {
+    history.scrollRestoration = 'manual';
+}
+function select_route(url) {
+    if (url.origin !== window.location.origin)
+        return null;
+    var _loop_1 = function (route) {
+        var match = route.pattern.exec(url.pathname);
+        if (match) {
+            if (route.ignore)
+                return { value: null };
+            var params = route.params(match);
+            var query_1 = {};
+            if (url.search.length > 0) {
+                url.search.slice(1).split('&').forEach(function (searchParam) {
+                    var _a = /([^=]+)=(.*)/.exec(searchParam), key = _a[1], value = _a[2];
+                    query_1[key] = value || true;
+                });
+            }
+            return { value: { url: url, route: route, data: { params: params, query: query_1 } } };
+        }
+    };
+    for (var _i = 0, routes_1 = routes; _i < routes_1.length; _i++) {
+        var route = routes_1[_i];
+        var state_1 = _loop_1(route);
+        if (typeof state_1 === "object")
+            return state_1.value;
+    }
+}
+var current_token;
+function render(Component, data, scroll, token) {
+    if (current_token !== token)
+        return;
+    if (component) {
+        component.destroy();
+    }
+    else {
+        // first load — remove SSR'd <head> contents
+        var start = document.querySelector('#sapper-head-start');
+        var end = document.querySelector('#sapper-head-end');
+        if (start && end) {
+            while (start.nextSibling !== end)
+                detach(start.nextSibling);
+            detach(start);
+            detach(end);
+        }
+    }
+    component = new Component({
+        target: target,
+        data: data,
+        hydrate: !component
+    });
+    if (scroll) {
+        window.scrollTo(scroll.x, scroll.y);
+    }
+}
+function prepare_route(Component, data) {
+    var redirect = null;
+    var error = null;
+    if (!Component.preload) {
+        return { Component: Component, data: data, redirect: redirect, error: error };
+    }
+    if (!component && window.__SAPPER__ && window.__SAPPER__.preloaded) {
+        return { Component: Component, data: Object.assign(data, window.__SAPPER__.preloaded), redirect: redirect, error: error };
+    }
+    return Promise.resolve(Component.preload.call({
+        redirect: function (statusCode, location) {
+            redirect = { statusCode: statusCode, location: location };
+        },
+        error: function (statusCode, message) {
+            error = { statusCode: statusCode, message: message };
+        }
+    }, data))["catch"](function (err) {
+        error = { statusCode: 500, message: err };
+    }).then(function (preloaded) {
+        if (error) {
+            var route = error.statusCode >= 400 && error.statusCode < 500
+                ? errors['4xx']
+                : errors['5xx'];
+            return route.load().then(function (_a) {
+                var Component = _a["default"];
+                var err = error.message instanceof Error ? error.message : new Error(error.message);
+                Object.assign(data, { status: error.statusCode, error: err });
+                return { Component: Component, data: data, redirect: null };
+            });
+        }
+        Object.assign(data, preloaded);
+        return { Component: Component, data: data, redirect: redirect };
+    });
+}
+function navigate(target, id) {
+    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;
+    var loaded = prefetching && prefetching.href === target.url.href ?
+        prefetching.promise :
+        target.route.load().then(function (mod) { return prepare_route(mod["default"], target.data); });
+    prefetching = null;
+    var token = current_token = {};
+    return loaded.then(function (_a) {
+        var Component = _a.Component, data = _a.data, redirect = _a.redirect;
+        if (redirect) {
+            return goto(redirect.location, { replaceState: true });
+        }
+        render(Component, data, scroll_history[id], token);
+    });
+}
+function handle_click(event) {
+    // 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;
+    var a = findAnchor(event.target);
+    if (!a)
+        return;
+    // check if link is inside an svg
+    // in this case, both href and target are always inside an object
+    var svg = typeof a.href === 'object' && a.href.constructor.name === 'SVGAnimatedString';
+    var href = String(svg ? 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 ? a.target.baseVal : a.target)
+        return;
+    var url = new URL(href);
+    // Don't handle hash changes
+    if (url.pathname === window.location.pathname && url.search === window.location.search)
+        return;
+    var target = select_route(url);
+    if (target) {
+        navigate(target, null);
+        event.preventDefault();
+        history.pushState({ id: cid }, '', url.href);
+    }
+}
+function handle_popstate(event) {
+    scroll_history[cid] = scroll_state();
+    if (event.state) {
+        var url = new URL(window.location.href);
+        var target_1 = select_route(url);
+        navigate(target_1, event.state.id);
+    }
+    else {
+        // hashchange
+        cid = ++uid;
+        history.replaceState({ id: cid }, '', window.location.href);
+    }
+}
+var prefetching = null;
+function prefetch(href) {
+    var selected = select_route(new URL(href));
+    if (selected) {
+        prefetching = {
+            href: href,
+            promise: selected.route.load().then(function (mod) { return prepare_route(mod["default"], selected.data); })
+        };
+    }
+}
+function handle_touchstart_mouseover(event) {
+    var a = findAnchor(event.target);
+    if (!a || a.rel !== 'prefetch')
+        return;
+    prefetch(a.href);
+}
+var inited;
+function init(_target, _routes) {
+    target = _target;
+    routes = _routes.filter(function (r) { return !r.error; });
+    errors = {
+        '4xx': _routes.find(function (r) { return r.error === '4xx'; }),
+        '5xx': _routes.find(function (r) { return r.error === '5xx'; })
+    };
+    if (!inited) {
+        window.addEventListener('click', handle_click);
+        window.addEventListener('popstate', handle_popstate);
+        // prefetch
+        window.addEventListener('touchstart', handle_touchstart_mouseover);
+        window.addEventListener('mouseover', handle_touchstart_mouseover);
+        inited = true;
+    }
+    return Promise.resolve().then(function () {
+        var _a = window.location, hash = _a.hash, href = _a.href;
+        var 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);
+        var target = select_route(new URL(window.location.href));
+        return navigate(target, uid);
+    });
+}
+function goto(href, opts) {
+    if (opts === void 0) { opts = { replaceState: false }; }
+    var target = select_route(new URL(href, window.location.href));
+    if (target) {
+        navigate(target, null);
+        if (history)
+            history[opts.replaceState ? 'replaceState' : 'pushState']({ id: cid }, '', href);
+    }
+    else {
+        window.location.href = href;
+    }
+}
+function prefetchRoutes(pathnames) {
+    if (!routes)
+        throw new Error("You must call init() first");
+    return routes
+        .filter(function (route) {
+        if (!pathnames)
+            return true;
+        return pathnames.some(function (pathname) {
+            return route.error
+                ? route.error === pathname
+                : route.pattern.test(pathname);
+        });
+    })
+        .reduce(function (promise, route) {
+        return promise.then(route.load);
+    }, Promise.resolve());
+}
+
+export { component, prefetch, init, goto, prefetchRoutes, prefetchRoutes as preloadRoutes };

sapper

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

sapper-dev-client.js

@@ -11,7 +11,7 @@ function check() {
 export function connect(port) {
 	if (source || !window.EventSource) return;
 
-	source = new EventSource(`http://localhost:${port}/__sapper__`);
+	source = new EventSource(`http://${window.location.hostname}:${port}/__sapper__`);
 
 	window.source = source;
 

src/cli.ts

@@ -0,0 +1,79 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import * as child_process from 'child_process';
+import sade from 'sade';
+import * as clorox from 'clorox';
+import prettyMs from 'pretty-ms';
+// import upgrade from './cli/upgrade';
+import * as ports from 'port-authority';
+import * as pkg from '../package.json';
+
+const prog = sade('sapper').version(pkg.version);
+
+prog.command('dev')
+	.describe('Start a development server')
+	.option('-p, --port', 'Specify a port')
+	.option('-o, --open', 'Open a browser window')
+	.action(async (opts: { port: number, open: boolean }) => {
+		const { dev } = await import('./cli/dev');
+		dev(opts);
+	});
+
+prog.command('build [dest]')
+	.describe('Create a production-ready version of your app')
+	.action(async (dest = 'build') => {
+		console.log(`> Building...`);
+
+		process.env.NODE_ENV = 'production';
+		process.env.SAPPER_DEST = dest;
+
+		const start = Date.now();
+
+		try {
+			const { build } = await import('./cli/build');
+			await build();
+			console.error(`\n> Finished in ${elapsed(start)}. Type ${clorox.bold.cyan(dest === 'build' ? 'npx sapper start' : `npx sapper start ${dest}`)} to run the app.`);
+		} catch (err) {
+			console.error(err ? err.details || err.stack || err.message || err : 'Unknown error');
+		}
+	});
+
+prog.command('start [dir]')
+	.describe('Start your app')
+	.option('-p, --port', 'Specify a port')
+	.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)')
+	.action(async (dest = 'export') => {
+		console.log(`> Building...`);
+
+		process.env.NODE_ENV = 'production';
+		process.env.SAPPER_DEST = '.sapper/.export';
+
+		const start = Date.now();
+
+		try {
+			const { build } = await import('./cli/build');
+			await build();
+			console.error(`\n> Built in ${elapsed(start)}. Crawling site...`);
+
+			const { exporter } = await import('./cli/export');
+			await exporter(dest);
+			console.error(`\n> Finished in ${elapsed(start)}. Type ${clorox.bold.cyan(`npx serve ${dest}`)} to run the app.`);
+		} catch (err) {
+			console.error(err ? err.details || err.stack || err.message || err : 'Unknown error');
+		}
+	});
+
+// TODO upgrade
+
+prog.parse(process.argv);
+
+function elapsed(start: number) {
+	return prettyMs(Date.now() - start);
+}

src/cli/build.ts

@@ -1,12 +1,14 @@
 import * as fs from 'fs';
 import * as path from 'path';
+import * as clorox from 'clorox';
 import mkdirp from 'mkdirp';
 import rimraf from 'rimraf';
-import { create_compilers, create_app, create_routes, create_serviceworker } from 'sapper/core.js'
+import { minify_html } from './utils/minify_html';
-import { src, dest, dev } from '../config';
+import { create_compilers, create_main_manifests, create_routes, create_serviceworker_manifest } from '../core'
+import { locations } from '../config';
 
-export default async function build() {
+export async function build() {
-	const output = dest();
+	const output = locations.dest();
 
 	mkdirp.sync(output);
 	rimraf.sync(path.join(output, '**/*'));
@@ -14,24 +16,36 @@ export default async function build() {
 	const routes = create_routes();
 
 	// create app/manifest/client.js and app/manifest/server.js
-	create_app({ routes, src, dev });
+	create_main_manifests({ routes });
 
 	const { client, server, serviceworker } = create_compilers();
 
 	const client_stats = await compile(client);
+	console.log(`${clorox.inverse(`\nbuilt client`)}`);
+	console.log(client_stats.toString({ colors: true }));
 	fs.writeFileSync(path.join(output, 'client_info.json'), JSON.stringify(client_stats.toJson()));
 
-	await compile(server);
+	const server_stats = await compile(server);
+	console.log(`${clorox.inverse(`\nbuilt server`)}`);
+	console.log(server_stats.toString({ colors: true }));
+
+	let serviceworker_stats;
 
 	if (serviceworker) {
-		create_serviceworker({
+		create_serviceworker_manifest({
 			routes,
-			client_files: client_stats.toJson().assets.map((chunk: { name: string }) => `/client/${chunk.name}`),
+			client_files: client_stats.toJson().assets.map((chunk: { name: string }) => `/client/${chunk.name}`)
-			src
 		});
 
-		await compile(serviceworker);
+		serviceworker_stats = await compile(serviceworker);
+		console.log(`${clorox.inverse(`\nbuilt service worker`)}`);
+		console.log(serviceworker_stats.toString({ colors: true }));
 	}
+
+	// minify app/template.html
+	// TODO compile this to a function? could be quicker than str.replace(...).replace(...).replace(...)
+	const template = fs.readFileSync(`${locations.app()}/template.html`, 'utf-8');
+	fs.writeFileSync(`${output}/template.html`, minify_html(template));
 }
 
 function compile(compiler: any) {

src/cli/dev.ts

@@ -1,16 +1,16 @@
 import * as fs from 'fs';
 import * as path from 'path';
 import * as net from 'net';
-import * as chalk from 'chalk';
+import * as clorox from 'clorox';
 import * as child_process from 'child_process';
 import * as http from 'http';
 import mkdirp from 'mkdirp';
 import rimraf from 'rimraf';
 import format_messages from 'webpack-format-messages';
 import prettyMs from 'pretty-ms';
-import { wait_for_port } from './utils';
+import * as ports from 'port-authority';
-import { dest } from '../config';
+import { locations } from '../config';
-import { create_compilers, create_app, create_routes, create_serviceworker } from 'sapper/core.js';
+import { create_compilers, create_main_manifests, create_routes, create_serviceworker_manifest } from '../core';
 
 type Deferred = {
 	promise?: Promise<any>;
@@ -70,27 +70,37 @@ function create_hot_update_server(port: number, interval = 10000) {
 	return { send };
 }
 
-export default async function dev() {
+export async function dev(opts: { port: number, open: boolean }) {
 	process.env.NODE_ENV = 'development';
 
-	const dir = dest();
+	let port = opts.port || +process.env.PORT;
+
+	if (port) {
+		if (!await ports.check(port)) {
+			console.log(`${clorox.bold.red(`> Port ${port} is unavailable`)}`);
+			return;
+		}
+	} else {
+		port = await ports.find(3000);
+	}
+
+	const dir = locations.dest();
 	rimraf.sync(dir);
 	mkdirp.sync(dir);
 
-	// initial build
+	const dev_port = await ports.find(10000);
-	const dev_port = await require('get-port')(10000);
 
 	const routes = create_routes();
-	create_app({ routes, dev_port });
+	create_main_manifests({ routes, dev_port });
 
 	const hot_update_server = create_hot_update_server(dev_port);
 
-	watch_files('routes/**/*', ['add', 'unlink'], () => {
+	watch_files(`${locations.routes()}/**/*`, ['add', 'unlink'], () => {
 		const routes = create_routes();
-		create_app({ routes, dev_port });
+		create_main_manifests({ routes, dev_port });
 	});
 
-	watch_files('app/template.html', ['change'], () => {
+	watch_files(`${locations.app()}/template.html`, ['change'], () => {
 		hot_update_server.send({
 			action: 'reload'
 		});
@@ -98,6 +108,11 @@ export default async function dev() {
 
 	let proc: child_process.ChildProcess;
 
+	process.on('exit', () => {
+		// sometimes webpack crashes, so we need to kill our children
+		if (proc) proc.kill();
+	});
+
 	const deferreds = {
 		server: deferred(),
 		client: deferred()
@@ -109,7 +124,7 @@ export default async function dev() {
 		unique_errors: new Set()
 	};
 
-	function restart_build(filename) {
+	function restart_build(filename: string) {
 		if (restarting) return;
 
 		restarting = true;
@@ -122,7 +137,7 @@ export default async function dev() {
 			restarting = false;
 		});
 
-		console.log(`\n${chalk.bold.cyan(path.relative(process.cwd(), filename))} changed. rebuilding...`);
+		console.log(`\n${clorox.bold.cyan(path.relative(process.cwd(), filename))} changed. rebuilding...`);
 	}
 
 	// TODO watch the configs themselves?
@@ -140,15 +155,15 @@ export default async function dev() {
 
 		compiler.watch({}, (err: Error, stats: any) => {
 			if (err) {
-				console.error(chalk.red(`✗ ${name}`));
+				console.log(`${clorox.red(`✗ ${name}`)}`);
-				console.error(chalk.red(err.message));
+				console.log(`${clorox.red(err.message)}`);
 				error(err);
 			} else {
 				const messages = format_messages(stats);
 				const info = stats.toJson();
 
 				if (messages.errors.length > 0) {
-					console.log(chalk.bold.red(`✗ ${name}`));
+					console.log(`${clorox.bold.red(`✗ ${name}`)}`);
 
 					const filtered = messages.errors.filter((message: string) => {
 						return !build.unique_errors.has(message);
@@ -165,7 +180,7 @@ export default async function dev() {
 					}
 				} else {
 					if (messages.warnings.length > 0) {
-						console.log(chalk.bold.yellow(`• ${name}`));
+						console.log(`${clorox.bold.yellow(`• ${name}`)}`);
 
 						const filtered = messages.warnings.filter((message: string) => {
 							return !build.unique_warnings.has(message);
@@ -181,7 +196,7 @@ export default async function dev() {
 							console.log(`${hidden} duplicate ${hidden === 1 ? 'warning' : 'warnings'} hidden\n`);
 						}
 					} else {
-						console.log(`${chalk.bold.green(`✔ ${name}`)} ${chalk.grey(`(${prettyMs(info.time)})`)}`);
+						console.log(`${clorox.bold.green(`✔ ${name}`)} ${clorox.gray(`(${prettyMs(info.time)})`)}`);
 					}
 
 					result(info);
@@ -206,7 +221,7 @@ export default async function dev() {
 
 			deferreds.client.promise.then(() => {
 				function restart() {
-					wait_for_port(3000).then(deferreds.server.fulfil); // TODO control port
+					ports.wait(port).then(deferreds.server.fulfil);
 				}
 
 				if (proc) {
@@ -218,12 +233,16 @@ export default async function dev() {
 
 				proc = child_process.fork(`${dir}/server.js`, [], {
 					cwd: process.cwd(),
-					env: Object.assign({}, process.env)
+					env: Object.assign({
+						PORT: port
+					}, process.env)
 				});
 			});
 		}
 	});
 
+	let first = true;
+
 	watch(compilers.client, {
 		name: 'client',
 
@@ -246,9 +265,15 @@ export default async function dev() {
 				hot_update_server.send({
 					status: 'completed'
 				});
+
+				if (first) {
+					first = false;
+					console.log(`${clorox.bold.cyan(`> Listening on localhost:${port}`)}`);
+					if (opts.open) child_process.exec(`open http://localhost:${port}`);
+				}
 			});
 
-			create_serviceworker({
+			create_serviceworker_manifest({
 				routes: create_routes(),
 				client_files
 			});

src/cli/export.ts

@@ -1,21 +1,17 @@
 import * as child_process from 'child_process';
 import * as path from 'path';
 import * as sander from 'sander';
-import express from 'express';
+import * as clorox from 'clorox';
 import cheerio from 'cheerio';
 import URL from 'url-parse';
 import fetch from 'node-fetch';
-import { wait_for_port } from './utils';
+import * as ports from 'port-authority';
-import { dest } from '../config';
+import prettyBytes from 'pretty-bytes';
+import { minify_html } from './utils/minify_html';
+import { locations } from '../config';
 
-const app = express();
+export async function exporter(export_dir: string) {
-
+	const build_dir = locations.dest();
-function read_json(file: string) {
-	return JSON.parse(sander.readFileSync(file, { encoding: 'utf-8' }));
-}
-
-export default async function exporter(export_dir: string) {
-	const build_dir = dest();
 
 	// Prep output directory
 	sander.rimrafSync(export_dir);
@@ -27,7 +23,7 @@ export default async function exporter(export_dir: string) {
 		sander.copyFileSync(build_dir, 'service-worker.js').to(export_dir, 'service-worker.js');
 	}
 
-	const port = await require('get-port')(3000);
+	const port = await ports.find(3000);
 
 	const origin = `http://localhost:${port}`;
 
@@ -36,6 +32,7 @@ export default async function exporter(export_dir: string) {
 		env: {
 			PORT: port,
 			NODE_ENV: 'production',
+			SAPPER_DEST: build_dir,
 			SAPPER_EXPORT: 'true'
 		}
 	});
@@ -46,18 +43,22 @@ export default async function exporter(export_dir: string) {
 	proc.on('message', message => {
 		if (!message.__sapper__) return;
 
-		const url = new URL(message.url, origin);
+		let file = new URL(message.url, origin).pathname.slice(1);
+		let { body } = message;
 
-		if (saved.has(url.pathname)) return;
+		if (saved.has(file)) return;
-		saved.add(url.pathname);
+		saved.add(file);
 
-		if (message.type === 'text/html') {
+		const is_html = message.type === 'text/html';
-			const file = `${export_dir}/${url.pathname}/index.html`;
+
-			sander.writeFileSync(file, message.body);
+		if (is_html) {
-		} else {
+			file = file === '' ? 'index.html' : `${file}/index.html`;
-			const file = `${export_dir}/${url.pathname}`;
+			body = minify_html(body);
-			sander.writeFileSync(file, message.body);
 		}
+
+		console.log(`${clorox.bold.cyan(file)} ${clorox.gray(`(${prettyBytes(body.length)})`)}`);
+
+		sander.writeFileSync(`${export_dir}/${file}`, body);
 	});
 
 	function handle(url: URL) {
@@ -84,11 +85,11 @@ export default async function exporter(export_dir: string) {
 				}
 			})
 			.catch((err: Error) => {
-				console.error(`Error rendering ${url.pathname}: ${err.message}`);
+				console.log(`${clorox.red(`> Error rendering ${url.pathname}: ${err.message}`)}`);
 			});
 	}
 
-	wait_for_port(port)
+	return ports.wait(port)
 		.then(() => handle(new URL(origin))) // TODO all static routes
 		.then(() => proc.kill());
 }

src/cli/help.md

@@ -1,20 +0,0 @@
-# sapper v<@version@>
-
-https://sapper.svelte.technology
-
-> sapper dev
-
-Start a development server
-
-> sapper build
-
-Creates a production-ready version of your app
-
-> sapper export
-
-If possible, exports your app as static files, suitable for hosting on
-services like Netlify or Surge
-
-> sapper --help
-
-Shows this message

src/cli/index.ts

@@ -1,89 +0,0 @@
-import * as path from 'path';
-import * as child_process from 'child_process';
-import mri from 'mri';
-import chalk from 'chalk';
-import help from './help.md';
-import build from './build';
-import exporter from './export';
-import dev from './dev';
-import upgrade from './upgrade';
-import * as pkg from '../../package.json';
-
-const opts = mri(process.argv.slice(2), {
-	alias: {
-		h: 'help'
-	}
-});
-
-if (opts.help) {
-	const rendered = help
-		.replace('<@version@>', pkg.version)
-		.replace(/^(.+)/gm, (m: string, $1: string) => /[#>]/.test(m) ? $1 : `  ${$1}`)
-		.replace(/^# (.+)/gm, (m: string, $1: string) => chalk.bold.underline($1))
-		.replace(/^> (.+)/gm, (m: string, $1: string) => chalk.cyan($1));
-
-	console.log(`\n${rendered}\n`);
-	process.exit(0);
-}
-
-const [cmd] = opts._;
-
-const start = Date.now();
-
-switch (cmd) {
-	case 'build':
-		process.env.NODE_ENV = 'production';
-		process.env.SAPPER_DEST = opts._[1] || 'build';
-
-		build()
-			.then(() => {
-				const elapsed = Date.now() - start;
-				console.error(`built in ${elapsed}ms`); // TODO beautify this, e.g. 'built in 4.7 seconds'
-			})
-			.catch(err => {
-				console.error(err ? err.details || err.stack || err.message || err : 'Unknown error');
-			});
-
-		break;
-
-	case 'export':
-		process.env.NODE_ENV = 'production';
-
-		const export_dir = opts._[1] || 'export';
-
-		build()
-			.then(() => exporter(export_dir))
-			.then(() => {
-				const elapsed = Date.now() - start;
-				console.error(`extracted in ${elapsed}ms`); // TODO beautify this, e.g. 'built in 4.7 seconds'
-			})
-			.catch(err => {
-				console.error(err ? err.details || err.stack || err.message || err : 'Unknown error');
-			});
-
-		break;
-
-	case 'dev':
-		dev();
-		break;
-
-	case 'upgrade':
-		upgrade();
-		break;
-
-	case 'start':
-		const dir = path.resolve(opts._[1] || 'build');
-
-		child_process.fork(`${dir}/server.js`, [], {
-			cwd: process.cwd(),
-			env: Object.assign({
-				NODE_ENV: 'production',
-				SAPPER_DEST: dir
-			}, process.env)
-		});
-
-		break;
-
-	default:
-		console.log(`unrecognized command ${cmd} — try \`sapper --help\` for more information`);
-}

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 clorox from 'clorox';
+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(clorox.bold.red(`> ${dir}/server.js does not exist — type ${clorox.bold.cyan(dir === 'build' ? `npx sapper build` : `npx sapper build ${dir}`)} to create it`));
+		return;
+	}
+
+	if (port) {
+		if (!await ports.check(port)) {
+			console.log(clorox.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(`${clorox.bold.cyan(`> Listening on localhost:${port}`)}`);
+	if (opts.open) child_process.exec(`open http://localhost:${port}`);
+}

src/cli/upgrade.ts

@@ -1,5 +1,5 @@
 import * as fs from 'fs';
-import chalk from 'chalk';
+import * as clorox from 'clorox';
 
 export default async function upgrade() {
 	const upgraded = [
@@ -27,10 +27,10 @@ async function upgrade_sapper_main() {
 
 		if (/\%sapper\.main\%/.test(template)) {
 			if (!pattern.test(template)) {
-				console.log(chalk.red(`Could not replace %sapper.main% in ${file}`));
+				console.log(`${clorox.red(`Could not replace %sapper.main% in ${file}`)}`);
 			} else {
 				write(file, template.replace(pattern, `%sapper.scripts%`));
-				console.log(chalk.green(`Replaced %sapper.main% in ${file}`));
+				console.log(`${clorox.green(`Replaced %sapper.main% in ${file}`)}`);
 				replaced = true;
 			}
 		}

src/cli/utils.ts

@@ -1,25 +0,0 @@
-import * as net from 'net';
-
-export function wait_for_port(port: number, timeout = 5000) {
-	return new Promise((fulfil, reject) => {
-		get_connection(port, fulfil);
-		setTimeout(() => reject(new Error(`timed out waiting for connection`)), timeout);
-	});
-}
-
-export function get_connection(port: number, cb: () => void) {
-	const socket = net.createConnection(port, 'localhost', () => {
-		cb();
-		socket.destroy();
-	});
-
-	socket.on('error', err => {
-		setTimeout(() => {
-			get_connection(port, cb);
-		}, 10);
-	});
-
-	setTimeout(() => {
-		socket.destroy();
-	}, 1000);
-}

src/cli/utils/minify_html.ts

@@ -0,0 +1,21 @@
+import { minify } from 'html-minifier';
+
+export function minify_html(html: string) {
+	return minify(html, {
+		collapseBooleanAttributes: true,
+		collapseWhitespace: true,
+		conservativeCollapse: true,
+		decodeEntities: true,
+		html5: true,
+		minifyCSS: true,
+		minifyJS: true,
+		removeAttributeQuotes: true,
+		removeComments: true,
+		removeOptionalTags: true,
+		removeRedundantAttributes: true,
+		removeScriptTypeAttributes: true,
+		removeStyleLinkTypeAttributes: true,
+		sortAttributes: true,
+		sortClassName: true
+	});
+}

src/config.ts

@@ -1,5 +1,10 @@
 import * as path from 'path';
 
 export const dev = () => process.env.NODE_ENV !== 'production';
-export const src = () => path.resolve(process.env.SAPPER_ROUTES || 'routes');
+
-export const dest = () => path.resolve(process.env.SAPPER_DEST || '.sapper');
+export const locations = {
+	base:   () => path.resolve(process.env.SAPPER_BASE || ''),
+	app:    () => path.resolve(process.env.SAPPER_BASE || '', process.env.SAPPER_APP    || 'app'),
+	routes: () => path.resolve(process.env.SAPPER_BASE || '', process.env.SAPPER_ROUTES || 'routes'),
+	dest:   () => path.resolve(process.env.SAPPER_BASE || '', process.env.SAPPER_DEST   || '.sapper')
+};

src/core.ts

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

src/core/create_manifests.ts

@@ -1,36 +1,45 @@
 import * as fs from 'fs';
 import * as path from 'path';
-import mkdirp from 'mkdirp';
+import * as glob from 'glob';
 import create_routes from './create_routes';
-import { fudge_mtime, posixify, write } from './utils';
+import { posixify, write_if_changed } from './utils';
-import { dev } from '../config';
+import { dev, locations } from '../config';
 import { Route } from '../interfaces';
 
-// in dev mode, we avoid touching the fs unnecessarily
+export function create_main_manifests({ routes, dev_port }: {
-let last_client_manifest: string = null;
-let last_server_manifest: string = null;
-
-export default function create_app({ routes, dev_port }: {
 	routes: Route[];
-	dev_port: number;
+	dev_port?: number;
 }) {
-	mkdirp.sync('app/manifest');
+	const path_to_routes = path.relative(`${locations.app()}/manifest`, locations.routes());
 
-	const client_manifest = generate_client(routes, dev_port);
+	const client_manifest = generate_client(routes, path_to_routes, dev_port);
-	const server_manifest = generate_server(routes);
+	const server_manifest = generate_server(routes, path_to_routes);
 
-	if (client_manifest !== last_client_manifest) {
+	write_if_changed(`${locations.app()}/manifest/client.js`, client_manifest);
-		write(`app/manifest/client.js`, client_manifest);
+	write_if_changed(`${locations.app()}/manifest/server.js`, server_manifest);
-		last_client_manifest = client_manifest;
-	}
-
-	if (server_manifest !== last_server_manifest) {
-		write(`app/manifest/server.js`, server_manifest);
-		last_server_manifest = server_manifest;
-	}
 }
 
-function generate_client(routes: Route[], dev_port?: number) {
+export function create_serviceworker_manifest({ routes, client_files }: {
+	routes: Route[];
+	client_files: string[];
+}) {
+	const assets = glob.sync('**', { cwd: 'assets', nodir: true });
+
+	let code = `
+		// This file is generated by Sapper — do not edit it!
+		export const timestamp = ${Date.now()};
+
+		export const assets = [\n\t${assets.map((x: string) => `"${x}"`).join(',\n\t')}\n];
+
+		export const shell = [\n\t${client_files.map((x: string) => `"${x}"`).join(',\n\t')}\n];
+
+		export const routes = [\n\t${routes.filter((r: Route) => r.type === 'page' && !/^_[45]xx$/.test(r.id)).map((r: Route) => `{ pattern: ${r.pattern} }`).join(',\n\t')}\n];
+	`.replace(/^\t\t/gm, '').trim();
+
+	write_if_changed(`${locations.app()}/manifest/service-worker.js`, code);
+}
+
+function generate_client(routes: Route[], path_to_routes: string, dev_port?: number) {
 	let code = `
 		// This file is generated by Sapper — do not edit it!
 		export const routes = [
@@ -40,7 +49,7 @@ function generate_client(routes: Route[], dev_port?: number) {
 						return `{ pattern: ${route.pattern}, ignore: true }`;
 					}
 
-					const file = posixify(`../../routes/${route.file}`);
+					const file = posixify(`${path_to_routes}/${route.file}`);
 
 					if (route.id === '_4xx' || route.id === '_5xx') {
 						return `{ error: '${route.id.slice(1)}', load: () => import(/* webpackChunkName: "${route.id}" */ '${file}') }`;
@@ -57,7 +66,7 @@ function generate_client(routes: Route[], dev_port?: number) {
 
 	if (dev()) {
 		const sapper_dev_client = posixify(
-			path.resolve(__dirname, 'sapper-dev-client.js')
+			path.resolve(__dirname, '../sapper-dev-client.js')
 		);
 
 		code += `
@@ -72,12 +81,12 @@ function generate_client(routes: Route[], dev_port?: number) {
 	return code;
 }
 
-function generate_server(routes: Route[]) {
+function generate_server(routes: Route[], path_to_routes: string) {
 	let code = `
 		// This file is generated by Sapper — do not edit it!
 		${routes
 			.map(route => {
-				const file = posixify(`../../routes/${route.file}`);
+				const file = posixify(`${path_to_routes}/${route.file}`);
 				return route.type === 'page'
 					? `import ${route.id} from '${file}';`
 					: `import * as ${route.id} from '${file}';`;

src/core/create_routes.ts

@@ -1,9 +1,9 @@
 import * as path from 'path';
 import glob from 'glob';
-import { src } from '../config';
+import { locations } from '../config';
 import { Route } from '../interfaces';
 
-export default function create_routes({ files } = { files: glob.sync('**/*.+(html|js|mjs)', { cwd: src() }) }) {
+export default function create_routes({ files } = { files: glob.sync('**/*.*', { cwd: locations.routes(), nodir: true }) }) {
 	const routes: Route[] = files
 		.map((file: string) => {
 			if (/(^|\/|\\)_/.test(file)) return;
@@ -74,30 +74,27 @@ export default function create_routes({ files } = { files: glob.sync('**/*.+(htm
 		})
 		.filter(Boolean)
 		.sort((a: Route, b: Route) => {
-			let same = true;
+			if (a.file === '4xx.html' || a.file === '5xx.html') return -1;
+			if (b.file === '4xx.html' || b.file === '5xx.html') return 1;
 
-			for (let i = 0; true; i += 1) {
+			const max = Math.max(a.parts.length, b.parts.length);
+
+			for (let i = 0; i < max; i += 1) {
 				const a_part = a.parts[i];
 				const b_part = b.parts[i];
 
-				if (!a_part && !b_part) {
-					if (same) throw new Error(`The ${a.file} and ${b.file} routes clash`);
-					return 0;
-				}
-
 				if (!a_part) return -1;
 				if (!b_part) return 1;
 
 				const a_sub_parts = get_sub_parts(a_part);
 				const b_sub_parts = get_sub_parts(b_part);
+				const max = Math.max(a_sub_parts.length, b_sub_parts.length);
 
-				for (let i = 0; true; i += 1) {
+				for (let i = 0; i < max; i += 1) {
 					const a_sub_part = a_sub_parts[i];
 					const b_sub_part = b_sub_parts[i];
 
-					if (!a_sub_part && !b_sub_part) break;
+					if (!a_sub_part) return 1; // b is more specific, so goes first
-
-					if (!a_sub_part) return 1; // note this is reversed from above — match [foo].json before [foo]
 					if (!b_sub_part) return -1;
 
 					if (a_sub_part.dynamic !== b_sub_part.dynamic) {
@@ -109,6 +106,8 @@ export default function create_routes({ files } = { files: glob.sync('**/*.+(htm
 					}
 				}
 			}
+
+			throw new Error(`The ${a.file} and ${b.file} routes clash`);
 		});
 
 	return routes;

src/core/create_serviceworker.ts

@@ -1,26 +0,0 @@
-import * as fs from 'fs';
-import * as path from 'path';
-import glob from 'glob';
-import create_routes from './create_routes';
-import { fudge_mtime, posixify, write } from './utils';
-import { Route } from '../interfaces';
-
-export default function create_serviceworker({ routes, client_files }: {
-	routes: Route[];
-	client_files: string[];
-}) {
-	const assets = glob.sync('**', { cwd: 'assets', nodir: true });
-
-	let code = `
-		// This file is generated by Sapper — do not edit it!
-		export const timestamp = ${Date.now()};
-
-		export const assets = [\n\t${assets.map((x: string) => `"${x}"`).join(',\n\t')}\n];
-
-		export const shell = [\n\t${client_files.map((x: string) => `"${x}"`).join(',\n\t')}\n];
-
-		export const routes = [\n\t${routes.filter((r: Route) => r.type === 'page' && !/^_[45]xx$/.test(r.id)).map((r: Route) => `{ pattern: ${r.pattern} }`).join(',\n\t')}\n];
-	`.replace(/^\t\t/gm, '').trim();
-
-	write('app/manifest/service-worker.js', code);
-}

src/core/index.ts

@@ -1,4 +0,0 @@
-export { default as create_app } from './create_app';
-export { default as create_serviceworker } from './create_serviceworker';
-export { default as create_compilers } from './create_compilers';
-export { default as create_routes } from './create_routes';

src/core/utils.ts

@@ -1,8 +1,13 @@
-import * as fs from 'fs';
+import * as sander from 'sander';
 
-export function write(file: string, code: string) {
+const previous_contents = new Map();
-	fs.writeFileSync(file, code);
+
-	fudge_mtime(file);
+export function write_if_changed(file: string, code: string) {
+	if (code !== previous_contents.get(file)) {
+		previous_contents.set(file, code);
+		sander.writeFileSync(file, code);
+		fudge_mtime(file);
+	}
 }
 
 export function posixify(file: string) {
@@ -11,8 +16,8 @@ export function posixify(file: string) {
 
 export function fudge_mtime(file: string) {
 	// need to fudge the mtime so that webpack doesn't go doolally
-	const { atime, mtime } = fs.statSync(file);
+	const { atime, mtime } = sander.statSync(file);
-	fs.utimesSync(
+	sander.utimesSync(
 		file,
 		new Date(atime.getTime() - 999999),
 		new Date(mtime.getTime() - 999999)

src/middleware.ts

@@ -3,12 +3,11 @@ import * as path from 'path';
 import { ClientRequest, ServerResponse } from 'http';
 import mkdirp from 'mkdirp';
 import rimraf from 'rimraf';
-import serialize from 'serialize-javascript';
+import devalue from 'devalue';
-import escape_html from 'escape-html';
+import { lookup } from './middleware/mime';
-import { lookup } from './mime';
+import { create_routes, create_compilers } from './core';
-import { create_routes, templates, create_compilers } from 'sapper/core.js';
+import { locations, dev } from './config';
-import { dest, dev } from '../config';
+import { Route, Template } from './interfaces';
-import { Route, Template } from '../interfaces';
 import sourceMapSupport from 'source-map-support';
 
 sourceMapSupport.install();
@@ -41,7 +40,7 @@ interface Req extends ClientRequest {
 export default function middleware({ routes }: {
 	routes: RouteObject[]
 }) {
-	const output = dest();
+	const output = locations.dest();
 
 	const client_info = JSON.parse(fs.readFileSync(path.join(output, 'client_info.json'), 'utf-8'));
 
@@ -51,12 +50,12 @@ export default function middleware({ routes }: {
 			next();
 		},
 
-		exists(path.join(output, 'index.html')) && serve({
+		fs.existsSync(path.join(output, 'index.html')) && serve({
 			pathname: '/index.html',
 			cache_control: 'max-age=600'
 		}),
 
-		exists(path.join(output, 'service-worker.js')) && serve({
+		fs.existsSync(path.join(output, 'service-worker.js')) && serve({
 			pathname: '/service-worker.js',
 			cache_control: 'max-age=600'
 		}),
@@ -81,7 +80,7 @@ function serve({ prefix, pathname, cache_control }: {
 		? (req: Req) => req.pathname === pathname
 		: (req: Req) => req.pathname.startsWith(prefix);
 
-	const output = dest();
+	const output = locations.dest();
 
 	const cache: Map<string, Buffer> = new Map();
 
@@ -113,8 +112,8 @@ const resolved = Promise.resolve();
 
 function get_route_handler(chunks: Record<string, string>, routes: RouteObject[]) {
 	const template = dev()
-		? () => fs.readFileSync('app/template.html', 'utf-8')
+		? () => fs.readFileSync(`${locations.app()}/template.html`, 'utf-8')
-		: (str => () => str)(fs.readFileSync('app/template.html', 'utf-8'));
+		: (str => () => str)(fs.readFileSync(`${locations.dest()}/template.html`, 'utf-8'));
 
 	function handle_route(route: RouteObject, req: Req, res: ServerResponse) {
 		req.params = route.params(route.pattern.exec(req.pathname));
@@ -332,17 +331,8 @@ function read_json(file: string) {
 
 function try_serialize(data: any) {
 	try {
-		return serialize(data);
+		return devalue(data);
 	} catch (err) {
 		return null;
 	}
 }
-
-function exists(file: string) {
-	try {
-		fs.statSync(file);
-		return true;
-	} catch (err) {
-		return false;
-	}
-}

src/webpack.ts

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

test/app/app/server.js

@@ -1,8 +1,8 @@
 import fs from 'fs';
-import express from 'express';
+import polka from 'polka';
 import compression from 'compression';
 import serve from 'serve-static';
-import sapper from '../../../middleware';
+import sapper from '../../../dist/middleware.ts.js';
 import { routes } from './manifest/server.js';
 
 let pending;
@@ -28,7 +28,7 @@ process.on('message', message => {
 	}
 });
 
-const app = express();
+const app = polka();
 
 app.use((req, res, next) => {
 	if (pending) pending.add(req.url);

test/app/package.json

@@ -1,28 +0,0 @@
-{
-  "name": "TODO",
-  "description": "TODO",
-  "version": "0.0.1",
-  "scripts": {
-    "dev": "node server.js",
-    "build": "sapper build",
-    "start": "cross-env NODE_ENV=production node server.js",
-    "prestart": "npm run build"
-  },
-  "dependencies": {
-    "compression": "^1.7.2",
-    "cross-env": "^5.1.3",
-    "css-loader": "^0.28.10",
-    "express": "^4.16.2",
-    "extract-text-webpack-plugin": "^3.0.2",
-    "glob": "^7.1.2",
-    "marked": "^0.3.17",
-    "node-fetch": "^1.7.3",
-    "npm-run-all": "^4.1.2",
-    "serve-static": "^1.13.2",
-    "style-loader": "^0.19.0",
-    "svelte": "^1.56.0",
-    "svelte-loader": "^2.3.3",
-    "uglifyjs-webpack-plugin": "^1.2.2",
-    "webpack": "^4.1.0"
-  }
-}

test/app/routes/api/delete/[id].js

@@ -1,5 +1,5 @@
 export function del(req, res) {
-	res.set({
+	res.writeHead(200, {
 		'Content-Type': 'application/json'
 	});
 

test/app/routes/blog.json.js

@@ -8,7 +8,7 @@ const contents = JSON.stringify(posts.map(post => {
 }));
 
 export function get(req, res) {
-	res.set({
+	res.writeHead(200, {
 		'Content-Type': 'application/json',
 		'Cache-Control': `max-age=${30 * 60 * 1e3}` // cache for 30 minutes
 	});

test/app/routes/blog/[slug].json.js

@@ -11,7 +11,7 @@ export function get(req, res, next) {
 	const { slug } = req.params;
 
 	if (slug in lookup) {
-		res.set({
+		res.writeHead(200, {
 			'Content-Type': 'application/json',
 			'Cache-Control': `no-cache`
 		});

test/app/routes/preload-values/custom-class.html

@@ -0,0 +1,17 @@
+<h1>{{foo.bar()}}</h1>
+
+<script>
+	export default {
+		preload() {
+			class Foo {
+				bar() {
+					return 42;
+				}
+			}
+
+			return {
+				foo: new Foo()
+			};
+		}
+	};
+</script>

test/app/routes/preload-values/set.html

@@ -0,0 +1,11 @@
+<h1>{{set.has('x')}}</h1>
+
+<script>
+	export default {
+		preload() {
+			return {
+				set: new Set(['x'])
+			};
+		}
+	};
+</script>

test/app/webpack/server.config.js

@@ -1,5 +1,4 @@
 const config = require('../../../webpack/config.js');
-const pkg = require('../package.json');
 const sapper_pkg = require('../../../package.json');
 
 module.exports = {
@@ -9,7 +8,10 @@ module.exports = {
 	resolve: {
 		extensions: ['.js', '.html']
 	},
-	externals: Object.keys(pkg.dependencies).concat(Object.keys(sapper_pkg.dependencies)),
+	externals: [].concat(
+		Object.keys(sapper_pkg.dependencies),
+		Object.keys(sapper_pkg.devDependencies)
+	),
 	module: {
 		rules: [
 			{

test/common/test.js

@@ -1,13 +1,11 @@
 const path = require('path');
 const assert = require('assert');
 const Nightmare = require('nightmare');
-const express = require('express');
 const serve = require('serve-static');
 const walkSync = require('walk-sync');
 const fetch = require('node-fetch');
-
+const rimraf = require('rimraf');
-run('production');
+const ports = require('port-authority');
-run('development');
 
 Nightmare.action('page', {
 	title(done) {
@@ -27,11 +25,94 @@ Nightmare.action('prefetchRoutes', function(done) {
 	this.evaluate_now(() => window.prefetchRoutes(), done);
 });
 
+const cli = path.resolve(__dirname, '../../sapper');
+
+describe('sapper', function() {
+	process.chdir(path.resolve(__dirname, '../app'));
+
+	// clean up after previous test runs
+	rimraf.sync('export');
+	rimraf.sync('build');
+	rimraf.sync('.sapper');
+
+	this.timeout(30000);
+
+	// TODO reinstate dev tests
+	// run('development');
+	run('production');
+
+	describe('export', () => {
+		before(() => {
+			return exec(`node ${cli} export`);
+		});
+
+		it('export all pages', () => {
+			const dest = path.resolve(__dirname, '../app/export');
+
+			// Pages that should show up in the extraction directory.
+			const expectedPages = [
+				'index.html',
+				'about/index.html',
+				'slow-preload/index.html',
+
+				'blog/index.html',
+				'blog/a-very-long-post/index.html',
+				'blog/how-can-i-get-involved/index.html',
+				'blog/how-is-sapper-different-from-next/index.html',
+				'blog/how-to-use-sapper/index.html',
+				'blog/what-is-sapper/index.html',
+				'blog/why-the-name/index.html',
+
+				'blog.json',
+				'blog/a-very-long-post.json',
+				'blog/how-can-i-get-involved.json',
+				'blog/how-is-sapper-different-from-next.json',
+				'blog/how-to-use-sapper.json',
+				'blog/what-is-sapper.json',
+				'blog/why-the-name.json',
+
+				'favicon.png',
+				'global.css',
+				'great-success.png',
+				'manifest.json',
+				'service-worker.js',
+				'svelte-logo-192.png',
+				'svelte-logo-512.png',
+			];
+			// Client scripts that should show up in the extraction directory.
+			const expectedClientRegexes = [
+				/client\/[^/]+\/_(\.\d+)?\.js/,
+				/client\/[^/]+\/about(\.\d+)?\.js/,
+				/client\/[^/]+\/blog_\$slug\$(\.\d+)?\.js/,
+				/client\/[^/]+\/blog(\.\d+)?\.js/,
+				/client\/[^/]+\/main(\.\d+)?\.js/,
+				/client\/[^/]+\/show_url(\.\d+)?\.js/,
+				/client\/[^/]+\/slow_preload(\.\d+)?\.js/,
+			];
+			const allPages = walkSync(dest);
+
+			expectedPages.forEach((expectedPage) => {
+				assert.ok(allPages.includes(expectedPage),`Could not find page matching ${expectedPage}`);
+			});
+
+			expectedClientRegexes.forEach((expectedRegex) => {
+				// Ensure each client page regular expression matches at least one
+				// generated page.
+				let matched = false;
+				for (const page of allPages) {
+					if (expectedRegex.test(page)) {
+						matched = true;
+						break;
+					}
+				}
+				assert.ok(matched, `Could not find client page matching ${expectedRegex}`);
+			});
+		});
+	});
+});
+
 function run(env) {
 	describe(`env=${env}`, function () {
-		this.timeout(30000);
-
-		let PORT;
 		let proc;
 		let nightmare;
 		let capture;
@@ -39,28 +120,23 @@ function run(env) {
 		let base;
 
 		before(() => {
-			process.chdir(path.resolve(__dirname, '../app'));
+			const promise = env === 'production'
+				? exec(`node ${cli} build`).then(() => ports.find(3000))
+				: ports.find(3000).then(port => {
+					exec(`node ${cli} dev`);
+					return ports.wait(port).then(() => port);
+				});
 
-			let exec_promise = Promise.resolve();
+			return promise.then(port => {
-
-			if (env === 'production') {
-				const cli = path.resolve(__dirname, '../../cli.js');
-				exec_promise = exec(`node ${cli} export`);
-			}
-
-			return exec_promise.then(() => {
-				const resolved = require.resolve('../../middleware.js');
-				delete require.cache[resolved];
-				delete require.cache[require.resolve('../../core.js')]; // TODO remove this
-
-				return require('get-port')();
-			}).then(port => {
 				base = `http://localhost:${port}`;
 
-				proc = require('child_process').fork('.sapper/server.js', {
+				const dir = env === 'production' ? 'build' : '.sapper';
+
+				proc = require('child_process').fork(`${dir}/server.js`, {
 					cwd: process.cwd(),
 					env: {
 						NODE_ENV: env,
+						SAPPER_DEST: dir,
 						PORT: port
 					}
 				});
@@ -411,6 +487,30 @@ function run(env) {
 						assert.equal(title, `I'm afraid I just blue myself`);
 					});
 			});
+
+			it('serializes Set objects returned from preload', () => {
+				return nightmare.goto(`${base}/preload-values/set`)
+					.page.title()
+					.then(title => {
+						assert.equal(title, 'true');
+						return nightmare.init().page.title();
+					})
+					.then(title => {
+						assert.equal(title, 'true');
+					});
+			});
+
+			it('bails on custom classes returned from preload', () => {
+				return nightmare.goto(`${base}/preload-values/custom-class`)
+					.page.title()
+					.then(title => {
+						assert.equal(title, '42');
+						return nightmare.init().page.title();
+					})
+					.then(title => {
+						assert.equal(title, '42');
+					});
+			});
 		});
 
 		describe('headers', () => {
@@ -430,73 +530,6 @@ function run(env) {
 				});
 			});
 		});
-
-		if (env === 'production') {
-			describe('export', () => {
-				it('export all pages', () => {
-					const dest = path.resolve(__dirname, '../app/export');
-
-					// Pages that should show up in the extraction directory.
-					const expectedPages = [
-						'index.html',
-						'about/index.html',
-						'slow-preload/index.html',
-
-						'blog/index.html',
-						'blog/a-very-long-post/index.html',
-						'blog/how-can-i-get-involved/index.html',
-						'blog/how-is-sapper-different-from-next/index.html',
-						'blog/how-to-use-sapper/index.html',
-						'blog/what-is-sapper/index.html',
-						'blog/why-the-name/index.html',
-
-						'blog.json',
-						'blog/a-very-long-post.json',
-						'blog/how-can-i-get-involved.json',
-						'blog/how-is-sapper-different-from-next.json',
-						'blog/how-to-use-sapper.json',
-						'blog/what-is-sapper.json',
-						'blog/why-the-name.json',
-
-						'favicon.png',
-						'global.css',
-						'great-success.png',
-						'manifest.json',
-						'service-worker.js',
-						'svelte-logo-192.png',
-						'svelte-logo-512.png',
-					];
-					// Client scripts that should show up in the extraction directory.
-					const expectedClientRegexes = [
-						/client\/[^/]+\/_(\.\d+)?\.js/,
-						/client\/[^/]+\/about(\.\d+)?\.js/,
-						/client\/[^/]+\/blog_\$slug\$(\.\d+)?\.js/,
-						/client\/[^/]+\/blog(\.\d+)?\.js/,
-						/client\/[^/]+\/main(\.\d+)?\.js/,
-						/client\/[^/]+\/show_url(\.\d+)?\.js/,
-						/client\/[^/]+\/slow_preload(\.\d+)?\.js/,
-					];
-					const allPages = walkSync(dest);
-
-					expectedPages.forEach((expectedPage) => {
-						assert.ok(allPages.includes(expectedPage),`Could not find page matching ${expectedPage}`);
-					});
-
-					expectedClientRegexes.forEach((expectedRegex) => {
-						// Ensure each client page regular expression matches at least one
-						// generated page.
-						let matched = false;
-						for (const page of allPages) {
-							if (expectedRegex.test(page)) {
-								matched = true;
-								break;
-							}
-						}
-						assert.ok(matched, `Could not find client page matching ${expectedRegex}`);
-					});
-				});
-			});
-		}
 	});
 }
 

test/unit/create_routes.test.js

@@ -1,5 +1,5 @@
 const assert = require('assert');
-const { create_routes } = require('../../core.js');
+const { create_routes } = require('../../dist/core.ts.js');
 
 describe('create_routes', () => {
 	it('sorts routes correctly', () => {
@@ -22,6 +22,41 @@ describe('create_routes', () => {
 		);
 	});
 
+	it('prefers index page to nested route', () => {
+		const routes = create_routes({
+			files: [
+				'api/examples/[slug].js',
+				'api/examples/index.js',
+				'blog/[slug].html',
+				'api/gists/[id].js',
+				'api/gists/index.js',
+				'4xx.html',
+				'5xx.html',
+				'blog/index.html',
+				'blog/rss.xml.js',
+				'guide/index.html',
+				'index.html'
+			]
+		});
+
+		assert.deepEqual(
+			routes.map(r => r.file),
+			[
+				'4xx.html',
+				'5xx.html',
+				'index.html',
+				'guide/index.html',
+				'blog/index.html',
+				'blog/rss.xml.js',
+				'blog/[slug].html',
+				'api/examples/index.js',
+				'api/examples/[slug].js',
+				'api/gists/index.js',
+				'api/gists/[id].js',
+			]
+		);
+	});
+
 	it('generates params', () => {
 		const routes = create_routes({
 			files: ['index.html', 'about.html', '[wildcard].html', 'post/[id].html']

webpack.js

@@ -0,0 +1,2 @@
+// TODO write to this file, instead of webpack.ts.js
+module.exports = require('./dist/webpack.ts.js');

webpack/config.js

@@ -0,0 +1,2 @@
+// TODO deprecate this file in favour of sapper/webpack.js
+module.exports = require('../dist/webpack.ts.js');