@sanity/client 6.11.3 → 6.11.4-canary.0

package/README.md

@@ -657,10 +657,10 @@ useContentSourceMap(resultSourceMap)
 
 #### Using [Visual editing][visual-editing] with steganography
 
-A turnkey integration with [Visual editing][visual-editing] is available in [`@sanity/client/stega`]. It creates edit intent links for all the string values in your query result, using [steganography](https://npmjs.com/package/@vercel/stega) under the hood.
+A turnkey integration with [Visual editing][visual-editing] is available in [`@sanity/client`], with additional utils available on [`@sanity/client/stega`]. It creates edit intent links for all the string values in your query result, using [steganography](https://npmjs.com/package/@vercel/stega) under the hood. The code that handles stega is lazy loaded on demand when `client.fetch` is called, if `client.config().stega.enabled` is `true`.
 
 ```ts
-import {createClient} from '@sanity/client/stega'
+import {createClient} from '@sanity/client'
 
 const client = createClient({
   // ...base config options
@@ -713,7 +713,7 @@ const debugClient = client.withConfig({
 })
 ```
 
-Removing stega from part of the result:
+Removing stega from part of the result, available on [`@sanity/client/stega`]:
 
 ```ts
 import {vercelStegaCleanAll} from '@sanity/client/stega'
@@ -723,12 +723,91 @@ const result = await client.fetch('*[_type == "video"][0]')
 const videoAsset = vercelStegaCleanAll(result.videoAsset)
 ```
 
+#### [Visual editing][visual-editing] with the [GraphQL API][graphql-csm]
+
+It's possible to enable stega for the GraphQL API as well, with the `stegaEncodeSourceMap` utility available on [`@sanity/client/stega`]. On your GraphQL API request add the search param `resultSourceMap=true`
+
+Your GraphQL API response should now look something like this:
+
+```json
+{
+  "data": {
+    "allPost": [
+      {
+        "title": "GraphQL CSM"
+      }
+    ]
+  },
+  "extensions": {
+    "sanitySourceMap": {
+      "documents": [
+        {
+          "_id": "75bbbd60-0aa9-4b20-9c00-0b40cb010ff6",
+          "_type": "post"
+        }
+      ],
+      "paths": ["$['title']"],
+      "mappings": {
+        "$['allPost'][0]['title']": {
+          "source": {
+            "document": 0,
+            "path": 0,
+            "type": "documentValue"
+          },
+          "type": "value"
+        }
+      }
+    }
+  }
+}
+```
+
+To encode the CSMs to Stega payloads, use the `stegaEncodeSourceMap` utility, this creates the same result as with GROQ and `client.fetch` and is compatible with the Vercel Visual Editing integration, and the upcoming GraphQL support in [Presentation][presentation]:
+
+```ts
+import {ApolloClient, gql} from '@apollo/client'
+import {stegaEncodeSourceMap} from '@sanity/client/stega'
+
+const client = new ApolloClient({
+  uri: `https://${projectId}.api.sanity.io/v${apiVersion}/graphql/${dataset}/${graphqlTag}?resultSourceMap=true`,
+  // other base config options
+})
+
+const posts = await client.query({
+  query: gql`
+    query allPost {
+      allPost {
+        title
+      }
+    }
+  `,
+})
+
+// Later in the App, when you want to encode the CSMs to Stega payloads
+const data = stegaEncodeSourceMap(posts.data, posts.extensions.sanitySourceMap, {
+  // The options are the same as for the `stega` config option, except for which ones are optional and which ones are required
+  enabled: true, // required
+  studioUrl: 'https://test.sanity.studio', // required
+  filter: (props) => props.filterDefault(props), // optional
+  logger: console, // optional
+})
+
+// The `title` field now has a CSM embedded using Steganography, to verify the payloads you can use the `vercelStegaDecode` utilities in `@vercel/stega` and test the URLs it reports
+
+// Check for a single URL:
+import {vercelStegaDecode} from '@vercel/stega'
+console.log(vercelStegaDecode(data.allPost[0].title)) // {"href": "https://test.sanity.studio/intent/edit/mode=presentation;id=75bbbd60-0aa9-4b20-9c00-0b40cb010ff6;type=post;path=title", "origin": "sanity.io"}
+// Find all URLs in a payload
+import {vercelStegaDecodeAll} from '@vercel/stega'
+console.log(vercelStegaDecodeAll(JSON.stringify(data))) // [{"href": "https://test.sanity.studio/intent/edit/mode=presentation;id=75bbbd60-0aa9-4b20-9c00-0b40cb010ff6;type=post;path=title", "origin": "sanity.io"}]
+```
+
 #### Creating Studio edit intent links
 
 If you want to create an edit link to something that isn't a string, or a field that isn't rendered directly, like a `slug` used in a URL but not rendered on the page, you can use the `resolveEditUrl` function.
 
 ```ts
-import {createClient} from '@sanity/client' // or '@sanity/client/stega'
+import {createClient} from '@sanity/client'
 import {resolveEditUrl} from '@sanity/client/csm'
 
 const client = createClient({
@@ -1608,3 +1687,5 @@ await client.request<void>({uri: '/auth/logout', method: 'POST'})
 [visual-editing]: https://www.sanity.io/docs/vercel-visual-editing?utm_source=github.com&utm_medium=referral&utm_campaign=may-vercel-launch
 [content-source-maps]: https://www.sanity.io/docs/content-source-maps?utm_source=github.com&utm_medium=referral&utm_campaign=may-vercel-launch
 [content-source-maps-intro]: https://www.sanity.io/blog/content-source-maps-announce?utm_source=github.com&utm_medium=referral&utm_campaign=may-vercel-launch
+[graphql-csm]: https://www.sanity.io/docs/graphql#e52e2285f14f
+[presentation]: https://www.sanity.io/blog/introducing-presentation

package/dist/_chunks/{browserMiddleware-1MULg59S.cjs → browserMiddleware-Pe3R-Bkh.cjs}

@@ -4,6 +4,7 @@ var getIt = require('get-it');
 var middleware = require('get-it/middleware');
 var rxjs = require('rxjs');
 var operators = require('rxjs/operators');
+var stega = require('@vercel/stega');
 
 const MAX_ITEMS_IN_ERROR_MESSAGE = 5;
 class ClientError extends Error {
@@ -653,7 +654,8 @@ const defaultCdnHost = "apicdn.sanity.io";
 const defaultConfig = {
   apiHost: "https://api.sanity.io",
   apiVersion: "1",
-  useProjectHostname: true
+  useProjectHostname: true,
+  stega: { enabled: false }
 };
 const LOCALHOSTS = ["localhost", "127.0.0.1", "0.0.0.0"];
 const isLocal = (host) => LOCALHOSTS.indexOf(host) !== -1;
@@ -680,11 +682,21 @@ const validateApiPerspective = function validateApiPerspective2(perspective) {
   }
 };
 const initConfig = (config, prevConfig) => {
-  const specifiedConfig = Object.assign({}, prevConfig, config);
+  const specifiedConfig = {
+    ...prevConfig,
+    ...config,
+    stega: {
+      ...typeof prevConfig.stega === "boolean" ? { enabled: prevConfig.stega } : prevConfig.stega || defaultConfig.stega,
+      ...typeof config.stega === "boolean" ? { enabled: config.stega } : config.stega || {}
+    }
+  };
   if (!specifiedConfig.apiVersion) {
     printNoApiVersionSpecifiedWarning();
   }
-  const newConfig = Object.assign({}, defaultConfig, specifiedConfig);
+  const newConfig = {
+    ...defaultConfig,
+    ...specifiedConfig
+  };
   const projectBased = newConfig.useProjectHostname;
   if (typeof Promise === "undefined") {
     const helpUrl = generateHelpUrl("js-client-promise-polyfill");
@@ -696,14 +708,25 @@ const initConfig = (config, prevConfig) => {
   if (typeof newConfig.perspective === "string") {
     validateApiPerspective(newConfig.perspective);
   }
-  if ("encodeSourceMapAtPath" in newConfig || "encodeSourceMap" in newConfig || "studioUrl" in newConfig || "logger" in newConfig) {
+  if ("encodeSourceMap" in newConfig) {
     throw new Error(
-      "It looks like you're using options meant for '@sanity/preview-kit/client', such as 'encodeSourceMapAtPath', 'encodeSourceMap', 'studioUrl' and 'logger'. Make sure you're using the right import."
+      "It looks like you're using options meant for '@sanity/preview-kit/client'. 'encodeSourceMap' is not supported in '@sanity/client'. Did you mean 'stega.enabled'?"
     );
   }
-  if ("stega" in newConfig && newConfig["stega"] !== void 0 && newConfig["stega"] !== false) {
+  if ("encodeSourceMapAtPath" in newConfig) {
+    throw new Error(
+      "It looks like you're using options meant for '@sanity/preview-kit/client'. 'encodeSourceMapAtPath' is not supported in '@sanity/client'. Did you mean 'stega.filter'?"
+    );
+  }
+  if (typeof newConfig.stega.enabled !== "boolean") {
+    throw new Error("stega.enabled must be a boolean, received ".concat(newConfig.stega.enabled));
+  }
+  if (newConfig.stega.enabled && newConfig.stega.studioUrl === void 0) {
+    throw new Error("stega.studioUrl must be defined when stega.enabled is true");
+  }
+  if (newConfig.stega.enabled && typeof newConfig.stega.studioUrl !== "string" && typeof newConfig.stega.studioUrl !== "function") {
     throw new Error(
-      "It looks like you're using options meant for '@sanity/client/stega'. Make sure you're using the right import. Or set 'stega' in 'createClient' to 'false'."
+      "stega.studioUrl must be a string or a function, received ".concat(newConfig.stega.studioUrl)
     );
   }
   const isBrowser = typeof window !== "undefined" && window.location && window.location.hostname;
@@ -764,6 +787,20 @@ function requestOptions(config, overrides = {}) {
   });
 }
 
+function vercelStegaCleanAll(result) {
+  try {
+    return JSON.parse(
+      JSON.stringify(result, (key, value) => {
+        if (typeof value !== "string")
+          return value;
+        return stega.vercelStegaSplit(value).cleaned;
+      })
+    );
+  } catch {
+    return result;
+  }
+}
+
 const encodeQueryString = ({
   query,
   params = {},
@@ -805,21 +842,38 @@ const indexBy = (docs, attr) => docs.reduce((indexed, doc) => {
   return indexed;
 }, /* @__PURE__ */ Object.create(null));
 const getQuerySizeLimit = 11264;
-function _fetch(client, httpRequest, query, params, options = {}) {
-  if ("stega" in options && options["stega"] !== void 0 && options["stega"] !== false) {
-    throw new Error(
-      "It looks like you're using options meant for '@sanity/client/stega'. Make sure you're using the right import. Or set 'stega' in 'fetch' to 'false'."
-    );
-  }
+function _fetch(client, httpRequest, _stega, query, _params, options = {}) {
+  const stega = "stega" in options ? {
+    ..._stega || {},
+    ...typeof options.stega === "boolean" ? { enabled: options.stega } : options.stega || {}
+  } : _stega;
+  const params = stega.enabled ? vercelStegaCleanAll(_params) : _params;
   const mapResponse = options.filterResponse === false ? (res) => res : (res) => res.result;
   const { cache, next, ...opts } = {
     // Opt out of setting a `signal` on an internal `fetch` if one isn't provided.
     // This is necessary in React Server Components to avoid opting out of Request Memoization.
     useAbortSignal: typeof options.signal !== "undefined",
+    // Set `resultSourceMap' when stega is enabled, as it's required for encoding.
+    resultSourceMap: stega.enabled ? "withKeyArraySelector" : options.resultSourceMap,
     ...options
   };
   const reqOpts = typeof cache !== "undefined" || typeof next !== "undefined" ? { ...opts, fetch: { cache, next } } : opts;
-  return _dataRequest(client, httpRequest, "query", { query, params }, reqOpts).pipe(operators.map(mapResponse));
+  const $request = _dataRequest(client, httpRequest, "query", { query, params }, reqOpts);
+  return stega.enabled ? $request.pipe(
+    operators.combineLatestWith(
+      rxjs.from(
+        Promise.resolve().then(function () { return require('./stegaEncodeSourceMap-vNYIaMiu.cjs'); }).then(function (n) { return n.stegaEncodeSourceMap$1; }).then(
+          ({ stegaEncodeSourceMap }) => stegaEncodeSourceMap
+        )
+      )
+    ),
+    operators.map(
+      ([res, stegaEncodeSourceMap]) => {
+        const result = stegaEncodeSourceMap(res.result, res.resultSourceMap, stega);
+        return mapResponse({ ...res, result });
+      }
+    )
+  ) : $request.pipe(operators.map(mapResponse));
 }
 function _getDocument(client, httpRequest, id, opts = {}) {
   const options = { uri: _getDataUrl(client, "doc", id), json: true, tag: opts.tag };
@@ -1560,10 +1614,25 @@ const _ObservableSanityClient = class _ObservableSanityClient {
    * @param newConfig - New client configuration properties, shallowly merged with existing configuration
    */
   withConfig(newConfig) {
-    return new _ObservableSanityClient(__privateGet(this, _httpRequest), { ...this.config(), ...newConfig });
+    const thisConfig = this.config();
+    return new _ObservableSanityClient(__privateGet(this, _httpRequest), {
+      ...this.config(),
+      ...newConfig,
+      stega: {
+        ...thisConfig.stega || {},
+        ...typeof (newConfig == null ? void 0 : newConfig.stega) === "boolean" ? { enabled: newConfig.stega } : (newConfig == null ? void 0 : newConfig.stega) || {}
+      }
+    });
   }
   fetch(query, params, options = {}) {
-    return _fetch(this, __privateGet(this, _httpRequest), query, params, options);
+    return _fetch(
+      this,
+      __privateGet(this, _httpRequest),
+      __privateGet(this, _clientConfig).stega,
+      query,
+      params,
+      options
+    );
   }
   /**
    * Fetch a single document with the given ID.
@@ -1695,10 +1764,27 @@ const _SanityClient = class _SanityClient {
    * @param newConfig - New client configuration properties, shallowly merged with existing configuration
    */
   withConfig(newConfig) {
-    return new _SanityClient(__privateGet(this, _httpRequest2), { ...this.config(), ...newConfig });
+    const thisConfig = this.config();
+    return new _SanityClient(__privateGet(this, _httpRequest2), {
+      ...thisConfig,
+      ...newConfig,
+      stega: {
+        ...thisConfig.stega || {},
+        ...typeof (newConfig == null ? void 0 : newConfig.stega) === "boolean" ? { enabled: newConfig.stega } : (newConfig == null ? void 0 : newConfig.stega) || {}
+      }
+    });
   }
   fetch(query, params, options = {}) {
-    return rxjs.lastValueFrom(_fetch(this, __privateGet(this, _httpRequest2), query, params, options));
+    return rxjs.lastValueFrom(
+      _fetch(
+        this,
+        __privateGet(this, _httpRequest2),
+        __privateGet(this, _clientConfig2).stega,
+        query,
+        params,
+        options
+      )
+    );
   }
   /**
    * Fetch a single document with the given ID.
@@ -1831,8 +1917,8 @@ exports.Patch = Patch;
 exports.SanityClient = SanityClient;
 exports.ServerError = ServerError;
 exports.Transaction = Transaction;
-exports.defaultConfig = defaultConfig;
 exports.defineCreateClientExports = defineCreateClientExports;
 exports.envMiddleware = envMiddleware;
 exports.printNoDefaultExport = printNoDefaultExport;
-//# sourceMappingURL=browserMiddleware-1MULg59S.cjs.map
+exports.vercelStegaCleanAll = vercelStegaCleanAll;
+//# sourceMappingURL=browserMiddleware-Pe3R-Bkh.cjs.map