feat(cli): Report info border color based on delta type

relative-ci · Feb 29, 2020 · 054a927 · 054a927
1 parent 1f4e1d5
commit 054a927
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 16 deletions.
diff --git a/packages/cli-utils/src/index.js b/packages/cli-utils/src/index.js
@@ -8,4 +8,4 @@ export * from './constants';
 
 export const TEXT = T;
 
-export const getReportInfo = (report) => get(report, 'insights.webpack.assetsSizeTotal.data.text');
+export const getReportInfo = (report) => get(report, 'insights.webpack.assetsSizeTotal.data');
diff --git a/packages/cli/README.md b/packages/cli/README.md
@@ -102,9 +102,11 @@ $ bundle-stats --html --json __fixtures__/webpack-stats-0.json __fixtures__/webp
   ✔ Generate reports
   ✔ Save reports
 
-┌────────────────────────────────────────────┐
-│Bundle size decreased with -3.06KB (-0.38%).│
-└────────────────────────────────────────────┘
+┌─────────────────────────────────────────────────┐
+│                                                 │
+│   Bundle size decreased with 3.06KB (-0.38%).   │
+│                                                 │
+└─────────────────────────────────────────────────┘
 
 Artifacts saved:
 - ./dist/bundle-stats.html
@@ -132,15 +134,17 @@ $ bundle-stats --baseline artifacts/webpack-stats.json
  ✔ Generate reports
  ✔ Save reports
 
-┌────────────────────────────────────────────┐
-│Bundle size decreased with -3.06KB (-0.38%).│
-└────────────────────────────────────────────┘
+┌─────────────────────────────────────────────────┐
+│                                                 │
+│   Bundle size decreased with 3.06KB (-0.38%).   │
+│                                                 │
+└─────────────────────────────────────────────────┘
 
 Artifacts saved:
 - ./dist/bundle-stats.html
 ```
 
-```
+```shell
 # Checkout to the working branch/tag/commit
 $ git checkout MY_FEATURE_BRANCH
 
@@ -157,9 +161,11 @@ $ bundle-stats artifacts/webpack-stats.json
  ✔ Generate reports
  ✔ Save reports
 
-┌────────────────────────────────────────────┐
-│Bundle size decreased with -3.06KB (-0.38%).│
-└────────────────────────────────────────────┘
+┌─────────────────────────────────────────────────┐
+│                                                 │
+│   Bundle size decreased with 3.06KB (-0.38%).   │
+│                                                 │
+└─────────────────────────────────────────────────┘
 
 Artifacts saved:
 - ./dist/bundle-stats.html

diff --git a/packages/cli/bin/run.js b/packages/cli/bin/run.js
@@ -5,12 +5,37 @@ const Listr = require('listr');
 const { get } = require('lodash');
 const boxen = require('boxen');
 
-const { createJobs, createReport } = require('@bundle-stats/utils');
+const {
+  DELTA_TYPE_HIGH_NEGATIVE,
+  DELTA_TYPE_NEGATIVE,
+  DELTA_TYPE_LOW_NEGATIVE,
+  DELTA_TYPE_NO_CHANGE,
+  DELTA_TYPE_LOW_POSITIVE,
+  DELTA_TYPE_POSITIVE,
+  DELTA_TYPE_HIGH_POSITIVE,
+  createJobs,
+  createReport,
+} = require('@bundle-stats/utils');
 const { filter } = require('@bundle-stats/utils/lib/webpack');
 const {
   TEXT, createArtifacts, getBaselineStatsFilepath, getReportInfo, readBaseline, writeBaseline,
 } = require('@bundle-stats/cli-utils');
 
+const REPORT_INFO_COLORS = {
+  [DELTA_TYPE_HIGH_NEGATIVE]: 'red',
+  [DELTA_TYPE_NEGATIVE]: 'red',
+  [DELTA_TYPE_LOW_NEGATIVE]: 'yellow',
+  [DELTA_TYPE_NO_CHANGE]: 'gray',
+  [DELTA_TYPE_LOW_POSITIVE]: 'green',
+  [DELTA_TYPE_POSITIVE]: 'green',
+  [DELTA_TYPE_HIGH_POSITIVE]: 'green',
+};
+
+const getReportInfoBorderColor = (reportInfo) => {
+  const { deltaType } = reportInfo.info;
+  return REPORT_INFO_COLORS[deltaType];
+};
+
 module.exports = ({
   baseline, compare, html, json, outDir, artifactFilepaths,
 }) => {
@@ -105,10 +130,18 @@ module.exports = ({
 
   tasks.run()
     .then(({ output, report }) => {
-      const info = getReportInfo(report);
+      const reportInfo = getReportInfo(report);
+
+      if (reportInfo) {
+        const infoBox = boxen(
+          reportInfo.text,
+          {
+            padding: 1,
+            borderColor: getReportInfoBorderColor(reportInfo),
+          },
+        );
 
-      if (info) {
-        console.log(`\n${boxen(info)}`);
+        console.log(`\n${infoBox}`);
       }
 
       console.log('\nArtifacts:');

diff --git a/packages/webpack-plugin/src/webpack-plugin.js b/packages/webpack-plugin/src/webpack-plugin.js
@@ -92,7 +92,7 @@ const getOnEmit = (options) => async (compilation, callback) => {
   const info = getReportInfo(report);
 
   if (info) {
-    logger.info(info);
+    logger.info(info.text);
   }
 
   callback();