implement --live and --hot - fixes #385

Author: Rich-Harris

src/api/dev.ts

@@ -29,14 +29,13 @@ class Watcher extends EventEmitter {
 	}
 	port: number;
 	closed: boolean;
+	live: boolean;
+	hot: boolean;
 
 	dev_server: DevServer;
 	proc: child_process.ChildProcess;
 	filewatchers: Array<{ close: () => void }>;
-	deferreds: {
-		client: Deferred;
-		server: Deferred;
-	};
+	deferred: Deferred;
 
 	crashed: boolean;
 	restarting: boolean;
@@ -51,6 +50,8 @@ class Watcher extends EventEmitter {
 		app = locations.app(),
 		dest = locations.dest(),
 		routes = locations.routes(),
+		live,
+		hot,
 		bundler,
 		webpack = 'webpack',
 		rollup = 'rollup',
@@ -59,6 +60,8 @@ class Watcher extends EventEmitter {
 		app: string,
 		dest: string,
 		routes: string,
+		live: boolean,
+		hot: boolean,
 		bundler?: string,
 		webpack: string,
 		rollup: string,
@@ -71,6 +74,9 @@ class Watcher extends EventEmitter {
 		this.port = port;
 		this.closed = false;
 
+		this.live = live;
+		this.hot = hot;
+
 		this.filewatchers = [];
 
 		this.current_build = {
@@ -159,10 +165,7 @@ class Watcher extends EventEmitter {
 			})
 		);
 
-		this.deferreds = {
-			server: new Deferred(),
-			client: new Deferred()
-		};
+		let deferred = new Deferred();
 
 		// TODO watch the configs themselves?
 		const compilers: Compilers = create_compilers(this.bundler, {
@@ -187,11 +190,10 @@ class Watcher extends EventEmitter {
 
 			invalid: filename => {
 				this.restart(filename, 'server');
-				this.deferreds.server = new Deferred();
 			},
 
 			handle_result: (result: CompileResult) => {
-				this.deferreds.client.promise.then(() => {
+				deferred.promise.then(() => {
 					const restart = () => {
 						log = '';
 						this.crashed = false;
@@ -203,11 +205,15 @@ class Watcher extends EventEmitter {
 									process: this.proc
 								});
 
-								this.deferreds.server.fulfil();
-
-								this.dev_server.send({
-									status: 'completed'
-								});
+								if (this.live) {
+									this.dev_server.send({
+										action: 'reload'
+									});
+								} else {
+									this.dev_server.send({
+										status: 'completed'
+									});
+								}
 							}))
 							.catch(err => {
 								if (this.crashed) return;
@@ -263,7 +269,7 @@ class Watcher extends EventEmitter {
 
 			invalid: filename => {
 				this.restart(filename, 'client');
-				this.deferreds.client = new Deferred();
+				deferred = new Deferred();
 
 				// TODO we should delete old assets. due to a webpack bug
 				// i don't even begin to comprehend, this is apparently
@@ -276,7 +282,6 @@ class Watcher extends EventEmitter {
 					shimport: this.bundler === 'rollup' && require('shimport/package.json').version,
 					assets: result.assetsByChunkName
 				}, null, '  '));
-				this.deferreds.client.fulfil();
 
 				const client_files = result.assets.map((file: string) => `client/${file}`);
 
@@ -285,6 +290,8 @@ class Watcher extends EventEmitter {
 					client_files
 				});
 
+				deferred.fulfil();
+
 				// we need to wait a beat before watching the service
 				// worker, because of some webpack nonsense
 				setTimeout(watch_serviceworker, 100);

src/cli.ts

@@ -11,8 +11,16 @@ prog.command('dev')
 	.describe('Start a development server')
 	.option('-p, --port', 'Specify a port')
 	.option('-o, --open', 'Open a browser window')
+	.option('-l --live', 'Reload on changes', false)
+	.option('--hot', 'Use hot module replacement', true)
 	.option('--bundler', 'Specify a bundler (rollup or webpack)')
-	.action(async (opts: { port: number, open: boolean, bundler?: string }) => {
+	.action(async (opts: {
+		port: number,
+		open: boolean,
+		live: boolean,
+		hot: boolean,
+		bundler?: string
+	}) => {
 		const { dev } = await import('./cli/dev');
 		dev(opts);
 	});

src/middleware.ts

@@ -151,7 +151,7 @@ export default function middleware(opts: {
 
 		serve({
 			prefix: '/client/',
-			cache_control: 'max-age=31536000'
+			cache_control: dev() ? 'no-cache' : 'max-age=31536000'
 		}),
 
 		get_server_route_handler(manifest.server_routes),