next-sanity 12.0.2-canary.1 → 12.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-sanity",
-  "version": "12.0.2-canary.1",
+  "version": "12.0.2",
   "description": "Sanity.io toolkit for Next.js",
   "keywords": [
     "sanity",
@@ -50,12 +50,7 @@
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
-    "dist",
-    "src",
-    "!src/**/test/**",
-    "!src/**/*.test.ts",
-    "!src/**/*.test.tsx",
-    "!src/**/*.test-d.ts"
+    "dist"
   ],
   "browserslist": "extends @sanity/browserslist-config",
   "dependencies": {

package/src/client.ts

@@ -1,3 +0,0 @@
-export type * from '@sanity/client'
-export {createClient, unstable__adapter, unstable__environment} from '@sanity/client'
-export {stegaClean} from '@sanity/client/stega'

package/src/create-data-attribute.ts

@@ -1,5 +0,0 @@
-export {
-  type CreateDataAttribute,
-  createDataAttribute,
-  type CreateDataAttributeProps,
-} from '@sanity/visual-editing/create-data-attribute'

package/src/draft-mode/define-enable-draft-mode.ts

@@ -1,102 +0,0 @@
-import type {SanityClient} from '@sanity/client'
-import {validatePreviewUrl} from '@sanity/preview-url-secret'
-import {perspectiveCookieName} from '@sanity/preview-url-secret/constants'
-import {cookies, draftMode} from 'next/headers'
-import {redirect} from 'next/navigation'
-
-/**
- * @public
- */
-export interface DefineEnableDraftModeOptions {
-  client: SanityClient
-  /**
-   * Force secure cookies in development mode.
-   * Enable this when using Next.js --experimental-https flag.
-   * This option has no effect in production (cookies are always secure).
-   * @defaultValue false
-   */
-  secureDevMode?: boolean
-}
-
-/**
- * @public
- */
-export interface EnableDraftMode {
-  GET: (request: Request) => Promise<Response>
-}
-
-/**
- * Sets up an API route for enabling draft mode, can be paired with the `previewUrl.previewMode.enable` in `sanity/presentation`.
- * Can also be used with `sanity-plugin-iframe-pane`.
- * @example
- * ```ts
- * // src/app/api/draft-mode/enable/route.ts
- *
- * import { defineEnableDraftMode } from "next-sanity/draft-mode";
- * import { client } from "@/sanity/lib/client";
- *
- * export const { GET } = defineEnableDraftMode({
- *   client: client.withConfig({ token: process.env.SANITY_API_READ_TOKEN }),
- * });
- * ```
- *
- * @public
- */
-export function defineEnableDraftMode(options: DefineEnableDraftModeOptions): EnableDraftMode {
-  const {client} = options
-  return {
-    GET: async (request: Request) => {
-      // eslint-disable-next-line no-warning-comments
-      // @TODO check if already in draft mode at a much earlier stage, and skip validation
-
-      const {
-        isValid,
-        redirectTo = '/',
-        studioPreviewPerspective,
-      } = await validatePreviewUrl(client, request.url)
-      if (!isValid) {
-        return new Response('Invalid secret', {status: 401})
-      }
-
-      const draftModeStore = await draftMode()
-
-      // Let's enable draft mode if it's not already enabled
-      if (!draftModeStore.isEnabled) {
-        draftModeStore.enable()
-      }
-
-      const isProduction = process.env.NODE_ENV === 'production'
-
-      // We can't auto-detect HTTPS in dev due to Next.js limitations,
-      // so we need an explicit option
-      const isSecure = isProduction || (options.secureDevMode ?? false)
-
-      // Override cookie header for draft mode for usage in live-preview
-      // https://github.com/vercel/next.js/issues/49927
-      const cookieStore = await cookies()
-      const cookie = cookieStore.get('__prerender_bypass')!
-      cookieStore.set({
-        name: '__prerender_bypass',
-        value: cookie?.value,
-        httpOnly: true,
-        path: '/',
-        secure: isSecure,
-        sameSite: isSecure ? 'none' : 'lax',
-      })
-
-      if (studioPreviewPerspective) {
-        cookieStore.set({
-          name: perspectiveCookieName,
-          value: studioPreviewPerspective,
-          httpOnly: true,
-          path: '/',
-          secure: isSecure,
-          sameSite: isSecure ? 'none' : 'lax',
-        })
-      }
-
-      // the `redirect` function throws, and eventually returns a Promise<Response>. TSC doesn't "see" that so we have to tell it
-      return redirect(redirectTo) as Promise<Response>
-    },
-  }
-}

package/src/draft-mode/index.ts

@@ -1 +0,0 @@
-export * from './define-enable-draft-mode'

package/src/experimental/client-components/PresentationComlink.tsx

@@ -1,73 +0,0 @@
-import type {ClientPerspective} from '@sanity/client'
-import {createNode, createNodeMachine} from '@sanity/comlink'
-import {setPerspectiveCookie} from 'next-sanity/live/server-actions'
-import {
-  createCompatibilityActors,
-  type LoaderControllerMsg,
-  type LoaderNodeMsg,
-} from '@sanity/presentation-comlink'
-import {useRouter} from 'next/navigation'
-import {startTransition, useEffect, useEffectEvent} from 'react'
-import {
-  setComlink,
-  setComlinkClientConfig,
-  setPerspective,
-  perspective,
-} from '../../live/hooks/context'
-import {sanitizePerspective} from '../../live/utils'
-
-export default function PresentationComlink(props: {
-  projectId: string
-  dataset: string
-  draftModeEnabled: boolean
-}): React.JSX.Element | null {
-  const {projectId, dataset, draftModeEnabled} = props
-  const router = useRouter()
-
-  useEffect(() => {
-    setComlinkClientConfig(projectId, dataset)
-  }, [dataset, projectId])
-
-  const handlePerspectiveChange = useEffectEvent(
-    (_perspective: ClientPerspective, signal: AbortSignal) => {
-      const nextPerspective = sanitizePerspective(_perspective, 'drafts')
-      if (draftModeEnabled && perspective.toString() !== nextPerspective.toString()) {
-        setPerspective(nextPerspective)
-        startTransition(() =>
-          setPerspectiveCookie(nextPerspective)
-            .then(() => {
-              if (signal.aborted) return
-              router.refresh()
-            })
-            .catch((reason) =>
-              console.error('Failed to set the preview perspective cookie', reason),
-            ),
-        )
-      }
-    },
-  )
-
-  useEffect(() => {
-    const comlink = createNode<LoaderNodeMsg, LoaderControllerMsg>(
-      {name: 'loaders', connectTo: 'presentation'},
-      createNodeMachine<LoaderNodeMsg, LoaderControllerMsg>().provide({
-        actors: createCompatibilityActors<LoaderNodeMsg>(),
-      }),
-    )
-
-    let controller: AbortController | undefined
-    comlink.on('loader/perspective', (data) => {
-      controller?.abort()
-      controller = new AbortController()
-      handlePerspectiveChange(data.perspective, controller.signal)
-    })
-
-    const stop = comlink.start()
-    setComlink(comlink)
-    return () => {
-      stop()
-    }
-  }, [])
-
-  return null
-}

package/src/experimental/client-components/live.tsx

@@ -1,326 +0,0 @@
-'use client'
-
-import {
-  createClient,
-  type ClientPerspective,
-  type LiveEvent,
-  type LiveEventGoAway,
-  type SyncTag,
-} from '@sanity/client'
-import {isMaybePresentation, isMaybePreviewWindow} from '@sanity/presentation-comlink'
-import dynamic from 'next/dynamic'
-import {useRouter} from 'next/navigation'
-import {useEffect, useMemo, useRef, useState, useEffectEvent} from 'react'
-import {setEnvironment, setPerspective} from '../../live/hooks/context'
-import {isCorsOriginError} from '../../isCorsOriginError'
-import type {SanityClientConfig} from '../types'
-import {sanitizePerspective} from '../../live/utils'
-import {PUBLISHED_SYNC_TAG_PREFIX, type DRAFT_SYNC_TAG_PREFIX} from '../constants'
-
-const PresentationComlink = dynamic(() => import('./PresentationComlink'), {ssr: false})
-const RefreshOnMount = dynamic(() => import('../../live/client-components/live/RefreshOnMount'), {
-  ssr: false,
-})
-const RefreshOnFocus = dynamic(() => import('../../live/client-components/live/RefreshOnFocus'), {
-  ssr: false,
-})
-const RefreshOnReconnect = dynamic(
-  () => import('../../live/client-components/live/RefreshOnReconnect'),
-  {ssr: false},
-)
-
-/**
- * @alpha CAUTION: This API does not follow semver and could have breaking changes in future minor releases.
- */
-export interface SanityLiveProps {
-  config: SanityClientConfig
-  draftModeEnabled: boolean
-  refreshOnMount?: boolean
-  refreshOnFocus?: boolean
-  refreshOnReconnect?: boolean
-  requestTag: string | undefined
-  /**
-   * Handle errors from the Live Events subscription.
-   * By default it's reported using `console.error`, you can override this prop to handle it in your own way.
-   */
-  onError?: (error: unknown) => void
-  intervalOnGoAway?: number | false
-  onGoAway?: (event: LiveEventGoAway, intervalOnGoAway: number | false) => void
-  revalidateSyncTags: (
-    tags: `${typeof PUBLISHED_SYNC_TAG_PREFIX | typeof DRAFT_SYNC_TAG_PREFIX}${SyncTag}`[],
-  ) => Promise<void | 'refresh'>
-  resolveDraftModePerspective: () => Promise<ClientPerspective>
-}
-
-function handleError(error: unknown) {
-  /* eslint-disable no-console */
-  if (isCorsOriginError(error)) {
-    console.warn(
-      `Sanity Live is unable to connect to the Sanity API as the current origin - ${window.origin} - is not in the list of allowed CORS origins for this Sanity Project.`,
-      error.addOriginUrl && `Add it here:`,
-      error.addOriginUrl?.toString(),
-    )
-  } else {
-    console.error(error)
-  }
-  /* eslint-enable no-console */
-}
-
-function handleOnGoAway(event: LiveEventGoAway, intervalOnGoAway: number | false) {
-  /* eslint-disable no-console */
-  if (intervalOnGoAway) {
-    console.warn(
-      'Sanity Live connection closed, switching to long polling set to a interval of',
-      intervalOnGoAway / 1000,
-      'seconds and the server gave this reason:',
-      event.reason,
-    )
-  } else {
-    console.error(
-      'Sanity Live connection closed, automatic revalidation is disabled, the server gave this reason:',
-      event.reason,
-    )
-  }
-  /* eslint-enable no-console */
-}
-
-/**
- * @alpha CAUTION: This API does not follow semver and could have breaking changes in future minor releases.
- */
-export default function SanityLive(props: SanityLiveProps): React.JSX.Element | null {
-  const {
-    config,
-    draftModeEnabled,
-    refreshOnMount = false,
-    refreshOnFocus = draftModeEnabled
-      ? false
-      : typeof window === 'undefined'
-        ? true
-        : window.self === window.top,
-    refreshOnReconnect = true,
-    intervalOnGoAway = 30_000,
-    requestTag = 'next-loader.live',
-    onError = handleError,
-    onGoAway = handleOnGoAway,
-    revalidateSyncTags,
-    resolveDraftModePerspective,
-  } = props
-  const {projectId, dataset, apiHost, apiVersion, useProjectHostname, token, requestTagPrefix} =
-    config
-
-  const client = useMemo(
-    () =>
-      createClient({
-        projectId,
-        dataset,
-        apiHost,
-        apiVersion,
-        useProjectHostname,
-        ignoreBrowserTokenWarning: true,
-        token,
-        useCdn: false,
-        requestTagPrefix,
-      }),
-    [apiHost, apiVersion, dataset, projectId, requestTagPrefix, token, useProjectHostname],
-  )
-  const [longPollingInterval, setLongPollingInterval] = useState<number | false>(false)
-  const [resolvedInitialPerspective, setResolvedInitialPerspective] = useState(false)
-
-  /**
-   * 1. Handle Live Events and call revalidateTag or router.refresh when needed
-   */
-  const router = useRouter()
-  const handleLiveEvent = useEffectEvent((event: LiveEvent) => {
-    if (process.env.NODE_ENV !== 'production' && event.type === 'welcome') {
-      // eslint-disable-next-line no-console
-      console.info(
-        'Sanity is live with',
-        token
-          ? 'automatic revalidation for draft content changes as well as published content'
-          : draftModeEnabled
-            ? 'automatic revalidation for only published content. Provide a `browserToken` to `defineLive` to support draft content outside of Presentation Tool.'
-            : 'automatic revalidation of published content',
-      )
-      // Disable long polling when welcome event is received, this is a no-op if long polling is already disabled
-      setLongPollingInterval(false)
-    } else if (event.type === 'message') {
-      void revalidateSyncTags(
-        event.tags.map((tag: SyncTag) => `${PUBLISHED_SYNC_TAG_PREFIX}${tag}` as const),
-      ).then((result) => {
-        if (result === 'refresh') router.refresh()
-      })
-    } else if (event.type === 'restart' || event.type === 'reconnect') {
-      router.refresh()
-    } else if (event.type === 'goaway') {
-      onGoAway(event, intervalOnGoAway)
-      setLongPollingInterval(intervalOnGoAway)
-    }
-  })
-  // @TODO previous version that handle both published and draft events
-  // useEffect(() => {
-  //   const subscription = client.live.events({includeDrafts: !!token, tag: requestTag}).subscribe({
-  //     next: handleLiveEvent,
-  //     error: (err: unknown) => {
-  //       onError(err)
-  //     },
-  //   })
-  //   return () => subscription.unsubscribe()
-  // }, [client.live, onError, requestTag, token])
-  useEffect(() => {
-    const subscription = client.live.events({tag: requestTag}).subscribe({
-      next: handleLiveEvent,
-      error: (err: unknown) => {
-        onError(err)
-      },
-    })
-    return () => subscription.unsubscribe()
-  }, [client.live, onError, requestTag, token])
-
-  /**
-   * Handle live events for drafts differently, only use it to trigger refreshes, don't expire the cache
-   */
-  const handleLiveDraftEvent = useEffectEvent((event: LiveEvent) => {
-    if (event.type === 'message') {
-      // Just refresh, due to cache bypass in draft mode it'll fetch fresh content (though we wish cache worked as in production)
-      // @TODO if draft content is published, then this extra refresh is unnecessary, it's tricky to check since `event.id` are different on the two EventSource connections
-      router.refresh()
-    }
-  })
-  useEffect(() => {
-    if (!token) return
-    const subscription = client.live.events({includeDrafts: !!token, tag: requestTag}).subscribe({
-      next: handleLiveDraftEvent,
-      error: (err: unknown) => {
-        onError(err)
-      },
-    })
-    return () => subscription.unsubscribe()
-  }, [client.live, onError, requestTag, token])
-
-  /**
-   * 2. Notify what perspective we're in, when in Draft Mode
-   */
-  useEffect(() => {
-    if (resolvedInitialPerspective) return undefined
-
-    if (!draftModeEnabled) {
-      setResolvedInitialPerspective(true)
-      setPerspective('unknown')
-      return undefined
-    }
-
-    const controller = new AbortController()
-    resolveDraftModePerspective()
-      .then((perspective) => {
-        if (controller.signal.aborted) return
-        setResolvedInitialPerspective(true)
-        setPerspective(sanitizePerspective(perspective, 'drafts'))
-      })
-      .catch((err) => {
-        if (controller.signal.aborted) return
-        console.error('Failed to resolve draft mode perspective', err)
-        setResolvedInitialPerspective(true)
-        setPerspective('unknown')
-      })
-    return () => controller.abort()
-  }, [draftModeEnabled, resolveDraftModePerspective, resolvedInitialPerspective])
-
-  const [loadComlink, setLoadComlink] = useState(false)
-  /**
-   * 3. Notify what environment we're in, when in Draft Mode
-   */
-  useEffect(() => {
-    // If we might be in Presentation Tool, then skip detecting here as it's handled later
-    if (isMaybePresentation()) return
-
-    // If we're definitely not in Presentation Tool, then we can set the environment as stand-alone live preview
-    // if we have both a browser token, and draft mode is enabled
-    if (draftModeEnabled && token) {
-      setEnvironment('live')
-      return
-    }
-    // If we're in draft mode, but don't have a browser token, then we're in static mode
-    // which means that published content is still live, but draft changes likely need manual refresh
-    if (draftModeEnabled) {
-      setEnvironment('static')
-      return
-    }
-
-    // Fallback to `unknown` otherwise, as we simply don't know how it's setup
-    setEnvironment('unknown')
-    return
-  }, [draftModeEnabled, token])
-
-  /**
-   * 4. If Presentation Tool is detected, load up the comlink and integrate with it
-   */
-  useEffect(() => {
-    if (!isMaybePresentation()) return
-    const controller = new AbortController()
-    // Wait for a while to see if Presentation Tool is detected, before assuming the env to be stand-alone live preview
-    const timeout = setTimeout(() => setEnvironment('live'), 3_000)
-    window.addEventListener(
-      'message',
-      ({data}: MessageEvent<unknown>) => {
-        if (
-          data &&
-          typeof data === 'object' &&
-          'domain' in data &&
-          data.domain === 'sanity/channels' &&
-          'from' in data &&
-          data.from === 'presentation'
-        ) {
-          clearTimeout(timeout)
-          setEnvironment(isMaybePreviewWindow() ? 'presentation-window' : 'presentation-iframe')
-          setLoadComlink(true)
-          controller.abort()
-        }
-      },
-      {signal: controller.signal},
-    )
-    return () => {
-      clearTimeout(timeout)
-      controller.abort()
-    }
-  }, [])
-
-  /**
-   * 5. Warn if draft mode is being disabled
-   * @TODO move logic into PresentationComlink, or maybe VisualEditing?
-   */
-  const draftModeEnabledWarnRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
-  useEffect(() => {
-    if (!draftModeEnabled) return
-    clearTimeout(draftModeEnabledWarnRef.current)
-    return () => {
-      draftModeEnabledWarnRef.current = setTimeout(() => {
-        // eslint-disable-next-line no-console
-        console.warn('Sanity Live: Draft mode was enabled, but is now being disabled')
-      })
-    }
-  }, [draftModeEnabled])
-
-  /**
-   * 6. Handle switching to long polling when needed
-   */
-  useEffect(() => {
-    if (!longPollingInterval) return
-    const interval = setInterval(() => router.refresh(), longPollingInterval)
-    return () => clearInterval(interval)
-  }, [longPollingInterval, router])
-
-  return (
-    <>
-      {draftModeEnabled && loadComlink && resolvedInitialPerspective && (
-        <PresentationComlink
-          projectId={projectId!}
-          dataset={dataset!}
-          draftModeEnabled={draftModeEnabled}
-        />
-      )}
-      {!draftModeEnabled && refreshOnMount && <RefreshOnMount />}
-      {!draftModeEnabled && refreshOnFocus && <RefreshOnFocus />}
-      {!draftModeEnabled && refreshOnReconnect && <RefreshOnReconnect />}
-    </>
-  )
-}

package/src/experimental/constants.ts

@@ -1,2 +0,0 @@
-export const PUBLISHED_SYNC_TAG_PREFIX = 'sp:'
-export const DRAFT_SYNC_TAG_PREFIX = 'sd:'