fix(module): derive media list items from keys instead of N+1 fetches (#527)

* fix(module): derive media list items from keys instead of N+1 fetches

host.media.list() called storage.getItem() per key on top of getKeys(),
firing one HTTP request per file through the dev-mode HTTP storage driver.
On a public/ folder with many files this floods the browser's per-origin
connection limit and never resolves, which blocks isReady (and everything
gated behind it, e.g. the floating "Edit this page" button) forever.

All fields needed for listing (id, extension, stem, path, fsPath) are
derivable from the storage key alone, so list() no longer needs a
per-item round trip. Full metadata is still fetched lazily via
host.media.get() when a specific file is opened.

* fix(module): derive media key fields via shared helper, fix prod prefix mismatch

list()'s key-parsing assumed every storage key was raw and unprefixed, but
production's pre-baked publicAssetsStorage (templates.ts) stores items under
keys already prefixed with the virtual media collection name, so list() was
double-prefixing id/fsPath/path for every asset in a standard prod deploy.

Extracts mediaItemFieldsFromKey() into utils/media.ts as the single place
that derives id/extension/stem/path/fsPath from a raw key, used by host.ts,
templates.ts, and the dev public route. Also fixes the pre-existing stem
no-op (split('.').join('.') simply reconstructs the input) in all three.

* fix(module): derive stem from fsPath, hoist prefix regex, add test

- mediaItemFieldsFromKey: compute stem from fsPath instead of the
  colon-joined key, matching the existing pattern in
  medias/[...path].ts, so nested paths don't leak colons into stem
- host.ts: hoist the collection-prefix RegExp out of the per-key
  map() loop
- add unit tests for mediaItemFieldsFromKey

Author: hendrikheil

src/module/src/runtime/host.ts

@@ -13,7 +13,8 @@ import { collections } from '#content/preview'
 import { publicAssetsStorage, externalAssetsStorage } from '#build/studio-assets'
 import { useHostMeta } from './composables/useMeta'
 import { assignComponentsToGroups } from './utils/componentGroups'
-import { generateIdFromFsPath as generateMediaIdFromFsPath } from './utils/media'
+import { generateIdFromFsPath as generateMediaIdFromFsPath, mediaItemFieldsFromKey } from './utils/media'
+import { VIRTUAL_MEDIA_COLLECTION_NAME } from './utils/constants'
 import { getCollectionSourceById } from './utils/source'
 import { kebabCase } from 'scule'
 
@@ -318,13 +319,13 @@ export function useStudioHost(user: StudioUser, repository: Repository): StudioH
           return await getStorage().getItem(generateMediaIdFromFsPath(fsPath)) as MediaItem
         },
         list: async (): Promise<MediaItem[]> => {
-          const storage = getStorage()
-          const items = await Promise.all(
-            await storage.getKeys().then((keys: string[]) =>
-              keys.map((key: string) => storage.getItem(key)),
-            ),
-          )
-          return items.filter(Boolean) as MediaItem[]
+          const keys = await getStorage().getKeys()
+          // production's pre-baked storage keys carry the collection prefix; dev/external keys don't
+          const collectionPrefix = new RegExp(`^${VIRTUAL_MEDIA_COLLECTION_NAME}:`)
+          return keys.map((key: string): MediaItem => {
+            const rawKey = key.replace(collectionPrefix, '')
+            return mediaItemFieldsFromKey(rawKey)
+          })
         },
         upsert: async (fsPath: string, media: MediaItem) => {
           const id = generateMediaIdFromFsPath(fsPath)

src/module/src/runtime/server/routes/dev/public/[...path].ts

@@ -1,10 +1,10 @@
 import type { H3Event } from 'h3'
 import { createError, eventHandler, getRequestHeader, readRawBody, setResponseHeader } from 'h3'
 import type { Storage, StorageMeta } from 'unstorage'
-import { withLeadingSlash } from 'ufo'
 // @ts-expect-error useStorage is not defined in .nuxt/imports.d.ts
 import { useStorage } from '#imports'
 import { VIRTUAL_MEDIA_COLLECTION_NAME } from '../../../../utils/constants'
+import { mediaItemFieldsFromKey } from '../../../../utils/media'
 
 
 export default eventHandler(async (event) => {
@@ -29,11 +29,7 @@ export default eventHandler(async (event) => {
       })
     }
     return {
-      id: `${VIRTUAL_MEDIA_COLLECTION_NAME}/${key.replace(/:/g, '/')}`,
-      extension: key.split('.').pop(),
-      stem: key.split('.').join('.'),
-      path: '/' + key.replace(/:/g, '/'),
-      fsPath: withLeadingSlash(key.replace(/:/g, '/')),
+      ...mediaItemFieldsFromKey(key),
       version: new Date(item.mtime || new Date()).getTime(),
     }
   }

src/module/src/runtime/utils/media.ts

@@ -1,6 +1,28 @@
 import { join } from 'pathe'
+import { withLeadingSlash } from 'ufo'
 import { VIRTUAL_MEDIA_COLLECTION_NAME } from './constants'
 
 export function generateIdFromFsPath(fsPath: string) {
   return join(VIRTUAL_MEDIA_COLLECTION_NAME, fsPath)
 }
+
+export interface MediaItemKeyFields {
+  id: string
+  extension: string
+  stem: string
+  path: string
+  fsPath: string
+  [key: string]: unknown
+}
+
+// `key` must be a raw, unprefixed storage key — strip VIRTUAL_MEDIA_COLLECTION_NAME first if present
+export function mediaItemFieldsFromKey(key: string): MediaItemKeyFields {
+  const fsPath = withLeadingSlash(key.replace(/:/g, '/'))
+  return {
+    id: generateIdFromFsPath(fsPath),
+    extension: key.split('.').pop() || '',
+    stem: fsPath.split('.').slice(0, -1).join('.'),
+    path: fsPath,
+    fsPath,
+  }
+}

src/module/src/templates.ts

@@ -1,6 +1,5 @@
 import type { Storage } from 'unstorage'
-import { withLeadingSlash } from 'ufo'
-import { VIRTUAL_MEDIA_COLLECTION_NAME } from './utils/constants'
+import { mediaItemFieldsFromKey } from './runtime/utils/media'
 
 export async function getAssetsDefaultStorageDevTemplate() {
   return [
@@ -20,14 +19,7 @@ export async function getAssetsDefaultStorageTemplate(assetsStorage: Storage) {
     'const storage = createStorage({})',
     '',
     ...keys.map((key) => {
-      const path = withLeadingSlash(key.replace(/:/g, '/'))
-      const value = {
-        id: `${VIRTUAL_MEDIA_COLLECTION_NAME}/${key.replace(/:/g, '/')}`,
-        extension: key.split('.').pop(),
-        stem: key.split('.').join('.'),
-        path,
-        fsPath: path,
-      }
+      const value = mediaItemFieldsFromKey(key)
       return `storage.setItem('${value.id}', ${JSON.stringify(value)})`
     }),
     '',

src/module/test/utils/media.test.ts

@@ -0,0 +1,30 @@
+import { describe, it, expect } from 'vitest'
+import { mediaItemFieldsFromKey } from '../../src/runtime/utils/media'
+
+describe('mediaItemFieldsFromKey', () => {
+  it('should derive fields from a root-level key', () => {
+    expect(mediaItemFieldsFromKey('demo.mp4')).toEqual({
+      id: 'public-assets/demo.mp4',
+      extension: 'mp4',
+      stem: '/demo',
+      path: '/demo.mp4',
+      fsPath: '/demo.mp4',
+    })
+  })
+
+  it('should derive fields from a nested, colon-separated key', () => {
+    expect(mediaItemFieldsFromKey('videos:sub:demo.mp4')).toEqual({
+      id: 'public-assets/videos/sub/demo.mp4',
+      extension: 'mp4',
+      stem: '/videos/sub/demo',
+      path: '/videos/sub/demo.mp4',
+      fsPath: '/videos/sub/demo.mp4',
+    })
+  })
+
+  it('should not duplicate the extension in stem for a file with a single dot', () => {
+    const { stem, extension } = mediaItemFieldsFromKey('photo.png')
+
+    expect(`${stem}.${extension}`).toBe('/photo.png')
+  })
+})