@bundle-stats/ui 4.14.0-beta.0 → 4.14.0

package/src/hooks/rows-sort.ts

@@ -5,15 +5,9 @@ import orderBy from 'lodash/orderBy';
 import type { SortAction } from '../types';
 import { SORT } from '../constants';
 
-interface UseRowsSortParams {
-  rows: Array<unknown>;
-  initialField?: string;
-  initialDirection?: SortAction['direction'];
-  getCustomSort: (item: any) => Array<string | number | boolean>;
-}
-
 export const getSortFn =
-  (fieldPath: string, getCustomSort: UseRowsSortParams['getCustomSort']) => (item: unknown) => {
+  <TRow>(fieldPath: string, getCustomSort: UseRowsSortParams<TRow>['getCustomSort']) =>
+  (item: TRow) => {
     if (!fieldPath) {
       return getCustomSort(item);
     }
@@ -21,12 +15,25 @@ export const getSortFn =
     return get(item, fieldPath) || 0;
   };
 
-export const useRowsSort = ({
+interface UseRowsSortParams<TRow> {
+  rows: Array<TRow>;
+  initialField?: string;
+  initialDirection?: SortAction['direction'];
+  getCustomSort: (item: any) => Array<string | number | boolean>;
+}
+
+interface UseRowsSort<TRow> {
+  items: Array<TRow>;
+  sort: SortAction;
+  updateSort: (params: SortAction) => void;
+}
+
+export const useRowsSort = <TRow>({
   rows,
   initialField = 'runs[0].delta',
   initialDirection = 'desc',
   getCustomSort,
-}: UseRowsSortParams) => {
+}: UseRowsSortParams<TRow>): UseRowsSort<TRow> => {
   const [sort, updateSort] = useState({ field: initialField, direction: initialDirection });
 
   const orderedRows = useMemo(

package/src/types.d.ts

@@ -1,3 +1,6 @@
+import type { ReportMetricRow } from '@bundle-stats/utils';
+import type { Module } from '@bundle-stats/utils/types/webpack/types';
+
 export interface SortAction {
   field: string;
   direction: 'asc' | 'desc' | '';
@@ -15,3 +18,13 @@ type FilterGroupFieldData = {
 };
 
 type FilterFieldsData = Record<string, FilterFieldData | FilterGroupFieldData>;
+
+export type ReportMetricModuleRow = {
+  thirdParty: boolean;
+  duplicated: boolean;
+  fileType: string;
+} & Omit<ReportMetricRow, 'runs'> & {
+    runs: Array<
+      (Module & ReportMetricRun & { size: number; sizeDuplicate: number; sizeTotal: number }) | null
+    >;
+  };

package/types/components/bundle-modules/bundle-modules.d.ts

@@ -1,9 +1,8 @@
 import React from 'react';
 import { type Job } from '@bundle-stats/utils';
 import { WebpackChunk } from '@bundle-stats/utils';
-import { SortAction } from '../../types';
-import { ModuleMetric } from './bundle-modules.constants';
-import type { ReportMetricModuleRow } from './bundle-modules.types';
+import type { ReportMetricModuleRow, SortAction } from '../../types';
+import { ModuleSizeMetric } from '../../constants';
 interface BundleModulesProps extends React.ComponentProps<'div'> {
     jobs?: Array<Job>;
     items?: Array<ReportMetricModuleRow>;
@@ -21,8 +20,8 @@ interface BundleModulesProps extends React.ComponentProps<'div'> {
     entryId?: string;
     hideEntryInfo: () => void;
     showEntryInfo: (entryId: string) => void;
-    moduleMetric: ModuleMetric;
-    setModuleMetric: (newValue: ModuleMetric) => void;
+    moduleMetric: ModuleSizeMetric;
+    setModuleMetric: (newValue: ModuleSizeMetric) => void;
     customComponentLink: React.ElementType;
 }
 export declare const BundleModules: (props: BundleModulesProps) => React.JSX.Element;

package/types/components/bundle-modules/bundle-modules.utils.d.ts

@@ -1,8 +1,6 @@
-import { type WebpackChunk, type ReportMetricRow } from '@bundle-stats/utils';
-import { type Module } from '@bundle-stats/utils/lib-esm/webpack';
-import type { FilterFieldsData } from '../../types';
-import type { ReportMetricModuleRow } from './bundle-modules.types';
-export declare const addRowFlags: (row: Module & ReportMetricRow) => ReportMetricModuleRow;
+import type { WebpackChunk, ReportMetricRow } from '@bundle-stats/utils';
+import type { FilterFieldsData, ReportMetricModuleRow } from '../../types';
+export declare const addRowFlags: (row: ReportMetricRow) => ReportMetricModuleRow;
 export declare const getCustomSort: (item: ReportMetricRow) => (string | boolean)[];
 export declare const generateGetRowFilter: ({ chunkIds }: {
     chunkIds: Array<string>;

package/types/components/entry-info/entry-info.d.ts

@@ -1,29 +1,27 @@
+import type { ElementType, ReactNode } from 'react';
 import React from 'react';
-import { MetricRunInfo } from '@bundle-stats/utils';
+import type { ReportMetricRow } from '@bundle-stats/utils';
 interface EntryInfoMetaLinkProps {
-    as?: React.ElementType;
+    as?: ElementType;
 }
 export declare const EntryInfoMetaLink: (props: EntryInfoMetaLinkProps & React.ComponentProps<"a">) => React.JSX.Element;
 interface EntryInfoMetaProps {
     label: string;
-}
-interface EntryRun {
-    name: string;
+    tooltip?: ReactNode;
 }
 interface EntryInfoProps {
     itemTitle?: React.ReactNode;
-    item: {
-        label: string;
-        runs: Array<EntryRun & MetricRunInfo>;
-    };
+    item: ReportMetricRow;
     labels: Array<string>;
     runNameSelector?: string;
     runNameLabel?: string;
+    runSizeLabel?: string;
     tags?: React.ReactNode;
     onClose: () => void;
+    renderRunInfo?: (item: ReportMetricRow) => React.ReactNode;
 }
 export declare const EntryInfo: {
     (props: EntryInfoProps & React.ComponentProps<"div">): React.JSX.Element;
-    Meta: ({ className, label, children, }: EntryInfoMetaProps & React.ComponentProps<"p">) => React.JSX.Element;
+    Meta: ({ className, label, tooltip, children, }: EntryInfoMetaProps & React.ComponentProps<"p">) => React.JSX.Element;
 };
 export {};

package/types/components/module-info/module-info.d.ts

@@ -1,18 +1,12 @@
 import React from 'react';
-import { MetricRunInfo } from '@bundle-stats/utils';
-import { Module, MetaChunk } from '@bundle-stats/utils/types/webpack';
+import type { MetaChunk } from '@bundle-stats/utils/types/webpack';
+import type { ReportMetricModuleRow } from '../../types';
 interface ModuleInfoProps {
-    item: {
-        label: string;
-        changed?: boolean;
-        duplicated?: boolean;
-        thirdParty?: boolean;
-        fileType?: string;
-        runs: Array<Module & MetricRunInfo>;
-    };
+    item: ReportMetricModuleRow;
     chunks?: Array<MetaChunk>;
     chunkIds?: Array<string>;
     labels: Array<string>;
+    metricLabel?: string;
     customComponentLink?: React.ElementType;
     onClose: () => void;
 }

package/types/constants.d.ts

@@ -13,10 +13,29 @@ export declare const METRICS_WEBPACK_ASSETS: string[];
 export declare const METRICS_WEBPACK_MODULES: string[];
 export declare const METRICS_WEBPACK_PACKAGES: string[];
 export declare const SORT: {
-    ASC: string;
-    DESC: string;
+    readonly ASC: "asc";
+    readonly DESC: "desc";
 };
 export declare enum MetricsDisplayType {
     TABLE = "table",
     TREEMAP = "treemap"
 }
+export declare enum ModuleSizeMetric {
+    SIZE = "value",
+    DUPLICATE_SIZE = "duplicateSize",
+    TOTAL_SIZE = "totalSize"
+}
+export declare const ModuleSizeMetrics: {
+    value: {
+        label: string;
+        tooltip: string;
+    };
+    totalSize: {
+        label: string;
+        tooltip: string;
+    };
+    duplicateSize: {
+        label: string;
+        tooltip: string;
+    };
+};

package/types/hooks/rows-sort.d.ts

@@ -1,20 +1,15 @@
 import type { SortAction } from '../types';
-interface UseRowsSortParams {
-    rows: Array<unknown>;
+export declare const getSortFn: <TRow>(fieldPath: string, getCustomSort: UseRowsSortParams<TRow>["getCustomSort"]) => (item: TRow) => any;
+interface UseRowsSortParams<TRow> {
+    rows: Array<TRow>;
     initialField?: string;
     initialDirection?: SortAction['direction'];
     getCustomSort: (item: any) => Array<string | number | boolean>;
 }
-export declare const getSortFn: (fieldPath: string, getCustomSort: UseRowsSortParams["getCustomSort"]) => (item: unknown) => any;
-export declare const useRowsSort: ({ rows, initialField, initialDirection, getCustomSort, }: UseRowsSortParams) => {
-    sort: {
-        field: string;
-        direction: "" | "asc" | "desc";
-    };
-    updateSort: import("react").Dispatch<import("react").SetStateAction<{
-        field: string;
-        direction: "" | "asc" | "desc";
-    }>>;
-    items: unknown[];
-};
+interface UseRowsSort<TRow> {
+    items: Array<TRow>;
+    sort: SortAction;
+    updateSort: (params: SortAction) => void;
+}
+export declare const useRowsSort: <TRow>({ rows, initialField, initialDirection, getCustomSort, }: UseRowsSortParams<TRow>) => UseRowsSort<TRow>;
 export {};

package/lib/components/bundle-modules/bundle-modules.constants.js

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ModuleMetric = void 0;
-var ModuleMetric;
-(function (ModuleMetric) {
-    ModuleMetric["SIZE"] = "value";
-    ModuleMetric["DUPLICATE_SIZE"] = "duplicateSize";
-    ModuleMetric["TOTAL_SIZE"] = "totalSize";
-})(ModuleMetric || (exports.ModuleMetric = ModuleMetric = {}));
-//# sourceMappingURL=bundle-modules.constants.js.map

package/lib/components/bundle-modules/bundle-modules.constants.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"bundle-modules.constants.js","sourceRoot":"","sources":["../../../src/components/bundle-modules/bundle-modules.constants.ts"],"names":[],"mappings":";;;AAAA,IAAY,YAIX;AAJD,WAAY,YAAY;IACtB,8BAAc,CAAA;IACd,gDAAgC,CAAA;IAChC,wCAAwB,CAAA;AAC1B,CAAC,EAJW,YAAY,4BAAZ,YAAY,QAIvB"}

package/lib-esm/components/bundle-modules/bundle-modules.constants.js

@@ -1,7 +0,0 @@
-export var ModuleMetric;
-(function (ModuleMetric) {
-    ModuleMetric["SIZE"] = "value";
-    ModuleMetric["DUPLICATE_SIZE"] = "duplicateSize";
-    ModuleMetric["TOTAL_SIZE"] = "totalSize";
-})(ModuleMetric || (ModuleMetric = {}));
-//# sourceMappingURL=bundle-modules.constants.js.map

package/lib-esm/components/bundle-modules/bundle-modules.constants.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"bundle-modules.constants.js","sourceRoot":"","sources":["../../../src/components/bundle-modules/bundle-modules.constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,YAIX;AAJD,WAAY,YAAY;IACtB,8BAAc,CAAA;IACd,gDAAgC,CAAA;IAChC,wCAAwB,CAAA;AAC1B,CAAC,EAJW,YAAY,KAAZ,YAAY,QAIvB"}

package/src/components/bundle-modules/bundle-modules.constants.ts

@@ -1,5 +0,0 @@
-export enum ModuleMetric {
-  SIZE = 'value',
-  DUPLICATE_SIZE = 'duplicateSize',
-  TOTAL_SIZE = 'totalSize',
-}

package/src/components/bundle-modules/bundle-modules.types.d.ts

@@ -1,9 +0,0 @@
-import type { Module } from '@bundle-stats/utils/lib-esm/webpack/types';
-import type { ReportMetricRun } from '@bundle-stats/utils/types/report/types';
-
-export type ReportMetricModuleRow = {
-  thirdParty: boolean;
-  duplicated: boolean;
-  fileType: string;
-} & ReportMetricRun &
-  Module;

package/types/components/bundle-modules/bundle-modules.constants.d.ts

@@ -1,5 +0,0 @@
-export declare enum ModuleMetric {
-    SIZE = "value",
-    DUPLICATE_SIZE = "duplicateSize",
-    TOTAL_SIZE = "totalSize"
-}