Skip to content

Commit 97ad195

Browse files
antfuantfu
committed
refactor: name settings values
1 parent 1eb434b commit 97ad195

7 files changed

Lines changed: 48 additions & 52 deletions

File tree

‎packages/core/src/client/webcomponents/components/ViewBuiltinSettings.vue‎

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script setup lang="ts">
22
import type { DevToolsViewBuiltin } from '@vitejs/devtools-kit'
33
import type { DocksContext } from '@vitejs/devtools-kit/client'
4-
import { DEFAULT_STATE_DOCKS_SETTINGS } from '@vitejs/devtools-kit/constants'
4+
import { DEFAULT_STATE_USER_SETTINGS } from '@vitejs/devtools-kit/constants'
55
import { computed } from 'vue'
66
import { docksGroupByCategories } from '../state/dock-settings'
77
import { sharedStateToRef } from '../state/docks'
@@ -33,55 +33,55 @@ function getCategoryLabel(category: string): string {
3333
}
3434
3535
function toggleDock(id: string, visible?: boolean) {
36-
const hidden = settings.value.hiddenDocks
36+
const hidden = settings.value.docksHidden
3737
const isHidden = hidden.includes(id)
3838
const shouldShow = visible ?? isHidden
3939
4040
if (shouldShow) {
4141
settingsStore.mutate((state) => {
42-
state.hiddenDocks = state.hiddenDocks.filter((i: string) => i !== id)
42+
state.docksHidden = state.docksHidden.filter((i: string) => i !== id)
4343
})
4444
}
4545
else {
4646
settingsStore.mutate((state) => {
47-
state.hiddenDocks = [...state.hiddenDocks, id]
47+
state.docksHidden = [...state.docksHidden, id]
4848
})
4949
}
5050
}
5151
5252
function toggleCategory(category: string, visible?: boolean) {
53-
const hidden = settings.value.hiddenCategories
53+
const hidden = settings.value.docksCategoriesHidden
5454
const isHidden = hidden.includes(category)
5555
const shouldShow = visible ?? isHidden
5656
5757
if (shouldShow) {
5858
settingsStore.mutate((state) => {
59-
state.hiddenCategories = state.hiddenCategories.filter((i: string) => i !== category)
59+
state.docksCategoriesHidden = state.docksCategoriesHidden.filter((i: string) => i !== category)
6060
})
6161
}
6262
else {
6363
settingsStore.mutate((state) => {
64-
state.hiddenCategories = [...state.hiddenCategories, category]
64+
state.docksCategoriesHidden = [...state.docksCategoriesHidden, category]
6565
})
6666
}
6767
}
6868
6969
function togglePin(id: string) {
70-
const pinned = settings.value.pinnedDocks
70+
const pinned = settings.value.docksPinned
7171
if (pinned.includes(id)) {
7272
settingsStore.mutate((state) => {
73-
state.pinnedDocks = state.pinnedDocks.filter((i: string) => i !== id)
73+
state.docksPinned = state.docksPinned.filter((i: string) => i !== id)
7474
})
7575
}
7676
else {
7777
settingsStore.mutate((state) => {
78-
state.pinnedDocks = [...state.pinnedDocks, id]
78+
state.docksPinned = [...state.docksPinned, id]
7979
})
8080
}
8181
}
8282
8383
function isInCustomOrder(id: string): boolean {
84-
return settings.value.customOrder[id] !== undefined
84+
return settings.value.docksCustomOrder[id] !== undefined
8585
}
8686
8787
function moveOrder(category: string, id: string, delta: number) {
@@ -99,7 +99,7 @@ function moveOrder(category: string, id: string, delta: number) {
9999
100100
settingsStore.mutate((state) => {
101101
array.forEach((item, index) => {
102-
state.customOrder[item.id] = index
102+
state.docksCustomOrder[item.id] = index
103103
})
104104
})
105105
}
@@ -117,7 +117,7 @@ function resetCustomOrderForCategory(category: string) {
117117
return
118118
settingsStore.mutate((state) => {
119119
items[1].forEach((item) => {
120-
delete state.customOrder[item.id]
120+
delete state.docksCustomOrder[item.id]
121121
})
122122
})
123123
}
@@ -126,7 +126,7 @@ function resetSettings() {
126126
// eslint-disable-next-line no-alert
127127
if (confirm('Reset all dock settings to defaults?')) {
128128
settingsStore.mutate(() => {
129-
return DEFAULT_STATE_DOCKS_SETTINGS()
129+
return DEFAULT_STATE_USER_SETTINGS()
130130
})
131131
}
132132
}
@@ -152,20 +152,20 @@ function resetSettings() {
152152
<template v-for="[category, entries] of categories" :key="category">
153153
<div
154154
class="border border-base rounded-lg overflow-hidden transition-opacity"
155-
:class="settings.hiddenCategories.includes(category) ? 'op40' : ''"
155+
:class="settings.docksCategoriesHidden.includes(category) ? 'op40' : ''"
156156
>
157157
<!-- Category header -->
158158
<div
159159
class="flex items-center gap-2 px-4 py-3 bg-gray/5 cursor-pointer select-none border-b border-base"
160160
>
161161
<button
162162
class="w-5 h-5 flex items-center justify-center rounded transition-colors"
163-
:class="settings.hiddenCategories.includes(category) ? 'bg-gray/20' : 'bg-lime/20 text-lime'"
163+
:class="settings.docksCategoriesHidden.includes(category) ? 'bg-gray/20' : 'bg-lime/20 text-lime'"
164164
@click="toggleCategory(category)"
165165
>
166166
<div
167167
class="transition-transform"
168-
:class="settings.hiddenCategories.includes(category) ? 'i-ph-eye-slash text-sm op50' : 'i-ph-check-bold text-xs'"
168+
:class="settings.docksCategoriesHidden.includes(category) ? 'i-ph-eye-slash text-sm op50' : 'i-ph-check-bold text-xs'"
169169
/>
170170
</button>
171171
<span class="font-medium capitalize">{{ getCategoryLabel(category) }}</span>
@@ -187,21 +187,21 @@ function resetSettings() {
187187
v-for="(dock, index) of entries"
188188
:key="dock.id"
189189
class="flex items-center gap-3 px-4 py-2.5 hover:bg-gray/5 transition-colors group border-b border-base border-t-0"
190-
:class="settings.hiddenDocks.includes(dock.id) ? 'op40' : ''"
190+
:class="settings.docksHidden.includes(dock.id) ? 'op40' : ''"
191191
>
192192
<!-- Visibility toggle -->
193193
<button
194194
class="w-6 h-6 flex items-center justify-center rounded border border-transparent hover:border-base transition-colors shrink-0"
195-
:class="settings.hiddenDocks.includes(dock.id) ? 'op50' : ''"
196-
:title="settings.hiddenDocks.includes(dock.id) ? 'Show' : 'Hide'"
195+
:class="settings.docksHidden.includes(dock.id) ? 'op50' : ''"
196+
:title="settings.docksHidden.includes(dock.id) ? 'Show' : 'Hide'"
197197
@click="toggleDock(dock.id)"
198198
>
199199
<div
200200
class="w-4 h-4 rounded flex items-center justify-center transition-colors"
201-
:class="settings.hiddenDocks.includes(dock.id) ? 'bg-gray/30' : 'bg-lime/20 text-lime'"
201+
:class="settings.docksHidden.includes(dock.id) ? 'bg-gray/30' : 'bg-lime/20 text-lime'"
202202
>
203203
<div
204-
v-if="!settings.hiddenDocks.includes(dock.id)"
204+
v-if="!settings.docksHidden.includes(dock.id)"
205205
class="i-ph-check-bold text-xs"
206206
/>
207207
</div>
@@ -212,11 +212,11 @@ function resetSettings() {
212212
:icon="dock.icon"
213213
:title="dock.title"
214214
class="w-5 h-5 shrink-0"
215-
:class="settings.hiddenDocks.includes(dock.id) ? 'saturate-0' : ''"
215+
:class="settings.docksHidden.includes(dock.id) ? 'saturate-0' : ''"
216216
/>
217217
<span
218218
class="flex-1 truncate"
219-
:class="settings.hiddenDocks.includes(dock.id) ? 'line-through op60' : ''"
219+
:class="settings.docksHidden.includes(dock.id) ? 'line-through op60' : ''"
220220
>
221221
{{ dock.title }}
222222
</span>
@@ -244,12 +244,12 @@ function resetSettings() {
244244
<!-- Pin toggle -->
245245
<button
246246
class="w-7 h-7 flex items-center justify-center rounded hover:bg-gray/20 transition-colors shrink-0"
247-
:class="settings.pinnedDocks.includes(dock.id) ? 'text-amber' : 'op40 hover:op70'"
248-
:title="settings.pinnedDocks.includes(dock.id) ? 'Unpin' : 'Pin'"
247+
:class="settings.docksPinned.includes(dock.id) ? 'text-amber' : 'op40 hover:op70'"
248+
:title="settings.docksPinned.includes(dock.id) ? 'Unpin' : 'Pin'"
249249
@click="togglePin(dock.id)"
250250
>
251251
<div
252-
:class="settings.pinnedDocks.includes(dock.id) ? 'i-ph-push-pin-fill rotate--45' : 'i-ph-push-pin'"
252+
:class="settings.docksPinned.includes(dock.id) ? 'i-ph-push-pin-fill rotate--45' : 'i-ph-push-pin'"
253253
class="text-base"
254254
/>
255255
</button>

‎packages/core/src/client/webcomponents/state/context.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import type { DevToolsRpcClient, DockClientScriptContext, DockEntryState, DockPa
22
import type { SharedState } from '@vitejs/devtools-kit/utils/shared-state'
33
import type { Ref } from 'vue'
44
import type { DevToolsDocksUserSettings } from './dock-settings'
5-
import { DEFAULT_STATE_DOCKS_SETTINGS } from '@vitejs/devtools-kit/constants'
5+
import { DEFAULT_STATE_USER_SETTINGS } from '@vitejs/devtools-kit/constants'
66
import { computed, markRaw, reactive, ref, toRefs, watchEffect } from 'vue'
77
import { BUILTIN_ENTRIES } from '../constants'
88
import { docksGroupByCategories } from './dock-settings'
@@ -87,7 +87,7 @@ export async function createDocksContext(
8787
if (!_settingsStorePromise) {
8888
_settingsStorePromise = rpc.sharedState.get(
8989
'devtoolskit:internal:user-settings',
90-
{ initialValue: DEFAULT_STATE_DOCKS_SETTINGS() },
90+
{ initialValue: DEFAULT_STATE_USER_SETTINGS() },
9191
)
9292
}
9393
return _settingsStorePromise

‎packages/core/src/client/webcomponents/state/dock-settings.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -20,20 +20,20 @@ export function docksGroupByCategories(
2020
settings: Immutable<DevToolsDocksUserSettings>,
2121
options?: { includeHidden?: boolean },
2222
): DevToolsDockEntriesGrouped {
23-
const { hiddenDocks, hiddenCategories, customOrder, pinnedDocks } = settings
23+
const { docksHidden, docksCategoriesHidden, docksCustomOrder, docksPinned } = settings
2424
const { includeHidden = false } = options ?? {}
2525

2626
const map = new Map<string, DevToolsDockEntry[]>()
2727
for (const entry of entries) {
2828
// Skip if hidden by entry property
2929
if (entry.isHidden && !includeHidden)
3030
continue
31-
if (!includeHidden && hiddenDocks.includes(entry.id))
31+
if (!includeHidden && docksHidden.includes(entry.id))
3232
continue
3333

3434
const category = entry.category ?? 'default'
3535
// Skip if category is hidden
36-
if (!includeHidden && hiddenCategories.includes(category))
36+
if (!includeHidden && docksCategoriesHidden.includes(category))
3737
continue
3838

3939
if (!map.has(category))
@@ -52,14 +52,14 @@ export function docksGroupByCategories(
5252
grouped.forEach(([_, items]) => {
5353
items.sort((a, b) => {
5454
// Pinned entries come first
55-
const aPinned = pinnedDocks.includes(a.id)
56-
const bPinned = pinnedDocks.includes(b.id)
55+
const aPinned = docksPinned.includes(a.id)
56+
const bPinned = docksPinned.includes(b.id)
5757
if (aPinned !== bPinned)
5858
return aPinned ? -1 : 1
5959

6060
// Then sort by custom order
61-
const customOrderA = customOrder[a.id] ?? 0
62-
const customOrderB = customOrder[b.id] ?? 0
61+
const customOrderA = docksCustomOrder[a.id] ?? 0
62+
const customOrderB = docksCustomOrder[b.id] ?? 0
6363
if (customOrderA !== customOrderB)
6464
return customOrderA - customOrderB
6565

‎packages/core/src/node/host-docks.ts‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import type { DevToolsDockEntry, DevToolsDockHost as DevToolsDockHostType, DevToolsDocksUserSettings, DevToolsDockUserEntry, DevToolsNodeContext, DevToolsViewBuiltin } from '@vitejs/devtools-kit'
22
import type { SharedState } from '@vitejs/devtools-kit/utils/shared-state'
3+
import { DEFAULT_STATE_USER_SETTINGS } from '@vitejs/devtools-kit/constants'
34
import { createEventEmitter } from '@vitejs/devtools-kit/utils/events'
45
import { join } from 'pathe'
56
import { createStorage } from './storage'
@@ -19,12 +20,7 @@ export class DevToolsDockHost implements DevToolsDockHostType {
1920
this.userSettings = await this.context.rpc.sharedState.get('devtoolskit:internal:user-settings', {
2021
sharedState: createStorage({
2122
filepath: join(this.context.workspaceRoot, 'node_modules/.vite/devtools/settings.json'),
22-
initialValue: {
23-
hiddenDocks: [],
24-
hiddenCategories: [],
25-
pinnedDocks: [],
26-
customOrder: {},
27-
},
23+
initialValue: DEFAULT_STATE_USER_SETTINGS(),
2824
}),
2925
})
3026
}

‎packages/kit/src/constants.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,10 @@ export const DEFAULT_CATEGORIES_ORDER: Record<string, number> = {
1010
'~builtin': 1000,
1111
} satisfies Record<DevToolsDockEntryCategory, number>
1212

13-
export const DEFAULT_STATE_DOCKS_SETTINGS: () => DevToolsDocksUserSettings = () => ({
14-
hiddenDocks: [],
15-
hiddenCategories: [],
16-
pinnedDocks: [],
17-
customOrder: {},
13+
export const DEFAULT_STATE_USER_SETTINGS: () => DevToolsDocksUserSettings = () => ({
14+
docksHidden: [],
15+
docksCategoriesHidden: [],
16+
docksPinned: [],
17+
docksCustomOrder: {},
1818
showIframeAddressBar: false,
1919
})

‎packages/kit/src/types/rpc.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,8 @@ export type RpcFunctionsHost = RpcFunctionsCollectorBase<DevToolsRpcServerFuncti
4545
}
4646

4747
export interface RpcSharedStateGetOptions<T> {
48-
initialValue?: T
4948
sharedState?: SharedState<T>
49+
initialValue?: T
5050
}
5151

5252
export interface RpcSharedStateHost {

‎packages/kit/src/types/settings.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
export interface DevToolsDocksUserSettings {
2-
hiddenDocks: string[]
3-
hiddenCategories: string[]
4-
pinnedDocks: string[]
5-
customOrder: Record<string, number>
2+
docksHidden: string[]
3+
docksCategoriesHidden: string[]
4+
docksPinned: string[]
5+
docksCustomOrder: Record<string, number>
66
showIframeAddressBar: boolean
77
}

0 commit comments

Comments
 (0)