fix(preview): enable iframe preview in webkit (#124)

Author: farnabaz

Diff for: src/runtime/components/ContentPreviewMode.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { onMounted, ref, onUnmounted, nextTick, Transition } from 'vue'
-import { refreshNuxtData, useCookie, useRoute, navigateTo, useNuxtApp, useRouter } from '#app'
+import { onMounted, ref, onUnmounted, Transition } from 'vue'
+import { useCookie, useRoute, useNuxtApp, useRouter } from '#app'
 import type { Socket } from 'socket.io-client'
 import type { PreviewResponse } from '../../../types'
 
 const props = defineProps({
   previewToken: {
-    type: Object,
+    type: String,
     required: true
   },
   apiURL: {
@@ -36,6 +36,7 @@ let socket: Socket
 const closePreviewMode = () => {
   useCookie('previewToken').value = ''
   useRoute().query.preview = ''
+  window.sessionStorage.removeItem('previewToken')
 
   window.location.reload()
 }
@@ -70,7 +71,7 @@ onMounted(async () => {
   socket = io.connect(`${props.apiURL}/preview`, {
     transports: ['websocket', 'polling'],
     auth: {
-      token: props.previewToken.value
+      token: props.previewToken
     }
   })
 

Diff for: src/runtime/composables/useStudio.ts

@@ -7,7 +7,7 @@ import { callWithNuxt } from '#app'
 import type { RouteLocationNormalized } from 'vue-router'
 import ContentPreviewMode from '../components/ContentPreviewMode.vue'
 import { createSingleton, deepAssign, deepDelete, mergeDraft, StudioConfigFiles, StudioConfigRoot } from '../utils'
-import { refreshNuxtData, useAppConfig, useCookie, useNuxtApp, useRuntimeConfig, useState, useContentState, queryContent, ref, toRaw, useRoute, useRouter } from '#imports'
+import { refreshNuxtData, useAppConfig, useNuxtApp, useRuntimeConfig, useState, useContentState, queryContent, ref, toRaw, useRoute, useRouter } from '#imports'
 import type { PreviewFile, PreviewResponse } from '~~/../types'
 import { FileChangeMessagePayload } from '~~/../types'
 
@@ -36,18 +36,18 @@ export const useStudio = () => {
   }
 
   const syncPreviewFiles = async (contentStorage: Storage, files: PreviewFile[], ignoreBuiltContents = true) => {
-    const previewToken = useCookie('previewToken', { sameSite: 'none', secure: true })
+    const previewToken = window.sessionStorage.getItem('previewToken')
     // Remove previous preview data
-    const keys: string[] = await contentStorage.getKeys(`${previewToken.value}:`)
+    const keys: string[] = await contentStorage.getKeys(`${previewToken}:`)
     await Promise.all(keys.map(key => contentStorage.removeItem(key)))
 
     // Set preview meta
     const sources = new Set<string>(files.map(file => file.parsed!._id.split(':').shift()!))
-    await contentStorage.setItem(`${previewToken.value}$`, JSON.stringify({ ignoreSources: Array.from(sources) }))
+    await contentStorage.setItem(`${previewToken}$`, JSON.stringify({ ignoreSources: Array.from(sources) }))
 
     // Handle content files
     await Promise.all(
-      files.map(item => contentStorage.setItem(`${previewToken.value}:${item.parsed!._id}`, JSON.stringify(item.parsed)))
+      files.map(item => contentStorage.setItem(`${previewToken}:${item.parsed!._id}`, JSON.stringify(item.parsed)))
     )
   }
 
@@ -118,19 +118,19 @@ export const useStudio = () => {
   }
 
   const requestPreviewSynchronization = async () => {
-    const previewToken = useCookie('previewToken', { sameSite: 'none', secure: true })
+    const previewToken = window.sessionStorage.getItem('previewToken')
     // Fetch preview data from station
     await $fetch<PreviewResponse>('api/projects/preview/sync', {
       baseURL: studioConfig?.apiURL,
       method: 'POST',
       params: {
-        token: previewToken.value
+        token: previewToken
       }
     }) as any
   }
 
   const mountPreviewUI = () => {
-    const previewToken = useCookie('previewToken', { sameSite: 'none', secure: true })
+    const previewToken = window.sessionStorage.getItem('previewToken')
     // Show loading
     const el = document.createElement('div')
     el.id = '__nuxt_preview_wrapper'
@@ -145,12 +145,12 @@ export const useStudio = () => {
 
   // Content Helpers
   const findContentWithId = async (path: string): Promise<ParsedContent | null> => {
-    const previewToken = useCookie('previewToken', { sameSite: 'none', secure: true })
+    const previewToken = window.sessionStorage.getItem('previewToken')
     if (!path) {
       return null
     }
     path = path.replace(/\/$/, '')
-    let content = await storage.value?.getItem(`${previewToken.value}:${path}`)
+    let content = await storage.value?.getItem(`${previewToken}:${path}`)
     if (!content) {
       content = await storage.value?.getItem(`cached:${path}`)
     }
@@ -161,15 +161,15 @@ export const useStudio = () => {
   }
 
   const updateContent = (content: PreviewFile) => {
-    const previewToken = useCookie('previewToken', { sameSite: 'none', secure: true })
+    const previewToken = window.sessionStorage.getItem('previewToken')
     if (!storage.value) { return }
 
-    storage.value.setItem(`${previewToken.value}:${content.parsed?._id}`, JSON.stringify(content.parsed))
+    storage.value.setItem(`${previewToken}:${content.parsed?._id}`, JSON.stringify(content.parsed))
   }
 
   const removeContentWithId = async (path: string) => {
-    const previewToken = useCookie('previewToken', { sameSite: 'none', secure: true })
-    await storage.value?.removeItem(`${previewToken.value}:${path}`)
+    const previewToken = window.sessionStorage.getItem('previewToken')
+    await storage.value?.removeItem(`${previewToken}:${path}`)
   }
 
   const requestRerender = async () => {

Diff for: src/runtime/plugins/preview.client.ts

@@ -28,6 +28,7 @@ export default defineNuxtPlugin((nuxtApp) => {
 
     if (route.query.preview && previewToken.value !== route.query.preview) {
       previewToken.value = String(route.query.preview)
+      window.sessionStorage.setItem('previewToken', String(route.query.preview))
     }
 
     // Listen to `content:storage` hook to get storage instance

Diff for: src/runtime/server/routes/studio.ts

@@ -33,7 +33,7 @@ export default eventHandler(async () => {
 
   const appConfig = useAppConfig()
   const runtimeConfig = useRuntimeConfig()
-  const { app, appConfigSchema, content: { sources, ignores, locales, highlight, navigation, documentDriven, experiment } } = runtimeConfig
+  const { app, appConfigSchema, content: { sources, ignores, locales, highlight, navigation, documentDriven, experimental } } = runtimeConfig
 
   // Support for __pinceau_tokens_{schema|config}.json
   const hasPinceau = runtimeConfig?.pinceau?.studio
@@ -56,7 +56,7 @@ export default eventHandler(async () => {
     tokensConfigSchema,
     tokensConfig,
     // @nuxt/content
-    content: { sources, ignores, locales, highlight, navigation, documentDriven, experiment },
+    content: { sources, ignores, locales, highlight, navigation, documentDriven, experimental },
     // nuxt-component-meta
     components: filteredComponents
   }