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

package/src/utils/component-links.js

@@ -45,13 +45,14 @@ export const getModuleSourceTypeFilters = (value = true) => ({
   [`${MODULE_SOURCE_TYPE}.${MODULE_FILTERS.THIRD_PARTY}`]: value,
 });
 
-export const getModuleChunkFilters = (chunkIds, value) => chunkIds.reduce(
-  (agg, chunkId) => ({
-    ...agg,
-    [`${MODULE_CHUNK}.${chunkId}`]: value,
-  }),
-  {},
-);
+export const getModuleChunkFilters = (chunkIds, value) =>
+  chunkIds.reduce(
+    (agg, chunkId) => ({
+      ...agg,
+      [`${MODULE_CHUNK}.${chunkId}`]: value,
+    }),
+    {},
+  );
 
 export const getModuleFileTypeFilters = (value = true) =>
   MODULE_SOURCE_FILE_TYPES.reduce(
@@ -148,6 +149,19 @@ export const BUNDLE_MODULES = {
   },
 };
 
+export const BUNDLE_MODULES_DUPLICATE = {
+  section: SECTIONS.MODULES,
+  title: I18N.COMPONENT_LINK_MODULES_DUPLICATE,
+  params: {
+    [COMPONENT.BUNDLE_MODULES]: {
+      filters: {
+        [MODULE_FILTERS.CHANGED]: false,
+        [MODULE_FILTERS.DUPLICATED]: true,
+      },
+    },
+  },
+};
+
 export const getBundleModulesBySearch = (search) => ({
   section: SECTIONS.MODULES,
   title: I18N.COMPONENT_LINK_MODULES,
@@ -257,6 +271,8 @@ export const METRIC_COMPONENT_LINKS = new Map([
   ['webpack.assetCount', { link: BUNDLE_ASSETS_COUNT }],
   ['webpack.chunkCount', { link: BUNDLE_ASSETS_CHUNK_COUNT }],
   ['webpack.moduleCount', { link: BUNDLE_MODULES }],
+  ['webpack.duplicateModulesCount', { link: BUNDLE_MODULES_DUPLICATE }],
+  ['webpack.duplicateCode', { link: BUNDLE_MODULES_DUPLICATE }],
   ['webpack.packageCount', { link: BUNLDE_PACKAGES_COUNT }],
   ['webpack.duplicatePackagesCount', { link: BUNDLE_PACKAGES_DUPLICATE }],
 ]);

package/src/webpack/constants.ts

@@ -18,6 +18,8 @@ export enum MetricId {
   TotalInitialSizeCSS = 'totalInitialSizeCSS',
   CacheInvalidation = 'cacheInvalidation',
   ModuleName = 'moduleCount',
+  DuplicateModulesCount = 'duplicateModulesCount',
+  DuplicateCode = 'duplicateCode',
   ChunkCount = 'chunkCount',
   AssetCount = 'assetCount',
   PackageCount = 'packageCount',
@@ -45,12 +47,13 @@ const VERSION = /@[\w|\-|_|.]+/;
 
 // Extract package paths from module path
 // https://regex101.com/r/22Leep/6
-/* 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}/)`,
-  // match package name
-  '(?:',
+/* eslint-disable prettier/prettier */
+export const MODULE_PATH_PACKAGES = new RegExp(
+  [
+    // match dependency directory (eg: `node_modules/`, `node_modules/.pnpm/`)
+    `(?:${PACKAGE_PREFIX.source}/)`,
+    // match package name
+    '(?:',
     // match `@organization/` or `@organization+`(pnpm)
     `(?:@${PACKAGE_SLUG.source}[/|+])?`,
     // match github.com+organization+
@@ -59,38 +62,45 @@ export const MODULE_PATH_PACKAGES = new RegExp([
     `(?:${PACKAGE_SLUG.source})`,
     // match version
     `(?:${VERSION.source})?`,
-  ')',
+    ')',
 
-  // Match pnpm peer dependencies (eg: package-a@version_package-b@version)
-  '(?:_',
+    // Match pnpm peer dependencies (eg: package-a@version_package-b@version)
+    '(?:_',
     `(?:@${PACKAGE_SLUG.source}[/|+])?`,
     `(?:${PACKAGE_SLUG.source})`,
     `(?:@${PACKAGE_SLUG.source})?`,
-  ')*',
-  '/',
-].join(''), 'g');
+    ')*',
+    '/',
+  ].join(''),
+  'g',
+);
+/* eslint-enable prettier/prettier */
 
 // Extract package name from package path
 // https://regex101.com/r/tTlU0W/6
-export const PACKAGE_PATH_NAME = new RegExp([
-  `(?:${PACKAGE_PREFIX.source}/)`,
-  // match dependency
-  '(?:',
+/* eslint-disable prettier/prettier */
+export const PACKAGE_PATH_NAME = new RegExp(
+  [
+    `(?:${PACKAGE_PREFIX.source}/)`,
+    // match dependency
+    '(?:',
     '(',
-      `(?:@${PACKAGE_SLUG.source}[/|+])?`,
-      `(?:(?:${PACKAGE_SLUG.source}\\+)*)`,
-      `(?:${PACKAGE_SLUG.source})`,
+    `(?:@${PACKAGE_SLUG.source}[/|+])?`,
+    `(?:(?:${PACKAGE_SLUG.source}\\+)*)`,
+    `(?:${PACKAGE_SLUG.source})`,
     ')',
     `(?:${VERSION.source})?`,
-  ')',
-  // match peer dependency
-  '(?:_',
+    ')',
+    // match peer dependency
+    '(?:_',
     '(',
-      `(?:@${PACKAGE_SLUG.source}[/|+])?`,
-      `(?:${PACKAGE_SLUG.source})`,
+    `(?:@${PACKAGE_SLUG.source}[/|+])?`,
+    `(?:${PACKAGE_SLUG.source})`,
     ')',
     `(?:@${PACKAGE_SLUG.source})`,
-  ')*',
-  '/',
-].join(''), 'g');
-/* eslint-enable prettier/prettier, @typescript-eslint/indent */
+    ')*',
+    '/',
+  ].join(''),
+  'g',
+);
+/* eslint-enable prettier/prettier */

package/src/webpack/extract/modules.ts

@@ -1,4 +1,5 @@
 import isEmpty from 'lodash/isEmpty';
+import round from 'lodash/round';
 
 import { ModuleMetric, WebpackMetricsModules } from '../../constants';
 import { getModuleName, normalizeChunkId } from '../utils';
@@ -10,7 +11,7 @@ interface WebpackModule {
 }
 
 interface WebpackModuleWithConcatenatedModules extends WebpackModule {
-  modules?: Array<Pick<WebpackModule, 'name' | 'size'>>;
+  modules: Array<Pick<WebpackModule, 'name' | 'size'>>;
 }
 
 /*
@@ -20,7 +21,13 @@ export const extractModules = (webpackStats?: any): WebpackMetricsModules => {
   const modulesSource: Array<WebpackModuleWithConcatenatedModules> = webpackStats?.modules || [];
 
   if (!modulesSource) {
-    return { metrics: { modules: {} } };
+    return {
+      metrics: {
+        duplicateCode: { value: 0 },
+        duplicateModulesCount: { value: 0 },
+        modules: {},
+      },
+    };
   }
 
   // Flatten concatenated modules
@@ -43,25 +50,49 @@ export const extractModules = (webpackStats?: any): WebpackMetricsModules => {
     return agg;
   }, [] as Array<WebpackModule>);
 
+  let totalCodeSize = 0;
+  let duplicateCodeSize = 0;
+  let duplicateModulesCount = 0;
+
   // Normalize module entries
   const modules = allModules.reduce((agg, moduleEntry) => {
     const { name, size, chunks } = moduleEntry;
     const normalizedName = getModuleName(name);
 
-    // skip modules with no chunks
+    // skip modules that do not belong to any chunk
     if (isEmpty(chunks)) {
       return agg;
     }
 
+    const instances = chunks.length;
+    const duplicateInstances = instances - 1;
+
+    duplicateModulesCount += duplicateInstances;
+    duplicateCodeSize += duplicateInstances * size;
+    totalCodeSize += instances * size;
+
     // eslint-disable-next-line no-param-reassign
     agg[normalizedName] = {
       name,
       value: size,
       chunkIds: chunks.map(normalizeChunkId),
+      duplicated: Boolean(duplicateInstances),
     };
 
     return agg;
   }, {} as Record<string, ModuleMetric>);
 
-  return { metrics: { modules } };
+  const duplicateCode = totalCodeSize ? round((duplicateCodeSize / totalCodeSize) * 100, 2) : 0;
+
+  return {
+    metrics: {
+      modules,
+      duplicateCode: {
+        value: duplicateCode,
+      },
+      duplicateModulesCount: {
+        value: duplicateModulesCount,
+      },
+    },
+  };
 };

package/src/webpack/metrics.ts

@@ -55,6 +55,20 @@ export const metrics = {
     type: METRIC_TYPE_NUMERIC,
     biggerIsBetter: false,
   },
+  [MetricId.DuplicateModulesCount]: {
+    label: 'Duplicate Modules',
+    description: '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,
+  },
+  [MetricId.DuplicateCode]: {
+    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,
+  },
   [MetricId.PackageCount]: {
     label: 'Packages',
     description: 'Total number of packages bundled by webpack.',

package/types/browsertime/compare.d.ts

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

package/types/browsertime/constants.d.ts

@@ -0,0 +1 @@
+export const SUMMARY_METRIC_PATHS: string[];

package/types/browsertime/extract.d.ts

@@ -0,0 +1,6 @@
+export function extract(browsertimeSource: any): {
+    metrics: {};
+};
+export type BrowsertimeMetricsRes = {
+    metrics: any;
+};

package/types/browsertime/filter.d.ts

@@ -0,0 +1 @@
+export function filter(browsertimeSource: Object): any;

package/types/browsertime/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./compare";
+export * from "./constants";
+export * from "./extract";
+export * from "./filter";
+export * from "./metrics";
+export * from "./selectors";

package/types/browsertime/metrics.d.ts

@@ -0,0 +1,107 @@
+export namespace metrics {
+    namespace firstPaint {
+        export const label: string;
+        export { METRIC_TYPE_DURATION as type };
+    }
+    namespace fullyLoaded {
+        const label_1: string;
+        export { label_1 as label };
+        export { METRIC_TYPE_DURATION as type };
+    }
+    namespace backEndTime {
+        const label_2: string;
+        export { label_2 as label };
+        export { METRIC_TYPE_DURATION as type };
+    }
+    namespace domContentLoadedTime {
+        const label_3: string;
+        export { label_3 as label };
+        export { METRIC_TYPE_DURATION as type };
+    }
+    namespace domInteractiveTime {
+        const label_4: string;
+        export { label_4 as label };
+        export { METRIC_TYPE_DURATION as type };
+    }
+    namespace domainLookupTime {
+        const label_5: string;
+        export { label_5 as label };
+        export { METRIC_TYPE_DURATION as type };
+    }
+    namespace frontEndTime {
+        const label_6: string;
+        export { label_6 as label };
+        export { METRIC_TYPE_DURATION as type };
+    }
+    namespace pageDownloadTime {
+        const label_7: string;
+        export { label_7 as label };
+        export { METRIC_TYPE_DURATION as type };
+    }
+    namespace pageLoadTime {
+        const label_8: string;
+        export { label_8 as label };
+        export { METRIC_TYPE_DURATION as type };
+    }
+    namespace redirectionTime {
+        const label_9: string;
+        export { label_9 as label };
+        export { METRIC_TYPE_DURATION as type };
+    }
+    namespace serverConnectionTime {
+        const label_10: string;
+        export { label_10 as label };
+        export { METRIC_TYPE_DURATION as type };
+    }
+    namespace serverResponseTime {
+        const label_11: string;
+        export { label_11 as label };
+        export { METRIC_TYPE_DURATION as type };
+    }
+    namespace firstContentfulPaint {
+        const label_12: string;
+        export { label_12 as label };
+        export { METRIC_TYPE_DURATION as type };
+    }
+    namespace rumSpeedIndex {
+        const label_13: string;
+        export { label_13 as label };
+        export { METRIC_TYPE_DURATION as type };
+    }
+    namespace firstVisualChange {
+        const label_14: string;
+        export { label_14 as label };
+        export { METRIC_TYPE_DURATION as type };
+    }
+    namespace lastVisualChange {
+        const label_15: string;
+        export { label_15 as label };
+        export { METRIC_TYPE_DURATION as type };
+    }
+    namespace perceptualSpeedIndex {
+        const label_16: string;
+        export { label_16 as label };
+        export { METRIC_TYPE_DURATION as type };
+    }
+    namespace speedIndex {
+        const label_17: string;
+        export { label_17 as label };
+        export { METRIC_TYPE_DURATION as type };
+    }
+    namespace visualComplete85 {
+        const label_18: string;
+        export { label_18 as label };
+        export { METRIC_TYPE_DURATION as type };
+    }
+    namespace visualComplete95 {
+        const label_19: string;
+        export { label_19 as label };
+        export { METRIC_TYPE_DURATION as type };
+    }
+    namespace visualComplete99 {
+        const label_20: string;
+        export { label_20 as label };
+        export { METRIC_TYPE_DURATION as type };
+    }
+}
+import { METRIC_TYPE_DURATION } from "../config/metrics";

package/types/browsertime/selectors.d.ts

@@ -0,0 +1 @@
+export function selectors(job: any): {};

package/types/config/component-links.d.ts

@@ -0,0 +1,35 @@
+export const ASSET_ENTRY_TYPE: "et";
+export const ASSET_FILE_TYPE: "ft";
+export const MODULE_CHUNK: "c";
+export const MODULE_FILE_TYPE: "mft";
+export const MODULE_SOURCE_TYPE: "mst";
+export namespace ASSET_FILTERS {
+    const ASSET: string;
+    const CHANGED: string;
+    const ENTRY: string;
+    const INITIAL: string;
+    const CHUNK: string;
+}
+export namespace MODULE_FILTERS {
+    const CHANGED_1: string;
+    export { CHANGED_1 as CHANGED };
+    export const DUPLICATED: string;
+    export const FIRST_PARTY: string;
+    export const THIRD_PARTY: string;
+}
+export namespace PACKAGE_FILTERS {
+    const CHANGED_2: string;
+    export { CHANGED_2 as CHANGED };
+    export const DUPLICATE: string;
+}
+export namespace SECTIONS {
+    const TOTALS: string;
+    const ASSETS: string;
+    const MODULES: string;
+    const PACKAGES: string;
+}
+export namespace COMPONENT {
+    const BUNDLE_ASSETS: string;
+    const BUNDLE_MODULES: string;
+    const BUNDLE_PACKAGES: string;
+}

package/types/config/delta.d.ts

@@ -0,0 +1,9 @@
+export const DELTA_TYPE_NEGATIVE: "NEGATIVE";
+export const DELTA_TYPE_NO_CHANGE: "NO_CHANGE";
+export const DELTA_TYPE_POSITIVE: "POSITIVE";
+export const DELTA_TYPE_LEVEL_LOW: "LOW";
+export const DELTA_TYPE_LEVEL_HIGH: "HIGH";
+export const DELTA_TYPE_LOW_NEGATIVE: string;
+export const DELTA_TYPE_HIGH_NEGATIVE: string;
+export const DELTA_TYPE_LOW_POSITIVE: string;
+export const DELTA_TYPE_HIGH_POSITIVE: string;

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

@@ -0,0 +1,45 @@
+export const FILE_TYPE_CSS: "CSS";
+export const FILE_TYPE_JS: "JS";
+export const FILE_TYPE_IMG: "IMG";
+export const FILE_TYPE_MEDIA: "MEDIA";
+export const FILE_TYPE_FONT: "FONT";
+export const FILE_TYPE_HTML: "HTML";
+export const FILE_TYPE_OTHER: "OTHER";
+export namespace FILE_TYPE_PATTERNS {
+    const CSS: RegExp;
+    const JS: RegExp;
+    const IMG: RegExp;
+    const MEDIA: RegExp;
+    const FONT: RegExp;
+    const HTML: RegExp;
+}
+export namespace FILE_TYPE_LABELS {
+    const CSS_1: string;
+    export { CSS_1 as CSS };
+    const JS_1: string;
+    export { JS_1 as JS };
+    const IMG_1: string;
+    export { IMG_1 as IMG };
+    const MEDIA_1: string;
+    export { MEDIA_1 as MEDIA };
+    const FONT_1: string;
+    export { FONT_1 as FONT };
+    const HTML_1: string;
+    export { HTML_1 as HTML };
+    export const OTHER: string;
+}
+export const FILE_TYPES: string[];
+export namespace MODULE_SOURCE_PATTERNS {
+    const CSS_2: RegExp;
+    export { CSS_2 as CSS };
+    const JS_2: RegExp;
+    export { JS_2 as JS };
+}
+export const MODULE_SOURCE_FILE_TYPES: string[];
+export namespace MODULE_DESTINATION_PATTERNS {
+    const CSS_3: RegExp;
+    export { CSS_3 as CSS };
+    const JS_3: RegExp;
+    export { JS_3 as JS };
+}
+export const MODULE_DESTINATION_FILE_TYPES: string[];

package/types/config/index.d.ts

@@ -0,0 +1,11 @@
+export * from "./component-links";
+export * from "./file-types";
+export * from "./insights";
+export * from "./metrics";
+export * from "./delta";
+export const PACKAGES_SEPARATOR: ":";
+export const PACKAGE_ID_SEPARATOR: "~";
+export const SOURCE_PATH_WEBPACK_STATS: "webpack";
+export const SOURCE_PATH_LIGHTHOUSE: "lighthouse";
+export const SOURCE_PATH_BROWSERTIME: "browsertime";
+export const SOURCE_PATHS: string[];

package/types/config/insights.d.ts

@@ -0,0 +1,4 @@
+export const INSIGHT_ERROR: "ERROR";
+export const INSIGHT_INFO: "INFO";
+export const INSIGHT_WARNING: "WARNING";
+export const INSIGHTS: string[];

package/types/config/metrics.d.ts

@@ -0,0 +1,35 @@
+export const METRIC_TYPE_FILE_SIZE: "METRIC_TYPE_FILE_SIZE";
+export const METRIC_TYPE_DURATION: "METRIC_TYPE_DURATION";
+export const METRIC_TYPE_NUMERIC: "METRIC_TYPE_NUMERIC";
+export const METRIC_TYPE_SCORE: "METRIC_TYPE_SCORE";
+export const METRIC_TYPE_PERCENTAGE: "METRIC_TYPE_PERCENTAGE";
+export namespace METRIC_TYPES {
+    namespace METRIC_TYPE_NUMERIC {
+        export const biggerIsBetter: boolean;
+        export { formatNumber as formatter };
+    }
+    namespace METRIC_TYPE_SCORE {
+        const biggerIsBetter_1: boolean;
+        export { biggerIsBetter_1 as biggerIsBetter };
+        export { formatNumber as formatter };
+    }
+    namespace METRIC_TYPE_DURATION {
+        const biggerIsBetter_2: boolean;
+        export { biggerIsBetter_2 as biggerIsBetter };
+        export { formatDuration as formatter };
+    }
+    namespace METRIC_TYPE_FILE_SIZE {
+        const biggerIsBetter_3: boolean;
+        export { biggerIsBetter_3 as biggerIsBetter };
+        export { formatFileSize as formatter };
+    }
+    namespace METRIC_TYPE_PERCENTAGE {
+        const biggerIsBetter_4: boolean;
+        export { biggerIsBetter_4 as biggerIsBetter };
+        export { formatPercentage as formatter };
+    }
+}
+import { formatNumber } from "../utils/format";
+import { formatDuration } from "../utils/format";
+import { formatFileSize } from "../utils/format";
+import { formatPercentage } from "../utils/format";