@bundle-stats/utils 4.2.2 → 4.2.3-beta.1

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

@@ -1,114 +1,116 @@
-import {
-  METRIC_TYPE_FILE_SIZE,
-  METRIC_TYPE_NUMERIC,
-  METRIC_TYPE_PERCENTAGE,
-} from '../config/metrics';
 import { FILE_TYPE_LABELS } from '../config/file-types';
 import { Metric } from './types';
+import { MetricTypes, MetricConfig } from '../constants';
 
-export const metrics = {
+type WebpackMetrics = Partial<Record<Metric, MetricConfig>> & {
+  sizes: Partial<Record<Metric, MetricConfig>>;
+};
+
+export const metrics: WebpackMetrics = {
   [Metric.BUNDLE_SIZE]: {
     label: 'Bundle Size',
-    description: 'The total size of the assets produced by webpack',
+    description: 'Total file size of the assets generated or processed by the bundler',
     url: 'https://relative-ci.com/documentation/metrics-and-data#assets',
-    type: METRIC_TYPE_FILE_SIZE,
+    type: MetricTypes.FileSize,
   },
   [Metric.INITIAL_SIZE_JS]: {
     label: 'Initial JS',
-    description: 'The total size of JavaScript initial chunks',
+    description: 'Total file size of the JavaScript initial chunks',
     url: 'https://relative-ci.com/documentation/metrics-and-data#assets',
-    type: METRIC_TYPE_FILE_SIZE,
+    type: MetricTypes.FileSize,
   },
   [Metric.INITIAL_SIZE_CSS]: {
     label: 'Initial CSS',
-    description: 'The total size of CSS initial chunks',
+    description: 'Total file size of the CSS initial chunks',
     url: 'https://relative-ci.com/documentation/metrics-and-data#assets',
-    type: METRIC_TYPE_FILE_SIZE,
+    type: MetricTypes.FileSize,
   },
   [Metric.CACHE_INVALIDATION]: {
     label: 'Cache Invalidation',
-    description: 'The ratio between the total changed assets and total assets size(Bundle Size)',
+    description:
+      'Ratio between the total file size of the changed assets and the total file size(Bundle Size)',
     url: 'https://relative-ci.com/documentation/metrics-and-data#assets',
-    type: METRIC_TYPE_PERCENTAGE,
-    biggerIsBetter: false,
+    type: MetricTypes.Percentage,
+    biggerIsBetter: null,
+    skipDelta: true,
   },
   [Metric.CHUNK_COUNT]: {
     label: 'Chunks',
-    description: 'The total number of chunks',
+    description: 'Total number of chunks generated by the bundler',
     url: 'https://relative-ci.com/documentation/metrics-and-data#assets',
-    type: METRIC_TYPE_NUMERIC,
-    biggerIsBetter: false,
+    type: MetricTypes.Numeric,
+    biggerIsBetter: null,
   },
   [Metric.ASSET_COUNT]: {
     label: 'Assets',
-    description: 'Total number of assets',
+    description: 'Total number of assets generated or produced by the bundler',
     url: 'https://relative-ci.com/documentation/metrics-and-data#assets',
-    type: METRIC_TYPE_NUMERIC,
-    biggerIsBetter: false,
+    type: MetricTypes.Numeric,
+    biggerIsBetter: null,
   },
   [Metric.MODULE_COUNT]: {
     label: 'Modules',
-    description: 'The total number of modules bundled by webpack',
+    description: 'Total number of bundled modules',
     url: 'https://relative-ci.com/documentation/metrics-and-data#modules-1',
-    type: METRIC_TYPE_NUMERIC,
-    biggerIsBetter: false,
+    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',
+    description: 'Total number of modules included into more than one chunk',
     url: 'https://relative-ci.com/documentation/metrics-and-data#modules-1',
-    type: METRIC_TYPE_NUMERIC,
+    type: MetricTypes.Numeric,
     biggerIsBetter: false,
   },
   [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: METRIC_TYPE_PERCENTAGE,
-    biggerIsBetter: false,
+    type: MetricTypes.Percentage,
+    biggerIsBetter: null,
   },
   [Metric.PACKAGE_COUNT]: {
     label: 'Packages',
-    description: 'The total number of packages bundled by webpack',
+    description: 'The total number of bundled packages',
     url: 'https://relative-ci.com/documentation/metrics-and-data#packages',
-    type: METRIC_TYPE_NUMERIC,
+    type: MetricTypes.Numeric,
     biggerIsBetter: false,
   },
   [Metric.DUPLICATE_PACKAGES_COUNT]: {
     label: 'Duplicate Packages',
-    description: 'The total number of duplicate packages',
+    description: 'The total number of duplicate bundled packages',
     url: 'https://relative-ci.com/documentation/metrics-and-data#packages',
-    type: METRIC_TYPE_NUMERIC,
+    type: MetricTypes.Numeric,
     biggerIsBetter: false,
   },
   sizes: {
     [Metric.TOTAL_SIZE_JS]: {
       label: FILE_TYPE_LABELS.JS,
-      type: METRIC_TYPE_FILE_SIZE,
+      type: MetricTypes.FileSize,
     },
     [Metric.TOTAL_SIZE_CSS]: {
       label: FILE_TYPE_LABELS.CSS,
-      type: METRIC_TYPE_FILE_SIZE,
+      type: MetricTypes.FileSize,
     },
     [Metric.TOTAL_SIZE_IMG]: {
       label: FILE_TYPE_LABELS.IMG,
-      type: METRIC_TYPE_FILE_SIZE,
+      type: MetricTypes.FileSize,
     },
     [Metric.TOTAL_SIZE_MEDIA]: {
       label: FILE_TYPE_LABELS.MEDIA,
-      type: METRIC_TYPE_FILE_SIZE,
+      type: MetricTypes.FileSize,
     },
     [Metric.TOTAL_SIZE_FONT]: {
       label: FILE_TYPE_LABELS.FONT,
-      type: METRIC_TYPE_FILE_SIZE,
+      type: MetricTypes.FileSize,
     },
     [Metric.TOTAL_SIZE_HTML]: {
       label: FILE_TYPE_LABELS.HTML,
-      type: METRIC_TYPE_FILE_SIZE,
+      type: MetricTypes.FileSize,
     },
     [Metric.TOTAL_SIZE_OTHER]: {
       label: FILE_TYPE_LABELS.OTHER,
-      type: METRIC_TYPE_FILE_SIZE,
+      type: MetricTypes.FileSize,
     },
   },
 };

package/src/webpack/selectors.js

@@ -26,10 +26,13 @@ const getStatsMetrics = (job) => {
   const metrics = pick(data, SUMMARY_METRIC_PATHS);
 
   // Rename metric keys
-  return Object.entries(metrics).reduce((agg, [key, value]) => ({
-    ...agg,
-    [`webpack.${key}`]: value,
-  }), {});
+  return Object.entries(metrics).reduce(
+    (agg, [key, value]) => ({
+      ...agg,
+      [`webpack.${key}`]: value,
+    }),
+    {},
+  );
 };
 
 /**
@@ -47,10 +50,13 @@ const getSizeMetrics = (job) => {
   const metrics = get(job, 'metrics.webpack.sizes', {});
 
   // List metrics by the metrics list
-  return Object.keys(metricTypes.sizes).reduce((agg, key) => ({
-    ...agg,
-    [`webpack.sizes.${key}`]: metrics[key],
-  }), {});
+  return Object.keys(metricTypes.sizes).reduce(
+    (agg, key) => ({
+      ...agg,
+      [`webpack.sizes.${key}`]: metrics[key],
+    }),
+    {},
+  );
 };
 
 /**
@@ -77,7 +83,74 @@ const getAssetsMetrics = (job) => get(job, 'metrics.webpack.assets', {});
  *
  * @return {Object} Webpack module metrics
  */
-const getModulesMetrics = (job) => get(job, 'metrics.webpack.modules', {});
+export const getModulesMetrics = (job) => {
+  const modules = get(job, 'metrics.webpack.modules', {});
+
+  const result = {};
+
+  Object.entries(modules).forEach(([moduleId, moduleData]) => {
+    result[moduleId] = {
+      ...moduleData,
+      originalValue: moduleData.value,
+    };
+  });
+
+  return result;
+};
+
+/**
+ *
+ * Select webpack module duplicate size
+ *
+ * @param {Object} job Job data
+ * @param {Object} job.metrics Job metrics
+ * @param {Object} job.metrics.webpack Job webpack metrics
+ * @param {Object} job.metrics.webpack.modules Job webpack module metrics
+ *
+ * @return {Object} Webpack module metrics
+ */
+export const getModulesDuplicateSizeMetrics = (job) => {
+  const modules = get(job, 'metrics.webpack.modules', {});
+
+  const result = {};
+
+  Object.entries(modules).forEach(([moduleId, moduleData]) => {
+    result[moduleId] = {
+      ...moduleData,
+      value: moduleData.value * (moduleData.chunkIds.length - 1),
+      originalValue: moduleData.value,
+    };
+  });
+
+  return result;
+};
+
+/**
+ *
+ * Select webpack module size including duplication
+ *
+ * @param {Object} job Job data
+ * @param {Object} job.metrics Job metrics
+ * @param {Object} job.metrics.webpack Job webpack metrics
+ * @param {Object} job.metrics.webpack.modules Job webpack module metrics
+ *
+ * @return {Object} Webpack module metrics
+ */
+export const getModulesTotalSizeMetrics = (job) => {
+  const modules = get(job, 'metrics.webpack.modules', {});
+
+  const result = {};
+
+  Object.entries(modules).forEach(([moduleId, moduleData]) => {
+    result[moduleId] = {
+      ...moduleData,
+      value: moduleData.value * moduleData.chunkIds.length,
+      originalValue: moduleData.value,
+    };
+  });
+
+  return result;
+};
 
 /**
  *

package/src/webpack/types.ts

@@ -29,7 +29,7 @@ export interface MetaChunk {
   name: string;
 }
 
-export interface Asset extends MetricRun {
+export interface AssetMetricRun extends MetricRun {
   name: string;
   isEntry: boolean;
   isInitial: boolean;
@@ -37,7 +37,7 @@ export interface Asset extends MetricRun {
   chunkId?: string;
 }
 
-export type Assets = Record<string, Asset>;
+export type Assets = Record<string, AssetMetricRun>;
 
 export interface MetricsAssets {
   metrics: {
@@ -48,12 +48,21 @@ export interface MetricsAssets {
   };
 }
 
+/**
+ * Metric run data for a module entry
+ */
 export interface Module extends MetricRun {
+  /* Module name */
   name: string;
-  chunkIds: Array<String>;
-  duplicated: boolean;
+  /* Array of chunk IDs */
+  chunkIds: Array<string>;
+  /* Flag to identify if the module is duplicated on the current job */
+  duplicated?: boolean;
 }
 
+/**
+ * Collection of module metrics
+ */
 export type Modules = Record<string, Module>;
 
 export interface MetricsModules {

package/src/webpack/utils.ts

@@ -0,0 +1,173 @@
+import round from 'lodash/round';
+
+import { PACKAGES_SEPARATOR, PACKAGE_ID_SEPARATOR } from '../config';
+import { createGetMetricType } from '../utils/metrics';
+import { metrics } from './metrics';
+
+// Hex patterns
+const HEX_HASH_PATTERN = '[a-f0-9]{5,32}';
+const HEX_HASH_SEPARATOR_PATTERN = '[-_.~]';
+
+// Base64URL patterns
+const BASE64URL_HASH_PATTERN = '[A-Za-z0-9_-]{4,}';
+const BASE64URL_SEPARATOR_PATTERN = '[.~]';
+
+// Match multiple extensions: .js, .js.gz, .min.js, .chunk.js
+const EXTENSION_PATTERN = /(?:\.[a-z0-9]{2,}){1,}/;
+
+const PATTERNS = [
+  // Match path/name-HEXHASH.EXT,
+  //       path/name.HEXHASH.EXT,
+  //       path/name_HEXHASH.EXT,
+  //       path/name-HEXHASH.chunk.EXT
+  {
+    pattern: new RegExp(
+      `(.*)${HEX_HASH_SEPARATOR_PATTERN}${HEX_HASH_PATTERN}(${EXTENSION_PATTERN.source})$`,
+    ),
+    replace: '$1$2',
+  },
+
+  // Match path/name-BASE64URLHASH.EXT,
+  //       path/name.BASE64URLHASH.EXT,
+  //       path/name_BASE64URLHASH.EXT,
+  //       path/name-BASE64URLHASH.chunk.EXT
+  {
+    pattern: new RegExp(
+      `(.*)${BASE64URL_SEPARATOR_PATTERN}${BASE64URL_HASH_PATTERN}(${EXTENSION_PATTERN.source})$`,
+    ),
+    replace: '$1$2',
+  },
+
+  // Match static/HEXHASH.ext
+  {
+    pattern: new RegExp(`(static)/${HEX_HASH_PATTERN}(.*${EXTENSION_PATTERN.source})$`),
+    replace: '$1$2',
+  },
+
+  // Match static/HEXHASH/_name.ext
+  {
+    pattern: new RegExp(`(static)/${BASE64URL_HASH_PATTERN}/(_.*${EXTENSION_PATTERN.source})$`),
+    replace: '$1/[hash]/$2',
+  },
+];
+
+const NO_BASENAME = /(^|.*\/)\..*$/;
+
+/**
+ * Extract (guess) filename from a hashed filename
+ */
+export const getAssetName = (statsAssetPath?: string | null): string => {
+  if (!statsAssetPath) {
+    return '';
+  }
+
+  for (let i = 0; i < PATTERNS.length; i += 1) {
+    const { pattern, replace } = PATTERNS[i];
+
+    const extracted: string = statsAssetPath.replace(pattern, replace);
+
+    if (extracted && extracted !== statsAssetPath && !NO_BASENAME.test(extracted)) {
+      return extracted;
+    }
+  }
+
+  return statsAssetPath;
+};
+
+// css ./node_modules/css-loader/dist/cjs.js??ref--6-0!./src/assets/styles/default.styl
+const NAME_WITH_LOADERS = /!/;
+
+// ./src/index.jsx + 27 modules
+const NAME_WITH_MODULES = /\s?\+\s?\d*\s?modules$/;
+
+// css ../node_modules../node_modules/package-a
+const INVALID_CSS_PREFIX = /^css\s.*node_modules(?!\/)/;
+
+/**
+ * Extract normalize module name
+ */
+export const getModuleName = (name?: string | null) => {
+  if (!name) {
+    return '';
+  }
+
+  if (NAME_WITH_LOADERS.test(name)) {
+    const segments = name.split(NAME_WITH_LOADERS);
+    const normalizedName = segments[segments.length - 1];
+
+    if (normalizedName?.trim()) {
+      return normalizedName;
+    }
+  }
+
+  if (NAME_WITH_MODULES.test(name)) {
+    return name.replace(NAME_WITH_MODULES, '');
+  }
+
+  if (INVALID_CSS_PREFIX.test(name)) {
+    return name.replace(INVALID_CSS_PREFIX, '');
+  }
+
+  return name;
+};
+
+/*
+ * Calculate cache invalidation metric on the baseline data
+ *
+ * The metric is the ratio between the total file size of the files that have changed (exclude
+ * deleted, added) and the total file size
+ */
+export const calculateCacheInvalidation = (rows: Array<any>): number => {
+  let cached = 0;
+  let invalidated = 0;
+
+  rows.forEach(({ changed, added, deleted, runs }) => {
+    // Added and deleted files do not count towards the caching index
+    if (added || deleted) {
+      return;
+    }
+
+    if (changed) {
+      invalidated += runs[1].value;
+    }
+
+    cached += runs[1].value;
+  });
+
+  if (cached === 0) {
+    return 0;
+  }
+
+  return round((invalidated / cached) * 100, 2);
+};
+
+export const getMetricAdded = (runs: Array<any>): boolean => {
+  const [current, baseline] = runs?.map((run) => run?.value) || [];
+
+  return Boolean(current !== null && !baseline);
+};
+
+export const getMetricDeleted = (runs: Array<any>) => {
+  const [current, baseline] = runs?.map((run) => run?.value) || [];
+
+  return Boolean(baseline !== null && !current);
+};
+
+/**
+ * Get webpack metric data
+ */
+export const getMetricType = createGetMetricType(metrics);
+
+/**
+ * Get public package name from package id
+ */
+export const getPackagePublicName = (packageId: string): string => {
+  // Split packages
+  const packageNames = packageId.split(PACKAGES_SEPARATOR);
+  const name = packageNames[packageNames.length - 1];
+
+  // Strip package suffix (eg: ~1)
+  return name.split(PACKAGE_ID_SEPARATOR)[0];
+};
+
+export const normalizeChunkId = (chunkId: string | number): string => chunkId.toString();

package/types/browsertime/compare.d.ts

@@ -1 +1 @@
-export function compare(jobs: any): import("../report/types").ReportRow[];
+export function compare(jobs: any): import("..").ReportMetricRow[];

package/types/browsertime/metrics.d.ts

@@ -1,107 +1,127 @@
 export namespace metrics {
     namespace firstPaint {
-        export const label: string;
-        export { METRIC_TYPE_DURATION as type };
+        let label: string;
+        let type: MetricTypes;
     }
     namespace fullyLoaded {
-        const label_1: string;
+        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 {
-        const label_2: string;
+        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 {
-        const label_3: string;
+        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 {
-        const label_4: string;
+        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 {
-        const label_5: string;
+        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 {
-        const label_6: string;
+        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 {
-        const label_7: string;
+        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 {
-        const label_8: string;
+        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 {
-        const label_9: string;
+        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 {
-        const label_10: string;
+        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 {
-        const label_11: string;
+        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 {
-        const label_12: string;
+        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 {
-        const label_13: string;
+        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 {
-        const label_14: string;
+        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 {
-        const label_15: string;
+        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 {
-        const label_16: string;
+        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 {
-        const label_17: string;
+        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 {
-        const label_18: string;
+        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 {
-        const label_19: string;
+        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 {
-        const label_20: string;
+        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';