-> v0.0.13

connect.js

@@ -9,6 +9,7 @@ const create_routes = require('./utils/create_routes.js');
 const create_templates = require('./utils/create_templates.js');
 const create_app = require('./utils/create_app.js');
 const create_webpack_compiler = require('./utils/create_webpack_compiler.js');
+const escape_html = require('escape-html');
 const { src, dest, dev } = require('./lib/config.js');
 
 const esmRequire = esm(module, {
@@ -99,13 +100,17 @@ module.exports = function connect(opts) {
 			}
 
 			res.status(404).end(templates.render(404, {
+				title: 'Not found',
 				status: 404,
+				method: req.method,
 				url
 			}));
 		} catch(err) {
-			// TODO nice error pages
-			res.status(500);
-			res.end(err ? (err.stack || err.message || err) : 'Unknown error');
+			res.status(500).end(templates.render(500, {
+				title: err.name || 'Internal server error',
+				url,
+				error: escape_html(err.details || err.message || err || 'Unknown error')
+			}));
 		}
 	};
 };

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "sapper",
-  "version": "0.0.3",
+  "version": "0.0.9",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -578,6 +578,11 @@
         "es6-symbol": "3.1.1"
       }
     },
+    "escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
+    },
     "escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
@@ -670,18 +675,6 @@
         "is-extglob": "1.0.0"
       }
     },
-    "extract-text-webpack-plugin": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/extract-text-webpack-plugin/-/extract-text-webpack-plugin-3.0.2.tgz",
-      "integrity": "sha512-bt/LZ4m5Rqt/Crl2HiKuAl/oqg0psx1tsTLkvWbJen1CtD+fftkZhMaQ9HOtY2gWsl2Wq+sABmMVi9z3DhKWQQ==",
-      "dev": true,
-      "requires": {
-        "async": "2.6.0",
-        "loader-utils": "1.1.0",
-        "schema-utils": "0.3.0",
-        "webpack-sources": "1.1.0"
-      }
-    },
     "fast-deep-equal": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.0.0.tgz",
@@ -2095,12 +2088,6 @@
         "mem": "1.1.0"
       }
     },
-    "os-tmpdir": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
-      "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
-      "dev": true
-    },
     "p-finally": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
@@ -2413,15 +2400,6 @@
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz",
       "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg=="
     },
-    "schema-utils": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.3.0.tgz",
-      "integrity": "sha1-9YdyIs4+kx7a4DnxfrNxbnE3+M8=",
-      "dev": true,
-      "requires": {
-        "ajv": "5.5.1"
-      }
-    },
     "semver": {
       "version": "5.4.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-5.4.1.tgz",
@@ -2587,16 +2565,6 @@
       "integrity": "sha512-xRw4pjF19XKfeTxp+TOTE/MQmRS7tRzm0hhh0dr/nc3NuHBfCBXnfve0ZymF8tZ+J/WM0cqfZ83RxZid2zf7qA==",
       "dev": true
     },
-    "svelte-loader": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/svelte-loader/-/svelte-loader-2.2.1.tgz",
-      "integrity": "sha512-SNdEPwLpoWqKMk5wjJUVd7LUFK9rQoMPxQ8uJoszWSgTpbYICSnxFCEDvhDvcHbmAFSOOXnoJAdvoCTnBw3+kg==",
-      "dev": true,
-      "requires": {
-        "loader-utils": "1.1.0",
-        "tmp": "0.0.31"
-      }
-    },
     "tapable": {
       "version": "0.2.8",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-0.2.8.tgz",
@@ -2610,15 +2578,6 @@
         "setimmediate": "1.0.5"
       }
     },
-    "tmp": {
-      "version": "0.0.31",
-      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.31.tgz",
-      "integrity": "sha1-jzirlDjhcxXl29izZX6L+yd65Kc=",
-      "dev": true,
-      "requires": {
-        "os-tmpdir": "1.0.2"
-      }
-    },
     "to-arraybuffer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sapper",
-  "version": "0.0.9",
+  "version": "0.0.13",
   "description": "Combat-ready apps, engineered by Svelte",
   "main": "connect.js",
   "directories": {
@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "@std/esm": "^0.18.0",
+    "escape-html": "^1.0.3",
     "mkdirp": "^0.5.1",
     "rimraf": "^2.6.2",
     "webpack": "^3.10.0"

runtime/app.js

@@ -1,21 +1,103 @@
+const detach = node => {
+	node.parentNode.removeChild(node);
+};
+
+let component;
+
 const app = {
-	init(callback) {
+	init(target, routes) {
+		function select_route(url) {
+			if (url.origin !== window.location.origin) return null;
+
+			for (const route of routes) {
+				const match = route.pattern.exec(url.pathname);
+				if (match) {
+					const params = route.params(match);
+
+					const query = {};
+					for (const [key, value] of url.searchParams) query[key] = value || true;
+
+					return { route, data: { params, query } };
+				}
+			}
+		}
+
+		function render(Component, data) {
+			Promise.resolve(
+				Component.preload ? Component.preload(data) : {}
+			).then(preloaded => {
+				if (component) {
+					component.destroy();
+				} else {
+					// first load — remove SSR'd <head> contents
+					const start = document.querySelector('#sapper-head-start');
+					let end = document.querySelector('#sapper-head-end');
+
+					if (start && end) {
+						while (start.nextSibling !== end) detach(start.nextSibling);
+						detach(start);
+						detach(end);
+					}
+
+					// preload additional routes
+					routes.reduce((promise, route) => promise.then(route.load), Promise.resolve());
+				}
+
+				component = new Component({
+					target,
+					data: Object.assign(data, preloaded),
+					hydrate: !!component
+				});
+			});
+		}
+
+		function navigate(url) {
+			const selected = select_route(url);
+			if (selected) {
+				selected.route.load().then(mod => {
+					render(mod.default, selected.data);
+				});
+
+				return true;
+			}
+		}
+
+		function findAnchor(node) {
+			while (node && node.nodeName !== 'A') node = node.parentNode;
+			return node;
+		}
+
 		window.addEventListener('click', event => {
-			let a = event.target;
-			while (a && a.nodeName !== 'A') a = a.parentNode;
+			const a = findAnchor(event.target);
 			if (!a) return;
 
-			if (callback(new URL(a.href))) {
+			if (navigate(new URL(a.href))) {
 				event.preventDefault();
 				history.pushState({}, '', a.href);
 			}
 		});
 
+		function preload(event) {
+			const a = findAnchor(event.target);
+			if (!a || a.rel !== 'prefetch') return;
+
+			const selected = select_route(new URL(a.href));
+
+			if (selected) {
+				selected.route.load().then(mod => {
+					if (mod.default.preload) mod.default.preload(selected.data);
+				});
+			}
+		}
+
+		window.addEventListener('touchstart', preload);
+		window.addEventListener('mouseover', preload);
+
 		window.addEventListener('popstate', event => {
-			callback(window.location);
+			navigate(new URL(window.location));
 		});
 
-		callback(window.location);
+		navigate(new URL(window.location));
 	}
 };
 

templates/main.js

@@ -1,47 +1,5 @@
-import app from 'sapper/runtime/app.js';
-import { detachNode } from 'svelte/shared.js';
+import app from '__app__';
 
-const target = document.querySelector('__selector__');
-let component;
-
-app.init(url => {
-	if (url.origin !== window.location.origin) return;
-
-	let match;
-	let params = {};
-	const query = {};
-
-	function render(mod) {
-		const route = { query, params };
-
-		Promise.resolve(
-			mod.default.preload ? mod.default.preload(route) : {}
-		).then(preloaded => {
-			if (component) {
-				component.destroy();
-			} else {
-				// remove SSR'd <head> contents
-				const start = document.querySelector('#sapper-head-start');
-				let end = document.querySelector('#sapper-head-end');
-
-				if (start && end) {
-					while (start.nextSibling !== end) detachNode(start.nextSibling);
-					detachNode(start);
-					detachNode(end);
-				}
-
-				target.innerHTML = '';
-			}
-
-			component = new mod.default({
-				target,
-				data: Object.assign(route, preloaded),
-				hydrate: !!component
-			});
-		});
-	}
-
-	// ROUTES
-
-	return true;
-});
+app.init(document.querySelector('__selector__'), [
+	__routes__
+]);

utils/create_app.js

@@ -9,33 +9,18 @@ module.exports = function create_app(src, dest, routes, options) {
 	const code = routes
 		.filter(route => route.type === 'page')
 		.map(route => {
-			const condition = route.dynamic.length === 0 ?
-				`url.pathname === '/${route.parts.join('/')}'` :
-				`match = ${route.pattern}.exec(url.pathname)`;
+			const params = route.dynamic.length === 0 ?
+				'{}' :
+				`{ ${route.dynamic.map((part, i) => `${part}: match[${i + 1}]`).join(', ') } }`;
 
-			const lines = [];
-
-			route.dynamic.forEach((part, i) => {
-				lines.push(
-					`params.${part} = match[${i + 1}];`
-				);
-			});
-
-			lines.push(
-				`import('${src}/${route.file}').then(render);`
-			);
-
-			return `
-				if (${condition}) {
-					${lines.join(`\n\t\t\t\t\t`)}
-				}
-			`.replace(/^\t{3}/gm, '').trim();
+			return `{ pattern: ${route.pattern}, params: match => (${params}), load: () => import('${src}/${route.file}') }`
 		})
-		.join(' else ') + ' else return false;';
+		.join(',\n\t');
 
 	const main = template
+		.replace('__app__', path.resolve(__dirname, '../runtime/app.js'))
 		.replace('__selector__', options.selector || 'main')
-		.replace('// ROUTES', code);
+		.replace('__routes__', code);
 
 	fs.writeFileSync(path.join(dest, 'main.js'), main);
 };

utils/create_webpack_compiler.js

@@ -30,9 +30,10 @@ module.exports = function create_webpack_compiler(out, routes, dev) {
 	} else {
 		compiler.client_main = new Promise((fulfil, reject) => {
 			client.run((err, stats) => {
+				console.log(stats.toString({ colors: true }));
+
 				if (err || stats.hasErrors()) {
-					console.log(stats.toString({ colors: true }));
-					reject(err);
+					reject(err || stats.toJson().errors[0]);
 				}
 
 				const filename = stats.toJson().assetsByChunkName.main;
@@ -42,10 +43,10 @@ module.exports = function create_webpack_compiler(out, routes, dev) {
 
 		const chunks = new Promise((fulfil, reject) => {
 			server.run((err, stats) => {
+				console.log(stats.toString({ colors: true }));
+
 				if (err || stats.hasErrors()) {
-					// TODO deal with hasErrors
-					console.log(stats.toString({ colors: true }));
-					reject(err);
+					reject(err || stats.toJson().errors[0]);
 				}
 
 				fulfil(stats.toJson().assetsByChunkName);