feat(cli): improve cli output

Remove boxen from all output and significantly improve overall CLI output and make them consistent. See #429
swashata · Apr 16, 2019 · fc7502c · fc7502c
1 parent e742354
commit fc7502c
Show file tree

Hide file tree

Showing 11 changed files with 193 additions and 212 deletions.
diff --git a/examples/plugin/src/app/index.js b/examples/plugin/src/app/index.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import './index.css';
 import imgURL from './image.png';
 import logger from './modules/logger';

diff --git a/examples/plugin/wpackio.server.js b/examples/plugin/wpackio.server.js
@@ -19,7 +19,7 @@ module.exports = {
 	// Whether to show the "BrowserSync Connected"
 	notify: false,
 	// Open the dev server URL, set false to disable
-	open: true,
+	open: false,
 	// BrowserSync ghostMode, set to false to completely disable
 	ghostMode: {
 		clicks: true,

diff --git a/packages/scripts/@types/webpack-log.d.ts b/packages/scripts/@types/webpack-log.d.ts
@@ -0,0 +1,17 @@
+declare module 'webpack-log' {
+	interface WebpackLogOptions {
+		name?: string;
+		level?: 'info' | 'warn' | 'error' | 'trace' | 'debug' | 'silent';
+		unique?: boolean;
+		timestamp?: boolean;
+	}
+
+	interface WebpackLogger {
+		info: (str: string) => void;
+		warn: (str: string) => void;
+		error: (str: string) => void;
+		trace: (str: string) => void;
+		debug: (str: string) => void;
+	}
+	export default function log(options: WebpackLogOptions): WebpackLogger;
+}
diff --git a/packages/scripts/package.json b/packages/scripts/package.json
@@ -42,7 +42,6 @@
 		"archiver": "^3.0.0",
 		"autoprefixer": "^9.5.1",
 		"babel-loader": "^8.0.5",
-		"boxen": "^3.1.0",
 		"browser-sync": "^2.26.3",
 		"camelcase": "^5.3.1",
 		"chalk": "^2.4.2",

diff --git a/packages/scripts/src/bin/bootstrap.ts b/packages/scripts/src/bin/bootstrap.ts
@@ -36,7 +36,9 @@ export async function bootstrap(
 					} ${wpackLogoSmall} bootstrap complete!`
 				);
 				console.log(
-					`📝 project config created at ${chalk.yellow(
+					`${
+						logSymbols.success
+					} project config created at ${chalk.yellow(
 						'./wpackio.project.js'
 					)}`
 				);
@@ -47,7 +49,7 @@ export async function bootstrap(
 			}
 
 			console.log(
-				`📡 server config created at ${chalk.yellow(
+				`${logSymbols.success} server config created at ${chalk.yellow(
 					'./wpackio.server.js'
 				)}`
 			);
@@ -60,7 +62,9 @@ export async function bootstrap(
 
 			if (done.deps && done.deps.dependencies.length) {
 				console.log(
-					`🍪 need to install following ${chalk.yellow(
+					`${
+						logSymbols.info
+					} need to install following ${chalk.yellow(
 						'dependencies'
 					)}\n`
 				);
@@ -83,7 +87,9 @@ export async function bootstrap(
 			}
 			if (done.deps && done.deps.devDependencies.length) {
 				console.log(
-					`🍪 need to install following ${chalk.yellow(
+					`${
+						logSymbols.info
+					} need to install following ${chalk.yellow(
 						'dev dependencies'
 					)}\n`
 				);
@@ -120,7 +126,9 @@ export async function bootstrap(
 		}
 
 		// Log how to access and start, develop, build etc.
+		console.log('');
 		endBootstrapInfo();
+		console.log('');
 	} catch (e) {
 		console.log(pe.render(e));
 	}

diff --git a/packages/scripts/src/bin/build.ts b/packages/scripts/src/bin/build.ts
@@ -59,9 +59,17 @@ export function build(options: ProgramOptions | undefined): void {
 				} else {
 					spinner.warn(`${wpackLogoSmall} build warnings.`);
 				}
-				clearConsole();
+				console.log('');
+				console.log(
+					`${chalk.bgGreenBright(
+						chalk.bold.hex('#000000')(' OUTPUT ')
+					)}`
+				);
+				console.log('');
 				console.log(log);
+				console.log('');
 				endBuildInfo();
+				console.log('');
 				process.exit(0);
 			})
 			.catch(err => {

diff --git a/packages/scripts/src/bin/pack.ts b/packages/scripts/src/bin/pack.ts
@@ -90,7 +90,9 @@ export function pack(options: ProgramOptions | undefined): void {
 				},
 				onZip: result => {
 					spinner.succeed();
+					console.log('');
 					endPackInfo(result);
+					console.log('');
 				},
 			},
 			cwd

diff --git a/packages/scripts/src/bin/serve.ts b/packages/scripts/src/bin/serve.ts
@@ -13,10 +13,13 @@ import {
 	prettyPrintError,
 	resolveCWD,
 	serverInfo,
-	watchEllipsis,
-	watchSymbol,
 	wpackLogoSmall,
-	printIntro,
+	printWatchingMessage,
+	addTimeStampToLog,
+	printCompilingMessage,
+	printSuccessfullyCompiledMessage,
+	printCompiledWithWarnMessage,
+	printFailedCompileMEssage,
 } from './utils';
 
 /**
@@ -41,7 +44,7 @@ export function serve(options: ProgramOptions | undefined): void {
 	});
 
 	console.log(
-		`${logSymbols.success} startup: ${chalk.cyan(
+		`${logSymbols.success} ${chalk.bold('startup')}: ${chalk.cyan(
 			relCwd === '' ? '.' : relCwd
 		)}`
 	);
@@ -53,12 +56,12 @@ export function serve(options: ProgramOptions | undefined): void {
 			serverConfigPath,
 		} = getProjectAndServerConfig(cwd, options);
 		console.log(
-			`${logSymbols.success} project config: ${chalk.cyan(
-				path.relative(cwd, projectConfigPath)
-			)}`
+			`${logSymbols.success} ${chalk.bold(
+				'project config'
+			)}: ${chalk.cyan(path.relative(cwd, projectConfigPath))}`
 		);
 		console.log(
-			`${logSymbols.success} server config: ${chalk.cyan(
+			`${logSymbols.success} ${chalk.bold('server config')}: ${chalk.cyan(
 				path.relative(cwd, serverConfigPath)
 			)}`
 		);
@@ -69,102 +72,61 @@ export function serve(options: ProgramOptions | undefined): void {
 		const server: Server = new Server(projectConfig, serverConfig, cwd, {
 			// tslint:disable:no-empty
 			invalid: () => {
-				spinner.stop();
-				clearConsole();
-				serverInfo(server.getServerUrl(), server.getBsUiUrl());
-				// Show message that we are compiling
-				spinner.start(`compiling changes${watchEllipsis}`);
+				printCompilingMessage();
 			},
 			done: () => {
-				spinner.stop();
-				clearConsole();
-				serverInfo(server.getServerUrl(), server.getBsUiUrl());
-				// Show message that we have compiled
-				spinner.start('compiling...');
-				spinner.stopAndPersist({
-					symbol: logSymbols.success,
-					text: chalk.dim('compiled successfully'),
-				});
-				console.log(
-					`${watchSymbol} watching for changes${watchEllipsis}`
-				);
+				printSuccessfullyCompiledMessage();
+				printWatchingMessage();
 			},
 			onError: msg => {
-				spinner.stop();
-				clearConsole();
 				console.log(`${chalk.bgRed.black(' ERROR ')} please review`);
 				console.log('');
 				msg.errors.forEach(e => console.log(e));
 				console.log('');
-				console.error(
-					`${logSymbols.error} ${chalk.dim('failed to compile')}\n`
-				);
-				console.log(
-					`${watchSymbol} watching for changes${watchEllipsis}`
-				);
+				printFailedCompileMEssage();
+				printWatchingMessage();
 			},
 			onWarn: msg => {
-				spinner.stop();
-				clearConsole();
-				console.log(
-					`${logSymbols.warning} ${chalk.dim(
-						'compiled with warnings...'
-					)}\n`
-				);
+				printCompiledWithWarnMessage();
 				msg.warnings.forEach(e => console.log(e));
-				console.log(
-					`${watchSymbol} watching for changes${watchEllipsis}`
-				);
+				printWatchingMessage();
 			},
 			firstCompile: (stats: webpack.Stats) => {
 				spinner.stop();
 				const raw = stats.toJson('verbose');
 				const messages = formatWebpackMessages(raw);
-				clearConsole();
+				console.log('');
 				serverInfo(server.getServerUrl(), server.getBsUiUrl());
-				console.log(
-					`${logSymbols.success} ${chalk.dim('server started!')}`
-				);
+				console.log('');
+
 				if (stats.hasErrors()) {
 					console.log(
 						`${chalk.bgRed.black(' ERROR ')} please review`
 					);
 					messages.errors.forEach(e => console.log(e));
 					console.log('');
-					console.error(
-						`${logSymbols.error} ${chalk.dim(
-							'failed to compile'
-						)}\n`
-					);
+					printFailedCompileMEssage();
 				} else if (stats.hasWarnings()) {
-					console.log(
-						`${logSymbols.warning} ${chalk.dim(
-							'compiled with warnings...'
-						)}\n`
-					);
+					printCompiledWithWarnMessage();
 					messages.warnings.forEach(e => console.log(e));
 				} else {
-					console.log(
-						`${logSymbols.success} ${chalk.dim(
-							'compiled successfully'
-						)}\n`
-					);
+					printSuccessfullyCompiledMessage();
 				}
-				console.log(
-					`${watchSymbol} watching for changes${watchEllipsis}`
-				);
+				printWatchingMessage();
 			},
 		});
 		server.serve();
 
 		const stopServer = () => {
-			spinner.stop();
-			console.log('');
-			console.log(`${logSymbols.error} shutting down development server`);
+			console.log(
+				addTimeStampToLog(
+					`${logSymbols.warning} shutting down development server`
+				)
+			);
 			server.stop();
-			clearConsole();
-			printIntro();
+			console.log('');
 			endServeInfo();
+			console.log('');
 			process.exit(0);
 		};
 
@@ -183,6 +145,7 @@ export function serve(options: ProgramOptions | undefined): void {
 
 				// If pressing r, then just refresh
 				if (key.indexOf('r') === 0) {
+					printCompilingMessage();
 					server.refresh();
 				}
 			});