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

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

@@ -0,0 +1,276 @@
+import get from 'lodash/get';
+import intersection from 'lodash/intersection';
+import isEmpty from 'lodash/isEmpty';
+import orderBy from 'lodash/orderBy';
+import type { ReportMetricRow, WebpackChunk } from '@bundle-stats/utils';
+import type { AssetMetricRun } from '@bundle-stats/utils/types/webpack';
+import {
+  ASSET_CHUNK,
+  ASSET_ENTRY_TYPE,
+  ASSET_FILE_TYPE,
+  ASSET_FILTERS,
+  FILE_TYPE_LABELS,
+  getFileType,
+} from '@bundle-stats/utils';
+
+import type {
+  FilterFieldsData,
+  ReportMetricAssetRow,
+  ReportMetricAssetRowMetaStatus,
+  FilterGroupFieldData,
+} from '../../types';
+import * as I18N from './bundle-assets.i18n';
+
+const NO_CHUNK_FILTER = 'NO_CHUNK';
+
+/**
+ * Check if the asset cache is not predictive
+ */
+export const getIsNotPredictive = (row: ReportMetricRow): boolean => {
+  const { key, runs } = row;
+
+  return runs.reduce((agg, run, index) => {
+    if (agg) {
+      return agg;
+    }
+
+    if (index + 1 === runs.length) {
+      return agg;
+    }
+
+    const preRun = runs[index + 1];
+
+    if (
+      run &&
+      preRun &&
+      key !== run.name &&
+      run.name === preRun.name &&
+      run.value !== preRun.value
+    ) {
+      return true;
+    }
+
+    return agg;
+  }, false);
+};
+
+/**
+ * Return asset meta status
+ */
+export const getAssetMetaStatus = (
+  values: Array<boolean | undefined>,
+): ReportMetricAssetRowMetaStatus | boolean => {
+  if (!values.includes(true)) {
+    return false;
+  }
+
+  // filter empty runs
+  const metaValues = values.filter((value) => typeof value !== 'undefined');
+
+  const current = metaValues[0];
+  const metaValuesLength = metaValues.length;
+
+  if (metaValuesLength === 1) {
+    return Boolean(current);
+  }
+
+  const baseline = metaValues[metaValuesLength - 1];
+
+  if (current && !baseline) {
+    return 'added';
+  }
+
+  if (!current && baseline) {
+    return 'removed';
+  }
+
+  return true;
+};
+
+/**
+ * Add asset row flags
+ */
+export const addMetricReportAssetRowData = (row: ReportMetricRow): ReportMetricAssetRow => {
+  const { changed, runs } = row;
+
+  // Collect meta for each run
+  const runsEntry: Array<boolean | undefined> = [];
+  const runsInitial: Array<boolean | undefined> = [];
+  const runsChunk: Array<boolean | undefined> = [];
+
+  (runs as Array<AssetMetricRun | null>).forEach((run) => {
+    runsEntry.push(run?.isEntry);
+    runsInitial.push(run?.isInitial);
+    runsChunk.push(run?.isChunk);
+  });
+
+  const isEntry = getAssetMetaStatus(runsEntry);
+  const isInitial = getAssetMetaStatus(runsInitial);
+  const isChunk = getAssetMetaStatus(runsChunk);
+  const isAsset = !(isEntry || isInitial || isChunk);
+  const isNotPredictive = getIsNotPredictive(row);
+  const fileType = getFileType(row.key);
+
+  // Flag asset as changed if name and value are identical, if one of the meta tags is changed
+  const assetChanged =
+    changed ||
+    typeof isEntry !== 'boolean' ||
+    typeof isInitial !== 'boolean' ||
+    typeof isChunk !== 'boolean';
+
+  return {
+    ...row,
+    changed: assetChanged,
+    isEntry,
+    isInitial,
+    isChunk,
+    isAsset,
+    isNotPredictive,
+    fileType,
+  };
+};
+
+type GenerateGetRowFilterOptions = {
+  chunkIds: Array<string>;
+};
+
+export const getCustomSort = (item: ReportMetricAssetRow): Array<boolean | string> => [
+  !item.isNotPredictive,
+  !item.changed,
+  !item.isInitial,
+  !item.isEntry,
+  !item.isChunk,
+  item.key,
+];
+
+/* eslint-disable prettier/prettier */
+const getFileTypeFilters = (filters: Record<string, unknown>): FilterGroupFieldData['children'] => Object.entries(FILE_TYPE_LABELS).map(([key, label]) => ({
+  key,
+  label,
+  defaultValue: get(filters, `${ASSET_FILE_TYPE}.${key}`, true) as boolean,
+}));
+
+type GetFiltersOptions = {
+  compareMode: boolean;
+  filters: Record<string, boolean>;
+  chunks: Array<WebpackChunk>;
+};
+
+export const getFilters = ({
+  compareMode,
+  filters,
+  chunks,
+}: GetFiltersOptions): FilterFieldsData => {
+  const result: FilterFieldsData = {
+    [ASSET_FILTERS.CHANGED]: {
+      label: I18N.CHANGED,
+      defaultValue: filters[ASSET_FILTERS.CHANGED],
+      disabled: !compareMode,
+    },
+  };
+
+  if (!isEmpty(chunks)) {
+    const chunksFilter: FilterGroupFieldData = {
+      label: I18N.CHUNKS,
+      children: [
+        {
+          key: NO_CHUNK_FILTER,
+          label: I18N.NO_CHUNK,
+          defaultValue: filters[`${ASSET_CHUNK}.${NO_CHUNK_FILTER}`] ?? true,
+        },
+      ],
+    };
+
+    const chunksOrderedByName = orderBy(chunks, 'name');
+
+    chunksOrderedByName.forEach((chunk) => {
+      chunksFilter.children.push({
+        key: chunk.id,
+        label: chunk.name,
+        defaultValue: filters[`${ASSET_CHUNK}.${chunk.id}`] ?? true,
+      });
+    });
+
+    result[ASSET_CHUNK] = chunksFilter;
+  }
+
+  result[ASSET_ENTRY_TYPE] = {
+    label: I18N.ASSET_TYPE,
+    children: [
+      {
+        key: ASSET_FILTERS.ENTRY,
+        label: I18N.ENTRY,
+        defaultValue: get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.ENTRY}`, true),
+      },
+      {
+        key: ASSET_FILTERS.INITIAL,
+        label: I18N.INITIAL,
+        defaultValue: get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.INITIAL}`, true),
+      },
+      {
+        key: ASSET_FILTERS.CHUNK,
+        label: I18N.CHUNK,
+        defaultValue: get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.CHUNK}`, true),
+      },
+      {
+        key: ASSET_FILTERS.OTHER,
+        label: I18N.OTHER,
+        defaultValue: get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.OTHER}`, true),
+      },
+    ],
+  };
+
+  result[ASSET_FILE_TYPE] = {
+    label: I18N.FILE_TYPE,
+    children: getFileTypeFilters(filters),
+  };
+
+  return result;
+};
+
+/* eslint-disable prettier/prettier */
+export const generateGetRowFilter =
+  ({ chunkIds }: GenerateGetRowFilterOptions) => (filters: Record<string, unknown>) => {
+    // List of chunkIds with filter value set to `true`
+    const checkedChunkIds: Array<string> = [];
+    // List of chunks ids, including the NO_CHUNK
+    const filtersChunkIds = [NO_CHUNK_FILTER, ...chunkIds];
+
+    filtersChunkIds.forEach((chunkId) => {
+      if (filters[`${ASSET_CHUNK}.${chunkId}`]) {
+        checkedChunkIds.push(chunkId);
+      }
+    });
+
+    const hasChunkFilters =
+      checkedChunkIds.length > 0 && checkedChunkIds.length !== filtersChunkIds.length;
+
+    return (item: ReportMetricAssetRow) => {
+      if (filters[ASSET_FILTERS.CHANGED] && !item.changed) {
+        return false;
+      }
+
+      if (
+        !(
+          (filters[`${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.ENTRY}`] && item.isEntry) ||
+          (filters[`${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.INITIAL}`] && item.isInitial) ||
+          (filters[`${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.CHUNK}`] && item.isChunk) ||
+          (filters[`${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.OTHER}`] && item.isAsset)
+        )
+      ) {
+        return false;
+      }
+
+      if (!filters[`${ASSET_FILE_TYPE}.${item.fileType}`]) {
+        return false;
+      }
+
+      // Filter if any of the chunkIds are checked
+      if (hasChunkFilters) {
+        const rowRunsChunkIds = item?.runs?.map((run) => run?.chunkId || NO_CHUNK_FILTER) || [];
+        return intersection(rowRunsChunkIds, checkedChunkIds).length > 0;
+      }
+
+      return true;
+    };
+  };

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

@@ -0,0 +1,112 @@
+import React, { useMemo } from 'react';
+import * as webpack from '@bundle-stats/utils/lib-esm/webpack';
+import type { Job } from '@bundle-stats/utils';
+import { ASSET_FILTERS } from '@bundle-stats/utils';
+import {
+  getAssetEntryTypeFilters,
+  getAssetFileTypeFilters,
+} from '@bundle-stats/utils/lib-esm/utils/component-links';
+
+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 { getJobsChunksData } from '../../utils/jobs';
+import { BundleAssets as BundleAssetsComponent } from './bundle-assets';
+import {
+  addMetricReportAssetRowData,
+  generateGetRowFilter,
+  getCustomSort,
+} from './bundle-assets.utils';
+import { ReportMetricAssetRow } from '../../types';
+
+export type BundleAssetsProps = {
+  jobs: Array<Job>;
+  filters?: Record<string, boolean>;
+  search?: string;
+  sortBy?: string;
+  direction?: string;
+  setState: () => void;
+};
+
+export const BundleAssets = (props: BundleAssetsProps) => {
+  const {
+    jobs,
+    filters = undefined,
+    search = undefined,
+    sortBy = undefined,
+    direction = undefined,
+    setState,
+    ...restProps
+  } = props;
+
+  // Get chunks data
+  const { chunks, chunkIds } = useMemo(() => getJobsChunksData(jobs), [jobs]);
+
+  // Get filters
+  const { defaultFilters, allEntriesFilters } = useMemo(
+    () => ({
+      defaultFilters: {
+        [ASSET_FILTERS.CHANGED]: jobs?.length > 1,
+        ...getAssetEntryTypeFilters(true),
+        ...getAssetFileTypeFilters(true),
+      },
+      allEntriesFilters: {
+        [ASSET_FILTERS.CHANGED]: false,
+        ...getAssetEntryTypeFilters(true),
+        ...getAssetFileTypeFilters(true),
+      },
+    }),
+    [jobs],
+  );
+
+  // Get search params data
+  const searchProps = useSearchParams({
+    search,
+    filters,
+    defaultFilters,
+    allEntriesFilters,
+    setState,
+  });
+
+  // Get metric rows
+  const { rows, totalRowCount } = useMemo(() => {
+    const result = webpack.compareBySection.assets(jobs, [addMetricReportAssetRowData]);
+    return { rows: result, totalRowCount: result.length };
+  }, [jobs]);
+
+  // Filter rows
+  const filteredRows = useRowsFilter({
+    rows,
+    searchPattern: searchProps.searchPattern,
+    filters: searchProps.filters,
+    getRowFilter: generateGetRowFilter({ chunkIds }),
+  });
+
+  // Sort rows
+  const sortProps = useRowsSort<ReportMetricAssetRow>({
+    rows: filteredRows,
+    initialField: sortBy,
+    initialDirection: direction,
+    getCustomSort,
+    setQueryState: setState,
+  });
+
+  const [hideEntryInfo, showEntryInfo] = useEntryInfo({ setState });
+
+  return (
+    <BundleAssetsComponent
+      {...restProps}
+      {...searchProps}
+      jobs={jobs}
+      chunks={chunks}
+      sort={sortProps.sort}
+      items={sortProps.items}
+      allItems={rows}
+      totalRowCount={totalRowCount}
+      updateSort={sortProps.updateSort}
+      hideEntryInfo={hideEntryInfo}
+      showEntryInfo={showEntryInfo}
+    />
+  );
+};

package/src/components/bundle-assets-totals/bundle-assets-totals.jsx

@@ -0,0 +1,157 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import PropTypes from 'prop-types';
+import { useHistory } from 'react-router-dom';
+import {
+  getBundleAssetsFileTypeComponentLink,
+  getComponentStateQueryString,
+} from '@bundle-stats/utils';
+import * as webpack from '@bundle-stats/utils/lib-esm/webpack';
+
+import config from '../../config.json';
+import { ASSETS_SIZES_FILE_TYPE_MAP, SECTION_URLS, MetricsDisplayType } from '../../constants';
+import { useMetricsDisplayType } from '../../hooks/metrics-display-type';
+import I18N from '../../i18n';
+import { Toolbar } from '../../ui/toolbar';
+import { Table } from '../../ui/table';
+import { Box } from '../../layout/box';
+import { Stack } from '../../layout/stack';
+import { Dialog, useDialogState } from '../../ui/dialog';
+import { MetricsDisplaySelector } from '../metrics-display-selector';
+import { MetricsTable } from '../metrics-table';
+import { MetricsTableExport } from '../metrics-table-export';
+import { MetricsTableHeader } from '../metrics-table-header';
+import { MetricsTableOptions } from '../metrics-table-options';
+import { MetricsTableTitle } from '../metrics-table-title';
+import { MetricsTreemap, getTreemapNodes } from '../metrics-treemap';
+import { ComponentLink } from '../component-link';
+import { FlexStack } from '../../layout';
+
+const metricsTableTitle = (
+  <MetricsTableTitle
+    title={I18N.ASSET_TOTALS}
+    popoverInfo={I18N.ASSET_TOTALS_INFO}
+    popoverHref={config.documentation.assets}
+  />
+);
+
+export const BundleAssetsTotals = ({
+  className,
+  jobs,
+  customComponentLink: CustomComponentLink,
+  onTreemapItemClick,
+  ...restProps
+}) => {
+  const [displayType, setDisplayType] = useMetricsDisplayType();
+  const history = useHistory();
+
+  const items = useMemo(() => webpack.compareBySection.sizes(jobs), [jobs]);
+
+  const renderRowHeader = useCallback(
+    (item) => {
+      const fileType = ASSETS_SIZES_FILE_TYPE_MAP[item.key];
+      const { section, title, params } = getBundleAssetsFileTypeComponentLink(fileType, item.label);
+
+      return (
+        <CustomComponentLink section={section} title={title} params={params}>
+          {item.label}
+        </CustomComponentLink>
+      );
+    },
+    [CustomComponentLink],
+  );
+
+  const handleMetricsTreemapItemClick = useCallback(
+    (entryId) => {
+      const fileType = ASSETS_SIZES_FILE_TYPE_MAP[entryId];
+      const { section, params } = getBundleAssetsFileTypeComponentLink(fileType, '');
+      const queryParams = getComponentStateQueryString(params);
+
+      const nextUrl = `${SECTION_URLS[section]}?${queryParams}`;
+      history.push(nextUrl);
+    },
+    [history],
+  );
+
+  const exportDialog = useDialogState();
+  const [exportSourceType, setExportSourceType] = useState(undefined);
+
+  const handleExportClick = useCallback((sourceType) => {
+    setExportSourceType(sourceType);
+    exportDialog.toggle();
+  }, []);
+
+  return (
+    <>
+      <Stack space="xsmall" as="section" className={className}>
+        <Toolbar
+          renderActions={() => (
+            <FlexStack space="xxsmall">
+              <MetricsDisplaySelector onSelect={setDisplayType} value={displayType.value} />
+              <MetricsTableOptions onExportClick={handleExportClick} />
+            </FlexStack>
+          )}
+        />
+        <Box outline as="main">
+          {displayType.value === MetricsDisplayType.TABLE && (
+            <MetricsTable
+              title={metricsTableTitle}
+              runs={jobs}
+              items={items}
+              renderRowHeader={renderRowHeader}
+              showHeaderSum
+              {...restProps}
+            />
+          )}
+          {displayType.value === MetricsDisplayType.TREEMAP && (
+            <>
+              <Table compact>
+                <MetricsTableHeader
+                  metricTitle={metricsTableTitle}
+                  showSum
+                  jobs={jobs}
+                  rows={items}
+                />
+              </Table>
+              <MetricsTreemap
+                treeNodes={getTreemapNodes(items)}
+                onItemClick={onTreemapItemClick || handleMetricsTreemapItemClick}
+              />
+            </>
+          )}
+        </Box>
+      </Stack>
+
+      <Dialog title={I18N.EXPORT} width="wide" state={exportDialog}>
+        {exportDialog.open && (
+          <MetricsTableExport
+            items={items}
+            initialSourceType={exportSourceType}
+            download="bundle-stats--totals"
+          />
+        )}
+      </Dialog>
+    </>
+  );
+};
+
+BundleAssetsTotals.defaultProps = {
+  className: '',
+  jobs: [],
+  customComponentLink: ComponentLink,
+  onTreemapItemClick: undefined,
+};
+
+BundleAssetsTotals.propTypes = {
+  /** Addopted child class name */
+  className: PropTypes.string,
+
+  /** Jobs data */
+  jobs: PropTypes.array, // eslint-disable-line react/forbid-prop-types
+
+  customComponentLink: PropTypes.elementType,
+
+  /**
+   * Treemap item onClick
+   */
+  onTreemapItemClick: PropTypes.func,
+};

package/src/components/bundle-assets-totals/index.js

@@ -0,0 +1 @@
+export * from './bundle-assets-totals';

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

@@ -0,0 +1,8 @@
+export const SEARCH = 'Search by module path';
+export const CHANGED = 'Changed';
+export const DUPLICATE = 'Duplicate';
+export const CHUNK = 'Chunk';
+export const FILE_TYPE = 'File type';
+export const SOURCE = 'Source';
+export const SOURCE_FIRST_PARTY = 'First party';
+export const SOURCE_THIRD_PARTY = 'Third party';

package/src/components/bundle-modules/bundle-modules.module.css

@@ -2,14 +2,13 @@
   color: var(--color-text-light);
 }
 
-.toolbar {
-  border-bottom: 1px solid var(--color-outline);
-}
-
 .toolbarSearch {
   width: 100%;
   max-width: 240px;
-  margin-right: -1px; /** collapse border */
+}
+
+.metricSelector {
+  border-bottom: 1px solid var(--color-outline);
 }
 
 .nameTagDuplicated {
@@ -22,6 +21,18 @@
 }
 
 .nameText {
-  display: inline;
+  display: inline-block;
   vertical-align: middle;
 }
+
+.root .name:hover,
+.root .name:active,
+.root .name:focus {
+  text-decoration: none;
+}
+
+.root .name:hover .nameText,
+.root .name:active .nameText,
+.root .name:focus .nameText {
+  text-decoration: underline;
+}