wip 3

src/cli/index.js

@@ -1,10 +1,11 @@
 import { build, export as exporter } from 'sapper/core.js';
+import { dest, dev, entry, src } from '../config.js';
 
 const cmd = process.argv[2];
 const start = Date.now();
 
 if (cmd === 'build') {
-	build()
+	build({ dest, dev, entry, src })
 		.then(() => {
 			const elapsed = Date.now() - start;
 			console.error(`built in ${elapsed}ms`); // TODO beautify this, e.g. 'built in 4.7 seconds'
@@ -15,8 +16,8 @@ if (cmd === 'build') {
 } else if (cmd === 'export') {
 	const start = Date.now();
 
-	build()
-		.then(() => exporter())
+	build({ dest, dev, entry, src })
+		.then(() => exporter({ src, dest }))
 		.then(() => {
 			const elapsed = Date.now() - start;
 			console.error(`extracted in ${elapsed}ms`); // TODO beautify this, e.g. 'built in 4.7 seconds'

src/core/build.js

@@ -4,17 +4,16 @@ import * as fs from 'fs';
 import * as path from 'path';
 import mkdirp from 'mkdirp';
 import rimraf from 'rimraf';
-import { client, server } from './utils/compilers.js';
+import * as compilers from './utils/compilers.js';
 import create_app from './utils/create_app.js';
 import generate_asset_cache from './generate_asset_cache.js';
-import { dest } from '../config.js';
 
-export default () => {
+export default function build({ dest, dev, entry, src }) {
 	mkdirp.sync(dest);
 	rimraf.sync(path.join(dest, '**/*'));
 
 	// create main.js and server-routes.js
-	create_app();
+	create_app({ dev, entry, src });
 
 	return new Promise((fulfil, reject) => {
 		function handleErrors(err, stats) {
@@ -29,19 +28,21 @@ export default () => {
 			}
 		}
 
-		client.run((err, clientStats) => {
-			handleErrors(err, clientStats);
-			const clientInfo = clientStats.toJson();
-			fs.writeFileSync(path.join(dest, 'stats.client.json'), JSON.stringify(clientInfo, null, '  '));
+		const { client, server } = compilers.get_compilers(); // TODO refactor
 
-			server.run((err, serverStats) => {
-				handleErrors(err, serverStats);
-				const serverInfo = serverStats.toJson();
-				fs.writeFileSync(path.join(dest, 'stats.server.json'), JSON.stringify(serverInfo, null, '  '));
+		client.run((err, client_stats) => {
+			handleErrors(err, client_stats);
+			const client_info = client_stats.toJson();
+			fs.writeFileSync(path.join(dest, 'stats.client.json'), JSON.stringify(client_info, null, '  '));
 
-				generate_asset_cache(clientInfo, serverInfo);
+			server.run((err, server_stats) => {
+				handleErrors(err, server_stats);
+				const server_info = server_stats.toJson();
+				fs.writeFileSync(path.join(dest, 'stats.server.json'), JSON.stringify(server_info, null, '  '));
+
+				generate_asset_cache({ src, dest, dev, client_info, server_info });
 				fulfil();
 			});
 		});
 	});
-};
+}

src/core/export.js

@@ -5,8 +5,7 @@ import cheerio from 'cheerio';
 import fetch from 'node-fetch';
 import URL from 'url-parse';
 import generate_asset_cache from './generate_asset_cache.js';
-import { dest } from '../config.js';
-import middleware from '../middleware/index.js';
+// import middleware from '../middleware/index.js';
 
 const { PORT = 3000, OUTPUT_DIR = 'dist' } = process.env;
 
@@ -18,14 +17,16 @@ function read_json(file) {
 	return JSON.parse(sander.readFileSync(file, { encoding: 'utf-8' }));
 }
 
-export default function() {
+export default function exporter({ src, dest }) { // TODO dest is a terrible name in this context
 	// Prep output directory
 	sander.rimrafSync(OUTPUT_DIR);
 
-	const { service_worker } = generate_asset_cache(
-		read_json(path.join(dest, 'stats.client.json')),
-		read_json(path.join(dest, 'stats.server.json'))
-	);
+	const { service_worker } = generate_asset_cache({
+		src, dest,
+		dev: false,
+		client_info: read_json(path.join(dest, 'stats.client.json')),
+		server_info: read_json(path.join(dest, 'stats.server.json'))
+	});
 
 	sander.copydirSync('assets').to(OUTPUT_DIR);
 	sander.copydirSync(dest, 'client').to(OUTPUT_DIR, 'client');
@@ -62,7 +63,7 @@ export default function() {
 		return fetch(url, opts);
 	};
 
-	app.use(middleware());
+	app.use(require('./middleware')()); // TODO this is filthy
 	const server = app.listen(PORT);
 
 	const seen = new Set();

src/core/generate_asset_cache.js

@@ -3,18 +3,19 @@ import * as path from 'path';
 import glob from 'glob';
 import * as templates from './templates.js';
 import * as route_manager from './route_manager.js';
-import { dest, dev } from '../config.js';
 
 function ensure_array(thing) {
 	return Array.isArray(thing) ? thing : [thing]; // omg webpack what the HELL are you doing
 }
 
-export default function generate_asset_cache(clientInfo, serverInfo) {
-	const main_file = `/client/${ensure_array(clientInfo.assetsByChunkName.main)[0]}`;
+export default function generate_asset_cache({ src, dest, dev, client_info, server_info }) {
+	templates.create_templates(); // TODO refactor this...
 
-	const chunk_files = clientInfo.assets.map(chunk => `/client/${chunk.name}`);
+	const main_file = `/client/${ensure_array(client_info.assetsByChunkName.main)[0]}`;
 
-	const service_worker = generate_service_worker(chunk_files);
+	const chunk_files = client_info.assets.map(chunk => `/client/${chunk.name}`);
+
+	const service_worker = generate_service_worker({ chunk_files, src });
 	const index = generate_index(main_file);
 
 	if (dev) {
@@ -34,7 +35,7 @@ export default function generate_asset_cache(clientInfo, serverInfo) {
 			}, {}),
 
 			routes: route_manager.routes.reduce((lookup, route) => {
-				lookup[route.id] = `/client/${ensure_array(clientInfo.assetsByChunkName[route.id])[0]}`;
+				lookup[route.id] = `/client/${ensure_array(client_info.assetsByChunkName[route.id])[0]}`;
 				return lookup;
 			}, {}),
 
@@ -43,16 +44,18 @@ export default function generate_asset_cache(clientInfo, serverInfo) {
 		},
 
 		server: {
-			entry: path.resolve(dest, 'server', serverInfo.assetsByChunkName.main)
+			entry: path.resolve(dest, 'server', server_info.assetsByChunkName.main)
 		},
 
 		service_worker
 	};
 }
 
-function generate_service_worker(chunk_files) {
+function generate_service_worker({ chunk_files, src }) {
 	const assets = glob.sync('**', { cwd: 'assets', nodir: true });
 
+	route_manager.update({ src }); // TODO refactor
+
 	const route_code = `[${
 		route_manager.routes
 			.filter(route => route.type === 'page')

src/core/index.js

@@ -6,5 +6,6 @@ export { default as build } from './build.js';
 export { default as export } from './export.js';
 export { default as generate_asset_cache } from './generate_asset_cache.js';
 export { default as create_app } from './utils/create_app.js';
+export { default as create_routes } from './utils/create_routes.js';
 
 export { compilers, route_manager, templates };

src/core/route_manager.js

@@ -1,32 +1,12 @@
 import glob from 'glob';
 import create_routes from './utils/create_routes.js';
-import { src, dev } from '../config.js';
-
-const callbacks = [];
-
-export function onchange(fn) {
-	callbacks.push(fn);
-}
 
 export let routes;
 
-function update() {
+export function update({ src }) {
 	routes = create_routes(
 		glob.sync('**/*.+(html|js|mjs)', { cwd: src })
 	);
 
-	callbacks.forEach(fn => fn());
-}
-
-update();
-
-if (dev) {
-	const watcher = require('chokidar').watch(`${src}/**/*.+(html|js|mjs)`, {
-		ignoreInitial: true,
-		persistent: false
-	});
-
-	watcher.on('add', update);
-	watcher.on('change', update);
-	watcher.on('unlink', update);
-}
+	return routes;
+}

src/core/templates.js

@@ -3,7 +3,6 @@ import glob from 'glob';
 import chalk from 'chalk';
 import framer from 'code-frame';
 import { locate } from 'locate-character';
-import { dev } from '../config.js';
 
 let templates;
 
@@ -16,7 +15,7 @@ function error(e) {
 	process.exit(1);
 }
 
-function create_templates() {
+export function create_templates() {
 	templates = glob.sync('*.html', { cwd: 'templates' })
 		.map(file => {
 			const template = fs.readFileSync(`templates/${file}`, 'utf-8');
@@ -99,19 +98,6 @@ function create_templates() {
 		.sort((a, b) => b.specificity - a.specificity);
 }
 
-create_templates();
-
-if (dev) {
-	const watcher = require('chokidar').watch('templates/**.html', {
-		ignoreInitial: true,
-		persistent: false
-	});
-
-	watcher.on('add', create_templates);
-	watcher.on('change', create_templates);
-	watcher.on('unlink', create_templates);
-}
-
 export function render(status, data) {
 	const template = templates.find(template => template.test(status));
 	if (template) return template.render(data);

src/core/utils/compilers.js

@@ -3,10 +3,25 @@ import relative from 'require-relative';
 
 const webpack = relative('webpack', process.cwd());
 
-export const client = webpack(
-	require(path.resolve('webpack.client.config.js'))
-);
+export let client;
+export let server;
 
-export const server = webpack(
-	require(path.resolve('webpack.server.config.js'))
-);
+export function get_compilers() {
+	return {
+		client: webpack(
+			require(path.resolve('webpack.client.config.js'))
+		),
+
+		server: webpack(
+			require(path.resolve('webpack.server.config.js'))
+		)
+	};
+}
+
+// export const client = webpack(
+// 	require(path.resolve('webpack.client.config.js'))
+// );
+
+// export const server = webpack(
+// 	require(path.resolve('webpack.server.config.js'))
+// );

src/core/utils/create_app.js

@@ -1,13 +1,15 @@
 import * as fs from 'fs';
 import * as path from 'path';
 import * as route_manager from '../route_manager.js';
-import { src, entry, dev } from '../../config.js';
+import * as templates from '../templates.js';
 
 function posixify(file) {
 	return file.replace(/[/\\]/g, '/');
 }
 
-function create_app() {
+function create_app({ src, dev, entry }) {
+	// const { routes } = route_manager;
+	route_manager.update({ src });
 	const { routes } = route_manager;
 
 	function create_client_main() {
@@ -66,17 +68,31 @@ function create_app() {
 	create_server_routes();
 }
 
-if (dev) {
-	route_manager.onchange(create_app);
+export function start_watching({ src }) {
+	const chokidar = require('chokidar');
 
-	const watcher = require('chokidar').watch(`templates/main.js`, {
-		ignoreInitial: true,
-		persistent: false
+	const watch = (glob, callback) => {
+		const watcher = chokidar.watch(glob, {
+			ignoreInitial: true,
+			persistent: false
+		});
+
+		watcher.on('add', callback);
+		watcher.on('change', callback);
+		watcher.on('unlink', callback);
+	};
+
+	watch('templates/main.js', create_app);
+
+	watch('routes/**/*.+(html|js|mjs)', () => {
+		route_manager.update({ src });
+		create_app();
 	});
 
-	watcher.on('add', create_app);
-	watcher.on('change', create_app);
-	watcher.on('unlink', create_app);
+	watch('templates/**.html', () => {
+		templates.create_templates();
+		// TODO reload current page?
+	});
 }
 
 export default create_app;

src/core/utils/create_routes.js

@@ -1,6 +1,6 @@
 import * as path from 'path';
 
-export default function create_matchers(files) {
+export default function create_routes(files) {
 	const routes = files
 		.map(file => {
 			if (/(^|\/|\\)_/.test(file)) return;

src/middleware/index.js

@@ -4,10 +4,10 @@ import serialize from 'serialize-javascript';
 import escape_html from 'escape-html';
 import { route_manager, templates, create_app, compilers, generate_asset_cache } from 'sapper/core.js';
 import create_watcher from './create_watcher.js';
-import { dest, dev } from '../config.js';
+import { dest, dev, entry, src } from '../config.js';
 
 function connect_dev() {
-	create_app();
+	create_app({ dev, entry, src });
 
 	const watcher = create_watcher();
 
@@ -64,10 +64,12 @@ function connect_dev() {
 }
 
 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'))
-	);
+	const asset_cache = generate_asset_cache({
+		src, dest,
+		dev: false,
+		client_info: read_json(path.join(dest, 'stats.client.json')),
+		server_info: read_json(path.join(dest, 'stats.server.json'))
+	});
 
 	const middleware = compose_handlers([
 		set_req_pathname,