@shopify/hydrogen-react 2022.10.2 → 2022.10.4

package/dist/node-prod/useMoney.mjs

@@ -0,0 +1,72 @@
+import { useMemo } from "react";
+import { useShop } from "./ShopifyProvider.mjs";
+function useMoney(money) {
+  const {
+    locale
+  } = useShop();
+  if (!locale) {
+    throw new Error(`useMoney(): Unable to get 'locale' from 'useShop()', which means that 'locale' was not passed to '<ShopifyProvider/>'. 'locale' is required for 'useMoney()' to work`);
+  }
+  const amount = parseFloat(money.amount);
+  const options = useMemo(() => ({
+    style: "currency",
+    currency: money.currencyCode
+  }), [money.currencyCode]);
+  const defaultFormatter = useLazyFormatter(locale, options);
+  const nameFormatter = useLazyFormatter(locale, {
+    ...options,
+    currencyDisplay: "name"
+  });
+  const narrowSymbolFormatter = useLazyFormatter(locale, {
+    ...options,
+    currencyDisplay: "narrowSymbol"
+  });
+  const withoutTrailingZerosFormatter = useLazyFormatter(locale, {
+    ...options,
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0
+  });
+  const withoutCurrencyFormatter = useLazyFormatter(locale);
+  const withoutTrailingZerosOrCurrencyFormatter = useLazyFormatter(locale, {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0
+  });
+  const isPartCurrency = (part) => part.type === "currency";
+  const lazyFormatters = useMemo(() => ({
+    original: () => money,
+    currencyCode: () => money.currencyCode,
+    localizedString: () => defaultFormatter().format(amount),
+    parts: () => defaultFormatter().formatToParts(amount),
+    withoutTrailingZeros: () => amount % 1 === 0 ? withoutTrailingZerosFormatter().format(amount) : defaultFormatter().format(amount),
+    withoutTrailingZerosAndCurrency: () => amount % 1 === 0 ? withoutTrailingZerosOrCurrencyFormatter().format(amount) : withoutCurrencyFormatter().format(amount),
+    currencyName: () => {
+      var _a, _b;
+      return (_b = (_a = nameFormatter().formatToParts(amount).find(isPartCurrency)) == null ? void 0 : _a.value) != null ? _b : money.currencyCode;
+    },
+    currencySymbol: () => {
+      var _a, _b;
+      return (_b = (_a = defaultFormatter().formatToParts(amount).find(isPartCurrency)) == null ? void 0 : _a.value) != null ? _b : money.currencyCode;
+    },
+    currencyNarrowSymbol: () => {
+      var _a, _b;
+      return (_b = (_a = narrowSymbolFormatter().formatToParts(amount).find(isPartCurrency)) == null ? void 0 : _a.value) != null ? _b : "";
+    },
+    amount: () => defaultFormatter().formatToParts(amount).filter((part) => ["decimal", "fraction", "group", "integer", "literal"].includes(part.type)).map((part) => part.value).join("")
+  }), [money, amount, nameFormatter, defaultFormatter, narrowSymbolFormatter, withoutCurrencyFormatter, withoutTrailingZerosFormatter, withoutTrailingZerosOrCurrencyFormatter]);
+  return useMemo(() => new Proxy(lazyFormatters, {
+    get: (target, key) => {
+      var _a;
+      return (_a = Reflect.get(target, key)) == null ? void 0 : _a.call(null);
+    }
+  }), [lazyFormatters]);
+}
+function useLazyFormatter(locale, options) {
+  return useMemo(() => {
+    let memoized;
+    return () => memoized != null ? memoized : memoized = new Intl.NumberFormat(locale, options);
+  }, [locale, options]);
+}
+export {
+  useMoney
+};
+//# sourceMappingURL=useMoney.mjs.map

package/dist/node-prod/useMoney.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMoney.mjs","sources":["../../src/useMoney.tsx"],"sourcesContent":["import {useMemo} from 'react';\nimport {useShop} from './ShopifyProvider.js';\nimport {CurrencyCode, MoneyV2} from './storefront-api-types.js';\n\nexport type UseMoneyValue = {\n  /**\n   * The currency code from the `MoneyV2` object.\n   */\n  currencyCode: CurrencyCode;\n  /**\n   * The name for the currency code, returned by `Intl.NumberFormat`.\n   */\n  currencyName?: string;\n  /**\n   * The currency symbol returned by `Intl.NumberFormat`.\n   */\n  currencySymbol?: string;\n  /**\n   * The currency narrow symbol returned by `Intl.NumberFormat`.\n   */\n  currencyNarrowSymbol?: string;\n  /**\n   * The localized amount, without any currency symbols or non-number types from the `Intl.NumberFormat.formatToParts` parts.\n   */\n  amount: string;\n  /**\n   * All parts returned by `Intl.NumberFormat.formatToParts`.\n   */\n  parts: Intl.NumberFormatPart[];\n  /**\n   * A string returned by `new Intl.NumberFormat` for the amount and currency code,\n   * using the `locale` value in the [`LocalizationProvider` component](https://shopify.dev/api/hydrogen/components/localization/localizationprovider).\n   */\n  localizedString: string;\n  /**\n   * The `MoneyV2` object provided as an argument to the hook.\n   */\n  original: MoneyV2;\n  /**\n   * A string with trailing zeros removed from the fractional part, if any exist. If there are no trailing zeros, then the fractional part remains.\n   * For example, `$640.00` turns into `$640`.\n   * `$640.42` remains `$640.42`.\n   */\n  withoutTrailingZeros: string;\n  /**\n   * A string without currency and without trailing zeros removed from the fractional part, if any exist. If there are no trailing zeros, then the fractional part remains.\n   * For example, `$640.00` turns into `640`.\n   * `$640.42` turns into `640.42`.\n   */\n  withoutTrailingZerosAndCurrency: string;\n};\n\n/**\n * The `useMoney` hook takes a [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2) and returns a\n * default-formatted string of the amount with the correct currency indicator, along with some of the parts provided by\n * [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat).\n * Uses `locale` from `ShopifyProvider`\n */\nexport function useMoney(money: MoneyV2): UseMoneyValue {\n  const {locale} = useShop();\n\n  if (!locale) {\n    throw new Error(\n      `useMoney(): Unable to get 'locale' from 'useShop()', which means that 'locale' was not passed to '<ShopifyProvider/>'. 'locale' is required for 'useMoney()' to work`\n    );\n  }\n\n  const amount = parseFloat(money.amount);\n\n  const options = useMemo(\n    () => ({\n      style: 'currency',\n      currency: money.currencyCode,\n    }),\n    [money.currencyCode]\n  );\n\n  const defaultFormatter = useLazyFormatter(locale, options);\n\n  const nameFormatter = useLazyFormatter(locale, {\n    ...options,\n    currencyDisplay: 'name',\n  });\n\n  const narrowSymbolFormatter = useLazyFormatter(locale, {\n    ...options,\n    currencyDisplay: 'narrowSymbol',\n  });\n\n  const withoutTrailingZerosFormatter = useLazyFormatter(locale, {\n    ...options,\n    minimumFractionDigits: 0,\n    maximumFractionDigits: 0,\n  });\n\n  const withoutCurrencyFormatter = useLazyFormatter(locale);\n\n  const withoutTrailingZerosOrCurrencyFormatter = useLazyFormatter(locale, {\n    minimumFractionDigits: 0,\n    maximumFractionDigits: 0,\n  });\n\n  const isPartCurrency = (part: Intl.NumberFormatPart) =>\n    part.type === 'currency';\n\n  // By wrapping these properties in functions, we only\n  // create formatters if they are going to be used.\n  const lazyFormatters = useMemo(\n    () => ({\n      original: () => money,\n      currencyCode: () => money.currencyCode,\n\n      localizedString: () => defaultFormatter().format(amount),\n\n      parts: () => defaultFormatter().formatToParts(amount),\n\n      withoutTrailingZeros: () =>\n        amount % 1 === 0\n          ? withoutTrailingZerosFormatter().format(amount)\n          : defaultFormatter().format(amount),\n\n      withoutTrailingZerosAndCurrency: () =>\n        amount % 1 === 0\n          ? withoutTrailingZerosOrCurrencyFormatter().format(amount)\n          : withoutCurrencyFormatter().format(amount),\n\n      currencyName: () =>\n        nameFormatter().formatToParts(amount).find(isPartCurrency)?.value ??\n        money.currencyCode, // e.g. \"US dollars\"\n\n      currencySymbol: () =>\n        defaultFormatter().formatToParts(amount).find(isPartCurrency)?.value ??\n        money.currencyCode, // e.g. \"USD\"\n\n      currencyNarrowSymbol: () =>\n        narrowSymbolFormatter().formatToParts(amount).find(isPartCurrency)\n          ?.value ?? '', // e.g. \"$\"\n\n      amount: () =>\n        defaultFormatter()\n          .formatToParts(amount)\n          .filter((part) =>\n            ['decimal', 'fraction', 'group', 'integer', 'literal'].includes(\n              part.type\n            )\n          )\n          .map((part) => part.value)\n          .join(''),\n    }),\n    [\n      money,\n      amount,\n      nameFormatter,\n      defaultFormatter,\n      narrowSymbolFormatter,\n      withoutCurrencyFormatter,\n      withoutTrailingZerosFormatter,\n      withoutTrailingZerosOrCurrencyFormatter,\n    ]\n  );\n\n  // Call functions automatically when the properties are accessed\n  // to keep these functions as an implementation detail.\n  return useMemo(\n    () =>\n      new Proxy(lazyFormatters as unknown as UseMoneyValue, {\n        get: (target, key) => Reflect.get(target, key)?.call(null),\n      }),\n    [lazyFormatters]\n  );\n}\n\nfunction useLazyFormatter(locale: string, options?: Intl.NumberFormatOptions) {\n  return useMemo(() => {\n    let memoized: Intl.NumberFormat;\n    return () => (memoized ??= new Intl.NumberFormat(locale, options));\n  }, [locale, options]);\n}\n"],"names":["useMoney","money","locale","useShop","Error","amount","parseFloat","options","useMemo","style","currency","currencyCode","defaultFormatter","useLazyFormatter","nameFormatter","currencyDisplay","narrowSymbolFormatter","withoutTrailingZerosFormatter","minimumFractionDigits","maximumFractionDigits","withoutCurrencyFormatter","withoutTrailingZerosOrCurrencyFormatter","isPartCurrency","part","type","lazyFormatters","original","localizedString","format","parts","formatToParts","withoutTrailingZeros","withoutTrailingZerosAndCurrency","currencyName","find","value","currencySymbol","currencyNarrowSymbol","filter","includes","map","join","Proxy","get","target","key","Reflect","call","memoized","Intl","NumberFormat"],"mappings":"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"}

package/dist/types/AddToCartButton.d.ts

@@ -1,5 +1,5 @@
 import { BaseButtonProps } from './BaseButton.js';
-interface AddToCartButtonProps {
+export interface AddToCartButtonProps {
     /** An array of cart line attributes that belong to the item being added to the cart. */
     attributes?: {
         key: string;
@@ -19,4 +19,3 @@ interface AddToCartButtonProps {
  * It must be a descendent of the `CartProvider` component.
  */
 export declare function AddToCartButton<AsType extends React.ElementType = 'button'>(props: AddToCartButtonProps & BaseButtonProps<AsType>): JSX.Element;
-export {};

package/dist/types/BaseButton.d.ts

@@ -11,5 +11,5 @@ export interface CustomBaseButtonProps<AsType> {
     /** A ref to the underlying button */
     buttonRef?: Ref<HTMLButtonElement>;
 }
-export declare type BaseButtonProps<AsType extends React.ElementType> = CustomBaseButtonProps<AsType> & Omit<React.ComponentPropsWithoutRef<AsType>, keyof CustomBaseButtonProps<AsType>>;
+export type BaseButtonProps<AsType extends React.ElementType> = CustomBaseButtonProps<AsType> & Omit<React.ComponentPropsWithoutRef<AsType>, keyof CustomBaseButtonProps<AsType>>;
 export declare function BaseButton<AsType extends React.ElementType = 'button'>(props: BaseButtonProps<AsType>): JSX.Element;

package/dist/types/CartCheckoutButton.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { BaseButtonProps } from './BaseButton.js';
-declare type PropsWeControl = 'onClick';
+type PropsWeControl = 'onClick';
 /**
  * The `CartCheckoutButton` component renders a button that redirects to the checkout URL for the cart.
  * It must be a descendent of a `CartProvider` component.

package/dist/types/CartLinePrice.d.ts

@@ -0,0 +1,17 @@
+import { Money } from './Money.js';
+import { CartLine } from './storefront-api-types.js';
+import { PartialDeep } from 'type-fest';
+interface CartLinePriceProps {
+    /** A [CartLine object](https://shopify.dev/api/storefront/reference/objects/CartLine). */
+    data: PartialDeep<CartLine, {
+        recurseIntoArrays: true;
+    }>;
+    /** The type of price. Valid values:`regular` (default) or `compareAt`. */
+    priceType?: 'regular' | 'compareAt';
+}
+/**
+ * The `CartLinePrice` component renders a `Money` component for the cart line merchandise's price or
+ * compare at price.
+ */
+export declare function CartLinePrice(props: Omit<React.ComponentProps<typeof Money>, 'data'> & CartLinePriceProps): JSX.Element | null;
+export {};

package/dist/types/CartLineProvider.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from 'react';
+import { CartLine } from './storefront-api-types.js';
+export declare const CartLineContext: import("react").Context<CartLine | null>;
+/**
+ * The `useCartLine` hook provides access to the cart line object. It must be a descendent of a `CartProvider` component.
+ */
+export declare function useCartLine(): CartLine;
+/**
+ * The `CartLineProvider` component creates a context for using a cart line.
+ */
+export declare function CartLineProvider({ children, line, }: {
+    /** Any `ReactNode` elements. */
+    children: ReactNode;
+    /** A cart line object. */
+    line: CartLine;
+}): JSX.Element;

package/dist/types/ExternalVideo.d.ts

@@ -13,8 +13,8 @@ interface BaseProps {
      */
     options?: YouTube | Vimeo;
 }
-declare type PropsWeControl = 'src';
-export declare type ExternalVideoProps = Omit<JSX.IntrinsicElements['iframe'], PropsWeControl> & BaseProps;
+type PropsWeControl = 'src';
+export type ExternalVideoProps = Omit<JSX.IntrinsicElements['iframe'], PropsWeControl> & BaseProps;
 /**
  * The `ExternalVideo` component renders an embedded video for the Storefront
  * API's [ExternalVideo object](https://shopify.dev/api/storefront/reference/products/externalvideo).
@@ -43,7 +43,7 @@ interface YouTube {
     start?: number;
     widget_referrer?: string;
 }
-declare type VimeoBoolean = 0 | 1 | boolean;
+type VimeoBoolean = 0 | 1 | boolean;
 interface Vimeo {
     autopause?: VimeoBoolean;
     autoplay?: VimeoBoolean;

package/dist/types/Image.d.ts

@@ -1,17 +1,17 @@
 import * as React from 'react';
 import type { Image as ImageType } from './storefront-api-types.js';
 import type { PartialDeep, Simplify } from 'type-fest';
-declare type HtmlImageProps = React.ImgHTMLAttributes<HTMLImageElement>;
-export declare type ShopifyLoaderOptions = {
+type HtmlImageProps = React.ImgHTMLAttributes<HTMLImageElement>;
+export type ShopifyLoaderOptions = {
     crop?: 'top' | 'bottom' | 'left' | 'right' | 'center';
     scale?: 2 | 3;
     width?: HtmlImageProps['width'] | ImageType['width'];
     height?: HtmlImageProps['height'] | ImageType['height'];
 };
-export declare type ShopifyLoaderParams = Simplify<ShopifyLoaderOptions & {
+export type ShopifyLoaderParams = Simplify<ShopifyLoaderOptions & {
     src: ImageType['url'];
 }>;
-export declare type ShopifyImageProps = Omit<HtmlImageProps, 'src'> & {
+export type ShopifyImageProps = Omit<HtmlImageProps, 'src'> & {
     /** An object with fields that correspond to the Storefront API's
      * [Image object](https://shopify.dev/api/storefront/reference/common-objects/image).
      * The `data` prop is required.

package/dist/types/MediaFile.d.ts

@@ -5,7 +5,7 @@ import { ModelViewer } from './ModelViewer.js';
 import type { MediaEdge as MediaEdgeType } from './storefront-api-types.js';
 import type { PartialDeep } from 'type-fest';
 import type { ModelViewerElement } from '@google/model-viewer/lib/model-viewer.js';
-declare type BaseProps = React.HTMLAttributes<HTMLImageElement | HTMLVideoElement | HTMLIFrameElement | ModelViewerElement>;
+type BaseProps = React.HTMLAttributes<HTMLImageElement | HTMLVideoElement | HTMLIFrameElement | ModelViewerElement>;
 export interface MediaFileProps extends BaseProps {
     /** An object with fields that correspond to the Storefront API's [Media object](https://shopify.dev/api/storefront/reference/products/media). */
     data: PartialDeep<MediaEdgeType['node'], {
@@ -14,13 +14,13 @@ export interface MediaFileProps extends BaseProps {
     /** The options for the `Image`, `Video`, or `ExternalVideo` components. */
     mediaOptions?: {
         /** Props that will only apply when an `<Image />` is rendered */
-        image: Omit<ShopifyImageProps, 'data'>;
+        image?: Omit<ShopifyImageProps, 'data'>;
         /** Props that will only apply when a `<Video />` is rendered */
-        video: Omit<React.ComponentProps<typeof Video>, 'data'>;
+        video?: Omit<React.ComponentProps<typeof Video>, 'data'>;
         /** Props that will only apply when an `<ExternalVideo />` is rendered */
-        externalVideo: Omit<React.ComponentProps<typeof ExternalVideo>['options'], 'data'>;
+        externalVideo?: Omit<React.ComponentProps<typeof ExternalVideo>['options'], 'data'>;
         /** Props that will only apply when a `<ModelViewer />` is rendered */
-        modelViewer: Omit<typeof ModelViewer, 'data'>;
+        modelViewer?: Omit<typeof ModelViewer, 'data'>;
     };
 }
 /**

package/dist/types/Metafield.d.ts

@@ -9,7 +9,7 @@ interface BaseProps<ComponentGeneric extends ElementType> {
     /** 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). */
     as?: ComponentGeneric;
 }
-export declare type MetafieldProps<ComponentGeneric extends ElementType> = ComponentPropsWithoutRef<ComponentGeneric> & BaseProps<ComponentGeneric>;
+export type MetafieldProps<ComponentGeneric extends ElementType> = ComponentPropsWithoutRef<ComponentGeneric> & BaseProps<ComponentGeneric>;
 /**
  * The `Metafield` component renders the value of a Storefront
  * API's [Metafield object](https://shopify.dev/api/storefront/reference/common-objects/metafield).
@@ -44,7 +44,7 @@ export declare function parseMetafieldValue(metafield: PartialDeep<MetafieldType
  */
 export declare function parseJSON(json: string): any;
 export declare function getMeasurementAsString(measurement: Measurement, locale?: string, options?: Intl.NumberFormatOptions): string;
-declare type ParsedMetafield = Omit<PartialDeep<MetafieldType, {
+type ParsedMetafield = Omit<PartialDeep<MetafieldType, {
     recurseIntoArrays: true;
 }>, 'value'> & {
     value?: string | number | boolean | JsonValue | Date | Rating | Measurement;

package/dist/types/ModelViewer.d.ts

@@ -1,7 +1,7 @@
 import type { Model3d } from './storefront-api-types.js';
 import type { PartialDeep } from 'type-fest';
 import type { ModelViewerElement } from '@google/model-viewer/lib/model-viewer.js';
-declare type PropsWeControl = 'src';
+type PropsWeControl = 'src';
 declare global {
     namespace JSX {
         interface IntrinsicElements {
@@ -11,7 +11,7 @@ declare global {
         }
     }
 }
-declare type ModelViewerProps = Omit<PartialDeep<JSX.IntrinsicElements['model-viewer'], {
+type ModelViewerProps = Omit<PartialDeep<JSX.IntrinsicElements['model-viewer'], {
     recurseIntoArrays: true;
 }>, PropsWeControl> & {
     /** An object with fields that correspond to the Storefront API's [Model3D object](https://shopify.dev/api/storefront/latest/objects/model3d). */

package/dist/types/Money.d.ts

@@ -19,7 +19,7 @@ interface CustomProps<ComponentGeneric extends React.ElementType> {
     /** Customizes the separator between the money output and the measurement output. Used with the `measurement` prop. Defaults to `'/'`. */
     measurementSeparator?: ReactNode;
 }
-export declare type MoneyProps<ComponentGeneric extends React.ElementType> = CustomProps<ComponentGeneric> & Omit<React.ComponentPropsWithoutRef<ComponentGeneric>, keyof CustomProps<ComponentGeneric>>;
+export type MoneyProps<ComponentGeneric extends React.ElementType> = CustomProps<ComponentGeneric> & Omit<React.ComponentPropsWithoutRef<ComponentGeneric>, keyof CustomProps<ComponentGeneric>>;
 /**
  * The `Money` component renders a string of the Storefront API's
  * [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2) according to the

package/dist/types/ProductProvider.d.ts

@@ -1,6 +1,6 @@
 import type { SelectedOption as SelectedOptionType, Product, ProductVariant as ProductVariantType, ProductVariantConnection, SellingPlan as SellingPlanType, SellingPlanAllocation as SellingPlanAllocationType, SellingPlanGroup as SellingPlanGroupType, SellingPlanGroupConnection } from './storefront-api-types.js';
 import type { PartialDeep } from 'type-fest';
-declare type InitialVariantId = ProductVariantType['id'] | null;
+type InitialVariantId = ProductVariantType['id'] | null;
 interface ProductProviderProps {
     /** A [Product object](https://shopify.dev/api/storefront/reference/products/product). */
     data: PartialDeep<Product, {
@@ -32,7 +32,7 @@ export interface OptionWithValues {
     name: SelectedOptionType['name'];
     values: SelectedOptionType['value'][];
 }
-declare type ProductHookValue = PartialDeep<{
+type ProductHookValue = PartialDeep<{
     /** An array of the variant `nodes` from the `VariantConnection`. */
     variants: ProductVariantType[];
     variantsConnection?: ProductVariantConnection;
@@ -68,7 +68,7 @@ declare type ProductHookValue = PartialDeep<{
     /** A callback that returns a boolean indicating if the option is in stock. */
     isOptionInStock: (name: SelectedOptionType['name'], value: SelectedOptionType['value']) => boolean;
 };
-export declare type SelectedOptions = {
+export type SelectedOptions = {
     [key: string]: string;
 };
 export {};

package/dist/types/ShopPayButton.d.ts

@@ -1,4 +1,4 @@
-declare type ShopPayButtonProps = {
+type ShopPayButtonProps = {
     /** A string of classes to apply to the `div` that wraps the Shop Pay button. */
     className?: string;
     /** A string that's applied to the [CSS custom property (variable)](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) `--shop-pay-button-width` for the [Buy with Shop Pay component](https://shopify.dev/custom-storefronts/tools/web-components#buy-with-shop-pay-component). */

package/dist/types/ShopifyProvider.d.ts

@@ -1,11 +1,11 @@
 import { type ReactNode } from 'react';
-import type { LanguageCode, CountryCode, Shop } from './storefront-api-types.js';
+import type { LanguageCode, CountryCode } from './storefront-api-types.js';
 /**
  * The `<ShopifyProvider/>` component enables use of the `useShop()` hook. The component should wrap your app.
  */
 export declare function ShopifyProvider({ children, shopifyConfig, }: {
     children: ReactNode;
-    shopifyConfig: ShopifyContextValue;
+    shopifyConfig: ShopifyContextProps;
 }): JSX.Element;
 /**
  * Provides access to the `shopifyConfig` prop of `<ShopifyProvider/>`. Must be a descendent of `<ShopifyProvider/>`.
@@ -14,11 +14,11 @@ export declare function useShop(): ShopifyContextValue;
 /**
  * Shopify-specific values that are used in various Hydrogen-UI components and hooks.
  */
-export declare type ShopifyContextValue = {
+export type ShopifyContextProps = {
     /** The globally-unique identifier for the Shop */
     storefrontId?: string;
-    /** 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. */
-    storeDomain: Shop['primaryDomain']['host'];
+    /** The subdomain of your Shopify storefront URL (eg: `{subdomain}.myshopify.com`). */
+    storeDomain: string;
     /** The Storefront API public access token. Refer to the [authentication](https://shopify.dev/api/storefront#authentication) documentation for more details. */
     storefrontToken: string;
     /** 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.  */
@@ -40,3 +40,46 @@ export declare type ShopifyContextValue = {
      */
     locale?: string;
 };
+export type ShopifyContextValue = ShopifyContextProps & {
+    /**
+     * Creates the fully-qualified URL to your store's GraphQL endpoint.
+     *
+     * 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({...})`:
+     *
+     * - `storeDomain`
+     * - `storefrontApiVersion`
+     */
+    getStorefrontApiUrl: (props?: {
+        /** The host name of the domain (eg: `{shop}.myshopify.com`). */
+        storeDomain?: string;
+        /** 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. */
+        storefrontApiVersion?: string;
+    }) => string;
+    /**
+     * Returns an object that contains headers that are needed for each query to Storefront API GraphQL endpoint. This uses the public Storefront API token.
+     *
+     * 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({...})`:
+     *
+     * - `contentType`
+     * - `storefrontToken`
+     *
+     */
+    getPublicTokenHeaders: (props: {
+        /**
+         * 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"`
+         */
+        contentType: 'json' | 'graphql';
+        /** The Storefront API access token. Refer to the [authentication](https://shopify.dev/api/storefront#authentication) documentation for more details. */
+        storefrontToken?: string;
+    }) => Record<string, string>;
+    /**
+     * Creates the fully-qualified URL to your myshopify.com domain.
+     *
+     * By default, it will use the config you passed in when calling `<ShopifyProvider/>`. However, you can override the following settings on each invocation of `getShopifyDomain({...})`:
+     *
+     * - `storeDomain`
+     */
+    getShopifyDomain: (props?: {
+        storeDomain?: string;
+    }) => string;
+};

package/dist/types/cart-constants.d.ts

@@ -1,6 +1,5 @@
 export declare const CART_ID_STORAGE_KEY = "shopifyCartId";
 export declare const CART_COOKIE_TTL_DAYS = 14;
-export declare const STOREFRONT_API_PUBLIC_TOKEN_HEADER = "X-Shopify-Storefront-Access-Token";
 export declare const SHOPIFY_STOREFRONT_ID_HEADER = "Shopify-Storefront-Id";
 export declare const SHOPIFY_STOREFRONT_Y_HEADER = "Shopify-Storefront-Y";
 export declare const SHOPIFY_STOREFRONT_S_HEADER = "Shopify-Storefront-S";

package/dist/types/cart-types.d.ts

@@ -1,8 +1,8 @@
 import { Cart as CartType, CartInput, CartLine, CartLineInput, CartLineUpdateInput, MutationCartNoteUpdateArgs, CartBuyerIdentityInput, MutationCartAttributesUpdateArgs } from './storefront-api-types.js';
 import { StateMachine } from '@xstate/fsm';
 import type { PartialDeep } from 'type-fest';
-export declare type CartStatus = CartState['status'];
-export declare type Cart = PartialDeep<{
+export type CartStatus = CartState['status'];
+export type Cart = PartialDeep<{
     /** The cart's ID if it has been created through the Storefront API. */
     id?: string;
     /** The cart lines. */
@@ -50,7 +50,7 @@ export interface CartWithActions extends Cart {
     /** The fragment used to query the cart object for all queries and mutations. */
     cartFragment: string;
 }
-export declare type CartState = 
+export type CartState = 
 /** A cart has not been created yet, or an error occurred when a cart was attempting to be created or fetched. */
 {
     status: 'uninitialized';
@@ -76,7 +76,7 @@ export declare type CartState =
     cart: Cart;
     error?: string;
 };
-export declare type CartAction = {
+export type CartAction = {
     type: 'cartFetch';
 } | {
     type: 'cartCreate';
@@ -108,7 +108,7 @@ export declare type CartAction = {
 } | {
     type: 'resetCart';
 };
-export declare type CartMachineContext = {
+export type CartMachineContext = {
     cart?: PartialDeep<Cart, {
         recurseIntoArrays: true;
     }>;
@@ -123,66 +123,66 @@ export declare type CartMachineContext = {
     }>;
     errors?: unknown;
 };
-export declare type CartFetchEvent = {
+export type CartFetchEvent = {
     type: 'CART_FETCH';
     payload: {
         cartId: string;
     };
 };
-export declare type CartCreateEvent = {
+export type CartCreateEvent = {
     type: 'CART_CREATE';
     payload: CartInput;
 };
-export declare type CartSetEvent = {
+export type CartSetEvent = {
     type: 'CART_SET';
     payload: {
         cart: CartType;
     };
 };
-export declare type CartLineAddEvent = {
+export type CartLineAddEvent = {
     type: 'CARTLINE_ADD';
     payload: {
         lines: CartLineInput[];
     };
 };
-export declare type CartLineRemoveEvent = {
+export type CartLineRemoveEvent = {
     type: 'CARTLINE_REMOVE';
     payload: {
         lines: string[];
     };
 };
-export declare type CartLineUpdateEvent = {
+export type CartLineUpdateEvent = {
     type: 'CARTLINE_UPDATE';
     payload: {
         lines: CartLineUpdateInput[];
     };
 };
-export declare type NoteUpdateEvent = {
+export type NoteUpdateEvent = {
     type: 'NOTE_UPDATE';
     payload: {
         note: MutationCartNoteUpdateArgs['note'];
     };
 };
-export declare type BuyerIdentityUpdateEvent = {
+export type BuyerIdentityUpdateEvent = {
     type: 'BUYER_IDENTITY_UPDATE';
     payload: {
         buyerIdentity: CartBuyerIdentityInput;
     };
 };
-export declare type CartAttributesUpdateEvent = {
+export type CartAttributesUpdateEvent = {
     type: 'CART_ATTRIBUTES_UPDATE';
     payload: {
         attributes: MutationCartAttributesUpdateArgs['attributes'];
     };
 };
-export declare type DiscountCodesUpdateEvent = {
+export type DiscountCodesUpdateEvent = {
     type: 'DISCOUNT_CODES_UPDATE';
     payload: {
         discountCodes: string[];
     };
 };
-export declare type CartMachineActionEvent = CartFetchEvent | CartCreateEvent | CartSetEvent | CartLineAddEvent | CartLineRemoveEvent | CartLineUpdateEvent | NoteUpdateEvent | BuyerIdentityUpdateEvent | CartAttributesUpdateEvent | DiscountCodesUpdateEvent;
-export declare type CartMachineFetchResultEvent = {
+export type CartMachineActionEvent = CartFetchEvent | CartCreateEvent | CartSetEvent | CartLineAddEvent | CartLineRemoveEvent | CartLineUpdateEvent | NoteUpdateEvent | BuyerIdentityUpdateEvent | CartAttributesUpdateEvent | DiscountCodesUpdateEvent;
+export type CartMachineFetchResultEvent = {
     type: 'CART_COMPLETED';
     payload: {
         cartActionEvent: CartMachineActionEvent;
@@ -203,8 +203,8 @@ export declare type CartMachineFetchResultEvent = {
         errors: unknown;
     };
 };
-export declare type CartMachineEvent = CartMachineActionEvent | CartMachineFetchResultEvent;
-export declare type CartMachineTypeState = {
+export type CartMachineEvent = CartMachineActionEvent | CartMachineFetchResultEvent;
+export type CartMachineTypeState = {
     value: 'uninitialized';
     context: CartMachineContext & {
         cart: undefined;
@@ -272,8 +272,8 @@ export declare type CartMachineTypeState = {
     value: 'discountCodesUpdating';
     context: CartMachineContext;
 };
-export declare type CartMachineAction = StateMachine.ActionFunction<CartMachineContext, CartMachineEvent>;
-export declare type CartMachineActions = {
+export type CartMachineAction = StateMachine.ActionFunction<CartMachineContext, CartMachineEvent>;
+export type CartMachineActions = {
     cartFetchAction: CartMachineAction;
     cartCreateAction: CartMachineAction;
     cartLineRemoveAction: CartMachineAction;

package/dist/types/codegen.helpers.d.ts

@@ -0,0 +1,9 @@
+/** Meant to be used with GraphQL CodeGen to type the Storefront API's custom scalars correctly */
+export declare const storefrontApiCustomScalars: {
+    DateTime: string;
+    Decimal: string;
+    HTML: string;
+    URL: string;
+    Color: string;
+    UnsignedInt64: string;
+};

package/dist/types/image-size.d.ts

@@ -7,8 +7,8 @@ export declare const IMG_SRC_SET_SIZES: number[];
  */
 export declare function addImageSizeParametersToUrl({ src, width, height, crop, scale, }: ShopifyLoaderParams): string;
 export declare function shopifyImageLoader(params: ShopifyLoaderParams): string;
-declare type HtmlImageProps = React.ImgHTMLAttributes<HTMLImageElement>;
-export declare type GetShopifyImageDimensionsProps = {
+type HtmlImageProps = React.ImgHTMLAttributes<HTMLImageElement>;
+export type GetShopifyImageDimensionsProps = {
     data: Pick<PartialDeep<ImageType, {
         recurseIntoArrays: true;
     }>, 'altText' | 'url' | 'id' | 'width' | 'height'>;
@@ -18,7 +18,7 @@ export declare type GetShopifyImageDimensionsProps = {
         height?: HtmlImageProps['height'];
     };
 };
-declare type GetShopifyImageDimensionsPropsReturn = {
+type GetShopifyImageDimensionsPropsReturn = {
     width: number | string | null;
     height: number | string | null;
 };

package/dist/types/index.d.cts

@@ -3,6 +3,7 @@ export { BuyNowButton } from './BuyNowButton.js';
 export type { CartState, CartStatus, Cart, CartWithActions, CartAction, } from './cart-types.js';
 export { CartCheckoutButton } from './CartCheckoutButton.js';
 export { CartProvider, useCart } from './CartProvider.js';
+export { storefrontApiCustomScalars } from './codegen.helpers.js';
 export { ExternalVideo } from './ExternalVideo.js';
 export { flattenConnection } from './flatten-connection.js';
 export { Image } from './Image.js';

package/dist/types/index.d.ts

@@ -3,6 +3,7 @@ export { BuyNowButton } from './BuyNowButton.js';
 export type { CartState, CartStatus, Cart, CartWithActions, CartAction, } from './cart-types.js';
 export { CartCheckoutButton } from './CartCheckoutButton.js';
 export { CartProvider, useCart } from './CartProvider.js';
+export { storefrontApiCustomScalars } from './codegen.helpers.js';
 export { ExternalVideo } from './ExternalVideo.js';
 export { flattenConnection } from './flatten-connection.js';
 export { Image } from './Image.js';

package/dist/types/load-script.d.ts

@@ -2,10 +2,10 @@ export declare function loadScript(src: string, options?: {
     module?: boolean;
     in?: 'head' | 'body';
 }): Promise<boolean>;
-declare type LoadScriptParams = Parameters<typeof loadScript>;
+type LoadScriptParams = Parameters<typeof loadScript>;
 /**
  * The `useLoadScript` hook loads an external script tag in the browser. It allows React components to lazy-load large third-party dependencies.
  */
 export declare function useLoadScript(url: LoadScriptParams[0], options?: LoadScriptParams[1]): ScriptState;
-declare type ScriptState = 'loading' | 'done' | 'error';
+type ScriptState = 'loading' | 'done' | 'error';
 export {};