feat: persist user settings

Author: antfu

packages/core/package.json

@@ -58,6 +58,7 @@
     "birpc": "catalog:deps",
     "birpc-x": "catalog:deps",
     "cac": "catalog:deps",
+    "h3": "catalog:deps",
     "immer": "catalog:deps",
     "launch-editor": "catalog:deps",
     "mlly": "catalog:deps",

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

@@ -86,7 +86,7 @@ export async function createDocksContext(
   const getSettingsStore = async () => {
     if (!_settingsStorePromise) {
       _settingsStorePromise = rpc.sharedState.get(
-        'vite:internal:docks:settings',
+        'vite:internal:user-settings',
         { initialValue: DEFAULT_STATE_DOCKS_SETTINGS() },
       )
     }

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

@@ -61,7 +61,7 @@ export function docksGroupByCategories(
       const customOrderA = customOrder[a.id] ?? 0
       const customOrderB = customOrder[b.id] ?? 0
       if (customOrderA !== customOrderB)
-        return customOrderB - customOrderA
+        return customOrderA - customOrderB
 
       // Finally by default order
       const ia = a.defaultOrder ?? 0

packages/core/src/node/context.ts

@@ -39,13 +39,13 @@ export async function createDevToolsContext(
   context.views = viewsHost
   context.terminals = terminalsHost
 
-  await docksHost.init()
-
   // Build-in function to list all RPC functions
   for (const fn of builtinRpcDeclarations) {
     rpcHost.register(fn)
   }
 
+  await docksHost.init()
+
   const docksSharedState = await rpcHost.sharedState.get('vite:internal:docks', { initialValue: [] })
 
   // Register hosts side effects
@@ -69,7 +69,6 @@ export async function createDevToolsContext(
 
   // Register plugins
   const plugins = viteConfig.plugins.filter(plugin => 'devtools' in plugin)
-
   for (const plugin of plugins) {
     if (!plugin.devtools?.setup)
       continue

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

@@ -1,6 +1,8 @@
 import type { DevToolsDockEntry, DevToolsDockHost as DevToolsDockHostType, DevToolsDocksUserSettings, DevToolsDockUserEntry, DevToolsNodeContext, DevToolsViewBuiltin } from '@vitejs/devtools-kit'
 import type { SharedState } from '@vitejs/devtools-kit/utils/shared-state'
 import { createEventEmitter } from '@vitejs/devtools-kit/utils/events'
+import { join } from 'pathe'
+import { createStorage } from './storage'
 
 export class DevToolsDockHost implements DevToolsDockHostType {
   public readonly views: DevToolsDockHostType['views'] = new Map()
@@ -14,13 +16,16 @@ export class DevToolsDockHost implements DevToolsDockHostType {
   }
 
   async init() {
-    this.userSettings = await this.context.rpc.sharedState.get('vite:internal:docks:settings', {
-      initialValue: {
-        hiddenDocks: [],
-        hiddenCategories: [],
-        pinnedDocks: [],
-        customOrder: {},
-      },
+    this.userSettings = await this.context.rpc.sharedState.get('vite:internal:user-settings', {
+      sharedState: createStorage({
+        filepath: join(this.context.workspaceRoot, 'node_modules/.vite/devtools/settings.json'),
+        initialValue: {
+          hiddenDocks: [],
+          hiddenCategories: [],
+          pinnedDocks: [],
+          customOrder: {},
+        },
+      }),
     })
   }
 

packages/core/src/node/rpc-shared-state.ts

@@ -46,12 +46,12 @@ export function createRpcSharedStateServerHost(
       if (sharedState.has(key)) {
         return sharedState.get(key)!
       }
-      if (options?.initialValue === undefined) {
+      if (options?.initialValue === undefined && options?.sharedState === undefined) {
         throw new Error(`Shared state of "${key}" is not found, please provide an initial value for the first time`)
       }
       debug('new-state', key)
-      const state = createSharedState<T>({
-        initialValue: options.initialValue,
+      const state = options.sharedState ?? createSharedState<T>({
+        initialValue: options.initialValue as T,
         enablePatches: false,
       })
       registerSharedState(key, state)

packages/core/src/node/rpc/index.ts

@@ -64,7 +64,7 @@ declare module '@vitejs/devtools-kit' {
 
   // @keep-sorted
   export interface DevToolsRpcSharedStates {
-    'vite:internal:docks:settings': DevToolsDocksUserSettings
     'vite:internal:docks': DevToolsDockEntry[]
+    'vite:internal:user-settings': DevToolsDocksUserSettings
   }
 }

packages/core/src/node/storage.ts

@@ -1,16 +1,25 @@
 import fs from 'node:fs'
 import { createSharedState } from '@vitejs/devtools-kit/utils/shared-state'
 import { dirname } from 'pathe'
+import { debounce } from 'perfect-debounce'
 
 export interface CreateStorageOptions<T extends object> {
   filepath: string
   initialValue: T
+  mergeInitialValue?: false | ((initialValue: T, savedValue: T) => T)
+  debounce?: number
 }
 
 export function createStorage<T extends object>(options: CreateStorageOptions<T>) {
+  const {
+    mergeInitialValue = (initialValue, savedValue) => ({ ...initialValue, ...savedValue }),
+    debounce: debounceTime = 100,
+  } = options
+
   let initialValue: T
   if (fs.existsSync(options.filepath)) {
-    initialValue = JSON.parse(fs.readFileSync(options.filepath, 'utf-8')) as T
+    const savedValue = JSON.parse(fs.readFileSync(options.filepath, 'utf-8')) as T
+    initialValue = mergeInitialValue ? mergeInitialValue(options.initialValue, savedValue) : savedValue
   }
   else {
     initialValue = options.initialValue
@@ -21,10 +30,14 @@ export function createStorage<T extends object>(options: CreateStorageOptions<T>
     enablePatches: false,
   })
 
-  state.on('updated', (newState) => {
-    fs.mkdirSync(dirname(options.filepath), { recursive: true })
-    fs.writeFileSync(options.filepath, `${JSON.stringify(newState, null, 2)}\n`)
-  })
+  // throttle the write to the file
+  state.on(
+    'updated',
+    debounce((newState) => {
+      fs.mkdirSync(dirname(options.filepath), { recursive: true })
+      fs.writeFileSync(options.filepath, `${JSON.stringify(newState, null, 2)}\n`)
+    }, debounceTime),
+  )
 
   return state
 }

packages/kit/src/types/rpc.ts

@@ -46,6 +46,7 @@ export type RpcFunctionsHost = RpcFunctionsCollectorBase<DevToolsRpcServerFuncti
 
 export interface RpcSharedStateGetOptions<T> {
   initialValue?: T
+  sharedState?: SharedState<T>
 }
 
 export interface RpcSharedStateHost {