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