-> v0.9.2

use code-splitting etc

.gitignore

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

CHANGELOG.md

@@ -1,5 +1,26 @@
 # sapper changelog
 
+## 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))

middleware.js

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

package.json

@@ -1,43 +1,37 @@
 {
   "name": "sapper",
-  "version": "0.8.3",
+  "version": "0.9.2",
   "description": "Military-grade apps, engineered by Svelte",
   "main": "middleware.js",
   "bin": {
-    "sapper": "cli.js"
+    "sapper": "./sapper"
   },
   "files": [
-    "cli.js",
-    "core.js",
-    "middleware.js",
+    "*.js",
+    "*.ts.js",
     "runtime",
-    "runtime.js",
-    "sapper-dev-client.js",
-    "webpack"
+    "webpack",
+    "sapper",
+    "dist"
   ],
   "directories": {
     "test": "test"
   },
   "dependencies": {
-    "chalk": "^2.3.0",
     "cheerio": "^1.0.0-rc.2",
     "chokidar": "^1.7.0",
-    "code-frame": "^5.0.0",
-    "escape-html": "^1.0.3",
-    "express": "^4.16.2",
+    "clorox": "^1.0.3",
+    "devalue": "^1.0.1",
     "glob": "^7.1.2",
-    "locate-character": "^2.0.5",
     "mkdirp": "^0.5.1",
-    "mri": "^1.1.0",
     "node-fetch": "^1.7.3",
+    "polka": "^0.3.4",
     "port-authority": "^1.0.0",
     "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.9.0",
     "url-parse": "^1.2.0",
@@ -50,20 +44,18 @@
     "@types/mkdirp": "^0.5.2",
     "@types/rimraf": "^2.0.2",
     "compression": "^1.7.1",
-    "css-loader": "^0.28.7",
-    "electron": "^1.8.2",
     "eslint": "^4.13.1",
     "eslint-plugin-import": "^2.8.0",
     "get-port": "^3.2.0",
     "mocha": "^4.0.1",
     "nightmare": "^2.10.0",
     "npm-run-all": "^4.1.2",
-    "rollup": "^0.53.0",
+    "rollup": "^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' },
-	{ name: 'middleware' },
-	{ name: 'runtime', format: 'es' },
-	{ name: 'webpack', file: 'webpack/config' }
-].map(obj => ({
-	input: `src/${obj.name}/index.ts`,
-	output: {
-		file: `${obj.file || obj.name}.js`,
-		format: obj.format || 'cjs',
-		banner: obj.banner && '#!/usr/bin/env node',
-		paths,
-		sourcemap: true
+	{
+		input: `src/runtime/index.ts`,
+		output: {
+			file: `runtime.js`,
+			format: 'es'
+		},
+		plugins: [
+			typescript({
+				typescript: require('typescript')
+			})
+		]
 	},
-	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,77 @@
+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')
+	.action(async (opts: { port: number }) => {
+		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')
+	.action(async (dir = 'build', opts: { port: number }) => {
+		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)}. Exporting...`);
+
+			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,12 @@
 import * as fs from 'fs';
 import * as path from 'path';
-import chalk from 'chalk';
+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 { create_compilers, create_app, create_routes, create_serviceworker } from '../core'
 import { src, dest, dev } from '../config';
 
-export default async function build() {
+export async function build() {
 	const output = dest();
 
 	mkdirp.sync(output);
@@ -20,12 +20,12 @@ export default async function build() {
 	const { client, server, serviceworker } = create_compilers();
 
 	const client_stats = await compile(client);
-	console.log(chalk.inverse(`\nbuilt client`));
+	console.log(clorox.inverse(`\nbuilt client`).toString());
 	console.log(client_stats.toString({ colors: true }));
 	fs.writeFileSync(path.join(output, 'client_info.json'), JSON.stringify(client_stats.toJson()));
 
 	const server_stats = await compile(server);
-	console.log(chalk.inverse(`\nbuilt server`));
+	console.log(clorox.inverse(`\nbuilt server`).toString());
 	console.log(server_stats.toString({ colors: true }));
 
 	let serviceworker_stats;
@@ -38,7 +38,7 @@ export default async function build() {
 		});
 
 		serviceworker_stats = await compile(serviceworker);
-		console.log(chalk.inverse(`\nbuilt service worker`));
+		console.log(clorox.inverse(`\nbuilt service worker`).toString());
 		console.log(serviceworker_stats.toString({ colors: true }));
 	}
 }
@@ -61,4 +61,4 @@ function compile(compiler: any) {
 			}
 		});
 	});
-}
+}

src/cli/dev.ts

@@ -1,7 +1,7 @@
 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';
@@ -10,7 +10,7 @@ import format_messages from 'webpack-format-messages';
 import prettyMs from 'pretty-ms';
 import * as ports from 'port-authority';
 import { dest } from '../config';
-import { create_compilers, create_app, create_routes, create_serviceworker } from 'sapper/core.js';
+import { create_compilers, create_app, create_routes, create_serviceworker } from '../core';
 
 type Deferred = {
 	promise?: Promise<any>;
@@ -70,9 +70,20 @@ function create_hot_update_server(port: number, interval = 10000) {
 	return { send };
 }
 
-export default async function dev(port: number) {
+export async function dev(opts: { port: number }) {
 	process.env.NODE_ENV = 'development';
 
+	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 = dest();
 	rimraf.sync(dir);
 	mkdirp.sync(dir);
@@ -97,6 +108,11 @@ export default async function dev(port: number) {
 
 	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()
@@ -121,7 +137,7 @@ export default async function dev(port: number) {
 			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?
@@ -139,15 +155,15 @@ export default async function dev(port: number) {
 
 		compiler.watch({}, (err: Error, stats: any) => {
 			if (err) {
-				console.error(chalk.red(`✗ ${name}`));
-				console.error(chalk.red(err.message));
+				console.error(clorox.red(`✗ ${name}`));
+				console.error(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);
@@ -164,7 +180,7 @@ export default async function dev(port: number) {
 					}
 				} 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);
@@ -180,7 +196,7 @@ export default async function dev(port: number) {
 							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);
@@ -205,7 +221,7 @@ export default async function dev(port: number) {
 
 			deferreds.client.promise.then(() => {
 				function restart() {
-					ports.wait(3000).then(deferreds.server.fulfil); // TODO control port
+					ports.wait(port).then(deferreds.server.fulfil);
 				}
 
 				if (proc) {
@@ -286,4 +302,4 @@ function watch_files(pattern: string, events: string[], callback: () => void) {
 	events.forEach(event => {
 		watcher.on(event, callback);
 	});
-}
+}

src/cli/export.ts

@@ -1,20 +1,13 @@
 import * as child_process from 'child_process';
 import * as path from 'path';
 import * as sander from 'sander';
-import express from 'express';
 import cheerio from 'cheerio';
 import URL from 'url-parse';
 import fetch from 'node-fetch';
 import * as ports from 'port-authority';
 import { dest } from '../config';
 
-const app = express();
-
-function read_json(file: string) {
-	return JSON.parse(sander.readFileSync(file, { encoding: 'utf-8' }));
-}
-
-export default async function exporter(export_dir: string) {
+export async function exporter(export_dir: string) {
 	const build_dir = dest();
 
 	// Prep output directory

src/cli/index.ts

@@ -1,112 +0,0 @@
-import * as fs from 'fs';
-import * as path from 'path';
-import * as child_process from 'child_process';
-import sade from 'sade';
-import mri from 'mri';
-import chalk from 'chalk';
-import prettyMs from 'pretty-ms';
-import help from './help.md';
-import build from './build';
-import exporter from './export';
-import dev from './dev';
-import upgrade from './upgrade';
-import * as ports from 'port-authority';
-import * as pkg from '../../package.json';
-
-const prog = sade('sapper').version(pkg.version);
-
-prog.command('dev')
-	.describe('Start a development server')
-	.option('-p, --port', 'Specify a port')
-	.action(async ({ port }: { port: number }) => {
-		if (port) {
-			if (!await ports.check(port)) {
-				console.log(chalk.bold.red(`> Port ${port} is unavailable`));
-				return;
-			}
-		} else {
-			port = await ports.find(3000);
-		}
-
-		dev(port);
-	});
-
-prog.command('build [dest]')
-	.describe('Create a production-ready version of your app')
-	.action((dest = 'build') => {
-		console.log(`> Building...`);
-
-		process.env.NODE_ENV = 'production';
-		process.env.SAPPER_DEST = dest;
-
-		const start = Date.now();
-
-		build()
-			.then(() => {
-				const elapsed = Date.now() - start;
-				console.error(`\n> Finished in ${prettyMs(elapsed)}. Type ${chalk.bold.cyan(dest === 'build' ? 'npx sapper start' : `npx sapper start ${dest}`)} to run the app.`);
-			})
-			.catch(err => {
-				console.error(err ? err.details || err.stack || err.message || err : 'Unknown error');
-			});
-	});
-
-prog.command('start [dir]')
-	.describe('Start your app')
-	.option('-p, --port', 'Specify a port')
-	.action(async (dir = 'build', { port }: { port: number }) => {
-		const resolved = path.resolve(dir);
-		const server = path.resolve(dir, 'server.js');
-
-		if (!fs.existsSync(server)) {
-			console.log(chalk.bold.red(`> ${dir}/server.js does not exist — type ${chalk.bold.cyan(dir === 'build' ? `npx sapper build` : `npx sapper build ${dir}`)} to create it`));
-			return;
-		}
-
-		if (port) {
-			if (!await ports.check(port)) {
-				console.log(chalk.bold.red(`> Port ${port} is unavailable`));
-				return;
-			}
-		} else {
-			port = await ports.find(3000);
-		}
-
-		child_process.fork(server, [], {
-			cwd: process.cwd(),
-			env: Object.assign({
-				NODE_ENV: 'production',
-				PORT: port,
-				SAPPER_DEST: dir
-			}, process.env)
-		});
-	});
-
-prog.command('export [dest]')
-	.describe('Export your app as static files (if possible)')
-	.action((dest = 'export') => {
-		console.log(`> Building...`);
-
-		process.env.NODE_ENV = 'production';
-		process.env.SAPPER_DEST = '.sapper/.export';
-
-		const start = Date.now();
-
-		build()
-			.then(() => {
-				const elapsed = Date.now() - start;
-				console.error(`\n> Built in ${prettyMs(elapsed)}. Exporting...`);
-			})
-			.then(() => exporter(dest))
-			.then(() => {
-				const elapsed = Date.now() - start;
-				console.error(`\n> Finished in ${prettyMs(elapsed)}. Type ${chalk.bold.cyan(`npx serve ${dest}`)} to run the app.`);
-			})
-			.catch(err => {
-				console.error(err ? err.details || err.stack || err.message || err : 'Unknown error');
-			});
-	});
-
-// TODO upgrade
-
-prog.parse(process.argv);

src/cli/start.ts

@@ -0,0 +1,35 @@
+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 }) {
+	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)
+	});
+}

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;
 			}
 		}
@@ -50,4 +50,4 @@ function read(file: string) {
 
 function write(file: string, data: string) {
 	fs.writeFileSync(file, data);
-}
+}

src/core.ts

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

src/core/create_routes.ts

@@ -3,7 +3,7 @@ import glob from 'glob';
 import { src } 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: src(), 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; // note this is reversed from above — match [foo].json before [foo]
+					if (!a_sub_part) return 1; // b is more specific, so goes first
 					if (!b_sub_part) return -1;
 
 					if (a_sub_part.dynamic !== b_sub_part.dynamic) {
@@ -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/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/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 escape_html from 'escape-html';
-import { lookup } from './mime';
-import { create_routes, templates, create_compilers } from 'sapper/core.js';
-import { dest, dev } from '../config';
-import { Route, Template } from '../interfaces';
+import devalue from 'devalue';
+import { lookup } from './middleware/mime';
+import { create_routes, templates, create_compilers } from './core/index';
+import { dest, dev } from './config';
+import { Route, Template } from './interfaces';
 import sourceMapSupport from 'source-map-support';
 
 sourceMapSupport.install();
@@ -332,7 +331,7 @@ function read_json(file: string) {
 
 function try_serialize(data: any) {
 	try {
-		return serialize(data);
+		return devalue(data);
 	} catch (err) {
 		return null;
 	}

src/webpack.ts

@@ -1,4 +1,4 @@
-import { dest, dev } from '../config';
+import { dest, dev } from './config';
 
 export default {
 	dev: dev(),
@@ -6,7 +6,7 @@ export default {
 	client: {
 		entry: () => {
 			return {
-				main: './app/client.js'
+				main: './app/client'
 			};
 		},
 
@@ -23,7 +23,7 @@ export default {
 	server: {
 		entry: () => {
 			return {
-				server: './app/server.js'
+				server: './app/server'
 			};
 		},
 
@@ -40,7 +40,7 @@ export default {
 	serviceworker: {
 		entry: () => {
 			return {
-				'service-worker': './app/service-worker.js'
+				'service-worker': './app/service-worker'
 			};
 		},
 

test/app/app/server.js

@@ -1,5 +1,5 @@
 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';
@@ -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,7 +1,6 @@
 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');
@@ -26,7 +25,7 @@ Nightmare.action('prefetchRoutes', function(done) {
 	this.evaluate_now(() => window.prefetchRoutes(), done);
 });
 
-const cli = path.resolve(__dirname, '../../cli.js');
+const cli = path.resolve(__dirname, '../../sapper');
 
 describe('sapper', function() {
 	process.chdir(path.resolve(__dirname, '../app'));
@@ -488,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', () => {

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