expose all document related method from host

Author: larbish

src/app/src/app.vue

@@ -27,7 +27,7 @@ const appPortal = ref<HTMLElement>()
 
 const activeDocuments = ref<{ fsPath: string, title: string }[]>([])
 function detectActiveDocuments() {
-  activeDocuments.value = host.document.detectActives().map((content) => {
+  activeDocuments.value = host.document.utils.detectActives().map((content) => {
     return {
       fsPath: content.fsPath,
       title: content.title,

src/app/src/components/content/ContentCardReview.vue

@@ -4,13 +4,13 @@ import type { PropType } from 'vue'
 import { ref, computed, nextTick, watch, onMounted, onUnmounted } from 'vue'
 import { DraftStatus, ContentFileExtension } from '../../types'
 import { getFileExtension } from '../../utils/file'
-import { generateContentFromDocument, isEqual } from '../../utils/content'
 import { useMonacoDiff } from '../../composables/useMonacoDiff'
 import { useMonaco } from '../../composables/useMonaco'
 import { useStudio } from '../../composables/useStudio'
 import { fromBase64ToUTF8 } from '../../utils/string'
+import { areContentEqual } from '../../utils/content'
 
-const { ui } = useStudio()
+const { ui, host } = useStudio()
 
 const props = defineProps({
   draftItem: {
@@ -89,11 +89,12 @@ watch(isOpen, () => {
 async function initializeEditor() {
   isLoadingContent.value = true
 
+  const generateContentFromDocument = host.document.generate.contentFromDocument
   const localOriginal = props.draftItem.original ? await generateContentFromDocument(props.draftItem.original as DatabaseItem) : null
   const gitHubOriginal = props.draftItem.githubFile?.content ? fromBase64ToUTF8(props.draftItem.githubFile.content) : null
   const modified = props.draftItem.modified ? await generateContentFromDocument(props.draftItem.modified as DatabasePageItem) : null
 
-  isAutomaticFormattingDetected.value = !isEqual(localOriginal, gitHubOriginal)
+  isAutomaticFormattingDetected.value = !areContentEqual(localOriginal, gitHubOriginal)
 
   // Wait for DOM to update before initializing Monaco
   await nextTick()

src/app/src/components/content/ContentEditorCode.vue

@@ -2,11 +2,11 @@
 import { computed, ref, watch } from 'vue'
 import { ContentFileExtension, type DatabasePageItem, type DraftItem, DraftStatus, type DatabaseItem } from '../../types'
 import type { PropType } from 'vue'
-import { generateContentFromDocument, isEqual, pickReservedKeysFromDocument } from '../../utils/content'
 import { setupSuggestion } from '../../utils/monaco'
 import { useStudio } from '../../composables/useStudio'
 import { useMonaco } from '../../composables/useMonaco'
 import { fromBase64ToUTF8 } from '../../utils/string'
+import { areContentEqual } from '../../utils/content'
 
 const props = defineProps({
   draftItem: {
@@ -67,11 +67,11 @@ const { editor, setContent: setEditorContent } = useMonaco(editorRef, {
 
     content.value = newContent
 
-    host.document.generateDocumentFromContent(document.value!.id, content.value).then((doc) => {
+    host.document.generate.documentFromContent(document.value!.id, content.value).then((doc) => {
       localStatus.value = DraftStatus.Updated
 
       document.value = {
-        ...pickReservedKeysFromDocument(props.draftItem.modified as DatabasePageItem || document.value!),
+        ...host.document.utils.pickReservedKeys(props.draftItem.modified as DatabasePageItem || document.value!),
         ...doc,
       } as DatabasePageItem
     })
@@ -110,17 +110,18 @@ watch(() => document.value?.id + '-' + props.draftItem.version, async () => {
 }, { immediate: true })
 
 async function setContent(document: DatabasePageItem) {
-  const md = await generateContentFromDocument(document) || ''
+  const contentFromDocument = host.document.generate.contentFromDocument
+  const md = await contentFromDocument(document) || ''
   content.value = md
   setEditorContent(md, true)
   currentDocumentId.value = document.id
 
   isAutomaticFormattingDetected.value = false
   if (props.draftItem.original && props.draftItem.githubFile?.content) {
-    const localOriginal = await generateContentFromDocument(props.draftItem.original as DatabaseItem)
+    const localOriginal = await contentFromDocument(props.draftItem.original as DatabaseItem)
     const gitHubOriginal = fromBase64ToUTF8(props.draftItem.githubFile.content)
 
-    isAutomaticFormattingDetected.value = !isEqual(localOriginal, gitHubOriginal)
+    isAutomaticFormattingDetected.value = !areContentEqual(localOriginal, gitHubOriginal)
   }
 }
 </script>

src/app/src/components/content/ContentEditorText.vue

@@ -5,16 +5,17 @@ import { parseMarkdown, stringifyMarkdown } from '@nuxtjs/mdc/runtime'
 import { decompressTree, compressTree } from '@nuxt/content/runtime'
 import type { MDCRoot } from '@nuxtjs/mdc'
 import type { MarkdownRoot } from '@nuxt/content'
-import { removeReservedKeysFromDocument } from '../../utils/content'
+import { useStudio } from '../../composables/useStudio'
 
+const { host } = useStudio()
 const document = defineModel<DatabasePageItem>()
 const content = ref('')
 
 watch(() => document.value?.id, async () => {
   if (document.value?.body) {
     // @ts-expect-error todo fix MarkdownRoot/MDCRoot conversion in MDC module
     const tree = document.value.body.type === 'minimark' ? decompressTree(document.value.body) : (document.value.body as MDCRoot)
-    const data = removeReservedKeysFromDocument(document.value)
+    const data = host.document.utils.removeReservedKeys(document.value)
     stringifyMarkdown(tree, data).then((md) => {
       content.value = md || ''
     })

src/app/src/composables/useContext.ts

@@ -106,8 +106,8 @@ export const useContext = createSharedComposable((
       const rootDocumentFsPath = joinURL(fsPath, 'index.md')
       const navigationDocumentFsPath = joinURL(fsPath, '.navigation.yml')
 
-      const navigationDocument = await host.document.create(navigationDocumentFsPath, `title: ${folderName}`)
-      const rootDocument = await host.document.create(rootDocumentFsPath, `# ${upperFirst(folderName)} root file`)
+      const navigationDocument = await host.document.db.create(navigationDocumentFsPath, `title: ${folderName}`)
+      const rootDocument = await host.document.db.create(rootDocumentFsPath, `# ${upperFirst(folderName)} root file`)
 
       await activeTree.value.draft.create(navigationDocumentFsPath, navigationDocument)
       const rootDocumentDraftItem = await activeTree.value.draft.create(rootDocumentFsPath, rootDocument)
@@ -136,7 +136,7 @@ export const useContext = createSharedComposable((
     },
     [StudioItemActionId.CreateDocument]: async (params: CreateFileParams) => {
       const { fsPath, content } = params
-      const document = await host.document.create(fsPath, content)
+      const document = await host.document.db.create(fsPath, content)
       const draftItem = await activeTree.value.draft.create(fsPath, document as DatabaseItem)
       await activeTree.value.selectItemByFsPath(draftItem.fsPath)
     },

src/app/src/composables/useDraftBase.ts

@@ -18,7 +18,7 @@ export function useDraftBase<T extends DatabaseItem | MediaItem>(
   const current = ref<DraftItem<DatabaseItem | MediaItem> | null>(null)
 
   const ghPathPrefix = type === 'media' ? 'public' : 'content'
-  const hostDb = type === 'media' ? host.media : host.document
+  const hostDb = type === 'media' ? host.media : host.document.db
   const hookName = `studio:draft:${type}:updated` as const
 
   const hooks = useHooks()
@@ -38,7 +38,7 @@ export function useDraftBase<T extends DatabaseItem | MediaItem>(
     const draftItem: DraftItem<T> = {
       fsPath,
       githubFile,
-      status: getDraftStatus(item, original),
+      status: getDraftStatus(item, original!, host.document.utils.areEqual),
       modified: item,
     }
 
@@ -128,14 +128,14 @@ export function useDraftBase<T extends DatabaseItem | MediaItem>(
 
         // Renamed draft
         if (existingItem.original) {
-          await revert(existingItem.original.fsPath, { rerender: false })
+          await revert(existingItem.original.fsPath!, { rerender: false })
         }
       }
       else {
         // @ts-expect-error upsert type is wrong, second param should be DatabaseItem | MediaItem
         await hostDb.upsert(draftItem.fsPath, existingItem.original)
         existingItem.modified = existingItem.original
-        existingItem.status = getDraftStatus(existingItem.modified, existingItem.original)
+        existingItem.status = getDraftStatus(existingItem.modified as DatabaseItem, existingItem.original as DatabaseItem, host.document.utils.areEqual)
         await storage.setItem(draftItem.fsPath, existingItem)
       }
     }

src/app/src/composables/useDraftDocuments.ts

@@ -1,7 +1,6 @@
 import type { DatabaseItem, DraftItem, StudioHost, RawFile } from '../types'
 import { DraftStatus } from '../types/draft'
 import type { useGit } from './useGit'
-import { generateContentFromDocument } from '../utils/content'
 import { getDraftStatus } from '../utils/draft'
 import { createSharedComposable } from '@vueuse/core'
 import { useHooks } from './useHooks'
@@ -26,6 +25,8 @@ export const useDraftDocuments = createSharedComposable((host: StudioHost, git:
   } = useDraftBase<DatabaseItem>('document', host, git, storage)
 
   const hooks = useHooks()
+  const hostDb = host.document.db
+  const generateContentFromDocument = host.document.generate.contentFromDocument
 
   async function update(fsPath: string, document: DatabaseItem): Promise<DraftItem<DatabaseItem>> {
     const existingItem = list.value.find(item => item.fsPath === fsPath) as DraftItem<DatabaseItem>
@@ -34,15 +35,15 @@ export const useDraftDocuments = createSharedComposable((host: StudioHost, git:
     }
 
     const oldStatus = existingItem.status
-    existingItem.status = getDraftStatus(document, existingItem.original)
+    existingItem.status = getDraftStatus(document, existingItem.original as DatabaseItem, host.document.utils.areEqual)
     existingItem.modified = document
 
     await storage.setItem(fsPath, existingItem)
 
     list.value = list.value.map(item => item.fsPath === fsPath ? existingItem : item)
 
     // Upsert document in database
-    await host.document.upsert(fsPath, existingItem.modified)
+    await hostDb.upsert(fsPath, existingItem.modified)
 
     // Trigger hook to warn that draft list has changed
     if (existingItem.status !== oldStatus) {
@@ -61,7 +62,7 @@ export const useDraftDocuments = createSharedComposable((host: StudioHost, git:
       const { fsPath, newFsPath } = item
 
       const existingDraftToRename = list.value.find(draftItem => draftItem.fsPath === fsPath) as DraftItem<DatabaseItem>
-      const dbItemToRename = await host.document.get(fsPath)
+      const dbItemToRename = await hostDb.get(fsPath)
       if (!dbItemToRename) {
         throw new Error(`Database item not found for document fsPath: ${fsPath}`)
       }
@@ -76,7 +77,7 @@ export const useDraftDocuments = createSharedComposable((host: StudioHost, git:
 
       await remove([fsPath], { rerender: false })
 
-      const newDbItem = await host.document.create(newFsPath, content!)
+      const newDbItem = await hostDb.create(newFsPath, content!)
 
       await create(newFsPath, newDbItem, originalDbItem, { rerender: false })
     }
@@ -85,7 +86,7 @@ export const useDraftDocuments = createSharedComposable((host: StudioHost, git:
   }
 
   async function duplicate(fsPath: string): Promise<DraftItem<DatabaseItem>> {
-    let currentDbItem = await host.document.get(fsPath)
+    let currentDbItem = await hostDb.get(fsPath)
     if (!currentDbItem) {
       throw new Error(`Database item not found for document fsPath: ${fsPath}`)
     }
@@ -103,7 +104,7 @@ export const useDraftDocuments = createSharedComposable((host: StudioHost, git:
 
     const newFsPath = `${currentFsPath.split('/').slice(0, -1).join('/')}/${currentNameWithoutExtension}-copy.${currentExtension}`
 
-    const newDbItem = await host.document.create(newFsPath, currentContent)
+    const newDbItem = await hostDb.create(newFsPath, currentContent)
 
     return await create(newFsPath, newDbItem)
   }

src/app/src/composables/useStudio.ts

@@ -7,7 +7,7 @@ import { useDraftMedias } from './useDraftMedias'
 import { ref } from 'vue'
 import { useTree } from './useTree'
 import type { RouteLocationNormalized } from 'vue-router'
-import type { StudioHost, GitOptions } from '../types'
+import type { StudioHost, GitOptions, DatabaseItem } from '../types'
 import { StudioFeature } from '../types'
 import { documentStorage, mediaStorage, nullStorageDriver } from '../utils/storage'
 import { useHooks } from './useHooks'
@@ -83,6 +83,7 @@ export const useStudio = createSharedComposable(() => {
 
 function initDevelopmentMode(host: StudioHost, draftDocuments: ReturnType<typeof useDraftDocuments>, draftMedias: ReturnType<typeof useDraftMedias>, documentTree: ReturnType<typeof useTree>, mediaTree: ReturnType<typeof useTree>) {
   const hooks = useHooks()
+  const areDocumentsEqual = host.document.utils.areEqual
 
   // Disable browser storages
   documentStorage.mount('/', nullStorageDriver)
@@ -99,10 +100,10 @@ function initDevelopmentMode(host: StudioHost, draftDocuments: ReturnType<typeof
     else if (item) {
       // Update draft if the document is not focused or the current item is not the one that was updated
       if (!window.document.hasFocus() || documentTree.currentItem.value?.fsPath !== fsPath) {
-        const document = await host.document.get(fsPath)
+        const document = await host.document.db.get(fsPath)
         item.modified = document
         item.original = document
-        item.status = getDraftStatus(document, item.original)
+        item.status = getDraftStatus(document as DatabaseItem, item.original as DatabaseItem, areDocumentsEqual)
         item.version = item.version ? item.version + 1 : 1
       }
     }
@@ -123,7 +124,7 @@ function initDevelopmentMode(host: StudioHost, draftDocuments: ReturnType<typeof
         const media = await host.media.get(fsPath)
         item.modified = media
         item.original = media
-        item.status = getDraftStatus(media, item.original)
+        item.status = getDraftStatus(media, item.original, areDocumentsEqual)
         item.version = item.version ? item.version + 1 : 1
       }
     }

src/app/src/composables/useTree.ts

@@ -98,10 +98,10 @@ export const useTree = (type: StudioFeature, host: StudioHost, draft: ReturnType
 
   // Trigger tree rebuild to update files status
   async function handleDraftUpdate(selectItem: boolean = true) {
-    const api = type === StudioFeature.Content ? host.document : host.media
-    const list = await api.list() as DatabaseItem[]
+    const hostDb = type === StudioFeature.Content ? host.document.db : host.media
+    const list = await hostDb.list() as DatabaseItem[]
 
-    tree.value = buildTree(list, draft.list.value)
+    tree.value = buildTree(list, draft.list.value, host.document.utils.areEqual)
 
     // Reselect current item to update status
     if (selectItem) {

src/app/src/shared.ts

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