feat: ability to reset options

Author: antfu

packages/devtools-kit/src/_types/rpc.ts

@@ -27,6 +27,7 @@ export interface ServerFunctions {
   // Options
   getOptions<T extends keyof NuxtDevToolsOptions>(tab: T): Promise<NuxtDevToolsOptions[T]>
   updateOptions<T extends keyof NuxtDevToolsOptions>(tab: T, settings: Partial<NuxtDevToolsOptions[T]>): Promise<void>
+  clearOptions(): Promise<void>
 
   // Updates
   checkForUpdateFor(name: string): Promise<PackageUpdateInfo | undefined>

packages/devtools-ui-kit/src/components/NCheckbox.vue

@@ -3,7 +3,7 @@ import { useVModel } from '@vueuse/core'
 
 const props = withDefaults(
   defineProps<{
-    modelValue?: boolean
+    modelValue?: boolean | null
     disabled?: boolean
   }>(),
   {

packages/devtools/client/pages/settings.vue

@@ -75,6 +75,19 @@ function pinMove(name: string, delta: number) {
   pinnedTabs.value = newPinnedTabs
 }
 
+async function clearOptions() {
+  // eslint-disable-next-line no-alert
+  if (confirm('Are you sure you to reset all local settings & state? The app will reload.')) {
+    Object.keys(localStorage).forEach((key) => {
+      if (key.startsWith('nuxt-devtools-'))
+        localStorage.removeItem(key)
+    })
+    await rpc.clearOptions()
+    client.value?.app?.reload?.()
+    window.location.reload()
+  }
+}
+
 // sync devtools options with frame state
 watchEffect(() => {
   if (client.value)
@@ -232,6 +245,16 @@ watchEffect(() => {
             </NButton>
           </div>
         </NCard>
+
+        <h3 mt2 text-lg>
+          Debug
+        </h3>
+        <div flex="~ gap-2">
+          <NButton n="orange" @click="clearOptions">
+            <div i-carbon-breaking-change />
+            Reset Local Settings & State
+          </NButton>
+        </div>
       </div>
     </div>
   </div>

packages/devtools/src/server-rpc/options.ts

@@ -1,5 +1,5 @@
 import type { NuxtDevToolsOptions, NuxtDevtoolsServerContext, ServerFunctions } from '../types'
-import { readLocalOptions, writeLocalOptions } from '../utils/local-options'
+import { clearLocalOptions, readLocalOptions, writeLocalOptions } from '../utils/local-options'
 import { defaultTabOptions } from '../constant'
 
 let options: NuxtDevToolsOptions | undefined
@@ -28,6 +28,13 @@ export function setupOptionsRPC({ nuxt }: NuxtDevtoolsServerContext) {
 
   getOptions('ui')
 
+  async function clearOptions() {
+    options = undefined
+    await clearLocalOptions({
+      root: nuxt.options.rootDir,
+    })
+  }
+
   return {
     async updateOptions(tab, _settings) {
       const settings = await getOptions(tab)
@@ -46,5 +53,6 @@ export function setupOptionsRPC({ nuxt }: NuxtDevtoolsServerContext) {
       })
     },
     getOptions,
+    clearOptions,
   } satisfies Partial<ServerFunctions>
 }

packages/devtools/src/utils/local-options.ts

@@ -5,12 +5,12 @@ import { dirname } from 'node:path'
 import { join } from 'pathe'
 import { hash } from 'ohash'
 
-interface Options {
+interface LocalOptionSearchOptions {
   root: string
   key?: string | boolean
 }
 
-export async function readLocalOptions<T>(defaults: T, options: Options): Promise<T> {
+export async function readLocalOptions<T>(defaults: T, options: LocalOptionSearchOptions): Promise<T> {
   const { filePath } = getOptionsFilepath(options)
 
   if (existsSync(filePath)) {
@@ -25,7 +25,7 @@ export async function readLocalOptions<T>(defaults: T, options: Options): Promis
   }
 }
 
-function getOptionsFilepath(options: Options) {
+function getOptionsFilepath(options: LocalOptionSearchOptions) {
   let hashedKey
   if (options.key)
     hashedKey = hash(`${options.root}:${options.key}`)
@@ -38,13 +38,13 @@ function getOptionsFilepath(options: Options) {
   }
 }
 
-export async function clearLocalOptions(options: Options) {
+export async function clearLocalOptions(options: LocalOptionSearchOptions) {
   const { filePath } = getOptionsFilepath(options)
   if (existsSync(filePath))
     await fs.unlink(filePath)
 }
 
-export async function writeLocalOptions<T>(settings: T, options: Options) {
+export async function writeLocalOptions<T>(settings: T, options: LocalOptionSearchOptions) {
   const { filePath, hashedKey } = getOptionsFilepath(options)
 
   await fs.mkdir(dirname(filePath), { recursive: true })