@bundle-stats/ui 3.2.0-beta.1 → 3.2.1-beta.10

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

@@ -0,0 +1,101 @@
+import { useMemo } from 'react';
+import { get, intersection, merge } from 'lodash';
+import { MODULE_PATH_PACKAGES } from '@bundle-stats/utils/lib-esm/webpack';
+import {
+  MODULE_CHUNK,
+  MODULE_FILTERS,
+  MODULE_FILE_TYPE,
+  MODULE_SOURCE_TYPE,
+  getModuleSourceFileType,
+} from '@bundle-stats/utils';
+
+import { SORT_BY_NAME, SORT_BY_SIZE, SORT_BY_DELTA } from './bundle-modules.constants';
+
+export const addRowSourceFlag = (row) => {
+  const { key } = row;
+  const thirdParty = Boolean(key.match(MODULE_PATH_PACKAGES));
+  return { ...row, thirdParty };
+};
+
+export const getCustomSort = (sortBy) => (item) => {
+  if (sortBy === SORT_BY_NAME) {
+    return item.key;
+  }
+
+  if (sortBy === SORT_BY_SIZE) {
+    return get(item, 'runs[0].value', 0);
+  }
+
+  if (sortBy === SORT_BY_DELTA) {
+    return get(item, 'runs[0].deltaPercentage', 0);
+  }
+
+  return [!item.changed, item.key];
+};
+
+export const getRowFilter = (filters) => (row) => {
+  // Skip not changed rows
+  if (filters[MODULE_FILTERS.CHANGED] && !row.changed) {
+    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
+  const fileType = getModuleSourceFileType(row.key);
+  if (!filters[`${MODULE_FILE_TYPE}.${fileType}`]) {
+    return false;
+  }
+
+  return true;
+};
+
+export const useModuleFilterByChunk = ({ jobs, filters, chunkIds }) => {
+  const filteredJobs = useMemo(() => {
+    // List of chunkIds with filter value set to `true`
+    const includedChunkIds = chunkIds.reduce((agg, chunkId) => {
+      if (get(filters, `${MODULE_CHUNK}.${chunkId}`)) {
+        return [...agg, chunkId];
+      }
+
+      return agg;
+    }, []);
+
+    // If all the filters are included, return jobs as they are
+    if (includedChunkIds.length === chunkIds.length) {
+      return jobs;
+    }
+
+    const jobsWithFilteredData = jobs.map((job) => {
+      const { modules } = job?.metrics?.webpack || {};
+
+      const filteredModules = Object.entries(modules).reduce((agg, [moduleId, moduleEntry]) => {
+        const match = intersection(moduleEntry.chunkIds, includedChunkIds);
+
+        if (match.length > 0) {
+          agg[moduleId] = moduleEntry; // eslint-disable-line no-param-reassign
+        }
+
+        return agg;
+      }, {});
+
+      // Copy job data into a new object to prevent mutations of the original data
+      const newJob = merge({}, job);
+      newJob.metrics.webpack.modules = filteredModules;
+
+      return newJob;
+    });
+
+    return jobsWithFilteredData;
+  }, [jobs, filters, chunkIds]);
+
+  return filteredJobs;
+};

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

@@ -0,0 +1,107 @@
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { uniqBy, map } from 'lodash';
+import {
+  getModuleChunkFilters,
+  getModuleSourceTypeFilters,
+  getModuleFileTypeFilters,
+} from '@bundle-stats/utils';
+import * as webpack from '@bundle-stats/utils/lib-esm/webpack';
+
+import { useRowsFilter } from '../../hooks/rows-filter';
+import { useRowsSort } from '../../hooks/rows-sort';
+import { useSearchParams } from '../../hooks/search-params';
+import { BundleModules as BundleModulesComponent } from './bundle-modules';
+import {
+  addRowSourceFlag,
+  getRowFilter,
+  getCustomSort,
+  useModuleFilterByChunk,
+} from './bundle-modules.utils';
+import { SORT_BY } from './bundle-modules.constants';
+
+export const BundleModules = (props) => {
+  const { jobs, filters, search, setState, sortBy, direction, ...restProps } = props;
+
+  const chunks = uniqBy(jobs.map((job) => job?.meta?.webpack?.chunks || []).flat(), ({ id }) => id);
+  const chunkIds = map(chunks, 'id');
+
+  const { defaultFilters, allEntriesFilters } = useMemo(
+    () => ({
+      defaultFilters: {
+        changed: jobs?.length > 1,
+        ...getModuleSourceTypeFilters(true),
+        ...getModuleChunkFilters(chunkIds, true),
+        ...getModuleFileTypeFilters(true),
+      },
+      allEntriesFilters: {
+        changed: false,
+        ...getModuleSourceTypeFilters(true),
+        ...getModuleChunkFilters(chunkIds, true),
+        ...getModuleFileTypeFilters(true),
+      },
+    }),
+    [jobs],
+  );
+
+  const searchParams = useSearchParams({
+    search,
+    filters,
+    defaultFilters,
+    allEntriesFilters,
+    setState,
+  });
+
+  const filteredJobsByChunkIds = useModuleFilterByChunk({
+    jobs,
+    filters: searchParams.filters,
+    chunkIds,
+  });
+
+  const { rows, totalRowCount } = useMemo(() => {
+    const result = webpack.compareBySection.modules(filteredJobsByChunkIds, [addRowSourceFlag]);
+    return { rows: result, totalRowCount: result.length };
+  }, [filteredJobsByChunkIds]);
+
+  const filteredRows = useRowsFilter({
+    rows,
+    searchPattern: searchParams.searchPattern,
+    filters: searchParams.filters,
+    getRowFilter,
+  });
+
+  const sortParams = useRowsSort({
+    rows: filteredRows,
+    sortFields: SORT_BY,
+    sortBy,
+    sortDirection: direction,
+    getCustomSort,
+  });
+
+  return (
+    <BundleModulesComponent
+      jobs={jobs}
+      chunks={chunks}
+      {...restProps}
+      {...searchParams}
+      {...sortParams}
+      totalRowCount={totalRowCount}
+    />
+  );
+};
+
+BundleModules.propTypes = {
+  jobs: PropTypes.arrayOf(PropTypes.object).isRequired, // eslint-disable-line react/forbid-prop-types
+  filters: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  search: PropTypes.string,
+  sortBy: PropTypes.string,
+  direction: PropTypes.string,
+  setState: PropTypes.func.isRequired,
+};
+
+BundleModules.defaultProps = {
+  filters: undefined,
+  search: undefined,
+  sortBy: undefined,
+  direction: undefined,
+};

package/src/components/bundle-packages/bundle-packages.jsx

@@ -149,7 +149,7 @@ export const BundlePackages = (props) => {
     resetAllFilters,
     totalRowCount,
     filters,
-    sortItems,
+    sortFields,
     sort,
     updateSort,
     search,
@@ -178,7 +178,7 @@ export const BundlePackages = (props) => {
         className={css.toolbar}
         renderActions={({ actionClassName }) => (
           <FlexStack space="xxsmall" className={cx(css.dropdown, actionClassName)}>
-            <SortDropdown items={sortItems} {...sort} onChange={updateSort} />
+            <SortDropdown fields={sortFields} {...sort} onChange={updateSort} />
             <MetricsTableOptions
               handleViewAll={resetAllFilters}
               handleResetFilters={resetFilters}
@@ -266,7 +266,7 @@ BundlePackages.propTypes = {
     changed: PropTypes.bool,
   }).isRequired,
   hasActiveFilters: PropTypes.bool,
-  sortItems: PropTypes.shape({
+  sortFields: PropTypes.shape({
     [PropTypes.string]: PropTypes.shape({
       label: PropTypes.string,
       defaultDirection: PropTypes.bool,

package/src/components/bundle-packages/bundle-packages.utils.js

@@ -0,0 +1,47 @@
+import { get, flatten, uniq } from 'lodash';
+import { PACKAGE_FILTERS } from '@bundle-stats/utils';
+
+import { SORT_BY_NAME, SORT_BY_DELTA, SORT_BY_SIZE } from './bundle-packages.constants';
+
+// Get a list of duplicate packages across jobs
+export const getDuplicatePackages = (jobs) => {
+  const jobsDuplicatePackages = jobs.map((job) => {
+    const insightsData = job?.insights?.webpack?.duplicatePackages?.data || {};
+    return Object.values(insightsData).flat();
+  });
+
+  return uniq(flatten(jobsDuplicatePackages));
+};
+
+export const getRowFilter = (filters) => (item) => {
+  if (filters[PACKAGE_FILTERS.CHANGED] && !item.changed) {
+    return false;
+  }
+
+  if (filters[PACKAGE_FILTERS.DUPLICATE] && !item.duplicate) {
+    return false;
+  }
+
+  return true;
+};
+
+export const getCustomSort = (sortId) => (item) => {
+  if (sortId === SORT_BY_NAME) {
+    return item.key;
+  }
+
+  if (sortId === SORT_BY_DELTA) {
+    return get(item, 'runs[0].deltaPercentage', 0);
+  }
+
+  if (sortId === SORT_BY_SIZE) {
+    return get(item, 'runs[0].value', 0);
+  }
+
+  return [!item.changed, item.key];
+};
+
+export const getAddRowDuplicateFlag = (duplicateJobs) => (row) => ({
+  ...row,
+  duplicate: duplicateJobs.includes(row.key),
+});

package/src/components/bundle-packages/index.jsx

@@ -0,0 +1,84 @@
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { PACKAGE_FILTERS } from '@bundle-stats/utils';
+import * as webpack from '@bundle-stats/utils/lib-esm/webpack/compare';
+
+import { useRowsFilter } from '../../hooks/rows-filter';
+import { useRowsSort } from '../../hooks/rows-sort';
+import { useSearchParams } from '../../hooks/search-params';
+import { SORT_BY } from './bundle-packages.constants';
+import { BundlePackages as BundlePackagesComponent } from './bundle-packages';
+import { getDuplicatePackages, getAddRowDuplicateFlag, getRowFilter, getCustomSort } from './bundle-packages.utils';
+
+export const BundlePackages = (props) => {
+  const { jobs, search, filters, setState, sortBy, direction, ...restProps } = props;
+
+  const { defaultFilters, allEntriesFilters } = useMemo(
+    () => ({
+      defaultFilters: {
+        [PACKAGE_FILTERS.CHANGED]: jobs?.length > 1,
+        [PACKAGE_FILTERS.DUPLICATE]: false,
+      },
+      allEntriesFilters: {
+        [PACKAGE_FILTERS.CHANGED]: false,
+        [PACKAGE_FILTERS.DUPLICATE]: false,
+      },
+    }),
+    [jobs],
+  );
+
+  const searchParams = useSearchParams({
+    search,
+    filters,
+    defaultFilters,
+    allEntriesFilters,
+    setState,
+  });
+
+  const { rows, totalRowCount } = useMemo(() => {
+    const duplicateJobs = getDuplicatePackages(jobs);
+    const result = webpack.compareBySection.packages(jobs, [getAddRowDuplicateFlag(duplicateJobs)]);
+    return { rows: result, totalRowCount: result.length };
+  }, [jobs]);
+
+  const filteredRows = useRowsFilter({
+    rows,
+    searchPattern: searchParams.searchPattern,
+    filters: searchParams.filters,
+    getRowFilter,
+  });
+
+  const sortParams = useRowsSort({
+    rows: filteredRows,
+    sortFields: SORT_BY,
+    sortBy,
+    sortDirection: direction,
+    getCustomSort,
+  });
+
+  return (
+    <BundlePackagesComponent
+      jobs={jobs}
+      {...restProps}
+      {...searchParams}
+      {...sortParams}
+      totalRowCount={totalRowCount}
+    />
+  );
+};
+
+BundlePackages.propTypes = {
+  jobs: PropTypes.arrayOf(PropTypes.object).isRequired, // eslint-disable-line react/forbid-prop-types
+  filters: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  search: PropTypes.string,
+  sortBy: PropTypes.string,
+  direction: PropTypes.string,
+  setState: PropTypes.func.isRequired,
+};
+
+BundlePackages.defaultProps = {
+  filters: undefined,
+  search: undefined,
+  sortBy: undefined,
+  direction: undefined,
+};

package/src/components/job-meta/job-meta.jsx

@@ -19,9 +19,7 @@ export const JobMeta = (props) => {
         return (
           <div className={css.item} key={key}>
             {title && (<h2 className={css.itemTitle}>{title}</h2>)}
-            {content.map((item) => (
-              <>{item}</>
-            ))}
+            {content.map((item) => item)}
           </div>
         );
       })}

package/src/components/metrics-table/metrics-table.jsx

@@ -1,8 +1,7 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { get, isEmpty } from 'lodash';
-import { flow, map, sum } from 'lodash/fp';
+import { get, isEmpty, sum } from 'lodash';
 import { METRIC_TYPE_FILE_SIZE, getGlobalMetricType, getMetricRunInfo } from '@bundle-stats/utils';
 
 import { Table } from '../../ui/table';
@@ -13,11 +12,7 @@ import styles from './metrics-table.module.css';
 
 const METRIC_TYPE_DATA = getGlobalMetricType(null, METRIC_TYPE_FILE_SIZE);
 
-const getRowsRunTotal = (rows, runIndex) =>
-  flow(
-    map((row) => get(row, `runs[${runIndex}].value`, 0)),
-    sum,
-  )(rows);
+const getRowsRunTotal = (rows, runIndex) => sum(rows.map((row) => get(row, `runs[${runIndex}].value`, 0)));
 
 const getHeaderLabelCells = (rows) => (run, runIndex, runs) => {
   const isBaseline = runIndex === runs.length - 1;

package/src/components/metrics-table-search/metrics-table-search.jsx

@@ -48,6 +48,7 @@ export const MetricsTableSearch = (props) => {
         onChange={handleChangeValue}
         value={value}
         size="small"
+        autoComplete="off"
       />
       {search && (
         <button className={css.cancelButton} type="button" onClick={handleClearValue}>

package/src/components/metrics-table-search/metrics-table-search.module.css

@@ -5,6 +5,7 @@
 }
 
 .input {
+  height: var(--space-large);
   border-color: var(--color-outline);
 }
 
@@ -26,7 +27,7 @@
   padding: var(--space-xxsmall);
   width: var(--space-large);
   height: var(--space-large);
-  background: radial-gradient(var(--color-background), transparent 75%);
+  background: radial-gradient(var(--color-background) 50%, transparent);
   color: var(--color-text-ultra-light);
   transition: var(--transition-in);
 }

package/src/components/summary/summary.jsx

@@ -11,6 +11,28 @@ import { ComponentLink } from '../component-link';
 import { SummaryItem } from '../summary-item';
 import css from './summary.module.css';
 
+const CustomSummaryItem = ({ className, metricOptions, SummaryItemCustomLink, ...props }) => (
+  <Box
+    padding={['xsmall', 'small']}
+    className={cx(className, css.summaryItemLink)}
+    {...props}
+    as={SummaryItemCustomLink}
+    {...metricOptions.link}
+  />
+);
+
+CustomSummaryItem.propTypes = {
+  className: PropTypes.string,
+  metricOptions: PropTypes.shape({
+    link: PropTypes.any, // eslint-disable-line react/forbid-prop-types
+  }).isRequired,
+  SummaryItemCustomLink: PropTypes.elementType.isRequired,
+};
+
+CustomSummaryItem.defaultProps = {
+  className: '',
+};
+
 export const Summary = ({
   className,
   size,
@@ -25,15 +47,10 @@ export const Summary = ({
       {Array.from(METRIC_COMPONENT_LINKS).filter(([metricId]) => keys.includes(metricId)).map(
         ([metricId, metricOptions]) => (
           <SummaryItem
-            as={({ className: itemClassName, ...itemProps }) => (
-              <Box
-                padding={['xsmall', 'small']}
-                className={cx(itemClassName, css.summaryItemLink)}
-                {...itemProps}
-                as={SummaryItemCustomLink}
-                {...metricOptions.link}
-              />
-            )}
+            as={CustomSummaryItem}
+            className={css.item}
+            metricOptions={metricOptions}
+            SummaryItemCustomLink={SummaryItemCustomLink}
             size={size}
             key={metricId}
             id={metricId}
@@ -41,7 +58,6 @@ export const Summary = ({
             loading={loading}
             showMetricDescription
             showDelta={showSummaryItemDelta && metricOptions.showDelta !== false}
-            className={css.item}
           />
         )
       )}

package/src/hooks/rows-filter.js

@@ -0,0 +1,16 @@
+import { useMemo } from 'react';
+
+export const useRowsFilter = ({ rows, searchPattern, filters, getRowFilter }) => {
+  const filteredRows = useMemo(() => {
+    const filterRow = getRowFilter(filters);
+    return rows.filter((row) => {
+      if (searchPattern && !searchPattern.test(row?.key)) {
+        return false;
+      }
+
+      return filterRow(row);
+    });
+  }, [rows, searchPattern, filters, getRowFilter]);
+
+  return filteredRows;
+};

package/src/hooks/rows-sort.js

@@ -0,0 +1,24 @@
+import { useState, useMemo } from 'react';
+import { orderBy } from 'lodash';
+
+export const useRowsSort = ({
+  rows,
+  sortFields,
+  sortBy = 'size',
+  sortDirection = 'desc',
+  getCustomSort,
+}) => {
+  const [sort, updateSort] = useState({ field: sortBy, direction: sortDirection });
+
+  const orderedRows = useMemo(
+    () => orderBy(rows, getCustomSort(sort.field), sort.direction),
+    [rows, sort],
+  );
+
+  return {
+    sortFields,
+    sort,
+    updateSort,
+    items: orderedRows,
+  };
+};

package/src/hooks/search-params.js

@@ -0,0 +1,153 @@
+import { useCallback, useLayoutEffect, useReducer } from 'react';
+import { isEqual, merge } from 'lodash';
+
+const ACTION_SET_FILTERS = 'SET_FILTERS';
+const ACTION_SET_SEARCH = 'SET_SEARCH';
+const ACTION_RESET_DEFAULT = 'RESET_DEFAULT';
+const ACTION_RESET_ALL = 'RESET_ALL';
+const ACTION_SET = 'SET';
+
+const getSearchPattern = (search) => {
+  let searchPattern = /.*/;
+
+  if (!search || !search.trim()) {
+    return searchPattern;
+  }
+
+  try {
+    searchPattern = new RegExp(search, 'i');
+  } catch (err) {
+    // noop
+    console.error(err); // eslint-disable-line no-console
+  }
+
+  return searchPattern;
+};
+
+const getSearchReducer =
+  ({ defaultFilters, allEntriesFilters, setParentState }) => (state, action) => {
+    const { type, payload } = action;
+
+    switch (type) {
+      case ACTION_SET_FILTERS: {
+        setParentState({
+          filters: payload,
+          search: state.search,
+        });
+
+        return {
+          ...state,
+          filters: payload,
+        };
+      }
+
+      case ACTION_SET_SEARCH: {
+        setParentState({
+          filters: state.filters,
+          search: payload,
+        });
+
+        return {
+          ...state,
+          search: payload,
+          searchPattern: getSearchPattern(payload),
+        };
+      }
+
+      case ACTION_RESET_DEFAULT: {
+        setParentState({
+          filters: defaultFilters,
+          search: '',
+        });
+
+        return {
+          filters: defaultFilters,
+          search: '',
+          searchPattern: getSearchPattern(),
+        };
+      }
+
+      case ACTION_RESET_ALL: {
+        setParentState({
+          filters: allEntriesFilters,
+          search: '',
+        });
+
+        return {
+          filters: allEntriesFilters,
+          search: '',
+          searchPattern: getSearchPattern(),
+        };
+      }
+
+      case ACTION_SET: {
+        return payload;
+      }
+
+      default:
+        return state;
+    }
+  };
+
+export const generateState = (filters, search) => ({
+  filters,
+  search,
+  searchPattern: getSearchPattern(search),
+});
+
+export const useSearchParams = ({
+  search: parentSearch,
+
+  filters: parentFilters,
+  defaultFilters,
+  allEntriesFilters,
+  setState: setParentState,
+}) => {
+  // When we pass custom filters, set the other flags to true (allEntries)
+  const initialFilters = parentFilters
+    ? merge({}, allEntriesFilters, parentFilters)
+    : defaultFilters;
+
+  const [{ search, searchPattern, filters }, dispatch] = useReducer(
+    getSearchReducer({ defaultFilters, allEntriesFilters, setParentState }),
+    generateState(initialFilters, parentSearch),
+  );
+
+  // Update state when the custom filters/search are changing - initial load or route updates
+  useLayoutEffect(() => {
+    // Run a deep comparison to prevent circular setState triggering
+    if (parentSearch === search || isEqual(parentFilters, filters)) {
+      return;
+    }
+
+    dispatch({ type: ACTION_SET, payload: generateState(initialFilters, parentSearch) });
+  }, [search, filters, parentFilters, parentSearch]);
+
+  /** Callbacks */
+  const handleUpdateSearch = useCallback((newValue) => {
+    dispatch({ type: ACTION_SET_SEARCH, payload: newValue });
+  }, []);
+
+  const handleUpdateFilters = useCallback((newFilters) => {
+    dispatch({ type: ACTION_SET_FILTERS, payload: newFilters });
+  }, []);
+
+  const handleResetFilters = useCallback(() => {
+    dispatch({ type: ACTION_RESET_DEFAULT });
+  }, []);
+
+  const handleResetAllFilters = useCallback(() => {
+    dispatch({ type: ACTION_RESET_ALL });
+  }, []);
+
+  return {
+    search,
+    searchPattern,
+    filters,
+    hasActiveFilters: !isEqual(allEntriesFilters, filters),
+    updateSearch: handleUpdateSearch,
+    updateFilters: handleUpdateFilters,
+    resetFilters: handleResetFilters,
+    resetAllFilters: handleResetAllFilters,
+  };
+};

package/src/layout/box/box.jsx

@@ -31,7 +31,7 @@ export const Box = (props) => {
     outline && css.outline,
   );
 
-  return <Component className={rootClassName} {...restProps} />;
+  return <Component {...restProps} className={rootClassName} />;
 };
 
 Box.defaultProps = {