fix: adopt forward-compatible approach to builder:watch

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

@@ -1,5 +1,5 @@
+import { parse, relative } from 'node:path'
 import fsp from 'node:fs/promises'
-import { parse } from 'node:path'
 import { join, resolve } from 'pathe'
 import { imageMeta } from 'image-meta'
 import { debounce } from 'perfect-debounce'
@@ -12,15 +12,16 @@ export function setupAssetsRPC({ nuxt, ensureDevAuthToken, refresh, options }: N
   let cache: AssetInfo[] | null = null
 
   const extensions = options.assets?.uploadExtensions || defaultAllowedExtensions
-
   const publicDir = resolve(nuxt.options.srcDir, nuxt.options.dir.public)
+  const layerDirs = [publicDir, ...nuxt.options._layers.map(layer => resolve(layer.cwd, 'public'))]
 
   const refreshDebounced = debounce(() => {
     cache = null
     refresh('getStaticAssets')
   }, 500)
 
   nuxt.hook('builder:watch', (event, key) => {
+    key = relative(nuxt.options.srcDir, resolve(nuxt.options.srcDir, key))
     if (key.startsWith(nuxt.options.dir.public) && (event === 'add' || event === 'unlink'))
       refreshDebounced()
   })
@@ -30,39 +31,42 @@ export function setupAssetsRPC({ nuxt, ensureDevAuthToken, refresh, options }: N
       return cache
 
     const baseURL = nuxt.options.app.baseURL
-    const files = await fg(['**/*'], {
-      cwd: publicDir,
-      onlyFiles: true,
-    })
-
-    function guessType(path: string): AssetType {
-      if (/\.(png|jpe?g|jxl|gif|svg|webp|avif|ico|bmp|tiff?)$/i.test(path))
-        return 'image'
-      if (/\.(mp4|webm|ogv|mov|avi|flv|wmv|mpg|mpeg|mkv|3gp|3g2|ts|mts|m2ts|vob|ogm|ogx|rm|rmvb|asf|amv|divx|m4v|svi|viv|f4v|f4p|f4a|f4b)$/i.test(path))
-        return 'video'
-      if (/\.(mp3|wav|ogg|flac|aac|wma|alac|ape|ac3|dts|tta|opus|amr|aiff|au|mid|midi|ra|rm|wv|weba|dss|spx|vox|tak|dsf|dff|dsd|cda)$/i.test(path))
-        return 'audio'
-      if (/\.(woff2?|eot|ttf|otf|ttc|pfa|pfb|pfm|afm)/i.test(path))
-        return 'font'
-      if (/\.(json[5c]?|te?xt|[mc]?[jt]sx?|md[cx]?|markdown)/i.test(path))
-        return 'text'
-      return 'other'
+    const dirs: { layerDir: string, files: string[] }[] = []
+
+    for (const layerDir of layerDirs) {
+      const files = await fg(['**/*'], {
+        cwd: layerDir,
+        onlyFiles: true,
+      })
+      dirs.push({ layerDir, files })
     }
 
-    cache = await Promise.all(files.map(async (path) => {
-      const filePath = resolve(publicDir, path)
-      const stat = await fsp.lstat(filePath)
-      return {
-        path,
-        publicPath: join(baseURL, path),
-        filePath,
-        type: guessType(path),
-        size: stat.size,
-        mtime: stat.mtimeMs,
+    const uniquePaths = new Set()
+    cache = []
+
+    for (const { layerDir, files } of dirs) {
+      for (const path of files) {
+        const filePath = resolve(layerDir, path)
+        const stat = await fsp.lstat(filePath)
+        const fullPath = join(baseURL, path)
+
+        // Check if path already exists in uniquePaths set
+        if (!uniquePaths.has(fullPath)) {
+          cache.push({
+            path,
+            publicPath: fullPath,
+            filePath,
+            type: guessType(path),
+            size: stat.size,
+            mtime: stat.mtimeMs,
+            layer: publicDir !== layerDir ? layerDir : undefined,
+          })
+          uniquePaths.add(fullPath)
+        }
       }
-    }))
+    }
 
-    return cache
+    return cache.sort((a, b) => a.path.localeCompare(b.path))
   }
 
   return {
@@ -147,3 +151,17 @@ export function setupAssetsRPC({ nuxt, ensureDevAuthToken, refresh, options }: N
     },
   } satisfies Partial<ServerFunctions>
 }
+
+function guessType(path: string): AssetType {
+  if (/\.(png|jpe?g|jxl|gif|svg|webp|avif|ico|bmp|tiff?)$/i.test(path))
+    return 'image'
+  if (/\.(mp4|webm|ogv|mov|avi|flv|wmv|mpg|mpeg|mkv|3gp|3g2|ts|mts|m2ts|vob|ogm|ogx|rm|rmvb|asf|amv|divx|m4v|svi|viv|f4v|f4p|f4a|f4b)$/i.test(path))
+    return 'video'
+  if (/\.(mp3|wav|ogg|flac|aac|wma|alac|ape|ac3|dts|tta|opus|amr|aiff|au|mid|midi|ra|rm|wv|weba|dss|spx|vox|tak|dsf|dff|dsd|cda)$/i.test(path))
+    return 'audio'
+  if (/\.(woff2?|eot|ttf|otf|ttc|pfa|pfb|pfm|afm)/i.test(path))
+    return 'font'
+  if (/\.(json[5c]?|te?xt|[mc]?[jt]sx?|md[cx]?|markdown)/i.test(path))
+    return 'text'
+  return 'other'
+}