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

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

package/lib-esm/components/job-meta/job-meta.js

@@ -14,10 +14,11 @@ export const JobMeta = props => {
   const rootClassName = cx(css.root, className);
   return /*#__PURE__*/React.createElement(Component, _extends({
     className: rootClassName
-  }, restProps), meta.map(({
-    title,
-    content
-  }, index) => {
+  }, restProps), meta.map((_ref, index) => {
+    let {
+      title,
+      content
+    } = _ref;
     const key = index;
     return /*#__PURE__*/React.createElement("div", {
       className: css.item,

package/lib-esm/components/job-name/job-name.js

@@ -4,17 +4,20 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Tooltip } from '../../ui/tooltip';
 import css from './job-name.module.css';
-export const JobName = ({
-  as: Component,
-  title,
-  internalBuildNumber,
-  children,
-  ...restProps
-}) => /*#__PURE__*/React.createElement(Tooltip, _extends({
-  className: css.root,
-  as: Component,
-  title: title
-}, restProps), children || `Job #${internalBuildNumber}`);
+export const JobName = _ref => {
+  let {
+    as: Component,
+    title,
+    internalBuildNumber,
+    children,
+    ...restProps
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Tooltip, _extends({
+    className: css.root,
+    as: Component,
+    title: title
+  }, restProps), children || `Job #${internalBuildNumber}`);
+};
 JobName.defaultProps = {
   as: 'span',
   title: '',

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

@@ -4,15 +4,16 @@ import cx from 'classnames';
 import styles from './metric.module.css'; // Separate value and unit
 
 const EXTRACT_VALUE_UNIT_PATTERN = /([\d|.|,| ]*)(\w*|%)$/;
-export const Metric = ({
-  className,
-  value,
-  formatter,
-  inline,
-  anchored,
-  children,
-  enhanced
-}) => {
+export const Metric = _ref => {
+  let {
+    className,
+    value,
+    formatter,
+    inline,
+    anchored,
+    children,
+    enhanced
+  } = _ref;
   const formattedValue = formatter(value); // eslint-disable-next-line no-unused-vars
 
   const [matched, displayValue, displayUnit] = enhanced && formattedValue ? formattedValue.match(EXTRACT_VALUE_UNIT_PATTERN) : [null, formattedValue, null];

package/lib-esm/components/metrics-table/metrics-table.js

@@ -125,16 +125,17 @@ const getRows = (runs, items, renderRowHeader) => items.map((item, index) => {
   };
 });
 
-export const MetricsTable = ({
-  className,
-  renderRowHeader,
-  runs,
-  items,
-  emptyMessage,
-  showHeaderSum,
-  headerRows,
-  title
-}) => {
+export const MetricsTable = _ref => {
+  let {
+    className,
+    renderRowHeader,
+    runs,
+    items,
+    emptyMessage,
+    showHeaderSum,
+    headerRows,
+    title
+  } = _ref;
   const {
     headers,
     columnClassNames
@@ -161,16 +162,19 @@ export const MetricsTable = ({
     return /*#__PURE__*/React.createElement(Table.Tr, {
       className: rowClassName
     }, cells.map(header => /*#__PURE__*/React.createElement(Table.Th, header)));
-  })), /*#__PURE__*/React.createElement(Table.TBody, null, !_isEmpty(rows) ? rows.map(({
-    key,
-    className: rowClassName,
-    cells
-  }) => /*#__PURE__*/React.createElement(Table.Tr, {
-    key: key,
-    className: rowClassName
-  }, cells.map((cell, index) => /*#__PURE__*/React.createElement(Table.Td, {
-    className: columnClassNames[index]
-  }, cell)))) : /*#__PURE__*/React.createElement(Table.Tr, null, /*#__PURE__*/React.createElement(Table.Td, {
+  })), /*#__PURE__*/React.createElement(Table.TBody, null, !_isEmpty(rows) ? rows.map(_ref2 => {
+    let {
+      key,
+      className: rowClassName,
+      cells
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(Table.Tr, {
+      key: key,
+      className: rowClassName
+    }, cells.map((cell, index) => /*#__PURE__*/React.createElement(Table.Td, {
+      className: columnClassNames[index]
+    }, cell)));
+  }) : /*#__PURE__*/React.createElement(Table.Tr, null, /*#__PURE__*/React.createElement(Table.Td, {
     className: styles.empty,
     colSpan: (columnClassNames == null ? void 0 : columnClassNames.length) || 1
   }, emptyMessage))));

package/lib-esm/components/metrics-table-options/metrics-table-options.js

@@ -14,11 +14,13 @@ export const MetricsTableOptions = props => {
   return /*#__PURE__*/React.createElement(Dropdown, _extends({
     className: className,
     glyph: "menu"
-  }, restProps), ({
-    MenuItem,
-    menu,
-    menuItemClassName
-  }) => {
+  }, restProps), _ref => {
+    let {
+      MenuItem,
+      menu,
+      menuItemClassName
+    } = _ref;
+
     const getButtonOnClick = handler => () => {
       handler();
       menu.toggle();

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

@@ -12,38 +12,50 @@ import { FlexStack } from '../../layout/flex-stack';
 import { ComponentLink } from '../component-link';
 import { SummaryItem } from '../summary-item';
 import css from './summary.module.css';
-export const Summary = ({
-  className,
-  size,
-  keys,
-  data,
-  loading,
-  showSummaryItemDelta,
-  summaryItemLink: SummaryItemCustomLink
-}) => /*#__PURE__*/React.createElement(Box, {
-  outline: true,
-  className: cx(css.root, className)
-}, /*#__PURE__*/React.createElement(FlexStack, {
-  className: css.items
-}, Array.from(METRIC_COMPONENT_LINKS).filter(([metricId]) => keys.includes(metricId)).map(([metricId, metricOptions]) => /*#__PURE__*/React.createElement(SummaryItem, {
-  as: ({
-    className: itemClassName,
-    ...itemProps
-  }) => /*#__PURE__*/React.createElement(Box, _extends({
-    padding: ['xsmall', 'small'],
-    className: cx(itemClassName, css.summaryItemLink)
-  }, itemProps, {
-    as: SummaryItemCustomLink
-  }, metricOptions.link)),
-  size: size,
-  key: metricId,
-  id: metricId,
-  data: _get(data, metricId),
-  loading: loading,
-  showMetricDescription: true,
-  showDelta: showSummaryItemDelta && metricOptions.showDelta !== false,
-  className: css.item
-}))));
+export const Summary = _ref => {
+  let {
+    className,
+    size,
+    keys,
+    data,
+    loading,
+    showSummaryItemDelta,
+    summaryItemLink: SummaryItemCustomLink
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Box, {
+    outline: true,
+    className: cx(css.root, className)
+  }, /*#__PURE__*/React.createElement(FlexStack, {
+    className: css.items
+  }, Array.from(METRIC_COMPONENT_LINKS).filter(_ref2 => {
+    let [metricId] = _ref2;
+    return keys.includes(metricId);
+  }).map(_ref3 => {
+    let [metricId, metricOptions] = _ref3;
+    return /*#__PURE__*/React.createElement(SummaryItem, {
+      as: _ref4 => {
+        let {
+          className: itemClassName,
+          ...itemProps
+        } = _ref4;
+        return /*#__PURE__*/React.createElement(Box, _extends({
+          padding: ['xsmall', 'small'],
+          className: cx(itemClassName, css.summaryItemLink)
+        }, itemProps, {
+          as: SummaryItemCustomLink
+        }, metricOptions.link));
+      },
+      size: size,
+      key: metricId,
+      id: metricId,
+      data: _get(data, metricId),
+      loading: loading,
+      showMetricDescription: true,
+      showDelta: showSummaryItemDelta && metricOptions.showDelta !== false,
+      className: css.item
+    });
+  })));
+};
 Summary.defaultProps = {
   className: '',
   data: null,

package/lib-esm/components/summary/summary.stories.js

@@ -34,12 +34,15 @@ stories.add('single run', () => /*#__PURE__*/React.createElement(Summary, {
 }));
 stories.add('with link', () => /*#__PURE__*/React.createElement(Summary, {
   data: MULTIPLE_JOBS[0].summary,
-  summaryItemLink: ({
-    keyProps,
-    ...props
-  }) => /*#__PURE__*/React.createElement("button", _extends({
-    type: "button"
-  }, props, {
-    onClick: () => alert(JSON.stringify(keyProps))
-  }))
+  summaryItemLink: _ref => {
+    let {
+      keyProps,
+      ...props
+    } = _ref;
+    return /*#__PURE__*/React.createElement("button", _extends({
+      type: "button"
+    }, props, {
+      onClick: () => alert(JSON.stringify(keyProps))
+    }));
+  }
 }));

package/lib-esm/components/summary-item/summary-item.js

@@ -12,10 +12,12 @@ import { Metric } from '../metric';
 import { Delta } from '../delta';
 import css from './summary-item.module.css';
 
-const MetricInfo = ({
-  description,
-  url
-}) => {
+const MetricInfo = _ref => {
+  let {
+    description,
+    url
+  } = _ref;
+
   // Workaround cases where the parent is a link
   const readMoreOnClick = () => {
     window.open(url);
@@ -37,17 +39,18 @@ MetricInfo.propTypes = {
 MetricInfo.defaultProps = {
   url: ''
 };
-export const SummaryItem = ({
-  className,
-  as: Component,
-  size,
-  id,
-  data,
-  loading,
-  showDelta,
-  showMetricDescription,
-  ...props
-}) => {
+export const SummaryItem = _ref2 => {
+  let {
+    className,
+    as: Component,
+    size,
+    id,
+    data,
+    loading,
+    showDelta,
+    showMetricDescription,
+    ...props
+  } = _ref2;
   const {
     baseline,
     current