chore: refactor

Author: antfu

packages/core/src/client/standalone/App.vue

@@ -1,15 +1,13 @@
 <script setup lang="ts">
 import type { DocksContext } from '@vitejs/devtools-kit/client'
 import { getDevToolsRpcClient } from '@vitejs/devtools-kit/client'
-import { computed, markRaw, ref, useTemplateRef, watch } from 'vue'
+import { markRaw, ref, useTemplateRef, watch } from 'vue'
 import DockEntriesWithCategories from '../webcomponents/components/DockEntriesWithCategories.vue'
 import FloatingElements from '../webcomponents/components/FloatingElements.vue'
 import VitePlus from '../webcomponents/components/icons/VitePlus.vue'
 import ViewBuiltinClientAuthNotice from '../webcomponents/components/ViewBuiltinClientAuthNotice.vue'
 import ViewEntry from '../webcomponents/components/ViewEntry.vue'
 import { createDocksContext } from '../webcomponents/state/context'
-import { groupDockEntries } from '../webcomponents/state/dock-settings'
-import { sharedStateToRef } from '../webcomponents/state/docks'
 import { PersistedDomViewsManager } from '../webcomponents/utils/PersistedDomViewsManager'
 
 const rpc = await getDevToolsRpcClient()
@@ -30,19 +28,13 @@ context.rpc.events.on('rpc:is-trusted:updated', (isTrusted) => {
   isRpcTrusted.value = isTrusted
 })
 
-const settings = sharedStateToRef(await context.docks.getSettingsStore())
-
 watch(
   () => context.docks.entries,
   () => {
     context.docks.selectedId ||= context.docks.entries[0]?.id ?? null
   },
   { immediate: true },
 )
-
-const groupedEntries = computed(() => {
-  return groupDockEntries(context.docks.entries, settings.value)
-})
 </script>
 
 <template>
@@ -57,7 +49,7 @@ const groupedEntries = computed(() => {
       <div class="transition duration-200 p2">
         <DockEntriesWithCategories
           :context="context"
-          :groups="groupedEntries"
+          :groups="context.docks.groupedEntries"
           :is-vertical="false"
           :selected="context.docks.selected"
           @select="(e) => context.docks.switchEntry(e?.id)"

packages/core/src/client/webcomponents/components/Dock.vue

@@ -1,11 +1,9 @@
 <script setup lang="ts">
-import type { DevToolsDocksUserSettings } from '@vitejs/devtools-kit'
 import type { DocksContext } from '@vitejs/devtools-kit/client'
 import { useEventListener, useScreenSafeArea } from '@vueuse/core'
-import { computed, onMounted, reactive, ref, shallowRef, useTemplateRef, watch, watchEffect } from 'vue'
+import { computed, onMounted, reactive, ref, useTemplateRef, watchEffect } from 'vue'
 import { BUILTIN_ENTRY_CLIENT_AUTH_NOTICE } from '../constants'
-import { groupDockEntries, splitGroupsWithCapacity } from '../state/dock-settings'
-import { sharedStateToRef } from '../state/docks'
+import { docksSplitGroupsWithCapacity } from '../state/dock-settings'
 import DockEntriesWithCategories from './DockEntriesWithCategories.vue'
 import DockOverflowButton from './DockOverflowButton.vue'
 import BracketLeft from './icons/BracketLeft.vue'
@@ -76,24 +74,11 @@ context.rpc.events.on('rpc:is-trusted:updated', (isTrusted) => {
     context.docks.switchEntry(null)
 })
 
-const settings = shallowRef<DevToolsDocksUserSettings>({
-  hiddenDocks: [],
-  hiddenCategories: [],
-  pinnedDocks: [],
-  customOrder: {},
-})
-
-const groupedEntries = computed(() => {
-  const groups = groupDockEntries(context.docks.entries, settings.value)
-  return splitGroupsWithCapacity(groups, 5)
+const splitedEntries = computed(() => {
+  return docksSplitGroupsWithCapacity(context.docks.groupedEntries, 5)
 })
 
 onMounted(async () => {
-  const settingsStore = await context.docks.getSettingsStore()
-  const settingsRef = sharedStateToRef(settingsStore)
-  settings.value = settingsRef.value
-  watch(settingsRef, v => settings.value = v)
-
   windowSize.width = window.innerWidth
   windowSize.height = window.innerHeight
 
@@ -332,18 +317,18 @@ onMounted(() => {
         >
           <DockEntriesWithCategories
             :context="context"
-            :groups="groupedEntries.visible"
+            :groups="splitedEntries.visible"
             :is-vertical="context.panel.isVertical"
             :selected="context.docks.selected"
             @select="(e) => context.docks.switchEntry(e?.id)"
           />
 
-          <template v-if="groupedEntries.overflow.length > 0">
+          <template v-if="splitedEntries.overflow.length > 0">
             <div class="border-base m1 h-20px w-px border-r-1.5" />
             <DockOverflowButton
               :context="context"
               :is-vertical="context.panel.isVertical"
-              :groups="groupedEntries.overflow"
+              :groups="splitedEntries.overflow"
               :selected="context.docks.selected"
               @select="(e) => context.docks.switchEntry(e?.id)"
             />

packages/core/src/client/webcomponents/components/DockEntriesWithCategories.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import type { DevToolsDockEntry } from '@vitejs/devtools-kit'
 import type { DocksContext } from '@vitejs/devtools-kit/client'
-import type { GroupedDockEntries } from '../state/dock-settings'
+import type { DevToolsDockEntriesGrouped } from '../state/dock-settings'
 import DockEntries from './DockEntries.vue'
 
 defineProps<{
   context: DocksContext
-  groups: GroupedDockEntries
+  groups: DevToolsDockEntriesGrouped
   selected: DevToolsDockEntry | null
   isVertical: boolean
 }>()

packages/core/src/client/webcomponents/components/DockOverflowButton.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { DevToolsDockEntry } from '@vitejs/devtools-kit'
 import type { DocksContext } from '@vitejs/devtools-kit/client'
-import type { GroupedDockEntries } from '../state/dock-settings'
+import type { DevToolsDockEntriesGrouped } from '../state/dock-settings'
 import { watchDebounced } from '@vueuse/core'
 import { computed, h, ref, useTemplateRef } from 'vue'
 import { setDocksOverflowPanel, useDocksOverflowPanel } from '../state/floating-tooltip'
@@ -11,7 +11,7 @@ import DockEntry from './DockEntry.vue'
 const props = defineProps<{
   context: DocksContext
   isVertical: boolean
-  groups: GroupedDockEntries
+  groups: DevToolsDockEntriesGrouped
   selected: DevToolsDockEntry | null
 }>()
 

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

@@ -2,7 +2,7 @@
 import type { DevToolsViewBuiltin } from '@vitejs/devtools-kit'
 import type { DocksContext } from '@vitejs/devtools-kit/client'
 import { computed } from 'vue'
-import { defaultDocksSettings, groupDockEntries } from '../state/dock-settings'
+import { defaultDocksSettings, docksGroupByCategories } from '../state/dock-settings'
 import { sharedStateToRef } from '../state/docks'
 import DockIcon from './DockIcon.vue'
 
@@ -11,11 +11,11 @@ const props = defineProps<{
   entry: DevToolsViewBuiltin
 }>()
 
-const settingsStore = await props.context.docks.getSettingsStore()
+const settingsStore = props.context.docks.settings
 const settings = sharedStateToRef(settingsStore)
 
 const categories = computed(() => {
-  return groupDockEntries(props.context.docks.entries, settingsStore.value(), { includeHidden: true })
+  return docksGroupByCategories(props.context.docks.entries, settingsStore.value(), { includeHidden: true })
 })
 
 function getCategoryLabel(category: string): string {

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

@@ -4,7 +4,7 @@ import type { Ref } from 'vue'
 import type { DevToolsDocksUserSettings } from './dock-settings'
 import { computed, markRaw, reactive, ref, toRefs, watchEffect } from 'vue'
 import { BUILTIN_ENTRIES } from '../constants'
-import { defaultDocksSettings } from './dock-settings'
+import { defaultDocksSettings, docksGroupByCategories } from './dock-settings'
 import { createDockEntryState, DEFAULT_DOCK_PANEL_STORE, useDocksEntries } from './docks'
 import { executeSetupScript } from './setup-script'
 
@@ -92,6 +92,12 @@ export async function createDocksContext(
     return _settingsStorePromise
   }
 
+  // Get settings store and create computed grouped entries
+  const settingsStore = markRaw(await getSettingsStore())
+  const groupedEntries = computed(() => {
+    return docksGroupByCategories(dockEntries.value, settingsStore.value())
+  })
+
   _docksContext = reactive({
     panel: {
       store: panelStore,
@@ -104,8 +110,9 @@ export async function createDocksContext(
       selected,
       entries: dockEntries,
       entryToStateMap: markRaw(dockEntryStateMap),
+      groupedEntries,
+      settings: settingsStore,
       getStateById: (id: string) => dockEntryStateMap.get(id),
-      getSettingsStore,
       switchEntry,
       toggleEntry,
     },

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

@@ -4,11 +4,11 @@ import { DEFAULT_CATEGORIES_ORDER } from '../constants'
 
 export type { DevToolsDocksUserSettings }
 
-export type GroupedDockEntries = [category: string, entries: DevToolsDockEntry[]][]
+export type DevToolsDockEntriesGrouped = [category: string, entries: DevToolsDockEntry[]][]
 
 export interface SplitGroupsResult {
-  visible: GroupedDockEntries
-  overflow: GroupedDockEntries
+  visible: DevToolsDockEntriesGrouped
+  overflow: DevToolsDockEntriesGrouped
 }
 
 export function defaultDocksSettings(): DevToolsDocksUserSettings {
@@ -24,11 +24,11 @@ export function defaultDocksSettings(): DevToolsDocksUserSettings {
  * Group and sort dock entries based on user settings.
  * Filters out hidden entries and categories, sorts by pinned status, custom order, and default order.
  */
-export function groupDockEntries(
+export function docksGroupByCategories(
   entries: DevToolsDockEntry[],
   settings: Immutable<DevToolsDocksUserSettings>,
   options?: { includeHidden?: boolean },
-): GroupedDockEntries {
+): DevToolsDockEntriesGrouped {
   const { hiddenDocks, hiddenCategories, customOrder, pinnedDocks } = settings
   const { includeHidden = false } = options ?? {}
 
@@ -85,12 +85,12 @@ export function groupDockEntries(
 /**
  * Split grouped entries into visible and overflow based on capacity.
  */
-export function splitGroupsWithCapacity(
-  groups: GroupedDockEntries,
+export function docksSplitGroupsWithCapacity(
+  groups: DevToolsDockEntriesGrouped,
   capacity: number,
 ): SplitGroupsResult {
-  const visible: GroupedDockEntries = []
-  const overflow: GroupedDockEntries = []
+  const visible: DevToolsDockEntriesGrouped = []
+  const overflow: DevToolsDockEntriesGrouped = []
   let left = capacity
 
   for (const [category, items] of groups) {

packages/kit/src/client/docks.ts

@@ -1,5 +1,6 @@
 import type { RpcFunctionsCollector } from 'birpc-x'
 import type { Raw } from 'vue'
+import type { DevToolsDockEntriesGrouped } from '../../../core/src/client/webcomponents/state/dock-settings'
 import type { DevToolsDockEntry, DevToolsDocksUserSettings, DevToolsDockUserEntry, DevToolsRpcClientFunctions, EventEmitter } from '../types'
 import type { SharedState } from '../utils/shared-state'
 import type { DevToolsRpcClient } from './rpc'
@@ -55,14 +56,12 @@ export interface DocksEntriesContext {
   readonly selected: DevToolsDockEntry | null
   entries: DevToolsDockEntry[]
   entryToStateMap: Map<string, DockEntryState>
+  groupedEntries: DevToolsDockEntriesGrouped
+  settings: SharedState<DevToolsDocksUserSettings>
   /**
    * Get the state of a dock entry by its ID
    */
   getStateById: (id: string) => DockEntryState | undefined
-  /**
-   * Get the user settings store for dock entries (hiddenDocks, pinnedDocks, customOrder, etc.)
-   */
-  getSettingsStore: () => Promise<SharedState<DevToolsDocksUserSettings>>
   /**
    * Switch to the selected dock entry, pass `null` to clear the selection
    *