improve progress and cli

lib/builder/builder.js

@@ -136,8 +136,7 @@ module.exports = class Builder {
 
     this.spinner.succeed()
 
-    this.spinner.start('Building project...')
+    this.spinner.info('Compiling...')
-    this.spinner.stopAndPersist()
 
     // Start webpack build
     await this.webpackBuild()

lib/builder/webpack/base.config.js

@@ -135,7 +135,7 @@ module.exports = function webpackBaseConfig({ name, isServer }) {
     config.plugins.push(new ProgressPlugin({
       color: isServer ? 'yellow' : 'green',
       pcolor: isServer ? 'gradient(red,yellow)' : 'gradient(green,cyan)',
-      title: isServer ? 'SSR   ' : 'CLIENT'
+      title: isServer ? 'SERVER' : 'CLIENT'
     }))
   }
 

lib/builder/webpack/plugins/progress.js

@@ -1,15 +1,61 @@
 const ProgressBar = require('node-progress-bars')
 const webpack = require('webpack')
+const throttle = require('lodash/debounce')
 
-module.exports = function ProgressPlugin({ color, pcolor, title }) {
+module.exports = class ProgressPlugin extends webpack.ProgressPlugin {
-  // eslint-disable-next-line no-console
+  constructor(options) {
-  if (!console.spiedInTest) {
+    super(options)
-    muteConsole()
+
+    if (typeof options === 'function') {
+      options = {
+        handler: options
+      }
+    }
+
+    this.handler = (percent, msg) => this.updateProgress(percent, msg)
+
+    this.options = options || {}
+
+    this.lastUpdate = 0
+
+    // BUG: plugin.appy is being called twice!
+    // So initialize progress here
+    this.startProgress()
+
+    this.lastPrgoress = 0
+    this.lastMsg = ''
+  }
+
+  updateProgress(percent, msg) {
+    if (!this.bar) {
+      this.startProgress()
+    }
+
+    const progress = Math.floor(percent * 100)
+
+    if (progress === this.lastPrgoress || msg === this.lastMsg) {
+      return
+    }
+
+    this.lastPrgoress = progress
+    this.lastMsg = msg
+
+    if (percent === 1) {
+      this.stopProgress()
+      return
+    }
+
+    this.bar.update(percent, { msg })
+  }
+
+  startProgress() {
+    if (this.bar) {
+      this.stopProgress()
     }
 
     // https://github.com/bubkoo/ascii-progress
-  const bar = new ProgressBar({
+    this.bar = new ProgressBar({
-    schema: `${title}.${color} >.grey :filled.${pcolor}:blank.white :msg.grey`,
+      schema: `${this.options.title}.${this.options.color} >.grey :filled.${this.options.pcolor}:blank.white :msg.grey`,
       filled: '█',
       blank: '█',
       total: 100,
@@ -17,49 +63,62 @@ module.exports = function ProgressPlugin({ color, pcolor, title }) {
       clear: true
     })
 
-  return new webpack.ProgressPlugin((percent, msg) => {
+    this.bar.update = throttle(this.bar.update, 50)
-    bar.update(percent, { msg })
-
-    if (percent >= 0.99) {
-      restoreConsole()
   }
-  })
-}
 
-// -----------------------------
+  stopProgress() {
+    if (!this.bar) {
+      return
+    }
 
-let consoleSpied = false
+    this.bar.terminate()
-
+    this.bar = undefined
-const silentConsole = {}
-const originalConsole = {}
-const consoleQueue = {
-  log: [],
-  warn: [],
-  error: []
-}
-
-// level: log, warn, error
-Object.keys(consoleQueue).forEach((level) => {
-  silentConsole[level] = (...args) => consoleQueue[level].push(args)
-  originalConsole[level] = console[level] // eslint-disable-line no-console
-})
-
-const muteConsole = () => {
-  if (consoleSpied) return
-  consoleSpied = true
-
-  Object.assign(console, silentConsole)
-}
-
-const restoreConsole = () => {
-  if (!consoleSpied) return
-  consoleSpied = false
-
-  Object.assign(console, originalConsole)
-
-  // level: log, warn, error
-  for (let level in consoleQueue) {
-    consoleQueue[level].forEach(args => console[level](...args)) // eslint-disable-line no-console
-    consoleQueue[level] = []
   }
 }
+
+// -----------------------------------------------------------
+// Shared console utils
+// -----------------------------------------------------------
+// let consoleSpied = 0
+
+// const silentConsole = {}
+// const originalConsole = {}
+// const consoleQueue = {
+//   log: [],
+//   warn: [],
+//   error: []
+// }
+
+// // level: log, warn, error
+// Object.keys(consoleQueue).forEach((level) => {
+//   silentConsole[level] = (...args) => consoleQueue[level].push(args)
+//   originalConsole[level] = console[level] // eslint-disable-line no-console
+// })
+
+// const muteConsole = () => {
+//   // eslint-disable-next-line no-console
+//   if (console.spiedInTest) {
+//     return
+//   }
+
+//   consoleSpied++
+
+//   Object.assign(console, silentConsole)
+// }
+
+// const restoreConsole = () => {
+//   if (consoleSpied === 0) {
+//     return
+//   }
+
+//   consoleSpied--
+
+//   Object.assign(console, originalConsole)
+
+//   // level: log, warn, error
+//   for (let level in consoleQueue) {
+//     const q = consoleQueue[level]
+//     consoleQueue[level] = []
+//     q.forEach(args => console[level](...args)) // eslint-disable-line no-console
+//   }
+// }