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

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

@@ -6,7 +6,10 @@ import currentStatsFixtures from '../../../__mocks__/webpack-stats.current.json'
 import { getWrapperDecorator } from '../../stories';
 import { BundleModules } from '.'; // Limit the side of the modules when not in dev mode (chromatic limit, snapshot too large)
 
-var _ref = process.env.NODE_ENV !== 'development' ? {
+const {
+  baselineStats,
+  currentStats
+} = process.env.NODE_ENV !== 'development' ? {
   // eslint-disable-next-line prefer-object-spread
   baselineStats: Object.assign({}, baselineStatsFixtures, {
     modules: baselineStatsFixtures.modules.slice(0, 100)
@@ -18,37 +21,28 @@ var _ref = process.env.NODE_ENV !== 'development' ? {
 } : {
   baselineStats: baselineStatsFixtures,
   currentStats: currentStatsFixtures
-},
-    baselineStats = _ref.baselineStats,
-    currentStats = _ref.currentStats;
-
-var JOBS = createJobs([{
+};
+const JOBS = createJobs([{
   webpack: currentStats
 }, {
   webpack: baselineStats
 }]);
-var stories = storiesOf('Components/BundleModules', module);
+const stories = storiesOf('Components/BundleModules', module);
 stories.addDecorator(getWrapperDecorator());
-stories.add('default', function () {
-  return /*#__PURE__*/React.createElement(BundleModules, {
-    jobs: [JOBS[1]]
-  });
-});
-stories.add('multiple jobs', function () {
-  return /*#__PURE__*/React.createElement(BundleModules, {
-    jobs: JOBS
-  });
-});
-var JOBS_EMPTY_BASELINE = createJobs([{
+stories.add('default', () => /*#__PURE__*/React.createElement(BundleModules, {
+  jobs: [JOBS[1]]
+}));
+stories.add('multiple jobs', () => /*#__PURE__*/React.createElement(BundleModules, {
+  jobs: JOBS
+}));
+const JOBS_EMPTY_BASELINE = createJobs([{
   webpack: currentStats
 }, null]);
-stories.add('empty baseline', function () {
-  return /*#__PURE__*/React.createElement(BundleModules, {
-    jobs: JOBS_EMPTY_BASELINE
-  });
-}); // Module moved between chunks
+stories.add('empty baseline', () => /*#__PURE__*/React.createElement(BundleModules, {
+  jobs: JOBS_EMPTY_BASELINE
+})); // Module moved between chunks
 
-var JOBS_MOVED_MODULE = createJobs([{
+const JOBS_MOVED_MODULE = createJobs([{
   webpack: {
     chunks: [{
       id: 1,
@@ -118,38 +112,32 @@ var JOBS_MOVED_MODULE = createJobs([{
     }]
   }
 }]);
-var chunkFiltersStories = storiesOf('Components/BundleModules/chunk filters', module);
+const chunkFiltersStories = storiesOf('Components/BundleModules/chunk filters', module);
 chunkFiltersStories.addDecorator(getWrapperDecorator());
-chunkFiltersStories.add('chunk with module moved in', function () {
-  return /*#__PURE__*/React.createElement(BundleModules, {
-    filters: {
-      changed: false,
-      'c.1': true,
-      'c.2': false,
-      'c.3': false
-    },
-    jobs: [].concat(JOBS_MOVED_MODULE)
-  });
-});
-chunkFiltersStories.add('chunk with module moved out', function () {
-  return /*#__PURE__*/React.createElement(BundleModules, {
-    filters: {
-      changed: false,
-      'c.1': false,
-      'c.2': true,
-      'c.3': false
-    },
-    jobs: [].concat(JOBS_MOVED_MODULE)
-  });
-});
-chunkFiltersStories.add('removed chunk', function () {
-  return /*#__PURE__*/React.createElement(BundleModules, {
-    filters: {
-      changed: false,
-      'c.1': false,
-      'c.2': false,
-      'c.3': true
-    },
-    jobs: [].concat(JOBS_MOVED_MODULE)
-  });
-});
+chunkFiltersStories.add('chunk with module moved in', () => /*#__PURE__*/React.createElement(BundleModules, {
+  filters: {
+    changed: false,
+    'c.1': true,
+    'c.2': false,
+    'c.3': false
+  },
+  jobs: [...JOBS_MOVED_MODULE]
+}));
+chunkFiltersStories.add('chunk with module moved out', () => /*#__PURE__*/React.createElement(BundleModules, {
+  filters: {
+    changed: false,
+    'c.1': false,
+    'c.2': true,
+    'c.3': false
+  },
+  jobs: [...JOBS_MOVED_MODULE]
+}));
+chunkFiltersStories.add('removed chunk', () => /*#__PURE__*/React.createElement(BundleModules, {
+  filters: {
+    changed: false,
+    'c.1': false,
+    'c.2': false,
+    'c.3': true
+  },
+  jobs: [...JOBS_MOVED_MODULE]
+}));

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

@@ -0,0 +1,98 @@
+import _merge from "lodash/merge";
+import _intersection from "lodash/intersection";
+import _get from "lodash/get";
+import { useMemo } from 'react';
+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 = _ref => {
+  let {
+    jobs,
+    filters,
+    chunkIds
+  } = _ref;
+  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 => {
+      var _job$metrics;
+
+      const {
+        modules
+      } = (job == null ? void 0 : (_job$metrics = job.metrics) == null ? void 0 : _job$metrics.webpack) || {};
+      const filteredModules = Object.entries(modules).reduce((agg, _ref2) => {
+        let [moduleId, moduleEntry] = _ref2;
+
+        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/lib-esm/components/bundle-modules/index.js

@@ -1,3 +1,114 @@
-import enhance from './bundle-modules.container';
-import { BundleModules as Component } from './bundle-modules';
-export var BundleModules = enhance(Component);
+import _map from "lodash/map";
+import _uniqBy from "lodash/uniqBy";
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+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 => {
+    var _job$meta, _job$meta$webpack;
+
+    return (job == null ? void 0 : (_job$meta = job.meta) == null ? void 0 : (_job$meta$webpack = _job$meta.webpack) == null ? void 0 : _job$meta$webpack.chunks) || [];
+  }).flat(), _ref => {
+    let {
+      id
+    } = _ref;
+    return id;
+  });
+
+  const chunkIds = _map(chunks, 'id');
+
+  const {
+    defaultFilters,
+    allEntriesFilters
+  } = useMemo(() => ({
+    defaultFilters: {
+      changed: (jobs == null ? void 0 : 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 /*#__PURE__*/React.createElement(BundleModulesComponent, _extends({
+    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/lib-esm/components/bundle-packages/bundle-packages.constants.js

@@ -1,15 +1,17 @@
-var _SORT_BY;
-
-export var SORT_BY_NAME = 'name';
-export var SORT_BY_SIZE = 'size';
-export var SORT_BY_DELTA = 'delta';
-export var SORT_BY = (_SORT_BY = {}, _SORT_BY[SORT_BY_NAME] = {
-  label: 'Name',
-  defaultDirection: 'asc'
-}, _SORT_BY[SORT_BY_DELTA] = {
-  label: 'Delta',
-  defaultDirection: 'desc'
-}, _SORT_BY[SORT_BY_SIZE] = {
-  label: 'Size',
-  defaultDirection: 'desc'
-}, _SORT_BY);
+export const SORT_BY_NAME = 'name';
+export const SORT_BY_SIZE = 'size';
+export const SORT_BY_DELTA = 'delta';
+export const SORT_BY = {
+  [SORT_BY_NAME]: {
+    label: 'Name',
+    defaultDirection: 'asc'
+  },
+  [SORT_BY_DELTA]: {
+    label: 'Delta',
+    defaultDirection: 'desc'
+  },
+  [SORT_BY_SIZE]: {
+    label: 'Size',
+    defaultDirection: 'desc'
+  }
+};

package/lib-esm/components/bundle-packages/bundle-packages.js

@@ -1,5 +1,3 @@
-var _PropTypes$shape;
-
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { useCallback } from 'react';
@@ -23,18 +21,16 @@ import { MetricsTableOptions } from '../metrics-table-options';
 import { MetricsTableTitle } from '../metrics-table-title';
 import css from './bundle-packages.module.css';
 
-var PackagePopoverContent = function PackagePopoverContent(_ref) {
-  var name = _ref.name,
-      fullName = _ref.fullName,
-      path = _ref.path,
-      duplicate = _ref.duplicate,
-      CustomComponentLink = _ref.CustomComponentLink;
-  var normalizedPackagePath = path || "node_modules/" + fullName.split(PACKAGES_SEPARATOR).join('/node_modules/') + "/";
-
-  var _name$split = name.split(PACKAGE_ID_SEPARATOR),
-      normalizedName = _name$split[0],
-      packageId = _name$split[1];
-
+const PackagePopoverContent = _ref => {
+  let {
+    name,
+    fullName,
+    path,
+    duplicate,
+    CustomComponentLink
+  } = _ref;
+  const normalizedPackagePath = path || `node_modules/${fullName.split(PACKAGES_SEPARATOR).join('/node_modules/')}/`;
+  const [normalizedName, packageId] = name.split(PACKAGE_ID_SEPARATOR);
   return /*#__PURE__*/React.createElement(Stack, {
     space: "xxsmall",
     className: css.packagePopover
@@ -44,7 +40,7 @@ var PackagePopoverContent = function PackagePopoverContent(_ref) {
     className: css.packagePopoverTitle
   }, normalizedName, packageId && /*#__PURE__*/React.createElement("span", {
     className: css.packagePopoverTitleIndex
-  }, "" + PACKAGE_ID_SEPARATOR + packageId)), /*#__PURE__*/React.createElement("p", {
+  }, `${PACKAGE_ID_SEPARATOR}${packageId}`)), /*#__PURE__*/React.createElement("p", {
     className: css.packagePopoverPath
   }, /*#__PURE__*/React.createElement(FileName, {
     className: css.packagePopoverPathValue,
@@ -54,13 +50,13 @@ var PackagePopoverContent = function PackagePopoverContent(_ref) {
   }, /*#__PURE__*/React.createElement("li", {
     className: css.packagePopoverItem
   }, /*#__PURE__*/React.createElement("a", {
-    href: "https://www.npmjs.com/package/" + normalizedName,
+    href: `https://www.npmjs.com/package/${normalizedName}`,
     target: "_blank",
     rel: "noreferrer"
   }, "npmjs.com")), /*#__PURE__*/React.createElement("li", {
     className: css.packagePopoverItem
   }, /*#__PURE__*/React.createElement("a", {
-    href: "https://bundlephobia.com/result?p=" + normalizedName,
+    href: `https://bundlephobia.com/result?p=${normalizedName}`,
     target: "_blank",
     rel: "noreferrer"
   }, "bundlephobia.com"))), /*#__PURE__*/React.createElement(Stack, {
@@ -80,19 +76,20 @@ PackagePopoverContent.defaultProps = {
   path: ''
 };
 
-var PackageRowHeader = function PackageRowHeader(_ref2) {
-  var item = _ref2.item,
-      CustomComponentLink = _ref2.CustomComponentLink;
-  var packageNames = item.label.split(PACKAGES_SEPARATOR);
-
-  var _ref3 = item.runs[0] || {},
-      path = _ref3.path;
-
+const PackageRowHeader = _ref2 => {
+  let {
+    item,
+    CustomComponentLink
+  } = _ref2;
+  const packageNames = item.label.split(PACKAGES_SEPARATOR);
+  const {
+    path
+  } = item.runs[0] || {};
   return /*#__PURE__*/React.createElement("span", {
     className: css.packageNames
-  }, packageNames.map(function (packageName, index) {
+  }, packageNames.map((packageName, index) => {
     // Render duplicate flag only for the last entry
-    var duplicateFlag = index === packageNames.length - 1 && item.duplicate && /*#__PURE__*/React.createElement("span", {
+    const duplicateFlag = index === packageNames.length - 1 && item.duplicate && /*#__PURE__*/React.createElement("span", {
       className: css.duplicate,
       title: "Duplicate package"
     }, "D");
@@ -120,47 +117,47 @@ PackageRowHeader.propTypes = {
   }).isRequired,
   CustomComponentLink: PropTypes.elementType.isRequired
 };
-export var BundlePackages = function BundlePackages(props) {
-  var _ref5;
-
-  var className = props.className,
-      jobs = props.jobs,
-      items = props.items,
-      updateFilters = props.updateFilters,
-      resetFilters = props.resetFilters,
-      resetAllFilters = props.resetAllFilters,
-      totalRowCount = props.totalRowCount,
-      filters = props.filters,
-      sortItems = props.sortItems,
-      sort = props.sort,
-      updateSort = props.updateSort,
-      search = props.search,
-      updateSearch = props.updateSearch,
-      hasActiveFilters = props.hasActiveFilters,
-      CustomComponentLink = props.customComponentLink;
-  var emptyMessage = /*#__PURE__*/React.createElement(EmptySet, {
+export const BundlePackages = props => {
+  const {
+    className,
+    jobs,
+    items,
+    updateFilters,
+    resetFilters,
+    resetAllFilters,
+    totalRowCount,
+    filters,
+    sortFields,
+    sort,
+    updateSort,
+    search,
+    updateSearch,
+    hasActiveFilters,
+    customComponentLink: CustomComponentLink
+  } = props;
+  const emptyMessage = /*#__PURE__*/React.createElement(EmptySet, {
     resources: "packages",
     filtered: totalRowCount !== 0,
     handleResetFilters: resetFilters,
     handleViewAll: resetAllFilters
   });
-  var renderRowHeader = useCallback(function (item) {
-    return /*#__PURE__*/React.createElement(PackageRowHeader, {
-      item: item,
-      CustomComponentLink: CustomComponentLink
-    });
-  }, [CustomComponentLink]);
+  const renderRowHeader = useCallback(item => /*#__PURE__*/React.createElement(PackageRowHeader, {
+    item: item,
+    CustomComponentLink: CustomComponentLink
+  }), [CustomComponentLink]);
   return /*#__PURE__*/React.createElement("section", {
     className: cx(css.root, className)
   }, /*#__PURE__*/React.createElement(Toolbar, {
     className: css.toolbar,
-    renderActions: function renderActions(_ref4) {
-      var actionClassName = _ref4.actionClassName;
+    renderActions: _ref3 => {
+      let {
+        actionClassName
+      } = _ref3;
       return /*#__PURE__*/React.createElement(FlexStack, {
         space: "xxsmall",
         className: cx(css.dropdown, actionClassName)
       }, /*#__PURE__*/React.createElement(SortDropdown, _extends({
-        items: sortItems
+        fields: sortFields
       }, sort, {
         onChange: updateSort
       })), /*#__PURE__*/React.createElement(MetricsTableOptions, {
@@ -174,15 +171,18 @@ export var BundlePackages = function BundlePackages(props) {
     search: search,
     updateSearch: updateSearch
   }), /*#__PURE__*/React.createElement(Filters, {
-    filters: (_ref5 = {}, _ref5[PACKAGE_FILTERS.CHANGED] = {
-      label: 'Changed',
-      defaultValue: filters[PACKAGE_FILTERS.CHANGED],
-      disabled: jobs.length <= 1
-    }, _ref5[PACKAGE_FILTERS.DUPLICATE] = {
-      label: 'Duplicate',
-      defaultValue: filters[PACKAGE_FILTERS.DUPLICATE]
-    }, _ref5),
-    label: "Filters (" + items.length + "/" + totalRowCount + ")",
+    filters: {
+      [PACKAGE_FILTERS.CHANGED]: {
+        label: 'Changed',
+        defaultValue: filters[PACKAGE_FILTERS.CHANGED],
+        disabled: jobs.length <= 1
+      },
+      [PACKAGE_FILTERS.DUPLICATE]: {
+        label: 'Duplicate',
+        defaultValue: filters[PACKAGE_FILTERS.DUPLICATE]
+      }
+    },
+    label: `Filters (${items.length}/${totalRowCount})`,
     onChange: updateFilters,
     hasActiveFilters: hasActiveFilters
   }))), /*#__PURE__*/React.createElement("main", null, /*#__PURE__*/React.createElement(MetricsTable, {
@@ -193,7 +193,7 @@ export var BundlePackages = function BundlePackages(props) {
     showHeaderSum: true,
     title: /*#__PURE__*/React.createElement(MetricsTableTitle, {
       title: I18N.PACKAGES,
-      info: "(" + items.length + "/" + totalRowCount + ")",
+      info: `(${items.length}/${totalRowCount})`,
       popoverInfo: I18N.PACKAGES_INFO,
       popoverHref: config.documentation.packages
     })
@@ -226,10 +226,12 @@ BundlePackages.propTypes = {
     changed: PropTypes.bool
   }).isRequired,
   hasActiveFilters: PropTypes.bool,
-  sortItems: PropTypes.shape((_PropTypes$shape = {}, _PropTypes$shape[PropTypes.string] = PropTypes.shape({
-    label: PropTypes.string,
-    defaultDirection: PropTypes.bool
-  }), _PropTypes$shape)).isRequired,
+  sortFields: PropTypes.shape({
+    [PropTypes.string]: PropTypes.shape({
+      label: PropTypes.string,
+      defaultDirection: PropTypes.bool
+    })
+  }).isRequired,
   sort: PropTypes.shape({
     sortBy: PropTypes.string,
     direction: PropTypes.string