@shopify/hydrogen-react 2022.10.1 → 2022.10.3

package/README.md

@@ -59,6 +59,7 @@ const client = createStorefrontClient({
 
 export const getStorefrontApiUrl = client.getStorefrontApiUrl;
 export const getPrivateTokenHeaders = client.getPrivateTokenHeaders;
+export const getShopifyDomain = client.getShopifyDomain;
 ```
 
 You can then use this in your server-side queries. Here's an example of using it for [NextJS's `getServerSideProps`](https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props):
@@ -84,6 +85,31 @@ export async function getServerSideProps() {
 }
 ```
 
+You can also use this to proxy the liquid online store:
+
+```ts
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import {getShopifyDomain} from '../shopify-client.js';
+
+export default function handler(req, res) {
+  fetch(getShopifyDomain() + '/products', {
+    headers: {
+      /** forward some of the headers from the original request **/
+    },
+  })
+    .then((resp) => resp.text())
+    .then((text) => res.status(200).send(text))
+    .catch((error) => {
+      console.error(
+        `Error proxying the online store: ${
+          error instanceof Error ? error.stack : error
+        }`
+      );
+      res.status(500).send('Server error occurred');
+    });
+}
+```
+
 ### (Optional) Set the content type for the Storefront client
 
 By default, the Storefront client sends the `"content-type": "application/json"` header. Use the `json` content type when you have GraphQL variables and when the body is an object with the following shape:
@@ -154,6 +180,29 @@ If you're having trouble getting it to work, then consult our [troubleshooting s
 
 Improve your development experience by adding strong typing to Storefront API responses. The following are some options for doing this.
 
+## GraphQL CodeGen
+
+To use GraphQL CodeGen, follow [their guide](https://the-guild.dev/graphql/codegen/docs/getting-started/installation) to get started. Then, when you have a `codegen.ts` file, you can modify the following lines in the codegen object to improve the CodgeGen experience:
+
+```ts
+import {storefrontApiCustomScalars} from '@shopify/hydrogen-react';
+
+const config: CodegenConfig = {
+  // Use the schema that's bundled with @shopify/hydrogen-react
+  schema: './node_modules/@shopify/hydrogen-react/storefront.schema.json',
+  generates: {
+    './gql/': {
+      preset: 'client',
+      plugins: [],
+      config: {
+        // Use the custom scalar definitions that @shopify/hydrogen-react provides to improve the types
+        scalars: storefrontApiCustomScalars,
+      },
+    },
+  },
+};
+```
+
 ### Use the `StorefrontApiResponseError` and `StorefrontApiResponseOk` helpers
 
 The following is an example:

package/dist/browser-dev/AddToCartButton.mjs

@@ -0,0 +1,70 @@
+import { useState, useEffect, useCallback } from "react";
+import { useCart } from "./CartProvider.mjs";
+import { useProduct } from "./ProductProvider.mjs";
+import { BaseButton } from "./BaseButton.mjs";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+function AddToCartButton(props) {
+  var _a;
+  const [addingItem, setAddingItem] = useState(false);
+  const {
+    variantId: explicitVariantId,
+    quantity = 1,
+    attributes,
+    sellingPlanId,
+    onClick,
+    children,
+    accessibleAddingToCartLabel,
+    ...passthroughProps
+  } = props;
+  const {
+    status,
+    linesAdd
+  } = useCart();
+  const {
+    selectedVariant
+  } = useProduct();
+  const variantId = (_a = explicitVariantId != null ? explicitVariantId : selectedVariant == null ? void 0 : selectedVariant.id) != null ? _a : "";
+  const disabled = explicitVariantId === null || variantId === "" || selectedVariant === null || addingItem || passthroughProps.disabled;
+  useEffect(() => {
+    if (addingItem && status === "idle") {
+      setAddingItem(false);
+    }
+  }, [status, addingItem]);
+  const handleAddItem = useCallback(() => {
+    setAddingItem(true);
+    linesAdd([{
+      quantity,
+      merchandiseId: variantId || "",
+      attributes,
+      sellingPlanId
+    }]);
+  }, [linesAdd, quantity, variantId, attributes, sellingPlanId]);
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx(BaseButton, {
+      ...passthroughProps,
+      disabled,
+      onClick,
+      defaultOnClick: handleAddItem,
+      children
+    }), accessibleAddingToCartLabel ? /* @__PURE__ */ jsx("p", {
+      style: {
+        position: "absolute",
+        width: "1px",
+        height: "1px",
+        padding: "0",
+        margin: "-1px",
+        overflow: "hidden",
+        clip: "rect(0, 0, 0, 0)",
+        whiteSpace: "nowrap",
+        borderWidth: "0"
+      },
+      role: "alert",
+      "aria-live": "assertive",
+      children: addingItem ? accessibleAddingToCartLabel : null
+    }) : null]
+  });
+}
+export {
+  AddToCartButton
+};
+//# sourceMappingURL=AddToCartButton.mjs.map

package/dist/browser-dev/AddToCartButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddToCartButton.mjs","sources":["../../src/AddToCartButton.tsx"],"sourcesContent":["import {useCallback, useEffect, useState} from 'react';\n\nimport {useCart} from './CartProvider.js';\nimport {useProduct} from './ProductProvider.js';\nimport {BaseButton, BaseButtonProps} from './BaseButton.js';\n\nexport interface AddToCartButtonProps {\n  /** An array of cart line attributes that belong to the item being added to the cart. */\n  attributes?: {\n    key: string;\n    value: string;\n  }[];\n  /** The ID of the variant. */\n  variantId?: string | null;\n  /** The item quantity. */\n  quantity?: number;\n  /** The text that is announced by the screen reader when the item is being added to the cart. Used for accessibility purposes only and not displayed on the page. */\n  accessibleAddingToCartLabel?: string;\n  /** The selling plan ID of the subscription variant */\n  sellingPlanId?: string;\n}\n\n/**\n * The `AddToCartButton` component renders a button that adds an item to the cart when pressed.\n * It must be a descendent of the `CartProvider` component.\n */\nexport function AddToCartButton<AsType extends React.ElementType = 'button'>(\n  props: AddToCartButtonProps & BaseButtonProps<AsType>\n) {\n  const [addingItem, setAddingItem] = useState<boolean>(false);\n  const {\n    variantId: explicitVariantId,\n    quantity = 1,\n    attributes,\n    sellingPlanId,\n    onClick,\n    children,\n    accessibleAddingToCartLabel,\n    ...passthroughProps\n  } = props;\n  const {status, linesAdd} = useCart();\n  const {selectedVariant} = useProduct();\n  const variantId = explicitVariantId ?? selectedVariant?.id ?? '';\n  const disabled =\n    explicitVariantId === null ||\n    variantId === '' ||\n    selectedVariant === null ||\n    addingItem ||\n    passthroughProps.disabled;\n\n  useEffect(() => {\n    if (addingItem && status === 'idle') {\n      setAddingItem(false);\n    }\n  }, [status, addingItem]);\n\n  const handleAddItem = useCallback(() => {\n    setAddingItem(true);\n    linesAdd([\n      {\n        quantity,\n        merchandiseId: variantId || '',\n        attributes,\n        sellingPlanId,\n      },\n    ]);\n  }, [linesAdd, quantity, variantId, attributes, sellingPlanId]);\n\n  return (\n    <>\n      <BaseButton\n        {...passthroughProps}\n        disabled={disabled}\n        onClick={onClick}\n        defaultOnClick={handleAddItem}\n      >\n        {children}\n      </BaseButton>\n      {accessibleAddingToCartLabel ? (\n        <p\n          style={{\n            position: 'absolute',\n            width: '1px',\n            height: '1px',\n            padding: '0',\n            margin: '-1px',\n            overflow: 'hidden',\n            clip: 'rect(0, 0, 0, 0)',\n            whiteSpace: 'nowrap',\n            borderWidth: '0',\n          }}\n          role=\"alert\"\n          aria-live=\"assertive\"\n        >\n          {addingItem ? accessibleAddingToCartLabel : null}\n        </p>\n      ) : null}\n    </>\n  );\n}\n"],"names":["AddToCartButton","props","addingItem","setAddingItem","useState","variantId","explicitVariantId","quantity","attributes","sellingPlanId","onClick","children","accessibleAddingToCartLabel","passthroughProps","status","linesAdd","useCart","selectedVariant","useProduct","id","disabled","useEffect","handleAddItem","useCallback","merchandiseId","_Fragment","_jsx","position","width","height","padding","margin","overflow","clip","whiteSpace","borderWidth"],"mappings":";;;;;AA0BO,SAASA,gBACdC,OACA;;AACA,QAAM,CAACC,YAAYC,aAAb,IAA8BC,SAAkB,KAAV;AACtC,QAAA;AAAA,IACJC,WAAWC;AAAAA,IACXC,WAAW;AAAA,IACXC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,OACGC;AAAAA,EACDZ,IAAAA;AACE,QAAA;AAAA,IAACa;AAAAA,IAAQC;AAAAA,MAAYC,QAA3B;AACM,QAAA;AAAA,IAACC;AAAAA,MAAmBC,WAA1B;AACMb,QAAAA,aAAYC,qDAAqBW,mDAAiBE,OAAtCb,YAA4C;AACxDc,QAAAA,WACJd,sBAAsB,QACtBD,cAAc,MACdY,oBAAoB,QACpBf,cACAW,iBAAiBO;AAEnBC,YAAU,MAAM;AACVnB,QAAAA,cAAcY,WAAW,QAAQ;AACnCX,oBAAc,KAAD;AAAA,IACd;AAAA,EAAA,GACA,CAACW,QAAQZ,UAAT,CAJM;AAMHoB,QAAAA,gBAAgBC,YAAY,MAAM;AACtCpB,kBAAc,IAAD;AACbY,aAAS,CACP;AAAA,MACER;AAAAA,MACAiB,eAAenB,aAAa;AAAA,MAC5BG;AAAAA,MACAC;AAAAA,IALK,CAAA,CAAD;AAAA,EAAA,GAQP,CAACM,UAAUR,UAAUF,WAAWG,YAAYC,aAA5C,CAV8B;AAYjC,8BACEgB,UAAA;AAAA,IAAA,UACE,CAAAC,oBAAC,YAAD;AAAA,MAAA,GACMb;AAAAA,MACJ;AAAA,MACA;AAAA,MACA,gBAAgBS;AAAAA,MAJlB;AAAA,IAAA,CADF,GASGV,8BACCc,oBAAA,KAAA;AAAA,MACE,OAAO;AAAA,QACLC,UAAU;AAAA,QACVC,OAAO;AAAA,QACPC,QAAQ;AAAA,QACRC,SAAS;AAAA,QACTC,QAAQ;AAAA,QACRC,UAAU;AAAA,QACVC,MAAM;AAAA,QACNC,YAAY;AAAA,QACZC,aAAa;AAAA,MATR;AAAA,MAWP,MAAK;AAAA,MACL,aAAU;AAAA,MAbZ,UAeGjC,aAAaU,8BAA8B;AAAA,IAf9C,CAAA,IAiBE,IA3BN;AAAA,EAAA,CADF;AA+BD;"}

package/dist/browser-dev/BaseButton.mjs

@@ -0,0 +1,31 @@
+import { useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+function BaseButton(props) {
+  const {
+    as,
+    onClick,
+    defaultOnClick,
+    children,
+    buttonRef,
+    ...passthroughProps
+  } = props;
+  const handleOnClick = useCallback((event) => {
+    if (onClick) {
+      const clickShouldContinue = onClick(event);
+      if (typeof clickShouldContinue === "boolean" && clickShouldContinue === false || (event == null ? void 0 : event.defaultPrevented))
+        return;
+    }
+    defaultOnClick == null ? void 0 : defaultOnClick(event);
+  }, [defaultOnClick, onClick]);
+  const Component = as || "button";
+  return /* @__PURE__ */ jsx(Component, {
+    ref: buttonRef,
+    onClick: handleOnClick,
+    ...passthroughProps,
+    children
+  });
+}
+export {
+  BaseButton
+};
+//# sourceMappingURL=BaseButton.mjs.map

package/dist/browser-dev/BaseButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseButton.mjs","sources":["../../src/BaseButton.tsx"],"sourcesContent":["import {ReactNode, Ref, useCallback} from 'react';\n\nexport interface CustomBaseButtonProps<AsType> {\n  /** Provide a React element or component to render as the underlying button. Note: for accessibility compliance, almost always you should use a `button` element, or a component that renders an underlying button. */\n  as?: AsType;\n  /** Any ReactNode elements. */\n  children: ReactNode;\n  /** Click event handler. Default behaviour triggers unless prevented */\n  onClick?: (\n    event?: React.MouseEvent<HTMLButtonElement, MouseEvent>\n  ) => void | boolean;\n  /** A default onClick behavior */\n  defaultOnClick?: (\n    event?: React.MouseEvent<HTMLButtonElement, MouseEvent>\n  ) => void | boolean;\n  /** A ref to the underlying button */\n  buttonRef?: Ref<HTMLButtonElement>;\n}\n\nexport type BaseButtonProps<AsType extends React.ElementType> =\n  CustomBaseButtonProps<AsType> &\n    Omit<\n      React.ComponentPropsWithoutRef<AsType>,\n      keyof CustomBaseButtonProps<AsType>\n    >;\n\nexport function BaseButton<AsType extends React.ElementType = 'button'>(\n  props: BaseButtonProps<AsType>\n) {\n  const {\n    as,\n    onClick,\n    defaultOnClick,\n    children,\n    buttonRef,\n    ...passthroughProps\n  } = props;\n\n  const handleOnClick = useCallback(\n    (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n      if (onClick) {\n        const clickShouldContinue = onClick(event);\n        if (\n          (typeof clickShouldContinue === 'boolean' &&\n            clickShouldContinue === false) ||\n          event?.defaultPrevented\n        )\n          return;\n      }\n\n      defaultOnClick?.(event);\n    },\n    [defaultOnClick, onClick]\n  );\n\n  const Component = as || 'button';\n\n  return (\n    <Component ref={buttonRef} onClick={handleOnClick} {...passthroughProps}>\n      {children}\n    </Component>\n  );\n}\n"],"names":["BaseButton","props","as","onClick","defaultOnClick","children","buttonRef","passthroughProps","handleOnClick","useCallback","event","clickShouldContinue","defaultPrevented","Component"],"mappings":";;AA0BO,SAASA,WACdC,OACA;AACM,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,OACGC;AAAAA,EACDN,IAAAA;AAEEO,QAAAA,gBAAgBC,YACpB,CAACC,UAA4D;AAC3D,QAAIP,SAAS;AACLQ,YAAAA,sBAAsBR,QAAQO,KAAD;AACnC,UACG,OAAOC,wBAAwB,aAC9BA,wBAAwB,UAC1BD,+BAAOE;AAEP;AAAA,IACH;AAEDR,qDAAiBM;AAAAA,EAAH,GAEhB,CAACN,gBAAgBD,OAAjB,CAd+B;AAiBjC,QAAMU,YAAYX,MAAM;AAExB,6BACG,WAAD;AAAA,IAAW,KAAKI;AAAAA,IAAW,SAASE;AAAAA,IAApC,GAAuDD;AAAAA,IAAvD;AAAA,EAAA,CADF;AAKD;"}

package/dist/browser-dev/BuyNowButton.mjs

@@ -0,0 +1,45 @@
+import { useState, useEffect, useCallback } from "react";
+import { useCart } from "./CartProvider.mjs";
+import { BaseButton } from "./BaseButton.mjs";
+import { jsx } from "react/jsx-runtime";
+function BuyNowButton(props) {
+  const {
+    cartCreate,
+    checkoutUrl
+  } = useCart();
+  const [loading, setLoading] = useState(false);
+  const {
+    quantity,
+    variantId,
+    onClick,
+    attributes,
+    children,
+    ...passthroughProps
+  } = props;
+  useEffect(() => {
+    if (checkoutUrl) {
+      window.location.href = checkoutUrl;
+    }
+  }, [checkoutUrl]);
+  const handleBuyNow = useCallback(() => {
+    setLoading(true);
+    cartCreate({
+      lines: [{
+        quantity: quantity != null ? quantity : 1,
+        merchandiseId: variantId,
+        attributes
+      }]
+    });
+  }, [cartCreate, quantity, variantId, attributes]);
+  return /* @__PURE__ */ jsx(BaseButton, {
+    disabled: loading != null ? loading : passthroughProps.disabled,
+    ...passthroughProps,
+    onClick,
+    defaultOnClick: handleBuyNow,
+    children
+  });
+}
+export {
+  BuyNowButton
+};
+//# sourceMappingURL=BuyNowButton.mjs.map

package/dist/browser-dev/BuyNowButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BuyNowButton.mjs","sources":["../../src/BuyNowButton.tsx"],"sourcesContent":["import {useEffect, useState, useCallback} from 'react';\nimport {useCart} from './CartProvider.js';\nimport {BaseButton, BaseButtonProps} from './BaseButton.js';\n\ninterface BuyNowButtonProps {\n  /** The item quantity. Defaults to 1. */\n  quantity?: number;\n  /** The ID of the variant. */\n  variantId: string;\n  /** An array of cart line attributes that belong to the item being added to the cart. */\n  attributes?: {\n    key: string;\n    value: string;\n  }[];\n}\n\n/** The `BuyNowButton` component renders a button that adds an item to the cart and redirects the customer to checkout. */\nexport function BuyNowButton<AsType extends React.ElementType = 'button'>(\n  props: BuyNowButtonProps & BaseButtonProps<AsType>\n) {\n  const {cartCreate, checkoutUrl} = useCart();\n  const [loading, setLoading] = useState<boolean>(false);\n\n  const {\n    quantity,\n    variantId,\n    onClick,\n    attributes,\n    children,\n    ...passthroughProps\n  } = props;\n\n  useEffect(() => {\n    if (checkoutUrl) {\n      window.location.href = checkoutUrl;\n    }\n  }, [checkoutUrl]);\n\n  const handleBuyNow = useCallback(() => {\n    setLoading(true);\n    cartCreate({\n      lines: [\n        {\n          quantity: quantity ?? 1,\n          merchandiseId: variantId,\n          attributes,\n        },\n      ],\n    });\n  }, [cartCreate, quantity, variantId, attributes]);\n\n  return (\n    <BaseButton\n      disabled={loading ?? passthroughProps.disabled}\n      {...passthroughProps}\n      onClick={onClick}\n      defaultOnClick={handleBuyNow}\n    >\n      {children}\n    </BaseButton>\n  );\n}\n"],"names":["BuyNowButton","props","cartCreate","checkoutUrl","useCart","loading","setLoading","useState","quantity","variantId","onClick","attributes","children","passthroughProps","useEffect","window","location","href","handleBuyNow","useCallback","lines","merchandiseId","disabled"],"mappings":";;;;AAiBO,SAASA,aACdC,OACA;AACM,QAAA;AAAA,IAACC;AAAAA,IAAYC;AAAAA,MAAeC,QAAlC;AACA,QAAM,CAACC,SAASC,UAAV,IAAwBC,SAAkB,KAAV;AAEhC,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,OACGC;AAAAA,EACDZ,IAAAA;AAEJa,YAAU,MAAM;AACd,QAAIX,aAAa;AACfY,aAAOC,SAASC,OAAOd;AAAAA,IACxB;AAAA,EAAA,GACA,CAACA,WAAD,CAJM;AAMHe,QAAAA,eAAeC,YAAY,MAAM;AACrCb,eAAW,IAAD;AACC,eAAA;AAAA,MACTc,OAAO,CACL;AAAA,QACEZ,UAAUA,8BAAY;AAAA,QACtBa,eAAeZ;AAAAA,QACfE;AAAAA,MAAAA,CAJG;AAAA,IAAA,CADC;AAAA,KAST,CAACT,YAAYM,UAAUC,WAAWE,UAAlC,CAX6B;AAahC,6BACG,YAAD;AAAA,IACE,UAAUN,4BAAWQ,iBAAiBS;AAAAA,IADxC,GAEMT;AAAAA,IACJ;AAAA,IACA,gBAAgBK;AAAAA,IAJlB;AAAA,EAAA,CADF;AAUD;"}

package/dist/browser-dev/CartCheckoutButton.mjs

@@ -0,0 +1,30 @@
+import { useState, useEffect } from "react";
+import { useCart } from "./CartProvider.mjs";
+import { BaseButton } from "./BaseButton.mjs";
+import { jsx } from "react/jsx-runtime";
+function CartCheckoutButton(props) {
+  const [requestedCheckout, setRequestedCheckout] = useState(false);
+  const {
+    status,
+    checkoutUrl
+  } = useCart();
+  const {
+    children,
+    ...passthroughProps
+  } = props;
+  useEffect(() => {
+    if (requestedCheckout && checkoutUrl && status === "idle") {
+      window.location.href = checkoutUrl;
+    }
+  }, [requestedCheckout, status, checkoutUrl]);
+  return /* @__PURE__ */ jsx(BaseButton, {
+    ...passthroughProps,
+    disabled: requestedCheckout || passthroughProps.disabled,
+    onClick: () => setRequestedCheckout(true),
+    children
+  });
+}
+export {
+  CartCheckoutButton
+};
+//# sourceMappingURL=CartCheckoutButton.mjs.map

package/dist/browser-dev/CartCheckoutButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CartCheckoutButton.mjs","sources":["../../src/CartCheckoutButton.tsx"],"sourcesContent":["import {ReactNode, useEffect, useState} from 'react';\nimport {useCart} from './CartProvider.js';\nimport {BaseButton, BaseButtonProps} from './BaseButton.js';\n\ntype PropsWeControl = 'onClick';\n\n/**\n * The `CartCheckoutButton` component renders a button that redirects to the checkout URL for the cart.\n * It must be a descendent of a `CartProvider` component.\n */\nexport function CartCheckoutButton(\n  props: Omit<BaseButtonProps<'button'>, PropsWeControl> & {\n    /** A `ReactNode` element. */\n    children: ReactNode;\n  }\n) {\n  const [requestedCheckout, setRequestedCheckout] = useState(false);\n  const {status, checkoutUrl} = useCart();\n  const {children, ...passthroughProps} = props;\n\n  useEffect(() => {\n    if (requestedCheckout && checkoutUrl && status === 'idle') {\n      window.location.href = checkoutUrl;\n    }\n  }, [requestedCheckout, status, checkoutUrl]);\n\n  return (\n    <BaseButton\n      {...passthroughProps}\n      disabled={requestedCheckout || passthroughProps.disabled}\n      onClick={() => setRequestedCheckout(true)}\n    >\n      {children}\n    </BaseButton>\n  );\n}\n"],"names":["CartCheckoutButton","props","requestedCheckout","setRequestedCheckout","useState","status","checkoutUrl","useCart","children","passthroughProps","useEffect","window","location","href","disabled"],"mappings":";;;;AAUO,SAASA,mBACdC,OAIA;AACA,QAAM,CAACC,mBAAmBC,oBAApB,IAA4CC,SAAS,KAAD;AACpD,QAAA;AAAA,IAACC;AAAAA,IAAQC;AAAAA,MAAeC,QAA9B;AACM,QAAA;AAAA,IAACC;AAAAA,OAAaC;AAAAA,EAAoBR,IAAAA;AAExCS,YAAU,MAAM;AACVR,QAAAA,qBAAqBI,eAAeD,WAAW,QAAQ;AACzDM,aAAOC,SAASC,OAAOP;AAAAA,IACxB;AAAA,EACA,GAAA,CAACJ,mBAAmBG,QAAQC,WAA5B,CAJM;AAMT,6BACG,YAAD;AAAA,IAAA,GACMG;AAAAA,IACJ,UAAUP,qBAAqBO,iBAAiBK;AAAAA,IAChD,SAAS,MAAMX,qBAAqB,IAAD;AAAA,IAHrC;AAAA,EAAA,CADF;AASD;"}

package/dist/browser-dev/MediaFile.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaFile.mjs","sources":["../../src/MediaFile.tsx"],"sourcesContent":["import {Image, type ShopifyImageProps} from './Image.js';\nimport {Video} from './Video.js';\nimport {ExternalVideo} from './ExternalVideo.js';\nimport {ModelViewer} from './ModelViewer.js';\nimport type {MediaEdge as MediaEdgeType} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\nimport type {ModelViewerElement} from '@google/model-viewer/lib/model-viewer.js';\n\ntype BaseProps = React.HTMLAttributes<\n  HTMLImageElement | HTMLVideoElement | HTMLIFrameElement | ModelViewerElement\n>;\nexport interface MediaFileProps extends BaseProps {\n  /** An object with fields that correspond to the Storefront API's [Media object](https://shopify.dev/api/storefront/reference/products/media). */\n  data: PartialDeep<MediaEdgeType['node'], {recurseIntoArrays: true}>;\n  /** The options for the `Image`, `Video`, or `ExternalVideo` components. */\n  mediaOptions?: {\n    /** Props that will only apply when an `<Image />` is rendered */\n    image: Omit<ShopifyImageProps, 'data'>;\n    /** Props that will only apply when a `<Video />` is rendered */\n    video: Omit<React.ComponentProps<typeof Video>, 'data'>;\n    /** Props that will only apply when an `<ExternalVideo />` is rendered */\n    externalVideo: Omit<\n      React.ComponentProps<typeof ExternalVideo>['options'],\n      'data'\n    >;\n    /** Props that will only apply when a `<ModelViewer />` is rendered */\n    modelViewer: Omit<typeof ModelViewer, 'data'>;\n  };\n}\n\n/**\n * The `MediaFile` component renders the media for the Storefront API's\n * [Media object](https://shopify.dev/api/storefront/reference/products/media). It renders an `Image`, a\n * `Video`, an `ExternalVideo`, or a `ModelViewer` depending on the `__typename` of the `data` prop.\n */\nexport function MediaFile({\n  data,\n  mediaOptions,\n  ...passthroughProps\n}: MediaFileProps) {\n  switch (data.__typename) {\n    case 'MediaImage': {\n      if (!data.image) {\n        const noDataImage = `<MediaFile/>: 'data.image' does not exist for __typename of 'MediaImage'; rendering 'null' by default.`;\n        if (__HYDROGEN_DEV__) {\n          throw new Error(noDataImage);\n        } else {\n          console.warn(noDataImage);\n          return null;\n        }\n      }\n\n      return (\n        <Image\n          {...passthroughProps}\n          {...mediaOptions?.image}\n          data={data.image}\n        />\n      );\n    }\n    case 'Video': {\n      return (\n        <Video {...passthroughProps} {...mediaOptions?.video} data={data} />\n      );\n    }\n    case 'ExternalVideo': {\n      return (\n        <ExternalVideo\n          {...passthroughProps}\n          {...mediaOptions?.externalVideo}\n          data={data}\n        />\n      );\n    }\n    case 'Model3d': {\n      return (\n        // @ts-expect-error There are issues with the inferred HTML attribute types here for ModelViewer (and contentEditable), but I think that's a little bit beyond me at the moment\n        <ModelViewer\n          {...passthroughProps}\n          {...mediaOptions?.modelViewer}\n          data={data}\n        />\n      );\n    }\n    default: {\n      const typenameMissingMessage = `<MediaFile /> requires the '__typename' property to exist on the 'data' prop in order to correctly render the correct component for this media. Rendering 'null' by default`;\n      if (__HYDROGEN_DEV__) {\n        throw new Error(typenameMissingMessage);\n      } else {\n        console.error(typenameMissingMessage);\n        return null;\n      }\n    }\n  }\n}\n"],"names":["MediaFile","data","mediaOptions","passthroughProps","__typename","image","noDataImage","Error","video","externalVideo","modelViewer","typenameMissingMessage"],"mappings":";;;;;AAmCO,SAASA,UAAU;AAAA,EACxBC;AAAAA,EACAC;AAAAA,KACGC;AAHqB,GAIP;AACjB,UAAQF,KAAKG,YAAb;AAAA,IACE,KAAK,cAAc;AACb,UAAA,CAACH,KAAKI,OAAO;AACf,cAAMC,cAAe;AACC;AACd,gBAAA,IAAIC,MAAMD,WAAV;AAAA,QAIP;AAAA,MACF;AAED,iCACG,OAAD;AAAA,QAAA,GACMH;AAAAA,QADN,GAEMD,6CAAcG;AAAAA,QAClB,MAAMJ,KAAKI;AAAAA,MAAAA,CAJf;AAAA,IAOD;AAAA,IACD,KAAK,SAAS;AACZ,iCACG,OAAD;AAAA,QAAA,GAAWF;AAAAA,QAAX,GAAiCD,6CAAcM;AAAAA,QAAO;AAAA,MAAA,CADxD;AAAA,IAGD;AAAA,IACD,KAAK,iBAAiB;AACpB,iCACG,eAAD;AAAA,QAAA,GACML;AAAAA,QADN,GAEMD,6CAAcO;AAAAA,QAClB;AAAA,MAAA,CAJJ;AAAA,IAOD;AAAA,IACD,KAAK,WAAW;AACd,iCAEG;WACKN;AAAAA,QADN,GAEMD,6CAAcQ;AAAAA,QAClB;AAAA,MAAA,CAHF;AAAA,IAMH;AAAA,IACD,SAAS;AACP,YAAMC,yBAA0B;AACV;AACd,cAAA,IAAIJ,MAAMI,sBAAV;AAAA,MAIP;AAAA,IACF;AAAA,EApDH;AAsDD;"}

package/dist/{dev → browser-dev}/Metafield.mjs

@@ -143,6 +143,9 @@ function Metafield(props) {
   });
 }
 function parseMetafield(metafield) {
+  {
+    console.info(`'parseMetafield()' will have a breaking change in a future version; its behavior will match that of 'metafieldParser()'`);
+  }
   if (!metafield) {
     {
       console.warn(`'parseMetafield' was not passed any value for the 'metafield' argument`);
@@ -158,6 +161,9 @@ function parseMetafield(metafield) {
   };
 }
 function parseMetafieldValue(metafield) {
+  {
+    console.info(`'parseMetafieldValue()' will be removed in a future version`);
+  }
   if (!metafield) {
     return null;
   }

package/dist/browser-dev/Metafield.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Metafield.mjs","sources":["../../src/Metafield.tsx"],"sourcesContent":["import {type ElementType, useMemo, type ComponentPropsWithoutRef} from 'react';\nimport {useShop} from './ShopifyProvider.js';\nimport {Image} from './Image.js';\nimport type {\n  MediaImage,\n  Page,\n  ProductVariant,\n  Product,\n  GenericFile,\n  Video as VideoType,\n  Metafield as MetafieldType,\n} from './storefront-api-types.js';\nimport {Video} from './Video.js';\nimport {flattenConnection} from './flatten-connection.js';\nimport type {PartialDeep, JsonValue} from 'type-fest';\n\ninterface BaseProps<ComponentGeneric extends ElementType> {\n  /** An object with fields that correspond to the Storefront API's [Metafield object](https://shopify.dev/api/storefront/reference/common-objects/metafield). */\n  data: PartialDeep<MetafieldType, {recurseIntoArrays: true}> | null;\n  /** An HTML tag or React component to be rendered as the base element wrapper. The default value varies depending on [metafield.type](https://shopify.dev/apps/metafields/types). */\n  as?: ComponentGeneric;\n}\n\nexport type MetafieldProps<ComponentGeneric extends ElementType> =\n  ComponentPropsWithoutRef<ComponentGeneric> & BaseProps<ComponentGeneric>;\n\n/**\n * The `Metafield` component renders the value of a Storefront\n * API's [Metafield object](https://shopify.dev/api/storefront/reference/common-objects/metafield).\n * Relies on the `locale` property of the `useShop()` hook, so it must be a desendent of `<ShopifyProvider/>`\n *\n * Renders a smart default of the Metafield's `value`. For more information, refer to the [Default output](#default-output) section.\n */\nexport function Metafield<ComponentGeneric extends ElementType>(\n  props: MetafieldProps<ComponentGeneric>\n) {\n  const {data, as, ...passthroughProps} = props;\n  const {locale} = useShop();\n\n  const parsedMetafield = useMemo(() => parseMetafield(data), [data]);\n\n  if (!parsedMetafield) {\n    const noDataPropWarning = `<Metafield/>: nothing was passed to the data prop 'data'. Rendering 'null'`;\n    if (__HYDROGEN_DEV__) {\n      throw new Error(noDataPropWarning);\n    } else {\n      console.warn(noDataPropWarning);\n    }\n    return null;\n  }\n\n  if (parsedMetafield.value === null || parsedMetafield.value === undefined) {\n    const noValueWarning = `<Metafield/>: No metafield value for metafield ${\n      parsedMetafield.id ?? parsedMetafield.key\n    }. Rendering 'null'`;\n    if (__HYDROGEN_DEV__) {\n      throw new Error(noValueWarning);\n    } else {\n      console.warn(noValueWarning);\n    }\n    return null;\n  }\n\n  switch (parsedMetafield.type) {\n    case 'date': {\n      const Wrapper = as ?? 'time';\n      return (\n        <Wrapper {...passthroughProps}>\n          {(parsedMetafield.value as Date).toLocaleDateString(locale)}\n        </Wrapper>\n      );\n    }\n    case 'date_time': {\n      const Wrapper = as ?? 'time';\n      return (\n        <Wrapper {...passthroughProps}>\n          {(parsedMetafield.value as Date).toLocaleString(locale)}\n        </Wrapper>\n      );\n    }\n    case 'weight':\n    case 'dimension':\n    case 'volume': {\n      const Wrapper = as ?? 'span';\n      return (\n        <Wrapper {...passthroughProps}>\n          {getMeasurementAsString(parsedMetafield.value as Measurement, locale)}\n        </Wrapper>\n      );\n    }\n    case 'rating': {\n      const Wrapper = as ?? 'span';\n      return (\n        <Wrapper {...passthroughProps}>\n          {(parsedMetafield.value as Rating).value}\n        </Wrapper>\n      );\n    }\n    case 'single_line_text_field': {\n      const Wrapper = as ?? 'span';\n      return (\n        <Wrapper\n          {...passthroughProps}\n          dangerouslySetInnerHTML={{__html: parsedMetafield.value as string}}\n        />\n      );\n    }\n    case 'multi_line_text_field': {\n      const Wrapper = as ?? 'div';\n      return (\n        <Wrapper\n          {...passthroughProps}\n          dangerouslySetInnerHTML={{\n            __html: (parsedMetafield.value as string).split('\\n').join('<br/>'),\n          }}\n        />\n      );\n    }\n    case 'url': {\n      const protocolLessUrl = new URL(parsedMetafield.value as string);\n      return (\n        <a\n          href={protocolLessUrl.href.replace(protocolLessUrl.protocol, '')}\n          {...passthroughProps}\n        >\n          {parsedMetafield.value as string}\n        </a>\n      );\n    }\n    case 'json': {\n      const Wrapper = as ?? 'span';\n      return (\n        <Wrapper {...passthroughProps}>\n          {JSON.stringify(parsedMetafield.value)}\n        </Wrapper>\n      );\n    }\n    case 'product_reference':\n    case 'variant_reference':\n    case 'page_reference': {\n      const Wrapper = as ?? 'span';\n      const ref = parsedMetafield.reference as Page | ProductVariant | Product;\n      return (\n        <Wrapper {...passthroughProps}>{ref?.title ?? ref?.id ?? ''}</Wrapper>\n      );\n    }\n    case 'list.single_line_text_field': {\n      const Wrapper = as ?? 'ul';\n\n      const refArray = parsedMetafield.references\n        ? (flattenConnection(parsedMetafield.references) as string[])\n        : [];\n      return (\n        <Wrapper {...passthroughProps}>\n          {refArray.map((ref, index) => (\n            // there's no unique way to identify these strings, so we do our best by combining the string with the index for the key\n            // eslint-disable-next-line react/no-array-index-key\n            <li key={`${ref ?? ''}-${index}`}>{ref}</li>\n          ))}\n        </Wrapper>\n      );\n    }\n    case 'file_reference': {\n      if (parsedMetafield.reference?.__typename === 'MediaImage') {\n        const ref = parsedMetafield.reference as MediaImage;\n        return ref.image ? (\n          <Image data={ref.image} {...passthroughProps} />\n        ) : null;\n      } else if (parsedMetafield.reference?.__typename === 'GenericFile') {\n        const ref = parsedMetafield.reference as GenericFile;\n        return ref.previewImage ? (\n          <a href={parsedMetafield.reference?.url ?? ''} {...passthroughProps}>\n            <Image data={ref.previewImage} />\n          </a>\n        ) : null;\n      } else if (parsedMetafield.reference?.__typename === 'Video') {\n        const ref = parsedMetafield.reference as VideoType;\n        return <Video {...passthroughProps} data={ref} />;\n      }\n    }\n  }\n\n  const Wrapper = as ?? 'span';\n  return (\n    <Wrapper {...passthroughProps}>{parsedMetafield.value?.toString()}</Wrapper>\n  );\n}\n\n/**\n * The `parseMetafield` utility transforms a [Metafield](https://shopify.dev/api/storefront/reference/common-objects/Metafield)\n * into a new object whose `values` have been parsed according to the metafield `type`.\n * If the metafield is `null`, then it returns `null` back.\n *\n * Note that `parseMetafield()` will have a breaking change in a future version; it will change to behave like `metafieldParser()`.\n */\nexport function parseMetafield(\n  /** A [Metafield](https://shopify.dev/api/storefront/reference/common-objects/Metafield) or null */\n  metafield: PartialDeep<MetafieldType, {recurseIntoArrays: true}> | null\n): PartialDeep<ParsedMetafield, {recurseIntoArrays: true}> | null {\n  if (__HYDROGEN_DEV__) {\n    console.info(\n      `'parseMetafield()' will have a breaking change in a future version; its behavior will match that of 'metafieldParser()'`\n    );\n  }\n\n  if (!metafield) {\n    if (__HYDROGEN_DEV__) {\n      console.warn(\n        `'parseMetafield' was not passed any value for the 'metafield' argument`\n      );\n    }\n    return null;\n  }\n  if (\n    __HYDROGEN_DEV__ &&\n    (metafield.value === null || metafield.value === undefined)\n  ) {\n    console.warn(\n      `'parseMetafield()' was passed ${metafield.value} for 'metafield.value'`\n    );\n  }\n\n  return {\n    ...metafield,\n    value: parseMetafieldValue(metafield),\n  };\n}\n\n/**\n * The `parseMetafieldValue` function parses a [Metafield](https://shopify.dev/api/storefront/reference/common-objects/metafield)'s `value` from a string into a sensible type corresponding to the [Metafield](https://shopify.dev/api/storefront/reference/common-objects/metafield)'s `type`.\n * @deprecated `parseMetafieldValue()` is unsupported and will be removed in a future version.\n */\nexport function parseMetafieldValue(\n  metafield: PartialDeep<MetafieldType, {recurseIntoArrays: true}> | null\n): ParsedMetafield['value'] {\n  if (__HYDROGEN_DEV__) {\n    console.info(`'parseMetafieldValue()' will be removed in a future version`);\n  }\n\n  if (!metafield) {\n    return null;\n  }\n\n  if (metafield.value === null || metafield.value === undefined) {\n    if (__HYDROGEN_DEV__) {\n      console.warn(\n        `'parseMetafieldValue()' was passed ${metafield.value} for 'metafield.value'`\n      );\n    }\n    return metafield.value;\n  }\n\n  switch (metafield.type) {\n    case 'boolean':\n      return metafield.value === 'true';\n    case 'number_integer':\n      return parseInt(metafield.value);\n    case 'number_decimal':\n      return parseFloat(metafield.value);\n    case 'date':\n    case 'date_time':\n      return new Date(metafield.value);\n    case 'json':\n    case 'weight':\n    case 'dimension':\n    case 'volume':\n    case 'rating':\n      return parseJSON(metafield.value);\n    case 'color':\n    case 'single_line_text_field':\n    case 'multi_line_text_field':\n    case 'product_reference':\n    case 'page_reference':\n    case 'variant_reference':\n    case 'file_reference':\n    case 'url':\n    default:\n      return metafield.value;\n  }\n}\n\n/**\n * Parses a JSON string while preventing prototype injection attacks.\n */\nexport function parseJSON(json: string) {\n  if (String(json).includes('__proto__')) {\n    return JSON.parse(json, (k, v) => {\n      if (k !== '__proto__') return v;\n    });\n  }\n\n  return JSON.parse(json);\n}\n\nconst UNIT_MAPPING: Record<string, string> = {\n  // Dimension\n  mm: 'millimeter',\n  cm: 'centimeter',\n  m: 'meter',\n  in: 'inch',\n  ft: 'foot',\n  yd: 'yard',\n  // Volume\n  ml: 'milliliter',\n  l: 'liter',\n  us_fl_oz: 'fluid-ounce',\n  us_gal: 'gallon',\n  // Weight\n  kg: 'kilogram',\n  g: 'gram',\n  lb: 'pound',\n  oz: 'ounce',\n};\n\nexport function getMeasurementAsString(\n  measurement: Measurement,\n  locale = 'en-us',\n  options: Intl.NumberFormatOptions = {}\n) {\n  let measure: Measurement = {\n    value: measurement.value,\n    unit: UNIT_MAPPING[measurement.unit],\n  };\n\n  if (measure.unit == null) {\n    measure = convertToSupportedUnit(measurement.value, measurement.unit);\n  }\n\n  return new Intl.NumberFormat(locale, {\n    ...options,\n    unit: measure.unit,\n    style: 'unit',\n  }).format(measure.value);\n}\n\nfunction convertToSupportedUnit(value: number, unit: string): Measurement {\n  switch (unit) {\n    case 'cl':\n      return {\n        value: value / 1000,\n        unit: 'liter',\n      };\n    case 'm3':\n      return {\n        value: value * 1000,\n        unit: 'liter',\n      };\n    case 'us_pt':\n      return {\n        value: value * 0.125,\n        unit: 'gallon',\n      };\n    case 'us_qt':\n      return {\n        value: value * 0.5,\n        unit: 'gallon',\n      };\n    case 'us_oz':\n      return {\n        value: value / 128,\n        unit: 'gallon',\n      };\n    case 'imp_pt':\n      return {\n        value: value / 6.661, // approximate conversion\n        unit: 'gallon',\n      };\n    case 'imp_qt':\n      return {\n        value: value / 3.331, // approximate conversion\n        unit: 'gallon',\n      };\n    case 'imp_gal':\n      return {\n        value: value / 1.201, // approximate conversion\n        unit: 'gallon',\n      };\n    case 'imp_fl_oz':\n      return {\n        value: value * 0.96076, // approximate conversion\n        unit: 'fluid-ounce',\n      };\n    default:\n      throw new Error(`Unit not supported: ${unit}`);\n  }\n}\n\ntype ParsedMetafield = Omit<\n  PartialDeep<MetafieldType, {recurseIntoArrays: true}>,\n  'value'\n> & {\n  value?: string | number | boolean | JsonValue | Date | Rating | Measurement;\n};\n\nexport interface Rating {\n  value: number;\n  scale_min: number;\n  scale_max: number;\n}\n\ninterface Measurement {\n  unit: string;\n  value: number;\n}\n"],"names":["Metafield","props","data","as","passthroughProps","locale","useShop","parsedMetafield","useMemo","parseMetafield","noDataPropWarning","Error","value","undefined","noValueWarning","id","key","type","Wrapper","toLocaleDateString","toLocaleString","getMeasurementAsString","__html","split","join","protocolLessUrl","URL","href","replace","protocol","JSON","stringify","ref","reference","title","refArray","references","flattenConnection","map","index","__typename","image","_jsx","previewImage","url","toString","metafield","console","info","warn","parseMetafieldValue","parseInt","parseFloat","Date","parseJSON","json","String","includes","parse","k","v","UNIT_MAPPING","mm","cm","m","in","ft","yd","ml","l","us_fl_oz","us_gal","kg","g","lb","oz","measurement","options","measure","unit","convertToSupportedUnit","Intl","NumberFormat","style","format"],"mappings":"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"}

package/dist/browser-dev/ProductPrice.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductPrice.mjs","sources":["../../src/ProductPrice.tsx"],"sourcesContent":["import type {\n  MoneyV2,\n  UnitPriceMeasurement,\n  Product,\n} from './storefront-api-types.js';\nimport {Money, type MoneyProps} from './Money.js';\nimport type {PartialDeep} from 'type-fest';\nimport {flattenConnection} from './flatten-connection.js';\n\nexport interface ProductPriceProps {\n  /** A [Product object](https://shopify.dev/api/storefront/reference/products/product). */\n  data: PartialDeep<Product, {recurseIntoArrays: true}>;\n  /** The type of price. Valid values: `regular` (default) or `compareAt`. */\n  priceType?: 'regular' | 'compareAt';\n  /** The type of value. Valid values: `min` (default), `max` or `unit`. */\n  valueType?: 'max' | 'min' | 'unit';\n  /** The ID of the variant. */\n  variantId?: string;\n}\n\n/**\n * The `ProductPrice` component renders a `Money` component with the product\n * [`priceRange`](https://shopify.dev/api/storefront/reference/products/productpricerange)'s `maxVariantPrice` or `minVariantPrice`, for either the regular price or compare at price range.\n */\nexport function ProductPrice<ComponentGeneric extends React.ElementType>(\n  props: ProductPriceProps &\n    Omit<MoneyProps<ComponentGeneric>, 'data' | 'measurement'>\n) {\n  const {\n    priceType = 'regular',\n    variantId,\n    valueType = 'min',\n    data: product,\n    ...passthroughProps\n  } = props;\n\n  if (product == null) {\n    throw new Error(`<ProductPrice/> requires a product as the 'data' prop`);\n  }\n\n  let price: Partial<MoneyV2> | undefined | null;\n  let measurement: Partial<UnitPriceMeasurement> | undefined | null;\n\n  const variant = variantId\n    ? flattenConnection(product?.variants ?? {}).find(\n        (variant) => variant?.id === variantId\n      ) ?? null\n    : null;\n\n  if (priceType === 'compareAt') {\n    if (variantId && variant) {\n      if (variant.compareAtPriceV2?.amount === variant.priceV2?.amount) {\n        return null;\n      }\n      price = variant.compareAtPriceV2;\n    } else if (valueType === 'max') {\n      price = product?.compareAtPriceRange?.maxVariantPrice;\n    } else {\n      price = product?.compareAtPriceRange?.minVariantPrice;\n    }\n  } else {\n    if (variantId && variant) {\n      price = variant.priceV2;\n      if (valueType === 'unit') {\n        price = variant.unitPrice;\n        measurement = variant.unitPriceMeasurement;\n      }\n    } else if (valueType === 'max') {\n      price = product.priceRange?.maxVariantPrice;\n    } else {\n      price = product.priceRange?.minVariantPrice;\n    }\n  }\n\n  if (!price) {\n    return null;\n  }\n\n  if (measurement) {\n    return (\n      <Money {...passthroughProps} data={price} measurement={measurement} />\n    );\n  }\n\n  return <Money {...passthroughProps} data={price} />;\n}\n"],"names":["ProductPrice","props","priceType","variantId","valueType","data","product","passthroughProps","Error","price","measurement","variant","flattenConnection","variants","find","id","compareAtPriceV2","amount","priceV2","compareAtPriceRange","maxVariantPrice","minVariantPrice","unitPrice","unitPriceMeasurement","priceRange"],"mappings":";;;AAwBO,SAASA,aACdC,OAEA;;AACM,QAAA;AAAA,IACJC,YAAY;AAAA,IACZC;AAAAA,IACAC,YAAY;AAAA,IACZC,MAAMC;AAAAA,OACHC;AAAAA,EACDN,IAAAA;AAEJ,MAAIK,WAAW,MAAM;AACb,UAAA,IAAIE,MAAO,uDAAX;AAAA,EACP;AAEGC,MAAAA;AACAC,MAAAA;AAEJ,QAAMC,UAAUR,aACZS,wBAAkBN,wCAASO,aAATP,YAAqB,CAAA,CAAtB,EAA0BQ,KACxCH,CAAAA,cAAYA,qCAASI,QAAOZ,SAD/B,MAAAS,YAEK,OACL;AAEJ,MAAIV,cAAc,aAAa;AAC7B,QAAIC,aAAaQ,SAAS;AACxB,YAAIA,aAAQK,qBAARL,mBAA0BM,cAAWN,aAAQO,YAARP,mBAAiBM,SAAQ;AACzD,eAAA;AAAA,MACR;AACDR,cAAQE,QAAQK;AAAAA,IAAAA,WACPZ,cAAc,OAAO;AAC9BK,eAAQH,wCAASa,wBAATb,mBAA8Bc;AAAAA,IAAAA,OACjC;AACLX,eAAQH,wCAASa,wBAATb,mBAA8Be;AAAAA,IACvC;AAAA,EAAA,OACI;AACL,QAAIlB,aAAaQ,SAAS;AACxBF,cAAQE,QAAQO;AAChB,UAAId,cAAc,QAAQ;AACxBK,gBAAQE,QAAQW;AAChBZ,sBAAcC,QAAQY;AAAAA,MACvB;AAAA,IAAA,WACQnB,cAAc,OAAO;AAC9BK,eAAQH,aAAQkB,eAARlB,mBAAoBc;AAAAA,IAAAA,OACvB;AACLX,eAAQH,aAAQkB,eAARlB,mBAAoBe;AAAAA,IAC7B;AAAA,EACF;AAED,MAAI,CAACZ,OAAO;AACH,WAAA;AAAA,EACR;AAED,MAAIC,aAAa;AACf,+BACG,OAAD;AAAA,MAAA,GAAWH;AAAAA,MAAkB,MAAME;AAAAA,MAAO;AAAA,IAAA,CAD5C;AAAA,EAGD;AAED,6BAAQ,OAAD;AAAA,IAAA,GAAWF;AAAAA,IAAkB,MAAME;AAAAA,EAAAA,CAA1C;AACD;"}

package/dist/{dev → browser-dev}/ShopifyProvider.mjs

@@ -1,5 +1,6 @@
 import { createContext, useMemo, useContext } from "react";
 import { SFAPI_VERSION } from "./storefront-api-constants.mjs";
+import { getPublicTokenHeadersRaw } from "./storefront-client.mjs";
 import { jsx } from "react/jsx-runtime";
 const ShopifyContext = createContext({
   storeDomain: "test.myshopify.com",
@@ -11,7 +12,13 @@ const ShopifyContext = createContext({
   language: {
     isoCode: "EN"
   },
-  locale: "EN-US"
+  locale: "EN-US",
+  getStorefrontApiUrl() {
+    return "";
+  },
+  getPublicTokenHeaders() {
+    return {};
+  }
 });
 function ShopifyProvider({
   children,
@@ -23,10 +30,21 @@ function ShopifyProvider({
   if (shopifyConfig.storefrontApiVersion !== SFAPI_VERSION) {
     console.warn(`This version of Hydrogen-UI is built for Shopify's Storefront API version ${SFAPI_VERSION}, but it looks like you're using version ${shopifyConfig.storefrontApiVersion}. There may be issues or bugs if you use a mismatched version of Hydrogen-UI and the Storefront API.`);
   }
-  const finalConfig = useMemo(() => ({
-    ...shopifyConfig,
-    storeDomain: shopifyConfig.storeDomain.replace(/^https?:\/\//, "")
-  }), [shopifyConfig]);
+  const finalConfig = useMemo(() => {
+    const storeDomain = shopifyConfig.storeDomain.replace(/^https?:\/\//, "");
+    return {
+      ...shopifyConfig,
+      storeDomain,
+      getPublicTokenHeaders(overrideProps) {
+        var _a;
+        return getPublicTokenHeadersRaw(overrideProps.contentType, shopifyConfig.storefrontApiVersion, (_a = overrideProps.storefrontToken) != null ? _a : shopifyConfig.storefrontToken);
+      },
+      getStorefrontApiUrl(overrideProps) {
+        var _a, _b;
+        return `https://${(_a = overrideProps == null ? void 0 : overrideProps.storeDomain) != null ? _a : storeDomain}/api/${(_b = overrideProps == null ? void 0 : overrideProps.storefrontApiVersion) != null ? _b : shopifyConfig.storefrontApiVersion}/graphql.json`;
+      }
+    };
+  }, [shopifyConfig]);
   return /* @__PURE__ */ jsx(ShopifyContext.Provider, {
     value: finalConfig,
     children

package/dist/browser-dev/ShopifyProvider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShopifyProvider.mjs","sources":["../../src/ShopifyProvider.tsx"],"sourcesContent":["import {createContext, useContext, useMemo, type ReactNode} from 'react';\nimport type {LanguageCode, CountryCode, Shop} from './storefront-api-types.js';\nimport {SFAPI_VERSION} from './storefront-api-constants.js';\nimport {getPublicTokenHeadersRaw} from './storefront-client.js';\n\nconst ShopifyContext = createContext<ShopifyContextValue>({\n  storeDomain: 'test.myshopify.com',\n  storefrontToken: 'abc123',\n  storefrontApiVersion: SFAPI_VERSION,\n  country: {\n    isoCode: 'US',\n  },\n  language: {\n    isoCode: 'EN',\n  },\n  locale: 'EN-US',\n  getStorefrontApiUrl() {\n    return '';\n  },\n  getPublicTokenHeaders() {\n    return {};\n  },\n});\n\n/**\n * The `<ShopifyProvider/>` component enables use of the `useShop()` hook. The component should wrap your app.\n */\nexport function ShopifyProvider({\n  children,\n  shopifyConfig,\n}: {\n  children: ReactNode;\n  shopifyConfig: ShopifyContextProps;\n}) {\n  if (!shopifyConfig) {\n    throw new Error(\n      `The 'shopifyConfig' prop must be passed to '<ShopifyProvider/>'`\n    );\n  }\n\n  if (shopifyConfig.storefrontApiVersion !== SFAPI_VERSION) {\n    console.warn(\n      `This version of Hydrogen-UI is built for Shopify's Storefront API version ${SFAPI_VERSION}, but it looks like you're using version ${shopifyConfig.storefrontApiVersion}. There may be issues or bugs if you use a mismatched version of Hydrogen-UI and the Storefront API.`\n    );\n  }\n\n  const finalConfig = useMemo<ShopifyContextValue>(() => {\n    const storeDomain = shopifyConfig.storeDomain.replace(/^https?:\\/\\//, '');\n    return {\n      ...shopifyConfig,\n      storeDomain,\n      getPublicTokenHeaders(overrideProps) {\n        return getPublicTokenHeadersRaw(\n          overrideProps.contentType,\n          shopifyConfig.storefrontApiVersion,\n          overrideProps.storefrontToken ?? shopifyConfig.storefrontToken\n        );\n      },\n      getStorefrontApiUrl(overrideProps) {\n        return `https://${overrideProps?.storeDomain ?? storeDomain}/api/${\n          overrideProps?.storefrontApiVersion ??\n          shopifyConfig.storefrontApiVersion\n        }/graphql.json`;\n      },\n    };\n  }, [shopifyConfig]);\n\n  return (\n    <ShopifyContext.Provider value={finalConfig}>\n      {children}\n    </ShopifyContext.Provider>\n  );\n}\n\n/**\n * Provides access to the `shopifyConfig` prop of `<ShopifyProvider/>`. Must be a descendent of `<ShopifyProvider/>`.\n */\nexport function useShop() {\n  const shopContext = useContext(ShopifyContext);\n  if (!shopContext) {\n    throw new Error(`'useShop()' must be a descendent of <ShopifyProvider/>`);\n  }\n  return shopContext;\n}\n\n/**\n * Shopify-specific values that are used in various Hydrogen-UI components and hooks.\n */\nexport type ShopifyContextProps = {\n  /** The globally-unique identifier for the Shop */\n  storefrontId?: string;\n  /** The host name of the domain (eg: `{shop}.myshopify.com`). If a URL with a scheme (for example `https://`) is passed in, then the scheme is removed. */\n  storeDomain: Shop['primaryDomain']['host'];\n  /** The Storefront API public access token. Refer to the [authentication](https://shopify.dev/api/storefront#authentication) documentation for more details. */\n  storefrontToken: string;\n  /** The Storefront API version. This should almost always be the same as the version Hydrogen-UI was built for. Learn more about Shopify [API versioning](https://shopify.dev/api/usage/versioning) for more details.  */\n  storefrontApiVersion: string;\n  country?: {\n    /**\n     * The code designating a country, which generally follows ISO 3166-1 alpha-2 guidelines. If a territory doesn't have a country code value in the `CountryCode` enum, it might be considered a subdivision of another country. For example, the territories associated with Spain are represented by the country code `ES`, and the territories associated with the United States of America are represented by the country code `US`.\n     */\n    isoCode: CountryCode;\n  };\n  language?: {\n    /**\n     * `ISO 369` language codes supported by Shopify.\n     */\n    isoCode: LanguageCode;\n  };\n  /**\n   * The locale string based on `country` and `language`.\n   */\n  locale?: string;\n};\n\nexport type ShopifyContextValue = ShopifyContextProps & {\n  /**\n   * Creates the fully-qualified URL to your store's GraphQL endpoint.\n   *\n   * By default, it will use the config you passed in when creating `<ShopifyProvider/>`. However, you can override the following settings on each invocation of `getStorefrontApiUrl({...})`:\n   *\n   * - `storeDomain`\n   * - `storefrontApiVersion`\n   */\n  getStorefrontApiUrl: (props?: {\n    /** The host name of the domain (eg: `{shop}.myshopify.com`). */\n    storeDomain?: string;\n    /** The Storefront API version. This should almost always be the same as the version Hydrogen-UI was built for. Learn more about Shopify [API versioning](https://shopify.dev/api/usage/versioning) for more details. */\n    storefrontApiVersion?: string;\n  }) => string;\n  /**\n   * Returns an object that contains headers that are needed for each query to Storefront API GraphQL endpoint. This uses the public Storefront API token.\n   *\n   * By default, it will use the config you passed in when creating `<ShopifyProvider/>`. However, you can override the following settings on each invocation of `getPublicTokenHeaders({...})`:\n   *\n   * - `contentType`\n   * - `storefrontToken`\n   *\n   */\n  getPublicTokenHeaders: (props: {\n    /**\n     * Customizes which `\"content-type\"` header is added when using `getPrivateTokenHeaders()` and `getPublicTokenHeaders()`. When fetching with a `JSON.stringify()`-ed `body`, use `\"json\"`. When fetching with a `body` that is a plain string, use `\"graphql\"`. Defaults to `\"json\"`\n     */\n    contentType: 'json' | 'graphql';\n    /** The Storefront API access token. Refer to the [authentication](https://shopify.dev/api/storefront#authentication) documentation for more details. */\n    storefrontToken?: string;\n  }) => Record<string, string>;\n};\n"],"names":["ShopifyContext","createContext","storeDomain","storefrontToken","storefrontApiVersion","SFAPI_VERSION","country","isoCode","language","locale","getStorefrontApiUrl","getPublicTokenHeaders","ShopifyProvider","children","shopifyConfig","Error","console","warn","finalConfig","useMemo","replace","overrideProps","getPublicTokenHeadersRaw","contentType","_jsx","useShop","shopContext","useContext"],"mappings":";;;;AAKA,MAAMA,iBAAiBC,cAAmC;AAAA,EACxDC,aAAa;AAAA,EACbC,iBAAiB;AAAA,EACjBC,sBAAsBC;AAAAA,EACtBC,SAAS;AAAA,IACPC,SAAS;AAAA,EADF;AAAA,EAGTC,UAAU;AAAA,IACRD,SAAS;AAAA,EADD;AAAA,EAGVE,QAAQ;AAAA,EACRC,sBAAsB;AACb,WAAA;AAAA,EACR;AAAA,EACDC,wBAAwB;AACtB,WAAO;EACR;AAhBuD,CAAtB;AAsB7B,SAASC,gBAAgB;AAAA,EAC9BC;AAAAA,EACAC;AAF8B,GAM7B;AACD,MAAI,CAACA,eAAe;AACZ,UAAA,IAAIC,MACP,iEADG;AAAA,EAGP;AAEGD,MAAAA,cAAcV,yBAAyBC,eAAe;AACxDW,YAAQC,KACL,6EAA4EZ,yDAAyDS,cAAcV,0HADtJ;AAAA,EAGD;AAEKc,QAAAA,cAAcC,QAA6B,MAAM;AACrD,UAAMjB,cAAcY,cAAcZ,YAAYkB,QAAQ,gBAAgB,EAAlD;AACb,WAAA;AAAA,MACL,GAAGN;AAAAA,MACHZ;AAAAA,MACAS,sBAAsBU,eAAe;;AAC5BC,eAAAA,yBACLD,cAAcE,aACdT,cAAcV,uBACdiB,mBAAclB,oBAAdkB,YAAiCP,cAAcX,eAHlB;AAAA,MAKhC;AAAA,MACDO,oBAAoBW,eAAe;;AACjC,eAAQ,YAAUA,oDAAenB,gBAAfmB,YAA8BnB,oBAC9CmB,oDAAejB,yBAAfiB,YACAP,cAAcV;AAAAA,MAEjB;AAAA,IAAA;AAAA,EAfI,GAiBN,CAACU,aAAD,CAnBwB;AAsBzB,SAAAU,oBAAC,eAAe,UAAhB;AAAA,IAAyB,OAAON;AAAAA,IAAhC;AAAA,EAAA,CADF;AAKD;AAKM,SAASO,UAAU;AAClBC,QAAAA,cAAcC,WAAW3B,cAAD;AAC9B,MAAI,CAAC0B,aAAa;AACV,UAAA,IAAIX,MAAO,wDAAX;AAAA,EACP;AACMW,SAAAA;AACR;"}

package/dist/{dev → browser-dev}/cart-constants.mjs

@@ -1,5 +1,4 @@
 const CART_ID_STORAGE_KEY = "shopifyCartId";
-const STOREFRONT_API_PUBLIC_TOKEN_HEADER = "X-Shopify-Storefront-Access-Token";
 const SHOPIFY_STOREFRONT_ID_HEADER = "Shopify-Storefront-Id";
 const SHOPIFY_STOREFRONT_Y_HEADER = "Shopify-Storefront-Y";
 const SHOPIFY_STOREFRONT_S_HEADER = "Shopify-Storefront-S";
@@ -11,7 +10,6 @@ export {
   SHOPIFY_STOREFRONT_ID_HEADER,
   SHOPIFY_STOREFRONT_S_HEADER,
   SHOPIFY_STOREFRONT_Y_HEADER,
-  SHOPIFY_Y,
-  STOREFRONT_API_PUBLIC_TOKEN_HEADER
+  SHOPIFY_Y
 };
 //# sourceMappingURL=cart-constants.mjs.map

package/dist/browser-dev/cart-constants.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"cart-constants.mjs","sources":["../../src/cart-constants.ts"],"sourcesContent":["export const CART_ID_STORAGE_KEY = 'shopifyCartId';\nexport const CART_COOKIE_TTL_DAYS = 14;\n\n// Needed for cart analytics within Shopify\nexport const SHOPIFY_STOREFRONT_ID_HEADER = 'Shopify-Storefront-Id';\nexport const SHOPIFY_STOREFRONT_Y_HEADER = 'Shopify-Storefront-Y';\nexport const SHOPIFY_STOREFRONT_S_HEADER = 'Shopify-Storefront-S';\nexport const SHOPIFY_Y = '_shopify_y';\nexport const SHOPIFY_S = '_shopify_s';\n"],"names":[],"mappings":"AAAO,MAAM,sBAAsB;AAI5B,MAAM,+BAA+B;AACrC,MAAM,8BAA8B;AACpC,MAAM,8BAA8B;AACpC,MAAM,YAAY;AAClB,MAAM,YAAY;"}

package/dist/{dev → browser-dev}/cart-hooks.mjs

@@ -1,33 +1,29 @@
 import { useCallback } from "react";
 import { useShop } from "./ShopifyProvider.mjs";
-import { STOREFRONT_API_PUBLIC_TOKEN_HEADER, SHOPIFY_STOREFRONT_ID_HEADER, SHOPIFY_Y, SHOPIFY_S, SHOPIFY_STOREFRONT_Y_HEADER, SHOPIFY_STOREFRONT_S_HEADER } from "./cart-constants.mjs";
-import { parse as u } from "./node_modules/worktop/cookie/index.mjs";
+import { SHOPIFY_STOREFRONT_ID_HEADER, SHOPIFY_Y, SHOPIFY_S, SHOPIFY_STOREFRONT_Y_HEADER, SHOPIFY_STOREFRONT_S_HEADER } from "./cart-constants.mjs";
+import { parse } from "worktop/cookie";
 function useCartFetch() {
   const {
-    storeDomain,
-    storefrontApiVersion,
-    storefrontToken,
-    storefrontId
+    storefrontId,
+    getPublicTokenHeaders,
+    getStorefrontApiUrl
   } = useShop();
   return useCallback(({
     query,
     variables
   }) => {
-    const headers = {
-      "Content-Type": "application/json",
-      "X-SDK-Variant": "hydrogen",
-      "X-SDK-Version": storefrontApiVersion,
-      [STOREFRONT_API_PUBLIC_TOKEN_HEADER]: storefrontToken
-    };
+    const headers = getPublicTokenHeaders({
+      contentType: "json"
+    });
     if (storefrontId) {
       headers[SHOPIFY_STOREFRONT_ID_HEADER] = storefrontId;
     }
-    const cookieData = u(document.cookie);
+    const cookieData = parse(document.cookie);
     if (cookieData[SHOPIFY_Y] && cookieData[SHOPIFY_S]) {
       headers[SHOPIFY_STOREFRONT_Y_HEADER] = cookieData[SHOPIFY_Y];
       headers[SHOPIFY_STOREFRONT_S_HEADER] = cookieData[SHOPIFY_S];
     }
-    return fetch(`https://${storeDomain}/api/${storefrontApiVersion}/graphql.json`, {
+    return fetch(getStorefrontApiUrl(), {
       method: "POST",
       headers,
       body: JSON.stringify({
@@ -40,7 +36,7 @@ function useCartFetch() {
         errors: error.toString()
       };
     });
-  }, [storeDomain, storefrontApiVersion, storefrontToken, storefrontId]);
+  }, [getPublicTokenHeaders, storefrontId, getStorefrontApiUrl]);
 }
 export {
   useCartFetch

package/dist/browser-dev/cart-hooks.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"cart-hooks.mjs","sources":["../../src/cart-hooks.tsx"],"sourcesContent":["import {useState, useCallback} from 'react';\nimport {useShop} from './ShopifyProvider.js';\nimport {flattenConnection} from './flatten-connection.js';\nimport {CartInput, Cart as CartType} from './storefront-api-types.js';\nimport {CartCreate, defaultCartFragment} from './cart-queries.js';\nimport {Cart} from './cart-types.js';\nimport {\n  SHOPIFY_STOREFRONT_ID_HEADER,\n  SHOPIFY_STOREFRONT_Y_HEADER,\n  SHOPIFY_STOREFRONT_S_HEADER,\n  SHOPIFY_Y,\n  SHOPIFY_S,\n} from './cart-constants.js';\nimport {parse} from 'worktop/cookie';\nimport type {StorefrontApiResponseOkPartial} from './storefront-api-response.types.js';\n\nexport function useCartFetch() {\n  const {storefrontId, getPublicTokenHeaders, getStorefrontApiUrl} = useShop();\n\n  return useCallback(\n    <ReturnDataGeneric,>({\n      query,\n      variables,\n    }: {\n      query: string;\n      variables: Record<string, unknown>;\n    }): Promise<StorefrontApiResponseOkPartial<ReturnDataGeneric>> => {\n      const headers = getPublicTokenHeaders({contentType: 'json'});\n\n      if (storefrontId) {\n        headers[SHOPIFY_STOREFRONT_ID_HEADER] = storefrontId;\n      }\n\n      // Find Shopify cookies\n      const cookieData = parse(document.cookie);\n      if (cookieData[SHOPIFY_Y] && cookieData[SHOPIFY_S]) {\n        headers[SHOPIFY_STOREFRONT_Y_HEADER] = cookieData[SHOPIFY_Y];\n        headers[SHOPIFY_STOREFRONT_S_HEADER] = cookieData[SHOPIFY_S];\n      }\n\n      return fetch(getStorefrontApiUrl(), {\n        method: 'POST',\n        headers,\n        body: JSON.stringify({\n          query: query.toString(),\n          variables,\n        }),\n      })\n        .then((res) => res.json())\n        .catch((error) => {\n          return {\n            data: undefined,\n            errors: error.toString(),\n          };\n        });\n    },\n    [getPublicTokenHeaders, storefrontId, getStorefrontApiUrl]\n  );\n}\n\nexport function useInstantCheckout() {\n  const [cart, updateCart] = useState<Cart | undefined>();\n  const [checkoutUrl, updateCheckoutUrl] = useState<Cart['checkoutUrl']>();\n  const [error, updateError] = useState<string | undefined>();\n\n  const fetch = useCartFetch();\n\n  const createInstantCheckout = useCallback(\n    async (cartInput: CartInput) => {\n      const {data, errors} = await fetch<{\n        cartCreate: {cart: CartType};\n      }>({\n        query: CartCreate(defaultCartFragment),\n        variables: {\n          input: cartInput,\n        },\n      });\n\n      if (errors) {\n        updateError(errors.toString());\n        updateCart(undefined);\n        updateCheckoutUrl(undefined);\n      }\n\n      if (data?.cartCreate?.cart) {\n        const dataCart = data.cartCreate.cart;\n        updateCart({\n          ...dataCart,\n          lines: flattenConnection(dataCart.lines),\n          note: dataCart.note ?? undefined,\n        });\n        updateCheckoutUrl(dataCart.checkoutUrl);\n      }\n    },\n    [fetch]\n  );\n\n  return {cart, checkoutUrl, error, createInstantCheckout};\n}\n"],"names":["useCartFetch","storefrontId","getPublicTokenHeaders","getStorefrontApiUrl","useShop","useCallback","query","variables","headers","contentType","SHOPIFY_STOREFRONT_ID_HEADER","cookieData","parse","document","cookie","SHOPIFY_Y","SHOPIFY_S","SHOPIFY_STOREFRONT_Y_HEADER","SHOPIFY_STOREFRONT_S_HEADER","fetch","method","body","JSON","stringify","toString","then","res","json","catch","error","data","undefined","errors"],"mappings":";;;;AAgBO,SAASA,eAAe;AACvB,QAAA;AAAA,IAACC;AAAAA,IAAcC;AAAAA,IAAuBC;AAAAA,MAAuBC,QAAnE;AAEA,SAAOC,YACL,CAAqB;AAAA,IACnBC;AAAAA,IACAC;AAAAA,EAAAA,MAIgE;AAChE,UAAMC,UAAUN,sBAAsB;AAAA,MAACO,aAAa;AAAA,IAAA,CAAf;AAErC,QAAIR,cAAc;AAChBO,cAAQE,gCAAgCT;AAAAA,IACzC;AAGKU,UAAAA,aAAaC,MAAMC,SAASC,MAAV;AACpBH,QAAAA,WAAWI,cAAcJ,WAAWK,YAAY;AAClDR,cAAQS,+BAA+BN,WAAWI;AAClDP,cAAQU,+BAA+BP,WAAWK;AAAAA,IACnD;AAEMG,WAAAA,MAAMhB,uBAAuB;AAAA,MAClCiB,QAAQ;AAAA,MACRZ;AAAAA,MACAa,MAAMC,KAAKC,UAAU;AAAA,QACnBjB,OAAOA,MAAMkB,SADM;AAAA,QAEnBjB;AAAAA,MAAAA,CAFI;AAAA,IAAA,CAHI,EAQTkB,KAAMC,CAAAA,QAAQA,IAAIC,MARd,EASJC,MAAOC,CAAU,UAAA;AACT,aAAA;AAAA,QACLC,MAAMC;AAAAA,QACNC,QAAQH,MAAML,SAAN;AAAA,MAAA;AAAA,IAFH,CAVJ;AAAA,EAgBT,GAAA,CAACtB,uBAAuBD,cAAcE,mBAAtC,CArCgB;AAuCnB;"}