Prettier output

Author: geowarin

src/formatters/defaultError.js

@@ -1,10 +1,10 @@
 'use strict';
 
-const chalk = require('chalk');
 const concat = require('../utils').concat;
+const formatTitle = require('../utils/colors').formatTitle;
 
-function displayError(index, severity, error) {
-  const baseError = chalk.red(`${index + 1}) ${severity}`);
+function displayError(severity, error) {
+  const baseError = formatTitle(severity, severity);
 
   return concat(
     `${baseError} ${error.file ? 'in ' + error.file : ''}`,
@@ -26,8 +26,8 @@ function isDefaultError(error) {
 function format(errors, type) {
   return errors
     .filter(isDefaultError)
-    .reduce((accum, error, i ) => (
-      accum.concat(displayError(i, type, error))
+    .reduce((accum, error) => (
+      accum.concat(displayError(type, error))
     ), []);
 }
 

src/friendly-errors-plugin.js

@@ -44,18 +44,18 @@ class FriendlyErrorsWebpackPlugin {
       }
 
       if (hasErrors) {
-        this.displayErrors(stats.compilation.errors, 'error', 'red');
+        this.displayErrors(stats.compilation.errors, 'error');
         return;
       }
 
       if (hasWarnings) {
-        this.displayErrors(stats.compilation.warnings, 'warning', 'yellow');
+        this.displayErrors(stats.compilation.warnings, 'warning');
       }
     });
 
     compiler.plugin('invalid', () => {
       this.clearConsole();
-      output.log(chalk.cyan('Compiling...'));
+      output.title('info', 'WAIT', 'Compiling...');
     });
   }
 
@@ -67,25 +67,27 @@ class FriendlyErrorsWebpackPlugin {
 
   displaySuccess(stats) {
     const time = stats.endTime - stats.startTime;
-    output.log(chalk.green('Compiled successfully in ' + time + 'ms'));
+    output.title('success', 'DONE', 'Compiled successfully in ' + time + 'ms');
 
     if (this.compilationSuccessMessage) {
-      output.log(this.compilationSuccessMessage);
+      output.info(this.compilationSuccessMessage);
     }
   }
 
-  displayErrors(errors, level, color) {
+  displayErrors(errors, severity) {
 
     const processedErrors = transformErrors(errors, this.transformers);
     const nbErrors = processedErrors.length;
-    displayCompilationMessage(`Failed to compile with ${nbErrors} ${level}s`, color);
+
+    const subtitle =  severity === 'error' ? `Failed to compile with ${nbErrors} ${severity}s` : `Compiled with ${nbErrors} ${severity}s`;
+    output.title(severity, severity.toUpperCase(), subtitle);
 
     if (this.onErrors) {
-      this.onErrors(level, processedErrors);
+      this.onErrors(severity, processedErrors);
     }
 
     const topErrors = getMaxSeverityErrors(processedErrors);
-    formatErrors(topErrors, this.formatters, level)
+    formatErrors(topErrors, this.formatters, severity)
       .forEach((chunk) => output.log(chunk));
   }
 }

src/output.js

@@ -1,6 +1,6 @@
 'use strict';
 
-
+const colors = require('./utils/colors');
 const chalk = require('chalk');
 
 class Debugger {
@@ -32,6 +32,22 @@ class Debugger {
     }
   }
 
+  info (message) {
+    if (this.enabled) {
+      const titleFormatted = colors.formatTitle('info', 'I');
+      this.log(titleFormatted, message);
+    }
+  }
+
+  title (severity, title, subtitle) {
+    if (this.enabled) {
+      const titleFormatted = colors.formatTitle(severity, title);
+      const subTitleFormatted = colors.formatText(severity, subtitle);
+      this.log(titleFormatted, subTitleFormatted);
+      this.log();
+    }
+  }
+
   clearConsole () {
     if (!this.capturing && this.enabled) {
       process.stdout.write('\x1bc');
@@ -59,4 +75,8 @@ class Debugger {
   }
 }
 
+function capitalizeFirstLetter (string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
 module.exports = new Debugger();

src/utils/colors.js

@@ -0,0 +1,37 @@
+'use strict';
+
+const chalk = require('chalk');
+
+function formatTitle(severity, message) {
+  return chalk[bgColor(severity)].black('', message, '');
+}
+
+function formatText(severity, message) {
+  return chalk[textColor(severity)](message);
+}
+
+function bgColor(severity) {
+  const color = textColor(severity);
+  return 'bg'+ capitalizeFirstLetter(color)
+}
+
+function textColor(serverity) {
+  switch (serverity.toLowerCase()) {
+    case 'success': return 'green';
+    case 'info': return 'blue';
+    case 'warning': return 'yellow';
+    case 'error': return 'red';
+    default: return 'red';
+  }
+}
+
+function capitalizeFirstLetter(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+module.exports = {
+  bgColor: bgColor,
+  textColor: textColor,
+  formatTitle: formatTitle,
+  formatText: formatText
+};

test/integration.spec.js

@@ -12,8 +12,7 @@ test('integration : module-errors', t => {
   });
 
   assert.deepEqual(logs, [
-    '',
-    'Failed to compile with 2 errors',
+    ' ERROR  Failed to compile with 2 errors',
     '',
     'These dependencies were not found in node_modules:',
     '',
@@ -31,10 +30,9 @@ test('integration : should display eslint warnings', t => {
   });
 
   assert.deepEqual(logs, [
+    ' WARNING  Compiled with 1 warnings',
     '',
-    'Failed to compile with 1 warnings',
-    '',
-    '1) warning in ./fixtures/eslint-warnings/index.js',
+    ' warning  in ./fixtures/eslint-warnings/index.js',
     '',
     `${__dirname}/fixtures/eslint-warnings/index.js
   1:7  warning  'unused' is defined but never used  no-unused-vars
@@ -55,10 +53,9 @@ test('integration : babel syntax error', t => {
   });
 
   assert.deepEqual(logs, [
+    ' ERROR  Failed to compile with 1 errors',
     '',
-    'Failed to compile with 1 errors',
-    '',
-    '1) error in ./fixtures/babel-syntax/index.js',
+    ' error  in ./fixtures/babel-syntax/index.js',
     '',
     `Module build failed: SyntaxError: Unexpected token (5:11)
 

test/unit/formatters/defaultError.spec.js

@@ -8,7 +8,7 @@ const error = { message: 'Error message', file: './src/index.js' };
 
 test('Formats errors with no type', () => {
   expect(noColor(defaultError([error], 'Warning'))).toEqual([
-    '1) Warning in ./src/index.js',
+    ' Warning  in ./src/index.js',
     '',
     'Error message',
     '',

test/unit/plugin/friendlyErrors.spec.js

@@ -19,8 +19,10 @@ test('friendlyErrors : capture invalid message', t => {
     mockCompiler.emit('invalid');
   });
 
-  assert.deepEqual(logs,
-    ['Compiling...']
+  assert.deepEqual(logs, [
+    ' WAIT  Compiling...',
+    ''
+    ]
   );
 });
 
@@ -32,7 +34,8 @@ test('friendlyErrors : capture compilation without errors', t => {
   });
 
   assert.deepEqual(logs, [
-    'Compiled successfully in 100ms'
+    ' DONE  Compiled successfully in 100ms',
+    ''
   ]);
 });