@bundle-stats/utils 4.7.5-beta.0 → 4.7.5-beta.3

package/src/lighthouse/metrics.js

@@ -1,55 +1,53 @@
-import {
-  METRIC_TYPE_SCORE, METRIC_TYPE_DURATION, METRIC_TYPE_FILE_SIZE, METRIC_TYPE_NUMERIC,
-} from '../config/metrics';
+import { MetricTypes } from '../constants';
 
 export const metrics = {
   score: {
     label: 'Score',
-    type: METRIC_TYPE_SCORE,
+    type: MetricTypes.Score,
   },
   performanceScore: {
     label: 'Performance',
-    type: METRIC_TYPE_SCORE,
+    type: MetricTypes.Score,
   },
   accessibilityScore: {
     label: 'Accessibility',
-    type: METRIC_TYPE_SCORE,
+    type: MetricTypes.Score,
   },
   bestPracticesScore: {
     label: 'Best Practices',
-    type: METRIC_TYPE_SCORE,
+    type: MetricTypes.Score,
   },
   seoScore: {
     label: 'SEO',
-    type: METRIC_TYPE_SCORE,
+    type: MetricTypes.Score,
   },
   pwaScore: {
     label: 'PWA',
-    type: METRIC_TYPE_SCORE,
+    type: MetricTypes.Score,
   },
 
   speedIndex: {
     label: 'Perceptual Speed Index',
-    type: METRIC_TYPE_DURATION,
+    type: MetricTypes.Duration,
   },
   firstMeaningfulPaint: {
     label: 'First Meaningful Paint',
-    type: METRIC_TYPE_DURATION,
+    type: MetricTypes.Duration,
   },
   timeToFirstByte: {
     label: 'Time To First Byte',
-    type: METRIC_TYPE_DURATION,
+    type: MetricTypes.Duration,
   },
   firstInteractive: {
     label: 'First Interactive',
-    type: METRIC_TYPE_DURATION,
+    type: MetricTypes.Duration,
   },
   totalByteWeight: {
     label: 'Total Weight',
-    type: METRIC_TYPE_FILE_SIZE,
+    type: MetricTypes.FileSize,
   },
   domSize: {
     label: 'DOM Size',
-    type: METRIC_TYPE_NUMERIC,
+    type: MetricTypes.Numeric,
   },
 };

package/src/report/add-row-metric-data.ts

@@ -3,6 +3,7 @@ import get from 'lodash/get';
 import { getGlobalMetricType, getMetricRunInfo } from '../utils/metrics';
 import { getMetricChanged } from './get-metric-changed';
 import * as types from './types';
+import { MetricTypes } from '../constants';
 
 /**
  * Add row metric diff data
@@ -15,7 +16,7 @@ export const getAddRowMetricData = (metricType?: string) => (row: types.ReportRo
   // - if the key is not matching an existing metric, use the default metricType
   const metric = getGlobalMetricType(
     key,
-    typeof metricType === 'string' && metricType, // explicit, avoid passing of map cb params
+    typeof metricType === 'string' ? (metricType as MetricTypes) : undefined, // explicit, avoid passing of map cb params
   );
   const { biggerIsBetter, label } = metric;
 
@@ -28,7 +29,7 @@ export const getAddRowMetricData = (metricType?: string) => (row: types.ReportRo
       metric,
       run.value,
       // Get baseline value only if not the latest run
-      (index + 1 < runs.length) ? get(runs, [index + 1, 'value'], 0) : undefined,
+      index + 1 < runs.length ? get(runs, [index + 1, 'value'], 0) : undefined,
     );
 
     return {

package/src/report/create.ts

@@ -44,7 +44,7 @@ export const createReport = (jobs: Array<Job>): Report => {
       return Object.assign(data, { label: metric.label });
     });
 
-    summary[sourceId] = summaryEntries;
+    summary[sourceId] = summaryEntries as any;
   }, {});
 
   const sectionsData = webpack.compare(jobs);

package/src/utils/delta.ts

@@ -0,0 +1,91 @@
+import round from 'lodash/round';
+
+import type {
+  MetricRun,
+  MetricRunDelta,
+  MetricRunInfoDeltaType,
+  MetricTypeConfig,
+} from '../constants';
+
+export function getDelta(baseline?: MetricRun | null, current?: MetricRun | null): MetricRunDelta {
+  const baselineValue = baseline?.value || 0;
+  const currentValue = current?.value || 0;
+
+  if (baselineValue === currentValue) {
+    return {
+      delta: 0,
+      deltaPercentage: 0,
+    };
+  }
+
+  if (baselineValue === 0) {
+    return {
+      delta: currentValue,
+      deltaPercentage: 100,
+    };
+  }
+
+  return {
+    delta: currentValue - baselineValue,
+    deltaPercentage: round((currentValue / baselineValue) * 100 - 100, 8),
+  };
+}
+
+/**
+ * Format delta output
+ */
+export function formatDelta(value: number, formatter: MetricTypeConfig['formatter']): string {
+  let sign = '';
+
+  if (value > 0) {
+    sign = '+';
+  } else if (value < 0) {
+    sign = '-';
+  }
+
+  let absValue = Math.abs(value);
+
+  if (absValue > 0 && absValue < 0.01) {
+    sign = `~${sign}`;
+    absValue = 0.01;
+  }
+
+  if (absValue > 0.01) {
+    absValue = round(absValue, 2);
+  }
+
+  return `${sign}${formatter(absValue)}`;
+}
+
+/**
+ * Get delta type
+ */
+export function getDeltaType(
+  deltaPercentageValue: number,
+  biggerIsBetter?: MetricTypeConfig['biggerIsBetter'],
+): MetricRunInfoDeltaType {
+  if (deltaPercentageValue < -50) {
+    return biggerIsBetter ? 'HIGH_NEGATIVE' : 'HIGH_POSITIVE';
+  }
+  if (deltaPercentageValue < -5) {
+    return biggerIsBetter ? 'NEGATIVE' : 'POSITIVE';
+  }
+
+  if (deltaPercentageValue < 0) {
+    return biggerIsBetter ? 'LOW_NEGATIVE' : 'LOW_POSITIVE';
+  }
+
+  if (deltaPercentageValue === 0) {
+    return 'NO_CHANGE';
+  }
+
+  if (deltaPercentageValue <= 5) {
+    return biggerIsBetter ? 'LOW_POSITIVE' : 'LOW_NEGATIVE';
+  }
+
+  if (deltaPercentageValue <= 50) {
+    return biggerIsBetter ? 'POSITIVE' : 'NEGATIVE';
+  }
+
+  return biggerIsBetter ? 'HIGH_POSITIVE' : 'HIGH_NEGATIVE';
+}

package/src/utils/metrics.ts

@@ -0,0 +1,81 @@
+import get from 'lodash/get';
+
+import { MetricRunInfo, Metric, MetricTypes, MetricConfig, MetricTypeConfig } from '../constants';
+import { METRIC_TYPE_CONFIGS } from '../config';
+import { metrics as webpackMetricTypes } from '../webpack/metrics';
+import { metrics as lighthouseMetricTypes } from '../lighthouse/metrics';
+import { metrics as browsertimeMeticTypes } from '../browsertime/metrics';
+import { formatPercentage } from './format';
+import { formatDelta, getDelta, getDeltaType } from './delta';
+
+export function createGetMetricType(metrics: Record<string, unknown>) {
+  return function getMetricType(key: string, type?: MetricTypes): Metric {
+    const metric = get(metrics, key) as MetricConfig;
+
+    if (metric?.type) {
+      return {
+        ...METRIC_TYPE_CONFIGS[metric.type],
+        ...metric,
+      };
+    }
+
+    const resolvedType = type || MetricTypes.Numeric;
+
+    return {
+      ...METRIC_TYPE_CONFIGS[resolvedType],
+      type: resolvedType,
+      label: key,
+    };
+  };
+}
+
+export function getGlobalMetricType(key: string, type?: MetricTypes): Metric {
+  const getMetricType = createGetMetricType({
+    webpack: webpackMetricTypes,
+    lighthouse: lighthouseMetricTypes,
+    browsertime: browsertimeMeticTypes,
+  });
+
+  return getMetricType(key, type);
+}
+
+export function getMetricRunInfo(
+  metricType: MetricTypeConfig,
+  current: number,
+  baseline?: number,
+): MetricRunInfo {
+  const { formatter, biggerIsBetter } = metricType;
+
+  const runInfo = {
+    value: current,
+    displayValue: formatter(current),
+  };
+
+  // Skip computing delta fields when the baseline is missing
+  if (typeof baseline === 'undefined') {
+    return runInfo;
+  }
+
+  const { delta, deltaPercentage } = getDelta({ value: baseline }, { value: current });
+
+  // Resolve regression/improvement flag
+  let regression;
+
+  if (biggerIsBetter === null) {
+    regression = null;
+  } else if ((biggerIsBetter === true && delta > 0) || (biggerIsBetter === false && delta < 0)) {
+    regression = false;
+  } else if ((biggerIsBetter === false && delta > 0) || (biggerIsBetter === true && delta < 0)) {
+    regression = true;
+  }
+
+  return {
+    ...runInfo,
+    delta,
+    deltaPercentage,
+    displayDelta: formatDelta(delta, formatter),
+    displayDeltaPercentage: formatDelta(deltaPercentage, formatPercentage),
+    deltaType: getDeltaType(deltaPercentage, biggerIsBetter),
+    regression,
+  };
+}

package/src/webpack/compare.js

@@ -1,4 +1,4 @@
-import { METRIC_TYPE_FILE_SIZE } from '../config/metrics';
+import { MetricTypes } from '../constants';
 import { compareMetrics } from '../report/compare-metrics';
 import {
   SECTION_WEBPACK_STATS,
@@ -18,9 +18,8 @@ import { selectors } from './selectors';
  *
  * @return {Object[]} Compared stats metrics
  */
-const compareStats = (jobs, rowTransformers) => compareMetrics(
-  jobs, selectors.stats, undefined, rowTransformers,
-);
+const compareStats = (jobs, rowTransformers) =>
+  compareMetrics(jobs, selectors.stats, undefined, rowTransformers);
 
 /**
  * Compare size metrics
@@ -30,7 +29,8 @@ const compareStats = (jobs, rowTransformers) => compareMetrics(
  *
  * @return {Object[]} Compared size metrics
  */
-const compareSizes = (jobs, rowTransformers) => compareMetrics(jobs, selectors.sizes, undefined, rowTransformers);
+const compareSizes = (jobs, rowTransformers) =>
+  compareMetrics(jobs, selectors.sizes, undefined, rowTransformers);
 
 /**
  * Compare asset metrics
@@ -40,7 +40,8 @@ const compareSizes = (jobs, rowTransformers) => compareMetrics(jobs, selectors.s
  *
  * @return {Object[]} Compared asset metrics
  */
-const compareAssets = (jobs, rowTransformers) => compareMetrics(jobs, selectors.assets, METRIC_TYPE_FILE_SIZE, rowTransformers);
+const compareAssets = (jobs, rowTransformers) =>
+  compareMetrics(jobs, selectors.assets, MetricTypes.FileSize, rowTransformers);
 
 /**
  * Compare all modules
@@ -49,7 +50,8 @@ const compareAssets = (jobs, rowTransformers) => compareMetrics(jobs, selectors.
  * @param {Array<Function>} [rowTransformers]
  * @return {Object[]} Compared module metrics
  */
-const compareModules = (jobs, rowTransformers) => compareMetrics(jobs, selectors.modules, METRIC_TYPE_FILE_SIZE, rowTransformers);
+const compareModules = (jobs, rowTransformers) =>
+  compareMetrics(jobs, selectors.modules, MetricTypes.FileSize, rowTransformers);
 
 /**
  * Compare package metrics
@@ -59,7 +61,8 @@ const compareModules = (jobs, rowTransformers) => compareMetrics(jobs, selectors
  *
  * @return {Object[]} Compared package metrics
  */
-const comparePackages = (jobs, rowTransformers) => compareMetrics(jobs, selectors.packages, METRIC_TYPE_FILE_SIZE, rowTransformers);
+const comparePackages = (jobs, rowTransformers) =>
+  compareMetrics(jobs, selectors.packages, MetricTypes.FileSize, rowTransformers);
 
 export const compareBySection = {
   [SECTION_WEBPACK_STATS]: compareStats,
@@ -75,7 +78,11 @@ export const compareBySection = {
  * @param {Object[]} jobs - List of jobs to compare
  * @return {Object} Compared metrics by section
  */
-export const compare = (jobs) => SECTIONS.reduce((agg, sectionId) => ({
-  ...agg,
-  [sectionId]: compareBySection[sectionId](jobs),
-}), {});
+export const compare = (jobs) =>
+  SECTIONS.reduce(
+  (agg, sectionId) => ({
+    ...agg,
+    [sectionId]: compareBySection[sectionId](jobs),
+  }),
+  {},
+);

package/src/webpack/metrics.ts

@@ -1,24 +1,9 @@
 import { FILE_TYPE_LABELS } from '../config/file-types';
 import { Metric } from './types';
-import { MetricTypeType } from '../constants';
+import { MetricTypes, MetricConfig } from '../constants';
 
-interface WebpackMetricConfig {
-  label: string;
-  description?: string;
-  url?: string;
-  type: MetricTypeType;
-  /**
-   * Increased values are regressions, decreased values are improvements
-   */
-  biggerIsBetter?: boolean;
-  /**
-   * Do not show the delta
-   */
-  skipDelta?: boolean;
-}
-
-type WebpackMetrics = Partial<Record<Metric, WebpackMetricConfig>> & {
-  sizes: Partial<Record<Metric, WebpackMetricConfig>>;
+type WebpackMetrics = Partial<Record<Metric, MetricConfig>> & {
+  sizes: Partial<Record<Metric, MetricConfig>>;
 };
 
 export const metrics: WebpackMetrics = {
@@ -26,106 +11,106 @@ export const metrics: WebpackMetrics = {
     label: 'Bundle Size',
     description: 'The total file size of the assets generated or processed by the bundler',
     url: 'https://relative-ci.com/documentation/metrics-and-data#assets',
-    type: MetricTypeType.METRIC_TYPE_FILE_SIZE,
+    type: MetricTypes.FileSize,
   },
   [Metric.INITIAL_SIZE_JS]: {
     label: 'Initial JS',
     description: 'The total file size of the JavaScript initial chunks',
     url: 'https://relative-ci.com/documentation/metrics-and-data#assets',
-    type: MetricTypeType.METRIC_TYPE_FILE_SIZE,
+    type: MetricTypes.FileSize,
   },
   [Metric.INITIAL_SIZE_CSS]: {
     label: 'Initial CSS',
     description: 'The total file size of the CSS initial chunks',
     url: 'https://relative-ci.com/documentation/metrics-and-data#assets',
-    type: MetricTypeType.METRIC_TYPE_FILE_SIZE,
+    type: MetricTypes.FileSize,
   },
   [Metric.CACHE_INVALIDATION]: {
     label: 'Cache Invalidation',
     description:
       'The ratio between the total of the changed assets and the total file size(Bundle Size)',
     url: 'https://relative-ci.com/documentation/metrics-and-data#assets',
-    type: MetricTypeType.METRIC_TYPE_PERCENTAGE,
-    biggerIsBetter: undefined,
+    type: MetricTypes.Percentage,
+    biggerIsBetter: null,
     skipDelta: true,
   },
   [Metric.CHUNK_COUNT]: {
     label: 'Chunks',
     description: 'The total number of chunks generated by the bundler',
     url: 'https://relative-ci.com/documentation/metrics-and-data#assets',
-    type: MetricTypeType.METRIC_TYPE_NUMERIC,
-    biggerIsBetter: undefined,
+    type: MetricTypes.Numeric,
+    biggerIsBetter: null,
   },
   [Metric.ASSET_COUNT]: {
     label: 'Assets',
     description: 'Total number of assets generated or produced by the bundler',
     url: 'https://relative-ci.com/documentation/metrics-and-data#assets',
-    type: MetricTypeType.METRIC_TYPE_NUMERIC,
-    biggerIsBetter: undefined,
+    type: MetricTypes.Numeric,
+    biggerIsBetter: null,
   },
   [Metric.MODULE_COUNT]: {
     label: 'Modules',
     description: 'The total number of bundled modules',
     url: 'https://relative-ci.com/documentation/metrics-and-data#modules-1',
-    type: MetricTypeType.METRIC_TYPE_NUMERIC,
-    biggerIsBetter: undefined,
+    type: MetricTypes.Numeric,
+    biggerIsBetter: null,
   },
   [Metric.DUPLICATE_MODULES_COUNT]: {
     label: 'Duplicate Modules',
     description: 'The total number of modules that belong to more than one chunk',
     url: 'https://relative-ci.com/documentation/metrics-and-data#modules-1',
-    type: MetricTypeType.METRIC_TYPE_NUMERIC,
-    biggerIsBetter: false,
+    type: MetricTypes.Numeric,
+    biggerIsBetter: null,
   },
   [Metric.DUPLICATE_CODE]: {
     label: 'Duplicate Code',
     description: 'The percentage of total duplicate module size from the total module size',
     url: 'https://relative-ci.com/documentation/metrics-and-data#modules-1',
-    type: MetricTypeType.METRIC_TYPE_PERCENTAGE,
+    type: MetricTypes.Percentage,
     biggerIsBetter: false,
   },
   [Metric.PACKAGE_COUNT]: {
     label: 'Packages',
     description: 'The total number of bundled packages',
     url: 'https://relative-ci.com/documentation/metrics-and-data#packages',
-    type: MetricTypeType.METRIC_TYPE_NUMERIC,
+    type: MetricTypes.Numeric,
     biggerIsBetter: false,
   },
   [Metric.DUPLICATE_PACKAGES_COUNT]: {
     label: 'Duplicate Packages',
     description: 'The total number of duplicate packages',
     url: 'https://relative-ci.com/documentation/metrics-and-data#packages',
-    type: MetricTypeType.METRIC_TYPE_NUMERIC,
+    type: MetricTypes.Numeric,
     biggerIsBetter: false,
   },
   sizes: {
     [Metric.TOTAL_SIZE_JS]: {
       label: FILE_TYPE_LABELS.JS,
-      type: MetricTypeType.METRIC_TYPE_FILE_SIZE,
+      type: MetricTypes.FileSize,
     },
     [Metric.TOTAL_SIZE_CSS]: {
       label: FILE_TYPE_LABELS.CSS,
-      type: MetricTypeType.METRIC_TYPE_FILE_SIZE,
+      type: MetricTypes.FileSize,
     },
     [Metric.TOTAL_SIZE_IMG]: {
       label: FILE_TYPE_LABELS.IMG,
-      type: MetricTypeType.METRIC_TYPE_FILE_SIZE,
+      type: MetricTypes.FileSize,
     },
     [Metric.TOTAL_SIZE_MEDIA]: {
       label: FILE_TYPE_LABELS.MEDIA,
-      type: MetricTypeType.METRIC_TYPE_FILE_SIZE,
+      type: MetricTypes.FileSize,
     },
     [Metric.TOTAL_SIZE_FONT]: {
       label: FILE_TYPE_LABELS.FONT,
-      type: MetricTypeType.METRIC_TYPE_FILE_SIZE,
+      type: MetricTypes.FileSize,
     },
     [Metric.TOTAL_SIZE_HTML]: {
       label: FILE_TYPE_LABELS.HTML,
-      type: MetricTypeType.METRIC_TYPE_FILE_SIZE,
+      type: MetricTypes.FileSize,
     },
     [Metric.TOTAL_SIZE_OTHER]: {
       label: FILE_TYPE_LABELS.OTHER,
-      type: MetricTypeType.METRIC_TYPE_FILE_SIZE,
+      type: MetricTypes.FileSize,
     },
   },
 };

package/types/browsertime/metrics.d.ts

@@ -1,107 +1,127 @@
 export namespace metrics {
     namespace firstPaint {
-        export let label: string;
-        export { METRIC_TYPE_DURATION as type };
+        let label: string;
+        let type: MetricTypes;
     }
     namespace fullyLoaded {
         let label_1: string;
         export { label_1 as label };
-        export { METRIC_TYPE_DURATION as type };
+        let type_1: MetricTypes;
+        export { type_1 as type };
     }
     namespace backEndTime {
         let label_2: string;
         export { label_2 as label };
-        export { METRIC_TYPE_DURATION as type };
+        let type_2: MetricTypes;
+        export { type_2 as type };
     }
     namespace domContentLoadedTime {
         let label_3: string;
         export { label_3 as label };
-        export { METRIC_TYPE_DURATION as type };
+        let type_3: MetricTypes;
+        export { type_3 as type };
     }
     namespace domInteractiveTime {
         let label_4: string;
         export { label_4 as label };
-        export { METRIC_TYPE_DURATION as type };
+        let type_4: MetricTypes;
+        export { type_4 as type };
     }
     namespace domainLookupTime {
         let label_5: string;
         export { label_5 as label };
-        export { METRIC_TYPE_DURATION as type };
+        let type_5: MetricTypes;
+        export { type_5 as type };
     }
     namespace frontEndTime {
         let label_6: string;
         export { label_6 as label };
-        export { METRIC_TYPE_DURATION as type };
+        let type_6: MetricTypes;
+        export { type_6 as type };
     }
     namespace pageDownloadTime {
         let label_7: string;
         export { label_7 as label };
-        export { METRIC_TYPE_DURATION as type };
+        let type_7: MetricTypes;
+        export { type_7 as type };
     }
     namespace pageLoadTime {
         let label_8: string;
         export { label_8 as label };
-        export { METRIC_TYPE_DURATION as type };
+        let type_8: MetricTypes;
+        export { type_8 as type };
     }
     namespace redirectionTime {
         let label_9: string;
         export { label_9 as label };
-        export { METRIC_TYPE_DURATION as type };
+        let type_9: MetricTypes;
+        export { type_9 as type };
     }
     namespace serverConnectionTime {
         let label_10: string;
         export { label_10 as label };
-        export { METRIC_TYPE_DURATION as type };
+        let type_10: MetricTypes;
+        export { type_10 as type };
     }
     namespace serverResponseTime {
         let label_11: string;
         export { label_11 as label };
-        export { METRIC_TYPE_DURATION as type };
+        let type_11: MetricTypes;
+        export { type_11 as type };
     }
     namespace firstContentfulPaint {
         let label_12: string;
         export { label_12 as label };
-        export { METRIC_TYPE_DURATION as type };
+        let type_12: MetricTypes;
+        export { type_12 as type };
     }
     namespace rumSpeedIndex {
         let label_13: string;
         export { label_13 as label };
-        export { METRIC_TYPE_DURATION as type };
+        let type_13: MetricTypes;
+        export { type_13 as type };
     }
     namespace firstVisualChange {
         let label_14: string;
         export { label_14 as label };
-        export { METRIC_TYPE_DURATION as type };
+        let type_14: MetricTypes;
+        export { type_14 as type };
     }
     namespace lastVisualChange {
         let label_15: string;
         export { label_15 as label };
-        export { METRIC_TYPE_DURATION as type };
+        let type_15: MetricTypes;
+        export { type_15 as type };
     }
     namespace perceptualSpeedIndex {
         let label_16: string;
         export { label_16 as label };
-        export { METRIC_TYPE_DURATION as type };
+        let type_16: MetricTypes;
+        export { type_16 as type };
     }
     namespace speedIndex {
         let label_17: string;
         export { label_17 as label };
-        export { METRIC_TYPE_DURATION as type };
+        let type_17: MetricTypes;
+        export { type_17 as type };
     }
     namespace visualComplete85 {
         let label_18: string;
         export { label_18 as label };
-        export { METRIC_TYPE_DURATION as type };
+        let type_18: MetricTypes;
+        export { type_18 as type };
     }
     namespace visualComplete95 {
         let label_19: string;
         export { label_19 as label };
-        export { METRIC_TYPE_DURATION as type };
+        let type_19: MetricTypes;
+        export { type_19 as type };
     }
     namespace visualComplete99 {
         let label_20: string;
         export { label_20 as label };
-        export { METRIC_TYPE_DURATION as type };
+        let type_20: MetricTypes;
+        export { type_20 as type };
     }
 }
-import { METRIC_TYPE_DURATION } from '../config/metrics';
+import { MetricTypes } from '../constants';

package/types/config/index.d.ts

@@ -1,6 +1,5 @@
 export * from "./component-links";
 export * from "./file-types";
-export * from "./metrics";
-export * from "./delta";
+export * from "./metric-types";
 export const PACKAGES_SEPARATOR: ":";
 export const PACKAGE_ID_SEPARATOR: "~";

package/types/config/metric-types.d.ts

@@ -0,0 +1,2 @@
+import { MetricTypes, MetricTypeConfig } from '../constants';
+export declare const METRIC_TYPE_CONFIGS: Record<MetricTypes, MetricTypeConfig>;