feat: add support for live content API

index.d.ts

@@ -1,10 +1,4 @@
-import type { ClientConfig, ClientPerspective, StegaConfig } from '@sanity/client'
-import type {
-  SanityVisualEditingMode,
-  SanityVisualEditingRefreshHandler,
-  SanityVisualEditingZIndex,
-} from './src/module'
-import type { SanityHelper } from '#sanity-composables'
+import type { SanityHelper, SanityPublicRuntimeConfig, SanityRuntimeConfig } from './src/types'
 
 type nullish = null | undefined
 
@@ -16,53 +10,11 @@ declare module '#app' {
 
 declare module 'nuxt/schema' {
   interface RuntimeConfig {
-    sanity: {
-      visualEditing:
-        | {
-          mode: SanityVisualEditingMode
-          previewMode:
-            | false
-            | {
-              enable: string
-              disable: string
-            }
-          previewModeId: string
-          proxyEndpoint: string
-          studioUrl: string
-          token: string
-        }
-        | undefined
-    }
+    sanity: SanityRuntimeConfig
   }
 
   interface PublicRuntimeConfig {
-    sanity: {
-      additionalClients: Record<string, ClientConfig>
-      apiVersion: string
-      dataset: string
-      disableSmartCdn: boolean
-      perspective: ClientPerspective
-      projectId: string
-      stega: StegaConfig
-      token: string
-      useCdn: boolean
-      visualEditing:
-        | {
-          mode: SanityVisualEditingMode
-          previewMode:
-            | false
-            | {
-              enable: string
-              disable: string
-            }
-          proxyEndpoint: string
-          refresh: SanityVisualEditingRefreshHandler | undefined
-          studioUrl: string
-          zIndex: SanityVisualEditingZIndex
-        }
-        | nullish
-    }
-    withCredentials: boolean
+    sanity: SanityPublicRuntimeConfig
   }
 }
 

package.json

@@ -50,10 +50,12 @@
   "dependencies": {
     "@nuxt/kit": "^3.14.1592",
     "@portabletext/types": "^2.0.13",
-    "@sanity/client": "^6.22.5",
-    "@sanity/core-loader": "^1.7.12",
-    "@sanity/preview-url-secret": "^2.0.4",
-    "@sanity/visual-editing": "^2.8.0",
+    "@sanity/client": "^6.27.2",
+    "@sanity/comlink": "^3.0.1",
+    "@sanity/core-loader": "^1.7.31",
+    "@sanity/presentation-comlink": "^1.0.4",
+    "@sanity/preview-url-secret": "^2.1.0",
+    "@sanity/visual-editing": "^2.12.10",
     "consola": "^3.2.3",
     "defu": "^6.1.4",
     "jiti": "^2.4.0",

playground/components/PreviewModeBanner.vue

@@ -1,23 +1,29 @@
 <template>
-  <a
-    v-if="shouldShow"
-    :href="`/preview/disable?redirect=${route.fullPath}`"
-    class="group fixed bottom-4 right-4 z-50 block rounded bg-white/30 px-3 py-2 text-center text-xs font-medium text-gray-800 shadow-lg backdrop-blur-md hover:bg-red-500 hover:text-white"
-  >
-    <span class="block group-hover:hidden">Preview Enabled</span>
-    <span class="hidden group-hover:block">Disable Preview</span>
-  </a>
+  <ClientOnly>
+    <Component
+      :is="showDisable ? 'a' : 'div'"
+      :href="showDisable ? `/preview/disable?redirect=${route.fullPath}` : null"
+      class="group fixed bottom-4 right-4 z-50 block rounded bg-white/30 px-3 py-2 text-left text-xs text-gray-800 shadow-lg backdrop-blur-md"
+      :class="showDisable ? 'hover:bg-red-500 hover:text-white' : ''"
+    >
+      <div
+        v-if="showDisable"
+        class="font-bold"
+      >
+        <span class="block group-hover:hidden">Preview Enabled</span>
+        <span class="hidden group-hover:block">Disable Preview</span>
+      </div>
+      <div>Environment: {{ environment }}</div>
+      <div>Perspective: {{ perspective }}</div>
+    </Component>
+  </ClientOnly>
 </template>
 
 <script setup lang="ts">
 const route = useRoute()
-const sanity = useSanity()
+const environment = useSanityPreviewEnvironment()
+const perspective = useSanityPreviewPerspective()
+const isSanityPresentationTool = useIsSanityPresentationTool()
 
-const shouldShow = computed(() => {
-  const visualEditing = ('visualEditing' in sanity && sanity.visualEditing)
-
-  // Only show the banner if preview mode is enabled and we are not in Presentation.
-  // @ts-expect-error TODO: fix type testing within repo
-  return visualEditing && visualEditing?.isPreviewing.value && !visualEditing.inFrame
-})
+const showDisable = computed(() => isSanityPresentationTool.value === false)
 </script>

playground/nuxt.config.ts

@@ -1,3 +1,5 @@
+const viewerToken = process.env.NUXT_SANITY_VISUAL_EDITING_TOKEN
+
 export default defineNuxtConfig({
   modules: ['@nuxtjs/sanity'],
   app: {
@@ -8,13 +10,17 @@ export default defineNuxtConfig({
   compatibilityDate: '2024-08-19',
   sanity: {
     globalHelper: true,
-    apiVersion: '2021-03-25',
+    apiVersion: '2021-03-26',
     additionalClients: {
       another: {},
     },
     visualEditing: {
-      token: process.env.NUXT_SANITY_VISUAL_EDITING_TOKEN,
+      token: viewerToken,
       studioUrl: 'http://localhost:3333',
     },
+    liveContent: {
+      browserToken: viewerToken,
+      serverToken: viewerToken,
+    },
   },
 })

playground/pages/index.vue

@@ -1,17 +1,16 @@
 <template>
   <div
-    class="bg-gray-300 grid grid-flow-col grid-rows-3 p-8 overflow-x-hidden min-h-screen"
+    class="bg-gray-300 grid grid-flow-row grid-cols-1 gap-12 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 p-8 overflow-x-hidden min-h-screen"
   >
     <h2>Project ID: {{ $sanity.config.projectId }}</h2>
     <NuxtLink
-      v-for="({ title, poster, slug }, i) in movies"
+      v-for="({ title, poster, slug }) in movies"
       :key="title"
       :to="`/movie/${slug}`"
-      class="flex w-64 h-48 relative justify-start"
+      class="flex h-48 relative justify-start"
     >
       <div
         class="py-2 px-4 left-0 bottom-0 mb-4 flex-grow absolute bg-gray-100 rounded shadow-md font-semibold text-gray-800"
-        :data-sanity="encodeDataAttribute?.([i, 'title'])"
       >
         {{ title }}
       </div>
@@ -39,5 +38,7 @@ interface QueryResult {
   slug: string
 }
 
-const { data: movies, encodeDataAttribute } = await useSanityQuery<QueryResult[]>(query)
+const { data } = await useSanityQuery<QueryResult[]>(query)
+
+const movies = computed(() => (data.value || []).sort((a, b) => a.title.localeCompare(b.title)))
 </script>