feat(ui): ModuleInfo - display reasons

relative-ci · Sep 23, 2023 · 6afe0d6 · 6afe0d6
1 parent b0a87bc
commit 6afe0d6
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 3 deletions.
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}>
+              {item?.runs?.[0].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,