feat: isolate ui options per-project (#232)

README.md

@@ -104,7 +104,7 @@ export default defineNuxtConfig({
 })
 ```
 
-For all options available, please refer to TSDocs in your IDE, or the [type definition file](https://github.com/nuxt/devtools/blob/main/packages/devtools-kit/src/_types/module-options.ts).
+For all options available, please refer to TSDocs in your IDE, or the [type definition file](https://github.com/nuxt/devtools/blob/main/packages/devtools-kit/src/_types/options.ts).
 
 ## Features
 

package.json

@@ -21,7 +21,6 @@
     "@nuxt/devtools": "workspace:*",
     "@nuxt/devtools-ui-kit": "workspace:*",
     "@nuxt/module-builder": "^0.3.1",
-    "@types/fs-extra": "^11.0.1",
     "@types/markdown-it": "^12.2.3",
     "@types/node": "^18.16.5",
     "@types/pacote": "^11.1.5",

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

@@ -7,5 +7,5 @@ export * from './integrations'
 export * from './wizard'
 export * from './rpc'
 export * from './server-ctx'
-export * from './module-options'
+export * from './options'
 export * from './common'

packages/devtools-kit/src/_types/module-options.ts → packages/devtools-kit/src/_types/options.ts

@@ -87,3 +87,17 @@ export interface VSCodeTunnelOptions {
    */
   name?: string
 }
+
+export interface NuxtDevToolsUIOptions {
+  componentsView: 'list' | 'graph'
+  componentsGraphShowNodeModules: boolean
+  componentsGraphShowPages: boolean
+  componentsGraphShowLayouts: boolean
+  componentsGraphShowWorkspace: boolean
+  interactionCloseOnOutsideClick: boolean
+  showExperimentalFeatures: boolean
+  showHelpButtons: boolean
+  scale: number
+  hiddenTabs: string[]
+  hiddenTabCategories: string[]
+}

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

@@ -1,6 +1,7 @@
 import type { Component, NuxtApp, NuxtLayout, NuxtOptions, NuxtPage } from 'nuxt/schema'
 import type { StorageMounts } from 'nitropack'
 import type { StorageValue } from 'unstorage'
+import type { NuxtDevToolsUIOptions } from './options'
 import type { ModuleCustomTab } from './custom-tabs'
 import type { AssetInfo, AutoImportsWithMetadata, ComponentRelationship, HookInfo, ImageMeta, NpmCommandOptions, NpmCommandType, PackageManagerName, PackageUpdateInfo, ServerRouteInfo } from './integrations'
 import type { TerminalAction, TerminalInfo } from './terminals'
@@ -21,6 +22,10 @@ export interface ServerFunctions {
   getServerRoutes(): Promise<ServerRouteInfo[]>
   getServerApp(): NuxtApp | undefined
 
+  // Options
+  getUIOptions(): Promise<NuxtDevToolsUIOptions>
+  updateUIOptions(settings: Partial<NuxtDevToolsUIOptions>): Promise<void>
+
   // Updates
   checkForUpdateFor(name: string): Promise<PackageUpdateInfo | undefined>
   getPackageManager(): Promise<PackageManagerName>

packages/devtools-kit/src/_types/server-ctx.ts

@@ -1,7 +1,7 @@
 import type { BirpcGroup } from 'birpc'
 import type { Nuxt } from 'nuxt/schema'
 import type { ClientFunctions, ServerFunctions } from './rpc'
-import type { ModuleOptions } from './module-options'
+import type { ModuleOptions } from './options'
 
 /**
  * @internal

packages/devtools/client/app.vue

@@ -42,7 +42,7 @@ addEventListener('keydown', (e) => {
 
 const {
   scale,
-} = useDevToolsSettings()
+} = useDevToolsOptions()
 
 onMounted(() => {
   const injectClient = useInjectionClient()

packages/devtools/client/components/ComponentsGraph.vue

@@ -30,7 +30,7 @@ const {
   componentsGraphShowPages: showPages,
   componentsGraphShowLayouts: showLayouts,
   componentsGraphShowWorkspace: showWorkspace,
-} = useDevToolsSettings()
+} = useDevToolsOptions()
 
 const selectedFilter = ref<ComponentRelationship>()
 

packages/devtools/client/components/HelpFab.vue

@@ -2,7 +2,7 @@
 const open = ref(false)
 const {
   showHelpButtons,
-} = useDevToolsSettings()
+} = useDevToolsOptions()
 </script>
 
 <template>

packages/devtools/client/composables/state.ts

@@ -85,7 +85,7 @@ export function useTerminals() {
 
 export function useAllTabs() {
   const customTabs = useCustomTabs()
-  const settings = useDevToolsSettings()
+  const settings = useDevToolsOptions()
   const router = useRouter()
   const client = useClient()
 
@@ -133,7 +133,7 @@ export function useCategorizedTabs(enabledOnly = true) {
     ? useEnabledTabs()
     : useAllTabs()
 
-  const settings = useDevToolsSettings()
+  const settings = useDevToolsOptions()
 
   return computed(() => {
     const categories: Record<TabCategory, (ModuleCustomTab | ModuleBuiltinTab)[]> = {
@@ -161,7 +161,7 @@ export function useCategorizedTabs(enabledOnly = true) {
 
 export function useEnabledTabs() {
   const tabs = useAllTabs()
-  const settings = useDevToolsSettings()
+  const settings = useDevToolsOptions()
 
   return computed(() => tabs.value.filter((tab) => {
     const _tab = tab as ModuleBuiltinTab

packages/devtools/client/composables/storage.ts

@@ -1,30 +1,32 @@
 import { toRefs } from '@vueuse/core'
-import type { DevToolsFrameState, DevToolsUISettings } from '~~/../src/types'
+import type { DevToolsFrameState, NuxtDevToolsUIOptions } from '~~/../src/types'
 
 export const isFirstVisit = useLocalStorage('nuxt-devtools-first-visit', true)
 
-const devToolsSettings = useLocalStorage<DevToolsUISettings>('nuxt-devtools-settings', {
-  componentsView: 'list',
-  componentsGraphShowNodeModules: false,
-  componentsGraphShowPages: false,
-  componentsGraphShowLayouts: false,
-  componentsGraphShowWorkspace: true,
-  interactionCloseOnOutsideClick: false,
-  showExperimentalFeatures: false,
-  showHelpButtons: true,
-  scale: 1,
-  hiddenTabs: [],
-  hiddenTabCategories: [],
-}, { mergeDefaults: true })
-
-const devToolsSettingsRefs = toRefs(devToolsSettings)
-
 const devToolsFrameState = useLocalStorage<DevToolsFrameState>('nuxt-devtools-frame-state', {} as any, { listenToStorageChanges: false })
 
 const devToolsPanelsState = useLocalStorage<Record<string, number>>('nuxt-devtools-panels-state', {} as any, { listenToStorageChanges: false })
 
-export function useDevToolsSettings() {
-  return devToolsSettingsRefs
+const devToolsOptions = ref<NuxtDevToolsUIOptions>(await rpc.getUIOptions())
+const devToolsOptionsRefs = toRefs(devToolsOptions)
+
+watch(devToolsOptions, async (options) => {
+  rpc.updateUIOptions(options)
+}, { deep: true, flush: 'post' })
+
+// sync devtools options with frame state
+watchEffect(() => {
+  devToolsFrameState.value.closeOnOutsideClick = devToolsOptions.value.interactionCloseOnOutsideClick
+})
+
+// Migrate settings from localStorage to devtools options. TODO: remove in next major release
+if (localStorage.getItem('nuxt-devtools-settings')) {
+  Object.assign(devToolsOptions.value, JSON.parse(localStorage.getItem('nuxt-devtools-settings')!))
+  localStorage.removeItem('nuxt-devtools-settings')
+}
+
+export function useDevToolsOptions() {
+  return devToolsOptionsRefs
 }
 
 export function useDevToolsFrameState() {

packages/devtools/client/pages/modules/components.vue

@@ -15,7 +15,7 @@ const components = useComponents()
 
 const {
   componentsView: view,
-} = useDevToolsSettings()
+} = useDevToolsOptions()
 
 function openComponentInspector() {
   if (!client.value?.inspector?.instance)

packages/devtools/client/pages/modules/modules.vue

@@ -20,7 +20,7 @@ const modules = computed(() => config.value?._installedModules || [])
 const packageModules = ref<any[]>([])
 const userModules = ref<any[]>([])
 const installModuleOpen = ref(false)
-const { showExperimentalFeatures } = useDevToolsSettings()
+const { showExperimentalFeatures } = useDevToolsOptions()
 
 watchEffect(() => {
   packageModules.value.length = 0

packages/devtools/client/pages/settings.vue

@@ -10,7 +10,7 @@ const {
   scale,
   hiddenTabs,
   hiddenTabCategories,
-} = useDevToolsSettings()
+} = useDevToolsOptions()
 
 const scaleOptions = [
   ['Tiny', 12 / 15],

packages/devtools/src/runtime/plugins/view/Frame.vue

@@ -3,7 +3,7 @@ import type { VueInspectorClient } from 'vite-plugin-vue-inspector'
 import type { PropType } from 'vue'
 import { computed, ref, watch, watchEffect } from 'vue'
 import type { NuxtDevtoolsHostClient, NuxtDevtoolsIframeClient, NuxtDevtoolsGlobal as NuxtDevtoolsViewGlobal } from '../../../types'
-import { PANEL_MAX, PANEL_MIN, PANEL_PADDING, closePanel, settings, state, viewMode } from './state'
+import { PANEL_MAX, PANEL_MIN, PANEL_PADDING, closePanel, state, viewMode } from './state'
 import { useEventListener } from './utils'
 
 // Can't use reactivity transform here because this file is shipped as-is,
@@ -189,7 +189,7 @@ useEventListener(window, 'keydown', (e: KeyboardEvent) => {
 
 // Close panel on outside click (when enabled)
 useEventListener(window, 'mousedown', (e: MouseEvent) => {
-  if (!settings.value.interactionCloseOnOutsideClick)
+  if (!state.value.closeOnOutsideClick)
     return
   if (!state.value.open || isDragging.value || viewMode.value !== 'default')
     return

packages/devtools/src/runtime/plugins/view/state.ts

@@ -1,5 +1,5 @@
 import { ref } from 'vue'
-import type { DevToolsFrameState, DevToolsUISettings } from '../../../types'
+import type { DevToolsFrameState } from '../../../types'
 import { useObjectStorage } from './utils'
 
 export const PANEL_PADDING = 10
@@ -18,10 +18,9 @@ export const state = useObjectStorage<DevToolsFrameState>('nuxt-devtools-frame-s
   open: false,
   route: '/',
   position: 'bottom',
+  closeOnOutsideClick: false,
 })
 
-export const settings = useObjectStorage<DevToolsUISettings>('nuxt-devtools-settings', {} as any, true)
-
 export function togglePanel() {
   if (state.value.open)
     closePanel()

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

@@ -15,6 +15,7 @@ import { setupGeneralRPC } from './general'
 import { setupWizardRPC } from './wizard'
 import { setupTerminalRPC } from './terminals'
 import { setupServerRoutesRPC } from './server-routes'
+import { setupUIOptionsRPC } from './ui-options'
 
 export function setupRPC(nuxt: Nuxt, options: ModuleOptions) {
   const serverFunctions = {} as ServerFunctions
@@ -78,6 +79,7 @@ export function setupRPC(nuxt: Nuxt, options: ModuleOptions) {
     ...setupWizardRPC(ctx),
     ...setupTerminalRPC(ctx),
     ...setupServerRoutesRPC(ctx),
+    ...setupUIOptionsRPC(ctx),
   } satisfies ServerFunctions)
 
   const wsClients = new Set<WebSocket>()

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

@@ -0,0 +1,72 @@
+import { homedir } from 'node:os'
+import { existsSync } from 'node:fs'
+import fs from 'node:fs/promises'
+import { hash } from 'ohash'
+import { join } from 'pathe'
+import type { NuxtDevToolsUIOptions, NuxtDevtoolsServerContext, ServerFunctions } from '../types'
+
+const defaults: NuxtDevToolsUIOptions = {
+  componentsView: 'list',
+  componentsGraphShowNodeModules: false,
+  componentsGraphShowPages: false,
+  componentsGraphShowLayouts: false,
+  componentsGraphShowWorkspace: true,
+  interactionCloseOnOutsideClick: false,
+  showExperimentalFeatures: false,
+  showHelpButtons: true,
+  scale: 1,
+  hiddenTabs: [],
+  hiddenTabCategories: [],
+}
+
+export function setupUIOptionsRPC({ nuxt }: NuxtDevtoolsServerContext) {
+  const home = homedir()
+  const projectHash = hash(nuxt.options.rootDir)
+  const dir = join(home, '.nuxt/devtools')
+  const filepath = join(dir, `${projectHash}.json`)
+
+  let settings: NuxtDevToolsUIOptions | undefined
+
+  async function getUIOptions() {
+    if (!settings)
+      await read()
+    return settings!
+  }
+
+  async function read() {
+    if (existsSync(filepath)) {
+      settings = {
+        ...defaults,
+        ...JSON.parse(await fs.readFile(filepath, 'utf-8')).settings || {},
+      }
+    }
+    else {
+      settings = { ...defaults }
+    }
+    return settings!
+  }
+
+  async function write(settings: NuxtDevToolsUIOptions) {
+    if (!existsSync(dir))
+      await fs.mkdir(dir, { recursive: true })
+
+    await fs.writeFile(
+      filepath,
+      JSON.stringify({
+        root: nuxt.options.rootDir,
+        hash: projectHash,
+        settings,
+      }, null, 2),
+      'utf-8',
+    )
+  }
+
+  return {
+    async updateUIOptions(_settings) {
+      const settings = await getUIOptions()
+      Object.assign(settings, _settings)
+      await write(settings)
+    },
+    getUIOptions,
+  } satisfies Partial<ServerFunctions>
+}

packages/devtools/src/types/ui-state.ts

@@ -6,20 +6,7 @@ export interface DevToolsFrameState {
   open: boolean
   route: string
   position: 'left' | 'right' | 'bottom' | 'top'
-}
-
-export interface DevToolsUISettings {
-  componentsView: 'list' | 'graph'
-  componentsGraphShowNodeModules: boolean
-  componentsGraphShowPages: boolean
-  componentsGraphShowLayouts: boolean
-  componentsGraphShowWorkspace: boolean
-  interactionCloseOnOutsideClick: boolean
-  showExperimentalFeatures: boolean
-  showHelpButtons: boolean
-  scale: number
-  hiddenTabs: string[]
-  hiddenTabCategories: string[]
+  closeOnOutsideClick: boolean
 }
 
 export interface SocialPreviewResolved {