/
imports.vue
112 lines (100 loc) · 2.93 KB
/
imports.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<script setup lang="ts">
import type { Import } from 'unimport'
import Fuse from 'fuse.js'
definePageMeta({
icon: 'carbon-function',
title: 'Imports',
order: 3,
})
const config = useServerConfig()
const onlyUsed = ref(false)
const search = ref('')
const autoImports = useAutoImports()
const importsMetadata = computed(() => autoImports.value?.metadata)
const functions = computed(() => autoImports.value?.imports
.filter(i => i.as || i.name)
.sort((a, b) => (a.as || a.name).localeCompare(b.as || b.name))
|| [],
)
const fuse = computed(() => new Fuse(functions.value, {
keys: [
'from',
'as',
'name',
],
}))
const filtered = computed(() => {
const user = new Map<string, Import[]>()
const lib = new Map<string, Import[]>()
const builtin = new Map<string, Import[]>()
let result = search.value
? fuse.value.search(search.value).map(i => i.item)
: functions.value
if (onlyUsed.value && importsMetadata.value) {
result = result
.filter(i => (i.as || i.name) in importsMetadata.value!.injectionUsage)
}
const count = {
user: 0,
lib: 0,
builtin: 0,
}
result
.forEach((i) => {
const map = isNodeModulePath(i.from)
? isBuiltInModule(getModuleNameFromPath(i.from))
? builtin
: lib
: user
if (!map.has(i.from))
map.set(i.from, [])
map.get(i.from)!.push(i)
count[map === user ? 'user' : map === lib ? 'lib' : 'builtin']++
})
return {
user,
lib,
builtin,
count,
}
})
</script>
<template>
<div v-if="config" relative h-full of-auto>
<Navbar v-model:search="search" pb2>
<div v-if="importsMetadata">
<NSwitch v-model="onlyUsed" n="primary sm">
Show used only
</NSwitch>
</div>
</Navbar>
<NSectionBlock
v-if="filtered.user.size"
:open="filtered.count.user <= DETAILS_MAX_ITEMS"
icon="carbon-function"
text="User composables"
:description="`${filtered.count.user} composables from ${filtered.user.size} modules`"
>
<ComposableTree :map="filtered.user" :root="config.rootDir" :metadata="importsMetadata" />
</NSectionBlock>
<NSectionBlock
v-if="filtered.builtin.size"
:open="filtered.count.builtin <= DETAILS_MAX_ITEMS"
icon="simple-icons-nuxtdotjs"
text="Built-in composables"
:description="`${filtered.count.builtin} composables`"
>
<ComposableTree :map="filtered.builtin" :root="config.rootDir" :metadata="importsMetadata" />
</NSectionBlock>
<NSectionBlock
v-if="filtered.lib.size"
:open="filtered.count.lib <= DETAILS_MAX_ITEMS"
icon="carbon-3d-mpr-toggle"
text="Composables from libraries"
:description="`${filtered.count.lib} composables from ${filtered.lib.size} packages`"
>
<ComposableTree :map="filtered.lib" :root="config.rootDir" :metadata="importsMetadata" />
</NSectionBlock>
</div>
<HelpFab path="/imports" />
</template>