@bundle-stats/ui 3.2.1-alpha.0 → 3.2.1-beta.10

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

@@ -29,32 +29,39 @@ const RUN_TITLE_CURRENT = 'Current';
 const RUN_TITLE_BASELINE = 'Baseline';
 const RUNS_LABELS = [RUN_TITLE_CURRENT, RUN_TITLE_BASELINE];
 
-const getFileTypeFilters = filters => Object.entries(FILE_TYPE_LABELS).map(([id, label]) => ({
-  [id]: {
-    label,
-    defaultValue: _get(filters, `${ASSET_FILE_TYPE}.${id}`, true)
-  }
-})).reduce((agg, current) => ({ ...agg,
+const getFileTypeFilters = filters => Object.entries(FILE_TYPE_LABELS).map(_ref => {
+  let [id, label] = _ref;
+  return {
+    [id]: {
+      label,
+      defaultValue: _get(filters, `${ASSET_FILE_TYPE}.${id}`, true)
+    }
+  };
+}).reduce((agg, current) => ({ ...agg,
   ...current
 }), {});
 
-const TooltipNotPredictive = ({
-  runs
-}) => /*#__PURE__*/React.createElement("div", {
-  className: css.tooltipNotPredictive
-}, /*#__PURE__*/React.createElement("p", {
-  className: css.tooltipNotPredictiveText
-}, "File name is the same, but the size has changed:"), /*#__PURE__*/React.createElement("table", {
-  className: css.tooltipTable
-}, /*#__PURE__*/React.createElement("tr", null, runs.map(({
-  name,
-  value
-}, index) => {
-  const key = index;
-  return /*#__PURE__*/React.createElement("tr", {
-    key: key
-  }, /*#__PURE__*/React.createElement("th", null, RUNS_LABELS[index]), /*#__PURE__*/React.createElement("td", null, name), /*#__PURE__*/React.createElement("td", null, value));
-}))));
+const TooltipNotPredictive = _ref2 => {
+  let {
+    runs
+  } = _ref2;
+  return /*#__PURE__*/React.createElement("div", {
+    className: css.tooltipNotPredictive
+  }, /*#__PURE__*/React.createElement("p", {
+    className: css.tooltipNotPredictiveText
+  }, "File name is the same, but the size has changed:"), /*#__PURE__*/React.createElement("table", {
+    className: css.tooltipTable
+  }, /*#__PURE__*/React.createElement("tr", null, runs.map((_ref3, index) => {
+    let {
+      name,
+      value
+    } = _ref3;
+    const key = index;
+    return /*#__PURE__*/React.createElement("tr", {
+      key: key
+    }, /*#__PURE__*/React.createElement("th", null, RUNS_LABELS[index]), /*#__PURE__*/React.createElement("td", null, name), /*#__PURE__*/React.createElement("td", null, value));
+  }))));
+};
 
 TooltipNotPredictive.defaultProps = {
   runs: []
@@ -64,50 +71,53 @@ TooltipNotPredictive.propTypes = {
 
 };
 
-const getRenderRowHeader = ({
-  labels,
-  CustomComponentLink,
-  chunks
-}) => item => {
-  const {
-    label,
-    isNotPredictive,
-    runs,
-    isChunk,
-    isEntry,
-    isInitial
-  } = item;
-  return /*#__PURE__*/React.createElement(Popover, {
-    label: /*#__PURE__*/React.createElement(FileName, {
-      name: label
-    }),
-    icon: /*#__PURE__*/React.createElement("div", {
-      className: css.assetInfoFlags
-    }, isNotPredictive && /*#__PURE__*/React.createElement(Tooltip, {
-      className: css.notPredictive,
-      title: /*#__PURE__*/React.createElement(TooltipNotPredictive, {
-        runs: runs
-      })
-    }, /*#__PURE__*/React.createElement(Icon, {
-      className: css.notPredictiveIcon,
-      glyph: "warning"
-    })), isChunk && /*#__PURE__*/React.createElement("span", {
-      title: "Chunk",
-      className: css.flagChunk
-    }, "c"), isEntry && /*#__PURE__*/React.createElement("span", {
-      title: "Entrypoint",
-      className: css.flagEntry
-    }, "e"), isInitial && /*#__PURE__*/React.createElement("span", {
-      title: "Initial",
-      className: css.flagInitial
-    }, "i"))
-  }, /*#__PURE__*/React.createElement(AssetInfo, {
-    className: css.assetInfo,
-    item: item,
-    labels: labels,
-    chunks: chunks,
-    CustomComponentLink: CustomComponentLink
-  }));
+const getRenderRowHeader = _ref4 => {
+  let {
+    labels,
+    CustomComponentLink,
+    chunks
+  } = _ref4;
+  return item => {
+    const {
+      label,
+      isNotPredictive,
+      runs,
+      isChunk,
+      isEntry,
+      isInitial
+    } = item;
+    return /*#__PURE__*/React.createElement(Popover, {
+      label: /*#__PURE__*/React.createElement(FileName, {
+        name: label
+      }),
+      icon: /*#__PURE__*/React.createElement("div", {
+        className: css.assetInfoFlags
+      }, isNotPredictive && /*#__PURE__*/React.createElement(Tooltip, {
+        className: css.notPredictive,
+        title: /*#__PURE__*/React.createElement(TooltipNotPredictive, {
+          runs: runs
+        })
+      }, /*#__PURE__*/React.createElement(Icon, {
+        className: css.notPredictiveIcon,
+        glyph: "warning"
+      })), isChunk && /*#__PURE__*/React.createElement("span", {
+        title: "Chunk",
+        className: css.flagChunk
+      }, "c"), isEntry && /*#__PURE__*/React.createElement("span", {
+        title: "Entrypoint",
+        className: css.flagEntry
+      }, "e"), isInitial && /*#__PURE__*/React.createElement("span", {
+        title: "Initial",
+        className: css.flagInitial
+      }, "i"))
+    }, /*#__PURE__*/React.createElement(AssetInfo, {
+      className: css.assetInfo,
+      item: item,
+      labels: labels,
+      chunks: chunks,
+      CustomComponentLink: CustomComponentLink
+    }));
+  };
 };
 
 export const BundleAssets = props => {
@@ -146,19 +156,22 @@ export const BundleAssets = props => {
     className: cx(css.root, className)
   }, /*#__PURE__*/React.createElement(Toolbar, {
     className: css.toolbar,
-    renderActions: ({
-      actionClassName
-    }) => /*#__PURE__*/React.createElement(FlexStack, {
-      space: "xsmall",
-      className: cx(css.dropdown, actionClassName)
-    }, /*#__PURE__*/React.createElement(SortDropdown, _extends({
-      fields: sortFields
-    }, sort, {
-      onChange: updateSort
-    })), /*#__PURE__*/React.createElement(MetricsTableOptions, {
-      handleViewAll: resetAllFilters,
-      handleResetFilters: resetFilters
-    }))
+    renderActions: _ref5 => {
+      let {
+        actionClassName
+      } = _ref5;
+      return /*#__PURE__*/React.createElement(FlexStack, {
+        space: "xsmall",
+        className: cx(css.dropdown, actionClassName)
+      }, /*#__PURE__*/React.createElement(SortDropdown, _extends({
+        fields: sortFields
+      }, sort, {
+        onChange: updateSort
+      })), /*#__PURE__*/React.createElement(MetricsTableOptions, {
+        handleViewAll: resetAllFilters,
+        handleResetFilters: resetFilters
+      }));
+    }
   }, /*#__PURE__*/React.createElement(FlexStack, null, /*#__PURE__*/React.createElement(MetricsTableSearch, {
     className: css.toolbarSearch,
     placeholder: "Search by name",

package/lib-esm/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.js

@@ -17,17 +17,32 @@ import { getColors } from '../../utils';
 import { Stack } from '../../layout/stack';
 import { SummaryItem } from '../summary-item';
 import css from './bundle-assets-totals-chart-bars.module.css';
-export const BundleAssetsTotalsChartBars = ({
-  className,
-  jobs,
-  customComponentLink: CustomComponentLink
-}) => {
+
+const getTooltip = (items, jobs, itemIndex, runIndex) => () => /*#__PURE__*/React.createElement(SummaryItem, {
+  className: css.itemTooltip,
+  id: _get(items, [itemIndex, 'key']),
+  data: {
+    current: _get(items, [itemIndex, 'runs', runIndex, 'value'], 0),
+    baseline: _get(items, [itemIndex, 'runs', runIndex + 1, 'value'], 0)
+  },
+  showDelta: runIndex < jobs.length - 1,
+  showBaselineValue: runIndex < jobs.length - 1,
+  size: "large"
+});
+
+export const BundleAssetsTotalsChartBars = _ref => {
+  let {
+    className,
+    jobs,
+    customComponentLink: CustomComponentLink
+  } = _ref;
   const rootClassName = cx(css.root, className);
   const items = webpack.compareBySection.sizes(jobs);
   const dataGraphs = [];
-  items.forEach(({
-    runs
-  }) => {
+  items.forEach(_ref2 => {
+    let {
+      runs
+    } = _ref2;
     runs.forEach((run, runIndex) => {
       dataGraphs[runIndex] = [...(dataGraphs[runIndex] || []), _get(run, 'value', 0)];
     });
@@ -37,10 +52,11 @@ export const BundleAssetsTotalsChartBars = ({
 
   const maxValue = _max(maxValues);
 
-  const labels = items.map(({
-    key,
-    label
-  }) => {
+  const labels = items.map(_ref3 => {
+    let {
+      key,
+      label
+    } = _ref3;
     const fileType = ASSETS_SIZES_FILE_TYPE_MAP[key];
     const componentData = getBundleAssetsFileTypeComponentLink(fileType, label);
     return /*#__PURE__*/React.createElement(CustomComponentLink, _extends({
@@ -48,19 +64,6 @@ export const BundleAssetsTotalsChartBars = ({
     }, componentData), label);
   });
   const colors = getColors(_max(_map(dataGraphs, values => values.length)));
-
-  const getTooltip = (itemIndex, runIndex) => () => /*#__PURE__*/React.createElement(SummaryItem, {
-    className: css.itemTooltip,
-    id: _get(items, [itemIndex, 'key']),
-    data: {
-      current: _get(items, [itemIndex, 'runs', runIndex, 'value'], 0),
-      baseline: _get(items, [itemIndex, 'runs', runIndex + 1, 'value'], 0)
-    },
-    showDelta: runIndex < jobs.length - 1,
-    showBaselineValue: runIndex < jobs.length - 1,
-    size: "large"
-  });
-
   return /*#__PURE__*/React.createElement(Stack, {
     className: rootClassName,
     space: "medium"
@@ -72,7 +75,7 @@ export const BundleAssetsTotalsChartBars = ({
       value,
       color: colors[valueIndex],
       label: labels[valueIndex],
-      getItemTooltip: getTooltip(valueIndex, runIndex)
+      getItemTooltip: getTooltip(items, jobs, valueIndex, runIndex)
     }));
     return /*#__PURE__*/React.createElement("div", {
       key: internalBuildNumber || runIndex,

package/lib-esm/components/bundle-assets-totals-table/bundle-assets-totals-table.js

@@ -5,11 +5,12 @@ import * as webpack from '@bundle-stats/utils/lib-esm/webpack';
 import { ASSETS_SIZES_FILE_TYPE_MAP } from '../../constants';
 import { MetricsTable } from '../metrics-table';
 import { ComponentLink } from '../component-link';
-export const BundleAssetsTotalsTable = ({
-  className,
-  jobs,
-  customComponentLink: CustomComponentLink
-}) => {
+export const BundleAssetsTotalsTable = _ref => {
+  let {
+    className,
+    jobs,
+    customComponentLink: CustomComponentLink
+  } = _ref;
   const items = webpack.compareBySection.sizes(jobs);
 
   const renderRowHeader = item => {

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

@@ -25,12 +25,14 @@ import { MetricsTableTitle } from '../metrics-table-title';
 import { ModuleInfo } from '../module-info';
 import css from './bundle-modules.module.css';
 
-const RowHeader = ({
-  row,
-  chunks,
-  labels,
-  CustomComponentLink
-}) => {
+const RowHeader = _ref => {
+  let {
+    row,
+    chunks,
+    labels,
+    CustomComponentLink
+  } = _ref;
+
   const chunkIds = _map(chunks, 'id');
 
   const [showPopopver, setPopover] = useState(false);
@@ -43,17 +45,20 @@ const RowHeader = ({
   }, !showPopopver ? content : /*#__PURE__*/React.createElement(Popover, {
     ariaLabel: "View module info",
     label: content
-  }, ({
-    popoverToggle
-  }) => /*#__PURE__*/React.createElement(ModuleInfo, {
-    className: css.namePopover,
-    item: row,
-    chunks: chunks,
-    chunkIds: chunkIds,
-    labels: labels,
-    customComponentLink: CustomComponentLink,
-    onClick: popoverToggle
-  })));
+  }, _ref2 => {
+    let {
+      popoverToggle
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(ModuleInfo, {
+      className: css.namePopover,
+      item: row,
+      chunks: chunks,
+      chunkIds: chunkIds,
+      labels: labels,
+      customComponentLink: CustomComponentLink,
+      onClick: popoverToggle
+    });
+  }));
 };
 
 RowHeader.propTypes = {
@@ -71,35 +76,39 @@ RowHeader.defaultProps = {
   chunks: []
 };
 
-const getRenderRowHeader = ({
-  labels,
-  chunks,
-  CustomComponentLink
-}) => row => /*#__PURE__*/React.createElement(RowHeader, {
-  row: row,
-  chunks: chunks,
-  labels: labels,
-  CustomComponentLink: CustomComponentLink
-});
+const getRenderRowHeader = _ref3 => {
+  let {
+    labels,
+    chunks,
+    CustomComponentLink
+  } = _ref3;
+  return row => /*#__PURE__*/React.createElement(RowHeader, {
+    row: row,
+    chunks: chunks,
+    labels: labels,
+    CustomComponentLink: CustomComponentLink
+  });
+};
 
-export const BundleModules = ({
-  className,
-  jobs,
-  items,
-  chunks,
-  totalRowCount,
-  updateFilters,
-  resetFilters,
-  resetAllFilters,
-  filters,
-  sortFields,
-  sort,
-  updateSort,
-  search,
-  updateSearch,
-  hasActiveFilters,
-  customComponentLink: CustomComponentLink
-}) => {
+export const BundleModules = _ref4 => {
+  let {
+    className,
+    jobs,
+    items,
+    chunks,
+    totalRowCount,
+    updateFilters,
+    resetFilters,
+    resetAllFilters,
+    filters,
+    sortFields,
+    sort,
+    updateSort,
+    search,
+    updateSearch,
+    hasActiveFilters,
+    customComponentLink: CustomComponentLink
+  } = _ref4;
   const rootClassName = cx(css.root, className);
   const labels = useMemo(() => _map(jobs, 'label'), [jobs]);
   const renderRowHeader = useMemo(() => getRenderRowHeader({
@@ -134,15 +143,18 @@ export const BundleModules = ({
     ...(!_isEmpty(chunks) && {
       [MODULE_CHUNK]: {
         label: 'Chunk',
-        ...chunks.reduce((chunkFilters, {
-          id,
-          name
-        }) => ({ ...chunkFilters,
-          [id]: {
-            label: name,
-            defaultValue: _get(filters, `${MODULE_CHUNK}.${id}`, true)
-          }
-        }), {})
+        ...chunks.reduce((chunkFilters, _ref5) => {
+          let {
+            id,
+            name
+          } = _ref5;
+          return { ...chunkFilters,
+            [id]: {
+              label: name,
+              defaultValue: _get(filters, `${MODULE_CHUNK}.${id}`, true)
+            }
+          };
+        }, {})
       }
     }),
     // Module source types
@@ -160,19 +172,22 @@ export const BundleModules = ({
     className: rootClassName
   }, /*#__PURE__*/React.createElement(Toolbar, {
     className: css.toolbar,
-    renderActions: ({
-      actionClassName
-    }) => /*#__PURE__*/React.createElement(FlexStack, {
-      space: "xxsmall",
-      className: cx(css.dropdown, actionClassName)
-    }, /*#__PURE__*/React.createElement(SortDropdown, _extends({
-      className: css.tableDropdown,
-      fields: sortFields,
-      onChange: updateSort
-    }, sort)), /*#__PURE__*/React.createElement(MetricsTableOptions, {
-      handleViewAll: resetAllFilters,
-      handleResetFilters: resetFilters
-    }))
+    renderActions: _ref6 => {
+      let {
+        actionClassName
+      } = _ref6;
+      return /*#__PURE__*/React.createElement(FlexStack, {
+        space: "xxsmall",
+        className: cx(css.dropdown, actionClassName)
+      }, /*#__PURE__*/React.createElement(SortDropdown, _extends({
+        className: css.tableDropdown,
+        fields: sortFields,
+        onChange: updateSort
+      }, sort)), /*#__PURE__*/React.createElement(MetricsTableOptions, {
+        handleViewAll: resetAllFilters,
+        handleResetFilters: resetFilters
+      }));
+    }
   }, /*#__PURE__*/React.createElement(FlexStack, null, /*#__PURE__*/React.createElement(MetricsTableSearch, {
     className: css.toolbarSearch,
     search: search,

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

@@ -49,11 +49,12 @@ export const getRowFilter = filters => row => {
 
   return true;
 };
-export const useModuleFilterByChunk = ({
-  jobs,
-  filters,
-  chunkIds
-}) => {
+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) => {
@@ -74,7 +75,9 @@ export const useModuleFilterByChunk = ({
       const {
         modules
       } = (job == null ? void 0 : (_job$metrics = job.metrics) == null ? void 0 : _job$metrics.webpack) || {};
-      const filteredModules = Object.entries(modules).reduce((agg, [moduleId, moduleEntry]) => {
+      const filteredModules = Object.entries(modules).reduce((agg, _ref2) => {
+        let [moduleId, moduleEntry] = _ref2;
+
         const match = _intersection(moduleEntry.chunkIds, includedChunkIds);
 
         if (match.length > 0) {

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

@@ -28,9 +28,12 @@ export const BundleModules = props => {
     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(), ({
-    id
-  }) => id);
+  }).flat(), _ref => {
+    let {
+      id
+    } = _ref;
+    return id;
+  });
 
   const chunkIds = _map(chunks, 'id');
 

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

@@ -21,13 +21,14 @@ import { MetricsTableOptions } from '../metrics-table-options';
 import { MetricsTableTitle } from '../metrics-table-title';
 import css from './bundle-packages.module.css';
 
-const PackagePopoverContent = ({
-  name,
-  fullName,
-  path,
-  duplicate,
-  CustomComponentLink
-}) => {
+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, {
@@ -75,10 +76,11 @@ PackagePopoverContent.defaultProps = {
   path: ''
 };
 
-const PackageRowHeader = ({
-  item,
-  CustomComponentLink
-}) => {
+const PackageRowHeader = _ref2 => {
+  let {
+    item,
+    CustomComponentLink
+  } = _ref2;
   const packageNames = item.label.split(PACKAGES_SEPARATOR);
   const {
     path
@@ -147,19 +149,22 @@ export const BundlePackages = props => {
     className: cx(css.root, className)
   }, /*#__PURE__*/React.createElement(Toolbar, {
     className: css.toolbar,
-    renderActions: ({
-      actionClassName
-    }) => /*#__PURE__*/React.createElement(FlexStack, {
-      space: "xxsmall",
-      className: cx(css.dropdown, actionClassName)
-    }, /*#__PURE__*/React.createElement(SortDropdown, _extends({
-      fields: sortFields
-    }, sort, {
-      onChange: updateSort
-    })), /*#__PURE__*/React.createElement(MetricsTableOptions, {
-      handleViewAll: resetAllFilters,
-      handleResetFilters: resetFilters
-    }))
+    renderActions: _ref3 => {
+      let {
+        actionClassName
+      } = _ref3;
+      return /*#__PURE__*/React.createElement(FlexStack, {
+        space: "xxsmall",
+        className: cx(css.dropdown, actionClassName)
+      }, /*#__PURE__*/React.createElement(SortDropdown, _extends({
+        fields: sortFields
+      }, sort, {
+        onChange: updateSort
+      })), /*#__PURE__*/React.createElement(MetricsTableOptions, {
+        handleViewAll: resetAllFilters,
+        handleResetFilters: resetFilters
+      }));
+    }
   }, /*#__PURE__*/React.createElement(FlexStack, null, /*#__PURE__*/React.createElement(MetricsTableSearch, {
     className: css.toolbarSearch,
     placeholder: "Search by name",

package/lib-esm/components/component-link.js

@@ -5,12 +5,13 @@ import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import { getComponentStateQueryString } from '@bundle-stats/utils';
 import { SECTION_URLS } from '../constants';
-export const ComponentLink = ({
-  section,
-  title,
-  params,
-  ...props
-}) => {
+export const ComponentLink = _ref => {
+  let {
+    section,
+    title,
+    params,
+    ...props
+  } = _ref;
   const search = getComponentStateQueryString(params);
   const location = {
     pathname: SECTION_URLS[section],

package/lib-esm/components/delta/delta.js

@@ -2,12 +2,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import css from './delta.module.css';
-export const Delta = ({
-  className,
-  displayValue,
-  deltaType,
-  inverted
-}) => {
+export const Delta = _ref => {
+  let {
+    className,
+    displayValue,
+    deltaType,
+    inverted
+  } = _ref;
   const rootClassName = cx(css.root, className, inverted && css.inverted, css[deltaType]);
   return /*#__PURE__*/React.createElement("span", {
     className: rootClassName