feat(scripts): add compile time message to output

It was complicated than I thought it would be. Firstly because,
webpack multi compiler always report for all instances. So I had
to store last stat (.toJson, not the actual object, because it
would produce the same result corresponding the current one) and
compare with current one against `builtAt`. If that value changes
then webpack has compiled the instance.

See #444

Author: swashata

examples/plugin/src/ts/main.ts

@@ -8,7 +8,7 @@ console.log(strRepeat('foo', 10));
 console.log(strRepeat('foo', 10));
 console.log(strRepeat('foo', 10));
 console.log(strRepeat('10', 20));
-console.log(strRepeat('[]', 20));
+console.log(strRepeat('10', 20));
 
 if (module.hot) {
 	module.hot.accept('./module.ts', () => {

packages/scripts/src/bin/serve.ts

@@ -21,6 +21,8 @@ import {
 	printCompiledWithWarnMessage,
 	printFailedCompileMEssage,
 	printGeneralInfoMessage,
+	printCompileTimeMessages,
+	webpackStatToJsonOptions,
 } from './utils';
 
 /**
@@ -69,27 +71,31 @@ export function serve(options: ProgramOptions | undefined): void {
 
 		spinner.start();
 
+		let lastWebpackStat: any | null = null;
+
 		// Start the webpack/browserSync server
 		const server: Server = new Server(projectConfig, serverConfig, cwd, {
 			// tslint:disable:no-empty
 			invalid: () => {
 				printCompilingMessage();
 			},
-			done: () => {
+			done: stat => {
 				printSuccessfullyCompiledMessage();
-				printWatchingMessage();
 			},
 			onError: msg => {
 				console.log(`${chalk.bgRed.black(' ERROR ')} please review`);
 				console.log('');
 				msg.errors.forEach(e => console.log(e));
 				console.log('');
 				printFailedCompileMEssage();
-				printWatchingMessage();
 			},
 			onWarn: msg => {
 				printCompiledWithWarnMessage();
 				msg.warnings.forEach(e => console.log(e));
+			},
+			onEmit: stats => {
+				printCompileTimeMessages(stats, lastWebpackStat);
+				lastWebpackStat = stats.toJson(webpackStatToJsonOptions);
 				printWatchingMessage();
 			},
 			firstCompile: (stats: webpack.Stats) => {
@@ -113,7 +119,9 @@ export function serve(options: ProgramOptions | undefined): void {
 				} else {
 					printSuccessfullyCompiledMessage();
 				}
+				printCompileTimeMessages(stats, lastWebpackStat);
 				printWatchingMessage();
+				lastWebpackStat = stats.toJson(webpackStatToJsonOptions);
 			},
 			onBsChange(file) {
 				printGeneralInfoMessage(`changed: ${chalk.bold(file)}`);

packages/scripts/src/bin/utils.ts

@@ -7,6 +7,7 @@ import gradient from 'gradient-string';
 import logSymbols from 'log-symbols';
 import path from 'path';
 import PrettyError from 'pretty-error';
+import webpack from 'webpack';
 import { WpackioError } from '../errors/WpackioError';
 import { ArchiveResolve } from '../scripts/Pack';
 
@@ -51,6 +52,90 @@ export function printCompilingMessage() {
 	);
 }
 
+export function printCompileTimeMessage(stat: any, lastStat: any | null) {
+	// safety
+	if (!stat || typeof stat !== 'object' || !stat.builtAt) {
+		return;
+	}
+
+	if (
+		lastStat === null ||
+		typeof lastStat !== 'object' ||
+		!lastStat.builtAt ||
+		stat.builtAt !== lastStat.builtAt
+	) {
+		const entryName = chalk.bold(stat.name);
+		let name = chalk.green(entryName);
+		let symbol = logSymbols.success;
+		if (stat.errors.length) {
+			name = chalk.red(entryName);
+			symbol = logSymbols.error;
+		} else if (stat.warnings.length) {
+			name = chalk.yellow(entryName);
+			symbol = logSymbols.warning;
+		}
+		console.log(
+			addTimeStampToLog(
+				`${symbol} entry ${name} in ${chalk.magenta(`${stat.time}ms`)}.`
+			)
+		);
+	}
+}
+
+export const webpackStatToJsonOptions: webpack.Stats.ToJsonOptions = {
+	timings: true,
+	assets: false,
+	builtAt: true,
+	cached: false,
+	cachedAssets: false,
+	children: true,
+	chunkModules: false,
+	chunkOrigins: false,
+	chunks: false,
+	entrypoints: false,
+	env: false,
+	errors: true,
+	warnings: true,
+	modules: false,
+};
+
+export function printCompileTimeMessages(
+	stats: webpack.Stats,
+	lastStatsJson: any | null
+) {
+	let statsJson: any | null = null;
+	if (stats) {
+		statsJson = stats.toJson(webpackStatToJsonOptions);
+	}
+
+	if (
+		statsJson !== null &&
+		!statsJson.time &&
+		statsJson.children &&
+		Array.isArray(statsJson.children)
+	) {
+		// if it is multicompiler
+		statsJson.children.forEach((sj: any, index: number) => {
+			if (lastStatsJson === null) {
+				printCompileTimeMessage(sj, null);
+			} else if (
+				lastStatsJson !== null &&
+				lastStatsJson.children &&
+				Array.isArray(lastStatsJson.children)
+			) {
+				printCompileTimeMessage(sj, lastStatsJson.children[index]);
+			}
+		});
+	} else if (statsJson.time && statsJson.name) {
+		// if it is single compiler
+		if (lastStatsJson === null) {
+			printCompileTimeMessage(statsJson, null);
+		} else {
+			printCompileTimeMessage(statsJson, lastStatsJson);
+		}
+	}
+}
+
 export function printSuccessfullyCompiledMessage() {
 	console.log(
 		addTimeStampToLog(`${logSymbols.success} compiled successfully`)

packages/scripts/src/scripts/Server.ts

@@ -17,6 +17,7 @@ interface Callbacks {
 	onError(err: { errors: string[]; warnings: string[] }): void;
 	onWarn(warn: { errors: string[]; warnings: string[] }): void;
 	onBsChange(file: string): void;
+	onEmit(stats: webpack.Stats): void;
 }
 
 /**
@@ -248,12 +249,11 @@ export class Server {
 			}
 			if (messages.errors.length) {
 				this.callbacks.onError(messages);
-
-				return;
-			}
-			if (messages.warnings.length) {
+			} else if (messages.warnings.length) {
 				this.callbacks.onWarn(messages);
 			}
+
+			this.callbacks.onEmit(stats);
 		});
 
 		// On compile start