refactor: use statesArray

src/plugin.js

@@ -2,6 +2,8 @@ import { ProgressPlugin } from 'webpack';
 import env from 'std-env';
 import prettyTime from 'pretty-time';
 
+import { startCase } from './utils';
+
 import * as reporters from './reporters'; // eslint-disable-line import/no-namespace
 import { parseRequest } from './utils/request';
 
@@ -46,6 +48,7 @@ export default class WebpackBarPlugin extends ProgressPlugin {
       this.states[this.options.name] = {
         ...DEFAULT_STATE,
         color: this.options.color,
+        name: startCase(this.options.name),
       };
     }
     this.state = this.states[this.options.name];
@@ -108,6 +111,12 @@ export default class WebpackBarPlugin extends ProgressPlugin {
     return Object.values(this.states).some((state) => state.hasErrors);
   }
 
+  get statesArray() {
+    return Object.values(this.states).sort((s1, s2) =>
+      s1.name.localeCompare(s2.name)
+    );
+  }
+
   apply(compiler) {
     super.apply(compiler);
 

src/reporters/basic.js

@@ -2,13 +2,11 @@ import { consola } from '../utils/cli';
 
 export default class SimpleReporter {
   beforeRun(context) {
-    consola.info(`Compiling ${context.options.name}`);
+    consola.info(`Compiling ${context.state.name}`);
   }
 
   done(context) {
-    const { hasError, message } = context.state;
-    consola[hasError ? 'error' : 'success'](
-      `${context.options.name} ${message}`
-    );
+    const { hasError, message, name } = context.state;
+    consola[hasError ? 'error' : 'success'](`${name}: ${message}`);
   }
 }

src/reporters/fancy.js

@@ -22,28 +22,26 @@ export default class FancyReporter {
   }
 
   done(context) {
-    this._renderStates(context.states);
+    this._renderStates(context.statesArray);
   }
 
   progress(context) {
     if (Date.now() - lastRender > 50) {
-      this._renderStates(context.states);
+      this._renderStates(context.statesArray);
     }
   }
 
-  _renderStates(states) {
+  _renderStates(statesArray) {
     lastRender = Date.now();
 
-    const renderedStates = Object.keys(states)
-      .sort((n1, n2) => n1.localeCompare(n2))
-      .map((name) => ({ name, state: states[name] }))
+    const renderedStates = statesArray
       .map((c) => this._renderState(c))
       .join('\n\n');
 
     logUpdate.render('\n' + renderedStates + '\n');
   }
 
-  _renderState({ name, state }) {
+  _renderState(state) {
     const color = colorize(state.color);
 
     let line1;
@@ -53,7 +51,7 @@ export default class FancyReporter {
       // Running
       line1 = [
         color(BULLET),
-        color(name),
+        color(state.name),
         renderBar(state.progress, state.color),
         state.message,
         `(${state.progress || 0}%)`,
@@ -78,7 +76,7 @@ export default class FancyReporter {
         icon = CIRCLE_OPEN;
       }
 
-      line1 = color(`${icon} ${name}`);
+      line1 = color(`${icon} ${state.name}`);
       line2 = chalk.grey('  ' + state.message);
     }