@shopify/hydrogen-react 2022.10.8 → 2023.1.5

package/dist/types/CartCost.d.ts

@@ -1,13 +1,17 @@
-import { Money } from './Money.js';
-export interface CartCostProps {
+import { Money, type MoneyPropsBase } from './Money.js';
+interface CartCostPropsBase {
     /** A string type that defines the type of cost needed. Valid values: `total`, `subtotal`, `tax`, or `duty`. */
     amountType?: 'total' | 'subtotal' | 'tax' | 'duty';
     /** Any `ReactNode` elements. */
     children?: React.ReactNode;
 }
+type CartCostProps = Omit<React.ComponentProps<typeof Money>, 'data'> & CartCostPropsBase;
 /**
- * The `CartCost` component renders a `Money` component with the
- * cost associated with the `amountType` prop. If no `amountType` prop is specified, then it defaults to `totalAmount`.
-Depends on `useCart()` and must be a child of `<CartProvider/>`
+ * The `CartCost` component renders a `Money` component with the cost associated with the `amountType` prop.
+ * If no `amountType` prop is specified, then it defaults to `totalAmount`.
+ * Depends on `useCart()` and must be a child of `<CartProvider/>`
  */
-export declare function CartCost(props: Omit<React.ComponentProps<typeof Money>, 'data'> & CartCostProps): JSX.Element | null;
+export declare function CartCost(props: CartCostProps): JSX.Element | null;
+export interface CartCostPropsForDocs<AsType extends React.ElementType = 'div'> extends Omit<MoneyPropsBase<AsType>, 'data'>, CartCostPropsBase {
+}
+export {};

package/dist/types/CartLinePrice.d.ts

@@ -1,7 +1,7 @@
-import { Money } from './Money.js';
+import { Money, type MoneyPropsBase } from './Money.js';
 import { CartLine } from './storefront-api-types.js';
 import { PartialDeep } from 'type-fest';
-interface CartLinePriceProps {
+interface CartLinePricePropsBase {
     /** A [CartLine object](https://shopify.dev/api/storefront/reference/objects/CartLine). */
     data: PartialDeep<CartLine, {
         recurseIntoArrays: true;
@@ -9,9 +9,23 @@ interface CartLinePriceProps {
     /** The type of price. Valid values:`regular` (default) or `compareAt`. */
     priceType?: 'regular' | 'compareAt';
 }
+type CartLinePriceProps = Omit<React.ComponentProps<typeof Money>, 'data'> & CartLinePricePropsBase;
 /**
- * The `CartLinePrice` component renders a `Money` component for the cart line merchandise's price or
- * compare at price.
+ * @deprecated Use `Money` instead. To migrate, use the `priceType` prop that matches the corresponding property on the `CartLine` object:
+ * - `regular`: `cartLine.cost.totalAmount`
+ * - `compareAt`: `cartLine.cost.compareAtAmountPerQuantity`
+ *
+ * For example:
+ * ```
+ * // before
+ * <CartLinePrice data={cartLine} priceType="regular" />
+ * // after
+ * <Money data={cartLine.cost.totalAmount} />
+ * ```
+ *
+ * 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 declare function CartLinePrice(props: CartLinePriceProps): JSX.Element | null;
+export interface CartLinePricePropsForDocs<AsType extends React.ElementType = 'div'> extends Omit<MoneyPropsBase<AsType>, 'data'>, CartLinePricePropsBase {
+}
 export {};

package/dist/types/CartLineProvider.d.ts

@@ -1,16 +1,24 @@
 import { type ReactNode } from 'react';
-import { CartLine } from './storefront-api-types.js';
-export declare const CartLineContext: import("react").Context<CartLine | null>;
+import type { CartLine } from './storefront-api-types.js';
+import type { PartialDeep } from 'type-fest';
+type CartLinePartialDeep = PartialDeep<CartLine, {
+    recurseIntoArrays: true;
+}>;
+export declare const CartLineContext: import("react").Context<import("type-fest/source/partial-deep.js").PartialObjectDeep<CartLine, {
+    recurseIntoArrays: true;
+}> | null>;
 /**
- * The `useCartLine` hook provides access to the cart line object. It must be a descendent of a `CartProvider` component.
+ * The `useCartLine` hook provides access to the [CartLine object](https://shopify.dev/api/storefront/unstable/objects/cartline) from the Storefront API. 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, }: {
+export declare function useCartLine(): CartLinePartialDeep;
+type CartLineProviderProps = {
     /** Any `ReactNode` elements. */
     children: ReactNode;
     /** A cart line object. */
-    line: CartLine;
-}): JSX.Element;
+    line: CartLinePartialDeep;
+};
+/**
+ * The `CartLineProvider` component creates a context for using a cart line.
+ */
+export declare function CartLineProvider({ children, line, }: CartLineProviderProps): JSX.Element;
+export {};

package/dist/types/CartLineQuantity.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentPropsWithoutRef, ElementType } from 'react';
+interface CartLineQuantityBaseProps<ComponentGeneric extends ElementType = 'span'> {
+    /** An HTML tag or React Component to be rendered as the base element wrapper. The default is `span`. */
+    as?: ComponentGeneric;
+}
+export type CartLineQuantityProps<ComponentGeneric extends ElementType> = CartLineQuantityBaseProps<ComponentGeneric> & Omit<ComponentPropsWithoutRef<ComponentGeneric>, keyof CartLineQuantityBaseProps<ComponentGeneric>>;
+/**
+ * The `<CartLineQuantity/>` component renders a `span` (or another element / component that can be customized by the `as` prop) with the cart line's quantity.
+ *
+ * It must be a descendent of a `<CartLineProvider/>` component, and uses the `useCartLine()` hook internally.
+ */
+export declare function CartLineQuantity<ComponentGeneric extends ElementType = 'span'>(props: CartLineQuantityProps<ComponentGeneric>): JSX.Element;
+export {};

package/dist/types/CartLineQuantityAdjustButton.d.ts

@@ -0,0 +1,13 @@
+import { type BaseButtonProps } from './BaseButton.js';
+interface CartLineQuantityAdjustButtonBaseProps {
+    /** The adjustment for a cart line's quantity. Valid values: `increase` (default), `decrease`, or `remove`. */
+    adjust?: 'increase' | 'decrease' | 'remove';
+}
+type CartLineQuantityAdjustButtonProps<AsType extends React.ElementType = 'button'> = BaseButtonProps<AsType> & CartLineQuantityAdjustButtonBaseProps;
+/**
+ * The `<CartLineQuantityAdjustButton />` component renders a button that adjusts the cart line's quantity when pressed.
+ *
+ * It must be a descendent of `<CartLineProvider/>` and `<CartProvider/>`.
+ */
+export declare function CartLineQuantityAdjustButton<AsType extends React.ElementType = 'button'>(props: CartLineQuantityAdjustButtonProps<AsType>): JSX.Element;
+export {};

package/dist/types/CartProvider.d.ts

@@ -6,7 +6,7 @@ export declare const CartContext: import("react").Context<CartWithActions | null
  * The `useCart` hook provides access to the cart object. It must be a descendent of a `CartProvider` component.
  */
 export declare function useCart(): CartWithActions;
-export declare function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLineRemove, onLineUpdate, onNoteUpdate, onBuyerIdentityUpdate, onAttributesUpdate, onDiscountCodesUpdate, onCreateComplete, onLineAddComplete, onLineRemoveComplete, onLineUpdateComplete, onNoteUpdateComplete, onBuyerIdentityUpdateComplete, onAttributesUpdateComplete, onDiscountCodesUpdateComplete, data: cart, cartFragment, customerAccessToken, countryCode, }: {
+type CartProviderProps = {
     /** Any `ReactNode` elements. */
     children: React.ReactNode;
     /**  Maximum number of cart lines to fetch. Defaults to 250 cart lines. */
@@ -53,8 +53,18 @@ export declare function CartProvider({ children, numCartLines, onCreate, onLineA
     customerAccessToken?: CartBuyerIdentityInput['customerAccessToken'];
     /** The ISO country code for i18n. */
     countryCode?: CountryCode;
-}): JSX.Element;
+};
+/**
+ * The `CartProvider` component synchronizes the state of the Storefront API Cart and a customer's cart,
+ * and allows you to more easily manipulate the cart by adding, removing, and updating it.
+ * It could be placed at the root of your app so that your whole app is able to use the `useCart()` hook anywhere.
+ *
+ * There are props that trigger when a call to the Storefront API is made, such as `onLineAdd={}` when a line is added to the cart.
+ * There are also props that trigger when a call to the Storefront API is completed, such as `onLineAddComplete={}` when the fetch request for adding a line to the cart completes.
+ */
+export declare function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLineRemove, onLineUpdate, onNoteUpdate, onBuyerIdentityUpdate, onAttributesUpdate, onDiscountCodesUpdate, onCreateComplete, onLineAddComplete, onLineRemoveComplete, onLineUpdateComplete, onNoteUpdateComplete, onBuyerIdentityUpdateComplete, onAttributesUpdateComplete, onDiscountCodesUpdateComplete, data: cart, cartFragment, customerAccessToken, countryCode, }: CartProviderProps): JSX.Element;
 /** Check for storage availability funciton obtained from
  * https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API
  */
-export declare function storageAvailable(type: 'localStorage' | 'sessionStorage'): boolean | undefined;
+export declare function storageAvailable(type: 'localStorage' | 'sessionStorage'): boolean;
+export {};

package/dist/types/ExternalVideo.d.ts

@@ -1,6 +1,6 @@
 import type { ExternalVideo as ExternalVideoType } from './storefront-api-types.js';
 import type { PartialDeep } from 'type-fest';
-interface BaseProps {
+interface ExternalVideoBaseProps {
     /**
      * An object with fields that correspond to the Storefront API's [ExternalVideo object](https://shopify.dev/api/storefront/reference/products/externalvideo).
      */
@@ -13,8 +13,7 @@ interface BaseProps {
      */
     options?: YouTube | Vimeo;
 }
-type PropsWeControl = 'src';
-export type ExternalVideoProps = Omit<JSX.IntrinsicElements['iframe'], PropsWeControl> & BaseProps;
+export type ExternalVideoProps = Omit<JSX.IntrinsicElements['iframe'], 'src'> & ExternalVideoBaseProps;
 /**
  * The `ExternalVideo` component renders an embedded video for the Storefront
  * API's [ExternalVideo object](https://shopify.dev/api/storefront/reference/products/externalvideo).

package/dist/types/Image.d.ts

@@ -8,10 +8,12 @@ export type ShopifyLoaderOptions = {
     width?: HtmlImageProps['width'] | ImageType['width'];
     height?: HtmlImageProps['height'] | ImageType['height'];
 };
-export type ShopifyLoaderParams = Simplify<ShopifyLoaderOptions & {
+export type ShopifyLoaderParams = Simplify<ShopifyLoaderOptions & ImageSrc>;
+type ImageSrc = {
     src: ImageType['url'];
-}>;
-export type ShopifyImageProps = Omit<HtmlImageProps, 'src'> & {
+};
+export type ShopifyImageProps = Omit<HtmlImageProps, 'src'> & ShopifyImageBaseProps;
+type ShopifyImageBaseProps = {
     /** 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

@@ -11,18 +11,19 @@ export interface MediaFileProps extends BaseProps {
     data: PartialDeep<MediaEdgeType['node'], {
         recurseIntoArrays: true;
     }>;
-    /** The options for the `Image`, `Video`, or `ExternalVideo` components. */
-    mediaOptions?: {
-        /** Props that will only apply when an `<Image />` is rendered */
-        image?: Omit<ShopifyImageProps, 'data'>;
-        /** Props that will only apply when a `<Video />` is rendered */
-        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'>;
-        /** Props that will only apply when a `<ModelViewer />` is rendered */
-        modelViewer?: Omit<typeof ModelViewer, 'data'>;
-    };
+    /** The options for the `Image`, `Video`, `ExternalVideo`, or `ModelViewer` components. */
+    mediaOptions?: MediaOptions;
 }
+type MediaOptions = {
+    /** Props that will only apply when an `<Image />` is rendered */
+    image?: Omit<ShopifyImageProps, 'data'>;
+    /** Props that will only apply when a `<Video />` is rendered */
+    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'>;
+    /** Props that will only apply when a `<ModelViewer />` is rendered */
+    modelViewer?: Omit<typeof ModelViewer, 'data'>;
+};
 /**
  * The `MediaFile` component renders the media for the Storefront API's
  * [Media object](https://shopify.dev/api/storefront/reference/products/media). It renders an `Image`, a

package/dist/types/ModelViewer.d.ts

@@ -1,7 +1,6 @@
 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';
-type PropsWeControl = 'src';
 declare global {
     namespace JSX {
         interface IntrinsicElements {
@@ -13,7 +12,8 @@ declare global {
 }
 type ModelViewerProps = Omit<PartialDeep<JSX.IntrinsicElements['model-viewer'], {
     recurseIntoArrays: true;
-}>, PropsWeControl> & {
+}>, 'src'> & ModelViewerBaseProps;
+type ModelViewerBaseProps = {
     /** An object with fields that correspond to the Storefront API's [Model3D object](https://shopify.dev/api/storefront/latest/objects/model3d). */
     data: PartialDeep<Model3d, {
         recurseIntoArrays: true;

package/dist/types/Money.d.ts

@@ -1,7 +1,7 @@
 import { type ReactNode } from 'react';
 import type { MoneyV2, UnitPriceMeasurement } from './storefront-api-types.js';
 import type { PartialDeep } from 'type-fest';
-interface CustomProps<ComponentGeneric extends React.ElementType> {
+export interface MoneyPropsBase<ComponentGeneric extends React.ElementType> {
     /** An HTML tag or React Component to be rendered as the base element wrapper. The default is `div`. */
     as?: ComponentGeneric;
     /** An object with fields that correspond to the Storefront API's [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2). */
@@ -19,11 +19,10 @@ 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 type MoneyProps<ComponentGeneric extends React.ElementType> = CustomProps<ComponentGeneric> & Omit<React.ComponentPropsWithoutRef<ComponentGeneric>, keyof CustomProps<ComponentGeneric>>;
+export type MoneyProps<ComponentGeneric extends React.ElementType> = MoneyPropsBase<ComponentGeneric> & Omit<React.ComponentPropsWithoutRef<ComponentGeneric>, keyof MoneyPropsBase<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
  * `locale` in the `ShopifyProvider` component.
  */
 export declare function Money<ComponentGeneric extends React.ElementType = 'div'>({ data, as, withoutCurrency, withoutTrailingZeros, measurement, measurementSeparator, ...passthroughProps }: MoneyProps<ComponentGeneric>): JSX.Element;
-export {};

package/dist/types/ProductPrice.d.ts

@@ -1,8 +1,8 @@
 import type { Product } from './storefront-api-types.js';
-import { type MoneyProps } from './Money.js';
+import { type MoneyProps, type MoneyPropsBase } from './Money.js';
 import type { PartialDeep } from 'type-fest';
 export interface ProductPriceProps {
-    /** A [Product object](https://shopify.dev/api/storefront/reference/products/product). */
+    /** A Storefront API [Product object](https://shopify.dev/api/storefront/reference/products/product). */
     data: PartialDeep<Product, {
         recurseIntoArrays: true;
     }>;
@@ -18,3 +18,5 @@ export interface ProductPriceProps {
  * [`priceRange`](https://shopify.dev/api/storefront/reference/products/productpricerange)'s `maxVariantPrice` or `minVariantPrice`, for either the regular price or compare at price range.
  */
 export declare function ProductPrice<ComponentGeneric extends React.ElementType>(props: ProductPriceProps & Omit<MoneyProps<ComponentGeneric>, 'data' | 'measurement'>): JSX.Element | null;
+export interface ProductPricePropsForDocs<AsType extends React.ElementType = 'div'> extends Omit<MoneyPropsBase<AsType>, 'data' | 'measurement'>, ProductPriceProps {
+}

package/dist/types/ProductProvider.d.ts

@@ -2,7 +2,7 @@ import type { SelectedOption as SelectedOptionType, Product, ProductVariant as P
 import type { PartialDeep } from 'type-fest';
 type InitialVariantId = ProductVariantType['id'] | null;
 interface ProductProviderProps {
-    /** A [Product object](https://shopify.dev/api/storefront/reference/products/product). */
+    /** A Storefront API [Product object](https://shopify.dev/api/storefront/reference/products/product). */
     data: PartialDeep<Product, {
         recurseIntoArrays: true;
     }>;

package/dist/types/ShopPayButton.d.ts

@@ -1,22 +1,25 @@
-type ShopPayButtonProps = {
+type ShopPayButtonProps = ShopPayButtonStyleProps & (ShopPayVariantIds | ShopPayVariantAndQuantities);
+type ShopPayButtonStyleProps = {
     /** 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). */
     width?: string;
-} & ({
-    /** An array of IDs of the variants to purchase with Shop Pay. This will only ever have a quantity of 1 for each variant. If you want to use other quantities, then use 'variantIdsAndQuantities'. */
+};
+type ShopPayVariantIds = {
+    /** An array of IDs of the variants to purchase with Shop Pay. This will only ever have a quantity of 1 for each variant. If you want to use other quantities, then use `variantIdsAndQuantities`. */
     variantIds: string[];
     /** An array of variant IDs and quantities to purchase with Shop Pay. */
     variantIdsAndQuantities?: never;
-} | {
-    /** An array of IDs of the variants to purchase with Shop Pay. This will only ever have a quantity of 1 for each variant. If you want to use other quantities, then use 'variantIdsAndQuantities'. */
+};
+type ShopPayVariantAndQuantities = {
+    /** An array of IDs of the variants to purchase with Shop Pay. This will only ever have a quantity of 1 for each variant. If you want to use other quantities, then use `variantIdsAndQuantities`. */
     variantIds?: never;
     /** An array of variant IDs and quantities to purchase with Shop Pay. */
     variantIdsAndQuantities: Array<{
         id: string;
         quantity: number;
     }>;
-});
+};
 declare global {
     namespace JSX {
         interface IntrinsicElements {
@@ -33,10 +36,7 @@ declare global {
  * It relies on the `<ShopProvider>` context provider.
  */
 export declare function ShopPayButton({ variantIds, className, variantIdsAndQuantities, width, }: ShopPayButtonProps): JSX.Element;
-/**
- * Takes a string in the format of "gid://shopify/ProductVariant/41007289630776" and returns a string of the ID part at the end: "41007289630776"
- */
-export declare function getIdFromGid(id?: string): string | undefined;
+export declare const InvalidPropsErrorMessage = "You must pass in \"variantIds\" in the form of [\"gid://shopify/ProductVariant/1\"]";
 export declare const MissingPropsErrorMessage = "You must pass in either \"variantIds\" or \"variantIdsAndQuantities\" to ShopPayButton";
 export declare const DoublePropsErrorMessage = "You must provide either a variantIds or variantIdsAndQuantities prop, but not both in the ShopPayButton component";
 export {};

package/dist/types/ShopifyProvider.d.ts

@@ -3,44 +3,39 @@ 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: ShopifyContextProps;
-}): JSX.Element;
+export declare function ShopifyProvider({ children, ...shopifyConfig }: ShopifyProviderProps): JSX.Element;
 /**
  * Provides access to the `shopifyConfig` prop of `<ShopifyProvider/>`. Must be a descendent of `<ShopifyProvider/>`.
  */
 export declare function useShop(): ShopifyContextValue;
-/**
- * Shopify-specific values that are used in various Hydrogen-UI components and hooks.
- */
-export type ShopifyContextProps = {
+export interface ShopifyProviderBase {
     /** The globally-unique identifier for the Shop */
     storefrontId?: string;
-    /** The subdomain of your Shopify storefront URL (eg: `{subdomain}.myshopify.com`). */
+    /** The full domain of your Shopify storefront URL (eg: the complete string of `{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.  */
+    /** The Storefront API version. This should almost always be the same as the version Hydrogen React was built for. Learn more about Shopify [API versioning](https://shopify.dev/api/usage/versioning) for more details.  */
     storefrontApiVersion: string;
-    country?: {
-        /**
-         * 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`.
-         */
-        isoCode: CountryCode;
-    };
-    language?: {
-        /**
-         * `ISO 369` language codes supported by Shopify.
-         */
-        isoCode: LanguageCode;
-    };
     /**
-     * The locale string based on `country` and `language`.
+     * 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`.
      */
-    locale?: string;
-};
-export type ShopifyContextValue = ShopifyContextProps & {
+    countryIsoCode: CountryCode;
+    /**
+     * `ISO 369` language codes supported by Shopify.
+     */
+    languageIsoCode: LanguageCode;
+}
+/**
+ * Shopify-specific values that are used in various Hydrogen React components and hooks.
+ */
+export interface ShopifyProviderProps extends ShopifyProviderBase {
+    /** React children to render. */
+    children?: ReactNode;
+}
+export interface ShopifyContextValue extends ShopifyProviderBase, ShopifyContextReturn {
+}
+type ShopifyContextReturn = {
     /**
      * Creates the fully-qualified URL to your store's GraphQL endpoint.
      *
@@ -49,12 +44,7 @@ export type ShopifyContextValue = ShopifyContextProps & {
      * - `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;
+    getStorefrontApiUrl: (props?: GetStorefrontApiUrlProps) => 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.
      *
@@ -64,14 +54,7 @@ export type ShopifyContextValue = ShopifyContextProps & {
      * - `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>;
+    getPublicTokenHeaders: (props: GetPublicTokenHeadersProps) => Record<string, string>;
     /**
      * Creates the fully-qualified URL to your myshopify.com domain.
      *
@@ -79,7 +62,23 @@ export type ShopifyContextValue = ShopifyContextProps & {
      *
      * - `storeDomain`
      */
-    getShopifyDomain: (props?: {
-        storeDomain?: string;
-    }) => string;
+    getShopifyDomain: (props?: GetShopifyDomainProps) => string;
+};
+type GetStorefrontApiUrlProps = {
+    /** 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;
+};
+type GetPublicTokenHeadersProps = {
+    /**
+     * 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;
+};
+type GetShopifyDomainProps = {
+    storeDomain?: string;
 };
+export {};

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

@@ -0,0 +1,48 @@
+export declare const AnalyticsEventName: AnalyticsEventName;
+export declare const AnalyticsPageType: AnalyticsPageType;
+export declare const ShopifySalesChannel: ShopifySalesChannel;
+export declare const ShopifyAppId: {
+    readonly hydrogen: "6167201";
+    readonly headless: "12875497473";
+};
+/**
+ * These duplicated interface declaration is so that we can generate proper documentation
+ * for these public facing constants
+ */
+interface AnalyticsEventName {
+    /** Page view */
+    PAGE_VIEW: 'PAGE_VIEW';
+    /** Add to cart */
+    ADD_TO_CART: 'ADD_TO_CART';
+}
+interface AnalyticsPageType {
+    article: 'article';
+    blog: 'blog';
+    captcha: 'captcha';
+    cart: 'cart';
+    collection: 'collection';
+    customersAccount: 'customers/account';
+    customersActivateAccount: 'customers/activate_account';
+    customersAddresses: 'customers/addresses';
+    customersLogin: 'customers/login';
+    customersOrder: 'customers/order';
+    customersRegister: 'customers/register';
+    customersResetPassword: 'customers/reset_password';
+    giftCard: 'gift_card';
+    home: 'index';
+    listCollections: 'list-collections';
+    forbidden: '403';
+    notFound: '404';
+    page: 'page';
+    password: 'password';
+    product: 'product';
+    policy: 'policy';
+    search: 'search';
+}
+interface ShopifySalesChannel {
+    /** Shopify Hydrogen sales channel */
+    hydrogen: 'hydrogen';
+    /** Shopify Headless sales channel */
+    headless: 'headless';
+}
+export {};

package/dist/types/analytics-schema-custom-storefront-customer-tracking.d.ts

@@ -0,0 +1,3 @@
+import { ShopifyPageViewPayload, ShopifyAddToCartPayload, ShopifyMonorailEvent } from './analytics-types.js';
+export declare function pageView(payload: ShopifyPageViewPayload): ShopifyMonorailEvent[];
+export declare function addToCart(payload: ShopifyAddToCartPayload): ShopifyMonorailEvent[];

package/dist/types/analytics-schema-trekkie-storefront-page-view.d.ts

@@ -0,0 +1,2 @@
+import { ShopifyPageViewPayload, ShopifyMonorailEvent } from './analytics-types.js';
+export declare function pageView(payload: ShopifyPageViewPayload): ShopifyMonorailEvent[];