@bundle-stats/utils 3.2.1 → 3.3.0-alpha.1

package/lib-esm/webpack/metrics.js

@@ -1,59 +1,63 @@
 import { METRIC_TYPE_FILE_SIZE, METRIC_TYPE_NUMERIC, METRIC_TYPE_PERCENTAGE, } from '../config/metrics';
+import { MetricId, SizeByTypeMetricId } from './constants';
 export const metrics = {
-    totalSizeByTypeALL: {
+    [MetricId.BundleSize]: {
         label: 'Bundle Size',
         description: 'Sum of all assets emitted by webpack.',
         url: 'https://relative-ci.com/documentation/metrics-and-data#assets',
         type: METRIC_TYPE_FILE_SIZE,
+        biggerIsBetter: false,
     },
-    totalInitialSizeJS: {
+    [MetricId.TotalInitialSizeJS]: {
         label: 'Initial JS',
         description: 'Sum of all JavaScript assets that are labeled as initial(eg: vendor.js, app.js).',
         url: 'https://relative-ci.com/documentation/metrics-and-data#assets',
         type: METRIC_TYPE_FILE_SIZE,
+        biggerIsBetter: false,
     },
-    totalInitialSizeCSS: {
+    [MetricId.TotalInitialSizeCSS]: {
         label: 'Initial CSS',
         description: 'Sum of all CSS assets that are labeled as initial(eg: vendor.css, app.css).',
         url: 'https://relative-ci.com/documentation/metrics-and-data#assets',
         type: METRIC_TYPE_FILE_SIZE,
+        biggerIsBetter: false,
     },
-    cacheInvalidation: {
+    [MetricId.CacheInvalidation]: {
         label: 'Cache Invalidation',
         description: 'Ratio between the total changed assets and Bundle Size.',
         url: 'https://relative-ci.com/documentation/metrics-and-data#assets',
         type: METRIC_TYPE_PERCENTAGE,
         biggerIsBetter: false,
     },
-    chunkCount: {
+    [MetricId.ChunkCount]: {
         label: 'Chunks',
         description: 'Total number of chunks generated by webpack.',
         url: 'https://relative-ci.com/documentation/metrics-and-data#assets',
         type: METRIC_TYPE_NUMERIC,
         biggerIsBetter: false,
     },
-    assetCount: {
+    [MetricId.AssetCount]: {
         label: 'Assets',
         description: 'Total number of assets emitted by webpack.',
         url: 'https://relative-ci.com/documentation/metrics-and-data#assets',
         type: METRIC_TYPE_NUMERIC,
         biggerIsBetter: false,
     },
-    moduleCount: {
+    [MetricId.ModuleName]: {
         label: 'Modules',
         description: 'Total number of modules bundled by webpack.',
         url: 'https://relative-ci.com/documentation/metrics-and-data#modules-1',
         type: METRIC_TYPE_NUMERIC,
         biggerIsBetter: false,
     },
-    packageCount: {
+    [MetricId.PackageCount]: {
         label: 'Packages',
         description: 'Total number of packages bundled by webpack.',
         url: 'https://relative-ci.com/documentation/metrics-and-data#packages',
         type: METRIC_TYPE_NUMERIC,
         biggerIsBetter: false,
     },
-    duplicatePackagesCount: {
+    [MetricId.DuplicatePackagesCount]: {
         label: 'Duplicate Packages',
         description: 'Total number of packages that are duplicated.',
         url: 'https://relative-ci.com/documentation/metrics-and-data#packages',
@@ -61,33 +65,40 @@ export const metrics = {
         biggerIsBetter: false,
     },
     sizes: {
-        totalSizeByTypeJS: {
+        [SizeByTypeMetricId.JS]: {
             label: 'JS',
             type: METRIC_TYPE_FILE_SIZE,
+            biggerIsBetter: false,
         },
-        totalSizeByTypeCSS: {
+        [SizeByTypeMetricId.CSS]: {
             label: 'CSS',
             type: METRIC_TYPE_FILE_SIZE,
+            biggerIsBetter: false,
         },
-        totalSizeByTypeIMG: {
+        [SizeByTypeMetricId.IMG]: {
             label: 'IMG',
             type: METRIC_TYPE_FILE_SIZE,
+            biggerIsBetter: false,
         },
-        totalSizeByTypeMEDIA: {
+        [SizeByTypeMetricId.Media]: {
             label: 'Media',
             type: METRIC_TYPE_FILE_SIZE,
+            biggerIsBetter: false,
         },
-        totalSizeByTypeFONT: {
+        [SizeByTypeMetricId.Font]: {
             label: 'Fonts',
             type: METRIC_TYPE_FILE_SIZE,
+            biggerIsBetter: false,
         },
-        totalSizeByTypeHTML: {
+        [SizeByTypeMetricId.HTML]: {
             label: 'HTML',
             type: METRIC_TYPE_FILE_SIZE,
+            biggerIsBetter: false,
         },
-        totalSizeByTypeOTHER: {
+        [SizeByTypeMetricId.Other]: {
             label: 'Other',
             type: METRIC_TYPE_FILE_SIZE,
+            biggerIsBetter: false,
         },
     },
 };

package/lib-esm/webpack/metrics.js.map

@@ -1 +1 @@
-{"version":3,"file":"metrics.js","sourceRoot":"","sources":["../../src/webpack/metrics.js"],"names":[],"mappings":"AAAA,OAAO,EACL,qBAAqB,EACrB,mBAAmB,EACnB,sBAAsB,GACvB,MAAM,mBAAmB,CAAC;AAE3B,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,kBAAkB,EAAE;QAClB,KAAK,EAAE,aAAa;QACpB,WAAW,EAAE,uCAAuC;QACpD,GAAG,EAAE,+DAA+D;QACpE,IAAI,EAAE,qBAAqB;KAC5B;IACD,kBAAkB,EAAE;QAClB,KAAK,EAAE,YAAY;QACnB,WAAW,EAAE,kFAAkF;QAC/F,GAAG,EAAE,+DAA+D;QACpE,IAAI,EAAE,qBAAqB;KAC5B;IACD,mBAAmB,EAAE;QACnB,KAAK,EAAE,aAAa;QACpB,WAAW,EAAE,6EAA6E;QAC1F,GAAG,EAAE,+DAA+D;QACpE,IAAI,EAAE,qBAAqB;KAC5B;IACD,iBAAiB,EAAE;QACjB,KAAK,EAAE,oBAAoB;QAC3B,WAAW,EAAE,yDAAyD;QACtE,GAAG,EAAE,+DAA+D;QACpE,IAAI,EAAE,sBAAsB;QAC5B,cAAc,EAAE,KAAK;KACtB;IACD,UAAU,EAAE;QACV,KAAK,EAAE,QAAQ;QACf,WAAW,EAAE,8CAA8C;QAC3D,GAAG,EAAE,+DAA+D;QACpE,IAAI,EAAE,mBAAmB;QACzB,cAAc,EAAE,KAAK;KACtB;IACD,UAAU,EAAE;QACV,KAAK,EAAE,QAAQ;QACf,WAAW,EAAE,4CAA4C;QACzD,GAAG,EAAE,+DAA+D;QACpE,IAAI,EAAE,mBAAmB;QACzB,cAAc,EAAE,KAAK;KACtB;IACD,WAAW,EAAE;QACX,KAAK,EAAE,SAAS;QAChB,WAAW,EAAE,6CAA6C;QAC1D,GAAG,EAAE,kEAAkE;QACvE,IAAI,EAAE,mBAAmB;QACzB,cAAc,EAAE,KAAK;KACtB;IACD,YAAY,EAAE;QACZ,KAAK,EAAE,UAAU;QACjB,WAAW,EAAE,8CAA8C;QAC3D,GAAG,EAAE,iEAAiE;QACtE,IAAI,EAAE,mBAAmB;QACzB,cAAc,EAAE,KAAK;KACtB;IACD,sBAAsB,EAAE;QACtB,KAAK,EAAE,oBAAoB;QAC3B,WAAW,EAAE,+CAA+C;QAC5D,GAAG,EAAE,iEAAiE;QACtE,IAAI,EAAE,mBAAmB;QACzB,cAAc,EAAE,KAAK;KACtB;IACD,KAAK,EAAE;QACL,iBAAiB,EAAE;YACjB,KAAK,EAAE,IAAI;YACX,IAAI,EAAE,qBAAqB;SAC5B;QACD,kBAAkB,EAAE;YAClB,KAAK,EAAE,KAAK;YACZ,IAAI,EAAE,qBAAqB;SAC5B;QACD,kBAAkB,EAAE;YAClB,KAAK,EAAE,KAAK;YACZ,IAAI,EAAE,qBAAqB;SAC5B;QACD,oBAAoB,EAAE;YACpB,KAAK,EAAE,OAAO;YACd,IAAI,EAAE,qBAAqB;SAC5B;QACD,mBAAmB,EAAE;YACnB,KAAK,EAAE,OAAO;YACd,IAAI,EAAE,qBAAqB;SAC5B;QACD,mBAAmB,EAAE;YACnB,KAAK,EAAE,MAAM;YACb,IAAI,EAAE,qBAAqB;SAC5B;QACD,oBAAoB,EAAE;YACpB,KAAK,EAAE,OAAO;YACd,IAAI,EAAE,qBAAqB;SAC5B;KACF;CACF,CAAC"}
+{"version":3,"file":"metrics.js","sourceRoot":"","sources":["../../src/webpack/metrics.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,qBAAqB,EACrB,mBAAmB,EACnB,sBAAsB,GACvB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAE3D,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE;QACrB,KAAK,EAAE,aAAa;QACpB,WAAW,EAAE,uCAAuC;QACpD,GAAG,EAAE,+DAA+D;QACpE,IAAI,EAAE,qBAAqB;QAC3B,cAAc,EAAE,KAAK;KACtB;IACD,CAAC,QAAQ,CAAC,kBAAkB,CAAC,EAAE;QAC7B,KAAK,EAAE,YAAY;QACnB,WAAW,EAAE,kFAAkF;QAC/F,GAAG,EAAE,+DAA+D;QACpE,IAAI,EAAE,qBAAqB;QAC3B,cAAc,EAAE,KAAK;KACtB;IACD,CAAC,QAAQ,CAAC,mBAAmB,CAAC,EAAE;QAC9B,KAAK,EAAE,aAAa;QACpB,WAAW,EAAE,6EAA6E;QAC1F,GAAG,EAAE,+DAA+D;QACpE,IAAI,EAAE,qBAAqB;QAC3B,cAAc,EAAE,KAAK;KACtB;IACD,CAAC,QAAQ,CAAC,iBAAiB,CAAC,EAAE;QAC5B,KAAK,EAAE,oBAAoB;QAC3B,WAAW,EAAE,yDAAyD;QACtE,GAAG,EAAE,+DAA+D;QACpE,IAAI,EAAE,sBAAsB;QAC5B,cAAc,EAAE,KAAK;KACtB;IACD,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE;QACrB,KAAK,EAAE,QAAQ;QACf,WAAW,EAAE,8CAA8C;QAC3D,GAAG,EAAE,+DAA+D;QACpE,IAAI,EAAE,mBAAmB;QACzB,cAAc,EAAE,KAAK;KACtB;IACD,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE;QACrB,KAAK,EAAE,QAAQ;QACf,WAAW,EAAE,4CAA4C;QACzD,GAAG,EAAE,+DAA+D;QACpE,IAAI,EAAE,mBAAmB;QACzB,cAAc,EAAE,KAAK;KACtB;IACD,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE;QACrB,KAAK,EAAE,SAAS;QAChB,WAAW,EAAE,6CAA6C;QAC1D,GAAG,EAAE,kEAAkE;QACvE,IAAI,EAAE,mBAAmB;QACzB,cAAc,EAAE,KAAK;KACtB;IACD,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE;QACvB,KAAK,EAAE,UAAU;QACjB,WAAW,EAAE,8CAA8C;QAC3D,GAAG,EAAE,iEAAiE;QACtE,IAAI,EAAE,mBAAmB;QACzB,cAAc,EAAE,KAAK;KACtB;IACD,CAAC,QAAQ,CAAC,sBAAsB,CAAC,EAAE;QACjC,KAAK,EAAE,oBAAoB;QAC3B,WAAW,EAAE,+CAA+C;QAC5D,GAAG,EAAE,iEAAiE;QACtE,IAAI,EAAE,mBAAmB;QACzB,cAAc,EAAE,KAAK;KACtB;IACD,KAAK,EAAE;QACL,CAAC,kBAAkB,CAAC,EAAE,CAAC,EAAE;YACvB,KAAK,EAAE,IAAI;YACX,IAAI,EAAE,qBAAqB;YAC3B,cAAc,EAAE,KAAK;SACtB;QACD,CAAC,kBAAkB,CAAC,GAAG,CAAC,EAAE;YACxB,KAAK,EAAE,KAAK;YACZ,IAAI,EAAE,qBAAqB;YAC3B,cAAc,EAAE,KAAK;SACtB;QACD,CAAC,kBAAkB,CAAC,GAAG,CAAC,EAAE;YACxB,KAAK,EAAE,KAAK;YACZ,IAAI,EAAE,qBAAqB;YAC3B,cAAc,EAAE,KAAK;SACtB;QACD,CAAC,kBAAkB,CAAC,KAAK,CAAC,EAAE;YAC1B,KAAK,EAAE,OAAO;YACd,IAAI,EAAE,qBAAqB;YAC3B,cAAc,EAAE,KAAK;SACtB;QACD,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE;YACzB,KAAK,EAAE,OAAO;YACd,IAAI,EAAE,qBAAqB;YAC3B,cAAc,EAAE,KAAK;SACtB;QACD,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE;YACzB,KAAK,EAAE,MAAM;YACb,IAAI,EAAE,qBAAqB;YAC3B,cAAc,EAAE,KAAK;SACtB;QACD,CAAC,kBAAkB,CAAC,KAAK,CAAC,EAAE;YAC1B,KAAK,EAAE,OAAO;YACd,IAAI,EAAE,qBAAqB;YAC3B,cAAc,EAAE,KAAK;SACtB;KACF;CACF,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/utils",
-  "version": "3.2.1",
+  "version": "3.3.0-alpha.1",
   "description": "BundleStats utils",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -35,8 +35,8 @@
   },
   "homepage": "https://github.com/relative-ci/bundle-stats/blob/master/packages/utils#readme",
   "dependencies": {
-    "@bundle-stats/plugin-webpack-filter": "^3.2.1",
-    "@bundle-stats/plugin-webpack-validate": "^3.2.1",
+    "@bundle-stats/plugin-webpack-filter": "^3.3.0-alpha.1",
+    "@bundle-stats/plugin-webpack-validate": "^3.3.0-alpha.1",
     "convert-units": "^3.0.0-beta.2",
     "query-string": "^7.0.0",
     "serialize-query-params": "^1.3.3"
@@ -44,19 +44,19 @@
   "devDependencies": {
     "@types/jest": "27.0.3",
     "@types/lodash": "4.14.177",
-    "core-js": "3.19.1",
-    "jest": "27.3.1",
-    "jest-cli": "27.3.1",
+    "core-js": "3.19.3",
+    "jest": "27.4.3",
+    "jest-cli": "27.4.3",
     "jest-date-mock": "1.0.8",
     "lodash": "4.17.21",
     "regenerator-runtime": "0.13.9",
     "rimraf": "3.0.2",
-    "ts-jest": "27.0.7",
+    "ts-jest": "27.1.1",
     "typescript": "4.5.2"
   },
   "peerDependencies": {
     "core-js": "^3.16.2",
     "lodash": "^4.17.21"
   },
-  "gitHead": "0fdfecf0860efdf80e19fa1bb16bb1fddbe070a4"
+  "gitHead": "b510975b373ee38b66899a990c7341d1a29a69e2"
 }

package/src/constants.ts

@@ -162,3 +162,10 @@ export interface BrowsertimeMetrics {
   visualComplete95: MetricRun;
   visualComplete99: MetricRun;
 }
+
+export enum InsightType {
+  ERROR = 'ERROR',
+  WARNING = 'WARNING',
+  INFO = 'INFO',
+  SUCCESS = 'SUCCESS',
+}

package/src/index.js

@@ -1,6 +1,8 @@
 export * from './browsertime';
 export * from './config';
+export * from './constants';
 // export * as I18N from './i18n';
 export * from './jobs';
 export * from './report';
 export * from './utils';
+export * as transformers from './transformers';

package/src/jobs/create-job.js

@@ -14,7 +14,7 @@ const GENERIC_PROPS = ['meta', 'insights', 'metrics'];
 /*
  * Create job from stats
  */
-export const createJob = (source, baseline) => SOURCE_PATHS.reduce((agg, sourcePath) => {
+export const createJob = (source, baseline, options = {}) => SOURCE_PATHS.reduce((agg, sourcePath) => {
   const rawData = get(source, sourcePath);
 
   if (!rawData) {
@@ -27,7 +27,7 @@ export const createJob = (source, baseline) => SOURCE_PATHS.reduce((agg, sourceP
     return agg;
   }
 
-  const extractedData = sourceModule.extract(rawData, baseline);
+  const extractedData = sourceModule.extract(rawData, baseline, options[sourcePath]);
   const summary = createSummary(
     SOURCE_FNS[sourcePath].SUMMARY_METRIC_PATHS,
     get(baseline, `metrics.${sourcePath}`, {}),

package/src/jobs/create-jobs.js

@@ -6,9 +6,9 @@ import { createJob } from './create-job';
 /*
  * Create jobs from sources
  */
-export const createJobs = (sources) => {
+export const createJobs = (sources, options) => {
   const jobs = reverse([...sources]).reduce((agg, source, idx) => {
-    const job = createJob(source, last(agg));
+    const job = createJob(source, last(agg), options);
     const internalBuildNumber = job.internalBuildNumber || idx + 1;
     const label = `Job #${internalBuildNumber}`;
 

package/src/transformers/budgets-insights.ts

@@ -0,0 +1,143 @@
+import get from 'lodash/get';
+
+import { InsightType } from '../constants';
+import { getGlobalMetricType } from '../utils';
+
+interface OptionBudgetMetric {
+  metric: string;
+  value: number;
+}
+
+interface Options {
+  budgets?: Array<OptionBudgetMetric>;
+}
+
+interface BudgetInsight {
+  currentValue: number;
+  budgetValue: number;
+  failed: boolean;
+}
+
+interface BudgetInsightInfo {
+  type: InsightType;
+  message: {
+    template: string;
+    data: Record<string, unknown>;
+  };
+  source: {
+    metricId: string;
+    budgetInsight: BudgetInsight;
+  };
+}
+
+interface BudgetInsights {
+  [metricId: string]: BudgetInsight;
+}
+
+interface BudgetsInsightsOutput {
+  insights: {
+    budgets: BudgetInsights;
+  };
+}
+
+export const getExtract =
+  (source: string) => (
+    _: unknown,
+    currentExtractedData: any,
+    __: unknown,
+    options: Options = {},
+  ): BudgetsInsightsOutput | null => {
+    const { budgets: budgetsOptions } = options;
+
+    if (!budgetsOptions) {
+      return null;
+    }
+
+    const insights: Array<[string, BudgetInsight]> = [];
+
+    budgetsOptions.forEach((budgetOption) => {
+      const { metric: budgetMetricId, value: budgetValue } = budgetOption;
+      const currentValue = get(currentExtractedData, `metrics.${budgetMetricId}.value`);
+      const metric = getGlobalMetricType(`${source}.${budgetMetricId}`);
+
+      if (!currentValue) {
+        return;
+      }
+
+      const isValueOverBudget = currentValue > budgetValue;
+
+      const budgetInsight = {
+        currentValue,
+        budgetValue,
+        failed: metric.biggerIsBetter ? !isValueOverBudget : isValueOverBudget,
+      };
+
+      insights.push([budgetMetricId, budgetInsight]);
+    });
+
+    if (insights.length === 0) {
+      return null;
+    }
+
+    return {
+      insights: {
+        budgets: Object.fromEntries(insights),
+      },
+    };
+  };
+
+const resolveDiffLabel = (budgetInsight: BudgetInsight): string => {
+  const { currentValue, budgetValue } = budgetInsight;
+
+  if (currentValue > budgetValue) {
+    return 'over';
+  }
+
+  if (currentValue < budgetValue) {
+    return 'under';
+  }
+
+  return 'equal with';
+};
+
+const resolveType = (budgetInsight: BudgetInsight): InsightType => {
+  if (budgetInsight.failed) {
+    return InsightType.ERROR;
+  }
+
+  if (budgetInsight.currentValue === budgetInsight.budgetValue) {
+    return InsightType.WARNING;
+  }
+
+  return InsightType.SUCCESS;
+};
+
+// Add escapes for (|) to avoid lodash.template syntax errors
+// eslint-disable-next-line no-useless-escape
+export const INFO_MESSAGE_TEMPLATE = '<%= metricLabel %> value \(<%= currentValue %>\) is <%= diffLabel %> <%= budgetValue %> budget';
+
+export const getInfo = (globalMetricId: string, budgetInsight: BudgetInsight): BudgetInsightInfo => {
+  const metric = getGlobalMetricType(globalMetricId);
+
+  const diffLabel = resolveDiffLabel(budgetInsight);
+  const type = resolveType(budgetInsight);
+  const currentValue = metric.formatter(budgetInsight.currentValue);
+  const budgetValue = metric.formatter(budgetInsight.budgetValue);
+
+  return {
+    type,
+    message: {
+      template: INFO_MESSAGE_TEMPLATE,
+      data: {
+        metricLabel: metric.label,
+        diffLabel,
+        currentValue,
+        budgetValue,
+      },
+    },
+    source: {
+      metricId: globalMetricId,
+      budgetInsight,
+    },
+  };
+};

package/src/transformers/index.ts

@@ -0,0 +1 @@
+export * as budgetInsights from './budgets-insights';

package/src/webpack/{constants.js → constants.ts}

@@ -12,17 +12,32 @@ export const SECTIONS = [
   SECTION_WEBPACK_PACKAGES,
 ];
 
-export const SUMMARY_METRIC_PATHS = [
-  'totalSizeByTypeALL',
-  'totalInitialSizeJS',
-  'totalInitialSizeCSS',
-  'cacheInvalidation',
-  'moduleCount',
-  'chunkCount',
-  'assetCount',
-  'packageCount',
-  'duplicatePackagesCount',
-];
+export enum MetricId {
+  BundleSize = 'totalSizeByTypeALL',
+  TotalInitialSizeJS = 'totalInitialSizeJS',
+  TotalInitialSizeCSS = 'totalInitialSizeCSS',
+  CacheInvalidation = 'cacheInvalidation',
+  ModuleName = 'moduleCount',
+  ChunkCount = 'chunkCount',
+  AssetCount = 'assetCount',
+  PackageCount = 'packageCount',
+  DuplicatePackagesCount = 'duplicatePackagesCount',
+}
+
+export const SIZE_BY_TYPE_METRIC_ID_ALL = 'ALL';
+export const SIZE_BY_TYPE_METRIC_ID_PREFIX = 'totalSizeByType';
+
+export enum SizeByTypeMetricId {
+  JS = 'totalSizeByTypeJS',
+  CSS = 'totalSizeByTypeCSS',
+  IMG = 'totalSizeByTypeIMG',
+  Media = 'totalSizeByTypeMEDIA',
+  Font = 'totalSizeByTypeFONT',
+  HTML = 'totalSizeByTypeHTML',
+  Other = 'totalSizeByTypeOTHER',
+}
+
+export const SUMMARY_METRIC_PATHS = Object.values(MetricId);
 
 const PACKAGE_PREFIX = /(?:node_modules|~)(?:\/\.pnpm)?/;
 const PACKAGE_SLUG = /[a-zA-Z0-9]+(?:[-|_|.]+[a-zA-Z0-9]+)*/;
@@ -30,7 +45,7 @@ const VERSION = /@[\w|\-|_|.]+/;
 
 // Extract package paths from module path
 // https://regex101.com/r/22Leep/6
-/* eslint-disable prettier/prettier */
+/* eslint-disable prettier/prettier, @typescript-eslint/indent */
 export const MODULE_PATH_PACKAGES = new RegExp([
   // match dependency directory (eg: `node_modules/`, `node_modules/.pnpm/`)
   `(?:${PACKAGE_PREFIX.source}/)`,
@@ -54,11 +69,9 @@ export const MODULE_PATH_PACKAGES = new RegExp([
   ')*',
   '/',
 ].join(''), 'g');
-/* eslint-enable prettier/prettier */
 
 // Extract package name from package path
 // https://regex101.com/r/tTlU0W/6
-/* eslint-disable prettier/prettier */
 export const PACKAGE_PATH_NAME = new RegExp([
   `(?:${PACKAGE_PREFIX.source}/)`,
   // match dependency
@@ -80,4 +93,4 @@ export const PACKAGE_PATH_NAME = new RegExp([
   ')*',
   '/',
 ].join(''), 'g');
-/* eslint-enable prettier/prettier */
+/* eslint-enable prettier/prettier, @typescript-eslint/indent */

package/src/webpack/extract/assets-size-total-insight.js

@@ -4,21 +4,21 @@ import template from 'lodash/template';
 import { INSIGHT_INFO } from '../../config/insights';
 import { getMetricRunInfo } from '../../utils/metrics';
 import { getMetricType } from '../utils';
+import { MetricId } from '../constants';
 
 const INFO_TEMPLATE = template(
   '<%= metric %> — <%= displayValue %> (<%= displayDeltaPercentage %>).',
 );
-const METRIC_NAME = 'totalSizeByTypeALL';
 
 export const extractAssetsSizeTotalInsight = (
   webpackStats,
   currentExtractedData,
   baselineBundleStats,
 ) => {
-  const currentValue = get(currentExtractedData, ['metrics', METRIC_NAME, 'value'], 0);
-  const baselineValue = get(baselineBundleStats, ['metrics', 'webpack', METRIC_NAME, 'value'], 0);
+  const currentValue = get(currentExtractedData, ['metrics', MetricId.BundleSize, 'value'], 0);
+  const baselineValue = get(baselineBundleStats, ['metrics', 'webpack', MetricId.BundleSize, 'value'], 0);
 
-  const metric = getMetricType(METRIC_NAME);
+  const metric = getMetricType(MetricId.BundleSize);
   const info = getMetricRunInfo(metric, currentValue, baselineValue);
   const { displayDeltaPercentage, displayValue } = info;
 

package/src/webpack/extract/assets-size.js

@@ -4,11 +4,9 @@ import sum from 'lodash/sum';
 
 import { FILE_TYPE_CSS, FILE_TYPE_JS, FILE_TYPES } from '../../config/file-types';
 import { getFileType } from '../../utils/file-types';
+import { SIZE_BY_TYPE_METRIC_ID_PREFIX, SIZE_BY_TYPE_METRIC_ID_ALL } from '../constants';
 
-const METRIC_NAME_ALL = 'ALL';
-const METRIC_NAME_PREFIX = 'totalSizeByType';
-
-const getMetricName = (fileType) => `${METRIC_NAME_PREFIX}${fileType}`;
+const getMetricName = (fileType) => `${SIZE_BY_TYPE_METRIC_ID_PREFIX}${fileType}`;
 
 const generateInitialSizeByType = () => FILE_TYPES.reduce((accumulator, fileType) => ({
   ...accumulator,
@@ -52,7 +50,7 @@ export const extractAssetsSize = (webpackStats, currentExtractedData) => {
 
   const sizes = calculateTotalByType(bundleAssets);
   const generic = {
-    [getMetricName(METRIC_NAME_ALL)]: {
+    [getMetricName(SIZE_BY_TYPE_METRIC_ID_ALL)]: {
       value: sum(map(bundleAssets, 'value')),
     },
     ...calculateInitialTotals(bundleAssets),

package/src/webpack/extract/budgets-insights.ts

@@ -0,0 +1,73 @@
+import get from 'lodash/get';
+
+import { getMetricType } from '../utils';
+
+interface OptionBudgetMetric {
+  metric: string;
+  value: number;
+}
+
+interface Options {
+  budgets?: Array<OptionBudgetMetric>;
+}
+
+interface BudgetInsight {
+  currentValue: number;
+  budgetValue: number;
+  failed: boolean;
+}
+
+interface BudgetsInsights {
+  [metricId: string]: BudgetInsight;
+}
+
+interface ExtractBudgetsInsights {
+  insights: {
+    budgets: BudgetsInsights;
+  };
+}
+
+export default function extractBudgetsInsights(
+  _: unknown,
+  currentExtractedData: any,
+  __: unknown,
+  options: Options = {}
+): ExtractBudgetsInsights | null {
+  const { budgets: budgetsOptions } = options;
+
+  if (!budgetsOptions) {
+    return null;
+  }
+
+  const insights: Array<[string, BudgetInsight]> = [];
+
+  budgetsOptions.forEach((budgetOption) => {
+    const { metric: budgetMetricId, value: budgetValue } = budgetOption;
+    const currentValue = get(currentExtractedData, `metrics.${budgetMetricId}.value`);
+    const metric = getMetricType(budgetMetricId);
+
+    if (!currentValue) {
+      return;
+    }
+
+    const isValueOverBudget = currentValue > budgetValue;
+
+    const budgetInsight = {
+      currentValue,
+      budgetValue,
+      failed: metric.biggerIsBetter ? !isValueOverBudget : isValueOverBudget,
+    };
+
+    insights.push([budgetMetricId, budgetInsight]);
+  });
+
+  if (insights.length === 0) {
+    return null;
+  }
+
+  return {
+    insights: {
+      budgets: Object.fromEntries(insights),
+    },
+  };
+}

package/src/webpack/extract/index.js

@@ -1,5 +1,6 @@
 import merge from 'lodash/merge';
 
+import * as budgetsInsights from '../../transformers/budgets-insights';
 import { extractAssets } from './assets';
 import { extractAssetsCacheInvalidation } from './assets-cache-invalidation';
 import { extractAssetsChunkCount } from './assets-chunk-count';
@@ -26,10 +27,11 @@ const extractFns = [
   extractModulesPackages,
   extractModulesPackagesCount,
   extractModulesPackagesDuplicate,
+  budgetsInsights.getExtract('webpack'),
 ];
 
-export const extract = (webpackStats, baseline) => extractFns.reduce((agg, extractFn) => merge(
-  {},
-  agg,
-  extractFn(webpackStats, agg, baseline),
-), {});
+export const extract = (webpackStats, baseline, options) =>
+  extractFns.reduce(
+    (agg, extractFn) => merge({}, agg, extractFn(webpackStats, agg, baseline, options)),
+    {},
+  );

package/src/webpack/extract/modules-packages-duplicate.js

@@ -3,7 +3,7 @@ import map from 'lodash/map';
 import orderBy from 'lodash/orderBy';
 import sum from 'lodash/sum';
 
-import { INSIGHT_WARNING } from '../../config';
+import { InsightType } from '../../constants';
 
 export const extractModulesPackagesDuplicate = (webpackStats, currentExtractedData) => {
   const source = get(currentExtractedData, 'metrics.packages', {});
@@ -89,7 +89,7 @@ export const extractModulesPackagesDuplicate = (webpackStats, currentExtractedDa
   return {
     insights: {
       duplicatePackages: {
-        type: INSIGHT_WARNING,
+        type: InsightType.WARNING,
         data,
       },
     },