-> v0.10.2

Stable sort

.gitignore

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

CHANGELOG.md

@@ -1,5 +1,60 @@
 # sapper changelog
 
+## 0.10.2
+
+* Attach `store` to error pages
+* Fix sorting edge case ([#215](https://github.com/sveltejs/sapper/pull/215))
+
+## 0.10.1
+
+* Fix server-side `fetch` paths ([#207](https://github.com/sveltejs/sapper/pull/207))
+
+## 0.10.0
+
+* Support mounting on a path (this requires `app/template.html` to include `%sapper.base%`) ([#180](https://github.com/sveltejs/sapper/issues/180))
+* Support per-request server-side `Store` with client-side hydration ([#178](https://github.com/sveltejs/sapper/issues/178))
+* Add `this.fetch` to `preload`, with credentials support ([#178](https://github.com/sveltejs/sapper/issues/178))
+* Exclude sourcemaps from preload links and `<script>` block ([#204](https://github.com/sveltejs/sapper/pull/204))
+* Register service worker in `<script>` block
+
+
+## 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))

package.json

@@ -1,73 +1,69 @@
 {
   "name": "sapper",
-  "version": "0.8.4",
+  "version": "0.10.2",
   "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",
+    "chokidar": "^2.0.2",
-    "code-frame": "^5.0.0",
+    "clorox": "^1.0.3",
-    "escape-html": "^1.0.3",
+    "cookie": "^0.3.1",
-    "express": "^4.16.2",
+    "devalue": "^1.0.1",
     "glob": "^7.1.2",
-    "locate-character": "^2.0.5",
+    "html-minifier": "^3.5.11",
     "mkdirp": "^0.5.1",
-    "mri": "^1.1.0",
+    "node-fetch": "^2.1.1",
-    "node-fetch": "^1.7.3",
+    "port-authority": "^1.0.2",
-    "port-authority": "^1.0.0",
+    "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.4",
-    "source-map-support": "^0.5.3",
     "tslib": "^1.9.0",
     "url-parse": "^1.2.0",
-    "walk-sync": "^0.3.2",
+    "webpack-format-messages": "^1.0.2"
-    "webpack-format-messages": "^1.0.1"
   },
   "devDependencies": {
-    "@std/esm": "^0.19.7",
+    "@std/esm": "^0.25.3",
     "@types/glob": "^5.0.34",
     "@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",
+    "express": "^4.16.3",
     "get-port": "^3.2.0",
-    "mocha": "^4.0.1",
+    "mocha": "^5.0.4",
-    "nightmare": "^2.10.0",
+    "nightmare": "^3.0.0",
     "npm-run-all": "^4.1.2",
-    "rollup": "^0.53.0",
+    "polka": "^0.3.4",
-    "rollup-plugin-commonjs": "^8.3.0",
+    "rollup": "^0.57.0",
+    "rollup-plugin-commonjs": "^9.1.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": "^1.57.4",
-    "svelte-loader": "^2.3.2",
+    "svelte-loader": "^2.5.1",
-    "ts-node": "^4.1.0",
+    "ts-node": "^5.0.1",
     "typescript": "^2.6.2",
+    "walk-sync": "^0.3.2",
     "webpack": "^4.1.0"
   },
   "scripts": {

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

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,80 @@
+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)')
+	.option('--basepath', 'Specify a base path')
+	.action(async (dest = 'export', opts: { basepath?: string }) => {
+		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, opts);
+			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,44 +1,56 @@
 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 { 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, '**/*'));
 
+	// 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');
+
+	// remove this in a future version
+	if (template.indexOf('%sapper.base%') === -1) {
+		console.log(`${clorox.bold.red(`> As of Sapper v0.10, your template.html file must include %sapper.base% in the <head>`)}`);
+		process.exit(1);
+	}
+
+	fs.writeFileSync(`${output}/template.html`, minify_html(template));
+
 	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(chalk.inverse(`\nbuilt 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()));
 
 	const server_stats = await compile(server);
-	console.log(chalk.inverse(`\nbuilt 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
 		});
 
 		serviceworker_stats = await compile(serviceworker);
-		console.log(chalk.inverse(`\nbuilt service worker`));
+		console.log(`${clorox.inverse(`\nbuilt service worker`)}`);
 		console.log(serviceworker_stats.toString({ colors: true }));
 	}
 }
@@ -61,4 +73,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';
@@ -9,8 +9,8 @@ import rimraf from 'rimraf';
 import format_messages from 'webpack-format-messages';
 import prettyMs from 'pretty-ms';
 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,26 +70,44 @@ 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, open: boolean }) {
+	// remove this in a future version
+	const template = fs.readFileSync(path.join(locations.app(), 'template.html'), 'utf-8');
+	if (template.indexOf('%sapper.base%') === -1) {
+		console.log(`${clorox.bold.red(`> As of Sapper v0.10, your template.html file must include %sapper.base% in the <head>`)}`);
+		process.exit(1);
+	}
+
 	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);
 
 	const dev_port = await ports.find(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'
 		});
@@ -97,6 +115,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 +144,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 +162,15 @@ export default async function dev(port: number) {
 
 		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);
@@ -164,7 +187,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 +203,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 +228,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) {
@@ -225,6 +248,8 @@ export default async function dev(port: number) {
 		}
 	});
 
+	let first = true;
+
 	watch(compilers.client, {
 		name: 'client',
 
@@ -241,15 +266,21 @@ export default async function dev(port: number) {
 			fs.writeFileSync(path.join(dir, 'client_info.json'), JSON.stringify(info, null, '  '));
 			deferreds.client.fulfil();
 
-			const client_files = info.assets.map((chunk: { name: string }) => `/client/${chunk.name}`);
+			const client_files = info.assets.map((chunk: { name: string }) => `client/${chunk.name}`);
 
 			deferreds.server.promise.then(() => {
 				hot_update_server.send({
 					status: 'completed'
 				});
+
+				if (first) {
+					first = false;
+					console.log(`${clorox.bold.cyan(`> Listening on http://localhost:${port}`)}`);
+					if (opts.open) child_process.exec(`open http://localhost:${port}`);
+				}
 			});
 
-			create_serviceworker({
+			create_serviceworker_manifest({
 				routes: create_routes(),
 				client_files
 			});
@@ -286,4 +317,4 @@ function watch_files(pattern: string, events: string[], callback: () => void) {
 	events.forEach(event => {
 		watcher.on(event, callback);
 	});
-}
+}

src/cli/export.ts

@@ -1,21 +1,19 @@
 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 * 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, { basepath = '' }) {
+	const build_dir = locations.dest();
 
-function read_json(file: string) {
+	export_dir = path.join(export_dir, basepath);
-	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,6 +25,10 @@ export default async function exporter(export_dir: string) {
 		sander.copyFileSync(build_dir, 'service-worker.js').to(export_dir, 'service-worker.js');
 	}
 
+	if (sander.existsSync(build_dir, 'service-worker.js.map')) {
+		sander.copyFileSync(build_dir, 'service-worker.js.map').to(export_dir, 'service-worker.js.map');
+	}
+
 	const port = await ports.find(3000);
 
 	const origin = `http://localhost:${port}`;
@@ -47,49 +49,58 @@ 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) {
+	async function handle(url: URL) {
-		if (url.origin !== origin) return;
+		const r = await fetch(url.href);
+		const range = ~~(r.status / 100);
 
-		if (seen.has(url.pathname)) return;
+		if (range >= 4) {
-		seen.add(url.pathname);
+			console.log(`${clorox.red(`> Received ${r.status} response when fetching ${url.pathname}`)}`);
+			return;
+		}
 
-		return fetch(url.href)
+		if (range === 2) {
-			.then(r => {
+			if (r.headers.get('Content-Type') === 'text/html') {
-				if (r.headers.get('Content-Type') === 'text/html') {
+				const body = await r.text();
-					return r.text().then((body: string) => {
+				const $ = cheerio.load(body);
-						const $ = cheerio.load(body);
+				const urls: URL[] = [];
-						const hrefs: string[] = [];
 
-						$('a[href]').each((i: number, $a) => {
+				const base = new URL($('base').attr('href') || '/', url.href);
-							hrefs.push($a.attribs.href);
-						});
 
-						return hrefs.reduce((promise, href) => {
+				$('a[href]').each((i: number, $a) => {
-							return promise.then(() => handle(new URL(href, url.href)));
+					const url = new URL($a.attribs.href, base.href);
-						}, Promise.resolve());
+
-					});
+					if (url.origin === origin && !seen.has(url.pathname)) {
+						seen.add(url.pathname);
+						urls.push(url);
+					}
+				});
+
+				for (const url of urls) {
+					await handle(url);
 				}
-			})
+			}
-			.catch((err: Error) => {
+		}
-				console.error(`Error rendering ${url.pathname}: ${err.message}`);
-			});
 	}
 
 	return ports.wait(port)
-		.then(() => handle(new URL(origin))) // TODO all static routes
+		.then(() => handle(new URL(`/${basepath}`, origin))) // TODO all static routes
 		.then(() => proc.kill());
 }

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

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;
@@ -102,7 +102,10 @@ export default function create_routes({ files } = { files: glob.sync('**/*.+(htm
 					}
 
 					if (!a_sub_part.dynamic && a_sub_part.content !== b_sub_part.content) {
-						return b_sub_part.content.length - a_sub_part.content.length;
+						return (
+							(b_sub_part.content.length - a_sub_part.content.length) ||
+							(a_sub_part.content < b_sub_part.content ? -1 : 1)
+						);
 					}
 				}
 			}

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/interfaces.ts

@@ -12,4 +12,8 @@ export type Route = {
 export type Template = {
 	render: (data: Record<string, string>) => string;
 	stream: (req, res, data: Record<string, string | Promise<string>>) => void;
+};
+
+export type Store = {
+	get: () => any;
 };

src/middleware.ts

@@ -1,14 +1,16 @@
 import * as fs from 'fs';
 import * as path from 'path';
+import { resolve, URL } from 'url';
 import { ClientRequest, ServerResponse } from 'http';
+import cookie from 'cookie';
 import mkdirp from 'mkdirp';
 import rimraf from 'rimraf';
-import serialize from 'serialize-javascript';
+import devalue from 'devalue';
-import escape_html from 'escape-html';
+import fetch from 'node-fetch';
-import { lookup } from './mime';
+import { lookup } from './middleware/mime';
-import { create_routes, templates, create_compilers } from 'sapper/core.js';
+import { create_routes, create_compilers } from './core';
-import { dest, dev } from '../config';
+import { locations, dev } from './config';
-import { Route, Template } from '../interfaces';
+import { Route, Template } from './interfaces';
 import sourceMapSupport from 'source-map-support';
 
 sourceMapSupport.install();
@@ -19,7 +21,7 @@ type RouteObject = {
 	pattern: RegExp;
 	params: (match: RegExpMatchArray) => Record<string, string>;
 	module: {
-		render: (data: any) => {
+		render: (data: any, opts: { store: Store }) => {
 			head: string;
 			css: { code: string, map: any };
 			html: string
@@ -31,23 +33,40 @@ type RouteObject = {
 
 type Handler = (req: Req, res: ServerResponse, next: () => void) => void;
 
+type Store = {
+	get: () => any
+};
+
 interface Req extends ClientRequest {
 	url: string;
+	baseUrl: string;
+	originalUrl: string;
 	method: string;
-	pathname: string;
+	path: string;
 	params: Record<string, string>;
+	headers: Record<string, string>;
 }
 
-export default function middleware({ routes }: {
+export default function middleware({ routes, store }: {
-	routes: RouteObject[]
+	routes: RouteObject[],
+	store: (req: Req) => Store
 }) {
-	const output = dest();
+	const output = locations.dest();
 
 	const client_info = JSON.parse(fs.readFileSync(path.join(output, 'client_info.json'), 'utf-8'));
 
 	const middleware = compose_handlers([
 		(req: Req, res: ServerResponse, next: () => void) => {
-			req.pathname = req.url.replace(/\?.*/, '');
+			if (req.baseUrl === undefined) {
+				req.baseUrl = req.originalUrl
+					? req.originalUrl.slice(0, -req.url.length)
+					: '';
+			}
+
+			if (req.path === undefined) {
+				req.path = req.url.replace(/\?.*/, '');
+			}
+
 			next();
 		},
 
@@ -61,12 +80,17 @@ export default function middleware({ routes }: {
 			cache_control: 'max-age=600'
 		}),
 
+		fs.existsSync(path.join(output, 'service-worker.js.map')) && serve({
+			pathname: '/service-worker.js.map',
+			cache_control: 'max-age=600'
+		}),
+
 		serve({
 			prefix: '/client/',
 			cache_control: 'max-age=31536000'
 		}),
 
-		get_route_handler(client_info.assetsByChunkName, routes)
+		get_route_handler(client_info.assetsByChunkName, routes, store)
 	].filter(Boolean));
 
 	return middleware;
@@ -78,10 +102,10 @@ function serve({ prefix, pathname, cache_control }: {
 	cache_control: string
 }) {
 	const filter = pathname
-		? (req: Req) => req.pathname === pathname
+		? (req: Req) => req.path === pathname
-		: (req: Req) => req.pathname.startsWith(prefix);
+		: (req: Req) => req.path.startsWith(prefix);
 
-	const output = dest();
+	const output = locations.dest();
 
 	const cache: Map<string, Buffer> = new Map();
 
@@ -91,10 +115,10 @@ function serve({ prefix, pathname, cache_control }: {
 
 	return (req: Req, res: ServerResponse, next: () => void) => {
 		if (filter(req)) {
-			const type = lookup(req.pathname);
+			const type = lookup(req.path);
 
 			try {
-				const data = read(req.pathname.slice(1));
+				const data = read(req.path.slice(1));
 
 				res.setHeader('Content-Type', type);
 				res.setHeader('Cache-Control', cache_control);
@@ -111,13 +135,13 @@ function serve({ prefix, pathname, cache_control }: {
 
 const resolved = Promise.resolve();
 
-function get_route_handler(chunks: Record<string, string>, routes: RouteObject[]) {
+function get_route_handler(chunks: Record<string, string>, routes: RouteObject[], store_getter: (req: Req) => Store) {
 	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));
+		req.params = route.params(route.pattern.exec(req.path));
 
 		const mod = route.module;
 
@@ -128,11 +152,13 @@ function get_route_handler(chunks: Record<string, string>, routes: RouteObject[]
 			// TODO detect other stuff we can preload? images, CSS, fonts?
 			const link = []
 				.concat(chunks.main, chunks[route.id])
-				.map(file => `</client/${file}>;rel="preload";as="script"`)
+				.filter(file => !file.match(/\.map$/))
+				.map(file => `<${req.baseUrl}/client/${file}>;rel="preload";as="script"`)
 				.join(', ');
 
 			res.setHeader('Link', link);
 
+			const store = store_getter ? store_getter(req) : null;
 			const data = { params: req.params, query: req.query };
 
 			let redirect: { statusCode: number, location: string };
@@ -145,14 +171,50 @@ function get_route_handler(chunks: Record<string, string>, routes: RouteObject[]
 					},
 					error: (statusCode: number, message: Error | string) => {
 						error = { statusCode, message };
-					}
+					},
+					fetch: (url: string, opts?: any) => {
+						const parsed = new URL(url, `http://127.0.0.1:${process.env.PORT}${req.baseUrl ? req.baseUrl + '/'  :''}`);
+
+						if (opts) {
+							opts = Object.assign({}, opts);
+
+							const include_cookies = (
+								opts.credentials === 'include' ||
+								opts.credentials === 'same-origin' && parsed.origin === `http://127.0.0.1:${process.env.PORT}`
+							);
+
+							if (include_cookies) {
+								const cookies: Record<string, string> = {};
+								if (!opts.headers) opts.headers = {};
+
+								const str = []
+									.concat(
+										cookie.parse(req.headers.cookie || ''),
+										cookie.parse(opts.headers.cookie || ''),
+										cookie.parse(res.getHeader('Set-Cookie') || '')
+									)
+									.map(cookie => {
+										return Object.keys(cookie)
+											.map(name => `${name}=${encodeURIComponent(cookie[name])}`)
+											.join('; ');
+									})
+									.filter(Boolean)
+									.join(', ');
+
+								opts.headers.cookie = str;
+							}
+						}
+
+						return fetch(parsed.href, opts);
+					},
+					store
 				}, req) : {}
 			).catch(err => {
 				error = { statusCode: 500, message: err };
 			}).then(preloaded => {
 				if (redirect) {
 					res.statusCode = redirect.statusCode;
-					res.setHeader('Location', redirect.location);
+					res.setHeader('Location', `${req.baseUrl}/${redirect.location}`);
 					res.end();
 
 					return;
@@ -163,20 +225,36 @@ function get_route_handler(chunks: Record<string, string>, routes: RouteObject[]
 					return;
 				}
 
-				const serialized = try_serialize(preloaded); // TODO bail on non-POJOs
+				const serialized = {
+					preloaded: mod.preload && try_serialize(preloaded),
+					store: store && try_serialize(store.get())
+				};
 				Object.assign(data, preloaded);
 
-				const { html, head, css } = mod.render(data);
+				const { html, head, css } = mod.render(data, {
+					store
+				});
 
 				let scripts = []
 					.concat(chunks.main) // chunks main might be an array. it might not! thanks, webpack
-					.map(file => `<script src='/client/${file}'></script>`)
+					.filter(file => !file.match(/\.map$/))
+					.map(file => `<script src='${req.baseUrl}/client/${file}'></script>`)
 					.join('');
 
-				scripts = `<script>__SAPPER__ = { preloaded: ${serialized} };</script>${scripts}`;
+				let inline_script = `__SAPPER__={${[
+					`baseUrl: "${req.baseUrl}"`,
+					serialized.preloaded && `preloaded: ${serialized.preloaded}`,
+					serialized.store && `store: ${serialized.store}`
+				].filter(Boolean).join(',')}}`
+
+				const has_service_worker = fs.existsSync(path.join(locations.dest(), 'service-worker.js'));
+				if (has_service_worker) {
+					`if ('serviceWorker' in navigator) navigator.serviceWorker.register('${req.baseUrl}/service-worker.js')`
+				}
 
 				const page = template()
-					.replace('%sapper.scripts%', scripts)
+					.replace('%sapper.base%', `<base href="${req.baseUrl}/">`)
+					.replace('%sapper.scripts%', `<script>${inline_script}</script>${scripts}`)
 					.replace('%sapper.html%', html)
 					.replace('%sapper.head%', `<noscript id='sapper-head-start'></noscript>${head}<noscript id='sapper-head-end'></noscript>`)
 					.replace('%sapper.styles%', (css && css.code ? `<style>${css.code}</style>` : ''));
@@ -278,12 +356,15 @@ function get_route_handler(chunks: Record<string, string>, routes: RouteObject[]
 		const rendered = route ? route.module.render({
 			status: statusCode,
 			error
+		}, {
+			store: store_getter && store_getter(req)
 		}) : { head: '', css: null, html: title };
 
 		const { head, css, html } = rendered;
 
 		const page = template()
-			.replace('%sapper.scripts%', `<script src='/client/${chunks.main}'></script>`)
+			.replace('%sapper.base%', `<base href="${req.baseUrl}/">`)
+			.replace('%sapper.scripts%', `<script>__SAPPER__={baseUrl: "${req.baseUrl}"}</script><script src='${req.baseUrl}/client/${chunks.main}'></script>`)
 			.replace('%sapper.html%', html)
 			.replace('%sapper.head%', `<noscript id='sapper-head-start'></noscript>${head}<noscript id='sapper-head-end'></noscript>`)
 			.replace('%sapper.styles%', (css && css.code ? `<style>${css.code}</style>` : ''));
@@ -292,11 +373,9 @@ function get_route_handler(chunks: Record<string, string>, routes: RouteObject[]
 	}
 
 	return function find_route(req: Req, res: ServerResponse) {
-		const url = req.pathname;
-
 		try {
 			for (const route of routes) {
-				if (!route.error && route.pattern.test(url)) return handle_route(route, req, res);
+				if (!route.error && route.pattern.test(req.path)) return handle_route(route, req, res);
 			}
 
 			handle_error(req, res, 404, 'Not found');
@@ -332,8 +411,8 @@ function read_json(file: string) {
 
 function try_serialize(data: any) {
 	try {
-		return serialize(data);
+		return devalue(data);
 	} catch (err) {
 		return null;
 	}
-}
+}

src/middleware/mime-types.md

@@ -29,7 +29,7 @@ application/java-archive			jar
 application/java-serialized-object		ser
 application/java-vm				class
 application/javascript				js
-application/json				json
+application/json				json map
 application/jsonml+json				jsonml
 application/lost+xml				lostxml
 application/mac-binhex40			hqx

src/runtime/index.ts

@@ -1,8 +1,11 @@
 import { detach, findAnchor, scroll_state, which } from './utils';
-import { Component, ComponentConstructor, Params, Query, Route, RouteData, ScrollPosition, Target } from './interfaces';
+import { Component, ComponentConstructor, Params, Query, Route, RouteData, ScrollPosition, Store, Target } from './interfaces';
+
+const manifest = typeof window !== 'undefined' && window.__SAPPER__;
 
 export let component: Component;
 let target: Node;
+let store: Store;
 let routes: Route[];
 let errors: { '4xx': Route, '5xx': Route };
 
@@ -22,9 +25,12 @@ if ('scrollRestoration' in history) {
 
 function select_route(url: URL): Target {
 	if (url.origin !== window.location.origin) return null;
+	if (!url.pathname.startsWith(manifest.baseUrl)) return null;
+
+	const pathname = url.pathname.slice(manifest.baseUrl.length);
 
 	for (const route of routes) {
-		const match = route.pattern.exec(url.pathname);
+		const match = route.pattern.exec(pathname);
 		if (match) {
 			if (route.ignore) return null;
 
@@ -64,6 +70,7 @@ function render(Component: ComponentConstructor, data: any, scroll: ScrollPositi
 	component = new Component({
 		target,
 		data,
+		store,
 		hydrate: !component
 	});
 
@@ -80,11 +87,13 @@ function prepare_route(Component: ComponentConstructor, data: RouteData) {
 		return { Component, data, redirect, error };
 	}
 
-	if (!component && window.__SAPPER__ && window.__SAPPER__.preloaded) {
+	if (!component && manifest.preloaded) {
-		return { Component, data: Object.assign(data, window.__SAPPER__.preloaded), redirect, error };
+		return { Component, data: Object.assign(data, manifest.preloaded), redirect, error };
 	}
 
 	return Promise.resolve(Component.preload.call({
+		store,
+		fetch: (url: string, opts?: any) => window.fetch(url, opts),
 		redirect: (statusCode: number, location: string) => {
 			redirect = { statusCode, location };
 		},
@@ -203,7 +212,7 @@ let prefetching: {
 } = null;
 
 export function prefetch(href: string) {
-	const selected = select_route(new URL(href));
+	const selected = select_route(new URL(href, document.baseURI));
 
 	if (selected) {
 		prefetching = {
@@ -222,7 +231,7 @@ function handle_touchstart_mouseover(event: MouseEvent | TouchEvent) {
 
 let inited: boolean;
 
-export function init(_target: Node, _routes: Route[]) {
+export function init(_target: Node, _routes: Route[], opts?: { store?: (data: any) => Store }) {
 	target = _target;
 	routes = _routes.filter(r => !r.error);
 	errors = {
@@ -230,6 +239,10 @@ export function init(_target: Node, _routes: Route[]) {
 		'5xx': _routes.find(r => r.error === '5xx')
 	};
 
+	if (opts && opts.store) {
+		store = opts.store(manifest.store);
+	}
+
 	if (!inited) { // this check makes HMR possible
 		window.addEventListener('click', handle_click);
 		window.addEventListener('popstate', handle_popstate);
@@ -257,7 +270,8 @@ export function init(_target: Node, _routes: Route[]) {
 }
 
 export function goto(href: string, opts = { replaceState: false }) {
-	const target = select_route(new URL(href, window.location.href));
+	const target = select_route(new URL(href, document.baseURI));
+
 	if (target) {
 		navigate(target, null);
 		if (history) history[opts.replaceState ? 'replaceState' : 'pushState']({ id: cid }, '', href);

src/runtime/interfaces.ts

@@ -1,9 +1,12 @@
+import { Store } from '../interfaces';
+
+export { Store };
 export type Params = Record<string, string>;
 export type Query = Record<string, string | true>;
 export type RouteData = { params: Params, query: Query };
 
 export interface ComponentConstructor {
-	new (options: { target: Node, data: any, hydrate: boolean }): Component;
+	new (options: { target: Node, data: any, store: Store, hydrate: boolean }): Component;
 	preload: (data: { params: Params, query: Query }) => Promise<any>;
 };
 

src/webpack.ts

@@ -1,4 +1,4 @@
-import { dest, dev } from '../config';
+import { locations, dev } from './config';
 
 export default {
 	dev: dev(),
@@ -6,16 +6,16 @@ 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/'
+				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/client.js

@@ -1,8 +1,11 @@
 import { init, prefetchRoutes } from '../../../runtime.js';
+import { Store } from 'svelte/store.js';
 import { routes } from './manifest/client.js';
 
 window.init = () => {
-	return init(document.querySelector('#sapper'), routes);
+	return init(document.querySelector('#sapper'), routes, {
+		store: data => new Store(data)
+	});
 };
 
 window.prefetchRoutes = prefetchRoutes;

test/app/app/server.js

@@ -1,8 +1,9 @@
 import fs from 'fs';
+import { resolve } from 'url';
 import express from 'express';
-import compression from 'compression';
 import serve from 'serve-static';
-import sapper from '../../../middleware';
+import sapper from '../../../dist/middleware.ts.js';
+import { Store } from 'svelte/store.js';
 import { routes } from './manifest/server.js';
 
 let pending;
@@ -30,56 +31,74 @@ process.on('message', message => {
 
 const app = express();
 
-app.use((req, res, next) => {
+const { PORT = 3000, BASEPATH = '' } = process.env;
-	if (pending) pending.add(req.url);
+const base = `http://localhost:${PORT}${BASEPATH}/`;
-
-	const { write, end } = res;
-	const chunks = [];
-
-	res.write = function(chunk) {
-		chunks.push(new Buffer(chunk));
-		write.apply(res, arguments);
-	};
-
-	res.end = function(chunk) {
-		if (chunk) chunks.push(new Buffer(chunk));
-		end.apply(res, arguments);
-
-		if (pending) pending.delete(req.url);
-
-		process.send({
-			method: req.method,
-			url: req.url,
-			status: res.statusCode,
-			headers: res._headers,
-			body: Buffer.concat(chunks).toString()
-		});
-
-		if (pending && pending.size === 0 && ended) {
-			process.send({ type: 'done' });
-		}
-	};
-
-	next();
-});
-
-const { PORT = 3000 } = process.env;
 
 // this allows us to do e.g. `fetch('/api/blog')` on the server
 const fetch = require('node-fetch');
 global.fetch = (url, opts) => {
-	if (url[0] === '/') url = `http://localhost:${PORT}${url}`;
+	return fetch(resolve(base, url), opts);
-	return fetch(url, opts);
 };
 
-app.use(compression({ threshold: 0 }));
+const middlewares = [
+	serve('assets'),
 
-app.use(serve('assets'));
+	// set test cookie
+	(req, res, next) => {
+		res.setHeader('Set-Cookie', 'test=woohoo!; Max-Age=3600');
+		next();
+	},
 
-app.use(sapper({
+	// emit messages so we can capture requests
-	routes
+	(req, res, next) => {
-}));
+		if (!pending) return next();
 
-app.listen(PORT, () => {
+		pending.add(req.url);
-	console.log(`listening on port ${PORT}`);
+
-});
+		const { write, end } = res;
+		const chunks = [];
+
+		res.write = function(chunk) {
+			chunks.push(new Buffer(chunk));
+			write.apply(res, arguments);
+		};
+
+		res.end = function(chunk) {
+			if (chunk) chunks.push(new Buffer(chunk));
+			end.apply(res, arguments);
+
+			if (pending) pending.delete(req.url);
+
+			process.send({
+				method: req.method,
+				url: req.url,
+				status: res.statusCode,
+				headers: res._headers,
+				body: Buffer.concat(chunks).toString()
+			});
+
+			if (pending && pending.size === 0 && ended) {
+				process.send({ type: 'done' });
+			}
+		};
+
+		next();
+	},
+
+	sapper({
+		routes,
+		store: () => {
+			return new Store({
+				title: 'Stored title'
+			});
+		}
+	})
+];
+
+if (BASEPATH) {
+	app.use(BASEPATH, ...middlewares);
+} else {
+	app.use(...middlewares);
+}
+
+app.listen(PORT);

test/app/app/template.html

@@ -5,15 +5,11 @@
 	<meta name='viewport' content='width=device-width'>
 	<meta name='theme-color' content='#aa1e1e'>
 
-	<link rel='stylesheet' href='/global.css'>
+	%sapper.base%
-	<link rel='manifest' href='/manifest.json'>
-	<link rel='icon' type='image/png' href='/favicon.png'>
 
-	<script>
+	<link rel='stylesheet' href='global.css'>
-		// if ('serviceWorker' in navigator) {
+	<link rel='manifest' href='manifest.json'>
-		// 	navigator.serviceWorker.register('/service-worker.js');
+	<link rel='icon' type='image/png' href='favicon.png'>
-		// }
-	</script>
 
 	<!-- Sapper generates a <style> tag containing critical CSS
 	     for the current page. CSS for the rest of the app is

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/4xx.html

@@ -2,17 +2,5 @@
 	<title>{{status}}</title>
 </:Head>
 
-<Layout page='home'>
+<h1>Not found</h1>
-	<h1>Not found</h1>
+<p>{{error.message}}</p>
-	<p>{{error.message}}</p>
-</Layout>
-
-<script>
-	import Layout from './_components/Layout.html';
-
-	export default {
-		components: {
-			Layout
-		}
-	};
-</script>

test/app/routes/5xx.html

@@ -2,17 +2,5 @@
 	<title>Internal server error</title>
 </:Head>
 
-<Layout page='home'>
+<h1>Internal server error</h1>
-	<h1>Internal server error</h1>
+<p>{{error.message}}</p>
-	<p>{{error.message}}</p>
-</Layout>
-
-<script>
-	import Layout from './_components/Layout.html';
-
-	export default {
-		components: {
-			Layout
-		}
-	};
-</script>

test/app/routes/_components/Layout.html

@@ -1,15 +0,0 @@
-<Nav page={{page}}/>
-
-<main>
-	<slot></slot>
-</main>
-
-<script>
-	import Nav from './Nav.html';
-
-	export default {
-		components: {
-			Nav
-		}
-	};
-</script>

test/app/routes/_components/Nav.html

@@ -1,57 +0,0 @@
-<nav>
-	<ul>
-		<li><a href='/'>home</a></li>
-		<li><a href='/about'>about</a></li>
-		<li><a href='/slow-preload'>slow preload</a></li>
-		<li><a href='/redirect-from'>redirect</a></li>
-		<li><a href='/blog/nope'>broken link</a></li>
-		<li><a href='/blog/throw-an-error'>error link</a></li>
-		<li><a rel=prefetch class='{{page === "blog"  ? "selected" : ""}}' href='/blog'>blog</a></li>
-	</ul>
-</nav>
-
-<style>
-	nav {
-		border-bottom: 1px solid rgba(170,30,30,0.1);
-		font-weight: 300;
-		padding: 0 1em;
-	}
-
-	ul {
-		margin: 0;
-		padding: 0;
-	}
-
-	/* clearfix */
-	ul::after {
-		content: '';
-		display: block;
-		clear: both;
-	}
-
-	li {
-		display: block;
-		float: left;
-	}
-
-	.selected {
-		position: relative;
-		display: inline-block;
-	}
-
-	.selected::after {
-		position: absolute;
-		content: '';
-		width: calc(100% - 1em);
-		height: 2px;
-		background-color: rgb(170,30,30);
-		display: block;
-		bottom: -1px;
-	}
-
-	a {
-		text-decoration: none;
-		padding: 1em 0.5em;
-		display: block;
-	}
-</style>

test/app/routes/about.html

@@ -2,24 +2,17 @@
 	<title>About</title>
 </:Head>
 
-<Layout page='about'>
+<h1>About this site</h1>
-	<h1>About this site</h1>
 
-	<p>This is the 'about' page. There's not much here.</p>
+<p>This is the 'about' page. There's not much here.</p>
 
-	<button class='goto' on:click='goto("/blog/what-is-sapper")'>What is Sapper?</button>
+<button class='goto' on:click='goto("blog/what-is-sapper")'>What is Sapper?</button>
-	<button class='prefetch' on:click='goto("/blog/why-the-name")'>Why the name?</button>
+<button class='prefetch' on:click='prefetch("blog/why-the-name")'>Why the name?</button>
-</Layout>
 
 <script>
-	import Layout from './_components/Layout.html';
 	import { goto, prefetch } from '../../../runtime.js';
 
 	export default {
-		components: {
-			Layout
-		},
-
 		methods: {
 			goto,
 			prefetch

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].html

@@ -2,58 +2,14 @@
 	<title>{{post.title}}</title>
 </:Head>
 
-<Layout page='blog'>
+<h1>{{post.title}}</h1>
-	<h1>{{post.title}}</h1>
 
-	<div class='content'>
+<div class='content'>
-		{{{post.html}}}
+	{{{post.html}}}
-	</div>
+</div>
-</Layout>
-
-<style>
-	/*
-		By default, CSS is locally scoped to the component,
-		and any unused styles are dead-code-eliminated.
-		In this page, Svelte can't know which elements are
-		going to appear inside the {{{post.html}}} block,
-		so we have to use the :global(...) modifier to target
-		all elements inside .content
-	*/
-	.content :global(h2) {
-		font-size: 1.4em;
-		font-weight: 500;
-	}
-
-	.content :global(pre) {
-		background-color: #f9f9f9;
-		box-shadow: inset 1px 1px 5px rgba(0,0,0,0.05);
-		padding: 0.5em;
-		border-radius: 2px;
-		overflow-x: auto;
-	}
-
-	.content :global(pre) :global(code) {
-		background-color: transparent;
-		padding: 0;
-	}
-
-	.content :global(ul) {
-		line-height: 1.5;
-	}
-
-	.content :global(li) {
-		margin: 0 0 0.5em 0;
-	}
-</style>
 
 <script>
-	import Layout from '../_components/Layout.html';
-
 	export default {
-		components: {
-			Layout
-		},
-
 		preload({ params, query }) {
 			// the `slug` parameter is available because this file
 			// is called [slug].html
@@ -63,7 +19,7 @@
 				return this.error(500, 'something went wrong');
 			}
 
-			return fetch(`/blog/${slug}.json`).then(r => {
+			return fetch(`blog/${slug}.json`).then(r => {
 				if (r.status === 200) {
 					return r.json().then(post => ({ post }));
 					this.error(r.status, '')

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/blog/_posts.js

@@ -14,7 +14,7 @@ const posts = [
 		html: `
 			<p>First, you have to know what <a href='https://svelte.technology'>Svelte</a> is. Svelte is a UI framework with a bold new idea: rather than providing a library that you write code with (like React or Vue, for example), it's a compiler that turns your components into highly optimized vanilla JavaScript. If you haven't already read the <a href='https://svelte.technology/blog/frameworks-without-the-framework'>introductory blog post</a>, you should!</p>
 
-			<p>Sapper is a Next.js-style framework (<a href='/blog/how-is-sapper-different-from-next'>more on that here</a>) built around Svelte. It makes it embarrassingly easy to create extremely high performance web apps. Out of the box, you get:</p>
+			<p>Sapper is a Next.js-style framework (<a href='blog/how-is-sapper-different-from-next'>more on that here</a>) built around Svelte. It makes it embarrassingly easy to create extremely high performance web apps. Out of the box, you get:</p>
 
 			<ul>
 				<li>Code-splitting, dynamic imports and hot module replacement, powered by webpack</li>
@@ -70,8 +70,8 @@ const posts = [
 			<ul>
 				<li>It's powered by <a href='https://svelte.technology'>Svelte</a> instead of React, so it's faster and your apps are smaller</li>
 				<li>Instead of route masking, we encode route parameters in filenames. For example, the page you're looking at right now is <code>routes/blog/[slug].html</code></li>
-				<li>As well as pages (Svelte components, which render on server or client), you can create <em>server routes</em> in your <code>routes</code> directory. These are just <code>.js</code> files that export functions corresponding to HTTP methods, and receive Express <code>request</code> and <code>response</code> objects as arguments. This makes it very easy to, for example, add a JSON API such as the one <a href='/blog/how-is-sapper-different-from-next.json'>powering this very page</a></li>
+				<li>As well as pages (Svelte components, which render on server or client), you can create <em>server routes</em> in your <code>routes</code> directory. These are just <code>.js</code> files that export functions corresponding to HTTP methods, and receive Express <code>request</code> and <code>response</code> objects as arguments. This makes it very easy to, for example, add a JSON API such as the one <a href='blog/how-is-sapper-different-from-next.json'>powering this very page</a></li>
-				<li>Links are just <code>&lt;a&gt;</code> elements, rather than framework-specific <code>&lt;Link&gt;</code> components. That means, for example, that <a href='/blog/how-can-i-get-involved'>this link right here</a>, despite being inside a blob of HTML, works with the router as you'd expect.</li>
+				<li>Links are just <code>&lt;a&gt;</code> elements, rather than framework-specific <code>&lt;Link&gt;</code> components. That means, for example, that <a href='blog/how-can-i-get-involved'>this link right here</a>, despite being inside a blob of HTML, works with the router as you'd expect.</li>
 			</ul>
 		`
 	},

test/app/routes/blog/index.html

@@ -2,37 +2,22 @@
 	<title>Blog</title>
 </:Head>
 
-<Layout page='blog'>
+<h1>Recent posts</h1>
-	<h1>Recent posts</h1>
 
-	<ul>
+<ul>
-		{{#each posts as post}}
+	{{#each posts as post}}
-			<!-- we're using the non-standard `rel=prefetch` attribute to
+		<!-- we're using the non-standard `rel=prefetch` attribute to
-			     tell Sapper to load the data for the page as soon as
+				tell Sapper to load the data for the page as soon as
-			     the user hovers over the link or taps it, instead of
+				the user hovers over the link or taps it, instead of
-			     waiting for the 'click' event -->
+				waiting for the 'click' event -->
-			<li><a rel='prefetch' href='/blog/{{post.slug}}'>{{post.title}}</a></li>
+		<li><a rel='prefetch' href='blog/{{post.slug}}'>{{post.title}}</a></li>
-		{{/each}}
+	{{/each}}
-	</ul>
+</ul>
-</Layout>
-
-<style>
-	ul {
-		margin: 0 0 1em 0;
-		line-height: 1.5;
-	}
-</style>
 
 <script>
-	import Layout from '../_components/Layout.html';
-
 	export default {
-		components: {
-			Layout
-		},
-
 		preload({ params, query }) {
-			return fetch(`/blog.json`).then(r => r.json()).then(posts => {
+			return fetch(`blog.json`).then(r => r.json()).then(posts => {
 				return { posts };
 			});
 		}

test/app/routes/credentials/index.html

@@ -0,0 +1,11 @@
+<h1>{{message}}</h1>
+
+<script>
+	export default {
+		preload({ query }) {
+			return this.fetch(`credentials/test.json`, {
+				credentials: query.creds
+			}).then(r => r.json());
+		}
+	};
+</script>

test/app/routes/credentials/test.json.js

@@ -0,0 +1,28 @@
+export function get(req, res) {
+	const cookies = req.headers.cookie
+		? req.headers.cookie.split(/,\s+/).reduce((cookies, cookie) => {
+			const [pair] = cookie.split('; ');
+			const [name, value] = pair.split('=');
+			cookies[name] = value;
+			return cookies;
+		}, {})
+		: {};
+
+	if (cookies.test) {
+		res.writeHead(200, {
+			'Content-Type': 'application/json'
+		});
+
+		res.end(JSON.stringify({
+			message: cookies.test
+		}));
+	} else {
+		res.writeHead(403, {
+			'Content-Type': 'application/json'
+		});
+
+		res.end(JSON.stringify({
+			message: 'unauthorized'
+		}));
+	}
+}

test/app/routes/delete-test.html

@@ -4,7 +4,7 @@
 	export default {
 		methods: {
 			del() {
-				fetch(`/api/delete/42`, { method: 'DELETE' })
+				fetch(`api/delete/42`, { method: 'DELETE' })
 					.then(r => r.json())
 					.then(data => {
 						window.deleted = data;

test/app/routes/index.html

@@ -2,59 +2,25 @@
 	<title>Sapper project template</title>
 </:Head>
 
-<Layout page='home'>
+<h1>Great success!</h1>
-	<h1>Great success!</h1>
 
-	<figure>
+<a href='.'>home</a>
-		<img alt='borat' src='/great-success.png'>
+<a href='about'>about</a>
-		<figcaption>HIGH FIVE!</figcaption>
+<a href='slow-preload'>slow preload</a>
-	</figure>
+<a href='redirect-from'>redirect</a>
-
+<a href='blog/nope'>broken link</a>
-	<p><strong>Try editing this file (routes/index.html) to test hot module reloading.</strong></p>
+<a href='blog/throw-an-error'>error link</a>
-</Layout>
+<a href='credentials?creds=include'>credentials</a>
+<a rel=prefetch class='{{page === "blog"  ? "selected" : ""}}' href='blog'>blog</a>
 
 <div class='hydrate-test'></div>
 
 <style>
-	h1, figure, p {
-		text-align: center;
-		margin: 0 auto;
-	}
-
 	h1 {
+		text-align: center;
 		font-size: 2.8em;
 		text-transform: uppercase;
 		font-weight: 700;
 		margin: 0 0 0.5em 0;
 	}
-
+</style>
-	figure {
-		margin: 0 0 1em 0;
-	}
-
-	img {
-		width: 100%;
-		max-width: 400px;
-		margin: 0 0 1em 0;
-	}
-
-	p {
-		margin: 1em auto;
-	}
-
-	@media (min-width: 480px) {
-		h1 {
-			font-size: 4em;
-		}
-	}
-</style>
-
-<script>
-	import Layout from './_components/Layout.html';
-
-	export default {
-		components: {
-			Layout
-		}
-	};
-</script>

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/routes/redirect-from.html

@@ -1,7 +1,7 @@
 <script>
 	export default {
 		preload() {
-			this.redirect(301, '/redirect-to');
+			this.redirect(301, 'redirect-to');
 		}
 	};
 </script>

test/app/routes/store.html

@@ -0,0 +1 @@
+<h1>{{$title}}</h1>

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');
@@ -13,6 +12,10 @@ Nightmare.action('page', {
 		this.evaluate_now(() => document.querySelector('h1').textContent, done);
 	},
 
+	html(done) {
+		this.evaluate_now(() => document.documentElement.innerHTML, done);
+	},
+
 	text(done) {
 		this.evaluate_now(() => document.body.textContent, done);
 	}
@@ -26,7 +29,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'));
@@ -36,11 +39,21 @@ describe('sapper', function() {
 	rimraf.sync('build');
 	rimraf.sync('.sapper');
 
-	this.timeout(30000);
+	this.timeout(process.env.CI ? 30000 : 10000);
 
 	// TODO reinstate dev tests
-	// run('development');
+	// run({
-	run('production');
+	// 	mode: 'development'
+	// });
+
+	run({
+		mode: 'production'
+	});
+
+	run({
+		mode: 'production',
+		basepath: '/custom-basepath'
+	});
 
 	describe('export', () => {
 		before(() => {
@@ -112,16 +125,29 @@ describe('sapper', function() {
 	});
 });
 
-function run(env) {
+function run({ mode, basepath = '' }) {
-	describe(`env=${env}`, function () {
+	describe(`mode=${mode}`, function () {
 		let proc;
-		let nightmare;
 		let capture;
 
 		let base;
 
+		const nightmare = new Nightmare();
+
+		nightmare.on('console', (type, ...args) => {
+			console[type](...args);
+		});
+
+		nightmare.on('page', (type, ...args) => {
+			if (type === 'error') {
+				console.error(args[1]);
+			} else {
+				console.warn(type, args);
+			}
+		});
+
 		before(() => {
-			const promise = env === 'production'
+			const promise = mode === 'production'
 				? exec(`node ${cli} build`).then(() => ports.find(3000))
 				: ports.find(3000).then(port => {
 					exec(`node ${cli} dev`);
@@ -130,13 +156,15 @@ function run(env) {
 
 			return promise.then(port => {
 				base = `http://localhost:${port}`;
+				if (basepath) base += basepath;
 
-				const dir = env === 'production' ? 'build' : '.sapper';
+				const dir = mode === 'production' ? 'build' : '.sapper';
 
 				proc = require('child_process').fork(`${dir}/server.js`, {
 					cwd: process.cwd(),
 					env: {
-						NODE_ENV: env,
+						NODE_ENV: mode,
+						BASEPATH: basepath,
 						SAPPER_DEST: dir,
 						PORT: port
 					}
@@ -184,30 +212,13 @@ function run(env) {
 
 		after(() => {
 			// give a chance to clean up
-			return new Promise(fulfil => {
+			return Promise.all([
-				proc.on('exit', fulfil);
+				nightmare.end(),
-				proc.kill();
+				new Promise(fulfil => {
-			});
+					proc.on('exit', fulfil);
-		});
+					proc.kill();
-
+				})
-		beforeEach(() => {
+			]);
-			nightmare = new Nightmare();
-
-			nightmare.on('console', (type, ...args) => {
-				console[type](...args);
-			});
-
-			nightmare.on('page', (type, ...args) => {
-				if (type === 'error') {
-					console.error(args[1]);
-				} else {
-					console.warn(type, args);
-				}
-			});
-		});
-
-		afterEach(() => {
-			return nightmare.end();
 		});
 
 		describe('basic functionality', () => {
@@ -236,16 +247,16 @@ function run(env) {
 			});
 
 			it('navigates to a new page without reloading', () => {
-				return capture(() => nightmare.goto(base).init().prefetchRoutes())
+				return nightmare.goto(base).init().prefetchRoutes()
 					.then(() => {
-						return capture(() => nightmare.click('a[href="/about"]'));
+						return capture(() => nightmare.click('a[href="about"]'));
 					})
 					.then(requests => {
 						assert.deepEqual(requests.map(r => r.url), []);
 						return nightmare.path();
 					})
 					.then(path => {
-						assert.equal(path, '/about');
+						assert.equal(path, `${basepath}/about`);
 						return nightmare.title();
 					})
 					.then(title => {
@@ -258,7 +269,7 @@ function run(env) {
 					.goto(`${base}/about`)
 					.init()
 					.click('.goto')
-					.wait(() => window.location.pathname === '/blog/what-is-sapper')
+					.wait(url => window.location.pathname === url, `${basepath}/blog/what-is-sapper`)
 					.wait(100)
 					.title()
 					.then(title => {
@@ -267,9 +278,7 @@ function run(env) {
 			});
 
 			it('prefetches programmatically', () => {
-				return nightmare
+				return capture(() => nightmare.goto(`${base}/about`).init())
-					.goto(`${base}/about`)
-					.init()
 					.then(() => {
 						return capture(() => {
 							return nightmare
@@ -278,7 +287,7 @@ function run(env) {
 						});
 					})
 					.then(requests => {
-						assert.ok(!!requests.find(r => r.url === '/blog/why-the-name.json'));
+						assert.ok(!!requests.find(r => r.url === `/blog/why-the-name.json`));
 					});
 			});
 
@@ -299,21 +308,21 @@ function run(env) {
 					.then(() => {
 						return capture(() => {
 							return nightmare
-								.mouseover('[href="/blog/what-is-sapper"]')
+								.mouseover('[href="blog/what-is-sapper"]')
 								.wait(200);
 						});
 					})
 					.then(mouseover_requests => {
-						assert.ok(mouseover_requests.findIndex(r => r.url === '/blog/what-is-sapper.json') !== -1);
+						assert.ok(mouseover_requests.findIndex(r => r.url === `/blog/what-is-sapper.json`) !== -1);
 
 						return capture(() => {
 							return nightmare
-								.click('[href="/blog/what-is-sapper"]')
+								.click('[href="blog/what-is-sapper"]')
 								.wait(200);
 						});
 					})
 					.then(click_requests => {
-						assert.ok(click_requests.findIndex(r => r.url === '/blog/what-is-sapper.json') === -1);
+						assert.ok(click_requests.findIndex(r => r.url === `/blog/what-is-sapper.json`) === -1);
 					});
 			});
 
@@ -321,13 +330,13 @@ function run(env) {
 				return nightmare
 					.goto(base)
 					.init()
-					.click('a[href="/slow-preload"]')
+					.click('a[href="slow-preload"]')
 					.wait(100)
-					.click('a[href="/about"]')
+					.click('a[href="about"]')
 					.wait(100)
 					.then(() => nightmare.path())
 					.then(path => {
-						assert.equal(path, '/about');
+						assert.equal(path, `${basepath}/about`);
 						return nightmare.title();
 					})
 					.then(title => {
@@ -336,7 +345,7 @@ function run(env) {
 					})
 					.then(() => nightmare.path())
 					.then(path => {
-						assert.equal(path, '/about');
+						assert.equal(path, `${basepath}/about`);
 						return nightmare.title();
 					})
 					.then(title => {
@@ -349,7 +358,7 @@ function run(env) {
 					.goto(`${base}/show-url`)
 					.init()
 					.evaluate(() => document.querySelector('p').innerHTML)
-					.end().then(html => {
+					.then(html => {
 						assert.equal(html, `URL is /show-url`);
 					});
 			});
@@ -385,7 +394,7 @@ function run(env) {
 				return nightmare.goto(`${base}/redirect-from`)
 					.path()
 					.then(path => {
-						assert.equal(path, '/redirect-to');
+						assert.equal(path, `${basepath}/redirect-to`);
 					})
 					.then(() => nightmare.page.title())
 					.then(title => {
@@ -395,12 +404,12 @@ function run(env) {
 
 			it('redirects in client', () => {
 				return nightmare.goto(base)
-					.wait('[href="/redirect-from"]')
+					.wait('[href="redirect-from"]')
-					.click('[href="/redirect-from"]')
+					.click('[href="redirect-from"]')
 					.wait(200)
 					.path()
 					.then(path => {
-						assert.equal(path, '/redirect-to');
+						assert.equal(path, `${basepath}/redirect-to`);
 					})
 					.then(() => nightmare.page.title())
 					.then(title => {
@@ -412,7 +421,7 @@ function run(env) {
 				return nightmare.goto(`${base}/blog/nope`)
 					.path()
 					.then(path => {
-						assert.equal(path, '/blog/nope');
+						assert.equal(path, `${basepath}/blog/nope`);
 					})
 					.then(() => nightmare.page.title())
 					.then(title => {
@@ -423,11 +432,11 @@ function run(env) {
 			it('handles 4xx error in client', () => {
 				return nightmare.goto(base)
 					.init()
-					.click('[href="/blog/nope"]')
+					.click('[href="blog/nope"]')
 					.wait(200)
 					.path()
 					.then(path => {
-						assert.equal(path, '/blog/nope');
+						assert.equal(path, `${basepath}/blog/nope`);
 					})
 					.then(() => nightmare.page.title())
 					.then(title => {
@@ -439,7 +448,7 @@ function run(env) {
 				return nightmare.goto(`${base}/blog/throw-an-error`)
 					.path()
 					.then(path => {
-						assert.equal(path, '/blog/throw-an-error');
+						assert.equal(path, `${basepath}/blog/throw-an-error`);
 					})
 					.then(() => nightmare.page.title())
 					.then(title => {
@@ -450,11 +459,11 @@ function run(env) {
 			it('handles non-4xx error in client', () => {
 				return nightmare.goto(base)
 					.init()
-					.click('[href="/blog/throw-an-error"]')
+					.click('[href="blog/throw-an-error"]')
 					.wait(200)
 					.path()
 					.then(path => {
-						assert.equal(path, '/blog/throw-an-error');
+						assert.equal(path, `${basepath}/blog/throw-an-error`);
 					})
 					.then(() => nightmare.page.title())
 					.then(title => {
@@ -465,7 +474,7 @@ function run(env) {
 			it('does not attempt client-side navigation to server routes', () => {
 				return nightmare.goto(`${base}/blog/how-is-sapper-different-from-next`)
 					.init()
-					.click(`[href="/blog/how-is-sapper-different-from-next.json"]`)
+					.click(`[href="blog/how-is-sapper-different-from-next.json"]`)
 					.wait(200)
 					.page.text()
 					.then(text => {
@@ -488,11 +497,73 @@ 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');
+					});
+			});
+
+			it('renders store props', () => {
+				return nightmare.goto(`${base}/store`)
+					.page.title()
+					.then(title => {
+						assert.equal(title, 'Stored title');
+						return nightmare.init().page.title();
+					})
+					.then(title => {
+						assert.equal(title, 'Stored title');
+					});
+			});
+
+			it('sends cookies when using this.fetch with credentials: "include"', () => {
+				return nightmare.goto(`${base}/credentials?creds=include`)
+					.page.title()
+					.then(title => {
+						assert.equal(title, 'woohoo!');
+					});
+			});
+
+			it('does not send cookies when using this.fetch without credentials', () => {
+				return nightmare.goto(`${base}/credentials`)
+					.page.title()
+					.then(title => {
+						assert.equal(title, 'unauthorized');
+					});
+			});
+
+			it('delegates to fetch on the client', () => {
+				return nightmare.goto(base).init()
+					.click('[href="credentials?creds=include"]')
+					.wait(100)
+					.page.title()
+					.then(title => {
+						assert.equal(title, 'woohoo!');
+					});
+			});
 		});
 
 		describe('headers', () => {
 			it('sets Content-Type and Link...preload headers', () => {
-				return capture(() => nightmare.goto(base).end()).then(requests => {
+				return capture(() => nightmare.goto(base)).then(requests => {
 					const { headers } = requests[0];
 
 					assert.equal(
@@ -500,8 +571,16 @@ function run(env) {
 						'text/html'
 					);
 
+					const str = ['main', '_\\.\\d+']
+						.map(file => {
+							return `<${basepath}/client/[^/]+/${file}\\.js>;rel="preload";as="script"`;
+						})
+						.join(', ');
+
+					const regex = new RegExp(str);
+
 					assert.ok(
-						/<\/client\/[^/]+\/main\.js>;rel="preload";as="script", <\/client\/[^/]+\/_\.\d+\.js>;rel="preload";as="script"/.test(headers['link']),
+						regex.test(headers['link']),
 						headers['link']
 					);
 				});
@@ -512,7 +591,7 @@ function run(env) {
 
 function exec(cmd) {
 	return new Promise((fulfil, reject) => {
-		const parts = cmd.split(' ');
+		const parts = cmd.trim().split(' ');
 		const proc = require('child_process').spawn(parts.shift(), parts);
 
 		proc.stdout.on('data', data => {

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', () => {
@@ -12,8 +12,8 @@ describe('create_routes', () => {
 			[
 				'index.html',
 				'about.html',
-				'post/foo.html',
 				'post/bar.html',
+				'post/foo.html',
 				'post/f[xx].html',
 				'post/[id].json.js',
 				'post/[id].html',
@@ -23,7 +23,7 @@ describe('create_routes', () => {
 	});
 
 	it('prefers index page to nested route', () => {
-		const routes = create_routes({
+		let routes = create_routes({
 			files: [
 				'api/examples/[slug].js',
 				'api/examples/index.js',
@@ -55,6 +55,45 @@ describe('create_routes', () => {
 				'api/gists/[id].js',
 			]
 		);
+
+		routes = create_routes({
+			files: [
+				'4xx.html',
+				'5xx.html',
+				'api/blog/[slug].js',
+				'api/blog/index.js',
+				'api/guide/contents.js',
+				'api/guide/index.js',
+				'blog/[slug].html',
+				'blog/index.html',
+				'blog/rss.xml.js',
+				'gist/[id].js',
+				'gist/create.js',
+				'guide/index.html',
+				'index.html',
+				'repl/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',
+				'gist/create.js',
+				'gist/[id].js',
+				'repl/index.html',
+				'api/guide/index.js',
+				'api/guide/contents.js',
+				'api/blog/index.js',
+				'api/blog/[slug].js',
+			]
+		);
 	});
 
 	it('generates params', () => {

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