@sanity/react-loader - npm Package Compare versions

Comparing version 1.3.1 to 1.4.0

CHANGELOG.md

@@ -24,2 +24,18 @@ # Changelog
 
+## [1.4.0](https://github.com/sanity-io/visual-editing/compare/react-loader-v1.3.1...react-loader-v1.4.0) (2023-12-08)
+
+
+### Features
+
+* add `encodeDataAttribute` to `useQuery` ([#506](https://github.com/sanity-io/visual-editing/issues/506)) ([3d85cb3](https://github.com/sanity-io/visual-editing/commit/3d85cb3ab518e90d181fd35aa2c584cff070fda1))
+
+
+### Dependencies
+
+* The following workspace dependencies were updated
+  * dependencies
+    * @sanity/core-loader bumped from 1.1.3 to 1.1.4
+  * devDependencies
+    * @sanity/visual-editing-helpers bumped from 0.1.2 to 0.1.3
+
 ## [1.3.1](https://github.com/sanity-io/visual-editing/compare/react-loader-v1.3.0...react-loader-v1.3.1) (2023-12-07)
@@ -26,0 +42,0 @@

dist/index.browser.js

@@ -1,1 +0,1 @@
-import{createQueryStore as e}from"@sanity/core-loader";import{useEffect as r,useMemo as t,useState as n,useCallback as o}from"react";import{encodeDataAttribute as i}from"@sanity/core-loader/encode-data-attribute";const c=o=>{const{createFetcherStore:i,enableLiveMode:c}=e({tag:"react-loader",...o}),s=function({createFetcherStore:e}){const o={};return(i,c=o,s={})=>{const a=t((()=>s.initial?{perspective:"published",...s.initial}:void 0),[s.initial]),u=t((()=>JSON.stringify(c)),[c]),[l,d]=n((()=>e(i,JSON.parse(u),a).value));return r((()=>{const r=e(i,JSON.parse(u),a).subscribe((e=>{d(e)}));return()=>r()}),[u,a,i]),l}}({createFetcherStore:i}),a=function({enableLiveMode:e}){return({allowStudioOrigin:t,client:n,onConnect:o,onDisconnect:i})=>{r((()=>{const r=e({allowStudioOrigin:t,client:n,onConnect:o,onDisconnect:i});return()=>r()}),[t,n,o,i])}}({enableLiveMode:c});return{loadQuery:()=>{throw new Error("The `loadQuery` function is server only.")},useQuery:s,setServerClient:()=>{throw new Error("The `setServerClient` function is server only.")},useLiveMode:a}},{loadQuery:s,setServerClient:a,useLiveMode:u,useQuery:l}=c({client:!1,ssr:!0});function d(e,r,t){return o((n=>i(e,r,t,n)),[e,r,t])}export{c as createQueryStore,s as loadQuery,a as setServerClient,d as useEncodeDataAttribute,u as useLiveMode,l as useQuery};//# sourceMappingURL=index.browser.js.map
+import{createQueryStore as e}from"@sanity/core-loader";import{useEffect as t,useCallback as r,useMemo as o,useState as n,useSyncExternalStore as i}from"react";import{encodeDataAttribute as s}from"@sanity/core-loader/encode-data-attribute";function c(e,t,o){return r((r=>{if(o)return s(e,t,o,r)}),[e,t,o])}const u=r=>{const{createFetcherStore:s,enableLiveMode:u}=e({tag:"react-loader",...r}),a=function(e){let t="object"==typeof e?e?.config().stega?.studioUrl:void 0;const r=t,o=new Set;return{subscribe:e=>(o.add(e),()=>o.delete(e)),getSnapshot:()=>t,getServerSnapshot:()=>r,setStudioUrl(e){t=e,o.forEach((e=>e()))}}}(r.client),l=function({createFetcherStore:e,studioUrlStore:r}){const s={};return(u,a=s,l={})=>{const d=o((()=>l.initial?{perspective:"published",...l.initial}:void 0),[l.initial]),S=o((()=>JSON.stringify(a)),[a]),[v,f]=n((()=>e(u,JSON.parse(S),d).value));t((()=>{const t=e(u,JSON.parse(S),d).subscribe((e=>{f(e)}));return()=>t()}),[S,d,u]);const p=i(r.subscribe,r.getSnapshot,r.getServerSnapshot),b=c(v.data,v.sourceMap,p);return o((()=>({...v,encodeDataAttribute:b})),[v,b])}}({createFetcherStore:s,studioUrlStore:a}),d=function({enableLiveMode:e,setStudioUrl:r}){return({allowStudioOrigin:o,client:n,onConnect:i,onDisconnect:s,studioUrl:c})=>{t((()=>{const t=e({allowStudioOrigin:o,client:n,onConnect:i,onDisconnect:s});return()=>t()}),[o,n,i,s]),t((()=>{r(c??"object"==typeof n?n?.config().stega?.studioUrl:void 0)}),[c,n])}}({enableLiveMode:u,setStudioUrl:a.setStudioUrl});return{loadQuery:()=>{throw new Error("The `loadQuery` function is server only.")},useQuery:l,setServerClient:()=>{throw new Error("The `setServerClient` function is server only.")},useLiveMode:d}},{loadQuery:a,setServerClient:l,useLiveMode:d,useQuery:S}=u({client:!1,ssr:!0});export{u as createQueryStore,a as loadQuery,l as setServerClient,c as useEncodeDataAttribute,d as useLiveMode,S as useQuery};//# sourceMappingURL=index.browser.js.map

dist/index.d.ts

@@ -62,3 +62,4 @@ import { ClientPerspective } from '@sanity/client'
       options?: UseQueryOptionsUndefinedInitial,
-    ): QueryStoreState<QueryResponseResult, QueryResponseError>
+    ): QueryStoreState<QueryResponseResult, QueryResponseError> &
+      WithEncodeDataAttribute
     <QueryResponseResult = unknown, QueryResponseError = unknown>(
@@ -73,3 +74,3 @@ query: string,
       data: QueryResponseResult
-    }
+    } & WithEncodeDataAttribute
   }
@@ -93,3 +94,3 @@ useLiveMode: UseLiveModeHook
   sourceMap: ContentSourceMap | undefined,
-  studioUrl: StudioUrl | ResolveStudioUrl,
+  studioUrl: StudioUrl | ResolveStudioUrl | undefined,
 ): EncodeDataAttributeCallback
@@ -99,3 +100,10 @@
 
-export declare type UseLiveModeHook = (options: EnableLiveModeOptions) => void
+export declare type UseLiveModeHook = (
+  options: EnableLiveModeOptions & {
+    /**
+     * Set this option to activate `encodeDataAttribute` on `useQuery` hooks when stega isn't used.
+     */
+    studioUrl?: StudioUrl | ResolveStudioUrl | undefined
+  },
+) => void
 
@@ -107,3 +115,4 @@ export declare const useQuery: {
     options?: UseQueryOptionsUndefinedInitial | undefined,
-  ): QueryStoreState<QueryResponseResult, QueryResponseError>
+  ): QueryStoreState<QueryResponseResult, QueryResponseError> &
+    WithEncodeDataAttribute
   <QueryResponseResult_1 = unknown, QueryResponseError_1 = unknown>(
@@ -118,3 +127,3 @@ query: string,
     data: QueryResponseResult_1
-  }
+  } & WithEncodeDataAttribute
 }
@@ -129,3 +138,4 @@
   options?: UseQueryOptions<QueryResponseResult>,
-) => QueryStoreState<QueryResponseResult, QueryResponseError>
+) => QueryStoreState<QueryResponseResult, QueryResponseError> &
+  WithEncodeDataAttribute
 
@@ -194,4 +204,8 @@ export declare interface UseQueryOptions<QueryResponseResult = unknown> {
 
+export declare type WithEncodeDataAttribute = {
+  encodeDataAttribute(path: StudioPathLike): string | undefined
+}
+
 export * from '@sanity/core-loader'
 
 export {}

dist/index.js

@@ -1,1 +0,1 @@
-import{createQueryStore as e}from"@sanity/core-loader";import{d as t,a as r}from"./_chunks/useEncodeDataAttribute-FfijgkCK.js";export{u as useEncodeDataAttribute}from"./_chunks/useEncodeDataAttribute-FfijgkCK.js";const s=s=>{const{createFetcherStore:n,setServerClient:a,enableLiveMode:o,unstable__cache:i,unstable__serverClient:u}=e({tag:"react-loader",...s});return{loadQuery:async(e,t={},r={})=>{const{perspective:s="published"}=r;if("undefined"!=typeof document)throw new Error("Cannot use `loadQuery` in a browser environment, you should use it inside a loader, getStaticProps, getServerSideProps, getInitialProps, or in a React Server Component.");if("published"!==s&&!u.instance)throw new Error('You cannot use other perspectives than "published" unless you set "ssr: true" and call "setServerClient" first.');if("previewDrafts"===s){if(!u.canPreviewDrafts)throw new Error('You cannot use "previewDrafts" unless you set a "token" in the "client" instance you\'re pasing to "setServerClient".');const r=u.instance.config().useCdn?u.instance.withConfig({useCdn:!1}):u.instance,{result:n,resultSourceMap:a}=await r.fetch(e,t,{filterResponse:!1,resultSourceMap:"withKeyArraySelector",perspective:s});return{data:n,sourceMap:a,perspective:s}}const{result:n,resultSourceMap:a}=await i.fetch(JSON.stringify({query:e,params:t}));return a?{data:n,sourceMap:a}:{data:n}},useQuery:t({createFetcherStore:n}),setServerClient:a,useLiveMode:r({enableLiveMode:o})}},{loadQuery:n,setServerClient:a,useLiveMode:o,useQuery:i}=s({client:!1,ssr:!0});export{s as createQueryStore,n as loadQuery,a as setServerClient,o as useLiveMode,i as useQuery};//# sourceMappingURL=index.js.map
+import{createQueryStore as e}from"@sanity/core-loader";import{d as r,a as t,b as s}from"./_chunks/defineUseQuery-FCDjrvHP.js";export{u as useEncodeDataAttribute}from"./_chunks/defineUseQuery-FCDjrvHP.js";const n=n=>{const{createFetcherStore:o,setServerClient:a,enableLiveMode:i,unstable__cache:u,unstable__serverClient:c}=e({tag:"react-loader",...n}),l=r(n.client);return{loadQuery:async(e,r={},t={})=>{const{perspective:s="published"}=t;if("undefined"!=typeof document)throw new Error("Cannot use `loadQuery` in a browser environment, you should use it inside a loader, getStaticProps, getServerSideProps, getInitialProps, or in a React Server Component.");if("published"!==s&&!c.instance)throw new Error('You cannot use other perspectives than "published" unless you set "ssr: true" and call "setServerClient" first.');if("previewDrafts"===s){if(!c.canPreviewDrafts)throw new Error('You cannot use "previewDrafts" unless you set a "token" in the "client" instance you\'re pasing to "setServerClient".');const t=c.instance.config().useCdn?c.instance.withConfig({useCdn:!1}):c.instance,{result:n,resultSourceMap:o}=await t.fetch(e,r,{filterResponse:!1,resultSourceMap:"withKeyArraySelector",perspective:s});return{data:n,sourceMap:o,perspective:s}}const{result:n,resultSourceMap:o}=await u.fetch(JSON.stringify({query:e,params:r}));return o?{data:n,sourceMap:o}:{data:n}},useQuery:t({createFetcherStore:o,studioUrlStore:l}),setServerClient:a,useLiveMode:s({enableLiveMode:i,setStudioUrl:l.setStudioUrl})}},{loadQuery:o,setServerClient:a,useLiveMode:i,useQuery:c}=n({client:!1,ssr:!0});export{n as createQueryStore,o as loadQuery,a as setServerClient,i as useLiveMode,c as useQuery};//# sourceMappingURL=index.js.map

dist/rsc/index.d.ts

@@ -62,3 +62,4 @@ import { ClientPerspective } from '@sanity/client'
       options?: UseQueryOptionsUndefinedInitial,
-    ): QueryStoreState<QueryResponseResult, QueryResponseError>
+    ): QueryStoreState<QueryResponseResult, QueryResponseError> &
+      WithEncodeDataAttribute
     <QueryResponseResult = unknown, QueryResponseError = unknown>(
@@ -73,3 +74,3 @@ query: string,
       data: QueryResponseResult
-    }
+    } & WithEncodeDataAttribute
   }
@@ -93,3 +94,3 @@ useLiveMode: UseLiveModeHook
   sourceMap: ContentSourceMap | undefined,
-  studioUrl: StudioUrl | ResolveStudioUrl,
+  studioUrl: StudioUrl | ResolveStudioUrl | undefined,
 ): EncodeDataAttributeCallback
@@ -99,3 +100,10 @@
 
-export declare type UseLiveModeHook = (options: EnableLiveModeOptions) => void
+export declare type UseLiveModeHook = (
+  options: EnableLiveModeOptions & {
+    /**
+     * Set this option to activate `encodeDataAttribute` on `useQuery` hooks when stega isn't used.
+     */
+    studioUrl?: StudioUrl | ResolveStudioUrl | undefined
+  },
+) => void
 
@@ -107,3 +115,4 @@ export declare const useQuery: {
     options?: UseQueryOptionsUndefinedInitial | undefined,
-  ): QueryStoreState<QueryResponseResult, QueryResponseError>
+  ): QueryStoreState<QueryResponseResult, QueryResponseError> &
+    WithEncodeDataAttribute
   <QueryResponseResult_1 = unknown, QueryResponseError_1 = unknown>(
@@ -118,3 +127,3 @@ query: string,
     data: QueryResponseResult_1
-  }
+  } & WithEncodeDataAttribute
 }
@@ -129,3 +138,4 @@
   options?: UseQueryOptions<QueryResponseResult>,
-) => QueryStoreState<QueryResponseResult, QueryResponseError>
+) => QueryStoreState<QueryResponseResult, QueryResponseError> &
+  WithEncodeDataAttribute
 
@@ -194,4 +204,8 @@ export declare interface UseQueryOptions<QueryResponseResult = unknown> {
 
+export declare type WithEncodeDataAttribute = {
+  encodeDataAttribute(path: StudioPathLike): string | undefined
+}
+
 export * from '@sanity/core-loader'
 
 export {}

dist/rsc/index.js

@@ -1,1 +0,1 @@
-import{createQueryStore as e}from"@sanity/core-loader";import{d as r,a as t}from"../_chunks/useEncodeDataAttribute-FfijgkCK.js";export{u as useEncodeDataAttribute}from"../_chunks/useEncodeDataAttribute-FfijgkCK.js";const o=o=>{const{createFetcherStore:s,enableLiveMode:a}=e({tag:"react-loader",...o});return{loadQuery:()=>{throw new Error("The `loadQuery` function is server only.")},useQuery:r({createFetcherStore:s}),setServerClient:()=>{throw new Error("The `setServerClient` function is server only.")},useLiveMode:t({enableLiveMode:a})}},{loadQuery:s,setServerClient:a,useLiveMode:n,useQuery:i}=o({client:!1,ssr:!0});export{o as createQueryStore,s as loadQuery,a as setServerClient,n as useLiveMode,i as useQuery};//# sourceMappingURL=index.js.map
+import{createQueryStore as e}from"@sanity/core-loader";import{d as r,a as t,b as o}from"../_chunks/defineUseQuery-FCDjrvHP.js";export{u as useEncodeDataAttribute}from"../_chunks/defineUseQuery-FCDjrvHP.js";const s=s=>{const{createFetcherStore:n,enableLiveMode:u}=e({tag:"react-loader",...s}),i=r(s.client);return{loadQuery:()=>{throw new Error("The `loadQuery` function is server only.")},useQuery:t({createFetcherStore:n,studioUrlStore:i}),setServerClient:()=>{throw new Error("The `setServerClient` function is server only.")},useLiveMode:o({enableLiveMode:u,setStudioUrl:i.setStudioUrl})}},{loadQuery:n,setServerClient:i,useLiveMode:a,useQuery:l}=s({client:!1,ssr:!0});export{s as createQueryStore,n as loadQuery,i as setServerClient,a as useLiveMode,l as useQuery};//# sourceMappingURL=index.js.map

package.json

 {
   "name": "@sanity/react-loader",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "homepage": "https://github.com/sanity-io/visual-editing/tree/main/packages/react-loader#readme",
@@ -146,3 +146,3 @@ "bugs": {
   "dependencies": {
-    "@sanity/core-loader": "1.1.3"
+    "@sanity/core-loader": "1.1.4"
   },
@@ -152,4 +152,4 @@ "devDependencies": {
     "@sanity/client": "^6.9.3",
-    "@sanity/pkg-utils": "^3.3.3",
-    "@sanity/visual-editing-helpers": "0.1.2",
+    "@sanity/pkg-utils": "^3.3.4",
+    "@sanity/visual-editing-helpers": "0.1.3",
     "@types/react": "^18.2.42",
@@ -156,0 +156,0 @@ "@typescript-eslint/eslint-plugin": "^6.13.2",

README.md

@@ -152,57 +152,10 @@ # @sanity/react-loader
 
-You can use `useEncodeDataAttribute` to create `data-json` attributes, that are picked up by `@sanity/overlays`.
+You can use the `encodeDataAttribute` function returned by `useQuery` to create `data-json` attributes, that are picked up by `@sanity/overlays`.
 This allows you to link to elements that otherwise isn't automatically linked to using `@sanity/client/stega`, such as array root item, or an image field.
 
-Update your shared loader to change `useQuery`, adding `useEncodeDataAttribute`
+If you aren't using stega and don't have a `studioUrl` defined in the `createClient` call, then you add it to the `useLiveMode` hook:
 
-```ts
-// ./src/app/sanity.loader.ts
-import {
-  createQueryStore,
-  useEncodeDataAttribute,
-  QueryParams,
-  UseQueryOptions,
-} from '@sanity/react-loader'
-
-const studioUrl = 'https://my.sanity.studio'
-
-const {
-  // Used only server side
-  loadQuery,
-  setServerClient,
-  // Used only client side
-  useQuery: _useQuery,
-  useLiveMode,
-} = createQueryStore({ client: false, ssr: true })
-
-// Used only server side
-export { loadQuery, setServerClient }
-
-// Used only client side
-export { useLiveMode }
-export const useQuery = <
-  QueryResponseResult = unknown,
-  QueryResponseError = unknown,
->(
-  loadQuery: string,
-  params?: QueryParams,
-  options?: UseQueryOptions<QueryResponseResult>,
-) => {
-  const snapshot = _useQuery<QueryResponseResult, QueryResponseError>(
-    loadQuery,
-    params,
-    options,
-  )
-
-  const encodeDataAttribute = useEncodeDataAttribute(
-    snapshot.data,
-    snapshot.sourceMap,
-    studioUrl,
-  )
-
-  return {
-    ...snapshot,
-    encodeDataAttribute,
-  }
-}
+```diff
+-useLiveMode({ allowStudioOrigin, client })
++useLiveMode({ allowStudioOrigin, client, studioUrl: 'https://my.sanity.studio' })
 ```
@@ -217,4 +170,4 @@
 import { json, type LoaderFunction } from '@remix-run/node'
+import { useQuery } from '@sanity/react-loader'
 import { loadQuery } from '~/sanity.loader.server'
-import { useQuery } from '~/sanity.loader'
 
@@ -245,3 +198,5 @@ interface Product {}
   // And `encodeDataAttribute` is a helpful utility for adding custom `data-sanity` attributes.
-  return <ProductTemplate data={data} />
+  return (
+    <ProductTemplate data={data} encodeDataAttribute={encodeDataAttribute} />
+  )
 }
@@ -248,0 +203,0 @@ ```

src/createQueryStore/client-only.ts

@@ -6,2 +6,3 @@ import {
 
+import { defineStudioUrlStore } from '../defineStudioUrlStore'
 import { defineUseLiveMode } from '../defineUseLiveMode'
@@ -27,4 +28,8 @@ import { defineUseQuery } from '../defineUseQuery'
   })
-  const useQuery = defineUseQuery({ createFetcherStore })
-  const useLiveMode: UseLiveModeHook = defineUseLiveMode({ enableLiveMode })
+  const studioUrlStore = defineStudioUrlStore(options.client)
+  const useQuery = defineUseQuery({ createFetcherStore, studioUrlStore })
+  const useLiveMode: UseLiveModeHook = defineUseLiveMode({
+    enableLiveMode,
+    setStudioUrl: studioUrlStore.setStudioUrl,
+  })
 
@@ -31,0 +36,0 @@ const loadQuery: QueryStore['loadQuery'] = () => {

src/createQueryStore/universal.ts

@@ -7,2 +7,3 @@ import type { QueryParams } from '@sanity/client'
 
+import { defineStudioUrlStore } from '../defineStudioUrlStore'
 import { defineUseLiveMode } from '../defineUseLiveMode'
@@ -31,4 +32,8 @@ import { defineUseQuery } from '../defineUseQuery'
   } = createCoreQueryStore({ tag: 'react-loader', ...options })
-  const useQuery = defineUseQuery({ createFetcherStore })
-  const useLiveMode: UseLiveModeHook = defineUseLiveMode({ enableLiveMode })
+  const studioUrlStore = defineStudioUrlStore(options.client)
+  const useQuery = defineUseQuery({ createFetcherStore, studioUrlStore })
+  const useLiveMode: UseLiveModeHook = defineUseLiveMode({
+    enableLiveMode,
+    setStudioUrl: studioUrlStore.setStudioUrl,
+  })
 
@@ -35,0 +40,0 @@ const loadQuery = async <QueryResponseResult>(

src/defineUseLiveMode.ts

@@ -0,10 +1,21 @@
+import type { ResolveStudioUrl, StudioUrl } from '@sanity/client/csm'
+import type { SanityStegaClient } from '@sanity/client/stega'
 import type { QueryStore } from '@sanity/core-loader'
 import { useEffect } from 'react'
 
-import { UseLiveModeHook } from './types'
+import type { UseLiveModeHook } from './types'
 
 export function defineUseLiveMode({
   enableLiveMode,
-}: Pick<QueryStore, 'enableLiveMode'>): UseLiveModeHook {
-  return ({ allowStudioOrigin, client, onConnect, onDisconnect }) => {
+  setStudioUrl,
+}: Pick<QueryStore, 'enableLiveMode'> & {
+  setStudioUrl: (studioUrl: StudioUrl | ResolveStudioUrl | undefined) => void
+}): UseLiveModeHook {
+  return ({
+    allowStudioOrigin,
+    client,
+    onConnect,
+    onDisconnect,
+    studioUrl,
+  }) => {
     useEffect(() => {
@@ -19,3 +30,10 @@ const disableLiveMode = enableLiveMode({
     }, [allowStudioOrigin, client, onConnect, onDisconnect])
+    useEffect(() => {
+      setStudioUrl(
+        studioUrl ?? typeof client === 'object'
+          ? (client as SanityStegaClient)?.config().stega?.studioUrl
+          : undefined,
+      )
+    }, [studioUrl, client])
   }
 }

src/defineUseQuery.ts

 import type { QueryParams } from '@sanity/client'
 import type { QueryStore, QueryStoreState } from '@sanity/core-loader'
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useState, useSyncExternalStore } from 'react'
 
-import type { UseQueryOptions } from './types'
+import { defineStudioUrlStore } from './defineStudioUrlStore'
+import type { UseQueryOptions, WithEncodeDataAttribute } from './types'
+import { useEncodeDataAttribute } from './useEncodeDataAttribute'
 
 export function defineUseQuery({
   createFetcherStore,
-}: Pick<QueryStore, 'createFetcherStore'>): <
-  QueryResponseResult,
-  QueryResponseError,
->(
+  studioUrlStore,
+}: Pick<QueryStore, 'createFetcherStore'> & {
+  studioUrlStore: ReturnType<typeof defineStudioUrlStore>
+}): <QueryResponseResult, QueryResponseError>(
   query: string,
   params?: QueryParams,
   options?: UseQueryOptions<QueryResponseResult>,
-) => QueryStoreState<QueryResponseResult, QueryResponseError> {
+) => QueryStoreState<QueryResponseResult, QueryResponseError> &
+  WithEncodeDataAttribute {
   const DEFAULT_PARAMS = {}
@@ -52,5 +55,17 @@ return <QueryResponseResult, QueryResponseError>(
     }, [$params, initial, query])
-
-    return snapshot
+    const studioUrl = useSyncExternalStore(
+      studioUrlStore.subscribe,
+      studioUrlStore.getSnapshot,
+      studioUrlStore.getServerSnapshot,
+    )
+    const encodeDataAttribute = useEncodeDataAttribute(
+      snapshot.data,
+      snapshot.sourceMap,
+      studioUrl,
+    )
+    return useMemo(
+      () => ({ ...snapshot, encodeDataAttribute }),
+      [snapshot, encodeDataAttribute],
+    )
   }
 }

src/types.ts

@@ -6,2 +6,7 @@ import type {
 } from '@sanity/client'
+import type {
+  ResolveStudioUrl,
+  StudioPathLike,
+  StudioUrl,
+} from '@sanity/client/csm'
 import {
@@ -15,2 +20,6 @@ createQueryStore as createCoreQueryStore,
 
+export type WithEncodeDataAttribute = {
+  encodeDataAttribute(path: StudioPathLike): string | undefined
+}
+
 export type UseQueryHook = <
@@ -23,3 +32,4 @@ QueryResponseResult = unknown,
   options?: UseQueryOptions<QueryResponseResult>,
-) => QueryStoreState<QueryResponseResult, QueryResponseError>
+) => QueryStoreState<QueryResponseResult, QueryResponseError> &
+  WithEncodeDataAttribute
 
@@ -96,3 +106,10 @@ export interface QueryResponseInitial<QueryResponseResult> {
 }
-export type UseLiveModeHook = (options: EnableLiveModeOptions) => void
+export type UseLiveModeHook = (
+  options: EnableLiveModeOptions & {
+    /**
+     * Set this option to activate `encodeDataAttribute` on `useQuery` hooks when stega isn't used.
+     */
+    studioUrl?: StudioUrl | ResolveStudioUrl | undefined
+  },
+) => void
 
@@ -113,3 +130,4 @@ export interface QueryStore<
       options?: UseQueryOptionsUndefinedInitial,
-    ): QueryStoreState<QueryResponseResult, QueryResponseError>
+    ): QueryStoreState<QueryResponseResult, QueryResponseError> &
+      WithEncodeDataAttribute
     <QueryResponseResult = unknown, QueryResponseError = unknown>(
@@ -122,3 +140,3 @@ query: string,
       'data'
-    > & { data: QueryResponseResult }
+    > & { data: QueryResponseResult } & WithEncodeDataAttribute
     // <QueryResponseResult = unknown, QueryResponseError = unknown>(
@@ -128,5 +146,5 @@ //   query: string,
     //   options?: UseQueryOptions<QueryResponseResult>,
-    // ): QueryStoreState<QueryResponseResult, QueryResponseError>
+    // ): QueryStoreState<QueryResponseResult, QueryResponseError> & WithEncodeDataAttribute
   }
   useLiveMode: UseLiveModeHook
 }

src/useEncodeDataAttribute.ts

@@ -19,6 +19,11 @@ import type { ContentSourceMap } from '@sanity/client'
   sourceMap: ContentSourceMap | undefined,
-  studioUrl: StudioUrl | ResolveStudioUrl,
+  studioUrl: StudioUrl | ResolveStudioUrl | undefined,
 ): EncodeDataAttributeCallback {
   return useCallback(
-    (path) => encodeDataAttribute(result, sourceMap, studioUrl, path),
+    (path) => {
+      if (!studioUrl) {
+        return undefined
+      }
+      return encodeDataAttribute(result, sourceMap, studioUrl, path)
+    },
     [result, sourceMap, studioUrl],
@@ -25,0 +30,0 @@ )

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

420221

increased by6.31%

Number of package files

49

increased by2.08%

Lines of code

1717

increased by8.6%

Worsened metrics

Number of lines in readme file

232

decreased by-16.25%

Dependency changes

• + Added@sanity/core-loader@1.1.4(transitive)

• - Removed@sanity/core-loader@1.1.3(transitive)

• Updated@sanity/core-loader@1.1.4