diff --git a/lib/builder/builder.js b/lib/builder/builder.js index a0de31ad13..e11662b689 100644 --- a/lib/builder/builder.js +++ b/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() diff --git a/lib/builder/webpack/base.config.js b/lib/builder/webpack/base.config.js index 201d088293..ef10a9fd07 100644 --- a/lib/builder/webpack/base.config.js +++ b/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' })) } diff --git a/lib/builder/webpack/plugins/progress.js b/lib/builder/webpack/plugins/progress.js index 6475921323..0f6cf369a1 100644 --- a/lib/builder/webpack/plugins/progress.js +++ b/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() - return - } + this.state.progress = progress + this.state.succeed = + this.state.msg = msg - this.bar.update(percent, { msg }) - } + // Update spinner using shared state + let isInProgress = false + const width = 25 + let line = _.range(width).fill(chalk.white(BLOCK_CHAR)) + let additional = [] - startProgress() { - if (this.bar) { - this.stopProgress() - } + Object.keys(sharedState).forEach(name => { + const state = sharedState[name] - // 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 + if (state.progress >= 100) { + return + } + + 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 + } + + additional.push(`${b} ${name} (${state.progress}%) `) }) - this.bar.update = throttle(this.bar.update, 50) - } - - stopProgress() { - if (!this.bar) { - return + if (isInProgress) { + this.spinner.start() + this.spinner.text = 'Compiling ' + line.join('') + ' ' + additional.join(' ') + } else { + this.spinner.succeed('Compiled ' + this.options.name) } - - this.bar.terminate() - this.bar = undefined } }