better CLI, more port control. fixes #169

package.json

@@ -25,7 +25,6 @@
     "code-frame": "^5.0.0",
     "escape-html": "^1.0.3",
     "express": "^4.16.2",
-    "get-port": "^3.2.0",
     "glob": "^7.1.2",
     "locate-character": "^2.0.5",
     "mkdirp": "^0.5.1",
@@ -35,10 +34,11 @@
     "relative": "^3.0.2",
     "require-relative": "^0.8.7",
     "rimraf": "^2.6.2",
+    "sade": "^1.4.0",
     "sander": "^0.6.0",
     "serialize-javascript": "^1.4.0",
     "source-map-support": "^0.5.3",
-    "tslib": "^1.8.1",
+    "tslib": "^1.9.0",
     "url-parse": "^1.2.0",
     "walk-sync": "^0.3.2",
     "webpack-format-messages": "^1.0.1"

src/cli/build.ts

@@ -1,5 +1,6 @@
 import * as fs from 'fs';
 import * as path from 'path';
+import chalk from 'chalk';
 import mkdirp from 'mkdirp';
 import rimraf from 'rimraf';
 import { create_compilers, create_app, create_routes, create_serviceworker } from 'sapper/core.js'
@@ -19,9 +20,15 @@ export default async function build() {
 	const { client, server, serviceworker } = create_compilers();
 
 	const client_stats = await compile(client);
+	console.log(chalk.inverse(`\nbuilt client`));
+	console.log(client_stats.toString({ colors: true }));
 	fs.writeFileSync(path.join(output, 'client_info.json'), JSON.stringify(client_stats.toJson()));
 
-	await compile(server);
+	const server_stats = await compile(server);
+	console.log(chalk.inverse(`\nbuilt server`));
+	console.log(server_stats.toString({ colors: true }));
+
+	let serviceworker_stats;
 
 	if (serviceworker) {
 		create_serviceworker({
@@ -30,7 +37,9 @@ export default async function build() {
 			src
 		});
 
-		await compile(serviceworker);
+		serviceworker_stats = await compile(serviceworker);
+		console.log(chalk.inverse(`\nbuilt service worker`));
+		console.log(serviceworker_stats.toString({ colors: true }));
 	}
 }
 

src/cli/dev.ts

@@ -8,7 +8,7 @@ import mkdirp from 'mkdirp';
 import rimraf from 'rimraf';
 import format_messages from 'webpack-format-messages';
 import prettyMs from 'pretty-ms';
-import { wait_for_port } from './utils';
+import * as port_utils from './port-utils';
 import { dest } from '../config';
 import { create_compilers, create_app, create_routes, create_serviceworker } from 'sapper/core.js';
 
@@ -70,15 +70,14 @@ function create_hot_update_server(port: number, interval = 10000) {
 	return { send };
 }
 
-export default async function dev() {
+export default async function dev(port: number) {
 	process.env.NODE_ENV = 'development';
 
 	const dir = dest();
 	rimraf.sync(dir);
 	mkdirp.sync(dir);
 
-	// initial build
-	const dev_port = await require('get-port')(10000);
+	const dev_port = await port_utils.find(10000);
 
 	const routes = create_routes();
 	create_app({ routes, dev_port });
@@ -109,7 +108,7 @@ export default async function dev() {
 		unique_errors: new Set()
 	};
 
-	function restart_build(filename) {
+	function restart_build(filename: string) {
 		if (restarting) return;
 
 		restarting = true;
@@ -206,7 +205,7 @@ export default async function dev() {
 
 			deferreds.client.promise.then(() => {
 				function restart() {
-					wait_for_port(3000).then(deferreds.server.fulfil); // TODO control port
+					port_utils.wait(3000).then(deferreds.server.fulfil); // TODO control port
 				}
 
 				if (proc) {
@@ -218,7 +217,9 @@ export default async function dev() {
 
 				proc = child_process.fork(`${dir}/server.js`, [], {
 					cwd: process.cwd(),
-					env: Object.assign({}, process.env)
+					env: Object.assign({
+						PORT: port
+					}, process.env)
 				});
 			});
 		}

src/cli/export.ts

@@ -5,7 +5,7 @@ import express from 'express';
 import cheerio from 'cheerio';
 import URL from 'url-parse';
 import fetch from 'node-fetch';
-import { wait_for_port } from './utils';
+import * as port_utils from './port-utils';
 import { dest } from '../config';
 
 const app = express();
@@ -27,7 +27,7 @@ export default async function exporter(export_dir: string) {
 		sander.copyFileSync(build_dir, 'service-worker.js').to(export_dir, 'service-worker.js');
 	}
 
-	const port = await require('get-port')(3000);
+	const port = await port_utils.find(3000);
 
 	const origin = `http://localhost:${port}`;
 
@@ -88,7 +88,7 @@ export default async function exporter(export_dir: string) {
 			});
 	}
 
-	wait_for_port(port)
+	return port_utils.wait(port)
 		.then(() => handle(new URL(origin))) // TODO all static routes
 		.then(() => proc.kill());
 }

src/cli/help.md

@@ -1,20 +0,0 @@
-# sapper v<@version@>
-
-https://sapper.svelte.technology
-
-> sapper dev
-
-Start a development server
-
-> sapper build
-
-Creates a production-ready version of your app
-
-> sapper export
-
-If possible, exports your app as static files, suitable for hosting on
-services like Netlify or Surge
-
-> sapper --help
-
-Shows this message

src/cli/index.ts

@@ -1,89 +1,114 @@
 import * as path from 'path';
 import * as child_process from 'child_process';
+import sade from 'sade';
 import mri from 'mri';
 import chalk from 'chalk';
+import prettyMs from 'pretty-ms';
 import help from './help.md';
 import build from './build';
 import exporter from './export';
 import dev from './dev';
 import upgrade from './upgrade';
+import * as port_utils from './port-utils';
+import { exists } from '../utils';
 import * as pkg from '../../package.json';
 
-const opts = mri(process.argv.slice(2), {
-	alias: {
-		h: 'help'
-	}
-});
+const prog = sade('sapper');
 
-if (opts.help) {
-	const rendered = help
-		.replace('<@version@>', pkg.version)
-		.replace(/^(.+)/gm, (m: string, $1: string) => /[#>]/.test(m) ? $1 : `  ${$1}`)
-		.replace(/^# (.+)/gm, (m: string, $1: string) => chalk.bold.underline($1))
-		.replace(/^> (.+)/gm, (m: string, $1: string) => chalk.cyan($1));
+prog.version(pkg.version);
 
-	console.log(`\n${rendered}\n`);
-	process.exit(0);
-}
+prog.command('dev')
+	.describe('Start a development server')
+	.option('-p, --port', 'Specify a port')
+	.action(async ({ port }: { port: number }) => {
+		if (port) {
+			if (!await port_utils.check(port)) {
+				console.log(chalk.bold.red(`> Port ${port} is unavailable`));
+				return;
+			}
+		} else {
+			port = await port_utils.find(3000);
+		}
 
-const [cmd] = opts._;
+		dev(port);
+	});
 
-const start = Date.now();
+prog.command('build [dest]')
+	.describe('Create a production-ready version of your app')
+	.action((dest = 'build') => {
+		console.log(`> Building...`);
 
-switch (cmd) {
-	case 'build':
 		process.env.NODE_ENV = 'production';
-		process.env.SAPPER_DEST = opts._[1] || 'build';
+		process.env.SAPPER_DEST = dest;
+
+		const start = Date.now();
 
 		build()
 			.then(() => {
 				const elapsed = Date.now() - start;
-				console.error(`built in ${elapsed}ms`); // TODO beautify this, e.g. 'built in 4.7 seconds'
+				console.error(`\n> Finished in ${prettyMs(elapsed)}. Type ${chalk.bold.cyan(dest === 'build' ? 'npx sapper start' : `npx sapper start ${dest}`)} to run the app.`);
 			})
 			.catch(err => {
 				console.error(err ? err.details || err.stack || err.message || err : 'Unknown error');
 			});
+	});
 
-		break;
+prog.command('start [dir]')
+	.describe('Start your app')
+	.option('-p, --port', 'Specify a port')
+	.action(async (dir = 'build', { port }: { port: number }) => {
+		const resolved = path.resolve(dir);
+		const server = path.resolve(dir, 'server.js');
 
-	case 'export':
-		process.env.NODE_ENV = 'production';
+		if (!exists(server)) {
+			console.log(chalk.bold.red(`> ${dir}/server.js does not exist — type ${chalk.bold.cyan(dir === 'build' ? `npx sapper build` : `npx sapper build ${dir}`)} to create it`));
+			return;
+		}
 
-		const export_dir = opts._[1] || 'export';
+		if (port) {
+			if (!await port_utils.check(port)) {
+				console.log(chalk.bold.red(`> Port ${port} is unavailable`));
+				return;
+			}
+		} else {
+			port = await port_utils.find(3000);
+		}
 
-		build()
-			.then(() => exporter(export_dir))
-			.then(() => {
-				const elapsed = Date.now() - start;
-				console.error(`extracted in ${elapsed}ms`); // TODO beautify this, e.g. 'built in 4.7 seconds'
-			})
-			.catch(err => {
-				console.error(err ? err.details || err.stack || err.message || err : 'Unknown error');
-			});
-
-		break;
-
-	case 'dev':
-		dev();
-		break;
-
-	case 'upgrade':
-		upgrade();
-		break;
-
-	case 'start':
-		const dir = path.resolve(opts._[1] || 'build');
-
-		child_process.fork(`${dir}/server.js`, [], {
+		child_process.fork(server, [], {
 			cwd: process.cwd(),
 			env: Object.assign({
 				NODE_ENV: 'production',
+				PORT: port,
 				SAPPER_DEST: dir
 			}, process.env)
 		});
+	});
 
-		break;
+prog.command('export [dest]')
+	.describe('Export your app as static files (if possible)')
+	.action((dest = 'export') => {
+		console.log(`> Building...`);
 
-	default:
-		console.log(`unrecognized command ${cmd} — try \`sapper --help\` for more information`);
-}
+		process.env.NODE_ENV = 'production';
+		process.env.SAPPER_DEST = '.sapper/.export';
+
+		const start = Date.now();
+
+		build()
+			.then(() => {
+				const elapsed = Date.now() - start;
+				console.error(`\n> Built in ${prettyMs(elapsed)}. Exporting...`);
+			})
+			.then(() => exporter(dest))
+			.then(() => {
+				const elapsed = Date.now() - start;
+				console.error(`\n> Finished in ${prettyMs(elapsed)}. Type ${chalk.bold.cyan(`npx serve ${dest}`)} to run the app.`);
+			})
+			.catch(err => {
+				console.error(err ? err.details || err.stack || err.message || err : 'Unknown error');
+			});
+	});
+
+// TODO upgrade
+
+prog.parse(process.argv);

src/cli/port-utils.ts

@@ -0,0 +1,66 @@
+import * as net from 'net';
+
+export function check(port: number) {
+	return new Promise(fulfil => {
+		const server = net.createServer();
+
+		server.unref();
+
+		server.on('error', () => {
+			fulfil(false);
+		});
+
+		server.listen({ port }, () => {
+			server.close(() => {
+				fulfil(true);
+			});
+		});
+	});
+}
+
+export function find(port: number): Promise<number> {
+	return new Promise((fulfil) => {
+		get_port(port, fulfil);
+	});
+}
+
+function get_port(port: number, cb: (port: number) => void) {
+	const server = net.createServer();
+
+	server.unref();
+
+	server.on('error', () => {
+		get_port(port + 1, cb);
+	});
+
+	server.listen({ port }, () => {
+		server.close(() => {
+			cb(port);
+		});
+	});
+}
+
+export function wait(port: number, timeout = 5000) {
+	return new Promise((fulfil, reject) => {
+		get_connection(port, fulfil);
+		setTimeout(() => reject(new Error(`timed out waiting for connection`)), timeout);
+	});
+}
+
+function get_connection(port: number, cb: () => void) {
+	const socket = net.connect(port, 'localhost', () => {
+		cb();
+		socket.destroy();
+	});
+
+	socket.on('error', err => {
+		setTimeout(() => {
+			get_connection(port, cb);
+		}, 10);
+	});
+
+	setTimeout(() => {
+		socket.destroy();
+	}, 1000);
+}
+

src/cli/utils.ts

@@ -1,25 +0,0 @@
-import * as net from 'net';
-
-export function wait_for_port(port: number, timeout = 5000) {
-	return new Promise((fulfil, reject) => {
-		get_connection(port, fulfil);
-		setTimeout(() => reject(new Error(`timed out waiting for connection`)), timeout);
-	});
-}
-
-export function get_connection(port: number, cb: () => void) {
-	const socket = net.createConnection(port, 'localhost', () => {
-		cb();
-		socket.destroy();
-	});
-
-	socket.on('error', err => {
-		setTimeout(() => {
-			get_connection(port, cb);
-		}, 10);
-	});
-
-	setTimeout(() => {
-		socket.destroy();
-	}, 1000);
-}

src/middleware/index.ts

@@ -7,6 +7,7 @@ import serialize from 'serialize-javascript';
 import escape_html from 'escape-html';
 import { lookup } from './mime';
 import { create_routes, templates, create_compilers } from 'sapper/core.js';
+import { exists } from '../utils';
 import { dest, dev } from '../config';
 import { Route, Template } from '../interfaces';
 import sourceMapSupport from 'source-map-support';
@@ -336,13 +337,4 @@ function try_serialize(data: any) {
 	} catch (err) {
 		return null;
 	}
-}
-
-function exists(file: string) {
-	try {
-		fs.statSync(file);
-		return true;
-	} catch (err) {
-		return false;
-	}
 }

src/utils.ts

@@ -0,0 +1,10 @@
+import * as fs from 'fs';
+
+export function exists(file: string) {
+	try {
+		fs.statSync(file);
+		return true;
+	} catch (err) {
+		return false;
+	}
+}