Skip to content

Commit 468071c

Browse files
webfansplzwebfansplz
committed
chore: update
2 parents 71ab2a1 + 56f6264 commit 468071c

12 files changed

Lines changed: 1450 additions & 1085 deletions

File tree

‎packages/devtools/src/app/components/data/ModuleDetailsLoader.vue‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -123,12 +123,14 @@ function selectFlowNode(v: boolean) {
123123
>
124124
<span i-ph-clock-duotone inline-block />
125125
</DisplayDuration>
126-
<span op40>|</span>
127-
<div flex="~ gap-1 items-center">
128-
<DisplayFileSizeBadge title="Source code size" :bytes="sourceCodeSize" />
129-
<span i-carbon-arrow-right op50 />
130-
<DisplayFileSizeBadge title="Transformed code size" :bytes="transformedCodeSize" />
131-
</div>
126+
<template v-if="sourceCodeSize && transformedCodeSize">
127+
<span op40>|</span>
128+
<div flex="~ gap-1 items-center">
129+
<DisplayFileSizeBadge title="Source code size" :bytes="sourceCodeSize" />
130+
<span i-carbon-arrow-right op50 />
131+
<DisplayFileSizeBadge title="Transformed code size" :bytes="transformedCodeSize" />
132+
</div>
133+
</template>
132134
</div>
133135
<div flex="~ gap-2">
134136
<button

‎packages/devtools/src/app/components/data/SearchPanel.vue‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
<script setup lang="ts">
2+
import type { FilterMatchRule } from '~/utils/icon'
3+
import { useVModel } from '@vueuse/core'
4+
import { withDefaults } from 'vue'
5+
6+
interface ModelValue { search: string, selected: string[] | null }
7+
8+
const props = withDefaults(
9+
defineProps<{
10+
rules: FilterMatchRule[]
11+
modelValue?: ModelValue
12+
}>(),
13+
{
14+
modelValue: () => ({
15+
search: '',
16+
selected: null,
17+
}),
18+
},
19+
)
20+
21+
const emit = defineEmits<{
22+
(e: 'update:modelValue', value: ModelValue): void
23+
}>()
24+
25+
const model = useVModel(props, 'modelValue', emit)
26+
27+
function isRuleSelected(rule: FilterMatchRule) {
28+
const { modelValue } = props
29+
if (!modelValue?.selected)
30+
return true
31+
return modelValue.selected.includes(rule.name)
32+
}
33+
34+
function toggleRule(rule: FilterMatchRule) {
35+
const { rules } = props
36+
if (!model?.value?.selected) {
37+
model.value.selected = rules.map(r => r.name)
38+
}
39+
if (model.value.selected.includes(rule.name)) {
40+
model.value.selected = model.value.selected.filter(t => t !== rule.name)
41+
}
42+
else {
43+
model.value.selected.push(rule.name)
44+
}
45+
if (model?.value?.selected.length === props.rules.length) {
46+
model.value.selected = null
47+
}
48+
}
49+
50+
function reverseSelect() {
51+
if (model?.value?.selected?.length === props.rules.length) {
52+
model.value.selected = null
53+
}
54+
else if (model?.value?.selected == null) {
55+
model.value.selected = []
56+
}
57+
else {
58+
model.value.selected = props.rules.map(r => r.name).filter(r => !model.value.selected?.includes(r))
59+
}
60+
}
61+
62+
function unselectToggle() {
63+
if (model?.value?.selected?.length === 0) {
64+
model.value.selected = null
65+
}
66+
else {
67+
model.value.selected = []
68+
}
69+
}
70+
</script>
71+
72+
<template>
73+
<div flex="col gap-2" max-w-90vw min-w-30vw border="~ base rounded-xl" bg-glass>
74+
<div border="b base">
75+
<input
76+
v-model="model.search"
77+
p2 px4
78+
w-full
79+
style="outline: none"
80+
placeholder="Search"
81+
>
82+
</div>
83+
<div flex="~ gap-2 wrap" p2>
84+
<label
85+
v-for="rule of rules"
86+
:key="rule.name"
87+
border="~ base rounded-md" px2 py1
88+
flex="~ items-center gap-1"
89+
select-none
90+
:title="rule.description"
91+
:class="isRuleSelected(rule) ? 'bg-active' : 'grayscale op50'"
92+
>
93+
<input
94+
type="checkbox"
95+
mr1
96+
:checked="isRuleSelected(rule)"
97+
@change="toggleRule(rule)"
98+
>
99+
<div :class="rule.icon" icon-catppuccin />
100+
<div text-sm>{{ rule.description || rule.name }}</div>
101+
</label>
102+
<button
103+
rounded-md px2 py1
104+
flex="~ items-center gap-1"
105+
select-none
106+
hover="bg-active"
107+
@click="reverseSelect"
108+
>
109+
<div text-xs op50>
110+
Reverse
111+
</div>
112+
</button>
113+
<button
114+
rounded-md px2 py1
115+
flex="~ items-center gap-1"
116+
select-none
117+
hover="bg-active"
118+
@click="unselectToggle"
119+
>
120+
<div text-xs op50>
121+
{{ model.selected?.length === 0 ? 'Select All' : 'Unselect All' }}
122+
</div>
123+
</button>
124+
</div>
125+
<slot />
126+
</div>
127+
</template>

‎packages/devtools/src/app/components/plugins/FlatList.vue‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<script setup lang="ts">
2+
import type { PluginItem } from '~~/shared/types'
3+
4+
defineProps<{
5+
plugins: PluginItem[]
6+
}>()
7+
</script>
8+
9+
<template>
10+
<div flex="~ col gap-2" p4>
11+
<template v-for="plugin of plugins" :key="plugin.id">
12+
<div font-mono border="~ rounded base" px2 py1 text-sm hover="bg-active" flex="~ gap-4 items-center">
13+
<div w-8 text-right text-xs op50>
14+
#{{ plugin.plugin_id }}
15+
</div>
16+
<DisplayPluginName :name="plugin.name" />
17+
</div>
18+
</template>
19+
</div>
20+
</template>

‎packages/devtools/src/app/pages/session/[session].vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ const session = reactive({
1818
meta: undefined!,
1919
modulesList: shallowRef<ModuleListItem[]>([]),
2020
}) as SessionContext
21+
2122
const rpc = useRpc()
2223
const router = useRouter()
2324
const route = useRoute()

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

Lines changed: 43 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -5,29 +5,28 @@ import { useRoute, useRouter } from '#app/composables/router'
55
import { clearUndefined, toArray } from '@antfu/utils'
66
import { computedWithControl, debouncedWatch } from '@vueuse/core'
77
import Fuse from 'fuse.js'
8-
import { computed, reactive } from 'vue'
8+
import { computed, ref } from 'vue'
99
import { settings } from '~/state/settings'
1010
import { parseReadablePath } from '~/utils/filepath'
11-
import { getFileTypeFromModuleId, getFileTypeFromName } from '~/utils/icon'
11+
import { getFileTypeFromModuleId, ModuleTypeRules } from '~/utils/icon'
1212
1313
const props = defineProps<{
1414
session: SessionContext
1515
}>()
1616
17-
interface Filters {
18-
search: string
19-
file_types: string[] | null
20-
node_modules: string[] | null
21-
}
22-
2317
const route = useRoute()
2418
const router = useRouter()
2519
26-
const filters = reactive<Filters>({
20+
const searchValue = ref<{
21+
search: string
22+
selected: string[] | null
23+
[key: string]: any
24+
}>({
2725
search: (route.query.search || '') as string,
28-
file_types: (route.query.file_types ? toArray(route.query.file_types) : null) as string[] | null,
26+
selected: (route.query.file_types ? toArray(route.query.file_types) : null) as string[] | null,
2927
node_modules: (route.query.node_modules ? toArray(route.query.node_modules) : null) as string[] | null,
3028
})
29+
3130
const moduleViewTypes = [
3231
{
3332
label: 'List',
@@ -52,12 +51,12 @@ const moduleViewTypes = [
5251
] as const
5352
5453
debouncedWatch(
55-
filters,
54+
searchValue.value,
5655
(f) => {
5756
const query: any = {
5857
...route.query,
5958
search: f.search || undefined,
60-
file_types: f.file_types || undefined,
59+
file_types: f.selected || undefined,
6160
node_modules: f.node_modules || undefined,
6261
}
6362
router.replace({
@@ -77,6 +76,12 @@ const parsedPaths = computed(() => props.session.modulesList.map((mod) => {
7776
}
7877
}))
7978
79+
const searchFilterTypes = computed(() => {
80+
return ModuleTypeRules.filter((rule) => {
81+
return parsedPaths.value.some(mod => rule.match.test(mod.mod.id))
82+
})
83+
})
84+
8085
// const allNodeModules = computed(() => {
8186
// const nodeModules = new Set<string>()
8287
// for (const mod of parsedPaths.value) {
@@ -86,45 +91,20 @@ const parsedPaths = computed(() => props.session.modulesList.map((mod) => {
8691
// return nodeModules
8792
// })
8893
89-
const allFileTypes = computed(() => {
90-
const fileTypes = new Set<string>()
91-
for (const mod of parsedPaths.value) {
92-
fileTypes.add(mod.type.name)
93-
}
94-
return fileTypes
95-
})
96-
9794
const filtered = computed(() => {
9895
let modules = parsedPaths.value
99-
if (filters.file_types) {
100-
modules = modules.filter(mod => filters.file_types!.includes(mod.type.name))
96+
if (searchValue.value.selected) {
97+
modules = modules.filter((mod) => {
98+
const type = getFileTypeFromModuleId(mod.mod.id)
99+
return searchValue.value.selected!.includes(type.name)
100+
})
101101
}
102-
if (filters.node_modules) {
103-
modules = modules.filter(mod => mod.path.moduleName && filters.node_modules!.includes(mod.path.moduleName))
102+
if (searchValue.value.node_modules) {
103+
modules = modules.filter(mod => mod.path.moduleName && searchValue.value.node_modules!.includes(mod.path.moduleName))
104104
}
105105
return modules.map(mod => ({ ...mod.mod, path: mod.path.path }))
106106
})
107107
108-
function isFileTypeSelected(type: string) {
109-
return filters.file_types == null || filters.file_types.includes(type)
110-
}
111-
112-
function toggleFileType(type: string) {
113-
if (filters.file_types == null) {
114-
filters.file_types = Array.from(allFileTypes.value)
115-
}
116-
117-
if (filters.file_types.includes(type)) {
118-
filters.file_types = filters.file_types.filter(t => t !== type)
119-
}
120-
else {
121-
filters.file_types.push(type)
122-
}
123-
if (filters.file_types.length === allFileTypes.value.size) {
124-
filters.file_types = null
125-
}
126-
}
127-
128108
const fuse = computedWithControl(
129109
() => filtered.value,
130110
() => new Fuse(filtered.value, {
@@ -136,11 +116,11 @@ const fuse = computedWithControl(
136116
)
137117
138118
const searched = computed(() => {
139-
if (filters.search === '') {
119+
if (!searchValue.value.search) {
140120
return filtered.value
141121
}
142122
return fuse.value
143-
.search(filters.search)
123+
.search(searchValue.value.search)
144124
.map(r => r.item)
145125
})
146126
@@ -154,51 +134,25 @@ function toggleDisplay(type: ClientSettings['moduleGraphViewType']) {
154134

155135
<template>
156136
<div relative max-h-screen of-hidden>
157-
<div flex="col gap-2" absolute left-4 top-4 max-w-90vw border="~ base rounded-xl" bg-glass z-panel-nav>
158-
<div border="b base">
159-
<input
160-
v-model="filters.search"
161-
p2 px4 w-full
162-
style="outline: none"
163-
placeholder="Search"
164-
>
165-
</div>
166-
<div flex="~ gap-2 wrap" p2>
167-
<label
168-
v-for="type of allFileTypes"
169-
:key="type"
170-
border="~ base rounded-md" px2 py1
171-
flex="~ items-center gap-1"
172-
select-none
173-
:title="type"
174-
:class="isFileTypeSelected(type) ? 'bg-active' : 'grayscale op50'"
175-
>
176-
<input
177-
type="checkbox"
178-
:checked="isFileTypeSelected(type)"
179-
mr1
180-
@change="toggleFileType(type)"
137+
<div absolute left-4 top-4 z-panel-nav>
138+
<DataSearchPanel v-model="searchValue" :rules="searchFilterTypes">
139+
<div flex="~ gap-2 items-center" p2 border="t base">
140+
<span op50 pl2 text-sm>View as</span>
141+
<button
142+
v-for="viewType of moduleViewTypes"
143+
:key="viewType.value"
144+
btn-action
145+
:class="settings.moduleGraphViewType === viewType.value ? 'bg-active' : 'grayscale op50'"
146+
@click="toggleDisplay(viewType.value)"
181147
>
182-
<div :class="getFileTypeFromName(type).icon" icon-catppuccin />
183-
<div text-sm>{{ getFileTypeFromName(type).description }}</div>
184-
</label>
185-
</div>
186-
<div flex="~ gap-2 items-center" p2 border="t base">
187-
<span op50 pl2 text-sm>View as</span>
188-
<button
189-
v-for="viewType of moduleViewTypes"
190-
:key="viewType.value"
191-
btn-action
192-
:class="settings.moduleGraphViewType === viewType.value ? 'bg-active' : 'grayscale op50'"
193-
@click="toggleDisplay(viewType.value)"
194-
>
195-
<div :class="viewType.icon" />
196-
{{ viewType.label }}
197-
</button>
198-
</div>
199-
<!-- TODO: should we add filters for node_modules? -->
200-
<!-- {{ allNodeModules }} -->
148+
<div :class="viewType.icon" />
149+
{{ viewType.label }}
150+
</button>
151+
</div>
152+
</DataSearchPanel>
201153
</div>
154+
<!-- TODO: should we add filters for node_modules? -->
155+
<!-- {{ allNodeModules }} -->
202156
<template v-if="settings.moduleGraphViewType === 'list'">
203157
<div of-auto h-screen pt-45>
204158
<ModulesFlatList

0 commit comments

Comments
 (0)