fix(devtools): correct options cache guard and stop mutating defaults (#1018)

Author: antfubot

packages/devtools/client/composables/storage-options.ts

@@ -2,7 +2,7 @@ import type { ToRefs } from 'vue'
 import type { NuxtDevToolsOptions } from '../../types'
 import { watchDebounced } from '@vueuse/core'
 import { reactive, toRefs } from 'vue'
-import { defaultTabOptions } from '../../src/constant'
+import { createDefaultTabOptions } from '../../src/constant'
 import { rpc } from './rpc'
 
 const cache = new Map<string, any>()
@@ -11,7 +11,7 @@ function getTabOptions<T extends keyof NuxtDevToolsOptions>(tab: T): ToRefs<Nuxt
   if (cache.has(tab)) {
     return cache.get(tab)
   }
-  const source = reactive({ ...defaultTabOptions[tab] }) as NuxtDevToolsOptions[T]
+  const source = reactive(createDefaultTabOptions()[tab]) as NuxtDevToolsOptions[T]
   const refs = toRefs(source)
   cache.set(tab, refs)
 

packages/devtools/src/constant.ts

@@ -16,51 +16,77 @@ export const defaultOptions: ModuleOptions = {
   disableAuthorization: isSandboxed,
 }
 
-export const defaultTabOptions: NuxtDevToolsOptions = {
-  behavior: {
-    telemetry: null,
-    openInEditor: undefined,
-  },
-  ui: {
-    componentsView: 'list',
-    componentsGraphShowNodeModules: false,
-    componentsGraphShowGlobalComponents: true,
-    componentsGraphShowPages: false,
-    componentsGraphShowLayouts: false,
-    componentsGraphShowWorkspace: true,
-    interactionCloseOnOutsideClick: false,
-    showExperimentalFeatures: false,
-    showHelpButtons: true,
-    scale: 1,
-    hiddenTabs: [],
-    pinnedTabs: [],
-    hiddenTabCategories: [],
-    sidebarExpanded: false,
-    sidebarScrollable: false,
-  },
-  serverRoutes: {
-    selectedRoute: null,
-    view: 'tree',
-    inputDefaults: {
-      query: [],
-      body: [],
-      headers: [],
+// Nitro's experimental `tasks` feature toggles the default `serverTasks.enabled`
+// value; this is the only genuinely dynamic default, so it's tracked as an
+// explicit flag rather than by mutating a shared options object (see
+// `setServerTasksEnabledByDefault`).
+let serverTasksEnabledByDefault = false
+
+/**
+ * Called when the host Nuxt app has opted into Nitro's experimental `tasks`
+ * feature, so `createDefaultTabOptions()` defaults `serverTasks.enabled` to
+ * `true` for apps that haven't explicitly configured it.
+ */
+export function setServerTasksEnabledByDefault(enabled: boolean) {
+  serverTasksEnabledByDefault = enabled
+}
+
+/**
+ * Builds a brand-new default tab options object graph.
+ *
+ * This is a factory rather than a shared constant on purpose: callers used to
+ * share (and sometimes mutate) a single module-level object, which let one
+ * project's settings permanently overwrite the defaults for every other Nuxt
+ * instance in the same process. Call this every time you need a default —
+ * never cache or mutate its result.
+ */
+export function createDefaultTabOptions(): NuxtDevToolsOptions {
+  return {
+    behavior: {
+      telemetry: null,
+      openInEditor: undefined,
     },
-    sendFrom: 'app',
-  },
-  serverTasks: {
-    enabled: false,
-    selectedTask: null,
-    view: 'list',
-    inputDefaults: {
-      query: [],
-      body: [],
-      headers: [{ active: true, key: 'Content-Type', value: 'application/json', type: 'string' }],
+    ui: {
+      componentsView: 'list',
+      componentsGraphShowNodeModules: false,
+      componentsGraphShowGlobalComponents: true,
+      componentsGraphShowPages: false,
+      componentsGraphShowLayouts: false,
+      componentsGraphShowWorkspace: true,
+      interactionCloseOnOutsideClick: false,
+      showExperimentalFeatures: false,
+      showHelpButtons: true,
+      scale: 1,
+      hiddenTabs: [],
+      pinnedTabs: [],
+      hiddenTabCategories: [],
+      sidebarExpanded: false,
+      sidebarScrollable: false,
     },
-  },
-  assets: {
-    view: 'grid',
-  },
+    serverRoutes: {
+      selectedRoute: null,
+      view: 'tree',
+      inputDefaults: {
+        query: [],
+        body: [],
+        headers: [],
+      },
+      sendFrom: 'app',
+    },
+    serverTasks: {
+      enabled: serverTasksEnabledByDefault,
+      selectedTask: null,
+      view: 'list',
+      inputDefaults: {
+        query: [],
+        body: [],
+        headers: [{ active: true, key: 'Content-Type', value: 'application/json', type: 'string' }],
+      },
+    },
+    assets: {
+      view: 'grid',
+    },
+  }
 }
 
 export const defaultAllowedExtensions = [

packages/devtools/src/module-main.ts

@@ -12,7 +12,7 @@ import { join } from 'pathe'
 import sirv from 'sirv'
 import { searchForWorkspaceRoot } from 'vite'
 import { version } from '../package.json'
-import { defaultTabOptions } from './constant'
+import { createDefaultTabOptions, setServerTasksEnabledByDefault } from './constant'
 import { clientDir, packageDir, runtimeDir } from './dirs'
 import { setupRPC } from './server-rpc'
 import { readLocalOptions } from './utils/local-options'
@@ -113,9 +113,7 @@ export async function enableModule(options: ModuleOptions, nuxt: Nuxt) {
     filename: 'devtools/settings.mjs',
     async getContents() {
       const uiOptions = await readLocalOptions<NuxtDevToolsOptions['ui']>(
-        {
-          ...defaultTabOptions.ui,
-        },
+        createDefaultTabOptions().ui,
         { root: nuxt.options.rootDir },
       )
       return `export default ${JSON.stringify({
@@ -127,7 +125,7 @@ export async function enableModule(options: ModuleOptions, nuxt: Nuxt) {
   nuxt.hook('nitro:config', (config) => {
     // Check user opted-in for tasks
     if (config.experimental?.tasks)
-      defaultTabOptions.serverTasks.enabled = true
+      setServerTasksEnabledByDefault(true)
 
     // Inject inline script
     config.externals = config.externals || {}

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

@@ -1,5 +1,5 @@
 import type { NuxtDevToolsOptions, NuxtDevtoolsServerContext, ServerFunctions } from '../types'
-import { defaultTabOptions } from '../constant'
+import { createDefaultTabOptions } from '../constant'
 import { clearLocalOptions, readLocalOptions, writeLocalOptions } from '../utils/local-options'
 
 let options: NuxtDevToolsOptions | undefined
@@ -9,20 +9,30 @@ export function getOptions() {
 }
 
 export function setupOptionsRPC({ nuxt }: NuxtDevtoolsServerContext) {
+  const hasReadOnce = new Set<keyof NuxtDevToolsOptions>()
+
   async function getOptions<T extends keyof NuxtDevToolsOptions>(tab: T): Promise<NuxtDevToolsOptions[T]> {
-    if (!options || options[tab]) {
-      options = defaultTabOptions
+    // `createDefaultTabOptions()` always returns a brand-new object graph, so
+    // this can never alias (or leak mutations back into) another instance's
+    // defaults the way sharing a single module-level constant used to.
+    if (!options)
+      options = createDefaultTabOptions()
+    if (!hasReadOnce.has(tab))
       await read(tab)
-    }
 
-    return options![tab]
+    return options[tab]
   }
 
   async function read<T extends keyof NuxtDevToolsOptions>(tab: T) {
-    options![tab] = await readLocalOptions<NuxtDevToolsOptions[T]>(defaultTabOptions[tab], {
+    // Source defaults fresh from `createDefaultTabOptions()` rather than the
+    // cached `options![tab]`, so a dynamic default set after the cache was
+    // first created — e.g. `serverTasks.enabled` toggled by Nitro's `tasks`
+    // feature — is still honored the first time this tab is actually read.
+    options![tab] = await readLocalOptions<NuxtDevToolsOptions[T]>(createDefaultTabOptions()[tab], {
       root: nuxt.options.rootDir,
       key: tab !== 'ui' && tab,
     })
+    hasReadOnce.add(tab)
     return options
   }
 

packages/devtools/test/default-tab-options.test.ts

@@ -0,0 +1,42 @@
+import { describe, expect, it } from 'vitest'
+import { createDefaultTabOptions, setServerTasksEnabledByDefault } from '../src/constant'
+import { setupOptionsRPC } from '../src/server-rpc/options'
+
+describe('createDefaultTabOptions', () => {
+  it('returns a brand-new object graph on every call', () => {
+    const a = createDefaultTabOptions()
+    const b = createDefaultTabOptions()
+    expect(a).not.toBe(b)
+    expect(a.ui).not.toBe(b.ui)
+    expect(a.ui.hiddenTabs).not.toBe(b.ui.hiddenTabs)
+  })
+
+  it('does not leak mutations across calls when the options RPC mutates its cache', async () => {
+    // Guards against the regression where the options RPC aliased (and later
+    // shallow-copied from) a shared defaults object, letting callers corrupt
+    // it via nested objects/arrays such as `ui.hiddenTabs`.
+    const ctx = {
+      nuxt: { options: { rootDir: '/mock/root' }, callHook: () => {} },
+    } as any
+
+    const rpc = setupOptionsRPC(ctx)
+    const uiOptions = await rpc.getOptions('ui')
+
+    // Mutate a nested array to verify isolation.
+    uiOptions.hiddenTabs.push('test-leak')
+    expect(createDefaultTabOptions().ui.hiddenTabs).not.toContain('test-leak')
+  })
+
+  it('reflects setServerTasksEnabledByDefault in subsequently created objects', () => {
+    expect(createDefaultTabOptions().serverTasks.enabled).toBe(false)
+
+    setServerTasksEnabledByDefault(true)
+    try {
+      expect(createDefaultTabOptions().serverTasks.enabled).toBe(true)
+    }
+    finally {
+      // Reset the module-level flag so it doesn't leak into other tests.
+      setServerTasksEnabledByDefault(false)
+    }
+  })
+})