@bundle-stats/ui 4.1.1-alpha.3 → 4.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/app/app.js +20 -85
- package/lib/app/app.stories.js +2 -20
- package/lib/app/header/header.js +2 -11
- package/lib/app/header/index.js +0 -2
- package/lib/app/index.js +0 -2
- package/lib/components/asset-info/asset-info.js +7 -25
- package/lib/components/asset-info/asset-info.stories.js +0 -5
- package/lib/components/asset-info/index.js +0 -2
- package/lib/components/browsertime-table/browsertime-table.js +1 -12
- package/lib/components/browsertime-table/browsertime-table.stories.js +1 -11
- package/lib/components/browsertime-table/index.js +0 -2
- package/lib/components/bundle-assets/bundle-assets.constants.js +0 -3
- package/lib/components/bundle-assets/bundle-assets.js +29 -86
- package/lib/components/bundle-assets/bundle-assets.stories.js +2 -23
- package/lib/components/bundle-assets/bundle-assets.utils.js +0 -26
- package/lib/components/bundle-assets/index.js +21 -49
- package/lib/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.js +3 -33
- package/lib/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.stories.js +0 -8
- package/lib/components/bundle-assets-totals-chart-bars/index.js +0 -2
- package/lib/components/bundle-assets-totals-table/bundle-assets-totals-table.js +7 -29
- package/lib/components/bundle-assets-totals-table/bundle-assets-totals-table.stories.js +0 -10
- package/lib/components/bundle-assets-totals-table/index.js +0 -2
- package/lib/components/bundle-modules/bundle-modules.constants.js +0 -3
- package/lib/components/bundle-modules/bundle-modules.js +24 -77
- package/lib/components/bundle-modules/bundle-modules.stories.js +16 -30
- package/lib/components/bundle-modules/bundle-modules.utils.js +19 -54
- package/lib/components/bundle-modules/index.js +25 -56
- package/lib/components/bundle-packages/bundle-packages.constants.js +0 -3
- package/lib/components/bundle-packages/bundle-packages.js +33 -83
- package/lib/components/bundle-packages/bundle-packages.stories.js +2 -22
- package/lib/components/bundle-packages/bundle-packages.utils.js +0 -23
- package/lib/components/bundle-packages/index.js +23 -49
- package/lib/components/component-link.js +4 -17
- package/lib/components/delta/delta.js +3 -10
- package/lib/components/delta/delta.stories.js +0 -5
- package/lib/components/delta/index.js +0 -2
- package/lib/components/duplicate-packages-warning/duplicate-packages-warning.js +3 -15
- package/lib/components/duplicate-packages-warning/duplicate-packages-warning.module.css +1 -0
- package/lib/components/duplicate-packages-warning/duplicate-packages-warning.stories.js +0 -5
- package/lib/components/duplicate-packages-warning/index.js +0 -2
- package/lib/components/index.js +0 -22
- package/lib/components/job-header/index.js +0 -2
- package/lib/components/job-header/job-header.js +6 -22
- package/lib/components/job-header/job-header.stories.js +0 -5
- package/lib/components/job-meta/index.js +0 -2
- package/lib/components/job-meta/job-meta.js +4 -18
- package/lib/components/job-meta/job-meta.stories.js +0 -5
- package/lib/components/job-name/index.js +0 -2
- package/lib/components/job-name/job-name.js +4 -19
- package/lib/components/job-name/job-name.stories.js +0 -5
- package/lib/components/jobs-header/index.js +0 -2
- package/lib/components/jobs-header/jobs-header.js +1 -12
- package/lib/components/jobs-header/jobs-header.stories.js +0 -5
- package/lib/components/lighthouse-table/index.js +0 -2
- package/lib/components/lighthouse-table/lighthouse-table.js +1 -12
- package/lib/components/lighthouse-table/lighthouse-table.stories.js +0 -7
- package/lib/components/metric/index.js +0 -2
- package/lib/components/metric/metric.js +27 -45
- package/lib/components/metric/metric.stories.js +0 -6
- package/lib/components/metrics-table/index.js +0 -2
- package/lib/components/metrics-table/metrics-table.js +36 -75
- package/lib/components/metrics-table/metrics-table.stories.js +0 -5
- package/lib/components/metrics-table-options/index.js +0 -2
- package/lib/components/metrics-table-options/metrics-table-options.js +5 -19
- package/lib/components/metrics-table-options/metrics-table-options.stories.js +0 -5
- package/lib/components/metrics-table-search/index.js +0 -2
- package/lib/components/metrics-table-search/metrics-table-search.js +9 -28
- package/lib/components/metrics-table-search/metrics-table-search.stories.js +3 -19
- package/lib/components/metrics-table-title/index.js +0 -2
- package/lib/components/metrics-table-title/metrics-table-title.js +4 -16
- package/lib/components/module-info/index.js +0 -2
- package/lib/components/module-info/module-info.js +6 -22
- package/lib/components/module-info/module-info.stories.js +0 -5
- package/lib/components/summary/index.js +0 -2
- package/lib/components/summary/summary.js +9 -33
- package/lib/components/summary/summary.module.css +4 -1
- package/lib/components/summary/summary.stories.js +1 -15
- package/lib/components/summary-item/index.js +0 -2
- package/lib/components/summary-item/summary-item.js +14 -44
- package/lib/components/summary-item/summary-item.stories.js +0 -14
- package/lib/components/total-size-type-title/index.js +0 -2
- package/lib/components/total-size-type-title/total-size-type-title.js +0 -13
- package/lib/constants.js +0 -8
- package/lib/css/default.css +3 -1
- package/lib/css/variables.css +1 -1
- package/lib/hooks/rows-filter.js +3 -7
- package/lib/hooks/rows-sort.js +12 -25
- package/lib/hooks/search-params.js +21 -51
- package/lib/index.js +0 -10
- package/lib/layout/box/box.js +10 -39
- package/lib/layout/box/box.stories.js +0 -5
- package/lib/layout/box/index.js +0 -1
- package/lib/layout/flex-stack/flex-stack.js +4 -18
- package/lib/layout/flex-stack/flex-stack.stories.js +0 -6
- package/lib/layout/flex-stack/index.js +0 -2
- package/lib/layout/footer/footer.js +1 -16
- package/lib/layout/footer/footer.stories.js +0 -5
- package/lib/layout/footer/index.js +0 -1
- package/lib/layout/header/header.js +3 -13
- package/lib/layout/header/header.stories.js +0 -7
- package/lib/layout/header/index.js +0 -1
- package/lib/layout/index.js +0 -7
- package/lib/layout/separator.js +2 -14
- package/lib/layout/stack/index.js +0 -2
- package/lib/layout/stack/stack.js +4 -18
- package/lib/layout/stack/stack.stories.js +0 -6
- package/lib/layout/sub-header/index.js +0 -2
- package/lib/layout/sub-header/sub-header.js +6 -16
- package/lib/layout/sub-header/sub-header.stories.js +0 -6
- package/lib/prototypes/typography.stories.js +6 -15
- package/lib/query-state.js +5 -28
- package/lib/stories/index.js +0 -2
- package/lib/stories/wrapper.js +0 -9
- package/lib/ui/alert/alert.js +2 -10
- package/lib/ui/alert/alert.stories.js +0 -5
- package/lib/ui/alert/index.js +0 -2
- package/lib/ui/container/container.js +2 -15
- package/lib/ui/container/container.stories.js +0 -4
- package/lib/ui/container/index.js +0 -1
- package/lib/ui/dropdown/dropdown.js +5 -20
- package/lib/ui/dropdown/dropdown.stories.js +0 -5
- package/lib/ui/dropdown/index.js +0 -2
- package/lib/ui/empty-set/empty-set.js +3 -17
- package/lib/ui/empty-set/empty-set.stories.js +0 -5
- package/lib/ui/empty-set/index.js +0 -2
- package/lib/ui/file-name/file-name.js +2 -11
- package/lib/ui/file-name/file-name.stories.js +0 -4
- package/lib/ui/file-name/index.js +0 -1
- package/lib/ui/filters/filters.js +29 -73
- package/lib/ui/filters/filters.stories.js +7 -28
- package/lib/ui/filters/filters.utils.js +13 -42
- package/lib/ui/filters/index.js +8 -35
- package/lib/ui/horizontal-bar-chart/horizontal-bar-chart.js +18 -61
- package/lib/ui/horizontal-bar-chart/horizontal-bar-chart.stories.js +0 -5
- package/lib/ui/horizontal-bar-chart/index.js +0 -2
- package/lib/ui/hover-card/hover-card.js +8 -28
- package/lib/ui/hover-card/hover-card.stories.js +0 -10
- package/lib/ui/hover-card/index.js +0 -2
- package/lib/ui/icon/icon.js +4 -17
- package/lib/ui/icon/icon.stories.js +0 -8
- package/lib/ui/icon/index.js +0 -2
- package/lib/ui/index.js +0 -19
- package/lib/ui/input/index.js +0 -2
- package/lib/ui/input/input.js +2 -14
- package/lib/ui/input/input.stories.js +0 -5
- package/lib/ui/loader/index.js +0 -2
- package/lib/ui/loader/loader.js +2 -15
- package/lib/ui/loader/loader.stories.js +0 -5
- package/lib/ui/logo/index.js +0 -1
- package/lib/ui/logo/logo.js +3 -28
- package/lib/ui/logo/logo.stories.js +1 -10
- package/lib/ui/panels/index.js +0 -1
- package/lib/ui/panels/panels.js +5 -23
- package/lib/ui/panels/panels.stories.js +0 -5
- package/lib/ui/skeleton/index.js +0 -2
- package/lib/ui/skeleton/skeleton.js +3 -15
- package/lib/ui/skeleton/skeleton.stories.js +0 -8
- package/lib/ui/sort-dropdown/index.js +0 -2
- package/lib/ui/sort-dropdown/sort-dropdown.js +18 -50
- package/lib/ui/sort-dropdown/sort-dropdown.stories.js +1 -5
- package/lib/ui/table/index.js +0 -2
- package/lib/ui/table/table.js +4 -13
- package/lib/ui/table/table.stories.js +4 -9
- package/lib/ui/tabs/index.js +0 -1
- package/lib/ui/tabs/tabs.js +5 -21
- package/lib/ui/tabs/tabs.module.css +6 -2
- package/lib/ui/tabs/tabs.stories.js +0 -5
- package/lib/ui/tag/index.js +0 -2
- package/lib/ui/tag/tag.js +8 -21
- package/lib/ui/tag/tag.stories.js +0 -6
- package/lib/ui/toolbar/index.js +0 -2
- package/lib/ui/toolbar/toolbar.js +2 -9
- package/lib/ui/toolbar/toolbar.stories.js +0 -5
- package/lib/ui/tooltip/index.js +0 -2
- package/lib/ui/tooltip/tooltip.js +8 -21
- package/lib/ui/tooltip/tooltip.stories.js +0 -7
- package/lib/utils.js +0 -18
- package/lib-esm/app/app.js +1 -18
- package/lib-esm/app/app.stories.js +3 -5
- package/lib-esm/app/header/header.js +1 -1
- package/lib-esm/components/asset-info/asset-info.js +0 -8
- package/lib-esm/components/browsertime-table/browsertime-table.js +0 -1
- package/lib-esm/components/browsertime-table/browsertime-table.stories.js +2 -1
- package/lib-esm/components/bundle-assets/bundle-assets.js +2 -14
- package/lib-esm/components/bundle-assets/bundle-assets.stories.js +0 -2
- package/lib-esm/components/bundle-assets/bundle-assets.utils.js +4 -11
- package/lib-esm/components/bundle-assets/index.js +0 -1
- package/lib-esm/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.js +0 -7
- package/lib-esm/components/bundle-assets-totals-table/bundle-assets-totals-table.js +1 -4
- package/lib-esm/components/bundle-assets-totals-table/bundle-assets-totals-table.stories.js +0 -2
- package/lib-esm/components/bundle-modules/bundle-modules.js +4 -16
- package/lib-esm/components/bundle-modules/bundle-modules.stories.js +4 -2
- package/lib-esm/components/bundle-modules/bundle-modules.utils.js +15 -25
- package/lib-esm/components/bundle-modules/index.js +0 -6
- package/lib-esm/components/bundle-packages/bundle-packages.js +2 -11
- package/lib-esm/components/bundle-packages/bundle-packages.utils.js +4 -8
- package/lib-esm/components/bundle-packages/index.js +0 -1
- package/lib-esm/components/component-link.js +1 -2
- package/lib-esm/components/duplicate-packages-warning/duplicate-packages-warning.module.css +1 -0
- package/lib-esm/components/job-header/job-header.js +1 -3
- package/lib-esm/components/job-meta/job-meta.js +0 -3
- package/lib-esm/components/job-name/job-name.js +0 -4
- package/lib-esm/components/jobs-header/jobs-header.js +0 -1
- package/lib-esm/components/lighthouse-table/lighthouse-table.js +0 -1
- package/lib-esm/components/metric/metric.js +2 -6
- package/lib-esm/components/metrics-table/metrics-table.js +14 -18
- package/lib-esm/components/metrics-table-options/metrics-table-options.js +0 -3
- package/lib-esm/components/metrics-table-search/metrics-table-search.js +4 -2
- package/lib-esm/components/metrics-table-search/metrics-table-search.stories.js +0 -2
- package/lib-esm/components/module-info/module-info.js +0 -4
- package/lib-esm/components/summary/summary.js +0 -2
- package/lib-esm/components/summary/summary.module.css +4 -1
- package/lib-esm/components/summary/summary.stories.js +0 -1
- package/lib-esm/components/summary-item/summary-item.js +0 -9
- package/lib-esm/constants.js +2 -1
- package/lib-esm/css/default.css +3 -1
- package/lib-esm/css/variables.css +1 -1
- package/lib-esm/hooks/rows-filter.js +0 -1
- package/lib-esm/hooks/search-params.js +9 -17
- package/lib-esm/layout/box/box.js +0 -6
- package/lib-esm/layout/flex-stack/flex-stack.js +0 -1
- package/lib-esm/layout/footer/footer.js +1 -4
- package/lib-esm/layout/header/header.js +0 -3
- package/lib-esm/layout/separator.js +1 -2
- package/lib-esm/layout/stack/stack.js +0 -1
- package/lib-esm/prototypes/typography.stories.js +4 -4
- package/lib-esm/query-state.js +2 -5
- package/lib-esm/stories/wrapper.js +0 -1
- package/lib-esm/ui/container/container.js +0 -2
- package/lib-esm/ui/dropdown/dropdown.js +0 -5
- package/lib-esm/ui/file-name/file-name.js +0 -2
- package/lib-esm/ui/filters/filters.js +4 -14
- package/lib-esm/ui/filters/filters.stories.js +5 -4
- package/lib-esm/ui/filters/filters.utils.js +9 -15
- package/lib-esm/ui/filters/index.js +4 -10
- package/lib-esm/ui/horizontal-bar-chart/horizontal-bar-chart.js +0 -12
- package/lib-esm/ui/hover-card/hover-card.js +2 -12
- package/lib-esm/ui/hover-card/hover-card.stories.js +0 -3
- package/lib-esm/ui/icon/icon.js +0 -1
- package/lib-esm/ui/icon/icon.stories.js +0 -2
- package/lib-esm/ui/input/input.js +0 -1
- package/lib-esm/ui/loader/loader.js +0 -2
- package/lib-esm/ui/logo/logo.js +0 -11
- package/lib-esm/ui/logo/logo.stories.js +1 -5
- package/lib-esm/ui/panels/panels.js +2 -5
- package/lib-esm/ui/skeleton/skeleton.js +0 -1
- package/lib-esm/ui/sort-dropdown/sort-dropdown.js +0 -8
- package/lib-esm/ui/sort-dropdown/sort-dropdown.stories.js +1 -0
- package/lib-esm/ui/table/table.js +0 -2
- package/lib-esm/ui/tabs/tabs.js +0 -4
- package/lib-esm/ui/tabs/tabs.module.css +6 -2
- package/lib-esm/ui/tag/tag.js +0 -1
- package/lib-esm/ui/tooltip/tooltip.js +1 -2
- package/lib-esm/ui/tooltip/tooltip.stories.js +0 -2
- package/lib-esm/utils.js +2 -9
- package/package.json +15 -15
- package/src/components/duplicate-packages-warning/duplicate-packages-warning.module.css +1 -0
- package/src/components/summary/summary.module.css +4 -1
- package/src/css/default.css +3 -1
- package/src/css/variables.css +1 -1
- package/src/ui/tabs/tabs.module.css +6 -2
package/lib/utils.js
CHANGED
|
@@ -4,23 +4,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.getRenderChildWithClassName = exports.getColors = void 0;
|
|
7
|
-
|
|
8
7
|
var _chunk2 = _interopRequireDefault(require("lodash/chunk"));
|
|
9
|
-
|
|
10
8
|
var _react = _interopRequireDefault(require("react"));
|
|
11
|
-
|
|
12
9
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
13
|
-
|
|
14
10
|
var _chartColors = _interopRequireDefault(require("./chart-colors.json"));
|
|
15
|
-
|
|
16
11
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
17
|
-
|
|
18
12
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
19
|
-
|
|
20
13
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
21
|
-
|
|
22
14
|
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
23
|
-
|
|
24
15
|
var getColors = function getColors() {
|
|
25
16
|
var count = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 2;
|
|
26
17
|
var chunks = (0, _chunk2["default"])(_chartColors["default"], Math.round(_chartColors["default"].length / count));
|
|
@@ -28,36 +19,27 @@ var getColors = function getColors() {
|
|
|
28
19
|
if (index === 0) {
|
|
29
20
|
return chunkColors[0];
|
|
30
21
|
}
|
|
31
|
-
|
|
32
22
|
if (index === chunks.length - 1) {
|
|
33
23
|
return chunkColors[chunkColors.length - 1];
|
|
34
24
|
}
|
|
35
|
-
|
|
36
25
|
return chunkColors[Math.floor(chunkColors.length / 2)];
|
|
37
26
|
});
|
|
38
27
|
};
|
|
39
|
-
|
|
40
28
|
exports.getColors = getColors;
|
|
41
|
-
|
|
42
29
|
var getRenderChildWithClassName = function getRenderChildWithClassName(className) {
|
|
43
30
|
return function (child) {
|
|
44
31
|
if (child === null || child === '') {
|
|
45
32
|
return null;
|
|
46
33
|
}
|
|
47
|
-
|
|
48
34
|
var props = child.props;
|
|
49
|
-
|
|
50
35
|
if (!props) {
|
|
51
36
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
52
37
|
className: className
|
|
53
38
|
}, child);
|
|
54
39
|
}
|
|
55
|
-
|
|
56
40
|
return /*#__PURE__*/_react["default"].cloneElement(child, _objectSpread(_objectSpread({}, props), {}, {
|
|
57
41
|
className: (0, _classnames["default"])(className, props.className) // eslint-disable-line react/prop-types
|
|
58
|
-
|
|
59
42
|
}));
|
|
60
43
|
};
|
|
61
44
|
};
|
|
62
|
-
|
|
63
45
|
exports.getRenderChildWithClassName = getRenderChildWithClassName;
|
package/lib-esm/app/app.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
|
|
2
|
-
|
|
3
2
|
import React, { useContext, useEffect, useMemo } from 'react';
|
|
4
3
|
import PropTypes from 'prop-types';
|
|
5
4
|
import { HashRouter, NavLink, Route, Switch, useLocation } from 'react-router-dom';
|
|
@@ -22,7 +21,6 @@ import { QueryStateProvider, useComponentQueryState } from '../query-state';
|
|
|
22
21
|
import I18N from '../i18n';
|
|
23
22
|
import { Header } from './header';
|
|
24
23
|
import css from './app.module.css';
|
|
25
|
-
|
|
26
24
|
const ScrollToTop = () => {
|
|
27
25
|
const {
|
|
28
26
|
pathname
|
|
@@ -32,7 +30,6 @@ const ScrollToTop = () => {
|
|
|
32
30
|
}, [pathname]);
|
|
33
31
|
return null;
|
|
34
32
|
};
|
|
35
|
-
|
|
36
33
|
const Layout = _ref => {
|
|
37
34
|
let {
|
|
38
35
|
jobs,
|
|
@@ -50,7 +47,6 @@ const Layout = _ref => {
|
|
|
50
47
|
version: version
|
|
51
48
|
}));
|
|
52
49
|
};
|
|
53
|
-
|
|
54
50
|
Layout.propTypes = {
|
|
55
51
|
jobs: PropTypes.arrayOf(PropTypes.object),
|
|
56
52
|
// eslint-disable-line react/forbid-prop-types
|
|
@@ -63,7 +59,6 @@ Layout.defaultProps = {
|
|
|
63
59
|
const JobsContext = /*#__PURE__*/React.createContext({
|
|
64
60
|
jobs: []
|
|
65
61
|
});
|
|
66
|
-
|
|
67
62
|
const JobsProvider = _ref2 => {
|
|
68
63
|
let {
|
|
69
64
|
jobs,
|
|
@@ -76,10 +71,8 @@ const JobsProvider = _ref2 => {
|
|
|
76
71
|
value: value
|
|
77
72
|
}, restProps));
|
|
78
73
|
};
|
|
79
|
-
|
|
80
74
|
JobsProvider.propTypes = {
|
|
81
75
|
jobs: PropTypes.arrayOf(PropTypes.object).isRequired // eslint-disable-line react/forbid-prop-types
|
|
82
|
-
|
|
83
76
|
};
|
|
84
77
|
|
|
85
78
|
const OverviewContent = () => {
|
|
@@ -104,10 +97,8 @@ const OverviewContent = () => {
|
|
|
104
97
|
outline: true
|
|
105
98
|
}))));
|
|
106
99
|
};
|
|
107
|
-
|
|
108
100
|
const AssetsContent = () => {
|
|
109
101
|
var _jobs$;
|
|
110
|
-
|
|
111
102
|
const [bundleStatsState, bundleStatsSetState] = useComponentQueryState(COMPONENT.BUNDLE_ASSETS);
|
|
112
103
|
const {
|
|
113
104
|
jobs
|
|
@@ -125,10 +116,8 @@ const AssetsContent = () => {
|
|
|
125
116
|
setState: bundleStatsSetState
|
|
126
117
|
}, bundleStatsState)))));
|
|
127
118
|
};
|
|
128
|
-
|
|
129
119
|
const ModulesContent = () => {
|
|
130
120
|
var _jobs$2;
|
|
131
|
-
|
|
132
121
|
const [bundleModulesState, bundleModulesSetState] = useComponentQueryState(COMPONENT.BUNDLE_MODULES);
|
|
133
122
|
const {
|
|
134
123
|
jobs
|
|
@@ -146,10 +135,8 @@ const ModulesContent = () => {
|
|
|
146
135
|
setState: bundleModulesSetState
|
|
147
136
|
}, bundleModulesState)))));
|
|
148
137
|
};
|
|
149
|
-
|
|
150
138
|
const PackagesContent = () => {
|
|
151
139
|
var _jobs$3;
|
|
152
|
-
|
|
153
140
|
const [bundlePackagesState, bundlePackagesSetState] = useComponentQueryState(COMPONENT.BUNDLE_PACKAGES);
|
|
154
141
|
const {
|
|
155
142
|
jobs
|
|
@@ -168,13 +155,11 @@ const PackagesContent = () => {
|
|
|
168
155
|
setState: bundlePackagesSetState
|
|
169
156
|
})))));
|
|
170
157
|
};
|
|
171
|
-
|
|
172
158
|
const AppComponent = _ref3 => {
|
|
173
159
|
let {
|
|
174
160
|
version,
|
|
175
161
|
jobs
|
|
176
162
|
} = _ref3;
|
|
177
|
-
|
|
178
163
|
if ((jobs == null ? void 0 : jobs.length) === 0) {
|
|
179
164
|
return /*#__PURE__*/React.createElement(Layout, {
|
|
180
165
|
version: version
|
|
@@ -182,7 +167,6 @@ const AppComponent = _ref3 => {
|
|
|
182
167
|
className: css.empty
|
|
183
168
|
}, I18N.NO_DATA)));
|
|
184
169
|
}
|
|
185
|
-
|
|
186
170
|
return /*#__PURE__*/React.createElement(JobsProvider, {
|
|
187
171
|
jobs: jobs
|
|
188
172
|
}, /*#__PURE__*/React.createElement(Layout, {
|
|
@@ -239,7 +223,6 @@ const AppComponent = _ref3 => {
|
|
|
239
223
|
component: OverviewContent
|
|
240
224
|
})))));
|
|
241
225
|
};
|
|
242
|
-
|
|
243
226
|
AppComponent.defaultProps = {
|
|
244
227
|
jobs: [],
|
|
245
228
|
version: null
|
|
@@ -250,8 +233,8 @@ AppComponent.propTypes = {
|
|
|
250
233
|
insights: PropTypes.object,
|
|
251
234
|
// eslint-disable-line react/forbid-prop-types
|
|
252
235
|
summary: PropTypes.object // eslint-disable-line react/forbid-prop-types
|
|
253
|
-
|
|
254
236
|
})),
|
|
237
|
+
|
|
255
238
|
version: PropTypes.string
|
|
256
239
|
};
|
|
257
240
|
export const App = props => /*#__PURE__*/React.createElement(HashRouter, null, /*#__PURE__*/React.createElement(ScrollToTop, null), /*#__PURE__*/React.createElement(QueryStateProvider, null, /*#__PURE__*/React.createElement(AppComponent, props)));
|
|
@@ -1,14 +1,11 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { storiesOf } from '@storybook/react';
|
|
3
3
|
import { createJobs } from '@bundle-stats/utils';
|
|
4
|
-
/* eslint-disable */
|
|
5
4
|
|
|
5
|
+
/* eslint-disable */
|
|
6
6
|
import currentData from '../../../../fixtures/job.current.json'; // eslint-disable-line
|
|
7
|
-
|
|
8
7
|
import baselineData from '../../../../fixtures/job.baseline.json'; // eslint-disable-line
|
|
9
|
-
|
|
10
8
|
/* eslint-enable */
|
|
11
|
-
|
|
12
9
|
import { App } from '.';
|
|
13
10
|
const CURRENT_SOURCE = {
|
|
14
11
|
webpack: {
|
|
@@ -59,7 +56,8 @@ stories.add('default', () => /*#__PURE__*/React.createElement(App, {
|
|
|
59
56
|
version: "1.0"
|
|
60
57
|
}));
|
|
61
58
|
stories.add('no insights', () => /*#__PURE__*/React.createElement(App, {
|
|
62
|
-
jobs: [{
|
|
59
|
+
jobs: [{
|
|
60
|
+
...CURRENT_JOB,
|
|
63
61
|
insights: undefined
|
|
64
62
|
}, BASELINE_JOB]
|
|
65
63
|
}));
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
import _map from "lodash/map";
|
|
2
2
|
import _find from "lodash/find";
|
|
3
|
-
|
|
4
3
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
|
|
5
|
-
|
|
6
4
|
import React from 'react';
|
|
7
5
|
import PropTypes from 'prop-types';
|
|
8
6
|
import cx from 'classnames';
|
|
@@ -11,7 +9,6 @@ import { Stack } from '../../layout/stack';
|
|
|
11
9
|
import { FileName } from '../../ui/file-name';
|
|
12
10
|
import { ComponentLink } from '../component-link';
|
|
13
11
|
import css from './asset-info.module.css';
|
|
14
|
-
|
|
15
12
|
const ChunkModulesLink = _ref => {
|
|
16
13
|
let {
|
|
17
14
|
as: Component,
|
|
@@ -19,23 +16,18 @@ const ChunkModulesLink = _ref => {
|
|
|
19
16
|
chunkId,
|
|
20
17
|
name
|
|
21
18
|
} = _ref;
|
|
22
|
-
|
|
23
19
|
const chunk = _find(chunks, {
|
|
24
20
|
id: chunkId
|
|
25
21
|
});
|
|
26
|
-
|
|
27
22
|
if (!chunk) {
|
|
28
23
|
return null;
|
|
29
24
|
}
|
|
30
|
-
|
|
31
25
|
const chunkIds = _map(chunks, 'id');
|
|
32
|
-
|
|
33
26
|
const fileType = getModuleFileType(name);
|
|
34
27
|
return /*#__PURE__*/React.createElement(Component, _extends({
|
|
35
28
|
className: css.viewModules
|
|
36
29
|
}, getBundleModulesByChunk(chunkIds, chunkId, fileType)), "View chunk modules");
|
|
37
30
|
};
|
|
38
|
-
|
|
39
31
|
ChunkModulesLink.propTypes = {
|
|
40
32
|
as: PropTypes.elementType.isRequired,
|
|
41
33
|
chunks: PropTypes.array,
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { storiesOf } from '@storybook/react';
|
|
3
3
|
import { createJobs } from '@bundle-stats/utils';
|
|
4
|
-
import * as browsertime from '@bundle-stats/utils/lib-esm/browsertime';
|
|
4
|
+
import * as browsertime from '@bundle-stats/utils/lib-esm/browsertime';
|
|
5
5
|
|
|
6
|
+
// eslint-disable-next-line import/no-relative-packages
|
|
6
7
|
import browsertimeSourceFixtures from '../../../../../fixtures/browsertime.json';
|
|
7
8
|
import { getWrapperDecorator } from '../../stories';
|
|
8
9
|
import { BrowsertimeTable } from '.';
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
import _map from "lodash/map";
|
|
2
2
|
import _get from "lodash/get";
|
|
3
|
-
|
|
4
3
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
|
|
5
|
-
|
|
6
4
|
import React, { useCallback, useMemo, useState } from 'react';
|
|
7
5
|
import PropTypes from 'prop-types';
|
|
8
6
|
import cx from 'classnames';
|
|
@@ -29,7 +27,6 @@ import css from './bundle-assets.module.css';
|
|
|
29
27
|
const RUN_TITLE_CURRENT = 'Current';
|
|
30
28
|
const RUN_TITLE_BASELINE = 'Baseline';
|
|
31
29
|
const RUNS_LABELS = [RUN_TITLE_CURRENT, RUN_TITLE_BASELINE];
|
|
32
|
-
|
|
33
30
|
const getFileTypeFilters = filters => Object.entries(FILE_TYPE_LABELS).map(_ref => {
|
|
34
31
|
let [id, label] = _ref;
|
|
35
32
|
return {
|
|
@@ -38,10 +35,10 @@ const getFileTypeFilters = filters => Object.entries(FILE_TYPE_LABELS).map(_ref
|
|
|
38
35
|
defaultValue: _get(filters, `${ASSET_FILE_TYPE}.${id}`, true)
|
|
39
36
|
}
|
|
40
37
|
};
|
|
41
|
-
}).reduce((agg, current) => ({
|
|
38
|
+
}).reduce((agg, current) => ({
|
|
39
|
+
...agg,
|
|
42
40
|
...current
|
|
43
41
|
}), {});
|
|
44
|
-
|
|
45
42
|
const getFilters = _ref2 => {
|
|
46
43
|
let {
|
|
47
44
|
compareMode,
|
|
@@ -78,7 +75,6 @@ const getFilters = _ref2 => {
|
|
|
78
75
|
}
|
|
79
76
|
};
|
|
80
77
|
};
|
|
81
|
-
|
|
82
78
|
const TooltipNotPredictive = _ref3 => {
|
|
83
79
|
let {
|
|
84
80
|
runs
|
|
@@ -100,13 +96,11 @@ const TooltipNotPredictive = _ref3 => {
|
|
|
100
96
|
}, /*#__PURE__*/React.createElement("th", null, RUNS_LABELS[index]), /*#__PURE__*/React.createElement("td", null, name), /*#__PURE__*/React.createElement("td", null, value));
|
|
101
97
|
}))));
|
|
102
98
|
};
|
|
103
|
-
|
|
104
99
|
TooltipNotPredictive.defaultProps = {
|
|
105
100
|
runs: []
|
|
106
101
|
};
|
|
107
102
|
TooltipNotPredictive.propTypes = {
|
|
108
103
|
runs: PropTypes.array // eslint-disable-line react/forbid-prop-types
|
|
109
|
-
|
|
110
104
|
};
|
|
111
105
|
|
|
112
106
|
const RowHeader = _ref5 => {
|
|
@@ -157,13 +151,11 @@ const RowHeader = _ref5 => {
|
|
|
157
151
|
className: css.assetNameText,
|
|
158
152
|
name: label
|
|
159
153
|
})), [isChunk, isEntry, isInitial, isNotPredictive, runs]);
|
|
160
|
-
|
|
161
154
|
if (!showHoverCard) {
|
|
162
155
|
return /*#__PURE__*/React.createElement("span", {
|
|
163
156
|
onMouseEnter: handleOnMouseEnter
|
|
164
157
|
}, content);
|
|
165
158
|
}
|
|
166
|
-
|
|
167
159
|
return /*#__PURE__*/React.createElement(HoverCard, {
|
|
168
160
|
label: content
|
|
169
161
|
}, /*#__PURE__*/React.createElement(AssetInfo, {
|
|
@@ -174,7 +166,6 @@ const RowHeader = _ref5 => {
|
|
|
174
166
|
CustomComponentLink: CustomComponentLink
|
|
175
167
|
}));
|
|
176
168
|
};
|
|
177
|
-
|
|
178
169
|
RowHeader.propTypes = {
|
|
179
170
|
row: PropTypes.shape({
|
|
180
171
|
label: PropTypes.string,
|
|
@@ -183,7 +174,6 @@ RowHeader.propTypes = {
|
|
|
183
174
|
isInitial: PropTypes.bool,
|
|
184
175
|
isEntry: PropTypes.bool,
|
|
185
176
|
runs: PropTypes.arrayOf(PropTypes.object) // eslint-disable-line react/forbid-prop-types
|
|
186
|
-
|
|
187
177
|
}).isRequired,
|
|
188
178
|
chunks: PropTypes.arrayOf(PropTypes.shape({
|
|
189
179
|
id: PropTypes.string,
|
|
@@ -225,7 +215,6 @@ export const BundleAssets = props => {
|
|
|
225
215
|
}), [items, totalRowCount]);
|
|
226
216
|
const renderRowHeader = useCallback(row => {
|
|
227
217
|
var _jobs$, _jobs$$meta, _jobs$$meta$webpack;
|
|
228
|
-
|
|
229
218
|
return /*#__PURE__*/React.createElement(RowHeader, {
|
|
230
219
|
row: row,
|
|
231
220
|
labels: _map(jobs, 'label'),
|
|
@@ -294,7 +283,6 @@ BundleAssets.propTypes = {
|
|
|
294
283
|
meta: PropTypes.shape({
|
|
295
284
|
webpack: PropTypes.shape({
|
|
296
285
|
chunks: PropTypes.array // eslint-disable-line react/forbid-prop-types
|
|
297
|
-
|
|
298
286
|
})
|
|
299
287
|
})
|
|
300
288
|
})).isRequired,
|
|
@@ -13,9 +13,7 @@ const JOBS = createJobs([{
|
|
|
13
13
|
webpack: baselineStats
|
|
14
14
|
}]);
|
|
15
15
|
const [currentJob, baselineJob] = JOBS;
|
|
16
|
-
|
|
17
16
|
const setState = params => console.info(params);
|
|
18
|
-
|
|
19
17
|
const stories = storiesOf('Components/BundleAssets', module);
|
|
20
18
|
stories.addDecorator(getWrapperDecorator());
|
|
21
19
|
stories.add('default', () => /*#__PURE__*/React.createElement(BundleAssets, {
|
|
@@ -9,7 +9,8 @@ export const addRowAssetFlags = row => {
|
|
|
9
9
|
const isInitial = runs.map(run => run == null ? void 0 : run.isInitial).includes(true);
|
|
10
10
|
const isChunk = runs.map(run => run == null ? void 0 : run.isChunk).includes(true);
|
|
11
11
|
const isAsset = !(isEntry || isInitial || isChunk);
|
|
12
|
-
return {
|
|
12
|
+
return {
|
|
13
|
+
...row,
|
|
13
14
|
isEntry,
|
|
14
15
|
isInitial,
|
|
15
16
|
isChunk,
|
|
@@ -20,47 +21,39 @@ export const getIsNotPredictive = (key, runs) => runs.reduce((agg, current, inde
|
|
|
20
21
|
if (agg) {
|
|
21
22
|
return agg;
|
|
22
23
|
}
|
|
23
|
-
|
|
24
24
|
if (index + 1 === runs.length) {
|
|
25
25
|
return agg;
|
|
26
26
|
}
|
|
27
|
-
|
|
28
27
|
if (current && runs[index + 1] && current.delta !== 0 && key !== current.name && current.name === runs[index + 1].name) {
|
|
29
28
|
return true;
|
|
30
29
|
}
|
|
31
|
-
|
|
32
30
|
return agg;
|
|
33
31
|
}, false);
|
|
34
|
-
export const addRowIsNotPredictive = row => ({
|
|
32
|
+
export const addRowIsNotPredictive = row => ({
|
|
33
|
+
...row,
|
|
35
34
|
isNotPredictive: getIsNotPredictive(row.key, row.runs)
|
|
36
35
|
});
|
|
37
36
|
export const getRowFilter = filters => item => {
|
|
38
37
|
if (filters[ASSET_FILTERS.CHANGED] && !item.changed) {
|
|
39
38
|
return false;
|
|
40
39
|
}
|
|
41
|
-
|
|
42
40
|
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)) {
|
|
43
41
|
return false;
|
|
44
42
|
}
|
|
45
|
-
|
|
46
43
|
if (!filters[`${ASSET_FILE_TYPE}.${getFileType(item.key)}`]) {
|
|
47
44
|
return false;
|
|
48
45
|
}
|
|
49
|
-
|
|
50
46
|
return true;
|
|
51
47
|
};
|
|
52
48
|
export const getCustomSort = sortId => item => {
|
|
53
49
|
if (sortId === SORT_BY_NAME) {
|
|
54
50
|
return item.key;
|
|
55
51
|
}
|
|
56
|
-
|
|
57
52
|
if (sortId === SORT_BY_DELTA) {
|
|
58
53
|
return _get(item, 'runs[0].deltaPercentage', 0);
|
|
59
54
|
}
|
|
60
|
-
|
|
61
55
|
if (sortId === SORT_BY_SIZE) {
|
|
62
56
|
return _get(item, 'runs[0].value', 0);
|
|
63
57
|
}
|
|
64
|
-
|
|
65
58
|
return [!item.isNotPredictive, !item.changed, !item.isInitial, !item.isEntry, !item.isChunk, item.key];
|
|
66
59
|
};
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
|
|
2
|
-
|
|
3
2
|
import React, { useMemo } from 'react';
|
|
4
3
|
import PropTypes from 'prop-types';
|
|
5
4
|
import * as webpack from '@bundle-stats/utils/lib-esm/webpack';
|
package/lib-esm/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.js
CHANGED
|
@@ -2,9 +2,7 @@ import _sum from "lodash/sum";
|
|
|
2
2
|
import _max from "lodash/max";
|
|
3
3
|
import _map from "lodash/map";
|
|
4
4
|
import _get from "lodash/get";
|
|
5
|
-
|
|
6
5
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
|
|
7
|
-
|
|
8
6
|
import React from 'react';
|
|
9
7
|
import PropTypes from 'prop-types';
|
|
10
8
|
import cx from 'classnames';
|
|
@@ -17,7 +15,6 @@ import { getColors } from '../../utils';
|
|
|
17
15
|
import { Stack } from '../../layout/stack';
|
|
18
16
|
import { SummaryItem } from '../summary-item';
|
|
19
17
|
import css from './bundle-assets-totals-chart-bars.module.css';
|
|
20
|
-
|
|
21
18
|
const getTooltip = (items, jobs, itemIndex, runIndex) => () => /*#__PURE__*/React.createElement(SummaryItem, {
|
|
22
19
|
className: css.itemTooltip,
|
|
23
20
|
id: _get(items, [itemIndex, 'key']),
|
|
@@ -29,7 +26,6 @@ const getTooltip = (items, jobs, itemIndex, runIndex) => () => /*#__PURE__*/Reac
|
|
|
29
26
|
showBaselineValue: runIndex < jobs.length - 1,
|
|
30
27
|
size: "large"
|
|
31
28
|
});
|
|
32
|
-
|
|
33
29
|
export const BundleAssetsTotalsChartBars = _ref => {
|
|
34
30
|
let {
|
|
35
31
|
className,
|
|
@@ -47,11 +43,8 @@ export const BundleAssetsTotalsChartBars = _ref => {
|
|
|
47
43
|
dataGraphs[runIndex] = [...(dataGraphs[runIndex] || []), _get(run, 'value', 0)];
|
|
48
44
|
});
|
|
49
45
|
});
|
|
50
|
-
|
|
51
46
|
const maxValues = _max(_map(dataGraphs, values => _sum(values)));
|
|
52
|
-
|
|
53
47
|
const maxValue = _max(maxValues);
|
|
54
|
-
|
|
55
48
|
const labels = items.map(_ref3 => {
|
|
56
49
|
let {
|
|
57
50
|
key,
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
|
|
2
|
-
|
|
3
2
|
import React from 'react';
|
|
4
3
|
import PropTypes from 'prop-types';
|
|
5
4
|
import { getBundleAssetsFileTypeComponentLink } from '@bundle-stats/utils';
|
|
@@ -15,7 +14,6 @@ export const BundleAssetsTotalsTable = _ref => {
|
|
|
15
14
|
...restProps
|
|
16
15
|
} = _ref;
|
|
17
16
|
const items = webpack.compareBySection.sizes(jobs);
|
|
18
|
-
|
|
19
17
|
const renderRowHeader = item => {
|
|
20
18
|
const fileType = ASSETS_SIZES_FILE_TYPE_MAP[item.key];
|
|
21
19
|
const {
|
|
@@ -29,7 +27,6 @@ export const BundleAssetsTotalsTable = _ref => {
|
|
|
29
27
|
params: params
|
|
30
28
|
}, item.label);
|
|
31
29
|
};
|
|
32
|
-
|
|
33
30
|
return /*#__PURE__*/React.createElement(MetricsTable, _extends({
|
|
34
31
|
className: className,
|
|
35
32
|
runs: jobs,
|
|
@@ -46,9 +43,9 @@ BundleAssetsTotalsTable.defaultProps = {
|
|
|
46
43
|
BundleAssetsTotalsTable.propTypes = {
|
|
47
44
|
/** Addopted child class name */
|
|
48
45
|
className: PropTypes.string,
|
|
49
|
-
|
|
50
46
|
/** Jobs data */
|
|
51
47
|
jobs: PropTypes.array,
|
|
52
48
|
// eslint-disable-line react/forbid-prop-types
|
|
49
|
+
|
|
53
50
|
customComponentLink: PropTypes.elementType
|
|
54
51
|
};
|
|
@@ -9,9 +9,7 @@ export default {
|
|
|
9
9
|
component: BundleAssetsTotalsTable,
|
|
10
10
|
decorators: [getWrapperDecorator()]
|
|
11
11
|
};
|
|
12
|
-
|
|
13
12
|
const Template = args => /*#__PURE__*/React.createElement(BundleAssetsTotalsTable, args);
|
|
14
|
-
|
|
15
13
|
export const SingleJob = Template.bind();
|
|
16
14
|
SingleJob.args = {
|
|
17
15
|
jobs: createJobs([{
|
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
import _map from "lodash/map";
|
|
2
2
|
import _isEmpty from "lodash/isEmpty";
|
|
3
3
|
import _get from "lodash/get";
|
|
4
|
-
|
|
5
4
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
|
|
6
|
-
|
|
7
5
|
import React, { useCallback, useMemo, useState } from 'react';
|
|
8
6
|
import PropTypes from 'prop-types';
|
|
9
7
|
import cx from 'classnames';
|
|
@@ -25,7 +23,6 @@ import { MetricsTableOptions } from '../metrics-table-options';
|
|
|
25
23
|
import { MetricsTableTitle } from '../metrics-table-title';
|
|
26
24
|
import { ModuleInfo } from '../module-info';
|
|
27
25
|
import css from './bundle-modules.module.css';
|
|
28
|
-
|
|
29
26
|
const getFilters = _ref => {
|
|
30
27
|
let {
|
|
31
28
|
filters,
|
|
@@ -62,7 +59,8 @@ const getFilters = _ref => {
|
|
|
62
59
|
id,
|
|
63
60
|
name
|
|
64
61
|
} = _ref2;
|
|
65
|
-
return {
|
|
62
|
+
return {
|
|
63
|
+
...chunkFilters,
|
|
66
64
|
[id]: {
|
|
67
65
|
label: name,
|
|
68
66
|
defaultValue: _get(filters, `${MODULE_CHUNK}.${id}`, true)
|
|
@@ -74,7 +72,8 @@ const getFilters = _ref => {
|
|
|
74
72
|
// Module source types
|
|
75
73
|
[MODULE_FILE_TYPE]: {
|
|
76
74
|
label: 'File type',
|
|
77
|
-
...MODULE_SOURCE_FILE_TYPES.reduce((agg, fileType) => ({
|
|
75
|
+
...MODULE_SOURCE_FILE_TYPES.reduce((agg, fileType) => ({
|
|
76
|
+
...agg,
|
|
78
77
|
[fileType]: {
|
|
79
78
|
label: FILE_TYPE_LABELS[fileType],
|
|
80
79
|
defaultValue: _get(filters, `${MODULE_FILE_TYPE}.${fileType}`, true)
|
|
@@ -83,7 +82,6 @@ const getFilters = _ref => {
|
|
|
83
82
|
}
|
|
84
83
|
};
|
|
85
84
|
};
|
|
86
|
-
|
|
87
85
|
const RowHeader = _ref3 => {
|
|
88
86
|
let {
|
|
89
87
|
row,
|
|
@@ -91,9 +89,7 @@ const RowHeader = _ref3 => {
|
|
|
91
89
|
labels,
|
|
92
90
|
CustomComponentLink
|
|
93
91
|
} = _ref3;
|
|
94
|
-
|
|
95
92
|
const chunkIds = _map(chunks, 'id');
|
|
96
|
-
|
|
97
93
|
const [showHoverCard, setHoverCard] = useState(false);
|
|
98
94
|
const handleOnMouseEnter = useCallback(() => setHoverCard(true), [showHoverCard]);
|
|
99
95
|
const content = useMemo(() => /*#__PURE__*/React.createElement("span", {
|
|
@@ -106,13 +102,11 @@ const RowHeader = _ref3 => {
|
|
|
106
102
|
className: css.nameText,
|
|
107
103
|
name: row.label
|
|
108
104
|
})), [row]);
|
|
109
|
-
|
|
110
105
|
if (!showHoverCard) {
|
|
111
106
|
return /*#__PURE__*/React.createElement("div", {
|
|
112
107
|
onMouseEnter: handleOnMouseEnter
|
|
113
108
|
}, content);
|
|
114
109
|
}
|
|
115
|
-
|
|
116
110
|
return /*#__PURE__*/React.createElement(HoverCard, {
|
|
117
111
|
label: content
|
|
118
112
|
}, /*#__PURE__*/React.createElement(ModuleInfo, {
|
|
@@ -124,7 +118,6 @@ const RowHeader = _ref3 => {
|
|
|
124
118
|
customComponentLink: CustomComponentLink
|
|
125
119
|
}));
|
|
126
120
|
};
|
|
127
|
-
|
|
128
121
|
RowHeader.propTypes = {
|
|
129
122
|
row: PropTypes.shape({
|
|
130
123
|
label: PropTypes.string,
|
|
@@ -236,7 +229,6 @@ BundleModules.defaultProps = {
|
|
|
236
229
|
BundleModules.propTypes = {
|
|
237
230
|
/** Adopted child class name */
|
|
238
231
|
className: PropTypes.string,
|
|
239
|
-
|
|
240
232
|
/** Rows data */
|
|
241
233
|
items: PropTypes.array,
|
|
242
234
|
// eslint-disable-line react/forbid-prop-types
|
|
@@ -250,17 +242,13 @@ BundleModules.propTypes = {
|
|
|
250
242
|
id: PropTypes.string,
|
|
251
243
|
name: PropTypes.string
|
|
252
244
|
})).isRequired,
|
|
253
|
-
|
|
254
245
|
/** total row count */
|
|
255
246
|
totalRowCount: PropTypes.number,
|
|
256
|
-
|
|
257
247
|
/** Update filters handler */
|
|
258
248
|
updateFilters: PropTypes.func.isRequired,
|
|
259
|
-
|
|
260
249
|
/** Reset filters handler */
|
|
261
250
|
resetFilters: PropTypes.func.isRequired,
|
|
262
251
|
resetAllFilters: PropTypes.func.isRequired,
|
|
263
|
-
|
|
264
252
|
/** Filters data */
|
|
265
253
|
filters: PropTypes.shape({
|
|
266
254
|
changed: PropTypes.bool
|
|
@@ -4,8 +4,9 @@ import { createJobs } from '@bundle-stats/utils';
|
|
|
4
4
|
import baselineStatsFixtures from '../../../__mocks__/webpack-stats.baseline.json';
|
|
5
5
|
import currentStatsFixtures from '../../../__mocks__/webpack-stats.current.json';
|
|
6
6
|
import { getWrapperDecorator } from '../../stories';
|
|
7
|
-
import { BundleModules } from '.';
|
|
7
|
+
import { BundleModules } from '.';
|
|
8
8
|
|
|
9
|
+
// Limit the side of the modules when not in dev mode (chromatic limit, snapshot too large)
|
|
9
10
|
const {
|
|
10
11
|
baselineStats,
|
|
11
12
|
currentStats
|
|
@@ -40,8 +41,9 @@ const JOBS_EMPTY_BASELINE = createJobs([{
|
|
|
40
41
|
}, null]);
|
|
41
42
|
stories.add('empty baseline', () => /*#__PURE__*/React.createElement(BundleModules, {
|
|
42
43
|
jobs: JOBS_EMPTY_BASELINE
|
|
43
|
-
}));
|
|
44
|
+
}));
|
|
44
45
|
|
|
46
|
+
// Module moved between chunks
|
|
45
47
|
const JOBS_MOVED_MODULE = createJobs([{
|
|
46
48
|
webpack: {
|
|
47
49
|
chunks: [{
|