From afb9e745be4662a3b8b61e39aa1eb08121765e83 Mon Sep 17 00:00:00 2001
From: Vio <vio@beanon.com>
Date: Fri, 23 Dec 2022 18:11:28 +0100
Subject: [PATCH] feat(ui): ModuleInfo - display reasons

---
 .../components/module-info/module-info.tsx    | 21 +++++++++++++++++++
 packages/utils/src/webpack/extract/modules.ts |  6 +++---
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/components/module-info/module-info.tsx b/packages/ui/src/components/module-info/module-info.tsx
index 89e7c95675..51c21f0f04 100644
--- 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
index 22f71a3f4d..424f0dd297 100644
--- 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,