diff --git a/packages/cli-utils/src/index.js b/packages/cli-utils/src/index.js index ebaa5e3888..fe6d2ab7b7 100644 --- 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 index 1ab58a3096..f88c5fc6cc 100644 --- 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 index 5fcd4e9e1f..e46e9bfca5 100644 --- 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 index d17b2e2bcc..5141e7d389 100644 --- 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();