@bundle-stats/utils 3.4.0-alpha.3 → 3.4.0-beta.0

package/src/transformers/budgets-insights.ts

@@ -1,5 +1,7 @@
 import get from 'lodash/get';
+import template from 'lodash/template';
 
+import * as types from '../types';
 import { InsightType } from '../constants';
 import { getGlobalMetricType } from '../utils';
 
@@ -12,132 +14,199 @@ interface Options {
   budgets?: Array<OptionBudgetMetric>;
 }
 
-interface BudgetInsight {
+interface BudgetInsightMetricData {
   currentValue: number;
   budgetValue: number;
   failed: boolean;
 }
 
-interface BudgetInsightInfo {
+interface BudgetInsightMetric {
+  /** Metric budget insight type */
   type: InsightType;
   message: {
-    template: string;
-    data: Record<string, unknown>;
-  };
-  source: {
-    metricId: string;
-    budgetInsight: BudgetInsight;
+    text: string;
+    md: string;
   };
+  /** Metric budget check data */
+  data: BudgetInsightMetricData;
 }
 
-interface BudgetInsights {
-  [metricId: string]: BudgetInsight;
+interface BudgetInsight extends types.Insight {
+  data: {
+    [metricId: string]: BudgetInsightMetric;
+  };
 }
 
 interface BudgetsInsightsOutput {
   insights: {
-    budgets: BudgetInsights;
+    budgets: BudgetInsight;
   };
 }
 
-export const getExtract =
-  (source: string) => (
-    _: unknown,
-    currentExtractedData: any,
-    __: unknown,
-    options: Options = {},
-  ): BudgetsInsightsOutput | null => {
-    const { budgets: budgetsOptions } = options;
+const resolveType = (insights: Array<[string, BudgetInsightMetric]>): InsightType => {
+  if (insights.find(([_, { type }]) => type === InsightType.ERROR)) {
+    return InsightType.ERROR;
+  }
 
-    if (!budgetsOptions) {
-      return null;
-    }
+  if (insights.find(([_, { type }]) => type === InsightType.WARNING)) {
+    return InsightType.WARNING;
+  }
 
-    const insights: Array<[string, BudgetInsight]> = [];
+  return InsightType.SUCCESS;
+};
 
-    budgetsOptions.forEach((budgetOption) => {
-      const { metric: budgetMetricId, value: budgetValue } = budgetOption;
-      const currentValue = get(currentExtractedData, `metrics.${budgetMetricId}.value`);
-      const metric = getGlobalMetricType(`${source}.${budgetMetricId}`);
+// 3/3 budget checks passed
+// 2/3 budget checks failed
+// 1 failed, 1 warning, 2 success
 
-      if (!currentValue) {
-        return;
-      }
+const budgetInsightTemplate = template(
+  '<%= count %>/<%= total %> budget checks <%= status %>'
+);
 
-      const isValueOverBudget = currentValue > budgetValue;
+const resolveStatus = (failedCount: number, warningCount: number): string => {
+  if (failedCount) {
+    return 'failed';
+  }
 
-      const budgetInsight = {
-        currentValue,
-        budgetValue,
-        failed: metric.biggerIsBetter ? !isValueOverBudget : isValueOverBudget,
-      };
+  if (warningCount) {
+    return 'warned';
+  }
 
-      insights.push([budgetMetricId, budgetInsight]);
-    });
+  return 'passed';
+};
 
-    if (insights.length === 0) {
-      return null;
-    }
+const getMessage = (insights: Array<[string, BudgetInsightMetric]>) => {
+  const total = insights.length;
+  const failedCount = insights.filter(([___, insight]) => insight.type === InsightType.ERROR).length;
+  const warningCount = insights.filter(([___, insight]) => insight.type === InsightType.WARNING).length;
+  const count = failedCount || warningCount || total;
+  const status = resolveStatus(failedCount, warningCount);
 
-    return {
-      insights: {
-        budgets: Object.fromEntries(insights),
-      },
-    };
+  return {
+    text: budgetInsightTemplate({
+      count,
+      total,
+      status,
+    }),
+    md: budgetInsightTemplate({
+      count: `**${count}**`,
+      total: `**${total}**`,
+      status,
+    }),
   };
+};
+
+const budgetInsightMetricTemplate = template(
+  // Add escapes for (|) to avoid lodash.template syntax errors
+  // eslint-disable-next-line no-useless-escape
+  '<%= metricLabel %> is <%= diffLabel %> budget \(<%= currentValue %> / <%= budgetValue %>\)',
+);
 
-const resolveDiffLabel = (budgetInsight: BudgetInsight): string => {
-  const { currentValue, budgetValue } = budgetInsight;
+const resolveDiffLabel = (metricBudgetInsight: BudgetInsightMetricData): string => {
+  const { currentValue, budgetValue } = metricBudgetInsight;
 
   if (currentValue > budgetValue) {
-    return 'over';
+    return 'above';
   }
 
   if (currentValue < budgetValue) {
-    return 'under';
+    return 'below';
   }
 
   return 'equal with';
 };
 
-const resolveType = (budgetInsight: BudgetInsight): InsightType => {
-  if (budgetInsight.failed) {
+const resolveBudgetInsightMetricType = (metricBudgetInsight: BudgetInsightMetricData): InsightType => {
+  if (metricBudgetInsight.failed) {
     return InsightType.ERROR;
   }
 
-  if (budgetInsight.currentValue === budgetInsight.budgetValue) {
+  if (metricBudgetInsight.currentValue === metricBudgetInsight.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 getExtract =
+  (source: string) => (
+    _: unknown,
+    currentExtractedData: any,
+    __: unknown,
+    options: Options = {},
+  ): BudgetsInsightsOutput | null => {
+    const { budgets: budgetsOptions } = options;
+
+    if (!budgetsOptions) {
+      return null;
+    }
 
-export const getInfo = (globalMetricId: string, budgetInsight: BudgetInsight): BudgetInsightInfo => {
-  const metric = getGlobalMetricType(globalMetricId);
+    const insights: Array<[string, BudgetInsightMetric]> = [];
 
-  const diffLabel = resolveDiffLabel(budgetInsight);
-  const type = resolveType(budgetInsight);
-  const currentValue = metric.formatter(budgetInsight.currentValue);
-  const budgetValue = metric.formatter(budgetInsight.budgetValue);
+    budgetsOptions.forEach((budgetOption) => {
+      const { metric: sourceMetricId, value: budgetValue } = budgetOption;
+      const currentValue = get(currentExtractedData, `metrics.${sourceMetricId}.value`);
+      const metricData = getGlobalMetricType(`${source}.${sourceMetricId}`);
 
-  return {
-    type,
-    message: {
-      template: INFO_MESSAGE_TEMPLATE,
-      data: {
-        metricLabel: metric.label,
-        diffLabel,
+      if (!currentValue) {
+        return;
+      }
+
+      const isValueOverBudget = currentValue > budgetValue;
+      const failed = metricData.biggerIsBetter ? !isValueOverBudget : isValueOverBudget;
+
+      const budgetInsightMetricData = {
         currentValue,
         budgetValue,
+        failed,
+      };
+
+      // Message template data
+      const diffLabel = resolveDiffLabel(budgetInsightMetricData);
+      const type = resolveBudgetInsightMetricType(budgetInsightMetricData);
+      const currentFormattedValue = metricData.formatter(currentValue);
+      const budgetFormattedValue = metricData.formatter(budgetValue);
+
+      const messageText = budgetInsightMetricTemplate({
+        metricLabel: metricData.label,
+        currentValue: currentFormattedValue,
+        diffLabel,
+        budgetValue: budgetFormattedValue,
+      });
+      const messageMd = budgetInsightMetricTemplate({
+        metricLabel: `**${metricData.label}**`,
+        currentValue: `**${currentFormattedValue}**`,
+        diffLabel,
+        budgetValue: `**${budgetFormattedValue}**`,
+      });
+
+      insights.push([
+        sourceMetricId,
+        {
+          type,
+          message: {
+            text: messageText,
+            md: messageMd,
+          },
+          data: budgetInsightMetricData,
+        },
+      ]);
+    });
+
+    if (insights.length === 0) {
+      return null;
+    }
+
+    const type = resolveType(insights);
+    const message = getMessage(insights);
+
+    return {
+      insights: {
+        budgets: {
+          type,
+          message,
+          data: Object.fromEntries(insights),
+        },
       },
-    },
-    source: {
-      metricId: globalMetricId,
-      budgetInsight,
-    },
+    };
   };
-};

package/src/types.ts

@@ -0,0 +1,14 @@
+import * as constants from './constants';
+
+/** Insight v2 structure */
+export interface Insight {
+  type: constants.InsightType;
+  message: {
+    /** Insight message text format */
+    text: string;
+    /** Insight message markdown format */
+    md: string;
+  };
+  /** Insight specific data */
+  data: unknown;
+}

package/src/webpack/extract/{assets.js → assets.ts}

@@ -1,17 +1,46 @@
-import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
 
 import { getAssetName, normalizeChunkId } from '../utils';
 
 const IGNORE_PATTERN = /\.(map|LICENSE\.txt)$/;
 
-export const extractAssets = (webpackStats) => {
-  const webpackAssets = get(webpackStats, 'assets', []);
-  const webpackChunks = get(webpackStats, 'chunks', []);
-  const webpackEntrypoints = get(webpackStats, 'entrypoints', {});
+interface WebpackStatsAsset {
+  name: string;
+  size: number;
+}
 
-  const entryItems = Object.values(webpackEntrypoints)
-    .map(({ assets: items }) => items)
+interface WebpackStatsEntrypointAsset {
+  name: string;
+}
+
+interface WebpackStatsEntrypoint {
+  // Webpack 5 provides { name, size }
+  assets: Array<WebpackStatsEntrypointAsset | string>;
+}
+
+type WebpackStatsEntrypoints = Record<string, WebpackStatsEntrypoint>;
+
+interface WebpackStatsChunk {
+  id: string;
+  entry: boolean;
+  initial: boolean;
+  files: Array<string>;
+  names: Array<string>;
+}
+
+export const extractAssets = (webpackStats: any) => {
+  const webpackAssets: Array<WebpackStatsAsset> = webpackStats?.assets || [];
+  const webpackChunks: Array<WebpackStatsChunk> = webpackStats?.chunks || [];
+  const webpackEntrypoints: WebpackStatsEntrypoints = webpackStats?.entrypoints || {};
+
+  const entrypointsAssets = Object.values(webpackEntrypoints)
+    .map(({ assets: items }) => items.map((item) => {
+      if (typeof item === 'object') {
+        return item.name;
+      }
+
+      return item;
+    }))
     .flat();
 
   const initialItems = webpackChunks
@@ -43,7 +72,7 @@ export const extractAssets = (webpackStats) => {
       [normalizedName]: {
         name: baseName,
         value: size,
-        isEntry: entryItems.includes(name),
+        isEntry: entrypointsAssets.includes(name),
         isInitial: initialItems.includes(name),
         isChunk: Boolean(assetChunk),
         ...(assetChunk ? { chunkId: assetChunk.id } : {}),
@@ -57,10 +86,10 @@ export const extractAssets = (webpackStats) => {
     },
     ...(!isEmpty(normalizedChunks)
       ? {
-          meta: {
-            chunks: normalizedChunks.map(({ id, name }) => ({ id, name })),
-          },
-        }
+        meta: {
+          chunks: normalizedChunks.map(({ id, name }) => ({ id, name })),
+        },
+      }
       : {}),
   };
 };

package/src/webpack/metrics.ts

@@ -64,7 +64,7 @@ export const metrics = {
   },
   [MetricId.DuplicateCode]: {
     label: 'Duplicate Code',
-    description: 'The percentage of duplicate module total size',
+    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,

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";