-> v0.8.3

better CLI

.gitignore

@@ -5,6 +5,7 @@ cypress/screenshots
 test/app/.sapper
 test/app/app/manifest
 test/app/export
+test/app/build
 runtime.js
 runtime.js.map
 cli.js

CHANGELOG.md

@@ -1,5 +1,19 @@
 # sapper changelog
 
+## 0.8.3
+
+* Automatically select available port, or use `--port` flag for `dev` and `start` ([#169](https://github.com/sveltejs/sapper/issues/169))
+* Show stats after build/export ([#168](https://github.com/sveltejs/sapper/issues/168))
+* Various CLI improvements ([#170](https://github.com/sveltejs/sapper/pull/170))
+
+## 0.8.2
+
+* Rename `preloadRoutes` to `prefetchRoutes` ([#166](https://github.com/sveltejs/sapper/issues/166))
+
+## 0.8.1
+
+* Add `sapper start` command, for running an app built with `sapper build` ([#163](https://github.com/sveltejs/sapper/issues/163))
+
 ## 0.8.0
 
 * Update to webpack 4

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sapper",
-  "version": "0.8.0",
+  "version": "0.8.3",
   "description": "Military-grade apps, engineered by Svelte",
   "main": "middleware.js",
   "bin": {
@@ -25,20 +25,21 @@
     "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",
     "mri": "^1.1.0",
     "node-fetch": "^1.7.3",
+    "port-authority": "^1.0.0",
     "pretty-ms": "^3.1.0",
     "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"
@@ -53,6 +54,7 @@
     "electron": "^1.8.2",
     "eslint": "^4.13.1",
     "eslint-plugin-import": "^2.8.0",
+    "get-port": "^3.2.0",
     "mocha": "^4.0.1",
     "nightmare": "^2.10.0",
     "npm-run-all": "^4.1.2",

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 ports from 'port-authority';
 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 ports.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
+					ports.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 ports from 'port-authority';
 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 ports.find(3000);
 
 	const origin = `http://localhost:${port}`;
 
@@ -36,6 +36,7 @@ export default async function exporter(export_dir: string) {
 		env: {
 			PORT: port,
 			NODE_ENV: 'production',
+			SAPPER_DEST: build_dir,
 			SAPPER_EXPORT: 'true'
 		}
 	});
@@ -88,7 +89,7 @@ export default async function exporter(export_dir: string) {
 			});
 	}
 
-	wait_for_port(port)
+	return ports.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,63 +1,112 @@
+import * as fs from 'fs';
+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 ports from 'port-authority';
 import * as pkg from '../../package.json';
 
-const opts = mri(process.argv.slice(2), {
-	alias: {
-		h: 'help'
-	}
-});
+const prog = sade('sapper').version(pkg.version);
 
-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.command('dev')
+	.describe('Start a development server')
+	.option('-p, --port', 'Specify a port')
+	.action(async ({ port }: { port: number }) => {
+		if (port) {
+			if (!await ports.check(port)) {
+				console.log(chalk.bold.red(`> Port ${port} is unavailable`));
+				return;
+			}
+		} else {
+			port = await ports.find(3000);
+		}
 
-	console.log(`\n${rendered}\n`);
-	process.exit(0);
-}
+		dev(port);
+	});
 
-const [cmd] = opts._;
+prog.command('build [dest]')
+	.describe('Create a production-ready version of your app')
+	.action((dest = 'build') => {
+		console.log(`> Building...`);
 
-const start = Date.now();
+		process.env.NODE_ENV = 'production';
+		process.env.SAPPER_DEST = dest;
 
-if (cmd === 'build') {
-	process.env.NODE_ENV = 'production';
-	process.env.SAPPER_DEST = opts._[1] || 'build';
+		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'
-		})
-		.catch(err => {
-			console.error(err ? err.details || err.stack || err.message || err : 'Unknown error');
+		build()
+			.then(() => {
+				const elapsed = Date.now() - start;
+				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');
+			});
+	});
+
+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');
+
+		if (!fs.existsSync(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;
+		}
+
+		if (port) {
+			if (!await ports.check(port)) {
+				console.log(chalk.bold.red(`> Port ${port} is unavailable`));
+				return;
+			}
+		} else {
+			port = await ports.find(3000);
+		}
+
+		child_process.fork(server, [], {
+			cwd: process.cwd(),
+			env: Object.assign({
+				NODE_ENV: 'production',
+				PORT: port,
+				SAPPER_DEST: dir
+			}, process.env)
 		});
-} else if (cmd === 'export') {
-	process.env.NODE_ENV = 'production';
+	});
 
-	const export_dir = opts._[1] || 'export';
+prog.command('export [dest]')
+	.describe('Export your app as static files (if possible)')
+	.action((dest = 'export') => {
+		console.log(`> Building...`);
 
-	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');
-		});
-} else if (cmd === 'dev') {
-	dev();
-} else if (cmd === 'upgrade') {
-	upgrade();
-} else {
-	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/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

@@ -51,12 +51,12 @@ export default function middleware({ routes }: {
 			next();
 		},
 
-		exists(path.join(output, 'index.html')) && serve({
+		fs.existsSync(path.join(output, 'index.html')) && serve({
 			pathname: '/index.html',
 			cache_control: 'max-age=600'
 		}),
 
-		exists(path.join(output, 'service-worker.js')) && serve({
+		fs.existsSync(path.join(output, 'service-worker.js')) && serve({
 			pathname: '/service-worker.js',
 			cache_control: 'max-age=600'
 		}),
@@ -336,13 +336,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/runtime/index.ts

@@ -266,7 +266,7 @@ export function goto(href: string, opts = { replaceState: false }) {
 	}
 }
 
-export function preloadRoutes(pathnames: string[]) {
+export function prefetchRoutes(pathnames: string[]) {
 	if (!routes) throw new Error(`You must call init() first`);
 
 	return routes
@@ -281,4 +281,7 @@ export function preloadRoutes(pathnames: string[]) {
 		.reduce((promise: Promise<any>, route) => {
 			return promise.then(route.load);
 		}, Promise.resolve());
-}
+}
+
+// remove this in 0.9
+export { prefetchRoutes as preloadRoutes };

test/app/app/client.js

@@ -1,8 +1,8 @@
-import { init, preloadRoutes } from '../../../runtime.js';
+import { init, prefetchRoutes } from '../../../runtime.js';
 import { routes } from './manifest/client.js';
 
 window.init = () => {
 	return init(document.querySelector('#sapper'), routes);
 };
 
-window.preloadRoutes = preloadRoutes;
+window.prefetchRoutes = prefetchRoutes;

test/common/test.js

@@ -5,9 +5,8 @@ const express = require('express');
 const serve = require('serve-static');
 const walkSync = require('walk-sync');
 const fetch = require('node-fetch');
-
-run('production');
-run('development');
+const rimraf = require('rimraf');
+const ports = require('port-authority');
 
 Nightmare.action('page', {
 	title(done) {
@@ -23,15 +22,98 @@ Nightmare.action('init', function(done) {
 	this.evaluate_now(() => window.init(), done);
 });
 
-Nightmare.action('preloadRoutes', function(done) {
-	this.evaluate_now(() => window.preloadRoutes(), done);
+Nightmare.action('prefetchRoutes', function(done) {
+	this.evaluate_now(() => window.prefetchRoutes(), done);
+});
+
+const cli = path.resolve(__dirname, '../../cli.js');
+
+describe('sapper', function() {
+	process.chdir(path.resolve(__dirname, '../app'));
+
+	// clean up after previous test runs
+	rimraf.sync('export');
+	rimraf.sync('build');
+	rimraf.sync('.sapper');
+
+	this.timeout(30000);
+
+	// TODO reinstate dev tests
+	// run('development');
+	run('production');
+
+	describe('export', () => {
+		before(() => {
+			return exec(`node ${cli} export`);
+		});
+
+		it('export all pages', () => {
+			const dest = path.resolve(__dirname, '../app/export');
+
+			// Pages that should show up in the extraction directory.
+			const expectedPages = [
+				'index.html',
+				'about/index.html',
+				'slow-preload/index.html',
+
+				'blog/index.html',
+				'blog/a-very-long-post/index.html',
+				'blog/how-can-i-get-involved/index.html',
+				'blog/how-is-sapper-different-from-next/index.html',
+				'blog/how-to-use-sapper/index.html',
+				'blog/what-is-sapper/index.html',
+				'blog/why-the-name/index.html',
+
+				'blog.json',
+				'blog/a-very-long-post.json',
+				'blog/how-can-i-get-involved.json',
+				'blog/how-is-sapper-different-from-next.json',
+				'blog/how-to-use-sapper.json',
+				'blog/what-is-sapper.json',
+				'blog/why-the-name.json',
+
+				'favicon.png',
+				'global.css',
+				'great-success.png',
+				'manifest.json',
+				'service-worker.js',
+				'svelte-logo-192.png',
+				'svelte-logo-512.png',
+			];
+			// Client scripts that should show up in the extraction directory.
+			const expectedClientRegexes = [
+				/client\/[^/]+\/_(\.\d+)?\.js/,
+				/client\/[^/]+\/about(\.\d+)?\.js/,
+				/client\/[^/]+\/blog_\$slug\$(\.\d+)?\.js/,
+				/client\/[^/]+\/blog(\.\d+)?\.js/,
+				/client\/[^/]+\/main(\.\d+)?\.js/,
+				/client\/[^/]+\/show_url(\.\d+)?\.js/,
+				/client\/[^/]+\/slow_preload(\.\d+)?\.js/,
+			];
+			const allPages = walkSync(dest);
+
+			expectedPages.forEach((expectedPage) => {
+				assert.ok(allPages.includes(expectedPage),`Could not find page matching ${expectedPage}`);
+			});
+
+			expectedClientRegexes.forEach((expectedRegex) => {
+				// Ensure each client page regular expression matches at least one
+				// generated page.
+				let matched = false;
+				for (const page of allPages) {
+					if (expectedRegex.test(page)) {
+						matched = true;
+						break;
+					}
+				}
+				assert.ok(matched, `Could not find client page matching ${expectedRegex}`);
+			});
+		});
+	});
 });
 
 function run(env) {
 	describe(`env=${env}`, function () {
-		this.timeout(30000);
-
-		let PORT;
 		let proc;
 		let nightmare;
 		let capture;
@@ -39,28 +121,23 @@ function run(env) {
 		let base;
 
 		before(() => {
-			process.chdir(path.resolve(__dirname, '../app'));
+			const promise = env === 'production'
+				? exec(`node ${cli} build`).then(() => ports.find(3000))
+				: ports.find(3000).then(port => {
+					exec(`node ${cli} dev`);
+					return ports.wait(port).then(() => port);
+				});
 
-			let exec_promise = Promise.resolve();
-
-			if (env === 'production') {
-				const cli = path.resolve(__dirname, '../../cli.js');
-				exec_promise = exec(`node ${cli} export`);
-			}
-
-			return exec_promise.then(() => {
-				const resolved = require.resolve('../../middleware.js');
-				delete require.cache[resolved];
-				delete require.cache[require.resolve('../../core.js')]; // TODO remove this
-
-				return require('get-port')();
-			}).then(port => {
+			return promise.then(port => {
 				base = `http://localhost:${port}`;
 
-				proc = require('child_process').fork('.sapper/server.js', {
+				const dir = env === 'production' ? 'build' : '.sapper';
+
+				proc = require('child_process').fork(`${dir}/server.js`, {
 					cwd: process.cwd(),
 					env: {
 						NODE_ENV: env,
+						SAPPER_DEST: dir,
 						PORT: port
 					}
 				});
@@ -159,7 +236,7 @@ function run(env) {
 			});
 
 			it('navigates to a new page without reloading', () => {
-				return capture(() => nightmare.goto(base).init().preloadRoutes())
+				return capture(() => nightmare.goto(base).init().prefetchRoutes())
 					.then(() => {
 						return capture(() => nightmare.click('a[href="/about"]'));
 					})
@@ -430,73 +507,6 @@ function run(env) {
 				});
 			});
 		});
-
-		if (env === 'production') {
-			describe('export', () => {
-				it('export all pages', () => {
-					const dest = path.resolve(__dirname, '../app/export');
-
-					// Pages that should show up in the extraction directory.
-					const expectedPages = [
-						'index.html',
-						'about/index.html',
-						'slow-preload/index.html',
-
-						'blog/index.html',
-						'blog/a-very-long-post/index.html',
-						'blog/how-can-i-get-involved/index.html',
-						'blog/how-is-sapper-different-from-next/index.html',
-						'blog/how-to-use-sapper/index.html',
-						'blog/what-is-sapper/index.html',
-						'blog/why-the-name/index.html',
-
-						'blog.json',
-						'blog/a-very-long-post.json',
-						'blog/how-can-i-get-involved.json',
-						'blog/how-is-sapper-different-from-next.json',
-						'blog/how-to-use-sapper.json',
-						'blog/what-is-sapper.json',
-						'blog/why-the-name.json',
-
-						'favicon.png',
-						'global.css',
-						'great-success.png',
-						'manifest.json',
-						'service-worker.js',
-						'svelte-logo-192.png',
-						'svelte-logo-512.png',
-					];
-					// Client scripts that should show up in the extraction directory.
-					const expectedClientRegexes = [
-						/client\/[^/]+\/_(\.\d+)?\.js/,
-						/client\/[^/]+\/about(\.\d+)?\.js/,
-						/client\/[^/]+\/blog_\$slug\$(\.\d+)?\.js/,
-						/client\/[^/]+\/blog(\.\d+)?\.js/,
-						/client\/[^/]+\/main(\.\d+)?\.js/,
-						/client\/[^/]+\/show_url(\.\d+)?\.js/,
-						/client\/[^/]+\/slow_preload(\.\d+)?\.js/,
-					];
-					const allPages = walkSync(dest);
-
-					expectedPages.forEach((expectedPage) => {
-						assert.ok(allPages.includes(expectedPage),`Could not find page matching ${expectedPage}`);
-					});
-
-					expectedClientRegexes.forEach((expectedRegex) => {
-						// Ensure each client page regular expression matches at least one
-						// generated page.
-						let matched = false;
-						for (const page of allPages) {
-							if (expectedRegex.test(page)) {
-								matched = true;
-								break;
-							}
-						}
-						assert.ok(matched, `Could not find client page matching ${expectedRegex}`);
-					});
-				});
-			});
-		}
 	});
 }