fix(devtools): scope nitro storage watches

Author: onmax

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

@@ -1,9 +1,11 @@
 import type { Nitro } from 'nitropack'
 import type { NuxtDevtoolsServerContext, ServerFunctions, ServerRouteInfo } from '../types'
 import { debounce } from 'perfect-debounce'
+import { watchStorageMount } from './storage-watch'
 
 export function setupServerRoutesRPC({ nuxt, refresh }: NuxtDevtoolsServerContext) {
   let nitro: Nitro
+  let unwatchStorage: (() => Promise<void> | void) | undefined
 
   let cache: ServerRouteInfo[] | null = null
 
@@ -18,13 +20,22 @@ export function setupServerRoutesRPC({ nuxt, refresh }: NuxtDevtoolsServerContex
     refresh('getServerRoutes')
   })
 
-  nuxt.hook('ready', () => {
-    nitro?.storage.watch((event, key) => {
+  nuxt.hook('ready', async () => {
+    if (!nitro)
+      return
+
+    await unwatchStorage?.()
+    unwatchStorage = await watchStorageMount(nitro.storage, 'src', (_event, key) => {
       if (key.startsWith('src:api:') || key.startsWith('src:routes:'))
         refreshDebounced()
     })
   })
 
+  nuxt.hook('close', async () => {
+    await unwatchStorage?.()
+    unwatchStorage = undefined
+  })
+
   function scan() {
     if (cache)
       return cache

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

@@ -1,9 +1,11 @@
 import type { Nitro } from 'nitropack'
 import type { NuxtDevtoolsServerContext, ScannedNitroTasks, ServerFunctions } from '../types'
 import { debounce } from 'perfect-debounce'
+import { watchStorageMount } from './storage-watch'
 
 export function setupServerTasksRPC({ nuxt, refresh }: NuxtDevtoolsServerContext) {
   let nitro: Nitro
+  let unwatchStorage: (() => Promise<void> | void) | undefined
 
   let cache: ScannedNitroTasks | null = null
 
@@ -18,13 +20,22 @@ export function setupServerTasksRPC({ nuxt, refresh }: NuxtDevtoolsServerContext
     refresh('getServerTasks')
   })
 
-  nuxt.hook('ready', () => {
-    nitro?.storage.watch((event, key) => {
+  nuxt.hook('ready', async () => {
+    if (!nitro)
+      return
+
+    await unwatchStorage?.()
+    unwatchStorage = await watchStorageMount(nitro.storage, 'src', (_event, key) => {
       if (key.startsWith('src:tasks:'))
         refreshDebounced()
     })
   })
 
+  nuxt.hook('close', async () => {
+    await unwatchStorage?.()
+    unwatchStorage = undefined
+  })
+
   function scan() {
     if (cache)
       return cache

packages/devtools/src/server-rpc/storage-watch.ts

@@ -0,0 +1,17 @@
+import type { Storage, WatchCallback, WatchEvent } from 'unstorage'
+import { normalizeBaseKey, normalizeKey } from 'unstorage'
+
+export type UnwatchStorageMount = () => Promise<void> | void
+
+export async function watchStorageMount(storage: Storage, mountName: string, onChange: WatchCallback): Promise<UnwatchStorageMount> {
+  const mountKey = normalizeBaseKey(mountName)
+  const mount = storage.getMounts().find(item => item.base === mountKey)
+  const watch = mount?.driver.watch
+
+  if (!watch)
+    return () => {}
+
+  return await watch((event: WatchEvent, key: string) => {
+    onChange(event, normalizeKey(`${mountKey}${key}`))
+  })
+}

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

@@ -1,6 +1,7 @@
 import type { StorageMounts } from 'nitropack'
 import type { Storage, StorageValue } from 'unstorage'
 import type { NuxtDevtoolsServerContext, ServerFunctions } from '../types'
+import { watchStorageMount } from './storage-watch'
 
 const IGNORE_STORAGE_MOUNTS = ['root', 'build', 'src', 'cache']
 function shouldIgnoreStorageKey(key: string) {
@@ -15,16 +16,26 @@ export function setupStorageRPC({
   const storageMounts: StorageMounts = {}
 
   let storage: Storage | undefined
+  let unwatchStorageMounts: Array<() => Promise<void> | void> = []
 
   nuxt.hook('nitro:init', (nitro) => {
     storage = nitro.storage
 
-    nuxt.hook('ready', () => {
-      storage!.watch((event, key) => {
-        if (shouldIgnoreStorageKey(key))
-          return
-        rpc.broadcast.callHook.asEvent('storage:key:update', key, event)
-      })
+    nuxt.hook('close', async () => {
+      await Promise.all(unwatchStorageMounts.map(unwatch => unwatch()))
+      unwatchStorageMounts = []
+    })
+
+    nuxt.hook('ready', async () => {
+      if (!storage)
+        return
+      await Promise.all(unwatchStorageMounts.map(unwatch => unwatch()))
+      unwatchStorageMounts = await Promise.all(Object.keys(storageMounts).map(mountName =>
+        watchStorageMount(storage, mountName, (event, key) => {
+          if (shouldIgnoreStorageKey(key))
+            return
+          rpc.broadcast.callHook.asEvent('storage:key:update', key, event)
+        })))
     })
 
     // Taken from https://github.com/unjs/nitro/blob/d83f2b65165d7ba996e7ef129ea99ff5b551dccc/src/storage.ts#L7-L10