@bundle-stats/utils 4.2.0-beta.1 → 4.3.0-beta.0

package/src/report/create.ts

@@ -1,45 +1,56 @@
 import isEmpty from 'lodash/isEmpty';
 
 import { SOURCE_PATHS } from '../config';
+import { MetricRunInfo, Job, JobSummarySource } from '../constants';
 import { getGlobalMetricType, getMetricRunInfo } from '../utils/metrics';
 import * as webpack from '../webpack';
 /* @ts-ignore */
 import { version } from '../../package.json';
 
-interface JobSummary {
-  current: number;
-  baseline: number;
+interface ReportMetricRunInfo extends MetricRunInfo {
+  label: string;
 }
 
-export const createReport = (jobs: Array<any>) => {
+type ReportSummary = Record<string, Array<ReportMetricRunInfo>>;
+
+interface JobRun {
+  internalBuildNumber: number;
+}
+
+interface Report {
+  createdAt: string;
+  version: string;
+  summary: ReportSummary;
+  runs: Array<JobRun>;
+}
+
+export const createReport = (jobs: Array<Job>): Report => {
   const insights = jobs[0]?.insights;
 
-  const summary = SOURCE_PATHS.reduce((agg, sourceId) => {
-    const sourceSummary = jobs[0]?.summary?.[sourceId] as JobSummary;
+  // Add summary report data
+  const summary: Record<string, Array<ReportMetricRunInfo>> = {};
+
+  SOURCE_PATHS.forEach((sourceId) => {
+    const sourceSummary = jobs[0]?.summary?.[sourceId] as JobSummarySource;
 
     if (!sourceSummary) {
-      return agg;
+      return;
     }
 
-    const output = Object.entries(sourceSummary).map(([metricId, summaryData]) => {
+    const summaryEntries = Object.entries(sourceSummary).map(([metricId, summaryData]) => {
       const metric = getGlobalMetricType(`${sourceId}.${metricId}`);
-
       const { current = 0, baseline = 0 } = summaryData;
-      const info = getMetricRunInfo(metric, current, baseline);
+      const data = getMetricRunInfo(metric, current, baseline);
 
-      return {
-        label: metric.label,
-        ...info,
-      };
+      return Object.assign(data, { label: metric.label });
     });
 
-    return {
-      ...agg,
-      [sourceId]: output,
-    };
+    summary[sourceId] = summaryEntries;
   }, {});
 
-  return {
+  const sectionsData = webpack.compare(jobs);
+
+  return Object.assign(sectionsData, {
     createdAt: new Date().toISOString(),
     version,
 
@@ -52,8 +63,5 @@ export const createReport = (jobs: Array<any>) => {
 
     // Add insights if available
     ...(!isEmpty(insights) ? { insights } : {}),
-
-    // Add webpack sections comparisons
-    ...webpack.compare(jobs),
-  };
+  });
 };

package/src/utils/metrics.js

@@ -14,17 +14,18 @@ import { metrics as browsertimeMeticTypes } from '../browsertime/metrics';
  * @param {Object} metrics
  * @return {Function}
  */
-export const createGetMetricType = (metrics) =>
+export const createGetMetricType =
+  (metrics) =>
   /**
    * Get metric type data
    *
    * @param {String} key Metric key
    * @param {String} [type] Default metric type
-   * @return {import('../../types').MetricType}
+   * @return {import('../constants').MetricType}
    */
   // eslint-disable-next-line implicit-arrow-linebreak
   (key, type) => {
-    /** @type {import('../../types').MetricTypeConfig} */
+    /** @type {import('../constants').MetricTypeConfig} */
     const metric = get(metrics, key);
 
     if (metric && metric.type) {
@@ -47,8 +48,8 @@ export const createGetMetricType = (metrics) =>
  * Get global metric type
  *
  * @param {String} key Metric key
- * @param {import('../../types').MetricTypeType} [type] Default metric type
- * @return {import('../../types').MetricType}
+ * @param {import('../constants').MetricTypeType} [type] Default metric type
+ * @return {import('../constants').MetricType}
  */
 export const getGlobalMetricType = createGetMetricType({
   webpack: webpackMetricTypes,
@@ -60,11 +61,11 @@ export const getGlobalMetricType = createGetMetricType({
  *
  * Get metric information
  *
- * @param {import('../../types').MetricType} metric Metric data
+ * @param {import('../constants').MetricType} metric Metric data
  * @param {number} currentValue Current value
  * @param {number} baselineValue Baseline value
  *
- * @return {import('../../types').MetricRunInfo}
+ * @return {import('../constants').MetricRunInfo}
  */
 export const getMetricRunInfo = (metric, currentValue, baselineValue) => {
   const { formatter, biggerIsBetter } = metric;

package/src/webpack/constants.js

@@ -1,3 +1,5 @@
+import { Metric } from './types';
+
 export const SECTION_WEBPACK_STATS = 'stats';
 export const SECTION_WEBPACK_SIZES = 'sizes';
 export const SECTION_WEBPACK_ASSETS = 'assets';
@@ -13,17 +15,17 @@ export const SECTIONS = [
 ];
 
 export const SUMMARY_METRIC_PATHS = [
-  'totalSizeByTypeALL',
-  'totalInitialSizeJS',
-  'totalInitialSizeCSS',
-  'cacheInvalidation',
-  'moduleCount',
-  'duplicateModulesCount',
-  'duplicateCode',
-  'chunkCount',
-  'assetCount',
-  'packageCount',
-  'duplicatePackagesCount',
+  Metric.BUNDLE_SIZE,
+  Metric.INITIAL_SIZE_JS,
+  Metric.INITIAL_SIZE_CSS,
+  Metric.CACHE_INVALIDATION,
+  Metric.MODULE_COUNT,
+  Metric.DUPLICATE_MODULES_COUNT,
+  Metric.DUPLICATE_CODE,
+  Metric.CHUNK_COUNT,
+  Metric.ASSET_COUNT,
+  Metric.PACKAGE_COUNT,
+  Metric.DUPLICATE_PACKAGES_COUNT,
 ];
 
 const PACKAGE_PREFIX = /(?:node_modules|~)(?:\/\.pnpm)?/;

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

@@ -1,24 +1,23 @@
-import { INSIGHT_INFO } from '../../config/insights';
+import { InsightType } from '../../config/insights';
 import { getMetricRunInfo } from '../../utils/metrics';
 import { getMetricType } from '../utils';
-
-const METRIC_NAME = 'totalSizeByTypeALL';
+import { Metric } from '../types';
 
 const getText = ({ metric, displayValue, displayDeltaPercentage }) =>
   `${metric} — ${displayValue} (${displayDeltaPercentage}).`;
 
 export const extractAssetsSizeTotalInsight = (_, currentExtractedData, baselineBundleStats) => {
-  const currentValue = currentExtractedData?.metrics?.[METRIC_NAME]?.value || 0;
-  const baselineValue = baselineBundleStats?.metrics?.webpack?.[METRIC_NAME]?.value || 0;
+  const currentValue = currentExtractedData?.metrics?.[Metric.BUNDLE_SIZE]?.value || 0;
+  const baselineValue = baselineBundleStats?.metrics?.webpack?.[Metric.BUNDLE_SIZE]?.value || 0;
 
-  const metric = getMetricType(METRIC_NAME);
+  const metric = getMetricType(Metric.BUNDLE_SIZE);
   const info = getMetricRunInfo(metric, currentValue, baselineValue);
   const { displayDeltaPercentage, displayValue } = info;
 
   return {
     insights: {
       assetsSizeTotal: {
-        type: INSIGHT_INFO,
+        type: InsightType.INFO,
         data: {
           text: getText({ metric: metric.label, displayValue, displayDeltaPercentage }),
           md: getText({

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

@@ -4,34 +4,39 @@ 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 { METRIC_TOTALS_PREFIX, METRIC_TOTALS_SUFIX_ALL } from '../types';
 
-const METRIC_NAME_ALL = 'ALL';
-const METRIC_NAME_PREFIX = 'totalSizeByType';
+const getMetricName = (fileType) => `${METRIC_TOTALS_PREFIX}${fileType}`;
 
-const getMetricName = (fileType) => `${METRIC_NAME_PREFIX}${fileType}`;
+const generateInitialSizeByType = () =>
+  FILE_TYPES.reduce(
+    (accumulator, fileType) => ({
+      ...accumulator,
+      [getMetricName(fileType)]: {
+        value: 0,
+      },
+    }),
+    {},
+  );
 
-const generateInitialSizeByType = () => FILE_TYPES.reduce((accumulator, fileType) => ({
-  ...accumulator,
-  [getMetricName(fileType)]: {
-    value: 0,
-  },
-}), {});
+const calculateTotalByType = (assets) =>
+  assets.reduce((accumulator, current) => {
+    const fileType = getFileType(current.name);
+    const statName = getMetricName(fileType);
+    const value = accumulator[statName].value + current.value;
 
-const calculateTotalByType = (assets) => assets.reduce((accumulator, current) => {
-  const fileType = getFileType(current.name);
-  const statName = getMetricName(fileType);
-  const value = accumulator[statName].value + current.value;
+    return {
+      ...accumulator,
+      [statName]: {
+        value,
+      },
+    };
+  }, generateInitialSizeByType());
 
-  return {
-    ...accumulator,
-    [statName]: {
-      value,
-    },
-  };
-}, generateInitialSizeByType());
-
-const getFilterInitialAssetsByType = (fileType) => ({ name, isInitial }) =>
-  getFileType(name) === fileType && isInitial; // eslint-disable-line implicit-arrow-linebreak
+const getFilterInitialAssetsByType =
+  (fileType) =>
+  ({ name, isInitial }) =>
+    getFileType(name) === fileType && isInitial; // eslint-disable-line implicit-arrow-linebreak
 
 const calculateInitialTotals = (assets) => {
   const cssAssets = assets.filter(getFilterInitialAssetsByType(FILE_TYPE_CSS));
@@ -52,7 +57,7 @@ export const extractAssetsSize = (webpackStats, currentExtractedData) => {
 
   const sizes = calculateTotalByType(bundleAssets);
   const generic = {
-    [getMetricName(METRIC_NAME_ALL)]: {
+    [getMetricName(METRIC_TOTALS_SUFIX_ALL)]: {
       value: sum(map(bundleAssets, 'value')),
     },
     ...calculateInitialTotals(bundleAssets),

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

@@ -0,0 +1,105 @@
+import map from 'lodash/map';
+import orderBy from 'lodash/orderBy';
+import sum from 'lodash/sum';
+
+import { InsightType } from '../../config';
+import { Packages } from '../types';
+
+interface DuplicatePackage {
+  id: string;
+  value: number;
+}
+
+interface DuplicatePackageGroup {
+  name: string;
+  value: number;
+  children: Array<DuplicatePackage>;
+}
+
+export const extractModulesPackagesDuplicate = (_: any, currentExtractedData: any) => {
+  const source: Packages = currentExtractedData?.metrics?.packages || {};
+
+  // Group packages by name(uniq)
+  const packagesByName: Record<string, DuplicatePackageGroup> = {};
+
+  Object.entries(source).forEach(([packageId, packageData]) => {
+    const { name, value } = packageData;
+    const existingPackageData: DuplicatePackageGroup = packagesByName[name] || {
+      name,
+      value,
+      children: [],
+    };
+
+    existingPackageData.children.push({ id: packageId, value });
+
+    packagesByName[name] = existingPackageData;
+  });
+
+  // Filter, count and sum the duplicate packages
+  let count = 0;
+  const duplicatePackages: Array<DuplicatePackageGroup> = [];
+
+  Object.entries(packagesByName).forEach(([packageGroupName, packageGroupData]) => {
+    // Count duplicate instances (substract the initial instance)
+    // example: package-a, package-b:package-a -> duplicateInstances = 1
+    const duplicateInstances = packageGroupData.children.length - 1;
+
+    // No duplicates, skip
+    if (duplicateInstances === 0) {
+      return;
+    }
+
+    count += duplicateInstances;
+
+    duplicatePackages.push({
+      name: packageGroupName,
+      value: sum(map(packageGroupData.children, 'value')),
+      children: packageGroupData.children,
+    });
+  });
+
+  if (!count) {
+    return {
+      metrics: {
+        duplicatePackagesCount: {
+          value: count,
+        },
+      },
+    };
+  }
+
+  const duplicatePackagesByName = orderBy(duplicatePackages, 'value', 'desc').reduce(
+    (agg, { name, ...duplicatePackageData }: DuplicatePackageGroup) => ({
+      ...agg,
+      [name]: {
+        ...duplicatePackageData,
+        children: orderBy(duplicatePackageData.children, 'value', 'desc'),
+      },
+    }),
+    {},
+  );
+
+  // Generate v2 data structure
+  // @TODO remove in v4.0
+  const data = Object.entries(duplicatePackagesByName).reduce(
+    (agg, [packageName, duplicatePackageData]) => ({
+      ...agg,
+      [packageName]: (duplicatePackageData as DuplicatePackageGroup).children.map(({ id }) => id),
+    }),
+    {},
+  );
+
+  return {
+    insights: {
+      duplicatePackages: {
+        type: InsightType.WARNING,
+        data,
+      },
+    },
+    metrics: {
+      duplicatePackagesCount: {
+        value: count,
+      },
+    },
+  };
+};

package/src/webpack/extract/modules-packages.ts

@@ -51,7 +51,7 @@ export const getPackageMetaFromModulePath = (modulePath: string) => {
     return null;
   }
 
-  const name = last(names);
+  const name = last(names) as string;
 
   // Get package full path
   // @NOTE use the last path to prevent getting incorrect results on packages with similar names

package/src/webpack/extract/modules.ts

@@ -51,7 +51,7 @@ export const extractModules = (webpackStats?: WebpackStatsFiltered): MetricsModu
     const { name, size = 0, chunks } = moduleEntry;
     const normalizedName = getModuleName(name);
 
-    // skip modules that are orphane(do not belong to any chunk)
+    // skip modules that do not belong to any chunk
     if (!chunks || chunks?.length === 0) {
       return agg;
     }
@@ -64,15 +64,12 @@ export const extractModules = (webpackStats?: WebpackStatsFiltered): MetricsModu
     duplicateCodeSize += duplicateInstances * size;
     totalCodeSize += instances * size;
 
-    const reasons = moduleEntry.reasons?.map((reason) => getModuleName(reason.module));
-
     // eslint-disable-next-line no-param-reassign
     agg[normalizedName] = {
       name,
       value: size,
       chunkIds: chunks.map(normalizeChunkId),
       duplicated: Boolean(duplicateInstances),
-      ...(reasons && { reasons }),
     };
 
     return agg;

package/src/webpack/metrics.js

@@ -3,76 +3,78 @@ import {
   METRIC_TYPE_NUMERIC,
   METRIC_TYPE_PERCENTAGE,
 } from '../config/metrics';
+import { FILE_TYPE_LABELS } from '../config/file-types';
+import { Metric } from './types';
 
 export const metrics = {
-  totalSizeByTypeALL: {
+  [Metric.BUNDLE_SIZE]: {
     label: 'Bundle Size',
     description: 'The total size of the assets produced by webpack',
     url: 'https://relative-ci.com/documentation/metrics-and-data#assets',
     type: METRIC_TYPE_FILE_SIZE,
   },
-  totalInitialSizeJS: {
+  [Metric.INITIAL_SIZE_JS]: {
     label: 'Initial JS',
     description: 'The total size of JavaScript initial chunks',
     url: 'https://relative-ci.com/documentation/metrics-and-data#assets',
     type: METRIC_TYPE_FILE_SIZE,
   },
-  totalInitialSizeCSS: {
+  [Metric.INITIAL_SIZE_CSS]: {
     label: 'Initial CSS',
     description: 'The total size of CSS initial chunks',
     url: 'https://relative-ci.com/documentation/metrics-and-data#assets',
     type: METRIC_TYPE_FILE_SIZE,
   },
-  cacheInvalidation: {
+  [Metric.CACHE_INVALIDATION]: {
     label: 'Cache Invalidation',
     description: 'The ratio between the total changed assets and total assets size(Bundle Size)',
     url: 'https://relative-ci.com/documentation/metrics-and-data#assets',
     type: METRIC_TYPE_PERCENTAGE,
     biggerIsBetter: false,
   },
-  chunkCount: {
+  [Metric.CHUNK_COUNT]: {
     label: 'Chunks',
     description: 'The total number of chunks',
     url: 'https://relative-ci.com/documentation/metrics-and-data#assets',
     type: METRIC_TYPE_NUMERIC,
     biggerIsBetter: false,
   },
-  assetCount: {
+  [Metric.ASSET_COUNT]: {
     label: 'Assets',
     description: 'Total number of assets',
     url: 'https://relative-ci.com/documentation/metrics-and-data#assets',
     type: METRIC_TYPE_NUMERIC,
     biggerIsBetter: false,
   },
-  moduleCount: {
+  [Metric.MODULE_COUNT]: {
     label: 'Modules',
     description: 'The total number of modules bundled by webpack',
     url: 'https://relative-ci.com/documentation/metrics-and-data#modules-1',
     type: METRIC_TYPE_NUMERIC,
     biggerIsBetter: false,
   },
-  duplicateModulesCount: {
+  [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: METRIC_TYPE_NUMERIC,
     biggerIsBetter: false,
   },
-  duplicateCode: {
+  [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,
   },
-  packageCount: {
+  [Metric.PACKAGE_COUNT]: {
     label: 'Packages',
     description: 'The total number of packages bundled by webpack',
     url: 'https://relative-ci.com/documentation/metrics-and-data#packages',
     type: METRIC_TYPE_NUMERIC,
     biggerIsBetter: false,
   },
-  duplicatePackagesCount: {
+  [Metric.DUPLICATE_PACKAGES_COUNT]: {
     label: 'Duplicate Packages',
     description: 'The total number of duplicate packages',
     url: 'https://relative-ci.com/documentation/metrics-and-data#packages',
@@ -80,32 +82,32 @@ export const metrics = {
     biggerIsBetter: false,
   },
   sizes: {
-    totalSizeByTypeJS: {
-      label: 'JS',
+    [Metric.TOTAL_SIZE_JS]: {
+      label: FILE_TYPE_LABELS.JS,
       type: METRIC_TYPE_FILE_SIZE,
     },
-    totalSizeByTypeCSS: {
-      label: 'CSS',
+    [Metric.TOTAL_SIZE_CSS]: {
+      label: FILE_TYPE_LABELS.CSS,
       type: METRIC_TYPE_FILE_SIZE,
     },
-    totalSizeByTypeIMG: {
-      label: 'IMG',
+    [Metric.TOTAL_SIZE_IMG]: {
+      label: FILE_TYPE_LABELS.IMG,
       type: METRIC_TYPE_FILE_SIZE,
     },
-    totalSizeByTypeMEDIA: {
-      label: 'Media',
+    [Metric.TOTAL_SIZE_MEDIA]: {
+      label: FILE_TYPE_LABELS.MEDIA,
       type: METRIC_TYPE_FILE_SIZE,
     },
-    totalSizeByTypeFONT: {
-      label: 'Fonts',
+    [Metric.TOTAL_SIZE_FONT]: {
+      label: FILE_TYPE_LABELS.FONT,
       type: METRIC_TYPE_FILE_SIZE,
     },
-    totalSizeByTypeHTML: {
-      label: 'HTML',
+    [Metric.TOTAL_SIZE_HTML]: {
+      label: FILE_TYPE_LABELS.HTML,
       type: METRIC_TYPE_FILE_SIZE,
     },
-    totalSizeByTypeOTHER: {
-      label: 'Other',
+    [Metric.TOTAL_SIZE_OTHER]: {
+      label: FILE_TYPE_LABELS.OTHER,
       type: METRIC_TYPE_FILE_SIZE,
     },
   },

package/src/webpack/types.ts

@@ -1,11 +1,35 @@
-import { Metric, MetricRun } from '../constants';
+import { MetricRun } from '../constants';
 
-interface MetaChunk {
+export const METRIC_TOTALS_SUFIX_ALL = 'ALL';
+export const METRIC_TOTALS_PREFIX = 'totalSizeByType';
+
+export enum Metric {
+  BUNDLE_SIZE = 'totalSizeByTypeALL',
+  INITIAL_SIZE_JS = 'totalInitialSizeJS',
+  INITIAL_SIZE_CSS = 'totalInitialSizeCSS',
+  CACHE_INVALIDATION = 'cacheInvalidation',
+  ASSET_COUNT = 'assetCount',
+  CHUNK_COUNT = 'chunkCount',
+  MODULE_COUNT = 'moduleCount',
+  DUPLICATE_MODULES_COUNT = 'duplicateModulesCount',
+  DUPLICATE_CODE = 'duplicateCode',
+  PACKAGE_COUNT = 'packageCount',
+  DUPLICATE_PACKAGES_COUNT = 'duplicatePackagesCount',
+  TOTAL_SIZE_JS = 'totalSizeByTypeJS',
+  TOTAL_SIZE_CSS = 'totalSizeByTypeCSS',
+  TOTAL_SIZE_IMG = 'totalSizeByTypeIMG',
+  TOTAL_SIZE_MEDIA = 'totalSizeByTypeMEDIA',
+  TOTAL_SIZE_FONT = 'totalSizeByTypeFONT',
+  TOTAL_SIZE_HTML = 'totalSizeByTypeHTML',
+  TOTAL_SIZE_OTHER = 'totalSizeByTypeOTHER',
+}
+
+export interface MetaChunk {
   id: string;
   name: string;
 }
 
-export interface Asset extends Metric {
+export interface Asset extends MetricRun {
   name: string;
   isEntry: boolean;
   isInitial: boolean;
@@ -24,11 +48,10 @@ export interface MetricsAssets {
   };
 }
 
-export interface Module extends Metric {
+export interface Module extends MetricRun {
   name: string;
-  chunkIds: Array<string>;
+  chunkIds: Array<String>;
   duplicated: boolean;
-  reasons?: Array<string>;
 }
 
 export type Modules = Record<string, Module>;
@@ -42,7 +65,8 @@ export interface MetricsModules {
   };
 }
 
-export interface Package extends Metric {
+export interface Package extends MetricRun {
+  name: string;
   path: string;
 }
 

package/types/config/insights.d.ts

@@ -1,4 +1,5 @@
-export const INSIGHT_ERROR: "ERROR";
-export const INSIGHT_INFO: "INFO";
-export const INSIGHT_WARNING: "WARNING";
-export const INSIGHTS: string[];
+export declare enum InsightType {
+    ERROR = "ERROR",
+    INFO = "INFO",
+    WARNING = "WARNING"
+}