rewrite progress

lib/builder/builder.js

@@ -94,7 +94,7 @@ module.exports = class Builder {
     }
     this._buildStatus = STATUS.BUILDING
 
-    this.spinner.start('Starting build')
+    this.spinner.start('Initializing builder')
 
     // Wait for nuxt ready
     await this.nuxt.ready()
@@ -119,7 +119,8 @@ module.exports = class Builder {
       }
     }
 
-    this.spinner.succeed()
+    this.spinner.succeed('Builder ready')
+
     this.spinner.start(`Generating nuxt files...`)
 
     debug(`App root: ${this.options.srcDir}`)
@@ -134,9 +135,9 @@ module.exports = class Builder {
     // Generate routes and interpret the template files
     await this.generateRoutesAndFiles()
 
-    this.spinner.succeed()
+    this.spinner.succeed('Files genrated')
 
-    this.spinner.info('Compiling...')
+    this.spinner.start('Compiling...')
 
     // Start webpack build
     await this.webpackBuild()

lib/builder/webpack/base.config.js

@@ -133,9 +133,9 @@ module.exports = function webpackBaseConfig({ name, isServer }) {
     config.plugins.push(new webpack.ProgressPlugin({ profile: true }))
   } else {
     config.plugins.push(new ProgressPlugin({
-      color: isServer ? 'yellow' : 'green',
-      pcolor: isServer ? 'gradient(red,yellow)' : 'gradient(green,cyan)',
-      title: isServer ? 'SERVER' : 'CLIENT'
+      spinner: this.spinner,
+      name: isServer ? 'server' : 'client',
+      color: isServer ? 'green' : 'orange'
     }))
   }
 

lib/builder/webpack/plugins/progress.js

@@ -1,6 +1,10 @@
-const ProgressBar = require('node-progress-bars')
 const webpack = require('webpack')
-const throttle = require('lodash/throttle')
+const chalk = require('chalk')
+const _ = require('lodash')
+
+const sharedState = {}
+
+const BLOCK_CHAR = '█'
 
 module.exports = class ProgressPlugin extends webpack.ProgressPlugin {
   constructor(options) {
@@ -8,52 +12,58 @@ module.exports = class ProgressPlugin extends webpack.ProgressPlugin {
 
     this.handler = (percent, msg) => this.updateProgress(percent, msg)
 
-    this.options = options || {}
+    this.options = options
 
-    this.lastUpdate = 0
+    if (!sharedState[options.name]) {
+      sharedState[options.name] = {
+        color: options.color
+      }
+    }
 
-    // BUG: plugin.appy is being called twice!
-    // So initialize progress here
-    this.startProgress()
+    this.spinner = options.spinner
+  }
+
+  get state() {
+    return sharedState[this.options.name]
   }
 
   updateProgress(percent, msg) {
-    if (!this.bar) {
-      this.startProgress()
-    }
+    const progress = Math.floor(percent * 100)
 
-    if (percent === 1) {
-      this.stopProgress()
+    this.state.progress = progress
+    this.state.succeed =
+    this.state.msg = msg
+
+    // Update spinner using shared state
+    let isInProgress = false
+    const width = 25
+    let line = _.range(width).fill(chalk.white(BLOCK_CHAR))
+    let additional = []
+
+    Object.keys(sharedState).forEach(name => {
+      const state = sharedState[name]
+
+      if (state.progress >= 100) {
         return
       }
 
-    this.bar.update(percent, { msg })
+      isInProgress = true
+
+      const w = state.progress * (width / 100)
+      const b = chalk.keyword(state.color)(BLOCK_CHAR)
+
+      for (let i = 0; i < w; i++) {
+        line[i] = b
       }
 
-  startProgress() {
-    if (this.bar) {
-      this.stopProgress()
-    }
-
-    // https://github.com/bubkoo/ascii-progress
-    this.bar = new ProgressBar({
-      schema: `[${this.options.title}].${this.options.color} :filled.${this.options.pcolor}:blank.white :msg.grey`,
-      filled: '█',
-      blank: '█',
-      total: 100,
-      width: 25,
-      clear: true
+      additional.push(`${b} ${name} (${state.progress}%) `)
     })
 
-    this.bar.update = throttle(this.bar.update, 50)
-  }
-
-  stopProgress() {
-    if (!this.bar) {
-      return
-    }
-
-    this.bar.terminate()
-    this.bar = undefined
+    if (isInProgress) {
+      this.spinner.start()
+      this.spinner.text = 'Compiling ' + line.join('') + '   ' + additional.join('   ')
+    } else {
+      this.spinner.succeed('Compiled ' + this.options.name)
+    }
   }
 }