chore: update

Author: webfansplz

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

@@ -7,8 +7,10 @@ import { computed } from 'vue'
 const props = withDefaults(defineProps<{
   chunk: RolldownChunkInfo | RolldownChunkImport
   link?: boolean
+  basic?: boolean
 }>(), {
   link: false,
+  basic: false,
 })
 const route = useRoute()
 const normalizedImports = computed(() => Array.isArray(props.chunk.imports) ? props.chunk.imports.length : props.chunk.imports)
@@ -32,7 +34,7 @@ const normalizedModules = computed(() => Array.isArray(props.chunk.modules) ? pr
 
     <div flex-auto />
 
-    <div flex="~ items-center gap-2">
+    <div v-if="!basic" flex="~ items-center gap-2">
       <span op50 font-mono>#{{ chunk.chunk_id }}</span>
       <div flex="~ gap-1 items-center" :title="`${normalizedImports} imports`">
         <div i-ph-file-arrow-up-duotone />

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

@@ -5,8 +5,10 @@ withDefaults(defineProps<{
   chunks: Array<RolldownChunkInfo & { id: string }>
   session: SessionContext
   link?: boolean
+  basic?: boolean
 }>(), {
   link: true,
+  basic: false,
 })
 
 const emit = defineEmits<{
@@ -21,7 +23,7 @@ const emit = defineEmits<{
   >
     <template #default="{ item }">
       <div flex pb2 @click="emit('select', item)">
-        <ChunksBaseInfo :chunk="item" :link="link" w-full font-mono border="~ rounded base" px2 py1 text-sm hover="bg-active" flex="~ gap-4 items-center">
+        <ChunksBaseInfo :chunk="item" :basic="basic" :link="link" w-full font-mono border="~ rounded base" px2 py1 text-sm hover="bg-active" flex="~ gap-4 items-center">
           <template #left-after>
             <DisplayBadge v-if="item.is_initial" text="initial" />
           </template>

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

@@ -9,10 +9,13 @@ import { createModuleGraph } from '~/composables/moduleGraph'
 type ChunkInfo = RolldownChunkInfo & {
   id: string
 }
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   session: SessionContext
   chunks: ChunkInfo[]
-}>()
+  entryId?: string
+}>(), {
+  entryId: '',
+})
 
 const chunks = computed(() => props.chunks)
 const route = useRoute()
@@ -32,7 +35,7 @@ createModuleGraph<ChunkInfo, ChunkImport>({
       width.value = window.innerWidth
       height.value = window.innerHeight
 
-      const entryChunks = chunks.value.filter(chunk => chunk.reason === 'entry')
+      const entryChunks = chunks.value.filter(chunk => props.entryId ? chunk.id === props.entryId : chunk.reason === 'entry')
 
       const seen = new Set<ChunkInfo>()
       const root = hierarchy<ModuleGraphNode<ChunkInfo, ChunkImport>>(

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

@@ -7,7 +7,8 @@ import { useGraphPathSelector } from '~/composables/graph-path-selector'
 const props = defineProps<{
   session: SessionContext
   data: T[]
-  importId: string
+  importIdKey: string
+  searchKeys?: string[]
 }>()
 
 const emit = defineEmits<{
@@ -34,6 +35,7 @@ const dataMap = computed(() => {
 })
 
 const startSelector: GraphPathSelector<T> = useGraphPathSelector<T>({
+  searchKeys: props.searchKeys,
   getModules: () => {
     if (!startSelector.state.value.search) {
       return props.data
@@ -58,7 +60,7 @@ function getAllImports(moduleId: string, visited = new Set<string>()): T[] {
   const res: T[] = []
 
   for (const importItem of module.imports) {
-    const importedModule = dataMap.value.get(`${importItem[props.importId]}`)
+    const importedModule = dataMap.value.get(`${importItem[props.importIdKey]}`)
     if (!importedModule)
       continue
 
@@ -72,6 +74,7 @@ function getAllImports(moduleId: string, visited = new Set<string>()): T[] {
 }
 
 const endSelector = useGraphPathSelector<T>({
+  searchKeys: props.searchKeys,
   getModules: () => {
     return startSelector.state.value.selected ? getAllImports(startSelector.state.value.selected) : []
   },

packages/vite/src/app/composables/graph-path-selector.ts

@@ -14,6 +14,7 @@ export interface GraphPathSelector<T> {
 }
 
 export function useGraphPathSelector<T extends { id: string }>(options: {
+  searchKeys?: string[]
   getModules: () => T[]
 }): GraphPathSelector<T> {
   const state = ref<{
@@ -32,7 +33,7 @@ export function useGraphPathSelector<T extends { id: string }>(options: {
       modules,
       () => new Fuse(modules.value, {
         includeScore: true,
-        keys: ['id'],
+        keys: options.searchKeys || ['id'],
         ignoreLocation: true,
         threshold: 0.4,
       }),

packages/vite/src/app/composables/moduleGraph.ts

@@ -76,6 +76,9 @@ export const createLinkVertical = linkVertical()
   .y(d => d[1])
 
 export function generateModuleGraphLink<M, I>(link: ModuleGraphLink<M, I>, spacing?: ModuleGraphSpacing) {
+  if (!link.target || !link.source) {
+    return null
+  }
   if (!spacing) {
     if (link.target.x! <= link.source.x!) {
       return createLinkVertical({

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

@@ -77,7 +77,7 @@ const searched = computed<Array<RolldownChunkInfo & { id: string }>>(() => {
     .map(r => r.item)
 })
 
-const { pathSelectorVisible, selectPathNodes, togglePathSelector, normalizedGraph } = useGraphPathManager<RolldownChunkInfo & { id: string }>({
+const { pathSelectorVisible, pathNodes, selectPathNodes, togglePathSelector, normalizedGraph } = useGraphPathManager<RolldownChunkInfo & { id: string }>({
   onToggle: (visible) => {
     searchValue.value.search = visible ? false : ''
   },
@@ -97,12 +97,13 @@ function toggleDisplay(type: ClientSettings['chunkViewType']) {
     <div absolute left-4 top-4 z-panel-nav>
       <DataSearchPanel v-model="searchValue" :rules="[]">
         <template v-if="pathSelectorVisible" #search>
-          <DataPathSelector :session="session" :data="searched" import-id="chunk_id" @select="selectPathNodes" @close="togglePathSelector(false)">
+          <DataPathSelector :session="session" :data="searched" import-id-key="chunk_id" :search-keys="['name']" @select="selectPathNodes" @close="togglePathSelector(false)">
             <template #list="{ select, data }">
               <ChunksFlatList
                 :session="session"
                 :chunks="data"
                 :link="false"
+                :basic="true"
                 @select="select"
               />
             </template>
@@ -162,6 +163,7 @@ function toggleDisplay(type: ClientSettings['chunkViewType']) {
         class="pt32"
         :session="session"
         :chunks="normalizedGraph"
+        :entry-id="pathNodes.start"
       />
     </template>
   </div>

packages/vite/src/app/pages/session/[session]/graph/index.vue

@@ -138,7 +138,7 @@ function toggleDisplay(type: ClientSettings['moduleGraphViewType']) {
     <div absolute left-4 top-4 z-panel-nav>
       <DataSearchPanel v-model="searchValue" :rules="searchFilterTypes">
         <template v-if="pathSelectorVisible" #search>
-          <DataPathSelector :session="session" :data="searched" import-id="module_id" @select="selectPathNodes" @close="togglePathSelector(false)">
+          <DataPathSelector :session="session" :data="searched" import-id-key="module_id" :search-keys="['id']" @select="selectPathNodes" @close="togglePathSelector(false)">
             <template #list="{ select, data }">
               <ModulesFlatList
                 v-if="data?.length"