fix!: lazy load live mode (#281)

apps/next/src/app/shoes/VisualEditing.tsx

@@ -50,7 +50,7 @@ export default function VisualEditing() {
     }
   }, [pathname, searchParams])
 
-  useLiveMode()
+  useLiveMode({ allowStudioOrigin: studioUrl })
 
   return null
 }

apps/next/src/app/shoes/useQuery.ts

@@ -20,7 +20,4 @@ const client = createClient({
   },
 })
 
-export const { useQuery, useLiveMode } = createQueryStore({
-  client,
-  allowStudioOrigin: studioUrl,
-})
+export const { useQuery, useLiveMode } = createQueryStore({ client })

apps/next/src/components/VisualEditing.tsx

@@ -45,7 +45,7 @@ export default function VisualEditing() {
     router?.replace,
   ])
 
-  useLiveMode()
+  useLiveMode({ allowStudioOrigin: studioUrl })
 
   return null
 }

apps/nuxt/composables/useQuery.ts

@@ -1,10 +1,6 @@
 import { createQueryStore } from '@sanity/nuxt-loader'
-import { studioUrl } from 'apps-common/env'
 import { getClient } from '@/utils'
 
 const client = getClient()
 
-export const { useQuery, useLiveMode } = createQueryStore({
-  client,
-  allowStudioOrigin: studioUrl,
-})
+export const { useQuery, enableLiveMode } = createQueryStore({ client })

apps/nuxt/pages/shoes/index.vue

@@ -108,7 +108,7 @@ import { studioUrl, workspaces } from 'apps-common/env'
 import { formatCurrency } from 'apps-common/utils'
 import { shoesList, type ShoesListResult } from 'apps-common/queries'
 import { urlFor, urlForCrossDatasetReference } from '~/utils'
-import { useQuery, useLiveMode } from '~/composables/useQuery'
+import { useQuery, enableLiveMode } from '~/composables/useQuery'
 import { vSanity, wrapData, unwrapData } from '@sanity/nuxt-loader/directive'
 
 const { data, sourceMap, loading } = useQuery<ShoesListResult>(shoesList)
@@ -121,7 +121,11 @@ const products = computed(() => {
   )
 })
 
+let disableLiveMode: ReturnType<typeof enableLiveMode> | undefined
 onMounted(() => {
-  useLiveMode()
+  disableLiveMode = enableLiveMode({
+    allowStudioOrigin: studioUrl,
+  })
 })
+onUnmounted(() => disableLiveMode())
 </script>

apps/page-builder-demo/next.config.mjs

@@ -2,7 +2,6 @@ import withBundleAnalyzer from '@next/bundle-analyzer'
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  reactStrictMode: true,
   experimental: {
     logging: {
       level: 'verbose',

apps/page-builder-demo/src/app/VisualEditing.tsx

@@ -50,7 +50,7 @@ export default function VisualEditing() {
     }
   }, [pathname, searchParams])
 
-  useLiveMode()
+  useLiveMode({ allowStudioOrigin: studioUrl })
 
   return null
 }

apps/remix/app/VisualEditing.tsx

@@ -41,7 +41,7 @@ export default function VisualEditing() {
     }
   }, [location.hash, location.pathname, location.search])
 
-  useLiveMode()
+  useLiveMode({ allowStudioOrigin: studioUrl })
 
   return null
 }

apps/remix/app/useQuery.ts

@@ -1,10 +1,6 @@
 import { createQueryStore } from '@sanity/react-loader'
-import { studioUrl } from 'apps-common/env'
 import { getClient } from '~/utils'
 
 const client = getClient()
 
-export const { query, useQuery, useLiveMode } = createQueryStore({
-  client,
-  allowStudioOrigin: studioUrl,
-})
+export const { query, useQuery, useLiveMode } = createQueryStore({ client })

apps/remix/tsconfig.json

@@ -11,13 +11,14 @@
   ],
   "compilerOptions": {
     "skipLibCheck": true,
-    "lib": ["DOM", "DOM.Iterable", "ES2019"],
+    "lib": ["DOM", "DOM.Iterable", "ES2020"],
     "isolatedModules": true,
     "esModuleInterop": true,
     "jsx": "react-jsx",
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
-    "target": "ES2019",
+    "target": "ES2020",
+    "module": "ES2020",
     "strict": true,
     "allowJs": true,
     "forceConsistentCasingInFileNames": true,

package.config.ts

@@ -3,12 +3,12 @@ import { defineConfig } from '@sanity/pkg-utils'
 export default defineConfig({
   minify: false,
   extract: {
-    bundledPackages: ['channels', 'visual-editing-helpers', '@sanity/util'],
+    bundledPackages: ['channels', 'visual-editing-helpers'],
     rules: {
       'ae-forgotten-export': 'warn',
       'ae-incompatible-release-tags': 'warn',
-      'ae-missing-release-tag': 'warn',
       'ae-internal-missing-underscore': 'off',
+      'ae-missing-release-tag': 'warn',
     },
   },
   tsconfig: 'tsconfig.build.json',