@bundle-stats/ui 3.4.0-alpha.1 → 3.4.0-alpha.3

package/CHANGELOG.md

@@ -3,35 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-# [3.4.0-alpha.0](https://github.com/relative-ci/bundle-stats/compare/v3.2.9...v3.4.0-alpha.0) (2022-03-12)
-
-
-### Bug Fixes
-
-* **ui:** Alert - allow to override props ([c9f85cd](https://github.com/relative-ci/bundle-stats/commit/c9f85cde563291da7de47f7c5ddaa7f2caa1d674))
-* **ui:** Summary - pass budget data to SummaryItem ([9023a19](https://github.com/relative-ci/bundle-stats/commit/9023a19d164cf8e5c6b7c23d086b689c938c67c8))
-* **utils:** Budgets - take biggerIsBetter in consideration ([b95b956](https://github.com/relative-ci/bundle-stats/commit/b95b95637a47cc266d4e4c254cb49f1a4f19794c))
-
-
-### Features
-
-* App - add BudgetInsights ([84a6698](https://github.com/relative-ci/bundle-stats/commit/84a669806f25a1f164055ab1cbca39dc1e19987a))
-* **ui:** App - pass budgets info to Summary ([d665805](https://github.com/relative-ci/bundle-stats/commit/d665805298e26d9771c017c0bddacc80dcc19f87))
-* **ui:** BudgetInsights component ([f097f38](https://github.com/relative-ci/bundle-stats/commit/f097f388147910b6abb69fc3398d04796102aad1))
-* **ui:** BundleAssetsTotalsTable - add budgets ([1a45ce8](https://github.com/relative-ci/bundle-stats/commit/1a45ce8a63f411b95a2a9092a13d45925e692062))
-* **ui:** Icon - add check-circle icon ([8ce4c40](https://github.com/relative-ci/bundle-stats/commit/8ce4c40d92759d1a898c2311026d52d311520451))
-* **ui:** Icon - alert-circle icon ([c571e57](https://github.com/relative-ci/bundle-stats/commit/c571e57405b4533cf55067f7ba71b944552579a5))
-* **ui:** SummaryItem - budgets ([105ed0e](https://github.com/relative-ci/bundle-stats/commit/105ed0ef693c0b26c44217189d2d3cb5c4547af5))
-
-
-### Performance Improvements
-
-* **ui:** BundleAssetsTotalsTable - use memo / callback ([f027cbc](https://github.com/relative-ci/bundle-stats/commit/f027cbcb59ff3890b2bf6db6b95d23c7c898bc6b))
-
-
-
-
-
 ## [3.2.8](https://github.com/relative-ci/bundle-stats/compare/v3.2.7...v3.2.8) (2022-03-10)
 
 **Note:** Version bump only for package @bundle-stats/ui

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

@@ -39,6 +39,8 @@ var _hoverCard = require("../../ui/hover-card");
 
 var _sortDropdown = require("../../ui/sort-dropdown");
 
+var _tag = require("../../ui/tag");
+
 var _toolbar = require("../../ui/toolbar");
 
 var _metricsTable = require("../metrics-table");
@@ -95,10 +97,17 @@ var RowHeader = function RowHeader(_ref) {
     return setHoverCard(true);
   }, [showHoverCard]);
   var content = (0, _react.useMemo)(function () {
-    return /*#__PURE__*/_react["default"].createElement(_fileName.FileName, {
+    return /*#__PURE__*/_react["default"].createElement("span", {
+      className: _bundleModulesModule["default"].name
+    }, row.duplicated && /*#__PURE__*/_react["default"].createElement(_tag.Tag, {
+      className: _bundleModulesModule["default"].nameTagDuplicated,
+      size: "small",
+      kind: _tag.Tag.KINDS.DANGER
+    }), /*#__PURE__*/_react["default"].createElement(_fileName.FileName, {
+      className: _bundleModulesModule["default"].nameText,
       name: row.label
-    });
-  }, [row.label]);
+    }));
+  }, [row]);
 
   if (!showHoverCard) {
     return /*#__PURE__*/_react["default"].createElement("div", {
@@ -120,7 +129,8 @@ var RowHeader = function RowHeader(_ref) {
 
 RowHeader.propTypes = {
   row: _propTypes["default"].shape({
-    label: _propTypes["default"].string
+    label: _propTypes["default"].string,
+    duplicated: _propTypes["default"].bool
   }).isRequired,
   chunks: _propTypes["default"].arrayOf(_propTypes["default"].shape({
     id: _propTypes["default"].string,
@@ -173,6 +183,10 @@ var BundleModules = function BundleModules(_ref2) {
     label: 'Changed',
     defaultValue: filters.changed,
     disabled: jobs.length <= 1
+  }), _defineProperty(_objectSpread2, _utils.MODULE_FILTERS.DUPLICATED, {
+    label: 'Duplicated',
+    defaultValue: filters[_utils.MODULE_FILTERS.DUPLICATED],
+    disabled: jobs.length <= 1
   }), _defineProperty(_objectSpread2, _utils.MODULE_SOURCE_TYPE, (_MODULE_SOURCE_TYPE = {
     label: 'Source'
   }, _defineProperty(_MODULE_SOURCE_TYPE, _utils.MODULE_FILTERS.FIRST_PARTY, {

package/lib/components/bundle-modules/bundle-modules.module.css

@@ -12,6 +12,15 @@
   margin-right: -1px; /** collapse border */
 }
 
-.namePopover {
-  min-width: 280px;
+.nameTagDuplicated {
+  margin-right: var(--space-xxxsmall);
+  vertical-align: baseline;
+}
+
+.nameTagDuplicated::before {
+  content: 'D';
+}
+
+.nameText {
+  vertical-align: middle;
 }

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

@@ -41,18 +41,17 @@ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToAr
 
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-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; }
-
-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; }
+var addRowSourceFlag = function addRowSourceFlag(row) {
+  var key = row.key,
+      runs = row.runs; // @NOTE Assign instead destructuring for perf reasons
+  // eslint-disable-next-line no-param-reassign
 
-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; }
+  row.thirdParty = Boolean(key.match(_webpack.MODULE_PATH_PACKAGES)); // eslint-disable-next-line no-param-reassign
 
-var addRowSourceFlag = function addRowSourceFlag(row) {
-  var key = row.key;
-  var thirdParty = Boolean(key.match(_webpack.MODULE_PATH_PACKAGES));
-  return _objectSpread(_objectSpread({}, row), {}, {
-    thirdParty: thirdParty
-  });
+  row.duplicated = Boolean(runs.find(function (run) {
+    return (run === null || run === void 0 ? void 0 : run.duplicated) === true;
+  }));
+  return row;
 };
 
 exports.addRowSourceFlag = addRowSourceFlag;
@@ -82,6 +81,11 @@ var getRowFilter = function getRowFilter(filters) {
     // Skip not changed rows
     if (filters[_utils.MODULE_FILTERS.CHANGED] && !row.changed) {
       return false;
+    } // Skip not duplicated rows
+
+
+    if (filters[_utils.MODULE_FILTERS.DUPLICATED] && !row.duplicated) {
+      return false;
     } // Skip not matching source type
 
 

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

@@ -72,12 +72,12 @@ var BundleModules = function BundleModules(props) {
 
   var _useMemo = (0, _react.useMemo)(function () {
     return {
-      defaultFilters: _objectSpread(_objectSpread(_objectSpread({
+      defaultFilters: _objectSpread(_objectSpread(_objectSpread(_objectSpread({
         changed: (jobs === null || jobs === void 0 ? void 0 : jobs.length) > 1
-      }, (0, _utils.getModuleSourceTypeFilters)(true)), (0, _utils.getModuleChunkFilters)(chunkIds, true)), (0, _utils.getModuleFileTypeFilters)(true)),
-      allEntriesFilters: _objectSpread(_objectSpread(_objectSpread({
+      }, (0, _utils.getModuleSourceTypeFilters)(true)), (0, _utils.getModuleChunkFilters)(chunkIds, true)), (0, _utils.getModuleFileTypeFilters)(true)), {}, _defineProperty({}, _utils.MODULE_FILTERS.DUPLICATED, false)),
+      allEntriesFilters: _objectSpread(_objectSpread(_objectSpread(_objectSpread({
         changed: false
-      }, (0, _utils.getModuleSourceTypeFilters)(true)), (0, _utils.getModuleChunkFilters)(chunkIds, true)), (0, _utils.getModuleFileTypeFilters)(true))
+      }, (0, _utils.getModuleSourceTypeFilters)(true)), (0, _utils.getModuleChunkFilters)(chunkIds, true)), (0, _utils.getModuleFileTypeFilters)(true)), {}, _defineProperty({}, _utils.MODULE_FILTERS.DUPLICATED, false))
     };
   }, [jobs]),
       defaultFilters = _useMemo.defaultFilters,

package/lib/constants.js

@@ -56,7 +56,7 @@ var METRICS_WEBPACK_GENERAL = ['totalSizeByTypeALL', 'totalInitialSizeJS', 'tota
 exports.METRICS_WEBPACK_GENERAL = METRICS_WEBPACK_GENERAL;
 var METRICS_WEBPACK_ASSETS = ['assetCount', 'chunkCount'];
 exports.METRICS_WEBPACK_ASSETS = METRICS_WEBPACK_ASSETS;
-var METRICS_WEBPACK_MODULES = ['moduleCount'];
+var METRICS_WEBPACK_MODULES = ['moduleCount', 'duplicateModulesCount', 'duplicateCode'];
 exports.METRICS_WEBPACK_MODULES = METRICS_WEBPACK_MODULES;
 var METRICS_WEBPACK_PACKAGES = ['packageCount', 'duplicatePackagesCount'];
 exports.METRICS_WEBPACK_PACKAGES = METRICS_WEBPACK_PACKAGES;

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

@@ -17,6 +17,7 @@ import { FileName } from '../../ui/file-name';
 import { Filters } from '../../ui/filters';
 import { HoverCard } from '../../ui/hover-card';
 import { SortDropdown } from '../../ui/sort-dropdown';
+import { Tag } from '../../ui/tag';
 import { Toolbar } from '../../ui/toolbar';
 import { MetricsTable } from '../metrics-table';
 import { MetricsTableSearch } from '../metrics-table-search';
@@ -37,9 +38,16 @@ const RowHeader = _ref => {
 
   const [showHoverCard, setHoverCard] = useState(false);
   const handleOnMouseEnter = useCallback(() => setHoverCard(true), [showHoverCard]);
-  const content = useMemo(() => /*#__PURE__*/React.createElement(FileName, {
+  const content = useMemo(() => /*#__PURE__*/React.createElement("span", {
+    className: css.name
+  }, row.duplicated && /*#__PURE__*/React.createElement(Tag, {
+    className: css.nameTagDuplicated,
+    size: "small",
+    kind: Tag.KINDS.DANGER
+  }), /*#__PURE__*/React.createElement(FileName, {
+    className: css.nameText,
     name: row.label
-  }), [row.label]);
+  })), [row]);
 
   if (!showHoverCard) {
     return /*#__PURE__*/React.createElement("div", {
@@ -61,7 +69,8 @@ const RowHeader = _ref => {
 
 RowHeader.propTypes = {
   row: PropTypes.shape({
-    label: PropTypes.string
+    label: PropTypes.string,
+    duplicated: PropTypes.bool
   }).isRequired,
   chunks: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.string,
@@ -111,6 +120,11 @@ export const BundleModules = _ref2 => {
       defaultValue: filters.changed,
       disabled: jobs.length <= 1
     },
+    [MODULE_FILTERS.DUPLICATED]: {
+      label: 'Duplicated',
+      defaultValue: filters[MODULE_FILTERS.DUPLICATED],
+      disabled: jobs.length <= 1
+    },
     [MODULE_SOURCE_TYPE]: {
       label: 'Source',
       [MODULE_FILTERS.FIRST_PARTY]: {

package/lib-esm/components/bundle-modules/bundle-modules.module.css

@@ -12,6 +12,15 @@
   margin-right: -1px; /** collapse border */
 }
 
-.namePopover {
-  min-width: 280px;
+.nameTagDuplicated {
+  margin-right: var(--space-xxxsmall);
+  vertical-align: baseline;
+}
+
+.nameTagDuplicated::before {
+  content: 'D';
+}
+
+.nameText {
+  vertical-align: middle;
 }

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

@@ -7,12 +7,15 @@ import { MODULE_CHUNK, MODULE_FILTERS, MODULE_FILE_TYPE, MODULE_SOURCE_TYPE, get
 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
-  };
+    key,
+    runs
+  } = row; // @NOTE Assign instead destructuring for perf reasons
+  // eslint-disable-next-line no-param-reassign
+
+  row.thirdParty = Boolean(key.match(MODULE_PATH_PACKAGES)); // eslint-disable-next-line no-param-reassign
+
+  row.duplicated = Boolean(runs.find(run => (run == null ? void 0 : run.duplicated) === true));
+  return row;
 };
 export const getCustomSort = sortBy => item => {
   if (sortBy === SORT_BY_NAME) {
@@ -33,6 +36,11 @@ export const getRowFilter = filters => row => {
   // Skip not changed rows
   if (filters[MODULE_FILTERS.CHANGED] && !row.changed) {
     return false;
+  } // Skip not duplicated rows
+
+
+  if (filters[MODULE_FILTERS.DUPLICATED] && !row.duplicated) {
+    return false;
   } // Skip not matching source type
 
 

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

@@ -5,7 +5,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { getModuleChunkFilters, getModuleSourceTypeFilters, getModuleFileTypeFilters } from '@bundle-stats/utils';
+import { MODULE_FILTERS, 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';
@@ -45,13 +45,15 @@ export const BundleModules = props => {
       changed: (jobs == null ? void 0 : jobs.length) > 1,
       ...getModuleSourceTypeFilters(true),
       ...getModuleChunkFilters(chunkIds, true),
-      ...getModuleFileTypeFilters(true)
+      ...getModuleFileTypeFilters(true),
+      [MODULE_FILTERS.DUPLICATED]: false
     },
     allEntriesFilters: {
       changed: false,
       ...getModuleSourceTypeFilters(true),
       ...getModuleChunkFilters(chunkIds, true),
-      ...getModuleFileTypeFilters(true)
+      ...getModuleFileTypeFilters(true),
+      [MODULE_FILTERS.DUPLICATED]: false
     }
   }), [jobs]);
   const searchParams = useSearchParams({

package/lib-esm/constants.js

@@ -27,5 +27,5 @@ export const ASSETS_SIZES_FILE_TYPE_MAP = FILE_TYPES.reduce((agg, fileType) => (
 }), {});
 export const METRICS_WEBPACK_GENERAL = ['totalSizeByTypeALL', 'totalInitialSizeJS', 'totalInitialSizeCSS', 'cacheInvalidation'];
 export const METRICS_WEBPACK_ASSETS = ['assetCount', 'chunkCount'];
-export const METRICS_WEBPACK_MODULES = ['moduleCount'];
+export const METRICS_WEBPACK_MODULES = ['moduleCount', 'duplicateModulesCount', 'duplicateCode'];
 export const METRICS_WEBPACK_PACKAGES = ['packageCount', 'duplicatePackagesCount'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "3.4.0-alpha.1",
+  "version": "3.4.0-alpha.3",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -85,12 +85,12 @@
     "react-router-dom": "5.3.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^3.4.0-alpha.1",
+    "@bundle-stats/utils": "^3.4.0-alpha.3",
     "ariakit": "2.0.0-alpha.19",
     "date-fns": "2.28.0",
     "modern-css-reset": "1.4.0",
     "query-string": "7.1.1",
     "use-query-params": "1.2.3"
   },
-  "gitHead": "a7ba8010b047028c4e56e407719616fde7d8ea88"
+  "gitHead": "a9c2ce85afa59b900a8e13cc1a338ef74f737e86"
 }

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

@@ -20,6 +20,7 @@ import { FileName } from '../../ui/file-name';
 import { Filters } from '../../ui/filters';
 import { HoverCard } from '../../ui/hover-card';
 import { SortDropdown } from '../../ui/sort-dropdown';
+import { Tag } from '../../ui/tag';
 import { Toolbar } from '../../ui/toolbar';
 import { MetricsTable } from '../metrics-table';
 import { MetricsTableSearch } from '../metrics-table-search';
@@ -33,7 +34,17 @@ const RowHeader = ({ row, chunks, labels, CustomComponentLink }) => {
 
   const [showHoverCard, setHoverCard] = useState(false);
   const handleOnMouseEnter = useCallback(() => setHoverCard(true), [showHoverCard]);
-  const content = useMemo(() => <FileName name={row.label} />, [row.label]);
+  const content = useMemo(
+    () => (
+      <span className={css.name}>
+        {row.duplicated && (
+          <Tag className={css.nameTagDuplicated} size="small" kind={Tag.KINDS.DANGER} />
+        )}
+        <FileName className={css.nameText} name={row.label} />
+      </span>
+    ),
+    [row],
+  );
 
   if (!showHoverCard) {
     return <div onMouseEnter={handleOnMouseEnter}>{content}</div>;
@@ -56,6 +67,7 @@ const RowHeader = ({ row, chunks, labels, CustomComponentLink }) => {
 RowHeader.propTypes = {
   row: PropTypes.shape({
     label: PropTypes.string,
+    duplicated: PropTypes.bool,
   }).isRequired,
   chunks: PropTypes.arrayOf(
     PropTypes.shape({
@@ -118,6 +130,11 @@ export const BundleModules = ({
       defaultValue: filters.changed,
       disabled: jobs.length <= 1,
     },
+    [MODULE_FILTERS.DUPLICATED]: {
+      label: 'Duplicated',
+      defaultValue: filters[MODULE_FILTERS.DUPLICATED],
+      disabled: jobs.length <= 1,
+    },
     [MODULE_SOURCE_TYPE]: {
       label: 'Source',
       [MODULE_FILTERS.FIRST_PARTY]: {

package/src/components/bundle-modules/bundle-modules.module.css

@@ -12,6 +12,15 @@
   margin-right: -1px; /** collapse border */
 }
 
-.namePopover {
-  min-width: 280px;
+.nameTagDuplicated {
+  margin-right: var(--space-xxxsmall);
+  vertical-align: baseline;
+}
+
+.nameTagDuplicated::before {
+  content: 'D';
+}
+
+.nameText {
+  vertical-align: middle;
 }

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

@@ -12,9 +12,15 @@ import {
 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 };
+  const { key, runs } = row;
+
+  // @NOTE Assign instead destructuring for perf reasons
+  // eslint-disable-next-line no-param-reassign
+  row.thirdParty = Boolean(key.match(MODULE_PATH_PACKAGES));
+  // eslint-disable-next-line no-param-reassign
+  row.duplicated = Boolean(runs.find((run) => run?.duplicated === true));
+
+  return row;
 };
 
 export const getCustomSort = (sortBy) => (item) => {
@@ -39,10 +45,16 @@ export const getRowFilter = (filters) => (row) => {
     return false;
   }
 
+  // Skip not duplicated rows
+  if (filters[MODULE_FILTERS.DUPLICATED] && !row.duplicated) {
+    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.FIRST_PARTY}`] &&
+        row.thirdParty === false) ||
       (filters[`${MODULE_SOURCE_TYPE}.${MODULE_FILTERS.THIRD_PARTY}`] && row.thirdParty === true)
     )
   ) {

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

@@ -2,6 +2,7 @@ import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { uniqBy, map } from 'lodash';
 import {
+  MODULE_FILTERS,
   getModuleChunkFilters,
   getModuleSourceTypeFilters,
   getModuleFileTypeFilters,
@@ -33,12 +34,14 @@ export const BundleModules = (props) => {
         ...getModuleSourceTypeFilters(true),
         ...getModuleChunkFilters(chunkIds, true),
         ...getModuleFileTypeFilters(true),
+        [MODULE_FILTERS.DUPLICATED]: false,
       },
       allEntriesFilters: {
         changed: false,
         ...getModuleSourceTypeFilters(true),
         ...getModuleChunkFilters(chunkIds, true),
         ...getModuleFileTypeFilters(true),
+        [MODULE_FILTERS.DUPLICATED]: false,
       },
     }),
     [jobs],

package/src/constants.js

@@ -53,5 +53,5 @@ export const METRICS_WEBPACK_GENERAL = [
   'cacheInvalidation',
 ];
 export const METRICS_WEBPACK_ASSETS = ['assetCount', 'chunkCount'];
-export const METRICS_WEBPACK_MODULES = ['moduleCount'];
+export const METRICS_WEBPACK_MODULES = ['moduleCount', 'duplicateModulesCount', 'duplicateCode'];
 export const METRICS_WEBPACK_PACKAGES = ['packageCount', 'duplicatePackagesCount'];