From 5289fc11d8d6591b1a9e26311b3b34fb22e5cd67 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Mon, 5 Mar 2018 13:51:11 -0500 Subject: [PATCH] better CLI, more port control. fixes #169 --- package.json | 4 +- src/cli/build.ts | 13 +++- src/cli/dev.ts | 15 ++--- src/cli/export.ts | 6 +- src/cli/help.md | 20 ------- src/cli/index.ts | 129 ++++++++++++++++++++++++---------------- src/cli/port-utils.ts | 66 ++++++++++++++++++++ src/cli/utils.ts | 25 -------- src/middleware/index.ts | 10 +--- src/utils.ts | 10 ++++ 10 files changed, 178 insertions(+), 120 deletions(-) delete mode 100644 src/cli/help.md create mode 100644 src/cli/port-utils.ts delete mode 100644 src/cli/utils.ts create mode 100644 src/utils.ts diff --git a/package.json b/package.json index 22ce1b3..4317318 100644 --- a/package.json +++ b/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" diff --git a/src/cli/build.ts b/src/cli/build.ts index 5d0f464..823b22b 100644 --- a/src/cli/build.ts +++ b/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 })); } } diff --git a/src/cli/dev.ts b/src/cli/dev.ts index ac342d6..b0692df 100644 --- a/src/cli/dev.ts +++ b/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) }); }); } diff --git a/src/cli/export.ts b/src/cli/export.ts index a5af63f..b3e9625 100644 --- a/src/cli/export.ts +++ b/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()); } \ No newline at end of file diff --git a/src/cli/help.md b/src/cli/help.md deleted file mode 100644 index 8d52abb..0000000 --- a/src/cli/help.md +++ /dev/null @@ -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 \ No newline at end of file diff --git a/src/cli/index.ts b/src/cli/index.ts index a93f017..3c3e06b 100755 --- a/src/cli/index.ts +++ b/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`); -} \ No newline at end of file + 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); \ No newline at end of file diff --git a/src/cli/port-utils.ts b/src/cli/port-utils.ts new file mode 100644 index 0000000..7719171 --- /dev/null +++ b/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 { + 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); +} + diff --git a/src/cli/utils.ts b/src/cli/utils.ts deleted file mode 100644 index 0c1078e..0000000 --- a/src/cli/utils.ts +++ /dev/null @@ -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); -} \ No newline at end of file diff --git a/src/middleware/index.ts b/src/middleware/index.ts index 5df33e4..bef1cb5 100644 --- a/src/middleware/index.ts +++ b/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; - } } \ No newline at end of file diff --git a/src/utils.ts b/src/utils.ts new file mode 100644 index 0000000..be0f7a4 --- /dev/null +++ b/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; + } +} \ No newline at end of file