-> v0.0.15

connect.js

@@ -5,10 +5,10 @@ const path = require('path');
 const glob = require('glob');
 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 create_routes = require('./lib/utils/create_routes.js');
+const templates = require('./lib/templates.js');
+const create_app = require('./lib/utils/create_app.js');
+const create_webpack_compiler = require('./lib/utils/create_webpack_compiler.js');
 const escape_html = require('escape-html');
 const { src, dest, dev } = require('./lib/config.js');
 
@@ -32,14 +32,13 @@ module.exports = function connect(opts) {
 		dev
 	);
 
-	const templates = create_templates();
-
 	return async function(req, res, next) {
 		const url = req.url.replace(/\?.+/, '');
 
-		if (url.startsWith('/client/')) {
+		if (url === '/service-worker.js' || url === '/index.html' || url.startsWith('/client/')) {
+			await webpack_compiler.ready;
 			res.set({
-				'Content-Type': 'application/javascript'
+				'Content-Type': url === '/index.html' ? 'text/html' : 'application/javascript'
 			});
 			fs.createReadStream(`${dest}${url}`).pipe(res);
 			return;
@@ -53,21 +52,21 @@ module.exports = function connect(opts) {
 		try {
 			for (const route of routes) {
 				if (route.test(url)) {
+					await webpack_compiler.ready;
+
 					req.params = route.exec(url);
 
-					const chunk = await webpack_compiler.get_chunk(route.id);
-					const mod = require(chunk);
+					const chunk = webpack_compiler.chunks[route.id];
+					const mod = require(path.resolve(dest, 'server', chunk));
 
 					if (route.type === 'page') {
-						const main = await webpack_compiler.client_main;
-
 						let data = { params: req.params, query: req.query };
 						if (mod.default.preload) data = Object.assign(data, await mod.default.preload(data));
 
 						const { html, head, css } = mod.default.render(data);
 
 						const page = templates.render(200, {
-							main,
+							main: webpack_compiler.client_main,
 							html,
 							head: `<noscript id='sapper-head-start'></noscript>${head}<noscript id='sapper-head-end'></noscript>`,
 							styles: (css && css.code ? `<style>${css.code}</style>` : '')

lib/route_manager.js

@@ -1,5 +1,5 @@
 const glob = require('glob');
-const create_routes = require('../utils/create_routes.js');
+const create_routes = require('./utils/create_routes.js');
 const { src } = require('./config.js');
 
 const 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/create_app.js

@@ -1,7 +1,7 @@
 const fs = require('fs');
 const path = require('path');
 
-const template = fs.readFileSync(path.resolve(__dirname, '../templates/main.js'), 'utf-8');
+const template = fs.readFileSync(path.resolve(__dirname, '../../templates/main.js'), 'utf-8');
 
 module.exports = function create_app(src, dest, routes, options) {
 	// TODO in dev mode, watch files
@@ -18,7 +18,7 @@ module.exports = function create_app(src, dest, routes, options) {
 		.join(',\n\t');
 
 	const main = template
-		.replace('__app__', path.resolve(__dirname, '../runtime/app.js'))
+		.replace('__app__', path.resolve(__dirname, '../../runtime/app.js'))
 		.replace('__selector__', options.selector || 'main')
 		.replace('__routes__', code);
 

lib/utils/create_webpack_compiler.js

@@ -0,0 +1,100 @@
+const fs = require('fs');
+const path = require('path');
+const glob = require('glob');
+const webpack = require('webpack');
+const templates = require('../templates.js');
+
+module.exports = function create_webpack_compiler(dest, routes, dev) {
+	const compiler = {};
+
+	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.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(`/client/${filename}`);
+			});
+		});
+
+		// TODO server
+	} else {
+		compiler.ready = Promise.all([
+			new Promise((fulfil, reject) => {
+				client.run((err, stats) => {
+					console.log(stats.toString({ colors: true }));
+
+					const info = stats.toJson();
+
+					if (err || stats.hasErrors()) {
+						reject(err || info.errors[0]);
+					}
+
+					compiler.client_main = `/client/${info.assetsByChunkName.main}`;
+					compiler.assets = info.assets.map(asset => `/client/${asset.name}`);
+
+					fulfil();
+				});
+			}),
+
+			new Promise((fulfil, reject) => {
+				server.run((err, stats) => {
+					console.log(stats.toString({ colors: true }));
+
+					const info = stats.toJson();
+
+					if (err || stats.hasErrors()) {
+						reject(err || info.errors[0]);
+					}
+
+					compiler.chunks = info.assetsByChunkName;
+
+					fulfil();
+				});
+			})
+		]).then(() => {
+			const assets = glob.sync('**', { cwd: 'assets' });
+
+			const route_code = `[${
+				routes
+					.filter(route => route.type === 'page')
+					.map(route => `{ pattern: ${route.pattern} }`)
+					.join(', ')
+			}]`;
+
+			const 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);
+
+			fs.writeFileSync(path.resolve(dest, 'service-worker.js'), service_worker);
+
+			const shell = templates.render(200, {
+				styles: '',
+				head: '',
+				html: '<noscript>Please enable JavaScript!</noscript>',
+				main: compiler.client_main
+			});
+
+			fs.writeFileSync(path.resolve(dest, 'index.html'), shell);
+		});
+
+		compiler.get_chunk = async id => {
+			return path.resolve(dest, 'server', compiler.chunks[id]);
+		};
+	}
+
+	return compiler;
+};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sapper",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "description": "Combat-ready apps, engineered by Svelte",
   "main": "connect.js",
   "directories": {

utils/create_templates.js

@@ -1,42 +0,0 @@
-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,63 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-const webpack = require('webpack');
-
-module.exports = function create_webpack_compiler(out, routes, dev) {
-	const compiler = {};
-
-	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.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(`/client/${filename}`);
-			});
-		});
-
-		// TODO server
-	} else {
-		compiler.client_main = new Promise((fulfil, reject) => {
-			client.run((err, stats) => {
-				console.log(stats.toString({ colors: true }));
-
-				if (err || stats.hasErrors()) {
-					reject(err || stats.toJson().errors[0]);
-				}
-
-				const filename = stats.toJson().assetsByChunkName.main;
-				fulfil(`/client/${filename}`);
-			});
-		});
-
-		const chunks = new Promise((fulfil, reject) => {
-			server.run((err, stats) => {
-				console.log(stats.toString({ colors: true }));
-
-				if (err || stats.hasErrors()) {
-					reject(err || stats.toJson().errors[0]);
-				}
-
-				fulfil(stats.toJson().assetsByChunkName);
-			});
-		});
-
-		compiler.get_chunk = async id => {
-			const assetsByChunkName = await chunks;
-			return path.resolve(out, 'server', assetsByChunkName[id]);
-		};
-	}
-
-	return compiler;
-};