-> v0.2.0

remove webpack-dev-middleware

.eslintrc.json

@@ -0,0 +1,39 @@
+{
+    "root": true,
+    "rules": {
+        "indent": [ 2, "tab", { "SwitchCase": 1 } ],
+        "semi": [ 2, "always" ],
+        "space-before-blocks": [ 2, "always" ],
+        "no-mixed-spaces-and-tabs": [ 2, "smart-tabs" ],
+        "no-cond-assign": 0,
+        "no-unused-vars": 2,
+        "object-shorthand":  [ 2, "always" ],
+        "no-const-assign": 2,
+        "no-class-assign": 2,
+        "no-this-before-super": 2,
+        "no-var": 2,
+        "no-unreachable": 2,
+        "valid-typeof": 2,
+        "quote-props": [ 2, "as-needed" ],
+        "one-var": [ 2, "never" ],
+        "prefer-arrow-callback": 2,
+        "prefer-const": [ 2, { "destructuring": "all" } ],
+        "arrow-spacing": 2,
+        "no-inner-declarations": 0
+    },
+    "env": {
+        "es6": true,
+        "browser": true,
+        "node": true,
+        "mocha": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:import/errors",
+        "plugin:import/warnings"
+    ],
+    "parserOptions": {
+        "ecmaVersion": 6,
+        "sourceType": "module"
+    }
+}

CHANGELOG.md

@@ -0,0 +1,22 @@
+# sapper changelog
+
+## 0.2.0
+
+* Separate `sapper build` from prod server ([#21](https://github.com/sveltejs/sapper/issues/21))
+
+## 0.1.3-5
+
+* Fix typo
+
+## 0.1.2
+
+* Use `atime.getTime()` and `mtime.getTime()` instead of `atimeMs` and `mtimeMs` ([#11](https://github.com/sveltejs/sapper/issues/11))
+* Make dest dir before anyone tries to write to it ([#18](https://github.com/sveltejs/sapper/pull/18))
+
+## 0.1.1
+
+* Expose resolved pathname to `sapper/runtime/app.js` as `__app__` inside main.js
+
+## 0.1.0
+
+* First public preview

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;

cli/index.js

@@ -0,0 +1,8 @@
+#!/usr/bin/env node
+
+const cmd = process.argv[2];
+
+if (cmd === 'build') {
+	process.env.NODE_ENV = 'production';
+	require('../lib/build.js')();
+}

connect.js

@@ -1,94 +0,0 @@
-require('svelte/ssr/register');
-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 create_app = require('./utils/create_app.js');
-const create_webpack_compiler = require('./utils/create_webpack_compiler.js');
-
-const esmRequire = esm(module, {
-	esm: 'all'
-});
-
-const dir = tmp.dirSync({ unsafeCleanup: true });
-
-module.exports = function connect(opts) {
-	const routes = path.resolve('routes');
-	const out = path.resolve('.sapper');
-
-	let pages = glob.sync('**/*.html', { cwd: routes });
-	let page_matchers = create_matchers(pages);
-
-	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);
-
-	const webpack_compiler = create_webpack_compiler(
-		path.join(out, 'main.js'),
-		path.resolve('.sapper/webpack'),
-		opts.dev
-	);
-
-	return async function(req, res, next) {
-		const url = req.url.replace(/\?.+/, '');
-
-		if (url.startsWith('/webpack/')) {
-			fs.createReadStream(path.resolve('.sapper' + 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}`);
-
-				const app = await webpack_compiler.app;
-
-				const page = opts.template({
-					app,
-					html: Component.render({
-						params,
-						query: req.query
-					})
-				});
-
-				res.end(page);
-				return;
-			}
-		}
-
-		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}`);
-
-				const handler = route[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;
-				}
-			}
-		}
-
-		next();
-	};
-};
-

lib/build.js

@@ -0,0 +1,38 @@
+const fs = require('fs');
+const path = require('path');
+const glob = require('glob');
+const { client, server } = require('./utils/compilers.js');
+const create_app = require('./utils/create_app.js');
+const generate_asset_cache = require('./utils/generate_asset_cache.js');
+const { dest } = require('./config.js');
+
+module.exports = () => {
+	// create main.js and server-routes.js
+	create_app();
+
+	function handleErrors(err, stats) {
+		if (err) {
+			console.error(err ? err.details || err.stack || err.message || err : 'Unknown error');
+			process.exit(1);
+		}
+
+		if (stats.hasErrors()) {
+			console.log(stats.toString({ colors: true }));
+			process.exit(1);
+		}
+	}
+
+	client.run((err, clientStats) => {
+		handleErrors(err, clientStats);
+		const clientInfo = clientStats.toJson();
+		fs.writeFileSync(path.join(dest, 'stats.client.json'), JSON.stringify(clientInfo, null, '  '));
+
+		server.run((err, serverStats) => {
+			handleErrors(err, serverStats);
+			const serverInfo = serverStats.toJson();
+			fs.writeFileSync(path.join(dest, 'stats.server.json'), JSON.stringify(serverInfo, null, '  '));
+
+			generate_asset_cache(clientInfo, serverInfo);
+		});
+	});
+};

lib/config.js

@@ -0,0 +1,21 @@
+const path = require('path');
+const mkdirp = require('mkdirp');
+const rimraf = require('rimraf');
+
+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'
+);
+
+if (exports.dev) {
+	mkdirp(exports.dest);
+	rimraf.sync(path.join(exports.dest, '**/*'));
+}
+
+exports.server_routes = path.resolve(exports.dest, 'server-routes.js');

lib/index.js

@@ -0,0 +1,208 @@
+const fs = require('fs');
+const path = require('path');
+const glob = require('glob');
+const rimraf = require('rimraf');
+const mkdirp = require('mkdirp');
+const webpack = require('webpack');
+const route_manager = require('./route_manager.js');
+const templates = require('./templates.js');
+const create_app = require('./utils/create_app.js');
+const create_watcher = require('./utils/create_watcher.js');
+const compilers = require('./utils/compilers.js');
+const generate_asset_cache = require('./utils/generate_asset_cache.js');
+const escape_html = require('escape-html');
+const { src, dest, dev } = require('./config.js');
+
+function connect_dev() {
+	// create main.js and server-routes.js
+	// TODO update on changes
+	create_app();
+
+	const watcher = create_watcher();
+
+	let asset_cache;
+
+	return compose_handlers([
+		require('webpack-hot-middleware')(compilers.client, {
+			reload: true,
+			path: '/__webpack_hmr',
+			heartbeat: 10 * 1000
+		}),
+
+		async (req, res, next) => {
+			asset_cache = await watcher.ready;
+			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),
+
+		not_found
+	]);
+}
+
+function connect_prod() {
+	const asset_cache = generate_asset_cache(
+		read_json(path.join(dest, 'stats.client.json')),
+		read_json(path.join(dest, 'stats.server.json'))
+	);
+
+	return 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),
+
+		not_found
+	]);
+}
+
+module.exports = 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.set({
+			'Content-Type': opts.type,
+			'Cache-Control': opts.cache
+		});
+		res.end(opts.fn(req.pathname));
+	};
+}
+
+function get_route_handler(fn) {
+	return async function handle_route(req, res, next) {
+		const url = req.pathname;
+
+		const { client, server } = fn();
+
+		// whatever happens, we're going to serve some HTML
+		res.set({
+			'Content-Type': 'text/html'
+		});
+
+		try {
+			for (const route of route_manager.routes) {
+				if (route.test(url)) {
+					req.params = route.exec(url);
+
+					const mod = require(server.entry)[route.id];
+
+					if (route.type === 'page') {
+						let data = { params: req.params, query: req.query };
+						if (mod.preload) data = Object.assign(data, await mod.preload(data));
+
+						const { html, head, css } = mod.render(data);
+
+						const page = templates.render(200, {
+							main: client.main_file,
+							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) handler(req, res, next);
+					}
+
+					return;
+				}
+			}
+
+			next();
+		} catch(err) {
+			res.status(500).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 not_found(req, res) {
+	res.status(404).end(templates.render(404, {
+		title: 'Not found',
+		status: 404,
+		method: req.method,
+		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'));
+}

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;

lib/templates.js

@@ -0,0 +1,43 @@
+const fs = require('fs');
+const glob = require('glob');
+
+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);
+
+exports.render = (status, data) => {
+	const template = templates.find(template => template.test(status));
+	if (template) return template.render(data);
+
+	return `Missing template for status code ${status}`;
+};
+
+exports.onchange = fn => {
+	// TODO in dev mode, keep this updated, and allow
+	// webpack compiler etc to hook into it
+};

lib/utils/compilers.js

@@ -0,0 +1,11 @@
+const path = require('path');
+const relative = require('require-relative');
+const webpack = relative('webpack', process.cwd());
+
+exports.client = webpack(
+	require(path.resolve('webpack.client.config.js'))
+);
+
+exports.server = webpack(
+	require(path.resolve('webpack.server.config.js'))
+);

lib/utils/create_app.js

@@ -0,0 +1,59 @@
+const fs = require('fs');
+const path = require('path');
+const route_manager = require('../route_manager.js');
+const { src, dest, server_routes, dev } = require('../config.js');
+
+module.exports = function create_app() {
+	const { routes } = route_manager;
+
+	function create_client_main() {
+		const template = fs.readFileSync('templates/main.js', 'utf-8');
+
+		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(', ') } }`;
+
+					return `{ pattern: ${route.pattern}, params: match => (${params}), load: () => import(/* webpackChunkName: "${route.id}" */ '${src}/${route.file}') }`
+				})
+				.join(', ')
+		}]`;
+
+		const main = template
+			.replace(/__app__/g, path.resolve(__dirname, '../../runtime/app.js'))
+			.replace(/__routes__/g, code)
+			.replace(/__dev__/g, String(dev));
+
+		const file = path.resolve(dest, 'main.js');
+
+		fs.writeFileSync(file, main);
+
+		// need to fudge the mtime, because webpack is soft in the head
+		const { atime, mtime } = fs.statSync(file);
+		fs.utimesSync(file, new Date(atime.getTime() - 999999), new Date(mtime.getTime() - 999999));
+	}
+
+	function create_server_routes() {
+		const imports = routes
+			.map(route => {
+				return route.type === 'page' ?
+					`import ${route.id} from '${src}/${route.file}';` :
+					`import * as ${route.id} from '${src}/${route.file}';`;
+			})
+			.join('\n');
+
+		const exports = `export { ${routes.map(route => route.id)} };`;
+
+		fs.writeFileSync(server_routes, `${imports}\n\n${exports}`);
+
+		const { atime, mtime } = fs.statSync(server_routes);
+		fs.utimesSync(server_routes, new Date(atime.getTime() - 999999), new Date(mtime.getTime() - 999999));
+	}
+
+	// TODO in dev mode, watch files
+	create_client_main();
+	create_server_routes();
+};

lib/utils/create_routes.js

@@ -3,15 +3,21 @@ 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, '$').replace(/^\d/, '_$&').replace(/[^a-zA-Z0-9_$]/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 +35,8 @@ module.exports = function create_matchers(files) {
 			};
 
 			return {
+				id,
+				type: path.extname(file) === '.html' ? 'page' : 'route',
 				file,
 				pattern,
 				test,
@@ -37,6 +45,7 @@ module.exports = function create_matchers(files) {
 				dynamic
 			};
 		})
+		.filter(Boolean)
 		.sort((a, b) => {
 			return (
 				(a.dynamic.length - b.dynamic.length) || // match static paths first

lib/utils/create_watcher.js

@@ -0,0 +1,63 @@
+const path = require('path');
+const chalk = require('chalk');
+const compilers = require('./compilers.js');
+const generate_asset_cache = require('./generate_asset_cache.js');
+
+function deferred() {
+	const d = {};
+
+	d.promise = new Promise((fulfil, reject) => {
+		d.fulfil = fulfil;
+		d.reject = reject;
+	});
+
+	return d;
+}
+
+module.exports = function create_watcher() {
+	const deferreds = {
+		client: deferred(),
+		server: deferred()
+	};
+
+	const invalidate = () => Promise.all([
+		deferreds.client.promise,
+		deferreds.server.promise
+	]).then(([client_stats, server_stats]) => {
+		return generate_asset_cache(
+			client_stats.toJson(),
+			server_stats.toJson()
+		);
+	});
+
+	watcher = {
+		ready: invalidate()
+	};
+
+	function watch_compiler(type) {
+		const compiler = compilers[type];
+
+		compiler.plugin('invalid', filename => {
+			console.log(chalk.red(`${type} bundle invalidated, file changed: ${chalk.bold(filename)}`));
+			deferreds[type] = deferred();
+			watcher.ready = invalidate();
+		});
+
+		compiler.plugin('failed', err => {
+			deferreds[type].reject(err);
+		});
+
+		compiler.watch({}, (err, stats) => {
+			if (stats.hasErrors()) {
+				deferreds[type].reject(stats.toJson().errors[0]);
+			} else {
+				deferreds[type].fulfil(stats);
+			}
+		});
+	}
+
+	watch_compiler('client');
+	watch_compiler('server');
+
+	return watcher;
+};

lib/utils/generate_asset_cache.js

@@ -0,0 +1,67 @@
+const fs = require('fs');
+const path = require('path');
+const glob = require('glob');
+const templates = require('../templates.js');
+const route_manager = require('../route_manager.js');
+const { dest } = require('../config.js');
+
+module.exports = function generate_asset_cache(clientInfo, serverInfo) {
+	const main_file = `/client/${clientInfo.assetsByChunkName.main}`;
+	const chunk_files = clientInfo.assets.map(chunk => `/client/${chunk.name}`);
+
+	const service_worker = generate_service_worker(chunk_files);
+	const index = generate_index(main_file);
+
+	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;
+			}, {}),
+
+			index,
+			service_worker
+		},
+
+		server: {
+			entry: path.resolve(dest, 'server', serverInfo.assetsByChunkName.server_routes)
+		}
+	};
+};
+
+function generate_service_worker(chunk_files) {
+	const assets = glob.sync('**', { cwd: 'assets', nodir: true });
+
+	const route_code = `[${
+		route_manager.routes
+			.filter(route => route.type === 'page')
+			.map(route => `{ pattern: ${route.pattern} }`)
+			.join(', ')
+	}]`;
+
+	return read('templates/service-worker.js')
+		.replace('__timestamp__', Date.now())
+		.replace('__assets__', JSON.stringify(assets))
+		.replace('__shell__', JSON.stringify(chunk_files.concat('/index.html')))
+		.replace('__routes__', route_code);
+}
+
+function generate_index(main_file) {
+	return templates.render(200, {
+		styles: '',
+		head: '',
+		html: '<noscript>Please enable JavaScript!</noscript>',
+		main: main_file
+	});
+}
+
+function read(file) {
+	return fs.readFileSync(file, 'utf-8');
+}

package.json

@@ -1,20 +1,27 @@
 {
   "name": "sapper",
-  "version": "0.0.3",
-  "description": "Combat-ready apps, engineered by Svelte",
-  "main": "connect.js",
+  "version": "0.2.0",
+  "description": "Military-grade apps, engineered by Svelte",
+  "main": "lib/index.js",
+  "bin": {
+    "sapper": "cli/index.js"
+  },
   "directories": {
     "test": "test"
   },
   "dependencies": {
-    "@std/esm": "^0.18.0",
-    "extract-text-webpack-plugin": "^3.0.2",
-    "tmp": "0.0.33",
-    "webpack": "^3.10.0"
+    "chalk": "^2.3.0",
+    "escape-html": "^1.0.3",
+    "mkdirp": "^0.5.1",
+    "relative": "^3.0.2",
+    "require-relative": "^0.8.7",
+    "rimraf": "^2.6.2",
+    "webpack": "^3.10.0",
+    "webpack-hot-middleware": "^2.21.0"
   },
   "devDependencies": {
-    "mocha": "^4.0.1",
-    "svelte": "^1.47.1"
+    "eslint": "^4.13.1",
+    "mocha": "^4.0.1"
   },
   "scripts": {
     "test": "mocha --opts mocha.opts"
@@ -32,8 +39,5 @@
   "bugs": {
     "url": "https://github.com/sveltejs/sapper/issues"
   },
-  "homepage": "https://github.com/sveltejs/sapper#readme",
-  "@std/esm": {
-    "esm": "js"
-  }
+  "homepage": "https://github.com/sveltejs/sapper#readme"
 }

runtime/app.js

@@ -0,0 +1,192 @@
+const detach = node => {
+	node.parentNode.removeChild(node);
+};
+
+export let component;
+let target;
+let routes;
+
+const scroll_history = {};
+let uid = 1;
+let cid;
+
+if ('scrollRestoration' in history) {
+	history.scrollRestoration = 'manual'
+}
+
+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, scroll) {
+	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
+		});
+
+		if (scroll) {
+			window.scrollTo(scroll.x, scroll.y);
+		}
+	});
+}
+
+function navigate(url, id) {
+	const selected = select_route(url);
+	if (selected) {
+		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 };
+
+			history.pushState({ id }, '', url.href);
+		}
+
+		selected.route.load().then(mod => {
+			render(mod.default, selected.data, scroll_history[id]);
+		});
+
+		cid = id;
+		return true;
+	}
+}
+
+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;
+
+	const 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
+	const svg = typeof a.href === 'object' && a.href.constructor.name === 'SVGAnimatedString';
+	const href = 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;
+
+	const url = new URL(href);
+
+	// Don't handle hash changes
+	if (url.pathname === window.location.pathname && url.search === window.location.search) return;
+
+	if (navigate(url, null)) {
+		event.preventDefault();
+	}
+}
+
+function handle_popstate(event) {
+	scroll_history[cid] = scroll_state();
+
+	if (event.state) {
+		navigate(new URL(window.location), event.state.id);
+	} else {
+		// hashchange
+		cid = ++uid;
+		history.replaceState({ id: cid }, '', window.location.href);
+	}
+}
+
+function prefetch(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);
+		});
+	}
+}
+
+function findAnchor(node) {
+	while (node && node.nodeName.toUpperCase() !== 'A') node = node.parentNode; // SVG <a> elements have a lowercase name
+	return node;
+}
+
+let inited;
+
+export function init(_target, _routes) {
+	target = _target;
+	routes = _routes;
+
+	if (!inited) { // this check makes HMR possible
+		window.addEventListener('click', handle_click);
+		window.addEventListener('popstate', handle_popstate);
+
+		// prefetch
+		window.addEventListener('touchstart', prefetch);
+		window.addEventListener('mouseover', prefetch);
+
+		inited = true;
+	}
+
+	const scroll = scroll_history[uid] = scroll_state();
+
+	history.replaceState({ id: uid }, '', window.location.href);
+	navigate(new URL(window.location), uid);
+}
+
+function which(event) {
+	event = event || window.event;
+	return event.which === null ? event.button : event.which;
+}
+
+function scroll_state() {
+	return {
+		x: window.scrollX,
+		y: window.scrollY
+	};
+}

templates/main.js

@@ -1,38 +0,0 @@
-window.addEventListener('click', event => {
-	let a = event.target;
-	while (a && a.nodeName !== 'A') a = a.parentNode;
-	if (!a) return;
-
-	if (navigate(new URL(a.href))) event.preventDefault();
-});
-
-const target = document.querySelector('main');
-let component;
-
-function navigate(url) {
-	if (url.origin !== window.location.origin) return;
-
-	let match;
-	let params = {};
-	const query = {};
-
-	function render(mod) {
-		if (component) {
-			component.destroy();
-		} else {
-			target.innerHTML = '';
-		}
-
-		component = new mod.default({
-			target,
-			data: { query, params },
-			hydrate: !!component
-		});
-	}
-
-	// ROUTES
-
-	return true;
-}
-
-navigate(window.location);

test/unit/create_routes.test.js

@@ -1,25 +1,25 @@
 const path = require('path');
 const assert = require('assert');
 
-const create_matchers = require('./create_matchers.js');
+const create_matchers = require('../../lib/utils/create_routes.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_app.js

@@ -1,28 +0,0 @@
-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) {
-	// 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)`;
-
-			return `
-				if (${condition}) {
-					// TODO set params, if applicable
-					import('${routes}/${matcher.file}').then(render);
-				}
-			`.replace(/^\t{3}/gm, '').trim();
-		})
-		.join(' else ');
-
-	const main = template.replace('// ROUTES', code);
-
-	fs.writeFileSync(path.join(dest, 'main.js'), main);
-};

utils/create_webpack_compiler.js

@@ -1,81 +0,0 @@
-const fs = require('fs');
-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) {
-	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
-	});
-
-	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) => {
-				if (err || stats.hasErrors()) {
-					// TODO handle errors
-				}
-
-				const filename = stats.toJson().assetsByChunkName.main;
-				fulfil(`/webpack/${filename}`);
-			});
-		});
-	} else {
-		compiler.app = new Promise((fulfil, reject) => {
-			_.run((err, stats) => {
-				if (err || stats.hasErrors()) {
-					// TODO handle errors
-				}
-
-				const filename = stats.toJson().assetsByChunkName.main;
-				fulfil(`/webpack/${filename}`);
-			});
-		});
-	}
-
-	return compiler;
-};

webpack/config.js

@@ -0,0 +1,41 @@
+const path = require('path');
+const route_manager = require('../lib/route_manager.js');
+const { src, dest, dev, server_routes } = 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].[hash].js',
+				publicPath: '/client/'
+			};
+		}
+	},
+
+	server: {
+		entry: () => {
+			return {
+				server_routes
+			}
+		},
+
+		output: () => {
+			return {
+				path: `${dest}/server`,
+				filename: '[name].[hash].js',
+				chunkFilename: '[name].[id].[hash].js',
+				libraryTarget: 'commonjs2'
+			};
+		}
+	}
+};

webpack/hmr.js

@@ -0,0 +1 @@
+import 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000';