feat(ui): ModuleInfo - display reasons

relative-ci · Aug 11, 2023 · 41945b3 · 41945b3
1 parent dfba2fb
commit 41945b3
Show file tree

Hide file tree

Showing 3 changed files with 147 additions and 3 deletions.
diff --git a/packages/ui/src/components/module-info/module-info.jsx b/packages/ui/src/components/module-info/module-info.jsx
@@ -0,0 +1,123 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import isEmpty from 'lodash/isEmpty';
+import noop from 'lodash/noop';
+import { getBundleModulesByChunk, getBundleModulesBySearch } from '@bundle-stats/utils';
+
+import { Stack } from '../../layout/stack';
+import { FlexStack } from '../../layout/flex-stack';
+import { FileName } from '../../ui/file-name';
+import { Tag } from '../../ui/tag';
+import { ComponentLink } from '../component-link';
+import css from './module-info.module.css';
+
+export const ModuleInfo = (props) => {
+  const {
+    className,
+    item,
+    labels,
+    chunks,
+    chunkIds,
+    customComponentLink: CustomComponentLink,
+    onClick,
+  } = props;
+
+  return (
+    <Stack space="small" className={cx(css.root, className)}>
+      {item.runs.map((run, index) => (
+        <Stack space="xsmall" key={`module-info-${run?.name || index}-${index}`} className={css.run}>
+          <Stack space="xxxsmall">
+            <FlexStack space="xxxsmall" alignItems="center" as="h4" className={css.title}>
+              <span>{labels[index]}</span>
+              <Tag className={css.titleTag}>{index === 0 ? 'current' : 'baseline'}</Tag>
+            </FlexStack>
+            <FileName className={css.fileName} as="code" name={run?.name || '-'} />
+          </Stack>
+
+          {/**
+            * Render chunks only for the current run
+            * we do not have the correct chunk ids for baselines
+            */}
+          {index === 0 && !isEmpty(run?.chunkIds) && (
+            <Stack className={css.chunks}>
+              <h5>Chunks</h5>
+              <ul className={css.list}>
+              {run.chunkIds.map((chunkId) => {
+                const chunk = chunks?.find(({ id }) => id === chunkId);
+
+                if (!chunk) {
+                  return null;
+                }
+
+                return (
+                  <li>
+                    <CustomComponentLink
+                      {...getBundleModulesByChunk(chunkIds, chunkId)}
+                      onClick={onClick}
+                      className={css.chunksItem}
+                    >
+                      {chunk.name}
+                    </CustomComponentLink>
+                  </li>
+                );
+              })}
+              </ul>
+            </Stack>
+          )}
+
+          {run?.reasons && (
+            <Stack>
+              <h5>Reasons</h5>
+              <ul className={css.list}>
+                {run.reasons.map((reason) => (
+                  <li key={reason}>
+                    <CustomComponentLink
+                      {...getBundleModulesBySearch(`^${reason}$`)}
+                      onClick={onClick}
+                      className={css.reasonLink}
+                      >
+                      <FileName name={reason} className={css.reason} />
+                    </CustomComponentLink>
+                  </li>
+                ))}
+              </ul>
+            </Stack>
+          )}
+        </Stack>
+      ))}
+    </Stack>
+  );
+};
+
+ModuleInfo.propTypes = {
+  className: PropTypes.string,
+  item: PropTypes.shape({
+    key: PropTypes.string,
+    runs: PropTypes.arrayOf(
+      PropTypes.shape({
+        key: PropTypes.string,
+        name: PropTypes.string,
+        chunkIds: PropTypes.arrayOf(PropTypes.string),
+      }),
+    ),
+  }).isRequired,
+  labels: PropTypes.arrayOf(PropTypes.string).isRequired,
+  chunks: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string,
+      name: PropTypes.string,
+    }),
+  ),
+  chunkIds: PropTypes.arrayOf(PropTypes.string),
+  customComponentLink: PropTypes.elementType,
+  onClick: PropTypes.func,
+};
+
+ModuleInfo.defaultProps = {
+  className: '',
+  chunks: [],
+  chunkIds: [],
+  customComponentLink: ComponentLink,
+  onClick: noop,
+};
diff --git a/packages/ui/src/components/module-info/module-info.tsx b/packages/ui/src/components/module-info/module-info.tsx
@@ -10,10 +10,12 @@ import {
   getBundleModulesByChunk,
   getBundleModulesByFileTpe,
   getBundleModulesBySource,
+  getBundleModulesBySearch,
 } from '@bundle-stats/utils';
 import { Module, MetaChunk } from '@bundle-stats/utils/types/webpack';
 
 import { Stack } from '../../layout/stack';
+import { FileName } from '../../ui/file-name';
 import { Tag } from '../../ui/tag';
 import { ComponentLink } from '../component-link';
 import { EntryInfo } from '../entry-info';
@@ -110,6 +112,25 @@ export const ModuleInfo = (props: ModuleInfoProps & React.ComponentProps<'div'>)
             {sourceTypeLabel}
           </CustomComponentLink>
         </EntryInfo.Meta>
+
+        {item?.runs?.[0].reasons && (
+            <Stack>
+              <h5>Reasons</h5>
+              <ul className={css.list}>
+                {run.reasons.map((reason) => (
+                  <li key={reason}>
+                    <CustomComponentLink
+                      {...getBundleModulesBySearch(`^${reason}$`)}
+                      onClick={onClick}
+                      className={css.reasonLink}
+                      >
+                      <FileName name={reason} className={css.reason} />
+                    </CustomComponentLink>
+                  </li>
+                ))}
+              </ul>
+            </Stack>
+          )}
       </Stack>
     </EntryInfo>
   );

diff --git a/packages/utils/src/webpack/extract/modules.ts b/packages/utils/src/webpack/extract/modules.ts
@@ -84,11 +84,10 @@ export const extractModules = (webpackStats?: WebpackStatsFiltered): MetricsModu
 
   modulesByName.forEach((moduleEntry, normalizedName) => {
     const { name, size = 0, chunks } = moduleEntry;
-    const normalizedName = getModuleName(name);
 
     // skip modules that are orphane(do not belong to any chunk)
     if (!chunks || chunks?.length === 0) {
-      return agg;
+      return;
     }
 
     const instances = chunks.length;
@@ -98,12 +97,13 @@ export const extractModules = (webpackStats?: WebpackStatsFiltered): MetricsModu
     moduleCount += instances;
     totalCodeSize += instances * size;
 
-    const reasons = moduleEntry.reasons?.map((reason) => getModuleName(reason.module));
     if (duplicated) {
       duplicateModulesCount += duplicateInstances;
       duplicateCodeSize += duplicateInstances * size;
     }
 
+    const reasons = moduleEntry.reasons?.map((reason) => getModuleName(reason.module));
+
     modules[normalizedName] = {
       name,
       value: size,