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

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

@@ -0,0 +1,396 @@
+import type { ComponentProps, ElementType } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
+import cx from 'classnames';
+import { SECTIONS, COMPONENT, type Job, ReportMetricRow } from '@bundle-stats/utils';
+import escapeRegExp from 'lodash/escapeRegExp';
+import { WebpackChunk } from '@bundle-stats/utils';
+
+import type { ReportMetricModuleRow, SortAction } from '../../types';
+import config from '../../config.json';
+import I18N from '../../i18n';
+import {
+  MetricsDisplayGroupBy,
+  MetricsDisplayType,
+  ModuleSizeMetric,
+  ModuleSizeMetrics,
+} from '../../constants';
+import { Box } from '../../layout/box';
+import { FlexStack } from '../../layout/flex-stack';
+import { Stack } from '../../layout/stack';
+import { Button } from '../../ui/button';
+import { ControlGroup } from '../../ui/control-group';
+import { Dialog, useDialogState } from '../../ui/dialog';
+import { EmptySet } from '../../ui/empty-set';
+import { FileName } from '../../ui/file-name';
+import { Filters } from '../../ui/filters';
+import { InputSearch } from '../../ui/input-search';
+import { Tag } from '../../ui/tag';
+import { Table } from '../../ui/table';
+import { Toolbar } from '../../ui/toolbar';
+import { Tooltip } from '../../ui/tooltip';
+import { ComponentLink } from '../component-link';
+import { MetricsTable } from '../metrics-table';
+import { MetricsTableExport } from '../metrics-table-export';
+import { MetricsTableHeader } from '../metrics-table-header';
+import { MetricsTreemap, getTreemapNodes, getTreemapNodesGroupedByPath } from '../metrics-treemap';
+import { MetricsTableOptions } from '../metrics-table-options';
+import { MetricsDisplaySelector } from '../metrics-display-selector';
+import { MetricsTableTitle } from '../metrics-table-title';
+import { ModuleInfo } from '../module-info';
+import { generateFilterFieldsData } from './bundle-modules.utils';
+import * as I18N_MODULES from './bundle-modules.i18n';
+import css from './bundle-modules.module.css';
+import { useMetricsDisplayType } from '../../hooks/metrics-display-type';
+
+const DISPLAY_TYPE_GROUPS = {
+  [MetricsDisplayType.TREEMAP]: [MetricsDisplayGroupBy.FOLDER],
+};
+
+interface RowHeaderProps {
+  row: ReportMetricRow;
+  EntryComponentLink: ElementType;
+}
+
+const RowHeader = (props: RowHeaderProps) => {
+  const { row, EntryComponentLink } = props;
+
+  const moduleRow = row as ReportMetricModuleRow;
+
+  return (
+    <EntryComponentLink entryId={row.key} className={css.name}>
+      {moduleRow.duplicated && (
+        <Tag className={css.nameTagDuplicated} size="small" kind={Tag.KINDS.DANGER} />
+      )}
+      <FileName className={css.nameText} name={moduleRow.label} />
+    </EntryComponentLink>
+  );
+};
+
+interface ViewMetricsTreemapProps {
+  metricsTableTitle: React.ReactNode;
+  jobs: Array<any>;
+  items: Array<any>;
+  displayType: { value: MetricsDisplayType; groupBy?: string };
+  emptyMessage: React.ReactNode;
+  showEntryInfo: React.ComponentProps<typeof MetricsTreemap>['onItemClick'];
+  updateSearch: (newSerarch: string) => void;
+  search: string;
+}
+
+const ViewMetricsTreemap = (props: ViewMetricsTreemapProps) => {
+  const {
+    metricsTableTitle,
+    jobs,
+    items,
+    displayType,
+    emptyMessage,
+    showEntryInfo,
+    updateSearch,
+    search,
+  } = props;
+
+  // Get treenodes based on group
+  const treeNodes = useMemo(() => {
+    if (displayType.groupBy === 'folder') {
+      return getTreemapNodesGroupedByPath(items);
+    }
+
+    return getTreemapNodes(items);
+  }, [items, displayType]);
+
+  // Search based on the group path on group title click
+  const onGroupClick = useCallback(
+    (groupPath: string) => {
+      // Clear seach when groupPath is emty (root)
+      if (groupPath === '') {
+        updateSearch('');
+        return;
+      }
+      // Search by group path
+      // 1. use `^` to match only the string beggining
+      // 2. add `/` suffix to exactly match the directory
+      const newSearch = `^${escapeRegExp(groupPath)}/`;
+
+      // Reset search when toggling the same groupPath
+      if (newSearch === search) {
+        updateSearch('');
+        return;
+      }
+
+      updateSearch(newSearch);
+    },
+    [updateSearch, search],
+  );
+
+  return (
+    <>
+      <Table compact>
+        <MetricsTableHeader metricTitle={metricsTableTitle} showSum jobs={jobs} rows={items} />
+      </Table>
+      <MetricsTreemap
+        treeNodes={treeNodes}
+        nested={Boolean(displayType.groupBy)}
+        emptyMessage={emptyMessage}
+        onItemClick={showEntryInfo}
+        onGroupClick={onGroupClick}
+      />
+    </>
+  );
+};
+
+interface BundleModulesProps extends React.ComponentProps<'div'> {
+  jobs?: Array<Job>;
+  items?: Array<ReportMetricModuleRow>;
+  allItems?: Array<ReportMetricModuleRow>;
+  chunks?: Array<WebpackChunk>;
+
+  totalRowCount: number;
+
+  updateFilters: () => void;
+  resetFilters: () => void;
+  resetAllFilters: () => void;
+  filters: Record<string, boolean>;
+
+  sort: any;
+  updateSort: ({ field, direction }: SortAction) => void;
+
+  search: string;
+  updateSearch: (newSerarch: string) => void;
+
+  entryId?: string;
+  hideEntryInfo: () => void;
+  showEntryInfo: (entryId: string) => void;
+
+  moduleMetric: ModuleSizeMetric;
+  setModuleMetric: (newValue: ModuleSizeMetric) => void;
+
+  customComponentLink: React.ElementType;
+}
+
+export const BundleModules = (props: BundleModulesProps) => {
+  const {
+    className = '',
+    jobs = [],
+    items = [],
+    allItems = [],
+    chunks = [],
+    totalRowCount = 0,
+    updateFilters,
+    resetFilters,
+    resetAllFilters,
+    filters,
+    sort,
+    updateSort,
+    search,
+    updateSearch,
+    entryId,
+    hideEntryInfo,
+    moduleMetric,
+    setModuleMetric,
+    showEntryInfo,
+    customComponentLink: CustomComponentLink = ComponentLink,
+  } = props;
+
+  const rootClassName = cx(css.root, className);
+  const jobLabels = jobs?.map((job) => job?.label);
+
+  const [displayType, setDisplayType] = useMetricsDisplayType(DISPLAY_TYPE_GROUPS);
+
+  const filterFieldsData = useMemo(
+    () => generateFilterFieldsData({ filters, chunks, compareMode: jobs.length > 1 }),
+    [jobs, filters, chunks],
+  );
+
+  const EntryComponentLink = useCallback(
+    ({
+      entryId: moduleEntryId,
+      ...moduleNameRestProps
+    }: { entryId: string } & ComponentProps<typeof CustomComponentLink>) => (
+      <CustomComponentLink
+        section={SECTIONS.MODULES}
+        params={{
+          [COMPONENT.BUNDLE_MODULES]: {
+            filters,
+            search,
+            metric: moduleMetric,
+            entryId: moduleEntryId,
+            sortBy: sort.field,
+            direction: sort.direction,
+          },
+        }}
+        {...moduleNameRestProps}
+      />
+    ),
+    [CustomComponentLink, filters, search, sort, moduleMetric],
+  );
+
+  const metricsTableTitle = useMemo(
+    () => (
+      <MetricsTableTitle
+        title={I18N.MODULES}
+        info={`${items.length}/${totalRowCount}`}
+        popoverInfo={I18N.MODULES_INFO}
+        popoverHref={config.documentation.modules}
+      />
+    ),
+    [items, totalRowCount],
+  );
+
+  const renderRowHeader = useCallback(
+    (row: ReportMetricRow) => <RowHeader row={row} EntryComponentLink={EntryComponentLink} />,
+    [EntryComponentLink],
+  );
+
+  const emptyMessage = useMemo(
+    () => (
+      <EmptySet
+        resources="modules"
+        filtered={totalRowCount !== 0}
+        handleResetFilters={resetFilters}
+        handleViewAll={resetAllFilters}
+      />
+    ),
+    [totalRowCount, resetFilters, resetAllFilters],
+  );
+
+  const entryItem = useMemo(() => {
+    if (!entryId) {
+      return null;
+    }
+
+    return allItems.find(({ key }) => key === entryId);
+  }, [allItems, entryId]);
+
+  const exportDialog = useDialogState();
+  const [exportSourceType, setExportSourceType] = useState<string | undefined>(undefined);
+
+  const handleExportClick = useCallback((sourceType: string) => {
+    setExportSourceType(sourceType);
+    exportDialog.toggle();
+  }, []);
+
+  return (
+    <>
+      <Stack space="xsmall" as="section" className={rootClassName}>
+        <Toolbar
+          className={css.toolbar}
+          renderActions={({ actionClassName }) => (
+            <FlexStack space="xxsmall" className={cx(css.dropdown, actionClassName)}>
+              <MetricsDisplaySelector
+                onSelect={setDisplayType}
+                value={displayType.value}
+                groupBy={displayType.groupBy}
+                groups={DISPLAY_TYPE_GROUPS}
+              />
+              <MetricsTableOptions
+                onViewAllClick={resetAllFilters}
+                onResetClick={resetFilters}
+                onExportClick={handleExportClick}
+              />
+            </FlexStack>
+          )}
+        >
+          <FlexStack space="xxsmall">
+            <InputSearch
+              className={css.toolbarSearch}
+              placeholder={I18N_MODULES.SEARCH}
+              defaultValue={search}
+              onChange={updateSearch}
+            />
+            <Filters
+              className={css.tableDropdown}
+              filters={filterFieldsData}
+              onChange={updateFilters}
+            />
+          </FlexStack>
+        </Toolbar>
+        <Box outline as="main">
+          <Box padding={['xsmall', 'small']} className={css.metricSelector}>
+            <ControlGroup as="nav">
+              <Button
+                outline
+                active={moduleMetric === ModuleSizeMetric.TOTAL_SIZE}
+                size="small"
+                type="button"
+                onClick={() => setModuleMetric(ModuleSizeMetric.TOTAL_SIZE)}
+              >
+                <Tooltip title={ModuleSizeMetrics[ModuleSizeMetric.TOTAL_SIZE].tooltip}>
+                  {ModuleSizeMetrics[ModuleSizeMetric.TOTAL_SIZE].label}
+                </Tooltip>
+              </Button>
+              <Button
+                outline
+                active={moduleMetric === ModuleSizeMetric.DUPLICATE_SIZE}
+                size="small"
+                type="button"
+                onClick={() => setModuleMetric(ModuleSizeMetric.DUPLICATE_SIZE)}
+              >
+                <Tooltip title={ModuleSizeMetrics[ModuleSizeMetric.DUPLICATE_SIZE].tooltip}>
+                  {ModuleSizeMetrics[ModuleSizeMetric.DUPLICATE_SIZE].label}
+                </Tooltip>
+              </Button>
+              <Button
+                outline
+                active={moduleMetric === ModuleSizeMetric.SIZE}
+                size="small"
+                type="button"
+                onClick={() => setModuleMetric(ModuleSizeMetric.SIZE)}
+              >
+                <Tooltip title={ModuleSizeMetrics[ModuleSizeMetric.SIZE].tooltip}>
+                  {ModuleSizeMetrics[ModuleSizeMetric.SIZE].label}
+                </Tooltip>
+              </Button>
+            </ControlGroup>
+          </Box>
+          {displayType.value === MetricsDisplayType.TABLE && (
+            <MetricsTable
+              className={css.table}
+              items={items}
+              runs={jobs}
+              renderRowHeader={renderRowHeader}
+              emptyMessage={emptyMessage}
+              showHeaderSum
+              title={metricsTableTitle}
+              sort={sort}
+              updateSort={updateSort}
+            />
+          )}
+          {displayType.value === MetricsDisplayType.TREEMAP && (
+            <ViewMetricsTreemap
+              metricsTableTitle={metricsTableTitle}
+              jobs={jobs}
+              items={items}
+              displayType={displayType}
+              emptyMessage={emptyMessage}
+              showEntryInfo={showEntryInfo}
+              updateSearch={updateSearch}
+              search={search}
+            />
+          )}
+        </Box>
+      </Stack>
+      {entryItem && (
+        <ModuleInfo
+          className={css.moduleInfo}
+          item={entryItem}
+          chunks={chunks}
+          chunkIds={chunks?.map(({ id }) => id)}
+          labels={jobLabels}
+          metricLabel={ModuleSizeMetrics[moduleMetric].label}
+          customComponentLink={CustomComponentLink}
+          onClose={hideEntryInfo}
+        />
+      )}
+
+      <Dialog title={I18N.EXPORT} width="wide" state={exportDialog}>
+        {exportDialog.open && (
+          <MetricsTableExport
+            items={items}
+            initialSourceType={exportSourceType}
+            download="bundle-stats--modules"
+          />
+        )}
+      </Dialog>
+    </>
+  );
+};

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;
+};