chore(deps): update dependency eslint to v9 (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",
@@ -42,7 +42,7 @@
   "devDependencies": {
     "@next/bundle-analyzer": "15.0.0-canary.196",
     "@repo/prettier-config": "workspace:*",
-    "eslint": "^8.57.1",
+    "eslint": "^9.12.0",
     "eslint-config-next": "15.0.0-canary.196",
     "eslint-plugin-react-compiler": "0.0.0-experimental-fa06e2c-20241016"
   }

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",
@@ -36,7 +36,7 @@
     "@sanity/visual-editing": "workspace:*",
     "@types/react": "^18.3.11",
     "autoprefixer": "10.4.20",
-    "eslint": "^8.57.1",
+    "eslint": "^9.12.0",
     "eslint-config-next": "14.2.15",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",

apps/next/package.json

@@ -28,10 +28,10 @@
     "@vercel/stega": "0.1.2",
     "@vercel/toolbar": "^0.1.22",
     "autoprefixer": "10.4.20",
-    "eslint": "^8.57.1",
+    "eslint": "^9.12.0",
     "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

@@ -31,10 +31,10 @@
     "@types/react-dom": "^18.3.1",
     "autoprefixer": "10.4.20",
     "clsx": "^2.1.1",
-    "eslint": "^8.57.1",
+    "eslint": "^9.12.0",
     "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/remix/package.json

@@ -33,7 +33,7 @@
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.1",
     "@types/source-map-support": "^0.5.10",
-    "eslint": "^8.57.1",
+    "eslint": "^9.12.0",
     "tailwindcss": "^3.4.14",
     "typescript": "5.6.3",
     "vite": "^5.4.9",

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"
       ]
     }
   }

apps/svelte/package.json

@@ -32,7 +32,7 @@
     "@types/cookie": "^0.6.0",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
-    "eslint": "^8.57.1",
+    "eslint": "^9.12.0",
     "eslint-plugin-svelte": "^2.45.1",
     "postcss": "8.4.47",
     "svelte": "^4.2.19",

packages/comlink/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/comlink",
-  "version": "0.0.2-canary.62",
+  "version": "0.0.2-canary.67",
   "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.69",
   "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.69",
   "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.53",
   "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)