hydrogen-sanity 4.0.2 → 4.0.3

package/README.md

@@ -2,24 +2,23 @@
 
 [Sanity.io](https://www.sanity.io) toolkit for [Hydrogen](https://hydrogen.shopify.dev/). Requires `@shopify/hydrogen >= 2023.7.0`.
 
-- [hydrogen-sanity](#hydrogen-sanity)
-  - [Installation](#installation)
-  - [Usage](#usage)
-    - [Satisfy TypeScript](#satisfy-typescript)
-  - [Interacting with Sanity data](#interacting-with-sanity-data)
-    - [Preferred: Cached fetches using `loadQuery`](#preferred-cached-fetches-using-loadquery)
-    - [`loadQuery` Request Options](#loadquery-request-options)
-    - [Alternatively: Using `client` directly](#alternatively-using-client-directly)
-  - [Visual Editing](#visual-editing)
-    - [Enabling preview mode](#enabling-preview-mode)
-    - [Setup CORS for front-end domains](#setup-cors-for-front-end-domains)
-    - [Modify Content Security Policy for Studio domains](#modify-content-security-policy-for-studio-domains)
-    - [Setup Presentation Tool](#setup-presentation-tool)
-  - [Using `@sanity/client` instead of hydrogen-sanity](#using-sanityclient-instead-of-hydrogen-sanity)
-- [Migrate to v4 from v3](#migrate-to-v4-from-v3)
-  - [License](#license)
-  - [Develop \& test](#develop--test)
-    - [Release new version](#release-new-version)
+- [Installation](#installation)
+- [Usage](#usage)
+  - [Satisfy TypeScript](#satisfy-typescript)
+- [Interacting with Sanity data](#interacting-with-sanity-data)
+  - [Preferred: Cached fetches using `loadQuery`](#preferred-cached-fetches-using-loadquery)
+    - [`loadQuery` request options](#loadquery-request-options)
+  - [Alternatively: Using `client` directly](#alternatively-using-client-directly)
+- [Visual Editing](#visual-editing)
+  - [Enabling preview mode](#enabling-preview-mode)
+  - [Setup CORS for front-end domains](#setup-cors-for-front-end-domains)
+  - [Modify Content Security Policy for Studio domains](#modify-content-security-policy-for-studio-domains)
+  - [Setup Presentation tool](#setup-presentation-tool)
+- [Using `@sanity/client` instead of hydrogen-sanity](#using-sanityclient-instead-of-hydrogen-sanity)
+- [Migration Guides](#migration-guides)
+- [License](#license)
+- [Develop \& test](#develop--test)
+  - [Release new version](#release-new-version)
 
 **Features:**
 
@@ -135,11 +134,10 @@ SANITY_API_TOKEN=""
 
 ### Satisfy TypeScript
 
-Update the environment variables in `Env` and `AppLoadContext` to include the Sanity configuration:
+Update the environment variables in `Env` to include the ones you created above:
 
 ```ts
 // ./remix.env.d.ts
-import type {Sanity} from 'hydrogen-sanity'
 
 declare global {
   // ...other Types
@@ -152,25 +150,21 @@ declare global {
     SANITY_API_TOKEN: string
   }
 }
-
-declare module '@shopify/remix-oxygen' {
-  export interface AppLoadContext {
-    // ...other Types
-    sanity: Sanity
-  }
-}
 ```
 
+> **Note**: `hydrogen-sanity` will automatically add `sanity` to the `AppLoadContext` interface
+>
+
 ## Interacting with Sanity data
 
 ### Preferred: Cached fetches using `loadQuery`
 
-Query Sanity's API and use Hydrogen's cache to store the response (defaults to `CacheLong` caching strategy).
-
-`loadQuery` results will skip Hydrogen's caching when in preview mode.
+Query Sanity's API and use Hydrogen's cache to store the response (defaults to `CacheLong` caching strategy). While in preview mode, `loadQuery` will use `CacheNone` to prevent results from being cached.
 
 Learn more about configuring [caching in Hydrogen on the Shopify documentation](https://shopify.dev/docs/custom-storefronts/hydrogen/caching).
 
+Sanity queries will appear in Hydrogen's [Subrequest Profiler](https://shopify.dev/docs/custom-storefronts/hydrogen/debugging/subrequest-profiler). By default, they're titled `Sanity query`; however, you can give your queries more descriptive titles by using the request option below.
+
 ```ts
 export async function loader({context, params}: LoaderFunctionArgs) {
   const query = `*[_type == "page" && _id == $id][0]`
@@ -198,23 +192,13 @@ const page = await context.sanity.loadQuery<HomePage>(query, params, {
     // debug: {
     //   displayName: 'query Homepage'
     // }
-  },
-
-  // These additional options will be passed to sanity.loadQuery
-  queryOptions: {
-    tag: 'home',
-    headers: {
-      'Accept-Encoding': 'br, gzip, *',
-    },
-  },
+  }
 })
 ```
 
 ### Alternatively: Using `client` directly
 
-The Sanity Client is also configured in context, but will not return data in the same shape as `loadQuery`. It is recommended to use `loadQuery` for data fetching.
-
-Sanity Client can be used for mutations within actions, for example:
+The Sanity client (either instantiated from your configuration or passed through directly) is also available in your app's context. It is recommended to use `loadQuery` for data fetching; but the Sanity client can be used for mutations within actions, for example:
 
 ```ts
 export async function action({context, request}: ActionFunctionArgs) {
@@ -235,10 +219,9 @@ export async function action({context, request}: ActionFunctionArgs) {
 
 ## Visual Editing
 
-Enable real-time, interactive live preview inside the Presentation Tool of your Sanity Studio.
+Enable real-time, interactive live preview inside the Presentation tool of your Sanity Studio. `hydrogen-sanity` comes with a ready-to-use version of the `VisualEditing` component that's compatible with Hydrogen and Oxygen.
 
 First set up your root route to enable preview mode across the entire application, if the preview session is active:
-
 ```tsx
 // ./app/root.tsx
 
@@ -273,41 +256,13 @@ export default function App() {
   )
 }
 ```
-
 This Visual Editing component will trigger incremental updates to draft documents from the server for users with a valid preview session. [Duplicate its source](https://github.com/sanity-io/visual-editing/blob/main/packages/visual-editing/src/remix/VisualEditing.tsx) into your own project if you wish to customize its behavior.
 
-These updates are faster when your initial server-side content is passed through an optional `useQuery` hook.
-
-```tsx
-// Any route file, such as ./app/routes/index.tsx
-
-// ...all other imports
-import {useQuery} from '@sanity/react-loader'
-
-export async function loader({context, params}: LoaderArgs) {
-  const query = `*[_type == "page" && _id == $id][0]`
-  const params = {id: 'home'}
-  const initial = await context.sanity.loadQuery(query, params)
-
-  return json({initial, query, params})
-}
-
-// Default export where content is rendered
-export default function Index() {
-  // Get initial data, passing it as snapshot to render preview...
-  const {initial, query, params} = useLoaderData<typeof loader>()
-  // Optional, pass query, params and initial data to useQuery for faster updates
-  const {loading, data} = useQuery(query, params, initial)
-
-  return loading ? <div>Loading</div> : <Page page={data} />
-}
-```
-
 ### Enabling preview mode
 
 For users to enter preview mode, they will need to visit a route that performs some authentication and then writes to the session.
 
-`hydrogen-sanity` comes with a preconfigured route for this purpose. It checks the value of a secret in the URL used by Presentation Tool - and if valid - writes the `projectId` to the Hydrogen session.
+`hydrogen-sanity` comes with a preconfigured route for this purpose. It checks the value of a secret in the URL used by Presentation tool - and if valid - writes the `projectId` to the Hydrogen session.
 
 Add this route to your project like below, or view the source to copy and modify it in your project.
 
@@ -365,7 +320,7 @@ export default defineConfig({
 })
 ```
 
-You should now be able to view your Hydrogen app in the Presentation Tool, click to edit any Sanity content and see live updates as you make changes.
+You should now be able to view your Hydrogen app in the Presentation tool, click to edit any Sanity content and see live updates as you make changes.
 
 ## Using `@sanity/client` instead of hydrogen-sanity
 

package/dist/_chunks-cjs/VisualEditing.client.cjs

@@ -0,0 +1 @@
+"use strict";var e=require("@sanity/visual-editing/remix");if(typeof document>"u")throw new Error("Visual editing should only run client-side. Please check that this file is not being imported into a worker or server bundle.");Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return e.VisualEditing}});//# sourceMappingURL=VisualEditing.client.cjs.map

package/dist/_chunks-cjs/VisualEditing.client.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisualEditing.client.cjs","sources":["../../src/visual-editing/VisualEditing.client.tsx"],"sourcesContent":["import {VisualEditing} from '@sanity/visual-editing/remix'\n\n/**\n * Prevent a consumer from importing into a worker/server bundle.\n */\nif (typeof document === 'undefined') {\n  throw new Error(\n    'Visual editing should only run client-side. Please check that this file is not being imported into a worker or server bundle.',\n  )\n}\n\n/**\n * Enables visual editing on the front-end\n * @see https://www.sanity.io/docs/introduction-to-visual-editing\n */\nexport default VisualEditing\n"],"names":["document","Error","Object","defineProperty","exports","enumerable","get","remix","VisualEditing"],"mappings":"2DAKA,UAAWA,SAAa,IACtB,MAAM,IAAIC,MACR,iIACFC,OAAAC,eAAAC,QAAA,UAAA,CAAAC,YAAA,EAAAC,IAAA,WAAA,OAAAC,EAAAC,aAAA"}

package/dist/_chunks-es/VisualEditing.client.js

@@ -0,0 +1 @@
+import"@sanity/visual-editing/remix";import{VisualEditing as i}from"@sanity/visual-editing/remix";if(typeof document>"u")throw new Error("Visual editing should only run client-side. Please check that this file is not being imported into a worker or server bundle.");export{i as default};//# sourceMappingURL=VisualEditing.client.js.map

package/dist/_chunks-es/VisualEditing.client.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisualEditing.client.js","sources":["../../src/visual-editing/VisualEditing.client.tsx"],"sourcesContent":["import {VisualEditing} from '@sanity/visual-editing/remix'\n\n/**\n * Prevent a consumer from importing into a worker/server bundle.\n */\nif (typeof document === 'undefined') {\n  throw new Error(\n    'Visual editing should only run client-side. Please check that this file is not being imported into a worker or server bundle.',\n  )\n}\n\n/**\n * Enables visual editing on the front-end\n * @see https://www.sanity.io/docs/introduction-to-visual-editing\n */\nexport default VisualEditing\n"],"names":["document","Error"],"mappings":"kGAKA,UAAWA,SAAa,IACtB,MAAM,IAAIC,MACR"}

package/dist/visual-editing/index.cjs

@@ -1 +1 @@
-"use strict";Object.create,Object.defineProperty,Object.getOwnPropertyDescriptor,Object.getOwnPropertyNames,Object.getPrototypeOf,Object.prototype.hasOwnProperty;Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("@sanity/visual-editing/create-data-attribute");const i=t.lazy((()=>import("@sanity/visual-editing/remix").then((e=>({default:e.VisualEditing})))));Object.defineProperty(exports,"createDataAttribute",{enumerable:!0,get:function(){return r.createDataAttribute}}),exports.VisualEditing=function(r){return e.jsx(t.Suspense,{fallback:null,children:e.jsx(i,{...r})})};//# sourceMappingURL=index.cjs.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("@sanity/visual-editing/create-data-attribute");const i=typeof document>"u"?function(){return e.jsx(e.Fragment,{})}:t.lazy((()=>Promise.resolve().then((function(){return require("../_chunks-cjs/VisualEditing.client.cjs")}))));Object.defineProperty(exports,"createDataAttribute",{enumerable:!0,get:function(){return r.createDataAttribute}}),exports.VisualEditing=function(r){return e.jsx(t.Suspense,{children:e.jsx(i,{...r})})};//# sourceMappingURL=index.cjs.map

package/dist/visual-editing/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/visual-editing/VisualEditing.tsx"],"sourcesContent":["import type {VisualEditingProps} from '@sanity/visual-editing/remix'\nimport {lazy, type ReactElement, Suspense} from 'react'\n\nconst VisualEditingComponent = lazy(() =>\n  import('@sanity/visual-editing/remix').then((mod) => ({default: mod.VisualEditing})),\n)\n\n/**\n * Enables visual editing on the front-end\n * @see https://www.sanity.io/docs/introduction-to-visual-editing\n */\nexport function VisualEditing(props: VisualEditingProps): ReactElement {\n  return (\n    <Suspense fallback={null}>\n      <VisualEditingComponent {...props} />\n    </Suspense>\n  )\n}\n"],"names":["VisualEditingComponent","lazy","import","then","mod","default","VisualEditing","Object","defineProperty","exports","enumerable","get","createDataAttribute","props","Suspense","fallback","children"],"mappings":"yUAGA,MAAMA,EAAyBC,EAAAA,MAAK,IAClCC,OAAO,gCAAgCC,MAAMC,IAAA,CAAUC,QAASD,EAAIE,oBAatEC,OAAAC,eAAAC,QAAA,sBAAA,CAAAC,YAAA,EAAAC,IAAA,WAAA,OAAAC,EAAAA,mBAAA,IAAAH,QAAAH,cANO,SAAuBO,GAE1B,aAACC,EAAAA,UAASC,SAAU,KAClBC,eAAChB,EAAwB,IAAGa,KAGlC"}
+{"version":3,"file":"index.cjs","sources":["../../src/visual-editing/VisualEditing.tsx"],"sourcesContent":["import type {VisualEditingProps} from '@sanity/visual-editing/remix'\nimport {lazy, type ReactElement, Suspense} from 'react'\n\n/**\n * Provide a consistent fallback to prevent hydration mismatch errors.\n */\nfunction VisualEditingFallback(): ReactElement {\n  return <></>\n}\n\n/**\n * If server-side rendering, then return the fallback instead of the heavy dependency.\n * @see https://remix.run/docs/en/1.14.3/guides/constraints#browser-only-code-on-the-server\n */\nconst VisualEditingComponent =\n  typeof document === 'undefined'\n    ? VisualEditingFallback\n    : lazy(\n        () =>\n          /**\n           * `lazy` expects the component as the default export\n           * @see https://react.dev/reference/react/lazy\n           */\n          import('./VisualEditing.client'),\n      )\n\nexport function VisualEditing(props: VisualEditingProps): ReactElement {\n  return (\n    <Suspense>\n      <VisualEditingComponent {...props} />\n    </Suspense>\n  )\n}\n"],"names":["Object","defineProperty","exports","value","jsxRuntime","require","react","createDataAttribute","VisualEditingComponent","document","jsx","Fragment","lazy","Promise","resolve","then","enumerable","get","VisualEditing","props","Suspense","children"],"mappings":"aAMAA,OAAAC,eAAAC,QAAA,aAAA,CAAAC,OAAA,IAAA,IAAAC,EAAAC,QAAA,qBAAAC,EAAAD,QAAA,SAAAE,EAAAF,QAAA,gDAQA,MAAMG,SACGC,SAAa,IATtB,WACE,OAASL,EAAAM,IAAAC,WAAA,CAAA,EACX,EASMC,EAAAA,MACE,IAKEC,QAAAC,UAAAC,MAAA,WAAA,OAAAV,QAAO,0CAAwB,MASzCL,OAAAC,eAAAC,QAAA,sBAAA,CAAAc,YAAA,EAAAC,IAAA,WAAA,OAAAV,EAAAA,mBAAA,IAAAL,QAAAgB,cANO,SAAuBC,GAC5B,aACGC,WACC,CAAAC,SAAAX,EAAAA,IAACF,EAAwB,IAAGW,KAGlC"}

package/dist/visual-editing/index.d.cts

@@ -10,10 +10,6 @@ export {createDataAttribute}
 
 export {CreateDataAttributeProps}
 
-/**
- * Enables visual editing on the front-end
- * @see https://www.sanity.io/docs/introduction-to-visual-editing
- */
 export declare function VisualEditing(props: VisualEditingProps): ReactElement
 
 export {}

package/dist/visual-editing/index.d.ts

@@ -10,10 +10,6 @@ export {createDataAttribute}
 
 export {CreateDataAttributeProps}
 
-/**
- * Enables visual editing on the front-end
- * @see https://www.sanity.io/docs/introduction-to-visual-editing
- */
 export declare function VisualEditing(props: VisualEditingProps): ReactElement
 
 export {}

package/dist/visual-editing/index.js

@@ -1 +1 @@
-import{jsx as t}from"react/jsx-runtime";import{lazy as i,Suspense as r}from"react";import{createDataAttribute as a}from"@sanity/visual-editing/create-data-attribute";const e=i((()=>import("@sanity/visual-editing/remix").then((t=>({default:t.VisualEditing})))));function n(i){return t(r,{fallback:null,children:t(e,{...i})})}export{n as VisualEditing,a as createDataAttribute};//# sourceMappingURL=index.js.map
+import{jsx as t,Fragment as r}from"react/jsx-runtime";import{lazy as i,Suspense as e}from"react";import{createDataAttribute as n}from"@sanity/visual-editing/create-data-attribute";const o=typeof document>"u"?function(){return t(r,{})}:i((()=>import("../_chunks-es/VisualEditing.client.js")));function u(r){return t(e,{children:t(o,{...r})})}export{u as VisualEditing,n as createDataAttribute};//# sourceMappingURL=index.js.map

package/dist/visual-editing/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/visual-editing/VisualEditing.tsx"],"sourcesContent":["import type {VisualEditingProps} from '@sanity/visual-editing/remix'\nimport {lazy, type ReactElement, Suspense} from 'react'\n\nconst VisualEditingComponent = lazy(() =>\n  import('@sanity/visual-editing/remix').then((mod) => ({default: mod.VisualEditing})),\n)\n\n/**\n * Enables visual editing on the front-end\n * @see https://www.sanity.io/docs/introduction-to-visual-editing\n */\nexport function VisualEditing(props: VisualEditingProps): ReactElement {\n  return (\n    <Suspense fallback={null}>\n      <VisualEditingComponent {...props} />\n    </Suspense>\n  )\n}\n"],"names":["VisualEditingComponent","lazy","import","then","mod","default","VisualEditing","props","jsx","Suspense","fallback","children"],"mappings":"sKAGA,MAAMA,EAAyBC,GAAK,IAClCC,OAAO,gCAAgCC,MAAMC,IAAA,CAAUC,QAASD,EAAIE,oBAO/D,SAASA,EAAcC,GAE1B,OAACC,EAAAC,GAASC,SAAU,KAClBC,SAACH,EAAAR,EAAwB,IAAGO,KAGlC"}
+{"version":3,"file":"index.js","sources":["../../src/visual-editing/VisualEditing.tsx"],"sourcesContent":["import type {VisualEditingProps} from '@sanity/visual-editing/remix'\nimport {lazy, type ReactElement, Suspense} from 'react'\n\n/**\n * Provide a consistent fallback to prevent hydration mismatch errors.\n */\nfunction VisualEditingFallback(): ReactElement {\n  return <></>\n}\n\n/**\n * If server-side rendering, then return the fallback instead of the heavy dependency.\n * @see https://remix.run/docs/en/1.14.3/guides/constraints#browser-only-code-on-the-server\n */\nconst VisualEditingComponent =\n  typeof document === 'undefined'\n    ? VisualEditingFallback\n    : lazy(\n        () =>\n          /**\n           * `lazy` expects the component as the default export\n           * @see https://react.dev/reference/react/lazy\n           */\n          import('./VisualEditing.client'),\n      )\n\nexport function VisualEditing(props: VisualEditingProps): ReactElement {\n  return (\n    <Suspense>\n      <VisualEditingComponent {...props} />\n    </Suspense>\n  )\n}\n"],"names":["jsx","Fragment","lazy","Suspense","createDataAttribute","VisualEditingComponent","document","import","VisualEditing","props","children"],"mappings":"cAMAA,cAAAC,MAAA,mCAAAC,cAAAC,MAAA,sCAAAC,MAAA,+CAQA,MAAMC,SACGC,SAAa,IATtB,WACW,OAAAN,EAAAC,EAAA,CAAA,EACX,EASMC,GACE,IAKEK,OAAO,2CAGV,SAASC,EAAcC,YAEzBN,EACC,CAAAO,SAAAV,EAACK,EAAwB,IAAGI,KAGlC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hydrogen-sanity",
-  "version": "4.0.2",
+  "version": "4.0.3",
   "description": "Sanity.io toolkit for Hydrogen",
   "keywords": [
     "sanity",

package/src/visual-editing/VisualEditing.client.tsx

@@ -0,0 +1,16 @@
+import {VisualEditing} from '@sanity/visual-editing/remix'
+
+/**
+ * Prevent a consumer from importing into a worker/server bundle.
+ */
+if (typeof document === 'undefined') {
+  throw new Error(
+    'Visual editing should only run client-side. Please check that this file is not being imported into a worker or server bundle.',
+  )
+}
+
+/**
+ * Enables visual editing on the front-end
+ * @see https://www.sanity.io/docs/introduction-to-visual-editing
+ */
+export default VisualEditing

package/src/visual-editing/VisualEditing.tsx

@@ -1,17 +1,32 @@
 import type {VisualEditingProps} from '@sanity/visual-editing/remix'
 import {lazy, type ReactElement, Suspense} from 'react'
 
-const VisualEditingComponent = lazy(() =>
-  import('@sanity/visual-editing/remix').then((mod) => ({default: mod.VisualEditing})),
-)
+/**
+ * Provide a consistent fallback to prevent hydration mismatch errors.
+ */
+function VisualEditingFallback(): ReactElement {
+  return <></>
+}
 
 /**
- * Enables visual editing on the front-end
- * @see https://www.sanity.io/docs/introduction-to-visual-editing
+ * If server-side rendering, then return the fallback instead of the heavy dependency.
+ * @see https://remix.run/docs/en/1.14.3/guides/constraints#browser-only-code-on-the-server
  */
+const VisualEditingComponent =
+  typeof document === 'undefined'
+    ? VisualEditingFallback
+    : lazy(
+        () =>
+          /**
+           * `lazy` expects the component as the default export
+           * @see https://react.dev/reference/react/lazy
+           */
+          import('./VisualEditing.client'),
+      )
+
 export function VisualEditing(props: VisualEditingProps): ReactElement {
   return (
-    <Suspense fallback={null}>
+    <Suspense>
       <VisualEditingComponent {...props} />
     </Suspense>
   )