Merge pull request #101 from sveltejs/restructure

Restructure codebase

src/cli/index.ts

@@ -0,0 +1,28 @@
+import { build, export as exporter } from 'sapper/core.js';
+import { dest, dev, entry, src } from '../config';
+
+const cmd = process.argv[2];
+const start = Date.now();
+
+if (cmd === 'build') {
+	build({ dest, dev, entry, src })
+		.then(() => {
+			const elapsed = Date.now() - start;
+			console.error(`built in ${elapsed}ms`); // TODO beautify this, e.g. 'built in 4.7 seconds'
+		})
+		.catch(err => {
+			console.error(err ? err.details || err.stack || err.message || err : 'Unknown error');
+		});
+} else if (cmd === 'export') {
+	const start = Date.now();
+
+	build({ dest, dev, entry, src })
+		.then(() => exporter({ src, dest }))
+		.then(() => {
+			const elapsed = Date.now() - start;
+			console.error(`extracted in ${elapsed}ms`); // TODO beautify this, e.g. 'built in 4.7 seconds'
+		})
+		.catch(err => {
+			console.error(err ? err.details || err.stack || err.message || err : 'Unknown error');
+		});
+}

src/config.ts

@@ -0,0 +1,12 @@
+import * as path from 'path';
+
+export const dev = process.env.NODE_ENV !== 'production';
+
+export const templates = path.resolve(process.env.SAPPER_TEMPLATES || 'templates');
+export const src = path.resolve(process.env.SAPPER_ROUTES || 'routes');
+export const dest = path.resolve(process.env.SAPPER_DEST || '.sapper');
+
+export const entry = {
+	client: path.resolve(templates, '.main.rendered.js'),
+	server: path.resolve(dest, 'server-entry.js')
+};

src/core/build.ts

@@ -0,0 +1,62 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import mkdirp from 'mkdirp';
+import rimraf from 'rimraf';
+import create_compilers from './create_compilers.js';
+import create_app from './create_app.js';
+import create_assets from './create_assets.js';
+
+export default function build({
+	src,
+	dest,
+	dev,
+	entry
+}: {
+	src: string;
+	dest: string;
+	dev: boolean;
+	entry: { client: string, server: string }
+}) {
+	mkdirp.sync(dest);
+	rimraf.sync(path.join(dest, '**/*'));
+
+	// create main.js and server-routes.js
+	create_app({ dev, entry, src });
+
+	return new Promise((fulfil, reject) => {
+		function handleErrors(err, stats) {
+			if (err) {
+				reject(err);
+				process.exit(1);
+			}
+
+			if (stats.hasErrors()) {
+				console.error(stats.toString({ colors: true }));
+				reject(new Error(`Encountered errors while building app`));
+			}
+		}
+
+		const { client, server } = create_compilers();
+
+		client.run((err, client_stats) => {
+			handleErrors(err, client_stats);
+			const client_info = client_stats.toJson();
+			fs.writeFileSync(
+				path.join(dest, 'stats.client.json'),
+				JSON.stringify(client_info, null, '  ')
+			);
+
+			server.run((err, server_stats) => {
+				handleErrors(err, server_stats);
+				const server_info = server_stats.toJson();
+				fs.writeFileSync(
+					path.join(dest, 'stats.server.json'),
+					JSON.stringify(server_info, null, '  ')
+				);
+
+				create_assets({ src, dest, dev, client_info, server_info });
+				fulfil();
+			});
+		});
+	});
+}

src/core/create_app.ts

@@ -0,0 +1,90 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import create_routes from './create_routes';
+
+function posixify(file: string) {
+	return file.replace(/[/\\]/g, '/');
+}
+
+function fudge_mtime(file: string) {
+	// need to fudge the mtime so that webpack doesn't go doolally
+	const { atime, mtime } = fs.statSync(file);
+	fs.utimesSync(
+		file,
+		new Date(atime.getTime() - 999999),
+		new Date(mtime.getTime() - 999999)
+	);
+}
+
+function create_app({
+	src,
+	dev,
+	entry
+}: {
+	src: string;
+	dev: boolean;
+	entry: { client: string; server: string };
+}) {
+	const routes = create_routes({ src });
+
+	function create_client_main() {
+		const code = `[${routes
+			.filter(route => route.type === 'page')
+			.map(route => {
+				const params =
+					route.dynamic.length === 0
+						? '{}'
+						: `{ ${route.dynamic
+								.map((part, i) => `${part}: match[${i + 1}]`)
+								.join(', ')} }`;
+
+				const file = posixify(`${src}/${route.file}`);
+				return `{ pattern: ${
+					route.pattern
+				}, params: match => (${params}), load: () => import(/* webpackChunkName: "${
+					route.id
+				}" */ '${file}') }`;
+			})
+			.join(', ')}]`;
+
+		let main = fs
+			.readFileSync('templates/main.js', 'utf-8')
+			.replace(
+				/__app__/g,
+				posixify(path.resolve(__dirname, '../../runtime/app.js'))
+			)
+			.replace(/__routes__/g, code)
+			.replace(/__dev__/g, String(dev));
+
+		if (dev) {
+			const hmr_client = posixify(
+				require.resolve(`webpack-hot-middleware/client`)
+			);
+			main += `\n\nimport('${hmr_client}?path=/__webpack_hmr&timeout=20000'); if (module.hot) module.hot.accept();`;
+		}
+
+		fs.writeFileSync(entry.client, main);
+		fudge_mtime(entry.client);
+	}
+
+	function create_server_routes() {
+		const imports = routes
+			.map(route => {
+				const file = posixify(`${src}/${route.file}`);
+				return route.type === 'page'
+					? `import ${route.id} from '${file}';`
+					: `import * as ${route.id} from '${file}';`;
+			})
+			.join('\n');
+
+		const exports = `export { ${routes.map(route => route.id)} };`;
+
+		fs.writeFileSync(entry.server, `${imports}\n\n${exports}`);
+		fudge_mtime(entry.server);
+	}
+
+	create_client_main();
+	create_server_routes();
+}
+
+export default create_app;

src/core/create_assets.ts

@@ -0,0 +1,87 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import glob from 'glob';
+import { create_templates, render } from './templates';
+import create_routes from './create_routes';
+
+function ensure_array(thing) {
+	return Array.isArray(thing) ? thing : [thing]; // omg webpack what the HELL are you doing
+}
+
+export default function create_assets({ src, dest, dev, client_info, server_info }) {
+	create_templates(); // TODO refactor this...
+
+	const main_file = `/client/${ensure_array(client_info.assetsByChunkName.main)[0]}`;
+
+	const chunk_files = client_info.assets.map(chunk => `/client/${chunk.name}`);
+
+	const service_worker = generate_service_worker({ chunk_files, src });
+	const index = generate_index(main_file);
+
+	const routes = create_routes({ src });
+
+	if (dev) { // TODO move this into calling code
+		fs.writeFileSync(path.join(dest, 'service-worker.js'), service_worker);
+		fs.writeFileSync(path.join(dest, 'index.html'), index);
+	}
+
+	return {
+		client: {
+			main_file,
+			chunk_files,
+
+			main: read(`${dest}${main_file}`),
+			chunks: chunk_files.reduce((lookup, file) => {
+				lookup[file] = read(`${dest}${file}`);
+				return lookup;
+			}, {}),
+
+			// TODO confusing that `routes` refers to an array *and* a lookup
+			routes: routes.reduce((lookup, route) => {
+				lookup[route.id] = `/client/${ensure_array(client_info.assetsByChunkName[route.id])[0]}`;
+				return lookup;
+			}, {}),
+
+			index,
+			service_worker
+		},
+
+		server: {
+			entry: path.resolve(dest, 'server', server_info.assetsByChunkName.main)
+		},
+
+		service_worker
+	};
+}
+
+function generate_service_worker({ chunk_files, src }) {
+	const assets = glob.sync('**', { cwd: 'assets', nodir: true });
+
+	const routes = create_routes({ src });
+
+	const route_code = `[${
+		routes
+			.filter(route => route.type === 'page')
+			.map(route => `{ pattern: ${route.pattern} }`)
+			.join(', ')
+	}]`;
+
+	return read('templates/service-worker.js')
+		.replace(/__timestamp__/g, Date.now())
+		.replace(/__assets__/g, JSON.stringify(assets))
+		.replace(/__shell__/g, JSON.stringify(chunk_files.concat('/index.html')))
+		.replace(/__routes__/g, route_code);
+}
+
+function generate_index(main_file) {
+	return render(200, {
+		styles: '',
+		head: '',
+		html: '<noscript>Please enable JavaScript!</noscript>',
+		main: main_file
+	});
+}
+
+function read(file) {
+	return fs.readFileSync(file, 'utf-8');
+}

src/core/create_compilers.ts

@@ -0,0 +1,16 @@
+import * as path from 'path';
+import relative from 'require-relative';
+
+export default function create_compilers() {
+	const webpack = relative('webpack', process.cwd());
+
+	return {
+		client: webpack(
+			require(path.resolve('webpack.client.config.js'))
+		),
+
+		server: webpack(
+			require(path.resolve('webpack.server.config.js'))
+		)
+	};
+}

src/core/create_routes.ts

@@ -0,0 +1,91 @@
+import * as path from 'path';
+import glob from 'glob';
+
+export default function create_routes({ src, files = glob.sync('**/*.+(html|js|mjs)', { cwd: src }) }) {
+	const routes = files
+		.map(file => {
+			if (/(^|\/|\\)_/.test(file)) return;
+
+			const parts = file.replace(/\.(html|js|mjs)$/, '').split('/'); // glob output is always posix-style
+			if (parts[parts.length - 1] === 'index') parts.pop();
+
+			const id = (
+				parts.join('_').replace(/[[\]]/g, '$').replace(/^\d/, '_$&').replace(/[^a-zA-Z0-9_$]/g, '_')
+			 ) || '_';
+
+			const dynamic = parts
+				.filter(part => part[0] === '[')
+				.map(part => part.slice(1, -1));
+
+			let pattern_string = '';
+			let i = parts.length;
+			let nested = true;
+			while (i--) {
+				const part = parts[i];
+				const dynamic = part[0] === '[';
+
+				if (dynamic) {
+					pattern_string = nested ? `(?:\\/([^/]+)${pattern_string})?` : `\\/([^/]+)${pattern_string}`;
+				} else {
+					nested = false;
+					pattern_string = `\\/${part}${pattern_string}`;
+				}
+			}
+
+			const pattern = new RegExp(`^${pattern_string}\\/?$`);
+
+			const test = url => pattern.test(url);
+
+			const exec = url => {
+				const match = pattern.exec(url);
+				if (!match) return;
+
+				const params = {};
+				dynamic.forEach((param, i) => {
+					params[param] = match[i + 1];
+				});
+
+				return params;
+			};
+
+			return {
+				id,
+				type: path.extname(file) === '.html' ? 'page' : 'route',
+				file,
+				pattern,
+				test,
+				exec,
+				parts,
+				dynamic
+			};
+		})
+		.filter(Boolean)
+		.sort((a, b) => {
+			let same = true;
+
+			for (let i = 0; true; i += 1) {
+				const a_part = a.parts[i];
+				const b_part = b.parts[i];
+
+				if (!a_part && !b_part) {
+					if (same) throw new Error(`The ${a.file} and ${b.file} routes clash`);
+					return 0;
+				}
+
+				if (!a_part) return -1;
+				if (!b_part) return 1;
+
+				const a_is_dynamic = a_part[0] === '[';
+				const b_is_dynamic = b_part[0] === '[';
+
+				if (a_is_dynamic === b_is_dynamic) {
+					if (!a_is_dynamic && a_part !== b_part) same = false;
+					continue;
+				}
+
+				return a_is_dynamic ? 1 : -1;
+			}
+		});
+
+	return routes;
+}

src/core/export.ts

@@ -0,0 +1,101 @@
+import * as path from 'path';
+import * as sander from 'sander';
+import express from 'express';
+import cheerio from 'cheerio';
+import fetch from 'node-fetch';
+import URL from 'url-parse';
+import create_assets from './create_assets.js';
+// import middleware from '../middleware/index.js';
+
+const { PORT = 3000, OUTPUT_DIR = 'dist' } = process.env;
+
+const origin = `http://localhost:${PORT}`;
+
+const app = express();
+
+function read_json(file) {
+	return JSON.parse(sander.readFileSync(file, { encoding: 'utf-8' }));
+}
+
+export default function exporter({ src, dest }) { // TODO dest is a terrible name in this context
+	// Prep output directory
+	sander.rimrafSync(OUTPUT_DIR);
+
+	const { service_worker } = create_assets({
+		src, dest,
+		dev: false,
+		client_info: read_json(path.join(dest, 'stats.client.json')),
+		server_info: read_json(path.join(dest, 'stats.server.json'))
+	});
+
+	sander.copydirSync('assets').to(OUTPUT_DIR);
+	sander.copydirSync(dest, 'client').to(OUTPUT_DIR, 'client');
+	sander.writeFileSync(OUTPUT_DIR, 'service-worker.js', service_worker);
+
+	// Intercept server route fetches
+	function save(res) {
+		res = res.clone();
+
+		return res.text().then(body => {
+			const { pathname } = new URL(res.url);
+			let dest = OUTPUT_DIR + pathname;
+
+			const type = res.headers.get('Content-Type');
+			if (type.startsWith('text/html')) dest += '/index.html';
+
+			sander.writeFileSync(dest, body);
+
+			return body;
+		});
+	}
+
+	global.fetch = (url, opts) => {
+		if (url[0] === '/') {
+			url = `http://localhost:${PORT}${url}`;
+
+			return fetch(url, opts)
+				.then(r => {
+					save(r);
+					return r;
+				});
+		}
+
+		return fetch(url, opts);
+	};
+
+	app.use(require('./middleware')()); // TODO this is filthy
+	const server = app.listen(PORT);
+
+	const seen = new Set();
+
+	function handle(url) {
+		if (url.origin !== origin) return;
+
+		if (seen.has(url.pathname)) return;
+		seen.add(url.pathname);
+
+		return fetch(url.href)
+			.then(r => {
+				save(r);
+				return r.text();
+			})
+			.then(body => {
+				const $ = cheerio.load(body);
+				const hrefs = [];
+
+				$('a[href]').each((i, $a) => {
+					hrefs.push($a.attribs.href);
+				});
+
+				return hrefs.reduce((promise, href) => {
+					return promise.then(() => handle(new URL(href, url.href)));
+				}, Promise.resolve());
+			})
+			.catch(err => {
+				console.error(`Error rendering ${url.pathname}: ${err.message}`);
+			});
+	}
+
+	return handle(new URL(origin)) // TODO all static routes
+		.then(() => server.close());
+}

src/core/index.ts

@@ -0,0 +1,11 @@
+import { create_templates, render, stream } from './templates'; // TODO templates is an anomaly... fix post-#91
+
+export { default as build } from './build';
+export { default as export } from './export.js';
+
+export { default as create_app } from './create_app';
+export { default as create_assets } from './create_assets';
+export { default as create_compilers } from './create_compilers';
+export { default as create_routes } from './create_routes';
+
+export const templates = { create_templates, render, stream };

src/core/templates.ts

@@ -0,0 +1,115 @@
+import * as fs from 'fs';
+import glob from 'glob';
+import chalk from 'chalk';
+import framer from 'code-frame';
+import { locate } from 'locate-character';
+
+let templates;
+
+function error(e) {
+	if (e.title) console.error(chalk.bold.red(e.title));
+	if (e.body) console.error(chalk.red(e.body));
+	if (e.url) console.error(chalk.cyan(e.url));
+	if (e.frame) console.error(chalk.grey(e.frame));
+
+	process.exit(1);
+}
+
+export function create_templates() {
+	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)) {
+				error({
+					title: `templates/${file}`,
+					body: `Bad template — should be a valid status code like 404.html, or a wildcard like 2xx.html`
+				});
+			}
+
+			const index = template.indexOf('%sapper.main%');
+			if (index !== -1) {
+				// TODO remove this in a future version
+				const { line, column } = locate(template, index, { offsetLine: 1 });
+				const frame = framer(template, line, column);
+
+				error({
+					title: `templates/${file}`,
+					body: `<script src='%sapper.main%'> is unsupported — use %sapper.scripts% (without the <script> tag) instead`,
+					url: 'https://github.com/sveltejs/sapper/issues/86',
+					frame
+				});
+			}
+
+			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] : '';
+					});
+				},
+				stream: (res, data) => {
+					let i = 0;
+
+					function stream_inner() {
+						if (i >= template.length) {
+							return;
+						}
+
+						const start = template.indexOf('%sapper', i);
+
+						if (start === -1) {
+							res.end(template.slice(i));
+							return;
+						}
+
+						res.write(template.slice(i, start));
+
+						const end = template.indexOf('%', start + 1);
+						if (end === -1) {
+							throw new Error(`Bad template`); // TODO validate ahead of time
+						}
+
+						const tag = template.slice(start + 1, end);
+						const match = /sapper\.(\w+)/.exec(tag);
+						if (!match || !(match[1] in data)) throw new Error(`Bad template`); // TODO ditto
+
+						return Promise.resolve(data[match[1]]).then(datamatch => {
+							res.write(datamatch);
+							i = end + 1;
+							return stream_inner();
+						});
+					}
+
+					return Promise.resolve().then(stream_inner);
+				}
+			};
+		})
+		.sort((a, b) => b.specificity - a.specificity);
+
+	return templates;
+}
+
+export function render(status, data) {
+	const template = templates.find(template => template.test(status));
+	if (template) return template.render(data);
+
+	return `Missing template for status code ${status}`;
+}
+
+export function stream(res, status, data) {
+	const template = templates.find(template => template.test(status));
+	if (template) return template.stream(res, data);
+
+	return `Missing template for status code ${status}`;
+}

src/middleware/create_watcher.ts

@@ -0,0 +1,103 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import chalk from 'chalk';
+import { create_app, create_assets, create_routes, templates } from 'sapper/core.js';
+import { dest } from '../config.js';
+
+function deferred() {
+	const d = {};
+
+	d.promise = new Promise((fulfil, reject) => {
+		d.fulfil = fulfil;
+		d.reject = reject;
+	});
+
+	return d;
+}
+
+export default function create_watcher({ compilers, dev, entry, src, onroutes }) {
+	const deferreds = {
+		client: deferred(),
+		server: deferred()
+	};
+
+	const invalidate = () => Promise.all([
+		deferreds.client.promise,
+		deferreds.server.promise
+	]).then(([client_stats, server_stats]) => {
+		const client_info = client_stats.toJson();
+		fs.writeFileSync(path.join(dest, 'stats.client.json'), JSON.stringify(client_info, null, '  '));
+
+		const server_info = server_stats.toJson();
+		fs.writeFileSync(path.join(dest, 'stats.server.json'), JSON.stringify(server_info, null, '  '));
+
+		return create_assets({
+			src, dest, dev,
+			client_info: client_stats.toJson(),
+			server_info: server_stats.toJson()
+		});
+	});
+
+	function watch_compiler(type) {
+		const compiler = compilers[type];
+
+		compiler.plugin('invalid', filename => {
+			console.log(chalk.cyan(`${type} bundle invalidated, file changed: ${chalk.bold(filename)}`));
+			deferreds[type] = deferred();
+			watcher.ready = invalidate();
+		});
+
+		compiler.plugin('failed', err => {
+			deferreds[type].reject(err);
+		});
+
+		return compiler.watch({}, (err, stats) => {
+			if (stats.hasErrors()) {
+				deferreds[type].reject(stats.toJson().errors[0]);
+			} else {
+				deferreds[type].fulfil(stats);
+			}
+		});
+	}
+
+	const chokidar = require('chokidar');
+
+	function watch_files(pattern, callback) {
+		const watcher = chokidar.watch(pattern, {
+			persistent: false
+		});
+
+		watcher.on('add', callback);
+		watcher.on('change', callback);
+		watcher.on('unlink', callback);
+	}
+
+	watch_files('routes/**/*.+(html|js|mjs)', () => {
+		const routes = create_routes({ src });
+		onroutes(routes);
+
+		create_app({ dev, entry, src }); // TODO this calls `create_routes` again, we should pass `routes` to `create_app` instead
+	});
+
+	watch_files('templates/main.js', () => {
+		create_app({ dev, entry, src });
+	});
+
+	watch_files('templates/**.html', () => {
+		templates.create_templates();
+		// TODO reload current page?
+	});
+
+	const watcher = {
+		ready: invalidate(),
+		client: watch_compiler('client'),
+		server: watch_compiler('server'),
+
+		close: () => {
+			watcher.client.close();
+			watcher.server.close();
+		}
+	};
+
+	return watcher;
+}

src/middleware/index.ts

@@ -0,0 +1,282 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import mkdirp from 'mkdirp';
+import rimraf from 'rimraf';
+import serialize from 'serialize-javascript';
+import escape_html from 'escape-html';
+import { create_routes, templates, create_compilers, create_assets } from 'sapper/core.js';
+import create_watcher from './create_watcher';
+import { dest, dev, entry, src } from '../config';
+
+function connect_dev() {
+	mkdirp.sync(dest);
+	rimraf.sync(path.join(dest, '**/*'));
+
+	const compilers = create_compilers();
+
+	let routes;
+
+	const watcher = create_watcher({
+		dev, entry, src,
+		compilers,
+		onroutes: _ => {
+			routes = _;
+		}
+	});
+
+	let asset_cache;
+
+	const middleware = compose_handlers([
+		require('webpack-hot-middleware')(compilers.client, {
+			reload: true,
+			path: '/__webpack_hmr',
+			heartbeat: 10 * 1000
+		}),
+
+		(req, res, next) => {
+			watcher.ready.then(cache => {
+				asset_cache = cache;
+				next();
+			});
+		},
+
+		set_req_pathname,
+
+		get_asset_handler({
+			filter: pathname => pathname === '/index.html',
+			type: 'text/html',
+			cache: 'max-age=600',
+			fn: () => asset_cache.client.index
+		}),
+
+		get_asset_handler({
+			filter: pathname => pathname === '/service-worker.js',
+			type: 'application/javascript',
+			cache: 'max-age=600',
+			fn: () => asset_cache.client.service_worker
+		}),
+
+		get_asset_handler({
+			filter: pathname => pathname.startsWith('/client/'),
+			type: 'application/javascript',
+			cache: 'max-age=31536000',
+			fn: pathname => asset_cache.client.chunks[pathname]
+		}),
+
+		get_route_handler(() => asset_cache, () => routes),
+
+		get_not_found_handler(() => asset_cache)
+	]);
+
+	middleware.close = () => {
+		watcher.close();
+		// TODO shut down chokidar
+	};
+
+	return middleware;
+}
+
+function connect_prod() {
+	const asset_cache = create_assets({
+		src, dest,
+		dev: false,
+		client_info: read_json(path.join(dest, 'stats.client.json')),
+		server_info: read_json(path.join(dest, 'stats.server.json'))
+	});
+
+	const routes = create_routes({ src }); // TODO rename update
+
+	const middleware = compose_handlers([
+		set_req_pathname,
+
+		get_asset_handler({
+			filter: pathname => pathname === '/index.html',
+			type: 'text/html',
+			cache: 'max-age=600',
+			fn: () => asset_cache.client.index
+		}),
+
+		get_asset_handler({
+			filter: pathname => pathname === '/service-worker.js',
+			type: 'application/javascript',
+			cache: 'max-age=600',
+			fn: () => asset_cache.client.service_worker
+		}),
+
+		get_asset_handler({
+			filter: pathname => pathname.startsWith('/client/'),
+			type: 'application/javascript',
+			cache: 'max-age=31536000',
+			fn: pathname => asset_cache.client.chunks[pathname]
+		}),
+
+		get_route_handler(() => asset_cache, () => routes),
+
+		get_not_found_handler(() => asset_cache)
+	]);
+
+	// here for API consistency between dev, and prod, but
+	// doesn't actually need to do anything
+	middleware.close = () => {};
+
+	return middleware;
+}
+
+export default dev ? connect_dev : connect_prod;
+
+function set_req_pathname(req, res, next) {
+	req.pathname = req.url.replace(/\?.+/, '');
+	next();
+}
+
+function get_asset_handler(opts) {
+	return (req, res, next) => {
+		if (!opts.filter(req.pathname)) return next();
+
+		res.setHeader('Content-Type', opts.type);
+		res.setHeader('Cache-Control', opts.cache);
+
+		res.end(opts.fn(req.pathname));
+	};
+}
+
+const resolved = Promise.resolve();
+
+function get_route_handler(get_assets, get_routes) {
+	function handle_route(route, req, res, next, { client, server }) {
+		req.params = route.exec(req.pathname);
+
+		const mod = require(server.entry)[route.id];
+
+		if (route.type === 'page') {
+			// preload main.js and current route
+			// TODO detect other stuff we can preload? images, CSS, fonts?
+			res.setHeader('Link', `<${client.main_file}>;rel="preload";as="script", <${client.routes[route.id]}>;rel="preload";as="script"`);
+
+			const data = { params: req.params, query: req.query };
+
+			if (mod.preload) {
+				const promise = Promise.resolve(mod.preload(req)).then(preloaded => {
+					const serialized = try_serialize(preloaded);
+					Object.assign(data, preloaded);
+
+					return { rendered: mod.render(data), serialized };
+				});
+
+				return templates.stream(res, 200, {
+					scripts: promise.then(({ serialized }) => {
+						const main = `<script src='${client.main_file}'></script>`;
+
+						if (serialized) {
+							return `<script>__SAPPER__ = { preloaded: ${serialized} };</script>${main}`;
+						}
+
+						return main;
+					}),
+					html: promise.then(({ rendered }) => rendered.html),
+					head: promise.then(({ rendered }) => `<noscript id='sapper-head-start'></noscript>${rendered.head}<noscript id='sapper-head-end'></noscript>`),
+					styles: promise.then(({ rendered }) => (rendered.css && rendered.css.code ? `<style>${rendered.css.code}</style>` : ''))
+				});
+			} else {
+				const { html, head, css } = mod.render(data);
+
+				const page = templates.render(200, {
+					scripts: `<script src='${client.main_file}'></script>`,
+					html,
+					head: `<noscript id='sapper-head-start'></noscript>${head}<noscript id='sapper-head-end'></noscript>`,
+					styles: (css && css.code ? `<style>${css.code}</style>` : '')
+				});
+
+				res.end(page);
+			}
+		}
+
+		else {
+			const method = req.method.toLowerCase();
+			// 'delete' cannot be exported from a module because it is a keyword,
+			// so check for 'del' instead
+			const method_export = method === 'delete' ? 'del' : method;
+			const handler = mod[method_export];
+			if (handler) {
+				handler(req, res, next);
+			} else {
+				// no matching handler for method — 404
+				next();
+			}
+		}
+	}
+
+	return function find_route(req, res, next) {
+		const url = req.pathname;
+
+		// whatever happens, we're going to serve some HTML
+		res.setHeader('Content-Type', 'text/html');
+
+		resolved
+			.then(() => {
+				const routes = get_routes();
+				for (const route of routes) {
+					if (route.test(url)) return handle_route(route, req, res, next, get_assets());
+				}
+
+				// no matching route — 404
+				next();
+			})
+			.catch(err => {
+				res.statusCode = 500;
+				res.end(templates.render(500, {
+					title: (err && err.name) || 'Internal server error',
+					url,
+					error: escape_html(err && (err.details || err.message || err) || 'Unknown error'),
+					stack: err && err.stack.split('\n').slice(1).join('\n')
+				}));
+			});
+	};
+}
+
+function get_not_found_handler(fn) {
+	return function handle_not_found(req, res) {
+		const asset_cache = fn();
+
+		res.statusCode = 404;
+		res.end(templates.render(404, {
+			title: 'Not found',
+			status: 404,
+			method: req.method,
+			scripts: `<script src='${asset_cache.client.main_file}'></script>`,
+			url: req.url
+		}));
+	};
+}
+
+function compose_handlers(handlers) {
+	return (req, res, next) => {
+		let i = 0;
+		function go() {
+			const handler = handlers[i];
+
+			if (handler) {
+				handler(req, res, () => {
+					i += 1;
+					go();
+				});
+			} else {
+				next();
+			}
+		}
+
+		go();
+	};
+}
+
+function read_json(file) {
+	return JSON.parse(fs.readFileSync(file, 'utf-8'));
+}
+
+function try_serialize(data) {
+	try {
+		return serialize(data);
+	} catch (err) {
+		return null;
+	}
+}

src/webpack/index.ts

@@ -0,0 +1,44 @@
+import { dest, dev, entry } from '../config';
+
+export default {
+	dev,
+
+	client: {
+		entry: () => {
+			return {
+				main: [
+					entry.client,
+					// workaround for https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/456
+					'style-loader/lib/addStyles',
+					'css-loader/lib/css-base'
+				]
+			};
+		},
+
+		output: () => {
+			return {
+				path: `${dest}/client`,
+				filename: '[name].[hash].js',
+				chunkFilename: '[name].[id].[hash].js',
+				publicPath: '/client/'
+			};
+		}
+	},
+
+	server: {
+		entry: () => {
+			return {
+				main: entry.server
+			};
+		},
+
+		output: () => {
+			return {
+				path: `${dest}/server`,
+				filename: '[name].[hash].js',
+				chunkFilename: '[name].[id].[hash].js',
+				libraryTarget: 'commonjs2'
+			};
+		}
+	}
+};