-> v0.10.2

Stable sort

.gitignore

@@ -7,8 +7,7 @@ test/app/.sapper
 test/app/app/manifest
 test/app/export
 test/app/build
-*.js
+sapper
-*.js.map
+runtime.js
-*.ts.js
+dist
-*.ts.js.map
 !rollup.config.js

CHANGELOG.md

@@ -1,5 +1,31 @@
 # 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))

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sapper",
-  "version": "0.9.4",
+  "version": "0.10.2",
   "description": "Military-grade apps, engineered by Svelte",
   "main": "dist/middleware.ts.js",
   "bin": {
@@ -19,14 +19,14 @@
   },
   "dependencies": {
     "cheerio": "^1.0.0-rc.2",
-    "chokidar": "^1.7.0",
+    "chokidar": "^2.0.2",
     "clorox": "^1.0.3",
+    "cookie": "^0.3.1",
     "devalue": "^1.0.1",
     "glob": "^7.1.2",
-    "html-minifier": "^3.5.10",
+    "html-minifier": "^3.5.11",
     "mkdirp": "^0.5.1",
-    "node-fetch": "^1.7.3",
+    "node-fetch": "^2.1.1",
-    "polka": "^0.3.4",
     "port-authority": "^1.0.2",
     "pretty-bytes": "^4.0.2",
     "pretty-ms": "^3.1.0",
@@ -34,34 +34,36 @@
     "rimraf": "^2.6.2",
     "sade": "^1.4.0",
     "sander": "^0.6.0",
-    "source-map-support": "^0.5.3",
+    "source-map-support": "^0.5.4",
     "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",
     "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.56.5",
+    "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",
     "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": {

runtime.js

@@ -1,271 +0,0 @@
-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 };

src/cli.ts

@@ -49,7 +49,8 @@ prog.command('start [dir]')
 
 prog.command('export [dest]')
 	.describe('Export your app as static files (if possible)')
-	.action(async (dest = 'export') => {
+	.option('--basepath', 'Specify a base path')
+	.action(async (dest = 'export', opts: { basepath?: string }) => {
 		console.log(`> Building...`);
 
 		process.env.NODE_ENV = 'production';
@@ -63,7 +64,7 @@ prog.command('export [dest]')
 			console.error(`\n> Built in ${elapsed(start)}. Crawling site...`);
 
 			const { exporter } = await import('./cli/export');
-			await exporter(dest);
+			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');

src/cli/build.ts

@@ -13,6 +13,18 @@ export async function build() {
 	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
@@ -21,12 +33,12 @@ export async function build() {
 	const { client, server, serviceworker } = create_compilers();
 
 	const client_stats = await compile(client);
-	console.log(clorox.inverse(`\nbuilt client`).toString());
+	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(clorox.inverse(`\nbuilt server`).toString());
+	console.log(`${clorox.inverse(`\nbuilt server`)}`);
 	console.log(server_stats.toString({ colors: true }));
 
 	let serviceworker_stats;
@@ -34,18 +46,13 @@ export async function build() {
 	if (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}`)
 		});
 
 		serviceworker_stats = await compile(serviceworker);
-		console.log(clorox.inverse(`\nbuilt service worker`).toString());
+		console.log(`${clorox.inverse(`\nbuilt service worker`)}`);
 		console.log(serviceworker_stats.toString({ colors: true }));
 	}
-
-	// minify app/template.html
-	// TODO compile this to a function? could be quicker than str.replace(...).replace(...).replace(...)
-	const template = fs.readFileSync(`${locations.app()}/template.html`, 'utf-8');
-	fs.writeFileSync(`${output}/template.html`, minify_html(template));
 }
 
 function compile(compiler: any) {

src/cli/dev.ts

@@ -71,13 +71,20 @@ function create_hot_update_server(port: number, interval = 10000) {
 }
 
 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';
 
 	let port = opts.port || +process.env.PORT;
 
 	if (port) {
 		if (!await ports.check(port)) {
-			console.log(clorox.bold.red(`> Port ${port} is unavailable`));
+			console.log(`${clorox.bold.red(`> Port ${port} is unavailable`)}`);
 			return;
 		}
 	} else {
@@ -155,15 +162,15 @@ export async function dev(opts: { port: number, open: boolean }) {
 
 		compiler.watch({}, (err: Error, stats: any) => {
 			if (err) {
-				console.error(clorox.red(`✗ ${name}`));
+				console.log(`${clorox.red(`✗ ${name}`)}`);
-				console.error(clorox.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(clorox.bold.red(`✗ ${name}`));
+					console.log(`${clorox.bold.red(`✗ ${name}`)}`);
 
 					const filtered = messages.errors.filter((message: string) => {
 						return !build.unique_errors.has(message);
@@ -180,7 +187,7 @@ export async function dev(opts: { port: number, open: boolean }) {
 					}
 				} else {
 					if (messages.warnings.length > 0) {
-						console.log(clorox.bold.yellow(`• ${name}`));
+						console.log(`${clorox.bold.yellow(`• ${name}`)}`);
 
 						const filtered = messages.warnings.filter((message: string) => {
 							return !build.unique_warnings.has(message);
@@ -259,7 +266,7 @@ export async function dev(opts: { port: number, open: boolean }) {
 			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({
@@ -268,7 +275,7 @@ export async function dev(opts: { port: number, open: boolean }) {
 
 				if (first) {
 					first = false;
-					console.log(`${clorox.bold.cyan(`> Listening on localhost:${port}`)}`);
+					console.log(`${clorox.bold.cyan(`> Listening on http://localhost:${port}`)}`);
 					if (opts.open) child_process.exec(`open http://localhost:${port}`);
 				}
 			});

src/cli/export.ts

@@ -10,9 +10,11 @@ import prettyBytes from 'pretty-bytes';
 import { minify_html } from './utils/minify_html';
 import { locations } from '../config';
 
-export async function exporter(export_dir: string) {
+export async function exporter(export_dir: string, { basepath = '' }) {
 	const build_dir = locations.dest();
 
+	export_dir = path.join(export_dir, basepath);
+
 	// Prep output directory
 	sander.rimrafSync(export_dir);
 
@@ -23,6 +25,10 @@ export 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}`;
@@ -58,38 +64,43 @@ export async function exporter(export_dir: string) {
 
 		console.log(`${clorox.bold.cyan(file)} ${clorox.gray(`(${prettyBytes(body.length)})`)}`);
 
-		sander.writeFileSync(`${export_dir}/${file}`, body);
+		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.log(clorox.red(`> 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/start.ts

@@ -34,6 +34,6 @@ export async function start(dir: string, opts: { port: number, open: boolean })
 	});
 
 	await ports.wait(port);
-	console.log(`${clorox.bold.cyan(`> Listening on localhost:${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

@@ -27,10 +27,10 @@ async function upgrade_sapper_main() {
 
 		if (/\%sapper\.main\%/.test(template)) {
 			if (!pattern.test(template)) {
-				console.log(clorox.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(clorox.green(`Replaced %sapper.main% in ${file}`));
+				console.log(`${clorox.green(`Replaced %sapper.main% in ${file}`)}`);
 				replaced = true;
 			}
 		}

src/core/create_routes.ts

@@ -102,7 +102,10 @@ export default function create_routes({ files } = { files: glob.sync('**/*.*', {
 					}
 
 					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/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,9 +1,12 @@
 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 devalue from 'devalue';
+import fetch from 'node-fetch';
 import { lookup } from './middleware/mime';
 import { create_routes, create_compilers } from './core';
 import { locations, dev } from './config';
@@ -18,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
@@ -30,15 +33,23 @@ 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 = locations.dest();
 
@@ -46,7 +57,16 @@ export default function middleware({ routes }: {
 
 	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();
 		},
 
@@ -60,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;
@@ -77,8 +102,8 @@ 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 = locations.dest();
 
@@ -90,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);
@@ -110,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(`${locations.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;
 
@@ -127,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 };
@@ -144,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;
@@ -162,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>` : ''));
@@ -277,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>` : ''));
@@ -291,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');
@@ -335,4 +415,4 @@ function try_serialize(data: any) {
 	} 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

@@ -15,7 +15,7 @@ export default {
 				path: `${locations.dest()}/client`,
 				filename: '[hash]/[name].js',
 				chunkFilename: '[hash]/[name].[id].js',
-				publicPath: '/client/'
+				publicPath: `client/`
 			};
 		}
 	},

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 polka from 'polka';
+import { resolve } from 'url';
-import compression from 'compression';
+import express from 'express';
 import serve from 'serve-static';
 import sapper from '../../../dist/middleware.ts.js';
+import { Store } from 'svelte/store.js';
 import { routes } from './manifest/server.js';
 
 let pending;
@@ -28,58 +29,76 @@ process.on('message', message => {
 	}
 });
 
-const app = polka();
+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/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/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/_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/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/common/test.js

@@ -12,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);
 	}
@@ -35,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(() => {
@@ -111,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`);
@@ -129,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
 					}
@@ -183,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', () => {
@@ -235,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 => {
@@ -257,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 => {
@@ -266,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
@@ -277,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`));
 					});
 			});
 
@@ -298,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);
 					});
 			});
 
@@ -320,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 => {
@@ -335,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 => {
@@ -348,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`);
 					});
 			});
@@ -384,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 => {
@@ -394,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 => {
@@ -411,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 => {
@@ -422,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 => {
@@ -438,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 => {
@@ -449,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 => {
@@ -464,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 => {
@@ -511,11 +521,49 @@ function run(env) {
 						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(
@@ -523,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']
 					);
 				});
@@ -535,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

@@ -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', () => {