hydrogen-sanity 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Sanity.io <hello@sanity.io>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,372 @@
+# hydrogen-sanity
+
+> **Warning**
+> 
+> Please be advised that `hydrogen-sanity` is still under development and available in pre-release. This package could change before it's officially released, so check back for updates and please provide any feedback you might have here.
+
+[Sanity.io](https://www.sanity.io) toolkit for [Hydrogen](https://hydrogen.shopify.dev/)
+
+**Features:**
+
+- Cacheable queries to Sanity APICDN
+- Client-side live real-time preview using an API token
+
+> **Note**
+> 
+> Using this package isn't strictly required for working with Sanity in a Hydrogen storefront. If you'd like to use `@sanity/client` directly, see [Using `@sanity/client` directly](#using-sanityclient-directly) below.
+
+## Installation
+
+```sh
+npm install hydrogen-sanity@beta
+```
+
+```sh
+yarn add hydrogen-sanity@beta
+```
+
+```sh
+pnpm install hydrogen-sanity@beta
+```
+
+## Usage
+
+Update the server file to include the Sanity client:
+
+```ts
+// ./server.ts
+
+// ...all other imports
+import {createSanityClient, PreviewSession} from 'hydrogen-sanity';
+
+// Inside the default export
+export default () => {
+
+  // 1. Add check for Preview Session
+  const [cache, session, previewSession] = await Promise.all([
+    caches.open('hydrogen'),
+    HydrogenSession.init(request, [env.SESSION_SECRET]),
+    // 👇 Add preview session
+    PreviewSession.init(request, [env.SESSION_SECRET]),
+  ]);
+
+  // Leave all other functions like the storefront client as-is
+  const {storefront} = createStorefrontClient({ ... })
+
+  // 2. Add the Sanity client
+  const sanity = createSanityClient({
+    cache,
+    waitUntil,
+    // Optionally, pass session and token to enable live-preview
+    preview:
+      env.SANITY_PREVIEW_SECRET && env.SANITY_API_TOKEN
+        ? {
+            session: previewSession,
+            token: env.SANITY_API_TOKEN,
+          }
+        : undefined,
+    // Pass configuration options for Sanity client
+    config: {
+      projectId: env.SANITY_PROJECT_ID,
+      dataset: env.SANITY_DATASET,
+      apiVersion: env.SANITY_API_VERSION ?? '2023-03-30',
+      useCdn: process.env.NODE_ENV === 'production',
+    },
+  });
+
+  // 3. Add Sanity client to the request handler inside getLoadContext
+  const handleRequest = createRequestHandler({
+    // ...other settings
+    getLoadContext: () => ({
+      // ...other providers
+      sanity,
+    }),
+  });
+}
+```
+
+Update your environment variables with settings from your Sanity project. Copy these from https://www.sanity.io/manage or run `npx sanity@latest init --env` to fill the minimum required values from a new or existing project.
+
+```sh
+# Project ID
+SANITY_PROJECT_ID=""
+# Dataset name
+SANITY_DATASET=""
+# (Optional) Sanity API version
+SANITY_API_VERSION=""
+# Sanity token to authenticate requests in "preview" mode,
+# with `viewer` role or higher access
+# https://www.sanity.io/docs/http-auth
+SANITY_API_TOKEN=""
+# Secret for authenticating preview mode
+SANITY_PREVIEW_SECRET=""
+```
+
+### Satisfy TypeScript
+
+Update the environment variables in `Env`
+
+```ts
+// ./remix.env.d.ts
+import type {Sanity} from 'hydrogen-sanity'
+
+declare global {
+  // ...other Types
+
+  interface Env {
+    // ...other variables
+    SANITY_PREVIEW_SECRET: string
+    SANITY_API_TOKEN: string
+    SANITY_PROJECT_ID: string
+    SANITY_DATASET: string
+    SANITY_API_VERSION: string
+  }
+}
+
+declare module '@shopify/remix-oxygen' {
+  export interface AppLoadContext {
+    // ...other Types
+    sanity: Sanity
+  }
+}
+```
+
+### Fetching Sanity data with `query`
+
+Query Sanity API and cache the response (defaults to `CacheLong` caching strategy):
+
+```ts
+export async function loader({context, params}: LoaderArgs) {
+  const homepage = await context.sanity.query({
+    query: `*[_type == "page" && _id == $id][0]`,
+    params: {
+      id: 'home',
+    },
+    // optionally pass a caching strategy
+    // cache: CacheShort()
+  })
+
+  return json({
+    homepage,
+  })
+}
+```
+
+To use other client methods, or to use `fetch` without caching, the Sanity client is also available:
+
+```ts
+export async function loader({context, params}: LoaderArgs) {
+  const homepage = await context.sanity.client.fetch(
+    `*[_type == "page" && _id == $id][0]`,
+    {id: 'home'}
+  );
+
+  return json({
+    homepage,
+  });
+```
+
+### Live preview
+
+Enable real-time, live preview by streaming dataset updates to the browser.
+
+First setup your root route to enable preview mode across the entire application, if the preview session is found:
+
+```tsx
+// ./app/root.tsx
+
+// ...other imports
+import {Preview, type PreviewData, isPreviewModeEnabled} from 'hydrogen-sanity'
+
+export async function loader({context}: LoaderArgs) {
+  const preview: PreviewData | undefined = isPreviewModeEnabled(context.sanity.preview)
+    ? {
+        projectId: context.sanity.preview.projectId,
+        dataset: context.sanity.preview.dataset,
+        token: context.sanity.preview.token,
+      }
+    : undefined
+
+  return json({
+    // ... other loader data
+    preview,
+  })
+}
+
+export default function App() {
+  const {preview, ...data} = useLoaderData<typeof loader>()
+
+  return (
+    <html>
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        {/* 👇 Wrap <Outlet /> in Preview component */}
+        <Preview preview={preview}>
+          <Outlet />
+        </Preview>
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
+  )
+}
+```
+
+You can also pass a `ReactNode` to render a loading indicator or adjust the default message:
+
+```tsx
+import {PreviewLoading} from '~/components/PreviewLoading';
+
+// pass a string or your own React component to show while data is loading
+<Preview preview={preview} fallback={<PreviewLoading />}>
+```
+
+Next, for any route that needs to render a preview, wrap it in a `Preview` component which re-runs the same query client-side but will render draft content in place of published content, if it exists. Updating in real-time as changes are streamed in.
+
+The `usePreview` hook conditionally renders the preview component if the preview session is found, otherwise, it renders the default component.
+
+```tsx
+// Any route file, such as ./app/routes/index.tsx
+
+// ...all other imports
+import {usePreviewComponent, usePreviewContext} from 'hydrogen-sanity'
+
+// ...all other exports like `loader` and `meta`
+// Tip: In preview mode, pass "query" and "params" from the loader to the component
+
+// Default export where content is rendered
+export default function Index() {
+  // Get initial data
+  const {homepage} = useLoaderData<typeof loader>()
+  // Conditionally render preview-enabled component (see below)
+  const Component = usePreviewComponent(Route, Preview)
+
+  return <Component homepage={homepage} />
+}
+
+// Renders Sanity content, whether powered by Preview or not
+function Route({homepage}) {
+  return <>{/* ...render homepage using data */}</>
+}
+
+// Fetches content client-side and renders live updates of draft content
+function Preview(props) {
+  const {usePreview} = usePreviewContext()!
+  const homepage = usePreview(
+    `*[_type == "page" && _id == $id][0]`,
+    {id: 'home'},
+    // the initial data from the loader, which
+    // can help speed up loading
+    props.homepage
+  )
+
+  return <Route homepage={homepage} />
+}
+```
+
+### Entering preview mode
+
+For users to enter preview mode, they will need to visit a route that sets a preview cookie. The logic of what routes should set the preview cookie is up to you, in this example, it checks if a parameter in the URL matches one of your environment variables on the server.
+
+```tsx
+// ./app/routes/api.preview.tsx
+import {LoaderFunction, redirect} from '@shopify/remix-oxygen'
+
+export const loader: LoaderFunction = async function ({request, context}) {
+  const {env, sanity} = context
+  const {searchParams} = new URL(request.url)
+
+  if (
+    !sanity.preview?.session ||
+    !searchParams.has('secret') ||
+    searchParams.get('secret') !== env.SANITY_PREVIEW_SECRET
+  ) {
+    throw new Response('Invalid secret', {
+      status: 401,
+      statusText: 'Unauthorized',
+    })
+  }
+
+  sanity.preview.session.set('projectId', env.SANITY_PROJECT_ID)
+
+  return redirect(`/`, {
+    status: 307,
+    headers: {
+      'Set-Cookie': await sanity.preview.session.commit(),
+    },
+  })
+}
+```
+
+## Limits
+
+The real-time preview isn't optimized and comes with a configured limit of 3000 documents. You can experiment with larger datasets by configuring the hook with `documentLimit: <Integer>`. Be aware that this might significantly affect the preview performance.
+You may use the `includeTypes` option to reduce the amount of documents and reduce the risk of hitting the `documentLimit`:
+
+## Using `@sanity/client` directly
+
+For whatever reason, if you choose not to use `hydrogen-sanity` you can still use `@sanity/client` to get Sanity content into your Hydrogen storefront:
+
+```ts
+// ./server.ts
+
+// ...all other imports
+import {createClient} from '@sanity/client';
+
+export default {
+  // ... all other functions
+
+  // Create the Sanity Client
+  const sanity = createClient({
+    projectId: env.SANITY_PROJECT_ID,
+    dataset: env.SANITY_DATASET,
+    apiVersion: env.SANITY_API_VERSION ?? '2023-03-30',
+    useCdn: process.env.NODE_ENV === 'production',
+  });
+
+  // Pass it along to every request by
+  // adding it to `handleRequest`
+  const handleRequest = createRequestHandler({
+    // ...other settings
+    getLoadContext: () => ({
+      // ...other context items
+      sanity
+    }),
+  });
+}
+```
+
+Then, in your loaders you'll have access to the client in the request context:
+
+```ts
+export async function loader({context, params}: LoaderArgs) {
+  const homepage = await context.sanity.fetch(
+    `*[_type == "page" && _id == $id][0]`,
+    {id: 'home'}
+  );
+
+  return json({
+    homepage,
+  });
+```
+
+## License
+
+[MIT](LICENSE) © Sanity.io <hello@sanity.io>
+
+## Develop & test
+
+This plugin uses [@sanity/pkg-utils](https://github.com/sanity-io/pkg-utils)
+with default configuration for build & watch scripts.
+
+### Release new version
+
+Run ["CI & Release" workflow](https://github.com/sanity-io/hydrogen-sanity/actions/workflows/main.yml).
+Make sure to select the main branch and check "Release new version".
+
+Semantic release will only release on configured branches, so it is safe to run release on any branch.

package/dist/index.d.ts

@@ -0,0 +1,125 @@
+import type {CacheShort} from '@shopify/hydrogen'
+import {ClientConfig} from '@sanity/client'
+import {ElementType} from 'react'
+import {JSX as JSX_2} from 'react/jsx-runtime'
+import {Params} from '@sanity/preview-kit'
+import {ReactNode} from 'react'
+import {SanityClient} from '@sanity/client'
+import {Session} from '@shopify/remix-oxygen'
+import {SessionStorage} from '@shopify/remix-oxygen'
+
+/** @see https://shopify.dev/docs/custom-storefronts/hydrogen/data-fetching/cache#caching-strategies */
+export declare type CachingStrategy = ReturnType<typeof CacheShort>
+
+/**
+ * Create Sanity provider with API client.
+ */
+export declare function createSanityClient(options: CreateSanityClientOptions): Sanity
+
+declare type CreateSanityClientOptions = EnvironmentOptions & {
+  config: ClientConfig & Required<Pick<ClientConfig, 'projectId' | 'dataset'>>
+  preview?: {
+    session: PreviewSession
+    token: string
+  }
+}
+
+export declare type EnvironmentOptions = {
+  /**
+   * A Cache API instance.
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/Cache
+   */
+  cache: Cache
+  /**
+   * A runtime utility for serverless environments
+   * @see https://developers.cloudflare.com/workers/runtime-apis/fetch-event/#waituntil
+   */
+  waitUntil: ExecutionContext['waitUntil']
+}
+
+declare interface ExecutionContext {
+  waitUntil(promise: Promise<any>): void
+}
+
+export declare function isPreviewModeEnabled(preview: Sanity['preview']): preview is {
+  session: PreviewSession
+} & PreviewData
+
+/**
+ * Conditionally apply `PreviewSuspense` boundary
+ * @see https://www.sanity.io/docs/preview-content-on-site
+ */
+export declare function Preview(props: PreviewProps): JSX_2.Element
+
+export declare type PreviewData = {
+  projectId: string
+  dataset: string
+  token: string
+}
+
+export declare type PreviewProps = {
+  children: ReactNode
+  fallback?: ReactNode
+  preview?: PreviewData
+}
+
+export declare class PreviewSession {
+  private sessionStorage
+  private session
+  constructor(sessionStorage: SessionStorage, session: Session)
+  static init(request: Request, secrets: string[]): Promise<PreviewSession>
+  has(key: string): boolean
+  destroy(): Promise<string>
+  set(key: string, value: any): void
+  commit(): Promise<string>
+}
+
+export declare type Sanity = {
+  client: SanityClient
+  preview?:
+    | ({
+        session: PreviewSession
+      } & PreviewData)
+    | {
+        session: PreviewSession
+      }
+  query<T>(options: useSanityQuery): Promise<T>
+}
+
+/**
+ * Create an SHA-256 hash as a hex string
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/digest#converting_a_digest_to_a_hex_string
+ */
+export declare function sha256(message: string): Promise<string>
+
+declare type UsePreview = <R = any, P extends Params = Params, Q extends string = string>(
+  query: Q,
+  params?: P,
+  serverSnapshot?: R
+) => R
+
+/**
+ * Select and memoize which component to render based on preview mode
+ */
+export declare function usePreviewComponent<T>(
+  component: ElementType<T>,
+  preview: ElementType<T>
+): ElementType<T>
+
+export declare const usePreviewContext: () =>
+  | {
+      /**
+       * Query Sanity and subscribe to changes, optionally
+       * passing a server snapshot to speed up hydration
+       */
+      usePreview: UsePreview
+    }
+  | undefined
+
+declare type useSanityQuery = {
+  query: string
+  params?: Record<string, unknown>
+  cache?: CachingStrategy
+}
+
+export {}

package/dist/index.esm.js

@@ -0,0 +1,152 @@
+import { createClient } from '@sanity/client';
+import { createWithCache_unstable, CacheLong } from '@shopify/hydrogen';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { definePreview, PreviewSuspense } from '@sanity/preview-kit';
+import { createCookieSessionStorage } from '@shopify/remix-oxygen';
+import { createContext, useContext, useMemo } from 'react';
+function createSanityClient(options) {
+  const {
+    cache,
+    waitUntil,
+    preview,
+    config
+  } = options;
+  const withCache = createWithCache_unstable({
+    cache,
+    waitUntil
+  });
+  const sanity = {
+    client: createClient(config),
+    async query(_ref) {
+      let {
+        query,
+        params,
+        cache: strategy = CacheLong()
+      } = _ref;
+      const queryHash = await hashQuery(query, params);
+      return withCache(queryHash, strategy, () => sanity.client.fetch(query, params));
+    }
+  };
+  if (preview) {
+    sanity.preview = {
+      session: preview.session
+    };
+    if (preview.session.has("projectId")) {
+      sanity.preview = {
+        ...sanity.preview,
+        projectId: config.projectId,
+        dataset: config.dataset,
+        token: preview.token
+      };
+      sanity.client = sanity.client.withConfig({
+        useCdn: false,
+        token: preview.token
+      });
+      sanity.query = _ref2 => {
+        let {
+          query,
+          params
+        } = _ref2;
+        return sanity.client.fetch(query, params);
+      };
+    }
+  }
+  return sanity;
+}
+function isPreviewModeEnabled(preview) {
+  return (preview == null ? void 0 : preview.token) !== null;
+}
+async function sha256(message) {
+  const messageBuffer = await new TextEncoder().encode(message);
+  const hashBuffer = await crypto.subtle.digest("SHA-256", messageBuffer);
+  return Array.from(new Uint8Array(hashBuffer)).map(b => b.toString(16).padStart(2, "0")).join("");
+}
+function hashQuery(query, params) {
+  let hash = query;
+  if (params !== null) {
+    hash += JSON.stringify(params);
+  }
+  return sha256(hash);
+}
+class PreviewSession {
+  // eslint-disable-next-line no-useless-constructor, no-empty-function
+  constructor(sessionStorage, session) {
+    this.sessionStorage = sessionStorage;
+    this.session = session;
+  }
+  static async init(request, secrets) {
+    const storage = createCookieSessionStorage({
+      cookie: {
+        name: "__preview",
+        httpOnly: true,
+        sameSite: true,
+        secrets
+      }
+    });
+    const session = await storage.getSession(request.headers.get("Cookie"));
+    return new this(storage, session);
+  }
+  has(key) {
+    return this.session.has(key);
+  }
+  // get(key: string) {
+  //   return this.session.get(key);
+  // }
+  destroy() {
+    return this.sessionStorage.destroySession(this.session);
+  }
+  // unset(key: string) {
+  //   this.session.unset(key);
+  // }
+  set(key, value) {
+    this.session.set(key, value);
+  }
+  commit() {
+    return this.sessionStorage.commitSession(this.session);
+  }
+}
+const PreviewContext = createContext(void 0);
+const usePreviewContext = () => useContext(PreviewContext);
+function Preview(props) {
+  var _a;
+  const {
+    children,
+    preview
+  } = props;
+  if (!(preview == null ? void 0 : preview.token)) {
+    return /* @__PURE__ */jsx(Fragment, {
+      children
+    });
+  }
+  const fallback = (_a = props.fallback) != null ? _a : /* @__PURE__ */jsx("div", {
+    children: "Loading preview..."
+  });
+  const {
+    projectId,
+    dataset,
+    token
+  } = preview;
+  const _usePreview = definePreview({
+    projectId,
+    dataset,
+    overlayDrafts: true
+  });
+  function usePreview(query, params, serverSnapshot) {
+    return _usePreview(token, query, params, serverSnapshot);
+  }
+  return /* @__PURE__ */jsx(PreviewContext.Provider, {
+    value: {
+      usePreview
+    },
+    children: /* @__PURE__ */jsx(PreviewSuspense, {
+      fallback,
+      children
+    })
+  });
+}
+function usePreviewComponent(component, preview) {
+  const isPreview = Boolean(usePreviewContext());
+  return useMemo(() => isPreview ? preview : component, [component, isPreview, preview]);
+}
+export { Preview, PreviewSession, createSanityClient, isPreviewModeEnabled, sha256, usePreviewComponent, usePreviewContext };
+//# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../src/client.ts","../src/preview.tsx"],"sourcesContent":["import {type ClientConfig, createClient, type SanityClient} from '@sanity/client'\n// eslint-disable-next-line camelcase\nimport {CacheLong, createWithCache_unstable} from '@shopify/hydrogen'\n\nimport type {PreviewData, PreviewSession} from './preview'\nimport type {CachingStrategy, EnvironmentOptions} from './types'\n\ntype CreateSanityClientOptions = EnvironmentOptions & {\n  config: ClientConfig & Required<Pick<ClientConfig, 'projectId' | 'dataset'>>\n  preview?: {\n    session: PreviewSession\n    token: string\n  }\n}\n\ntype useSanityQuery = {\n  query: string\n  params?: Record<string, unknown>\n  cache?: CachingStrategy\n}\n\nexport type Sanity = {\n  client: SanityClient\n  preview?: ({session: PreviewSession} & PreviewData) | {session: PreviewSession}\n  query<T>(options: useSanityQuery): Promise<T>\n}\n\n/**\n * Create Sanity provider with API client.\n */\nexport function createSanityClient(options: CreateSanityClientOptions): Sanity {\n  const {cache, waitUntil, preview, config} = options\n  const withCache = createWithCache_unstable({\n    cache,\n    waitUntil,\n  })\n\n  const sanity: Sanity = {\n    client: createClient(config),\n    async query({query, params, cache: strategy = CacheLong()}) {\n      const queryHash = await hashQuery(query, params)\n\n      return withCache(queryHash, strategy, () => sanity.client.fetch(query, params))\n    },\n  }\n\n  if (preview) {\n    sanity.preview = {session: preview.session}\n\n    if (preview.session.has('projectId')) {\n      sanity.preview = {\n        ...sanity.preview,\n        projectId: config.projectId,\n        dataset: config.dataset,\n        token: preview.token,\n      }\n\n      sanity.client = sanity.client.withConfig({\n        useCdn: false,\n        token: preview.token,\n      })\n\n      sanity.query = ({query, params}) => {\n        return sanity.client.fetch(query, params)\n      }\n    }\n  }\n\n  return sanity\n}\n\nexport function isPreviewModeEnabled(\n  preview: Sanity['preview']\n): preview is {session: PreviewSession} & PreviewData {\n  // @ts-expect-error\n  return preview?.token !== null\n}\n\n/**\n * Create an SHA-256 hash as a hex string\n * @see https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/digest#converting_a_digest_to_a_hex_string\n */\nexport async function sha256(message: string): Promise<string> {\n  // encode as UTF-8\n  const messageBuffer = await new TextEncoder().encode(message)\n  // hash the message\n  const hashBuffer = await crypto.subtle.digest('SHA-256', messageBuffer)\n  // convert bytes to hex string\n  return Array.from(new Uint8Array(hashBuffer))\n    .map((b) => b.toString(16).padStart(2, '0'))\n    .join('')\n}\n\n/**\n * Hash query and its parameters for use as cache key\n * NOTE: Oxygen deployment will break if the cache key is long or contains `\\n`\n */\nfunction hashQuery(\n  query: useSanityQuery['query'],\n  params: useSanityQuery['params']\n): Promise<string> {\n  let hash = query\n\n  if (params !== null) {\n    hash += JSON.stringify(params)\n  }\n\n  return sha256(hash)\n}\n","/* eslint-disable react/require-default-props */\nimport {definePreview, type Params, PreviewSuspense} from '@sanity/preview-kit'\nimport {createCookieSessionStorage, type Session, type SessionStorage} from '@shopify/remix-oxygen'\nimport {createContext, ElementType, type ReactNode, useContext, useMemo} from 'react'\n\ntype UsePreview = <R = any, P extends Params = Params, Q extends string = string>(\n  query: Q,\n  params?: P,\n  serverSnapshot?: R\n) => R\n\nexport type PreviewData = {\n  projectId: string\n  dataset: string\n  token: string\n}\n\nexport type PreviewProps = {\n  children: ReactNode\n  fallback?: ReactNode\n  preview?: PreviewData\n}\n\nexport class PreviewSession {\n  // eslint-disable-next-line no-useless-constructor, no-empty-function\n  constructor(private sessionStorage: SessionStorage, private session: Session) {}\n\n  static async init(request: Request, secrets: string[]) {\n    const storage = createCookieSessionStorage({\n      cookie: {\n        name: '__preview',\n        httpOnly: true,\n        sameSite: true,\n        secrets,\n      },\n    })\n\n    const session = await storage.getSession(request.headers.get('Cookie'))\n\n    return new this(storage, session)\n  }\n\n  has(key: string) {\n    return this.session.has(key)\n  }\n\n  // get(key: string) {\n  //   return this.session.get(key);\n  // }\n\n  destroy() {\n    return this.sessionStorage.destroySession(this.session)\n  }\n\n  // unset(key: string) {\n  //   this.session.unset(key);\n  // }\n\n  set(key: string, value: any) {\n    this.session.set(key, value)\n  }\n\n  commit() {\n    return this.sessionStorage.commitSession(this.session)\n  }\n}\n\nconst PreviewContext = createContext<\n  | {\n      /**\n       * Query Sanity and subscribe to changes, optionally\n       * passing a server snapshot to speed up hydration\n       */\n      usePreview: UsePreview\n    }\n  | undefined\n>(undefined)\n\nexport const usePreviewContext = () => useContext(PreviewContext)\n\n/**\n * Conditionally apply `PreviewSuspense` boundary\n * @see https://www.sanity.io/docs/preview-content-on-site\n */\nexport function Preview(props: PreviewProps) {\n  const {children, preview} = props\n\n  if (!preview?.token) {\n    return <>{children}</>\n  }\n\n  const fallback = props.fallback ?? <div>Loading preview...</div>\n  const {projectId, dataset, token} = preview\n  const _usePreview = definePreview({\n    projectId,\n    dataset,\n    overlayDrafts: true,\n  })\n\n  function usePreview<R = any, P extends Params = Params, Q extends string = string>(\n    query: Q,\n    params?: P,\n    serverSnapshot?: R\n  ): R {\n    return _usePreview(token, query, params, serverSnapshot)\n  }\n  usePreview satisfies UsePreview\n\n  return (\n    <PreviewContext.Provider value={{usePreview}}>\n      <PreviewSuspense fallback={fallback}>{children}</PreviewSuspense>\n    </PreviewContext.Provider>\n  )\n}\n\n/**\n * Select and memoize which component to render based on preview mode\n */\nexport function usePreviewComponent<T>(component: ElementType<T>, preview: ElementType<T>) {\n  const isPreview = Boolean(usePreviewContext())\n\n  return useMemo(() => (isPreview ? preview : component), [component, isPreview, preview])\n}\n"],"names":["createSanityClient","options","cache","waitUntil","preview","config","withCache","createWithCache_unstable","sanity","client","createClient","query","params","strategy","CacheLong","_ref","queryHash","hashQuery","fetch","session","has","projectId","dataset","token","withConfig","useCdn","_ref2","isPreviewModeEnabled","sha256","message","messageBuffer","TextEncoder","encode","hashBuffer","crypto","subtle","digest","Array","from","Uint8Array","map","b","toString","padStart","join","hash","JSON","stringify","PreviewSession","constructor","sessionStorage","init","request","secrets","storage","createCookieSessionStorage","cookie","name","httpOnly","sameSite","getSession","headers","get","key","destroy","destroySession","set","value","commit","commitSession","PreviewContext","createContext","usePreviewContext","useContext","Preview","props","_a","children","fallback","jsx","_usePreview","definePreview","overlayDrafts","usePreview","serverSnapshot","Provider","PreviewSuspense","usePreviewComponent","component","isPreview","Boolean","useMemo"],"mappings":"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"}

package/dist/index.js

@@ -0,0 +1,163 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var client = require('@sanity/client');
+var hydrogen = require('@shopify/hydrogen');
+var jsxRuntime = require('react/jsx-runtime');
+var previewKit = require('@sanity/preview-kit');
+var remixOxygen = require('@shopify/remix-oxygen');
+var react = require('react');
+function createSanityClient(options) {
+  const {
+    cache,
+    waitUntil,
+    preview,
+    config
+  } = options;
+  const withCache = hydrogen.createWithCache_unstable({
+    cache,
+    waitUntil
+  });
+  const sanity = {
+    client: client.createClient(config),
+    async query(_ref) {
+      let {
+        query,
+        params,
+        cache: strategy = hydrogen.CacheLong()
+      } = _ref;
+      const queryHash = await hashQuery(query, params);
+      return withCache(queryHash, strategy, () => sanity.client.fetch(query, params));
+    }
+  };
+  if (preview) {
+    sanity.preview = {
+      session: preview.session
+    };
+    if (preview.session.has("projectId")) {
+      sanity.preview = {
+        ...sanity.preview,
+        projectId: config.projectId,
+        dataset: config.dataset,
+        token: preview.token
+      };
+      sanity.client = sanity.client.withConfig({
+        useCdn: false,
+        token: preview.token
+      });
+      sanity.query = _ref2 => {
+        let {
+          query,
+          params
+        } = _ref2;
+        return sanity.client.fetch(query, params);
+      };
+    }
+  }
+  return sanity;
+}
+function isPreviewModeEnabled(preview) {
+  return (preview == null ? void 0 : preview.token) !== null;
+}
+async function sha256(message) {
+  const messageBuffer = await new TextEncoder().encode(message);
+  const hashBuffer = await crypto.subtle.digest("SHA-256", messageBuffer);
+  return Array.from(new Uint8Array(hashBuffer)).map(b => b.toString(16).padStart(2, "0")).join("");
+}
+function hashQuery(query, params) {
+  let hash = query;
+  if (params !== null) {
+    hash += JSON.stringify(params);
+  }
+  return sha256(hash);
+}
+class PreviewSession {
+  // eslint-disable-next-line no-useless-constructor, no-empty-function
+  constructor(sessionStorage, session) {
+    this.sessionStorage = sessionStorage;
+    this.session = session;
+  }
+  static async init(request, secrets) {
+    const storage = remixOxygen.createCookieSessionStorage({
+      cookie: {
+        name: "__preview",
+        httpOnly: true,
+        sameSite: true,
+        secrets
+      }
+    });
+    const session = await storage.getSession(request.headers.get("Cookie"));
+    return new this(storage, session);
+  }
+  has(key) {
+    return this.session.has(key);
+  }
+  // get(key: string) {
+  //   return this.session.get(key);
+  // }
+  destroy() {
+    return this.sessionStorage.destroySession(this.session);
+  }
+  // unset(key: string) {
+  //   this.session.unset(key);
+  // }
+  set(key, value) {
+    this.session.set(key, value);
+  }
+  commit() {
+    return this.sessionStorage.commitSession(this.session);
+  }
+}
+const PreviewContext = react.createContext(void 0);
+const usePreviewContext = () => react.useContext(PreviewContext);
+function Preview(props) {
+  var _a;
+  const {
+    children,
+    preview
+  } = props;
+  if (!(preview == null ? void 0 : preview.token)) {
+    return /* @__PURE__ */jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children
+    });
+  }
+  const fallback = (_a = props.fallback) != null ? _a : /* @__PURE__ */jsxRuntime.jsx("div", {
+    children: "Loading preview..."
+  });
+  const {
+    projectId,
+    dataset,
+    token
+  } = preview;
+  const _usePreview = previewKit.definePreview({
+    projectId,
+    dataset,
+    overlayDrafts: true
+  });
+  function usePreview(query, params, serverSnapshot) {
+    return _usePreview(token, query, params, serverSnapshot);
+  }
+  return /* @__PURE__ */jsxRuntime.jsx(PreviewContext.Provider, {
+    value: {
+      usePreview
+    },
+    children: /* @__PURE__ */jsxRuntime.jsx(previewKit.PreviewSuspense, {
+      fallback,
+      children
+    })
+  });
+}
+function usePreviewComponent(component, preview) {
+  const isPreview = Boolean(usePreviewContext());
+  return react.useMemo(() => isPreview ? preview : component, [component, isPreview, preview]);
+}
+exports.Preview = Preview;
+exports.PreviewSession = PreviewSession;
+exports.createSanityClient = createSanityClient;
+exports.isPreviewModeEnabled = isPreviewModeEnabled;
+exports.sha256 = sha256;
+exports.usePreviewComponent = usePreviewComponent;
+exports.usePreviewContext = usePreviewContext;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/client.ts","../src/preview.tsx"],"sourcesContent":["import {type ClientConfig, createClient, type SanityClient} from '@sanity/client'\n// eslint-disable-next-line camelcase\nimport {CacheLong, createWithCache_unstable} from '@shopify/hydrogen'\n\nimport type {PreviewData, PreviewSession} from './preview'\nimport type {CachingStrategy, EnvironmentOptions} from './types'\n\ntype CreateSanityClientOptions = EnvironmentOptions & {\n  config: ClientConfig & Required<Pick<ClientConfig, 'projectId' | 'dataset'>>\n  preview?: {\n    session: PreviewSession\n    token: string\n  }\n}\n\ntype useSanityQuery = {\n  query: string\n  params?: Record<string, unknown>\n  cache?: CachingStrategy\n}\n\nexport type Sanity = {\n  client: SanityClient\n  preview?: ({session: PreviewSession} & PreviewData) | {session: PreviewSession}\n  query<T>(options: useSanityQuery): Promise<T>\n}\n\n/**\n * Create Sanity provider with API client.\n */\nexport function createSanityClient(options: CreateSanityClientOptions): Sanity {\n  const {cache, waitUntil, preview, config} = options\n  const withCache = createWithCache_unstable({\n    cache,\n    waitUntil,\n  })\n\n  const sanity: Sanity = {\n    client: createClient(config),\n    async query({query, params, cache: strategy = CacheLong()}) {\n      const queryHash = await hashQuery(query, params)\n\n      return withCache(queryHash, strategy, () => sanity.client.fetch(query, params))\n    },\n  }\n\n  if (preview) {\n    sanity.preview = {session: preview.session}\n\n    if (preview.session.has('projectId')) {\n      sanity.preview = {\n        ...sanity.preview,\n        projectId: config.projectId,\n        dataset: config.dataset,\n        token: preview.token,\n      }\n\n      sanity.client = sanity.client.withConfig({\n        useCdn: false,\n        token: preview.token,\n      })\n\n      sanity.query = ({query, params}) => {\n        return sanity.client.fetch(query, params)\n      }\n    }\n  }\n\n  return sanity\n}\n\nexport function isPreviewModeEnabled(\n  preview: Sanity['preview']\n): preview is {session: PreviewSession} & PreviewData {\n  // @ts-expect-error\n  return preview?.token !== null\n}\n\n/**\n * Create an SHA-256 hash as a hex string\n * @see https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/digest#converting_a_digest_to_a_hex_string\n */\nexport async function sha256(message: string): Promise<string> {\n  // encode as UTF-8\n  const messageBuffer = await new TextEncoder().encode(message)\n  // hash the message\n  const hashBuffer = await crypto.subtle.digest('SHA-256', messageBuffer)\n  // convert bytes to hex string\n  return Array.from(new Uint8Array(hashBuffer))\n    .map((b) => b.toString(16).padStart(2, '0'))\n    .join('')\n}\n\n/**\n * Hash query and its parameters for use as cache key\n * NOTE: Oxygen deployment will break if the cache key is long or contains `\\n`\n */\nfunction hashQuery(\n  query: useSanityQuery['query'],\n  params: useSanityQuery['params']\n): Promise<string> {\n  let hash = query\n\n  if (params !== null) {\n    hash += JSON.stringify(params)\n  }\n\n  return sha256(hash)\n}\n","/* eslint-disable react/require-default-props */\nimport {definePreview, type Params, PreviewSuspense} from '@sanity/preview-kit'\nimport {createCookieSessionStorage, type Session, type SessionStorage} from '@shopify/remix-oxygen'\nimport {createContext, ElementType, type ReactNode, useContext, useMemo} from 'react'\n\ntype UsePreview = <R = any, P extends Params = Params, Q extends string = string>(\n  query: Q,\n  params?: P,\n  serverSnapshot?: R\n) => R\n\nexport type PreviewData = {\n  projectId: string\n  dataset: string\n  token: string\n}\n\nexport type PreviewProps = {\n  children: ReactNode\n  fallback?: ReactNode\n  preview?: PreviewData\n}\n\nexport class PreviewSession {\n  // eslint-disable-next-line no-useless-constructor, no-empty-function\n  constructor(private sessionStorage: SessionStorage, private session: Session) {}\n\n  static async init(request: Request, secrets: string[]) {\n    const storage = createCookieSessionStorage({\n      cookie: {\n        name: '__preview',\n        httpOnly: true,\n        sameSite: true,\n        secrets,\n      },\n    })\n\n    const session = await storage.getSession(request.headers.get('Cookie'))\n\n    return new this(storage, session)\n  }\n\n  has(key: string) {\n    return this.session.has(key)\n  }\n\n  // get(key: string) {\n  //   return this.session.get(key);\n  // }\n\n  destroy() {\n    return this.sessionStorage.destroySession(this.session)\n  }\n\n  // unset(key: string) {\n  //   this.session.unset(key);\n  // }\n\n  set(key: string, value: any) {\n    this.session.set(key, value)\n  }\n\n  commit() {\n    return this.sessionStorage.commitSession(this.session)\n  }\n}\n\nconst PreviewContext = createContext<\n  | {\n      /**\n       * Query Sanity and subscribe to changes, optionally\n       * passing a server snapshot to speed up hydration\n       */\n      usePreview: UsePreview\n    }\n  | undefined\n>(undefined)\n\nexport const usePreviewContext = () => useContext(PreviewContext)\n\n/**\n * Conditionally apply `PreviewSuspense` boundary\n * @see https://www.sanity.io/docs/preview-content-on-site\n */\nexport function Preview(props: PreviewProps) {\n  const {children, preview} = props\n\n  if (!preview?.token) {\n    return <>{children}</>\n  }\n\n  const fallback = props.fallback ?? <div>Loading preview...</div>\n  const {projectId, dataset, token} = preview\n  const _usePreview = definePreview({\n    projectId,\n    dataset,\n    overlayDrafts: true,\n  })\n\n  function usePreview<R = any, P extends Params = Params, Q extends string = string>(\n    query: Q,\n    params?: P,\n    serverSnapshot?: R\n  ): R {\n    return _usePreview(token, query, params, serverSnapshot)\n  }\n  usePreview satisfies UsePreview\n\n  return (\n    <PreviewContext.Provider value={{usePreview}}>\n      <PreviewSuspense fallback={fallback}>{children}</PreviewSuspense>\n    </PreviewContext.Provider>\n  )\n}\n\n/**\n * Select and memoize which component to render based on preview mode\n */\nexport function usePreviewComponent<T>(component: ElementType<T>, preview: ElementType<T>) {\n  const isPreview = Boolean(usePreviewContext())\n\n  return useMemo(() => (isPreview ? preview : component), [component, isPreview, preview])\n}\n"],"names":["createSanityClient","options","cache","waitUntil","preview","config","withCache","createWithCache_unstable","sanity","client","createClient","query","params","strategy","CacheLong","_ref","queryHash","hashQuery","fetch","session","has","projectId","dataset","token","withConfig","useCdn","_ref2","isPreviewModeEnabled","sha256","message","messageBuffer","TextEncoder","encode","hashBuffer","crypto","subtle","digest","Array","from","Uint8Array","map","b","toString","padStart","join","hash","JSON","stringify","PreviewSession","constructor","sessionStorage","init","request","secrets","storage","createCookieSessionStorage","cookie","name","httpOnly","sameSite","getSession","headers","get","key","destroy","destroySession","set","value","commit","commitSession","PreviewContext","createContext","usePreviewContext","useContext","Preview","props","_a","children","fallback","jsx","_usePreview","definePreview","overlayDrafts","usePreview","serverSnapshot","Provider","PreviewSuspense","usePreviewComponent","component","isPreview","Boolean","useMemo"],"mappings":"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"}

package/package.json

@@ -0,0 +1,93 @@
+{
+  "name": "hydrogen-sanity",
+  "version": "1.0.0",
+  "description": "Sanity.io toolkit for Hydrogen",
+  "keywords": [
+    "sanity",
+    "sanity.io",
+    "shopify",
+    "hydrogen",
+    "remix",
+    "live",
+    "preview"
+  ],
+  "homepage": "https://github.com/sanity-io/hydrogen-sanity#readme",
+  "bugs": {
+    "url": "https://github.com/sanity-io/hydrogen-sanity/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/sanity-io/hydrogen-sanity.git"
+  },
+  "license": "MIT",
+  "author": "Sanity.io <hello@sanity.io> <noah@sanity.io>",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "source": "./src/index.ts",
+      "require": "./dist/index.js",
+      "import": "./dist/index.esm.js",
+      "default": "./dist/index.esm.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.esm.js",
+  "source": "./src/index.ts",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "run-s clean && pkg-utils build --strict && pkg-utils --strict",
+    "clean": "rimraf dist",
+    "format": "prettier --write --cache --ignore-unknown .",
+    "link-watch": "plugin-kit link-watch",
+    "lint": "eslint .",
+    "prepublishOnly": "run-s build",
+    "watch": "pkg-utils watch --strict",
+    "prepare": "husky install"
+  },
+  "dependencies": {
+    "@sanity/client": "^6.0.1",
+    "@sanity/preview-kit": "^1.5.2"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^17.6.3",
+    "@commitlint/config-conventional": "^17.6.3",
+    "@sanity/pkg-utils": "^2.2.14",
+    "@sanity/semantic-release-preset": "^4.1.1",
+    "@shopify/hydrogen": "^2023.4.0",
+    "@shopify/remix-oxygen": "^1.0.5",
+    "@types/react": "^18.2.6",
+    "@typescript-eslint/eslint-plugin": "^5.59.5",
+    "@typescript-eslint/parser": "^5.59.5",
+    "eslint": "^8.40.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-config-sanity": "^6.0.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-simple-import-sort": "^10.0.0",
+    "husky": "^8.0.3",
+    "lint-staged": "^13.2.2",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.8.8",
+    "prettier-plugin-packagejson": "^2.4.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rimraf": "^5.0.0",
+    "typescript": "^5.0.4"
+  },
+  "peerDependencies": {
+    "@shopify/hydrogen": "^2023.4.0",
+    "@shopify/remix-oxygen": "^1.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "engines": {
+    "node": ">=16"
+  }
+}

package/src/client.ts

@@ -0,0 +1,109 @@
+import {type ClientConfig, createClient, type SanityClient} from '@sanity/client'
+// eslint-disable-next-line camelcase
+import {CacheLong, createWithCache_unstable} from '@shopify/hydrogen'
+
+import type {PreviewData, PreviewSession} from './preview'
+import type {CachingStrategy, EnvironmentOptions} from './types'
+
+type CreateSanityClientOptions = EnvironmentOptions & {
+  config: ClientConfig & Required<Pick<ClientConfig, 'projectId' | 'dataset'>>
+  preview?: {
+    session: PreviewSession
+    token: string
+  }
+}
+
+type useSanityQuery = {
+  query: string
+  params?: Record<string, unknown>
+  cache?: CachingStrategy
+}
+
+export type Sanity = {
+  client: SanityClient
+  preview?: ({session: PreviewSession} & PreviewData) | {session: PreviewSession}
+  query<T>(options: useSanityQuery): Promise<T>
+}
+
+/**
+ * Create Sanity provider with API client.
+ */
+export function createSanityClient(options: CreateSanityClientOptions): Sanity {
+  const {cache, waitUntil, preview, config} = options
+  const withCache = createWithCache_unstable({
+    cache,
+    waitUntil,
+  })
+
+  const sanity: Sanity = {
+    client: createClient(config),
+    async query({query, params, cache: strategy = CacheLong()}) {
+      const queryHash = await hashQuery(query, params)
+
+      return withCache(queryHash, strategy, () => sanity.client.fetch(query, params))
+    },
+  }
+
+  if (preview) {
+    sanity.preview = {session: preview.session}
+
+    if (preview.session.has('projectId')) {
+      sanity.preview = {
+        ...sanity.preview,
+        projectId: config.projectId,
+        dataset: config.dataset,
+        token: preview.token,
+      }
+
+      sanity.client = sanity.client.withConfig({
+        useCdn: false,
+        token: preview.token,
+      })
+
+      sanity.query = ({query, params}) => {
+        return sanity.client.fetch(query, params)
+      }
+    }
+  }
+
+  return sanity
+}
+
+export function isPreviewModeEnabled(
+  preview: Sanity['preview']
+): preview is {session: PreviewSession} & PreviewData {
+  // @ts-expect-error
+  return preview?.token !== null
+}
+
+/**
+ * Create an SHA-256 hash as a hex string
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/digest#converting_a_digest_to_a_hex_string
+ */
+export async function sha256(message: string): Promise<string> {
+  // encode as UTF-8
+  const messageBuffer = await new TextEncoder().encode(message)
+  // hash the message
+  const hashBuffer = await crypto.subtle.digest('SHA-256', messageBuffer)
+  // convert bytes to hex string
+  return Array.from(new Uint8Array(hashBuffer))
+    .map((b) => b.toString(16).padStart(2, '0'))
+    .join('')
+}
+
+/**
+ * Hash query and its parameters for use as cache key
+ * NOTE: Oxygen deployment will break if the cache key is long or contains `\n`
+ */
+function hashQuery(
+  query: useSanityQuery['query'],
+  params: useSanityQuery['params']
+): Promise<string> {
+  let hash = query
+
+  if (params !== null) {
+    hash += JSON.stringify(params)
+  }
+
+  return sha256(hash)
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './client'
+export * from './preview'
+export * from './types'

package/src/preview.tsx

@@ -0,0 +1,123 @@
+/* eslint-disable react/require-default-props */
+import {definePreview, type Params, PreviewSuspense} from '@sanity/preview-kit'
+import {createCookieSessionStorage, type Session, type SessionStorage} from '@shopify/remix-oxygen'
+import {createContext, ElementType, type ReactNode, useContext, useMemo} from 'react'
+
+type UsePreview = <R = any, P extends Params = Params, Q extends string = string>(
+  query: Q,
+  params?: P,
+  serverSnapshot?: R
+) => R
+
+export type PreviewData = {
+  projectId: string
+  dataset: string
+  token: string
+}
+
+export type PreviewProps = {
+  children: ReactNode
+  fallback?: ReactNode
+  preview?: PreviewData
+}
+
+export class PreviewSession {
+  // eslint-disable-next-line no-useless-constructor, no-empty-function
+  constructor(private sessionStorage: SessionStorage, private session: Session) {}
+
+  static async init(request: Request, secrets: string[]) {
+    const storage = createCookieSessionStorage({
+      cookie: {
+        name: '__preview',
+        httpOnly: true,
+        sameSite: true,
+        secrets,
+      },
+    })
+
+    const session = await storage.getSession(request.headers.get('Cookie'))
+
+    return new this(storage, session)
+  }
+
+  has(key: string) {
+    return this.session.has(key)
+  }
+
+  // get(key: string) {
+  //   return this.session.get(key);
+  // }
+
+  destroy() {
+    return this.sessionStorage.destroySession(this.session)
+  }
+
+  // unset(key: string) {
+  //   this.session.unset(key);
+  // }
+
+  set(key: string, value: any) {
+    this.session.set(key, value)
+  }
+
+  commit() {
+    return this.sessionStorage.commitSession(this.session)
+  }
+}
+
+const PreviewContext = createContext<
+  | {
+      /**
+       * Query Sanity and subscribe to changes, optionally
+       * passing a server snapshot to speed up hydration
+       */
+      usePreview: UsePreview
+    }
+  | undefined
+>(undefined)
+
+export const usePreviewContext = () => useContext(PreviewContext)
+
+/**
+ * Conditionally apply `PreviewSuspense` boundary
+ * @see https://www.sanity.io/docs/preview-content-on-site
+ */
+export function Preview(props: PreviewProps) {
+  const {children, preview} = props
+
+  if (!preview?.token) {
+    return <>{children}</>
+  }
+
+  const fallback = props.fallback ?? <div>Loading preview...</div>
+  const {projectId, dataset, token} = preview
+  const _usePreview = definePreview({
+    projectId,
+    dataset,
+    overlayDrafts: true,
+  })
+
+  function usePreview<R = any, P extends Params = Params, Q extends string = string>(
+    query: Q,
+    params?: P,
+    serverSnapshot?: R
+  ): R {
+    return _usePreview(token, query, params, serverSnapshot)
+  }
+  usePreview satisfies UsePreview
+
+  return (
+    <PreviewContext.Provider value={{usePreview}}>
+      <PreviewSuspense fallback={fallback}>{children}</PreviewSuspense>
+    </PreviewContext.Provider>
+  )
+}
+
+/**
+ * Select and memoize which component to render based on preview mode
+ */
+export function usePreviewComponent<T>(component: ElementType<T>, preview: ElementType<T>) {
+  const isPreview = Boolean(usePreviewContext())
+
+  return useMemo(() => (isPreview ? preview : component), [component, isPreview, preview])
+}

package/src/types.ts

@@ -0,0 +1,21 @@
+import type {CacheShort} from '@shopify/hydrogen'
+
+interface ExecutionContext {
+  waitUntil(promise: Promise<any>): void
+}
+
+export type EnvironmentOptions = {
+  /**
+   * A Cache API instance.
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/Cache
+   */
+  cache: Cache
+  /**
+   * A runtime utility for serverless environments
+   * @see https://developers.cloudflare.com/workers/runtime-apis/fetch-event/#waituntil
+   */
+  waitUntil: ExecutionContext['waitUntil']
+}
+
+/** @see https://shopify.dev/docs/custom-storefronts/hydrogen/data-fetching/cache#caching-strategies */
+export type CachingStrategy = ReturnType<typeof CacheShort>