@bundle-stats/utils 3.2.9 → 3.4.0-alpha.1

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/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,
       },
     },

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

@@ -3,62 +3,66 @@ import {
   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',
@@ -66,33 +70,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,
     },
   },
 };