Skip to content

Commit 059fee8

Browse files
webfansplzwebfansplz
committed
feat: init
1 parent b518f84 commit 059fee8

6 files changed

Lines changed: 326 additions & 140 deletions

File tree

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

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,16 @@
11
<script setup lang="ts">
22
import type { RolldownChunkInfo, SessionContext } from '~~/shared/types'
33
4-
defineProps<{
5-
chunks: RolldownChunkInfo[]
4+
withDefaults(defineProps<{
5+
chunks: Array<RolldownChunkInfo & { id: string }>
66
session: SessionContext
7+
link?: boolean
8+
}>(), {
9+
link: true,
10+
})
11+
12+
const emit = defineEmits<{
13+
(e: 'select', chunk: RolldownChunkInfo & { id: string }): void
714
}>()
815
</script>
916

@@ -13,8 +20,8 @@ defineProps<{
1320
key-prop="chunk_id"
1421
>
1522
<template #default="{ item }">
16-
<div flex pb2>
17-
<ChunksBaseInfo :chunk="item" link w-full font-mono border="~ rounded base" px2 py1 text-sm hover="bg-active" flex="~ gap-4 items-center">
23+
<div flex pb2 @click="emit('select', item)">
24+
<ChunksBaseInfo :chunk="item" :link="link" w-full font-mono border="~ rounded base" px2 py1 text-sm hover="bg-active" flex="~ gap-4 items-center">
1825
<template #left-after>
1926
<DisplayBadge v-if="item.is_initial" text="initial" />
2027
</template>

packages/vite/src/app/components/modules/PathSelector.vue renamed to packages/vite/src/app/components/data/PathSelector.vue

Lines changed: 57 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,64 @@
1-
<script setup lang="ts">
2-
import type { ModuleListItem, SessionContext } from '~~/shared/types'
1+
<script setup lang="ts" generic="T extends { id:string, imports: Record<string, unknown>[] }">
2+
import type { SessionContext } from '~~/shared/types'
3+
import type { GraphPathSelector } from '~/composables/graph-path-selector'
34
import { computed, watch } from 'vue'
4-
import { useModulePathSelector } from '~/composables/moduleGraph'
5+
import { useGraphPathSelector } from '~/composables/graph-path-selector'
56
67
const props = defineProps<{
78
session: SessionContext
8-
modules: ModuleListItem[]
9+
data: T[]
10+
importId: string
911
}>()
1012
1113
const emit = defineEmits<{
1214
(e: 'close'): void
1315
(e: 'select', nodes: { start: string, end: string }): void
1416
}>()
1517
16-
const modulesMap = computed(() => {
17-
const map = new Map<string, ModuleListItem>()
18-
props.modules.forEach((m) => {
18+
defineSlots<{
19+
list: (props: {
20+
select: (module: T) => void
21+
data: T[]
22+
}) => void
23+
item: (props: {
24+
id: string
25+
}) => void
26+
}>()
27+
28+
const dataMap = computed(() => {
29+
const map = new Map<string, T>()
30+
props.data.forEach((m) => {
1931
map.set(m.id, m)
2032
})
2133
return map
2234
})
2335
24-
const startSelector = useModulePathSelector({
36+
const startSelector: GraphPathSelector<T> = useGraphPathSelector<T>({
2537
getModules: () => {
2638
if (!startSelector.state.value.search) {
27-
return props.modules
39+
return props.data
2840
}
2941
else {
3042
return startSelector.fuse.value!.value?.search(startSelector.state.value.search).map(r => r.item) ?? []
3143
}
3244
},
3345
})
3446
35-
startSelector.initSelector(computed(() => props.modules))
47+
startSelector.initSelector(computed(() => props.data))
3648
37-
function getAllImports(moduleId: string, visited = new Set<string>()): ModuleListItem[] {
49+
function getAllImports(moduleId: string, visited = new Set<string>()): T[] {
3850
if (visited.has(moduleId))
3951
return []
4052
visited.add(moduleId)
4153
42-
const module = modulesMap.value.get(moduleId)
54+
const module = dataMap.value.get(moduleId)
4355
if (!module?.imports?.length)
4456
return []
4557
46-
const res: ModuleListItem[] = []
58+
const res: T[] = []
4759
4860
for (const importItem of module.imports) {
49-
const importedModule = modulesMap.value.get(importItem.module_id)
61+
const importedModule = dataMap.value.get(`${importItem[props.importId]}`)
5062
if (!importedModule)
5163
continue
5264
@@ -59,7 +71,7 @@ function getAllImports(moduleId: string, visited = new Set<string>()): ModuleLis
5971
return res
6072
}
6173
62-
const endSelector = useModulePathSelector({
74+
const endSelector = useGraphPathSelector<T>({
6375
getModules: () => {
6476
return startSelector.state.value.selected ? getAllImports(startSelector.state.value.selected) : []
6577
},
@@ -82,39 +94,60 @@ watch([() => startSelector.state.value.selected, () => endSelector.state.value.s
8294
end: endSelector.state.value.selected ?? '',
8395
})
8496
})
97+
98+
function close() {
99+
emit('select', {
100+
start: '',
101+
end: '',
102+
})
103+
emit('close')
104+
}
85105
</script>
86106

87107
<template>
88-
<div h12 px4 p2 relative flex="~ gap2 items-center">
89-
<div flex="~ items-center gap2" class="flex-1" min-w-0>
90-
<ModulesPathSelectorItem
108+
<div h10 px4 p1 relative flex="~ gap2 items-center">
109+
<div flex="~ items-center gap2" class="flex-1 h-full" min-w-0>
110+
<DataPathSelectorItem
91111
v-model:search="startSelector.state.value.search"
92112
placeholder="Start"
93113
:selector="startSelector"
94114
:session="session"
95-
:modules="startSelector.modules.value"
115+
:data="startSelector.modules.value"
96116
@clear="() => { startSelector.clear(); endSelector.clear() }"
97-
/>
117+
>
118+
<template #list>
119+
<slot name="list" :select="startSelector.select" :data="startSelector.modules.value" />
120+
</template>
121+
<template #item>
122+
<slot :id="startSelector.state.value.selected!" name="item" />
123+
</template>
124+
</DataPathSelectorItem>
98125
<div class="i-carbon-arrow-right op50" flex-shrink-0 />
99126

100-
<ModulesPathSelectorItem
127+
<DataPathSelectorItem
101128
v-model:search="endSelector.state.value.search"
102129
placeholder="End"
103130
:selector="endSelector"
104131
:session="session"
105-
:modules="filteredEndModules"
132+
:data="filteredEndModules"
106133
@clear="endSelector.clear"
107134
>
135+
<template #list>
136+
<slot name="list" :select="endSelector.select" :data="filteredEndModules" />
137+
</template>
138+
<template #item>
139+
<slot :id="endSelector.state.value.selected!" name="item" />
140+
</template>
108141
<template #empty>
109142
<div flex="~ items-center justify-center" w-full h-20>
110143
<span italic op50>
111144
{{ startSelector.state.value.selected ? 'No modules' : 'Select a start module to get end modules' }}
112145
</span>
113146
</div>
114147
</template>
115-
</ModulesPathSelectorItem>
148+
</DataPathSelectorItem>
116149
</div>
117150

118-
<DisplayCloseButton class="mr--2" @click="emit('close')" />
151+
<DisplayCloseButton class="mr--2" @click="close" />
119152
</div>
120153
</template>

packages/vite/src/app/components/modules/PathSelectorItem.vue renamed to packages/vite/src/app/components/data/PathSelectorItem.vue

Lines changed: 18 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
1-
<script setup lang="ts">
2-
import type { ModuleListItem, SessionContext } from '~~/shared/types'
3-
import type { ModulePathSelector } from '~/composables/moduleGraph'
1+
<script setup lang="ts" generic="T extends { id:string, imports: any[] }">
2+
import type { SessionContext } from '~~/shared/types'
3+
import type { GraphPathSelector } from '~/composables/graph-path-selector'
44
import { hideAllPoppers, Menu as VMenu } from 'floating-vue'
55
66
withDefaults(
77
defineProps<{
8-
selector: ModulePathSelector
8+
selector: GraphPathSelector<T>
99
placeholder: string
1010
session: SessionContext
11-
modules?: ModuleListItem[]
11+
data?: T[]
1212
emptyStateText?: string
1313
onClear?: () => void
1414
}>(),
1515
{
16-
modules: undefined,
16+
data: undefined,
1717
emptyStateText: undefined,
1818
onClear: undefined,
1919
},
@@ -23,40 +23,32 @@ const emit = defineEmits<{
2323
(e: 'clear'): void
2424
}>()
2525
26+
defineSlots<{
27+
list: () => void
28+
item: () => void
29+
empty: () => void
30+
}>()
31+
2632
const search = defineModel<string>('search', { required: true })
2733
</script>
2834

2935
<template>
30-
<div flex-1 w-0>
36+
<div flex-1 w-0 h-full>
3137
<div v-if="selector.state.value.selected" w-full overflow-hidden flex="~ items-center" border="~ base rounded" p1 relative>
32-
<div overflow-hidden text-ellipsis pr6 py0.5 w-0 flex-1>
33-
<DisplayModuleId
34-
:id="selector.state.value.selected"
35-
:session="session"
36-
block text-nowrap
37-
:link="false"
38-
:disable-tooltip="true"
39-
/>
38+
<div overflow-hidden text-ellipsis pr6 w-0 flex-1>
39+
<slot name="item" />
4040
</div>
4141
<button i-carbon-clean text-4 hover="op100" op50 title="Clear" absolute right-2 @click="emit('clear')" />
4242
</div>
43-
<VMenu v-else :distance="15" :triggers="['click']" :auto-hide="false" :delay="{ show: 300, hide: 150 }">
43+
<VMenu v-else :distance="15" :triggers="['click']" :auto-hide="false" :delay="{ show: 300, hide: 150 }" class="h-full">
4444
<input
4545
v-model="search"
46-
p1
47-
px4 w-full border="~ base rounded-1" style="outline: none" :placeholder="placeholder"
46+
py1 px4 w-full h-full border="~ base rounded-1" style="outline: none" :placeholder="placeholder"
4847
@blur="hideAllPoppers"
4948
>
5049
<template #popper>
5150
<div class="p2 w100" flex="~ col gap2">
52-
<ModulesFlatList
53-
v-if="modules?.length"
54-
:session="session"
55-
:modules="modules"
56-
disable-tooltip
57-
:link="false"
58-
@select="selector.select"
59-
/>
51+
<slot v-if="data?.length" name="list" />
6052
<slot v-else name="empty" />
6153
</div>
6254
</template>

0 commit comments

Comments
 (0)