feat(nuxt): usePreviewMode composable

packages/nuxt/src/app/composables/index.ts

@@ -32,3 +32,4 @@ export { isPrerendered, loadPayload, preloadPayload, definePayloadReducer, defin
 export type { ReloadNuxtAppOptions } from './chunk'
 export { reloadNuxtApp } from './chunk'
 export { useRequestURL } from './url'
+export { usePreviewMode } from './preview'

packages/nuxt/src/app/composables/preview.ts

@@ -0,0 +1,65 @@
+import { reactive, readonly, toRef } from 'vue'
+
+import { refreshNuxtData, useRoute, useRouter, useState } from '#app'
+
+export interface PreviewOptions<Controls extends boolean = false> {
+  controls?: Controls
+  tokenQueryName?: string
+}
+
+interface PreviewState {
+  enabled: boolean
+  token: string | null
+  addedAfterNavigationCallback: boolean
+}
+
+const previewQueryName = 'preview'
+
+export function usePreviewMode<Controls extends boolean = false> (options?: PreviewOptions<Controls>) {
+  options = {
+    controls: false as Controls,
+    tokenQueryName: 'token',
+    ...(options || {})
+  }
+
+  const router = useRouter()
+  const route = useRoute()
+
+  const previewState = useState('_preview-composable', () => reactive<PreviewState>({
+    enabled: false,
+    token: null,
+    addedAfterNavigationCallback: false
+  }))
+
+  if (!previewState.value.enabled) {
+    const previewParam = route.query[previewQueryName]
+
+    previewState.value.enabled = !!previewParam && previewParam === 'true'
+
+    if (previewState.value.enabled && !previewState.value.token) {
+      const query = route.query[options!.tokenQueryName!]
+      const token = Array.isArray(query) ? query[0] : query
+
+      if (token) {
+        previewState.value.token = token
+      }
+    }
+  }
+
+  const refreshData = () => {
+    previewState.value.addedAfterNavigationCallback = true
+    refreshNuxtData()
+  }
+
+  if (previewState.value.enabled && !previewState.value.addedAfterNavigationCallback && process.client) {
+    refreshData()
+    router.afterEach(refreshData)
+  }
+
+  const enabled = readonly(toRef(previewState.value, 'enabled'))
+  const token = readonly(toRef(previewState.value, 'token'))
+
+  return (options.controls
+    ? { enabled, token }
+    : enabled) as Controls extends true ? { enabled: typeof enabled, token: typeof token } : typeof enabled
+}

packages/nuxt/src/imports/presets.ts

@@ -35,6 +35,7 @@ const appPreset = defineUnimportPreset({
     'useRequestEvent',
     'useRequestFetch',
     'useRequestURL',
+    'usePreviewMode',
     'setResponseStatus',
     'setPageLayout',
     'onNuxtReady',

test/basic.test.ts

@@ -439,6 +439,31 @@ describe('pages', () => {
     expect(response).not.toContain('don\'t look at this')
     expect(response).toContain('OH NNNNNNOOOOOOOOOOO')
   })
+
+  it('respects preview mode', async () => {
+    const token = 'hehe'
+
+    const page = await createPage(`/preview?preview=true&token=${token}`)
+
+    const hasRunOnClient = await new Promise<boolean>((resolve) => {
+      page.on('console', (message) => {
+        setTimeout(() => resolve(false), 4000)
+
+        if (message.text() === 'true') { resolve(true) }
+      })
+    })
+
+    expect(hasRunOnClient).toBe(true)
+
+    expect(await page.locator('#fetched-on-client').textContent()).toContain('fetched on client')
+    expect(await page.locator('#preview-mode').textContent()).toContain('preview mode enabled')
+
+    await page.click('#use-fetch-check')
+    await page.waitForLoadState('networkidle')
+
+    expect(await page.locator('#token-check').textContent()).toContain(token)
+    expect(await page.locator('#correct-api-key-check').textContent()).toContain('true')
+  })
 })
 
 describe('nuxt composables', () => {

test/fixtures/basic/pages/preview/index.vue

@@ -0,0 +1,29 @@
+<script setup>
+const { enabled: isPreview } = usePreviewMode({ controls: true })
+
+const { data } = await useAsyncData(async () => {
+  await new Promise(resolve => setTimeout(resolve, 200))
+
+  const fetchedOnClient = process.client
+
+  console.log(fetchedOnClient)
+
+  return { fetchedOnClient }
+})
+</script>
+
+<template>
+  <div>
+    <NuxtLink id="use-fetch-check" href="/preview/with-use-fetch">
+      check useFetch
+    </NuxtLink>
+
+    <p v-if="data && data.fetchedOnClient" id="fetched-on-client">
+      fetched on client
+    </p>
+
+    <p v-if="isPreview" id="preview-mode">
+      preview mode enabled
+    </p>
+  </div>
+</template>

test/fixtures/basic/pages/preview/with-use-fetch.vue

@@ -0,0 +1,21 @@
+<script setup>
+const { token } = usePreviewMode({ controls: true })
+
+const { data } = await useFetch('/api/preview', {
+  query: {
+    apiKey: token.value || undefined
+  }
+})
+</script>
+
+<template>
+  <div>
+    <p id="token-check">
+      {{ token }}
+    </p>
+
+    <p id="correct-api-key-check">
+      {{ data && data.hehe }}
+    </p>
+  </div>
+</template>

test/fixtures/basic/server/api/preview.ts

@@ -0,0 +1,8 @@
+const apiKeyName = 'apiKey'
+const apiKey = 'hehe'
+
+export default defineEventHandler((event) => {
+  return {
+    hehe: getQuery(event)[apiKeyName] === apiKey
+  }
+})

test/nuxt/composables.test.ts

@@ -63,7 +63,8 @@ describe('composables', () => {
       'useRoute',
       'useRouter',
       'useSeoMeta',
-      'useServerSeoMeta'
+      'useServerSeoMeta',
+      'usePreviewMode'
     ]
     expect(Object.keys(composables).sort()).toEqual([...new Set([...testedComposables, ...skippedComposables])].sort())
   })