feat(dev): enable studio in development mode without auth

Author: farnabaz

src/app/src/components/AppFooter.vue

@@ -16,19 +16,19 @@ const user = host.user.get()
 
 const repositoryUrl = computed(() => git.getBranchUrl())
 const userMenuItems = computed(() => [
-  [
-  // [{
-  //   slot: 'view-mode' as const,
-  // }
-    repositoryUrl.value
-      ? {
+  repositoryUrl.value
+    ? [
+        // [{
+        //   slot: 'view-mode' as const,
+        // }
+        {
           label: `${host.repository.owner}/${host.repository.repo}`,
           icon: 'i-simple-icons:github',
           to: repositoryUrl.value,
           target: '_blank',
-        }
-      : undefined,
-  ].filter(Boolean),
+        },
+      ]
+    : undefined,
   [{
     label: 'Sign out',
     icon: 'i-lucide-log-out',
@@ -38,7 +38,7 @@ const userMenuItems = computed(() => [
       })
     },
   }],
-])
+].filter(Boolean))
 
 function closeStudio() {
   unsetActiveLocation()

src/app/src/components/header/HeaderMain.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useRouter, useRoute } from 'vue-router'
 import { computed } from 'vue'
-import { useStudio } from '../../composables/useStudio'
+import { studioFlags, useStudio } from '../../composables/useStudio'
 import type { StudioFeature } from '../../types'
 import { useStudioState } from '../../composables/useStudioState'
 
@@ -52,6 +52,7 @@ const current = computed({
     />
 
     <UButton
+      v-if="!studioFlags.dev"
       label="Review"
       color="neutral"
       :variant="context.draftCount.value > 0 ? 'solid' : 'soft'"

src/app/src/composables/useDraftBase.ts

@@ -6,6 +6,7 @@ import { checkConflict, findDescendantsFromId, getDraftStatus } from '../utils/d
 import type { useGit } from './useGit'
 import { useHooks } from './useHooks'
 import { ref } from 'vue'
+import { studioFlags } from './useStudio'
 
 export function useDraftBase<T extends DatabaseItem | MediaItem>(
   type: 'media' | 'document',
@@ -73,42 +74,44 @@ export function useDraftBase<T extends DatabaseItem | MediaItem>(
       await storage.removeItem(id)
       await hostDb.delete(id)
 
-      let deleteDraftItem: DraftItem<T> | null = null
-      if (existingDraftItem) {
-        if (existingDraftItem.status === DraftStatus.Deleted) return
+      if (!studioFlags.dev) {
+        let deleteDraftItem: DraftItem<T> | null = null
+        if (existingDraftItem) {
+          if (existingDraftItem.status === DraftStatus.Deleted) return
 
-        if (existingDraftItem.status === DraftStatus.Created) {
-          list.value = list.value.filter(item => item.id !== id)
+          if (existingDraftItem.status === DraftStatus.Created) {
+            list.value = list.value.filter(item => item.id !== id)
+          }
+          else {
+            deleteDraftItem = {
+              id,
+              fsPath: existingDraftItem.fsPath,
+              status: DraftStatus.Deleted,
+              original: existingDraftItem.original,
+              githubFile: existingDraftItem.githubFile,
+            }
+
+            list.value = list.value.map(item => item.id === id ? deleteDraftItem! : item) as DraftItem<T>[]
+          }
         }
         else {
+        // TODO: check if gh file has been updated
+          const githubFile = await git.fetchFile(joinURL('content', fsPath), { cached: true }) as GithubFile
+
           deleteDraftItem = {
             id,
-            fsPath: existingDraftItem.fsPath,
+            fsPath,
             status: DraftStatus.Deleted,
-            original: existingDraftItem.original,
-            githubFile: existingDraftItem.githubFile,
+            original: originalDbItem,
+            githubFile,
           }
 
-          list.value = list.value.map(item => item.id === id ? deleteDraftItem! : item) as DraftItem<T>[]
+          list.value.push(deleteDraftItem)
         }
-      }
-      else {
-      // TODO: check if gh file has been updated
-        const githubFile = await git.fetchFile(joinURL('content', fsPath), { cached: true }) as GithubFile
-
-        deleteDraftItem = {
-          id,
-          fsPath,
-          status: DraftStatus.Deleted,
-          original: originalDbItem,
-          githubFile,
-        }
-
-        list.value.push(deleteDraftItem)
-      }
 
-      if (deleteDraftItem) {
-        await storage.setItem(id, deleteDraftItem)
+        if (deleteDraftItem) {
+          await storage.setItem(id, deleteDraftItem)
+        }
       }
 
       if (rerender) {

src/module/src/module.ts

@@ -71,8 +71,12 @@ interface ModuleOptions {
   }
   /**
    * Enable Nuxt Studio to edit content and media files on your filesystem.
-   * Currently experimental.
-   * @experimental
+   */
+  dev: boolean
+  /**
+   * Enable Nuxt Studio to edit content and media files on your filesystem.
+   *
+   * @deprecated Use the 'dev' option instead.
    */
   development?: {
     sync?: boolean
@@ -103,6 +107,7 @@ export default defineNuxtModule<ModuleOptions>({
         clientSecret: process.env.STUDIO_GITHUB_CLIENT_SECRET,
       },
     },
+    dev: false,
     development: {
       sync: false,
     },
@@ -111,10 +116,7 @@ export default defineNuxtModule<ModuleOptions>({
     const resolver = createResolver(import.meta.url)
     const runtime = (...args: string[]) => resolver.resolve('./runtime', ...args)
 
-    if (!nuxt.options.dev) {
-      options.development!.sync = false
-    }
-
+    options.dev = nuxt.options.dev || options.development?.sync || false
     if (!nuxt.options.dev && !nuxt.options._prepare) {
       if (!options.auth?.github?.clientId && !options.auth?.github?.clientSecret) {
         logger.warn([
@@ -130,8 +132,8 @@ export default defineNuxtModule<ModuleOptions>({
 
     nuxt.options.runtimeConfig.public.studio = {
       route: options.route!,
+      dev: Boolean(options.dev),
       development: {
-        sync: Boolean(options.development!.sync),
         server: process.env.STUDIO_DEV_SERVER,
       },
       // @ts-expect-error Autogenerated type does not match with options
@@ -176,7 +178,7 @@ export default defineNuxtModule<ModuleOptions>({
       ]
     })
 
-    if (options.development!.sync) {
+    if (options.dev) {
       nuxt.options.nitro.storage = {
         ...nuxt.options.nitro.storage,
         nuxt_studio_content: {
@@ -185,7 +187,7 @@ export default defineNuxtModule<ModuleOptions>({
         },
         nuxt_studio_public_assets: {
           driver: 'fs',
-          base: resolve(nuxt.options.srcDir, 'public'),
+          base: resolve(nuxt.options.rootDir, 'public'),
         },
       }
       addServerHandler({
@@ -220,7 +222,7 @@ export default defineNuxtModule<ModuleOptions>({
     })
     addTemplate({
       filename: 'studio-public-assets.mjs',
-      getContents: () => options.development!.sync
+      getContents: () => options.dev
         ? getAssetsStorageDevTemplate(assetsStorage, nuxt)
         : getAssetsStorageTemplate(assetsStorage, nuxt),
     })

src/module/src/runtime/host.dev.ts

@@ -11,7 +11,7 @@ import { debounce } from 'perfect-debounce'
 export function useStudioHost(user: StudioUser, repository: Repository) {
   const host = useStudioHostBase(user, repository)
 
-  if (!useRuntimeConfig().public.studio.development.sync) {
+  if (!useRuntimeConfig().public.studio.dev) {
     return host
   }
 

src/module/src/runtime/utils/activation.ts

@@ -5,6 +5,17 @@ export async function defineStudioActivationPlugin(onStudioActivation: (user: St
   const user = useState<StudioUser | null>('studio-session', () => null)
   const config = useRuntimeConfig().public.studio
 
+  if (config.dev) {
+    return await onStudioActivation({
+      provider: 'github',
+      email: '[email protected]',
+      name: 'Dev',
+      githubToken: '',
+      githubId: '',
+      avatar: '',
+    })
+  }
+
   await $fetch<{ user: StudioUser }>('/__nuxt_studio/auth/session').then((session) => {
     user.value = session?.user ?? null
   })