-> v0.0.8

README.md

@@ -44,13 +44,13 @@ Like Next, routes are defined by the project directory structure, but with some
 
 * Files with an `.html` extension are treated as Svelte components. The `routes/about.html` (or `routes/about/index.html`) would create the `/about` route.
 * Files with a `.js` or `.mjs` extension are more generic route handlers. These files should export functions corresponding to the HTTP methods they support (example below).
-* Instead of route masking, we embed parameters in the filename. For example `post/%id%.html` maps to `/post/:id`, and the component will be rendered with the appropriate parameter.
-* Nested routes (read [this article](https://joshduff.com/2015-06-why-you-need-a-state-router.md)) can be handled by creating a file that matches the subroute — for example, `routes/app/settings/%submenu%.html` would match `/app/settings/profile` *and* `app/settings`, but in the latter case the `submenu` parameter would be `null`.
+* Instead of route masking, we embed parameters in the filename. For example `post/[id].html` maps to `/post/:id`, and the component will be rendered with the appropriate parameter.
+* Nested routes (read [this article](https://joshduff.com/2015-06-why-you-need-a-state-router.md)) can be handled by creating a file that matches the subroute — for example, `routes/app/settings/[submenu].html` would match `/app/settings/profile` *and* `app/settings`, but in the latter case the `submenu` parameter would be `null`.
 
 An example of a generic route:
 
 ```js
-// routes/api/post/%id%.js
+// routes/api/post/[id].js
 export async function get(req, res) {
   try {
     const data = await getPostFromDatabase(req.params.id);
@@ -71,7 +71,7 @@ export async function get(req, res) {
 Or, if you omit the `res` argument, it can use the return value:
 
 ```js
-// routes/api/post/%id%.js
+// routes/api/post/[id].js
 export async function get(req) {
   return await getPostFromDatabase(req.params.id);
 }
@@ -121,10 +121,10 @@ function navigate(url) {
     import('/index.js').then(render);
   } else if (match = /^\/post\/([^\/]+)$/.exec(url.pathname)) {
     params.id = match[1];
-    import('/post/%id%.html').then(render);
+    import('/post/[id].html').then(render);
   } else if (match = /^\/([^\/]+)$/.exec(url.pathname)) {
     params.wildcard = match[1];
-    import('/%wildcard%.html').then(render);
+    import('/[wildcard].html').then(render);
   }
 
   return true;

connect.js

@@ -3,92 +3,109 @@ const esm = require('@std/esm');
 const fs = require('fs');
 const path = require('path');
 const glob = require('glob');
-const tmp = require('tmp');
-const create_matchers = require('./utils/create_matchers.js');
+const rimraf = require('rimraf');
+const mkdirp = require('mkdirp');
+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 { src, dest, dev } = require('./lib/config.js');
 
 const esmRequire = esm(module, {
-	esm: 'all'
+	esm: 'js'
 });
 
-const dir = tmp.dirSync({ unsafeCleanup: true });
-
 module.exports = function connect(opts) {
-	const routes = path.resolve('routes');
-	const out = path.resolve('.sapper');
+	mkdirp(dest);
+	rimraf.sync(path.join(dest, '**/*'));
 
-	let pages = glob.sync('**/*.html', { cwd: routes });
-	let page_matchers = create_matchers(pages);
+	let routes = create_routes(
+		glob.sync('**/*.+(html|js|mjs)', { cwd: src })
+	);
 
-	let server_routes = glob.sync('**/*.+(js|mjs)', { cwd: routes });
-	let server_route_matchers = create_matchers(server_routes);
-
-	// create_app(routes, dir.name, page_matchers, opts.dev);
-	create_app(routes, out, page_matchers, opts.dev);
+	create_app(src, dest, routes, opts);
 
 	const webpack_compiler = create_webpack_compiler(
-		path.join(out, 'main.js'),
-		path.resolve('.sapper/webpack'),
-		opts.dev
+		dest,
+		routes,
+		dev
 	);
 
+	const templates = create_templates();
+
 	return async function(req, res, next) {
 		const url = req.url.replace(/\?.+/, '');
 
-		if (url.startsWith('/webpack/')) {
-			fs.createReadStream(path.resolve('.sapper' + url)).pipe(res);
+		if (url.startsWith('/client/')) {
+			res.set({
+				'Content-Type': 'application/javascript'
+			});
+			fs.createReadStream(`${dest}${url}`).pipe(res);
 			return;
 		}
 
-		for (let i = 0; i < page_matchers.length; i += 1) {
-			const matcher = page_matchers[i];
-			if (matcher.test(url)) {
-				const params = matcher.exec(url);
-				const Component = require(`${routes}/${matcher.file}`);
+		// whatever happens, we're going to serve some HTML
+		res.set({
+			'Content-Type': 'text/html'
+		});
 
-				const app = await webpack_compiler.app;
+		try {
+			for (const route of routes) {
+				if (route.test(url)) {
+					req.params = route.exec(url);
 
-				const page = opts.template({
-					app,
-					html: Component.render({
-						params,
-						query: req.query
-					})
-				});
+					const chunk = await webpack_compiler.get_chunk(route.id);
+					const mod = require(chunk);
 
-				res.end(page);
-				return;
-			}
-		}
+					if (route.type === 'page') {
+						const main = await webpack_compiler.client_main;
 
-		for (let i = 0; i < server_route_matchers.length; i += 1) {
-			const matcher = server_route_matchers[i];
-			if (matcher.test(url)) {
-				req.params = matcher.exec(url);
-				const route = esmRequire(`${routes}/${matcher.file}`);
+						let data = { params: req.params, query: req.query };
+						if (mod.default.preload) data = Object.assign(data, await mod.default.preload(data));
 
-				const handler = route[req.method.toLowerCase()];
-				if (handler) {
-					if (handler.length === 2) {
-						handler(req, res);
-					} else {
-						const data = await handler(req);
+						const { html, head, css } = mod.default.render(data);
 
-						// TODO headers, error handling
-						if (typeof data === 'string') {
-							res.end(data);
-						} else {
-							res.end(JSON.stringify(data));
+						const page = templates.render(200, {
+							main,
+							html,
+							head: `<noscript id='sapper-head-start'></noscript>${head}<noscript id='sapper-head-end'></noscript>`,
+							styles: (css && css.code ? `<style>${css.code}</style>` : '')
+						});
+
+						res.status(200);
+						res.end(page);
+					}
+
+					else {
+						const handler = mod[req.method.toLowerCase()];
+						if (handler) {
+							if (handler.length === 2) {
+								handler(req, res);
+							} else {
+								const data = await handler(req);
+
+								// TODO headers, error handling
+								if (typeof data === 'string') {
+									res.end(data);
+								} else {
+									res.end(JSON.stringify(data));
+								}
+							}
 						}
 					}
 
 					return;
 				}
 			}
+
+			res.status(404).end(templates.render(404, {
+				status: 404,
+				url
+			}));
+		} catch(err) {
+			// TODO nice error pages
+			res.status(500);
+			res.end(err.stack);
 		}
-
-		next();
 	};
-};
-
+};

lib/config.js

@@ -0,0 +1,12 @@
+const path = require('path');
+
+exports.dev = process.env.NODE_ENV !== 'production';
+
+exports.templates = path.resolve(process.env.SAPPER_TEMPLATES || 'templates');
+
+exports.src = path.resolve(process.env.SAPPER_ROUTES || 'routes');
+
+exports.dest = path.resolve(
+	process.env.NOW ? '/tmp' :
+	process.env.SAPPER_DEST || '.sapper'
+);

lib/route_manager.js

@@ -0,0 +1,16 @@
+const glob = require('glob');
+const create_routes = require('../utils/create_routes.js');
+const { src } = require('./config.js');
+
+const route_manager = {
+	routes: create_routes(
+		glob.sync('**/*.+(html|js|mjs)', { cwd: src })
+	),
+
+	onchange(fn) {
+		// TODO in dev mode, keep this updated, and allow
+		// webpack compiler etc to hook into it
+	}
+};
+
+module.exports = route_manager;

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "sapper",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -674,6 +674,7 @@
       "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",
@@ -732,8 +733,7 @@
     "fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
-      "dev": true
+      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
     },
     "fsevents": {
       "version": "1.1.3",
@@ -1538,7 +1538,6 @@
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
       "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
-      "dev": true,
       "requires": {
         "fs.realpath": "1.0.0",
         "inflight": "1.0.6",
@@ -1638,7 +1637,6 @@
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
       "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
-      "dev": true,
       "requires": {
         "once": "1.4.0",
         "wrappy": "1.0.2"
@@ -2078,7 +2076,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
       "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
-      "dev": true,
       "requires": {
         "wrappy": "1.0.2"
       }
@@ -2101,7 +2098,8 @@
     "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="
+      "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
+      "dev": true
     },
     "p-finally": {
       "version": "1.0.0",
@@ -2393,6 +2391,14 @@
         "align-text": "0.1.4"
       }
     },
+    "rimraf": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.2.tgz",
+      "integrity": "sha512-lreewLK/BlghmxtfH36YYVg1i8IAce4TI7oao75I1g245+6BctqTVQiBP3YUJ9C6DQOXJmkYR9X9fCLtCOJc5w==",
+      "requires": {
+        "glob": "7.1.2"
+      }
+    },
     "ripemd160": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/ripemd160/-/ripemd160-2.0.1.tgz",
@@ -2411,6 +2417,7 @@
       "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"
       }
@@ -2468,9 +2475,9 @@
       "integrity": "sha512-I2UmuJSRr/T8jisiROLU3A3ltr+swpniSmNPI4Ml3ZCX6tVnDsuZzK7F2hl5jTqbZBWCEKlj5HRQiPExXLgE8A=="
     },
     "source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
     },
     "spdx-correct": {
       "version": "1.0.2",
@@ -2575,11 +2582,21 @@
       }
     },
     "svelte": {
-      "version": "1.47.0",
-      "resolved": "https://registry.npmjs.org/svelte/-/svelte-1.47.0.tgz",
-      "integrity": "sha512-+RrPJXW3BDbbfSWFd2G2kAtUJs3cre0b4bWWe4mIkqprzL0FqVNBgWoSQNKmDngbCDbeXXvYC6ldkPp8bNXlRA==",
+      "version": "1.47.1",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-1.47.1.tgz",
+      "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",
@@ -2594,9 +2611,10 @@
       }
     },
     "tmp": {
-      "version": "0.0.33",
-      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
-      "integrity": "sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==",
+      "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"
       }
@@ -2621,11 +2639,6 @@
         "yargs": "3.10.0"
       },
       "dependencies": {
-        "source-map": {
-          "version": "0.5.7",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
-        },
         "yargs": {
           "version": "3.10.0",
           "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.10.0.tgz",
@@ -2653,13 +2666,6 @@
         "source-map": "0.5.7",
         "uglify-js": "2.8.29",
         "webpack-sources": "1.1.0"
-      },
-      "dependencies": {
-        "source-map": {
-          "version": "0.5.7",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
-        }
       }
     },
     "url": {
@@ -2752,13 +2758,6 @@
         "watchpack": "1.4.0",
         "webpack-sources": "1.1.0",
         "yargs": "8.0.2"
-      },
-      "dependencies": {
-        "source-map": {
-          "version": "0.5.7",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
-        }
       }
     },
     "webpack-sources": {
@@ -2768,6 +2767,13 @@
       "requires": {
         "source-list-map": "2.0.0",
         "source-map": "0.6.1"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        }
       }
     },
     "which": {
@@ -2817,8 +2823,7 @@
     "wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
-      "dev": true
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
     },
     "xtend": {
       "version": "4.0.1",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sapper",
-  "version": "0.0.3",
+  "version": "0.0.8",
   "description": "Combat-ready apps, engineered by Svelte",
   "main": "connect.js",
   "directories": {
@@ -8,14 +8,17 @@
   },
   "dependencies": {
     "@std/esm": "^0.18.0",
-    "extract-text-webpack-plugin": "^3.0.2",
-    "tmp": "0.0.33",
+    "mkdirp": "^0.5.1",
+    "rimraf": "^2.6.2",
     "webpack": "^3.10.0"
   },
   "devDependencies": {
     "mocha": "^4.0.1",
     "svelte": "^1.47.1"
   },
+  "peerDependencies": {
+    "svelte": "^1.47.1"
+  },
   "scripts": {
     "test": "mocha --opts mocha.opts"
   },

runtime/app.js

@@ -0,0 +1,22 @@
+const app = {
+	init(callback) {
+		window.addEventListener('click', event => {
+			let a = event.target;
+			while (a && a.nodeName !== 'A') a = a.parentNode;
+			if (!a) return;
+
+			if (callback(new URL(a.href))) {
+				event.preventDefault();
+				history.pushState({}, '', a.href);
+			}
+		});
+
+		window.addEventListener('popstate', event => {
+			callback(window.location);
+		});
+
+		callback(window.location);
+	}
+};
+
+export default app;

templates/main.js

@@ -1,15 +1,10 @@
-window.addEventListener('click', event => {
-	let a = event.target;
-	while (a && a.nodeName !== 'A') a = a.parentNode;
-	if (!a) return;
+import app from 'sapper/runtime/app.js';
+import { detachNode } from 'svelte/shared.js';
 
-	if (navigate(new URL(a.href))) event.preventDefault();
-});
-
-const target = document.querySelector('main');
+const target = document.querySelector('__selector__');
 let component;
 
-function navigate(url) {
+app.init(url => {
 	if (url.origin !== window.location.origin) return;
 
 	let match;
@@ -17,22 +12,36 @@ function navigate(url) {
 	const query = {};
 
 	function render(mod) {
-		if (component) {
-			component.destroy();
-		} else {
-			target.innerHTML = '';
-		}
+		const route = { query, params };
 
-		component = new mod.default({
-			target,
-			data: { query, params },
-			hydrate: !!component
+		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;
-}
-
-navigate(window.location);
+});

utils/create_app.js

@@ -1,28 +1,41 @@
 const fs = require('fs');
 const path = require('path');
-const tmp = require('tmp');
 
 const template = fs.readFileSync(path.resolve(__dirname, '../templates/main.js'), 'utf-8');
 
-module.exports = function create_app(routes, dest, matchers, dev) {
+module.exports = function create_app(src, dest, routes, options) {
 	// TODO in dev mode, watch files
 
-	const code = matchers
-		.map(matcher => {
-			const condition = matcher.dynamic.length === 0 ?
-				`url.pathname === '/${matcher.parts.join('/')}'` :
-				`${matcher.pattern}.test(url.pathname)`;
+	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 lines = [];
+
+			route.dynamic.forEach((part, i) => {
+				lines.push(
+					`params.${part} = match[${i + 1}];`
+				);
+			});
+
+			lines.push(
+				`import('${src}/${route.file}').then(render);`
+			);
 
 			return `
 				if (${condition}) {
-					// TODO set params, if applicable
-					import('${routes}/${matcher.file}').then(render);
+					${lines.join(`\n\t\t\t\t\t`)}
 				}
 			`.replace(/^\t{3}/gm, '').trim();
 		})
-		.join(' else ');
+		.join(' else ') + ' else return false;';
 
-	const main = template.replace('// ROUTES', code);
+	const main = template
+		.replace('__selector__', options.selector || 'main')
+		.replace('// ROUTES', code);
 
 	fs.writeFileSync(path.join(dest, 'main.js'), main);
 };

utils/create_routes.js

@@ -3,15 +3,19 @@ const path = require('path');
 module.exports = function create_matchers(files) {
 	return files
 		.map(file => {
+			if (/(^|\/|\\)_/.test(file)) return;
+
 			const parts = file.replace(/\.(html|js|mjs)$/, '').split(path.sep);
 			if (parts[parts.length - 1] === 'index') parts.pop();
 
+			const id = parts.join('_').replace(/[[\]]/g, '$') || '_';
+
 			const dynamic = parts
-				.filter(part => part[0] === '%')
+				.filter(part => part[0] === '[')
 				.map(part => part.slice(1, -1));
 
 			const pattern = new RegExp(
-				`^\\/${parts.map(p => p[0] === '%' ? '([^/]+)' : p).join('\\/')}$`
+				`^\\/${parts.map(p => p[0] === '[' ? '([^/]+)' : p).join('\\/')}$`
 			);
 
 			const test = url => pattern.test(url);
@@ -29,6 +33,8 @@ module.exports = function create_matchers(files) {
 			};
 
 			return {
+				id,
+				type: path.extname(file) === '.html' ? 'page' : 'route',
 				file,
 				pattern,
 				test,
@@ -37,6 +43,7 @@ module.exports = function create_matchers(files) {
 				dynamic
 			};
 		})
+		.filter(Boolean)
 		.sort((a, b) => {
 			return (
 				(a.dynamic.length - b.dynamic.length) || // match static paths first

utils/create_routes.test.js

@@ -5,21 +5,21 @@ const create_matchers = require('./create_matchers.js');
 
 describe('create_matchers', () => {
 	it('sorts routes correctly', () => {
-		const matchers = create_matchers(['index.html', 'about.html', '%wildcard%.html', 'post/%id%.html']);
+		const matchers = create_matchers(['index.html', 'about.html', '[wildcard].html', 'post/[id].html']);
 
 		assert.deepEqual(
 			matchers.map(m => m.file),
 			[
 				'about.html',
 				'index.html',
-				'post/%id%.html',
-				'%wildcard%.html'
+				'post/[id].html',
+				'[wildcard].html'
 			]
 		);
 	});
 
 	it('generates params', () => {
-		const matchers = create_matchers(['index.html', 'about.html', '%wildcard%.html', 'post/%id%.html']);
+		const matchers = create_matchers(['index.html', 'about.html', '[wildcard].html', 'post/[id].html']);
 
 		let file;
 		let params;
@@ -31,9 +31,21 @@ describe('create_matchers', () => {
 			}
 		}
 
-		assert.equal(file, 'post/%id%.html');
+		assert.equal(file, 'post/[id].html');
 		assert.deepEqual(params, {
 			id: '123'
 		});
 	});
+
+	it('ignores files and directories with leading underscores', () => {
+		const matches = create_matchers(['index.html', '_foo.html', 'a/_b/c/d.html', 'e/f/g/h.html', 'i/_j.html']);
+
+		assert.deepEqual(
+			matches.map(m => m.file),
+			[
+				'e/f/g/h.html',
+				'index.html'
+			]
+		);
+	});
 });

utils/create_templates.js

@@ -0,0 +1,42 @@
+const fs = require('fs');
+const glob = require('glob');
+
+module.exports = function create_templates() {
+	const templates = glob.sync('*.html', { cwd: 'templates' })
+		.map(file => {
+			const template = fs.readFileSync(`templates/${file}`, 'utf-8');
+			const status = file.replace('.html', '').toLowerCase();
+
+			if (!/^[0-9x]{3}$/.test(status)) {
+				throw new Error(`Bad template — should be a valid status code like 404.html, or a wildcard like 2xx.html`);
+			}
+
+			const specificity = (
+				(status[0] === 'x' ? 0 : 4) +
+				(status[1] === 'x' ? 0 : 2) +
+				(status[2] === 'x' ? 0 : 1)
+			);
+
+			const pattern = new RegExp(`^${status.split('').map(d => d === 'x' ? '\\d' : d).join('')}$`);
+
+			return {
+				test: status => pattern.test(status),
+				specificity,
+				render(data) {
+					return template.replace(/%sapper\.(\w+)%/g, (match, key) => {
+						return key in data ? data[key] : '';
+					});
+				}
+			}
+		})
+		.sort((a, b) => b.specificity - a.specificity);
+
+	return {
+		render: (status, data) => {
+			const template = templates.find(template => template.test(status));
+			if (template) return template.render(data);
+
+			return `Missing template for status code ${status}`;
+		}
+	};
+};

utils/create_webpack_compiler.js

@@ -1,80 +1,61 @@
 const fs = require('fs');
+const path = require('path');
 const webpack = require('webpack');
-const ExtractTextPlugin = require("extract-text-webpack-plugin");
-const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
 
-// TODO make the webpack config, err, configurable
-
-module.exports = function create_webpack_compiler(main, dest, dev) {
+module.exports = function create_webpack_compiler(out, routes, dev) {
 	const compiler = {};
 
-	const _ = webpack({
-		entry: {
-			main
-		},
-		resolve: {
-			extensions: ['.js', '.html']
-		},
-		output: {
-			path: dest,
-			filename: '[name].[hash].js',
-			chunkFilename: '[name].[id].js',
-			publicPath: '/webpack/'
-		},
-		module: {
-			rules: [
-				{
-					test: /\.html$/,
-					exclude: /node_modules/,
-					use: {
-						loader: 'svelte-loader',
-						options: {
-							emitCss: true,
-							cascade: false,
-							store: true
-						}
-					}
-				},
-				{
-					test: /\.css$/,
-					use: ExtractTextPlugin.extract({
-						fallback: 'style-loader',
-						use: [{ loader: 'css-loader', options: { sourceMap: dev } }]
-					})
-				}
-			]
-		},
-		plugins: [
-			new ExtractTextPlugin('main.css'),
-			!dev && new webpack.optimize.ModuleConcatenationPlugin(),
-			!dev && new UglifyJSPlugin()
-		].filter(Boolean),
-		devtool: dev ? 'inline-source-map' : false
-	});
+	const client = webpack(
+		require(path.resolve('webpack.client.config.js'))
+	);
+
+	const server = webpack(
+		require(path.resolve('webpack.server.config.js'))
+	);
 
 	if (false) { // TODO watch in dev
-		// TODO how can we invalidate compiler.app when watcher restarts?
-		compiler.app = new Promise((fulfil, reject) => {
-			_.watch({}, (err, stats) => {
+		// TODO how can we invalidate compiler.client_main when watcher restarts?
+		compiler.client_main = new Promise((fulfil, reject) => {
+			client.watch({}, (err, stats) => {
 				if (err || stats.hasErrors()) {
 					// TODO handle errors
 				}
 
 				const filename = stats.toJson().assetsByChunkName.main;
-				fulfil(`/webpack/${filename}`);
+				fulfil(`/client/${filename}`);
 			});
 		});
+
+		// TODO server
 	} else {
-		compiler.app = new Promise((fulfil, reject) => {
-			_.run((err, stats) => {
+		compiler.client_main = new Promise((fulfil, reject) => {
+			client.run((err, stats) => {
 				if (err || stats.hasErrors()) {
-					// TODO handle errors
+					console.log(stats.toString({ colors: true }));
+					reject(err);
 				}
 
 				const filename = stats.toJson().assetsByChunkName.main;
-				fulfil(`/webpack/${filename}`);
+				fulfil(`/client/${filename}`);
 			});
 		});
+
+		const chunks = new Promise((fulfil, reject) => {
+			server.run((err, stats) => {
+				if (err || stats.hasErrors()) {
+					// TODO deal with hasErrors
+					console.log(stats.toString({ colors: true }));
+					reject(err);
+				}
+
+				fulfil(stats.toJson().assetsByChunkName);
+			});
+		});
+
+		compiler.get_chunk = async id => {
+			const assetsByChunkName = await chunks;
+			return path.resolve(out, 'server', assetsByChunkName[id]);
+		};
 	}
 
 	return compiler;

webpack/config.js

@@ -0,0 +1,43 @@
+const path = require('path');
+const route_manager = require('../lib/route_manager.js');
+const { src, dest, dev } = require('../lib/config.js');
+
+module.exports = {
+	dev,
+
+	client: {
+		entry: () => {
+			return {
+				main: `${dest}/main.js`
+			};
+		},
+
+		output: () => {
+			return {
+				path: `${dest}/client`,
+				filename: '[name].[hash].js',
+				chunkFilename: '[name].[id].js',
+				publicPath: '/client/'
+			};
+		}
+	},
+
+	server: {
+		entry: () => {
+			const entries = {};
+			route_manager.routes.forEach(route => {
+				entries[route.id] = path.resolve(src, route.file);
+			});
+			return entries;
+		},
+
+		output: () => {
+			return {
+				path: `${dest}/server`,
+				filename: '[name].[hash].js',
+				chunkFilename: '[name].[id].js',
+				libraryTarget: 'commonjs2'
+			};
+		}
+	}
+};

yarn.lock

@@ -35,7 +35,7 @@ ajv@^4.9.1:
     co "^4.6.0"
     json-stable-stringify "^1.0.1"
 
-ajv@^5.0.0, ajv@^5.1.5:
+ajv@^5.1.5:
   version "5.5.1"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.5.1.tgz#b38bb8876d9e86bee994956a04e721e88b248eb2"
   dependencies:
@@ -122,7 +122,7 @@ async-each@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
 
-async@^2.1.2, async@^2.4.1:
+async@^2.1.2:
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/async/-/async-2.6.0.tgz#61a29abb6fcc026fea77e56d1c6ec53a795951f4"
   dependencies:
@@ -669,15 +669,6 @@ extglob@^0.3.1:
   dependencies:
     is-extglob "^1.0.0"
 
-extract-text-webpack-plugin@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/extract-text-webpack-plugin/-/extract-text-webpack-plugin-3.0.2.tgz#5f043eaa02f9750a9258b78c0a6e0dc1408fb2f7"
-  dependencies:
-    async "^2.4.1"
-    loader-utils "^1.1.0"
-    schema-utils "^0.3.0"
-    webpack-sources "^1.0.1"
-
 extsprintf@1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
@@ -1378,7 +1369,7 @@ os-locale@^2.0.0:
     lcid "^1.0.0"
     mem "^1.1.0"
 
-os-tmpdir@^1.0.0, os-tmpdir@~1.0.2:
+os-tmpdir@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
 
@@ -1646,7 +1637,7 @@ right-align@^0.1.1:
   dependencies:
     align-text "^0.1.1"
 
-rimraf@2, rimraf@^2.5.1, rimraf@^2.6.1:
+rimraf@2, rimraf@^2.5.1, rimraf@^2.6.1, rimraf@^2.6.2:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.2.tgz#2ed8150d24a16ea8651e6d6ef0f47c4158ce7a36"
   dependencies:
@@ -1663,12 +1654,6 @@ safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@~5.1.0,
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853"
 
-schema-utils@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.3.0.tgz#f5877222ce3e931edae039f17eb3716e7137f8cf"
-  dependencies:
-    ajv "^5.0.0"
-
 "semver@2 || 3 || 4 || 5", semver@^5.3.0:
   version "5.4.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.4.1.tgz#e059c09d8571f0540823733433505d3a2f00b18e"
@@ -1865,12 +1850,6 @@ timers-browserify@^2.0.4:
   dependencies:
     setimmediate "^1.0.4"
 
-tmp@0.0.33:
-  version "0.0.33"
-  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
-  dependencies:
-    os-tmpdir "~1.0.2"
-
 to-arraybuffer@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"