make selector customisable

connect.js

@@ -21,7 +21,7 @@ module.exports = function connect(opts) {
 	let server_routes = glob.sync('**/*.+(js|mjs)', { cwd: routes });
 	let server_route_matchers = create_matchers(server_routes);
 
-	create_app(routes, out, page_matchers, opts.dev);
+	create_app(routes, out, page_matchers, opts);
 
 	const webpack_compiler = create_webpack_compiler(
 		path.join(out, 'main.js'),
@@ -43,16 +43,22 @@ module.exports = function connect(opts) {
 				const params = matcher.exec(url);
 				const Component = require(`${routes}/${matcher.file}`);
 
-				const app = await webpack_compiler.app;
+				const main = await webpack_compiler.app;
 
 				const page = opts.template({
-					app,
+					main,
 					html: Component.render({
 						params,
 						query: req.query
 					})
 				});
 
+				res.status(200);
+				res.set({
+					// TODO etag stuff
+					'Content-Length': page.length,
+					'Content-Type': 'text/html'
+				});
 				res.end(page);
 				return;
 			}

templates/main.js

@@ -13,7 +13,7 @@ window.addEventListener('popstate', event => {
 	navigate(window.location);
 });
 
-const target = document.querySelector('main');
+const target = document.querySelector('__selector__');
 let component;
 
 function navigate(url) {

utils/create_app.js

@@ -3,7 +3,7 @@ const path = require('path');
 
 const template = fs.readFileSync(path.resolve(__dirname, '../templates/main.js'), 'utf-8');
 
-module.exports = function create_app(routes, dest, matchers, dev) {
+module.exports = function create_app(routes, dest, matchers, options) {
 	// TODO in dev mode, watch files
 
 	const code = matchers
@@ -32,7 +32,9 @@ module.exports = function create_app(routes, dest, matchers, dev) {
 		})
 		.join(' else ') + ' else return false;';
 
-	const main = template.replace('// ROUTES', code);
+	const main = template
+		.replace('__selector__', options.selector || 'main')
+		.replace('// ROUTES', code);
 
 	fs.writeFileSync(path.join(dest, 'main.js'), main);
 };