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

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

@@ -0,0 +1,220 @@
+import intersection from 'lodash/intersection';
+import get from 'lodash/get';
+import isEmpty from 'lodash/isEmpty';
+import union from 'lodash/union';
+import orderBy from 'lodash/orderBy';
+import type {
+  WebpackChunk,
+  MetricRunInfo,
+  ReportMetricRow,
+  ReportMetricRun,
+} from '@bundle-stats/utils';
+import {
+  FILE_TYPE_LABELS,
+  MODULE_CHUNK,
+  MODULE_FILTERS,
+  MODULE_FILE_TYPE,
+  MODULE_SOURCE_TYPE,
+  MODULE_SOURCE_FILE_TYPES,
+  getModuleSourceFileType,
+  getModuleChunkFilters,
+  getModuleSourceTypeFilters,
+  getModuleFileTypeFilters,
+} from '@bundle-stats/utils';
+import type { Module } from '@bundle-stats/utils/types/webpack';
+import { MODULE_PATH_PACKAGES } from '@bundle-stats/utils/lib-esm/webpack';
+
+import type { FilterFieldsData, FilterGroupFieldData, ReportMetricModuleRow } from '../../types';
+import * as I18N from './bundle-modules.i18n';
+
+export const addRowFlags = (row: ReportMetricRow): ReportMetricModuleRow => {
+  const { key, runs } = row;
+
+  // @NOTE Assign instead destructuring for perf reasons
+  const moduleRow = row as any as ReportMetricModuleRow;
+
+  // eslint-disable-next-line no-param-reassign
+  moduleRow.thirdParty = Boolean(key.match(MODULE_PATH_PACKAGES));
+  // Mark metric row as duplicated when at least one run is duplicated
+  // eslint-disable-next-line no-param-reassign
+  moduleRow.duplicated = Boolean(
+    runs.find((run) => (run as Module & ReportMetricRun)?.duplicated === true),
+  );
+  // eslint-disable-next-line no-param-reassign
+  moduleRow.fileType = getModuleSourceFileType(row.key);
+
+  // eslint-disable-next-line no-param-reassign
+  moduleRow.runs = row.runs.map((run) => {
+    if (!run) {
+      return run;
+    }
+
+    const moduleRun = run as Module & ReportMetricRun & { originalValue: number };
+    const chunkCount = moduleRun.chunkIds?.length || 0;
+
+    return {
+      ...moduleRun,
+      size: moduleRun.originalValue,
+      sizeDuplicate: chunkCount > 1 ? (chunkCount - 1) * moduleRun.originalValue : 0,
+      sizeTotal: chunkCount * moduleRun.originalValue,
+    };
+  });
+
+  return moduleRow;
+};
+
+export const getCustomSort = (item: ReportMetricRow) => [!item.changed, item.key];
+
+/* eslint-disable prettier/prettier */
+export const generateGetRowFilter =
+  ({ chunkIds }: { chunkIds: Array<string> }) => (filters: Record<string, unknown>) => {
+    // eslint-disable-line prettier/prettier
+    // List of chunkIds with filter value set to `true`
+    const checkedChunkIds: Array<string> = [];
+
+    chunkIds.forEach((chunkId) => {
+      if (filters[`${MODULE_CHUNK}.${chunkId}`]) {
+        checkedChunkIds.push(chunkId);
+      }
+    });
+
+    const hasChunkFilters = checkedChunkIds.length !== chunkIds.length;
+
+    return (row: ReportMetricModuleRow) => {
+      // Skip not changed rows
+      if (filters[MODULE_FILTERS.CHANGED] && !row.changed) {
+        return false;
+      }
+
+      // Skip not duplicated rows
+      if (filters[MODULE_FILTERS.DUPLICATED] && !row.duplicated) {
+        return false;
+      }
+
+      // Skip not matching source type
+      if (
+        !(
+          (filters[`${MODULE_SOURCE_TYPE}.${MODULE_FILTERS.FIRST_PARTY}`] &&
+            row.thirdParty === false) ||
+          (filters[`${MODULE_SOURCE_TYPE}.${MODULE_FILTERS.THIRD_PARTY}`] &&
+            row.thirdParty === true)
+        )
+      ) {
+        return false;
+      }
+
+      // Skip not matching source file types
+      if (!filters[`${MODULE_FILE_TYPE}.${row.fileType}`]) {
+        return false;
+      }
+
+      // Filter if any of the chunkIds are checked
+      if (hasChunkFilters) {
+        const rowRunsChunkIds =
+          row?.runs?.map((run) => (run as Module & MetricRunInfo)?.chunkIds || []) || [];
+        const rowChunkIds = union(...rowRunsChunkIds);
+        const matchedChunkIds = intersection(rowChunkIds, checkedChunkIds);
+        return matchedChunkIds.length > 0;
+      }
+
+      return true;
+    };
+  };
+/* eslint-enable prettier/prettier */
+
+export const generateFilters = (chunkIds: Array<string>, multipleJobs: boolean) => {
+  const allEntriesFilters = {
+    [MODULE_FILTERS.CHANGED]: false,
+    [MODULE_FILTERS.DUPLICATED]: false,
+    ...getModuleSourceTypeFilters(true),
+    ...getModuleChunkFilters(chunkIds, true),
+    ...getModuleFileTypeFilters(true),
+  };
+
+  return {
+    defaultFilters: {
+      ...allEntriesFilters,
+      // By default, set 'changed' filter to `true` only when we have multiple jobs
+      [MODULE_FILTERS.CHANGED]: multipleJobs,
+    },
+    allEntriesFilters,
+  };
+};
+
+interface GetFiltersFormDataParams {
+  /**
+   * Filter values
+   */
+  filters: Record<string, boolean>;
+  /**
+   * Chunk data
+   */
+  chunks: Array<WebpackChunk>;
+  /**
+   * Compare mode
+   */
+  compareMode: boolean;
+}
+
+/**
+ * Generate filter fields data
+ * @NOTE use assignments instead of Object.assign/destructuring for performance reson
+ */
+export const generateFilterFieldsData = (params: GetFiltersFormDataParams): FilterFieldsData => {
+  const { filters, chunks, compareMode } = params;
+
+  const result: FilterFieldsData = {
+    [MODULE_FILTERS.CHANGED]: {
+      label: I18N.CHANGED,
+      defaultValue: filters[MODULE_FILTERS.CHANGED],
+      disabled: !compareMode,
+    },
+    [MODULE_FILTERS.DUPLICATED]: {
+      label: I18N.DUPLICATE,
+      defaultValue: filters[MODULE_FILTERS.DUPLICATED],
+    },
+  };
+
+  result[MODULE_SOURCE_TYPE] = {
+    label: I18N.SOURCE,
+    children: [
+      {
+        key: MODULE_FILTERS.FIRST_PARTY,
+        label: I18N.SOURCE_FIRST_PARTY,
+        defaultValue: get(filters, `${MODULE_SOURCE_TYPE}.${MODULE_FILTERS.FIRST_PARTY}`, true),
+      },
+      {
+        key: MODULE_FILTERS.THIRD_PARTY,
+        label: I18N.SOURCE_THIRD_PARTY,
+        defaultValue: get(filters, `${MODULE_SOURCE_TYPE}.${MODULE_FILTERS.THIRD_PARTY}`, true),
+      },
+    ],
+  } as FilterGroupFieldData;
+
+  if (!isEmpty(chunks)) {
+    const chunksFilter = { label: I18N.CHUNK, children: [] } as FilterGroupFieldData;
+    const chunksOrderedByName = orderBy(chunks, 'name');
+    chunksOrderedByName.forEach((chunk) => {
+      chunksFilter.children.push({
+        key: chunk.id,
+        label: chunk.name,
+        defaultValue: filters[`${MODULE_CHUNK}.${chunk.id}`] ?? true,
+      });
+    });
+
+    result[MODULE_CHUNK] = chunksFilter;
+  }
+
+  const moduleFileTypeFilter = { label: I18N.FILE_TYPE, children: [] } as FilterGroupFieldData;
+  MODULE_SOURCE_FILE_TYPES.forEach((fileType: string) => {
+    moduleFileTypeFilter.children.push({
+      key: fileType,
+      label: FILE_TYPE_LABELS[fileType as keyof typeof FILE_TYPE_LABELS],
+      defaultValue: get(filters, `${MODULE_FILE_TYPE}.${fileType}`, true),
+    });
+  });
+
+  result[MODULE_FILE_TYPE] = moduleFileTypeFilter;
+
+  return result;
+};

package/src/components/bundle-modules/index.tsx

@@ -0,0 +1,148 @@
+import React, { useCallback, useMemo } from 'react';
+import type { Job } from '@bundle-stats/utils';
+// @ts-ignore
+import * as webpack from '@bundle-stats/utils/lib-esm/webpack';
+
+import { ModuleSizeMetric } from '../../constants';
+import type { ReportMetricModuleRow, SortAction } from '../../types';
+import { getJobsChunksData } from '../../utils/jobs';
+import { useRowsFilter } from '../../hooks/rows-filter';
+import { useRowsSort } from '../../hooks/rows-sort';
+import { useSearchParams } from '../../hooks/search-params';
+import { useEntryInfo } from '../../hooks/entry-info';
+import { BundleModules as BaseComponent } from './bundle-modules';
+import {
+  addRowFlags,
+  generateGetRowFilter,
+  generateFilters,
+  getCustomSort,
+} from './bundle-modules.utils';
+
+interface UseMetricParams {
+  metric?: string;
+  setState: ({ metric }: { metric: ModuleSizeMetric }) => void;
+}
+
+function useModuleMetric(
+  params: UseMetricParams,
+): [ModuleSizeMetric, (value: ModuleSizeMetric) => void] {
+  const { metric, setState } = params;
+
+  const moduleMetric: ModuleSizeMetric = useMemo(() => {
+    if (Object.values(ModuleSizeMetric).includes(metric as ModuleSizeMetric)) {
+      return metric as ModuleSizeMetric;
+    }
+
+    return ModuleSizeMetric.TOTAL_SIZE;
+  }, [metric]);
+
+  const setModuleMetric = useCallback(
+    (newModuleMetric: ModuleSizeMetric) => {
+      if (newModuleMetric !== metric) {
+        setState({ metric: newModuleMetric });
+      }
+    },
+    [metric, setState],
+  );
+
+  return useMemo(() => [moduleMetric, setModuleMetric], [moduleMetric, setModuleMetric]);
+}
+
+interface BundleModulesProps
+  extends Omit<
+    React.ComponentProps<typeof BaseComponent>,
+    | 'jobs'
+    | 'items'
+    | 'chunks'
+    | 'updateFilters'
+    | 'resetFilters'
+    | 'resetAllFilters'
+    | 'filters'
+    | 'sort'
+    | 'updateSort'
+    | 'search'
+    | 'updateSearch'
+    | 'allItems'
+    | 'totalRowCount'
+    | 'hideEntryInfo'
+    | 'showEntryInfo'
+  > {
+  jobs: Array<Job>;
+  filters: Record<string, boolean>;
+  search?: string;
+  metric?: string;
+  setState: (params: any) => void;
+  sortBy?: string;
+  direction?: SortAction['direction'];
+}
+
+export const BundleModules = (props: BundleModulesProps) => {
+  const { jobs, filters, search, setState, sortBy, direction, metric = '', ...restProps } = props;
+
+  const [moduleMetric, setModuleMetric] = useModuleMetric({ metric, setState });
+
+  const { chunks, chunkIds } = useMemo(() => getJobsChunksData(jobs), [jobs]);
+
+  const { defaultFilters, allEntriesFilters } = useMemo(
+    () => generateFilters(chunkIds, jobs.length > 1),
+    [chunkIds, jobs],
+  );
+
+  const searchParams = useSearchParams({
+    search,
+    filters,
+    defaultFilters,
+    allEntriesFilters,
+    setState,
+  });
+
+  const { rows, totalRowCount } = useMemo(() => {
+    let result: Array<ReportMetricModuleRow> = [];
+
+    if (moduleMetric === ModuleSizeMetric.SIZE) {
+      result = webpack.compareBySection.modules(jobs, [addRowFlags]);
+    } else if (moduleMetric === ModuleSizeMetric.DUPLICATE_SIZE) {
+      result = webpack.compareModuleDuplicateSize(jobs, [addRowFlags]);
+    } else {
+      result = webpack.compareModuleTotalSize(jobs, [addRowFlags]);
+    }
+
+    return {
+      rows: result,
+      totalRowCount: result.length,
+    };
+  }, [jobs, moduleMetric]);
+
+  const filteredRows = useRowsFilter({
+    rows,
+    searchPattern: searchParams.searchPattern,
+    filters: searchParams.filters,
+    getRowFilter: generateGetRowFilter({ chunkIds }),
+  }) as Array<ReportMetricModuleRow>;
+
+  const sortParams = useRowsSort({
+    rows: filteredRows,
+    initialField: sortBy,
+    initialDirection: direction,
+    getCustomSort,
+    setQueryState: setState,
+  });
+
+  const [hideEntryInfo, showEntryInfo] = useEntryInfo({ setState });
+
+  return (
+    <BaseComponent
+      jobs={jobs}
+      chunks={chunks}
+      {...restProps}
+      {...searchParams}
+      {...sortParams}
+      allItems={rows}
+      totalRowCount={totalRowCount}
+      hideEntryInfo={hideEntryInfo}
+      moduleMetric={moduleMetric}
+      setModuleMetric={setModuleMetric}
+      showEntryInfo={showEntryInfo}
+    />
+  );
+};

package/src/components/bundle-packages/bundle-packages.i18n.ts

@@ -0,0 +1 @@
+export const SEARCH_PLACEHOLDER = 'Search by package name';