feat: chunk importers

Author: webfansplz

packages/vite/src/app/components/display/ChunkImports.vue renamed to packages/vite/src/app/components/chunks/ImportItem.vue

@@ -38,7 +38,3 @@ const route = useRoute()
     </div>
   </NuxtLink>
 </template>
-
-<style>
-
-</style>

packages/vite/src/app/components/chunks/Imports.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { RolldownChunkImport } from '~~/shared/types/data'
+
+defineProps<{
+  imports: RolldownChunkImport[]
+}>()
+</script>
+
+<template>
+  <div flex="~ col gap-1" mt2 ws-nowrap>
+    <ChunksImportItem
+      v-for="(chunk, index) in imports"
+      :key="index"
+      :chunk="chunk"
+      hover="bg-active"
+      border="~ base rounded" px2 py1 w-full
+    />
+  </div>
+</template>

packages/vite/src/app/components/data/ChunkDetails.vue

@@ -43,9 +43,11 @@ const { state, isLoading } = useAsyncState(
   null,
 )
 
+const normalizedChunks = computed(() => props.chunks || state.value)
+
 const imports = computed((): RolldownChunkImport[] => {
   return props.chunk.imports.map((importChunk) => {
-    const chunk = (props.chunks || state.value)?.find(c => c.chunk_id === importChunk.chunk_id)
+    const chunk = normalizedChunks.value?.find(c => c.chunk_id === importChunk.chunk_id)
 
     return {
       ...importChunk,
@@ -56,6 +58,20 @@ const imports = computed((): RolldownChunkImport[] => {
     }
   })
 })
+
+const importers = computed((): RolldownChunkImport[] => {
+  return normalizedChunks.value?.filter(c => c.imports.some(i => i.chunk_id === props.chunk.chunk_id)).map((chunk) => {
+    const importChunk = chunk.imports.find(i => i.chunk_id === props.chunk.chunk_id)!
+
+    return {
+      ...importChunk,
+      name: chunk.name || '[unnamed]',
+      reason: chunk.reason || 'common',
+      imports: chunk.imports.length || 0,
+      modules: chunk.modules.length || 0,
+    }
+  }) || []
+})
 </script>
 
 <template>
@@ -100,22 +116,22 @@ const imports = computed((): RolldownChunkImport[] => {
       </div>
     </details>
 
-    <!-- TODO: imports seems to be "imported-by" instead of "imports", maybe something wrong on Rolldown side? -->
-    <!-- TODO: We might want to display both "imports" and "imported-by" relationship -->
-    <details v-if="showImports && chunk.imports.length > 0" open="true">
-      <summary op50>
-        <span>Imports ({{ chunk.imports.length }})</span>
-      </summary>
-      <VisualLoading v-if="isLoading" />
-      <div v-else flex="~ col gap-1" mt2 ws-nowrap>
-        <DisplayChunkImports
-          v-for="chunkImport in imports"
-          :key="chunkImport.chunk_id"
-          :chunk="chunkImport"
-          hover="bg-active"
-          border="~ base rounded" px2 py1 w-full
-        />
-      </div>
-    </details>
+    <VisualLoading v-if="isLoading" />
+
+    <template v-else-if="showImports">
+      <details v-if="chunk.imports.length" open="true">
+        <summary op50>
+          <span>Imports ({{ chunk.imports.length }})</span>
+        </summary>
+        <ChunksImports :imports="imports" />
+      </details>
+
+      <details v-if="importers.length" open="true">
+        <summary op50>
+          <span>Importers ({{ importers.length }})</span>
+        </summary>
+        <ChunksImports :imports="importers" />
+      </details>
+    </template>
   </div>
 </template>

packages/vite/src/app/pages/session/[session]/chunks.vue

@@ -58,7 +58,6 @@ function toggleDisplay(type: ClientSettings['chunkViewType']) {
           <div :class="viewType.icon" />
           {{ viewType.label }}
         </button>
-        <!-- TODO: add graph views -->
       </div>
     </div>
     <template v-if="settings.chunkViewType === 'list'">