From 028dabc918d993f3b16893e92b95cd8239eacd84 Mon Sep 17 00:00:00 2001 From: Rishabh Chawla Date: Tue, 18 Feb 2020 19:42:34 +0530 Subject: [PATCH 1/4] feat: add progress bar in progress --- packages/webpack-cli/lib/utils/Compiler.js | 27 ++++++++++++++-------- 1 file changed, 18 insertions(+), 9 deletions(-) diff --git a/packages/webpack-cli/lib/utils/Compiler.js b/packages/webpack-cli/lib/utils/Compiler.js index c33c73448b6..3cf47042041 100644 --- a/packages/webpack-cli/lib/utils/Compiler.js +++ b/packages/webpack-cli/lib/utils/Compiler.js @@ -1,5 +1,7 @@ const webpack = require('webpack'); const logger = require('./logger'); +const readline = require('readline'); +const { cyanBright, greenBright } = require('chalk'); const { CompilerOutput } = require('./CompilerOutput'); class Compiler { @@ -15,17 +17,24 @@ class Compiler { compilation.hooks.beforeRun.tap('webpackProgress', () => { if (outputOptions.progress) { - let tmpMsg; - const defaultProgressPluginHandler = (percent, msg) => { + process.stdout.write("\n"); + const defaultProgressPluginHandler = async (percent, msg) => { percent = Math.floor(percent * 100); - if (percent === 100) { - msg = 'Compilation completed'; + process.stdout.clearLine(); + process.stdout.cursorTo(0); + if (percent !== undefined) { + process.stdout.write(' (') + for(let i = 0; i <= 100; i+=10) { + if (i <= percent) { + process.stdout.write(greenBright("#")); + } else { + process.stdout.write("#"); + } + } + process.stdout.write(`) ${percent}% : `) + process.stdout.write(`${cyanBright(msg)}`); + if (percent === 100) process.stdout.write(`${cyanBright("Complilation completed\n")}`); } - - if (msg && tmpMsg != msg) { - logger.info(percent + '% ' + msg); - } - tmpMsg = msg; }; if (!progressPluginExists) { new ProgressPlugin(defaultProgressPluginHandler).apply(compilation); From de818a0676289152042130d69392412c93af5e0c Mon Sep 17 00:00:00 2001 From: Rishabh Chawla Date: Tue, 18 Feb 2020 19:47:08 +0530 Subject: [PATCH 2/4] chore: remove async --- packages/webpack-cli/lib/utils/Compiler.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/webpack-cli/lib/utils/Compiler.js b/packages/webpack-cli/lib/utils/Compiler.js index 3cf47042041..50c01b7391f 100644 --- a/packages/webpack-cli/lib/utils/Compiler.js +++ b/packages/webpack-cli/lib/utils/Compiler.js @@ -18,7 +18,7 @@ class Compiler { compilation.hooks.beforeRun.tap('webpackProgress', () => { if (outputOptions.progress) { process.stdout.write("\n"); - const defaultProgressPluginHandler = async (percent, msg) => { + const defaultProgressPluginHandler = (percent, msg) => { percent = Math.floor(percent * 100); process.stdout.clearLine(); process.stdout.cursorTo(0); From 3b0586acfe65b00000ff7445317217defd0a8274 Mon Sep 17 00:00:00 2001 From: Rishabh Chawla Date: Tue, 18 Feb 2020 19:55:01 +0530 Subject: [PATCH 3/4] chore: remove readline --- packages/webpack-cli/lib/utils/Compiler.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/webpack-cli/lib/utils/Compiler.js b/packages/webpack-cli/lib/utils/Compiler.js index 50c01b7391f..ea8d40c377e 100644 --- a/packages/webpack-cli/lib/utils/Compiler.js +++ b/packages/webpack-cli/lib/utils/Compiler.js @@ -1,6 +1,5 @@ const webpack = require('webpack'); const logger = require('./logger'); -const readline = require('readline'); const { cyanBright, greenBright } = require('chalk'); const { CompilerOutput } = require('./CompilerOutput'); From b788a3cd644510f6939da69a16538cabd7ba70e9 Mon Sep 17 00:00:00 2001 From: Rishabh Chawla Date: Tue, 18 Feb 2020 21:39:01 +0530 Subject: [PATCH 4/4] chore: lint --- packages/webpack-cli/lib/utils/Compiler.js | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/packages/webpack-cli/lib/utils/Compiler.js b/packages/webpack-cli/lib/utils/Compiler.js index ea8d40c377e..98081c6807f 100644 --- a/packages/webpack-cli/lib/utils/Compiler.js +++ b/packages/webpack-cli/lib/utils/Compiler.js @@ -16,23 +16,25 @@ class Compiler { compilation.hooks.beforeRun.tap('webpackProgress', () => { if (outputOptions.progress) { - process.stdout.write("\n"); + process.stdout.write('\n'); const defaultProgressPluginHandler = (percent, msg) => { percent = Math.floor(percent * 100); process.stdout.clearLine(); process.stdout.cursorTo(0); if (percent !== undefined) { - process.stdout.write(' (') - for(let i = 0; i <= 100; i+=10) { + process.stdout.write(' ('); + for (let i = 0; i <= 100; i += 10) { if (i <= percent) { - process.stdout.write(greenBright("#")); + process.stdout.write(greenBright('#')); } else { - process.stdout.write("#"); + process.stdout.write('#'); } } - process.stdout.write(`) ${percent}% : `) + process.stdout.write(`) ${percent}% : `); process.stdout.write(`${cyanBright(msg)}`); - if (percent === 100) process.stdout.write(`${cyanBright("Complilation completed\n")}`); + if (percent === 100) { + process.stdout.write(`${cyanBright('Complilation completed\n')}`); + } } }; if (!progressPluginExists) {