chore(deps): update dependency zx to v8.1.9 (canary)

.github/workflows/release-canary.yml

@@ -20,6 +20,8 @@ jobs:
       TURBO_TEAM: ${{ vars.TURBO_TEAM }}
       # Enable the new QRCode Preview URL menu on canary versions
       PRESENTATION_ENABLE_QRCODE: true
+      # The Live Draft Content API is much faster than the legacy Listen API based approach for loader live mode
+      PRESENTATION_ENABLE_LIVE_DRAFT_EVENTS: true
     steps:
       - uses: actions/create-github-app-token@v1
         id: generate-token

.github/workflows/release-please.yml

@@ -26,6 +26,8 @@ jobs:
       TURBO_TEAM: ${{ vars.TURBO_TEAM }}
       # Disable the new QRCode feature on production builds
       PRESENTATION_ENABLE_QRCODE: false
+      # The Live Draft Content API is only available on vX atm
+      PRESENTATION_ENABLE_LIVE_DRAFT_EVENTS: false
     steps:
       - uses: actions/create-github-app-token@v1
         id: generate-token

apps/astro/package.json

@@ -15,15 +15,15 @@
     "@astrojs/check": "^0.9.4",
     "@astrojs/react": "^3.6.2",
     "@astrojs/tailwind": "^5.1.2",
-    "@astrojs/vercel": "^7.8.1",
+    "@astrojs/vercel": "^7.8.2",
     "@repo/env": "workspace:*",
     "@repo/studio-url": "workspace:*",
     "@sanity/astro": "^3.1.6",
     "@sanity/client": "^6.22.2",
     "@sanity/image-url": "^1.0.2",
     "@sanity/visual-editing": "workspace:*",
     "@vercel/stega": "^0.1.2",
-    "astro": "^4.16.5",
+    "astro": "^4.16.6",
     "astro-portabletext": "^0.10.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

apps/live-next/package.json

@@ -31,7 +31,7 @@
     "date-fns": "^4.1.0",
     "framer-motion": "12.0.0-alpha.1",
     "next": "15.0.0-canary.196",
-    "next-sanity": "9.7.0-canary.17",
+    "next-sanity": "9.7.0-canary.18",
     "postcss": "^8.4.47",
     "react": "19.0.0-rc-fb9a90fa48-20240614",
     "react-dom": "19.0.0-rc-fb9a90fa48-20240614",

apps/next-with-i18n/package.json

@@ -25,7 +25,7 @@
     "classnames": "2.5.1",
     "lucide-react": "^0.453.0",
     "next": "14.2.15",
-    "next-sanity": "^9.5.4",
+    "next-sanity": "^9.5.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "sanity": "^3.61.0",

apps/next/package.json

@@ -31,7 +31,7 @@
     "eslint": "^8.57.1",
     "eslint-config-next": "14.2.15",
     "next": "14.2.15",
-    "next-sanity": "9.7.0-canary.17",
+    "next-sanity": "9.7.0-canary.18",
     "postcss": "8.4.47",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

apps/nuxt/package.json

@@ -11,7 +11,7 @@
   "prettier": "@repo/prettier-config",
   "dependencies": {
     "@nuxtjs/sanity": "^1.12.2",
-    "@nuxtjs/tailwindcss": "^6.12.1",
+    "@nuxtjs/tailwindcss": "^6.12.2",
     "@repo/env": "workspace:*",
     "@repo/studio-url": "workspace:*",
     "@sanity/client": "^6.22.2",

apps/page-builder-demo/package.json

@@ -34,7 +34,7 @@
     "eslint": "^8.57.1",
     "eslint-config-next": "14.2.15",
     "next": "14.2.15",
-    "next-sanity": "9.7.0-canary.17",
+    "next-sanity": "9.7.0-canary.18",
     "postcss": "8.4.47",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

apps/page-builder-demo/src/components/page/Page.tsx

@@ -38,38 +38,42 @@ export function Page(props: {data: PageData}) {
         path: 'sections',
       }).toString()}
     >
-      {sections?.map((section) => {
-        if (section._type === 'hero') {
+      {sections?.map((section: PageSection | null) => {
+        if (section?._type === 'hero') {
           return <Hero page={data} key={section._key} section={section} />
         }
 
-        if (section._type === 'intro') {
+        if (section?._type === 'intro') {
           return <Intro page={data} key={section._key} section={section} />
         }
 
-        if (section._type === 'featuredProducts') {
+        if (section?._type === 'featuredProducts') {
           return <FeaturedProducts page={data} key={section._key} section={section} />
         }
 
-        if (section._type === 'featureHighlight') {
+        if (section?._type === 'featureHighlight') {
           return <FeatureHighlight page={data} key={section._key} section={section} />
         }
 
-        if (section._type === 'section') {
+        if (section?._type === 'section') {
           return <Section page={data} key={section._key} section={section} />
         }
 
         return (
           <div
-            data-sanity={dataAttribute({
-              id: data._id,
-              type: data._type,
-              path: `sections[_key=="${(section as any)._key}"]`,
-            }).toString()}
+            data-sanity={
+              section
+                ? dataAttribute({
+                    id: data._id,
+                    type: data._type,
+                    path: `sections[_key=="${(section as any)._key}"]`,
+                  }).toString()
+                : undefined
+            }
             className="bg-red-50 p-5 font-mono text-sm text-red-600 dark:bg-red-950 dark:text-red-400"
-            key={(section as any)._key}
+            key={(section as any)?._key}
           >
-            <div>Unknown section type: {(section as any)._type}</div>
+            <div>Unknown section type: {(section as any)?._type}</div>
             <pre>{JSON.stringify(section, null, 2)}</pre>
           </div>
         )

apps/studio/.env.local

@@ -1,5 +1,7 @@
 # Test the new QRCode Preview URL menu
 SANITY_STUDIO_PRESENTATION_ENABLE_QRCODE=true
+# Test the new Live Draft Content API
+SANITY_STUDIO_PRESENTATION_ENABLE_LIVE_DRAFT_EVENTS=true
 
 # If you are opening a PR you can paste these variables into: https://vercel.com/sanity-sandbox/visual-editing-studio/settings/environment-variables
 # and then use "Preview (Select custom branch)" and batch add vars so that changes in the Studio side, and app side, can be tested together:

apps/studio/turbo.json

@@ -16,7 +16,8 @@
         "SANITY_STUDIO_SVELTE_PREVIEW_URL",
         "SANITY_STUDIO_VERCEL_BRANCH_URL",
         "SANITY_STUDIO_VERCEL_ENV",
-        "SANITY_STUDIO_PRESENTATION_ENABLE_QRCODE"
+        "SANITY_STUDIO_PRESENTATION_ENABLE_QRCODE",
+        "SANITY_STUDIO_PRESENTATION_ENABLE_LIVE_DRAFT_EVENTS"
       ],
       "outputs": [".sanity/**", "dist/**"]
     },
@@ -32,7 +33,8 @@
         "SANITY_STUDIO_REMIX_PREVIEW_URL",
         "SANITY_STUDIO_STEGA_DEBUG",
         "SANITY_STUDIO_SVELTE_PREVIEW_URL",
-        "SANITY_STUDIO_PRESENTATION_ENABLE_QRCODE"
+        "SANITY_STUDIO_PRESENTATION_ENABLE_QRCODE",
+        "SANITY_STUDIO_PRESENTATION_ENABLE_LIVE_DRAFT_EVENTS"
       ]
     }
   }

package.json

@@ -45,7 +45,7 @@
     "pretty-quick": "^4.0.0",
     "turbo": "2.1.3",
     "typescript": "5.6.3",
-    "zx": "8.1.6"
+    "zx": "8.1.9"
   },
   "packageManager": "[email protected]",
   "pnpm": {

packages/comlink/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/comlink",
-  "version": "0.0.2-canary.62",
+  "version": "0.0.2-canary.68",
   "keywords": [
     "sanity.io",
     "postmessage"

packages/core-loader/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/core-loader",
-  "version": "1.6.24-canary.64",
+  "version": "1.6.24-canary.70",
   "homepage": "https://github.com/sanity-io/visual-editing/tree/main/packages/core-loader#readme",
   "bugs": {
     "url": "https://github.com/sanity-io/visual-editing/issues"

packages/insert-menu/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/insert-menu",
-  "version": "1.0.10-canary.64",
+  "version": "1.0.10-canary.70",
   "description": "",
   "keywords": [],
   "homepage": "https://github.com/sanity-io/visual-editing/tree/main/packages/insert-menu#readme",

packages/next-loader/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/next-loader",
-  "version": "0.0.1-canary.48",
+  "version": "0.0.1-canary.54",
   "homepage": "https://github.com/sanity-io/visual-editing/tree/main/packages/next-loader#readme",
   "bugs": {
     "url": "https://github.com/sanity-io/visual-editing/issues"
@@ -98,6 +98,7 @@
     "@repo/visual-editing-helpers": "workspace:*",
     "@sanity/client": "^6.22.2",
     "@sanity/pkg-utils": "6.11.3",
+    "@sanity/preview-url-secret": "workspace:*",
     "@types/react": "^18.3.11",
     "eslint": "^8.57.1",
     "fast-deep-equal": "3.1.3",

packages/next-loader/src/client-components/live-stream/SanityLiveStream.tsx

@@ -7,7 +7,7 @@ import {
 } from '@sanity/client'
 import {stegaEncodeSourceMap} from '@sanity/client/stega'
 import isEqual from 'fast-deep-equal'
-import {startTransition, useCallback, useEffect, useState, useSyncExternalStore} from 'react'
+import {useCallback, useEffect, useState, useSyncExternalStore} from 'react'
 import * as React from 'react'
 import {useEffectEvent} from 'use-effect-event'
 import {comlinkListeners, comlink as comlinkSnapshot} from '../../hooks/context'
@@ -71,10 +71,7 @@ export default function SanityLiveStream(props: SanityLiveStreamProps): React.JS
     })
   })
   const handleQueryChange = useEffectEvent(
-    (
-      event: Extract<LoaderControllerMsg, {type: 'loader/query-change'}>['data'],
-      signal: AbortSignal,
-    ) => {
+    (event: Extract<LoaderControllerMsg, {type: 'loader/query-change'}>['data']) => {
       if (
         isEqual(
           {
@@ -114,38 +111,35 @@ export default function SanityLiveStream(props: SanityLiveStreamProps): React.JS
         //   ),
         // )
         // eslint-disable-next-line no-console
-        console.log('rendering with server action: render children start')
+        console.groupCollapsed('rendering with server action')
         ;(
           props.children({
             data,
             sourceMap: resultSourceMap!,
             tags: tags || [],
           }) as Promise<React.JSX.Element>
-        ).then(
-          (children) => {
-            if (signal.aborted) return
-            // eslint-disable-next-line no-console
-            console.log('rendering with server action: render children end, setting state')
-            startTransition(() => setChildren(children))
-          },
-          (reason: unknown) => {
-            if (signal.aborted) return
-            // eslint-disable-next-line no-console
-            console.error('rendering with server action: render children error', reason)
-          },
         )
+          .then(
+            (children) => {
+              // eslint-disable-next-line no-console
+              console.log('setChildren(children)')
+              // startTransition(() => setChildren(children))
+              setChildren(children)
+            },
+            (reason: unknown) => {
+              // eslint-disable-next-line no-console
+              console.error('rendering with server action: render children error', reason)
+            },
+          )
+          // eslint-disable-next-line no-console
+          .finally(() => console.groupEnd())
       }
     },
   )
   useEffect(() => {
     if (!comlink) return
 
-    let controller: AbortController | undefined
-    const unsubscribe = comlink.on('loader/query-change', (event) => {
-      controller?.abort()
-      controller = new AbortController()
-      handleQueryChange(event, controller.signal)
-    })
+    const unsubscribe = comlink.on('loader/query-change', handleQueryChange)
     const interval = setInterval(() => handleQueryHeartbeat(comlink), LISTEN_HEARTBEAT_INTERVAL)
     return () => {
       clearInterval(interval)

packages/next-loader/src/client-components/live/SanityLive.tsx

@@ -22,13 +22,15 @@ export interface SanityLiveProps
     | 'useProjectHostname'
     | 'token'
     | 'ignoreBrowserTokenWarning'
+    | 'requestTagPrefix'
   > {
   // handleDraftModeAction: (secret: string) => Promise<void | string>
   draftModeEnabled: boolean
   draftModePerspective?: ClientPerspective
   refreshOnMount?: boolean
   refreshOnFocus?: boolean
   refreshOnReconnect?: boolean
+  tag: string
 }
 
 /**
@@ -43,12 +45,14 @@ export function SanityLive(props: SanityLiveProps): React.JSX.Element | null {
     useProjectHostname,
     ignoreBrowserTokenWarning,
     token,
+    requestTagPrefix,
     // handleDraftModeAction,
     draftModeEnabled,
     draftModePerspective,
     refreshOnMount = false,
     refreshOnFocus = typeof window === 'undefined' ? true : window.self === window.top,
     refreshOnReconnect = true,
+    tag,
   } = props
 
   const [error, setError] = useState<unknown>(null)
@@ -85,15 +89,29 @@ export function SanityLive(props: SanityLiveProps): React.JSX.Element | null {
         ignoreBrowserTokenWarning,
         token,
         useCdn: false,
+        requestTagPrefix,
       }),
-    [apiHost, apiVersion, dataset, ignoreBrowserTokenWarning, projectId, token, useProjectHostname],
+    [
+      apiHost,
+      apiVersion,
+      dataset,
+      ignoreBrowserTokenWarning,
+      projectId,
+      requestTagPrefix,
+      token,
+      useProjectHostname,
+    ],
   )
 
   useEffect(() => {
     // @TODO move this validation logic to `@sanity/client`
     // and include CORS detection https://github.com/sanity-io/sanity/blob/9848f2069405e5d06f82a61a902f141e53099493/packages/sanity/src/core/store/_legacy/authStore/createAuthStore.ts#L92-L102
     const path = client.getDataUrl('live/events')
     const url = new URL(client.getUrl(path, false))
+    const preflightTag = [requestTagPrefix, tag, 'cors-preflight'].filter(Boolean).join('.')
+    if (preflightTag) {
+      url.searchParams.set('tag', preflightTag)
+    }
     if (token) {
       url.searchParams.set('includeDrafts', 'true')
     }
@@ -148,19 +166,25 @@ export function SanityLive(props: SanityLiveProps): React.JSX.Element | null {
       }
     })
     return () => controller.abort()
-  }, [client, token])
+  }, [tag, client, requestTagPrefix, token])
 
   useEffect(() => {
-    const subscription = client.live.events(token ? {includeDrafts: true} : undefined).subscribe({
+    const subscription = client.live.events({includeDrafts: !!token, tag}).subscribe({
       next: (event) => {
         if (event.type === 'message') {
           revalidateSyncTags(event.tags)
+        } else if (event.type === 'reconnect') {
+          // eslint-disable-next-line no-console
+          console.log('TODO: handle reconnect')
+        } else if (event.type === 'restart') {
+          // eslint-disable-next-line no-console
+          console.log('TODO: handle restart')
         }
       },
       error: setError,
     })
     return () => subscription.unsubscribe()
-  }, [client, token])
+  }, [client, tag, token])
 
   /**
    * 2. Notify what perspective we're in, when in Draft Mode