expose media virtual collection name

Author: larbish

src/app/src/composables/useContext.ts

@@ -1,6 +1,7 @@
 import { createSharedComposable } from '@vueuse/core'
 import { computed, ref } from 'vue'
-import { StudioItemActionId, DraftStatus, StudioBranchActionId, StudioFeature, VirtualMediaCollectionName } from '../types'
+import { StudioItemActionId, DraftStatus, StudioBranchActionId, StudioFeature,
+} from '../types'
 import type {
   PublishBranchParams,
   RenameFileParams,
@@ -15,6 +16,7 @@ import type {
   DatabaseItem,
   MediaItem,
 } from '../types'
+import { VirtualMediaCollectionName, generateStemFromFsPath } from '../utils/media'
 import { oneStepActions, STUDIO_ITEM_ACTION_DEFINITIONS, twoStepActions, STUDIO_BRANCH_ACTION_DEFINITIONS } from '../utils/context'
 import type { useTree } from './useTree'
 import type { useGit } from './useGit'
@@ -23,7 +25,6 @@ import { useRoute, useRouter } from 'vue-router'
 import { findDescendantsFileItemsFromFsPath } from '../utils/tree'
 import { joinURL } from 'ufo'
 import { upperFirst } from 'scule'
-import { generateStemFromFsPath } from '../utils/media'
 
 export const useContext = createSharedComposable((
   host: StudioHost,

src/app/src/composables/useDraftMedias.ts

@@ -1,13 +1,12 @@
 import { joinURL, withLeadingSlash } from 'ufo'
 import type { DraftItem, StudioHost, MediaItem, RawFile } from '../types'
-import { VirtualMediaCollectionName } from '../types/media'
+import { VirtualMediaCollectionName, generateStemFromFsPath } from '../utils/media'
 import { DraftStatus } from '../types/draft'
 import type { useGit } from './useGit'
 import { createSharedComposable } from '@vueuse/core'
 import { useDraftBase } from './useDraftBase'
 import { mediaStorage as storage } from '../utils/storage'
 import { getFileExtension, slugifyFileName } from '../utils/file'
-import { generateStemFromFsPath } from '../utils/media'
 import { useHooks } from './useHooks'
 
 const hooks = useHooks()

src/app/src/shared.ts

@@ -1,2 +1,2 @@
 export { generateContentFromDocument, generateDocumentFromContent, removeReservedKeysFromDocument } from './utils/content'
-export { VirtualMediaCollectionName } from './types/media'
+export { VirtualMediaCollectionName } from './utils/media'

src/app/src/types/media.ts

@@ -3,5 +3,3 @@ import type { BaseItem } from './item'
 export interface MediaItem extends BaseItem {
   [key: string]: unknown
 }
-
-export const VirtualMediaCollectionName = 'public-assets' as const

src/app/src/utils/media.ts

@@ -1,3 +1,5 @@
 export function generateStemFromFsPath(fsPath: string) {
   return fsPath.split('.').slice(0, -1).join('.')
 }
+
+export const VirtualMediaCollectionName = 'public-assets' as const

src/app/test/mocks/host.ts

@@ -1,4 +1,5 @@
-import { type StudioHost, VirtualMediaCollectionName, type DatabaseItem } from '../../src/types'
+import type { StudioHost, DatabaseItem } from '../../src/types'
+import { VirtualMediaCollectionName } from '../../src/utils/media'
 import { vi } from 'vitest'
 import { createMockDocument } from './document'
 import { createMockMedia } from './media'

src/app/test/unit/utils/tree.test.ts

@@ -9,7 +9,7 @@ import { DraftStatus, TreeStatus } from '../../../src/types'
 import type { RouteLocationNormalized } from 'vue-router'
 import type { DatabaseItem } from '../../../src/types/database'
 import { joinURL, withLeadingSlash } from 'ufo'
-import { VirtualMediaCollectionName } from '../../../src/types/media'
+import { VirtualMediaCollectionName } from '../../../src/utils/media'
 
 describe('buildTree of documents with one level of depth', () => {
   // Result based on dbItemsList mock

src/module/src/module.ts

@@ -7,6 +7,7 @@ import { createStorage } from 'unstorage'
 import type { ViteDevServer } from 'vite'
 import { getAssetsStorageDevTemplate, getAssetsStorageTemplate } from './templates'
 import { version } from '../../../package.json'
+import { VirtualMediaCollectionName } from 'nuxt-studio/app/utils'
 
 interface ModuleOptions {
   /**
@@ -205,7 +206,7 @@ export default defineNuxtModule<ModuleOptions>({
             server.ws.send({
               type: 'custom',
               event: 'nuxt-studio:media:update',
-              data: { type, id: `public-assets/${file}` },
+              data: { type, id: `${VirtualMediaCollectionName}/${file}` },
             })
           })
         },

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

@@ -3,10 +3,11 @@ import { createError, eventHandler, getRequestHeader, readRawBody, setResponseHe
 import type { Storage, StorageMeta } from 'unstorage'
 // @ts-expect-error useStorage is not defined in .nuxt/imports.d.ts
 import { useStorage } from '#imports'
+import { VirtualMediaCollectionName } from 'nuxt-studio/app/utils'
 
 export default eventHandler(async (event) => {
   const path = event.path.replace('/__nuxt_studio/dev/public/', '')
-  const key = path.replace(/\//g, ':').replace(/^public-assets:/, '')
+  const key = path.replace(/\//g, ':').replace(new RegExp(`^${VirtualMediaCollectionName}:`), '')
   const storage = useStorage('nuxt_studio_public_assets') as Storage
 
   // GET => getItem / getKeys
@@ -26,7 +27,7 @@ export default eventHandler(async (event) => {
       })
     }
     return {
-      id: `public-assets/${key.replace(/:/g, '/')}`,
+      id: `${VirtualMediaCollectionName}/${key.replace(/:/g, '/')}`,
       extension: key.split('.').pop(),
       stem: key.split('.').join('.'),
       path: '/' + key.replace(/:/g, '/'),

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

@@ -1,5 +1,5 @@
 import { join } from 'pathe'
-import { VirtualMediaCollectionName } from 'nuxt-studio/app'
+import { VirtualMediaCollectionName } from 'nuxt-studio/app/utils'
 
 export function generateIdFromFsPath(fsPath: string) {
   return join(VirtualMediaCollectionName, fsPath)