easier templates

connect.js

@@ -5,6 +5,7 @@ const path = require('path');
 const glob = require('glob');
 const rimraf = require('rimraf');
 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');
 
@@ -31,10 +32,15 @@ module.exports = function connect(opts) {
 		opts.dev
 	);
 
+	const templates = create_templates();
+
 	return async function(req, res, next) {
 		const url = req.url.replace(/\?.+/, '');
 
 		if (url.startsWith('/client/')) {
+			res.set({
+				'Content-Type': 'application/javascript'
+			});
 			fs.createReadStream(`${dest}${url}`).pipe(res);
 			return;
 		}
@@ -55,10 +61,10 @@ module.exports = function connect(opts) {
 
 						const { html, css } = mod.default.render(data);
 
-						const page = opts.template({
+						const page = templates.render(200, {
 							main,
 							html,
-							css: (css && css.code || '')
+							styles: (css && css.code ? `<style>${css.code}</style>` : '')
 						});
 
 						res.status(200);

runtime/router.js

@@ -1,6 +1,5 @@
 const router = {
 	init(callback) {
-		console.log('initing');
 		window.addEventListener('click', event => {
 			let a = event.target;
 			while (a && a.nodeName !== 'A') a = a.parentNode;

utils/create_templates.js

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