-> 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

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

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')();
+}

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

@@ -1,4 +1,6 @@
 const path = require('path');
+const mkdirp = require('mkdirp');
+const rimraf = require('rimraf');
 
 exports.dev = process.env.NODE_ENV !== 'production';
 
@@ -11,4 +13,9 @@ exports.dest = path.resolve(
 	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

@@ -4,110 +4,137 @@ const glob = require('glob');
 const rimraf = require('rimraf');
 const mkdirp = require('mkdirp');
 const webpack = require('webpack');
-const create_routes = require('./utils/create_routes.js');
+const route_manager = require('./route_manager.js');
 const templates = require('./templates.js');
 const create_app = require('./utils/create_app.js');
-const create_compiler = require('./utils/create_compiler.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');
 
-module.exports = function connect(opts) {
-	mkdirp(dest);
-	rimraf.sync(path.join(dest, '**/*'));
+function connect_dev() {
+	// create main.js and server-routes.js
+	// TODO update on changes
+	create_app();
 
-	let routes = create_routes(
-		glob.sync('**/*.+(html|js|mjs)', { cwd: src })
-	);
+	const watcher = create_watcher();
 
-	create_app(src, dest, routes, opts);
+	let asset_cache;
 
-	const client = webpack(
-		require(path.resolve('webpack.client.config.js'))
-	);
+	return compose_handlers([
+		require('webpack-hot-middleware')(compilers.client, {
+			reload: true,
+			path: '/__webpack_hmr',
+			heartbeat: 10 * 1000
+		}),
 
-	const server = webpack(
-		require(path.resolve('webpack.server.config.js'))
-	);
-
-	const compiler = create_compiler(
-		client,
-		server,
-		dest,
-		routes,
-		dev
-	);
-
-	const dev_middleware = dev ? require('webpack-dev-middleware')(client, {
-		noInfo: true,
-		logLevel: 'silent',
-		publicPath: '/client/'
-	}) : null;
-
-	const hot_middleware = dev ? require('webpack-hot-middleware')(client, {
-		reload: true,
-		path: '/__webpack_hmr',
-		heartbeat: 10 * 1000
-	}) : null;
-
-	async function handle_webpack_generated_files(url, req, res, next) {
-		if (dev) {
-			dev_middleware(req, res, () => {
-				hot_middleware(req, res, next);
-			});
-		} else {
-			if (url.startsWith('/client/')) {
-				await compiler.ready;
-				res.set({
-					'Content-Type': 'application/javascript',
-					'Cache-Control': 'max-age=31536000'
-				});
-				res.end(compiler.asset_cache[url]);
-			} else {
-				next();
-			}
-		}
-	}
-
-	async function handle_index(url, req, res, next) {
-		if (url === '/index.html') {
-			await compiler.ready;
-			res.set({
-				'Content-Type': 'text/html',
-				'Cache-Control': dev ? 'no-cache' : 'max-age=600'
-			});
-			res.end(compiler.shell);
-		} else {
+		async (req, res, next) => {
+			asset_cache = await watcher.ready;
 			next();
-		}
-	}
+		},
 
-	async function handle_service_worker(url, req, res, next) {
-		if (url === '/service-worker.js') {
-			await compiler.ready;
-			res.set({
-				'Content-Type': 'application/javascript',
-				'Cache-Control': dev ? 'no-cache' : 'max-age=600'
-			});
-			res.end(compiler.service_worker);
-		} else {
-			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();
 
-	async function handle_route(url, req, res, next) {
 		// whatever happens, we're going to serve some HTML
 		res.set({
 			'Content-Type': 'text/html'
 		});
 
 		try {
-			for (const route of routes) {
+			for (const route of route_manager.routes) {
 				if (route.test(url)) {
-					await compiler.ready;
-
 					req.params = route.exec(url);
 
-					const mod = require(compiler.server_routes)[route.id];
+					const mod = require(server.entry)[route.id];
 
 					if (route.type === 'page') {
 						let data = { params: req.params, query: req.query };
@@ -116,7 +143,7 @@ module.exports = function connect(opts) {
 						const { html, head, css } = mod.render(data);
 
 						const page = templates.render(200, {
-							main: compiler.client_main,
+							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>` : '')
@@ -135,12 +162,7 @@ module.exports = function connect(opts) {
 				}
 			}
 
-			res.status(404).end(templates.render(404, {
-				title: 'Not found',
-				status: 404,
-				method: req.method,
-				url
-			}));
+			next();
 		} catch(err) {
 			res.status(500).end(templates.render(500, {
 				title: (err && err.name) || 'Internal server error',
@@ -150,16 +172,37 @@ module.exports = function connect(opts) {
 			}));
 		}
 	}
+}
 
-	return async function(req, res, next) {
-		const url = req.url.replace(/\?.+/, '');
+function not_found(req, res) {
+	res.status(404).end(templates.render(404, {
+		title: 'Not found',
+		status: 404,
+		method: req.method,
+		url
+	}));
+}
 
-		handle_index(url, req, res, () => {
-			handle_service_worker(url, req, res, () => {
-				handle_webpack_generated_files(url, req, res, () => {
-					handle_route(url, req, res, next);
+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/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

@@ -1,8 +1,11 @@
 const fs = require('fs');
 const path = require('path');
-const { dest, server_routes, dev } = require('../config.js');
+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;
 
-module.exports = function create_app(src, dest, routes, options) {
 	function create_client_main() {
 		const template = fs.readFileSync('templates/main.js', 'utf-8');
 
@@ -29,8 +32,8 @@ module.exports = function create_app(src, dest, routes, options) {
 		fs.writeFileSync(file, main);
 
 		// need to fudge the mtime, because webpack is soft in the head
-		const stats = fs.statSync(file);
-		fs.utimesSync(file, stats.atimeMs - 999999, stats.mtimeMs - 999999);
+		const { atime, mtime } = fs.statSync(file);
+		fs.utimesSync(file, new Date(atime.getTime() - 999999), new Date(mtime.getTime() - 999999));
 	}
 
 	function create_server_routes() {
@@ -46,8 +49,8 @@ module.exports = function create_app(src, dest, routes, options) {
 
 		fs.writeFileSync(server_routes, `${imports}\n\n${exports}`);
 
-		const stats = fs.statSync(server_routes);
-		fs.utimesSync(server_routes, stats.atimeMs - 999999, stats.mtimeMs - 999999);
+		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

lib/utils/create_compiler.js

@@ -1,152 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-const glob = require('glob');
-const chalk = require('chalk');
-const { dev } = require('../config.js');
-const templates = require('../templates.js');
-
-module.exports = function create_compiler(client, server, dest, routes, dev) {
-	const compiler = {};
-
-	function client_updated(stats) {
-		console.log(stats.toString({ colors: true }));
-
-		const info = stats.toJson();
-
-		compiler.client_main = `/client/${info.assetsByChunkName.main}`;
-		compiler.assets = info.assets.map(asset => `/client/${asset.name}`);
-
-		const _fs = client.outputFileSystem && client.outputFileSystem.readFileSync ? client.outputFileSystem : fs;
-		compiler.asset_cache = {};
-		compiler.assets.forEach(file => {
-			compiler.asset_cache[file] = _fs.readFileSync(path.join(dest, file), 'utf-8');
-		});
-	}
-
-	function server_updated(stats) {
-		console.log(stats.toString({ colors: true }));
-
-		const info = stats.toJson();
-		compiler.server_routes = path.resolve(dest, 'server', info.assetsByChunkName.server_routes);
-		compiler.chunks = info.assetsByChunkName;
-	}
-
-	function both_updated() {
-		const assets = glob.sync('**', { cwd: 'assets', nodir: true });
-
-		const route_code = `[${
-			routes
-				.filter(route => route.type === 'page')
-				.map(route => `{ pattern: ${route.pattern} }`)
-				.join(', ')
-		}]`;
-
-		compiler.service_worker = fs.readFileSync('templates/service-worker.js', 'utf-8')
-			.replace('__timestamp__', Date.now())
-			.replace('__assets__', JSON.stringify(assets))
-			.replace('__shell__', JSON.stringify(compiler.assets.concat('/index.html')))
-			.replace('__routes__', route_code);
-
-		compiler.shell = templates.render(200, {
-			styles: '',
-			head: '',
-			html: '<noscript>Please enable JavaScript!</noscript>',
-			main: compiler.client_main
-		});
-
-		// useful for debugging, but the files are served from memory
-		fs.writeFileSync(path.resolve(dest, 'service-worker.js'), compiler.service_worker);
-		fs.writeFileSync(path.resolve(dest, 'index.html'), compiler.shell);
-	}
-
-	if (dev) {
-		let client_is_ready = false;
-		let server_is_ready = false;
-
-		let fulfil;
-		let reject;
-
-		const invalidate = () => new Promise((f, r) => {
-			fulfil = f;
-			reject = r;
-		});
-
-		compiler.ready = invalidate();
-
-		client.plugin('invalid', filename => {
-			console.log(chalk.red(`client bundle invalidated, file changed: ${chalk.bold(filename)}`));
-			client_is_ready = false;
-			compiler.ready = invalidate();
-		});
-
-		client.plugin('done', stats => {
-			if (stats.hasErrors()) {
-				reject(stats.toJson().errors[0]);
-			} else {
-				client_updated(stats);
-			}
-
-			client_is_ready = true;
-			if (server_is_ready) fulfil();
-		});
-
-		client.plugin('failed', reject);
-
-		server.plugin('invalid', filename => {
-			console.log(chalk.red(`server bundle invalidated, file changed: ${chalk.bold(filename)}`));
-			server_is_ready = false;
-			compiler.ready = invalidate();
-		});
-
-		server.plugin('done', stats => {
-			if (stats.hasErrors()) {
-				reject(stats.toJson().errors[0]);
-			} else {
-				server_updated(stats);
-			}
-
-			server_is_ready = true;
-			if (client_is_ready) fulfil();
-		});
-
-		server.plugin('failed', reject);
-
-		// client is already being watched by the middleware,
-		// so we only need to start the server compiler
-		server.watch({}, (err, stats) => {
-			if (stats.hasErrors()) {
-				reject(stats.toJson().errors[0]);
-			} else {
-				server_updated(stats);
-				server_is_ready = true;
-				if (client_is_ready) fulfil();
-			}
-		});
-	} else {
-		compiler.ready = Promise.all([
-			new Promise((fulfil, reject) => {
-				client.run((err, stats) => {
-					if (stats.hasErrors()) {
-						reject(stats.toJson().errors[0]);
-					} else {
-						client_updated(stats);
-					}
-					fulfil();
-				});
-			}),
-
-			new Promise((fulfil, reject) => {
-				server.run((err, stats) => {
-					if (stats.hasErrors()) {
-						reject(stats.toJson().errors[0]);
-					} else {
-						server_updated(stats);
-					}
-					fulfil();
-				});
-			})
-		]).then(both_updated);
-	}
-
-	return compiler;
-};

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,8 +1,11 @@
 {
   "name": "sapper",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Military-grade apps, engineered by Svelte",
   "main": "lib/index.js",
+  "bin": {
+    "sapper": "cli/index.js"
+  },
   "directories": {
     "test": "test"
   },
@@ -10,12 +13,14 @@
     "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-dev-middleware": "^2.0.1",
     "webpack-hot-middleware": "^2.21.0"
   },
   "devDependencies": {
+    "eslint": "^4.13.1",
     "mocha": "^4.0.1"
   },
   "scripts": {

test/unit/create_routes.test.js

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