@shopify/hydrogen-react 2022.10.7 → 2023.1.4

package/dist/types/CartLineProvider.d.ts

@@ -1,16 +1,18 @@
 import { type ReactNode } from 'react';
-import { CartLine } from './storefront-api-types.js';
+import type { 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, }: {
+type CartLineProviderProps = {
     /** Any `ReactNode` elements. */
     children: ReactNode;
     /** A cart line object. */
     line: CartLine;
-}): JSX.Element;
+};
+/**
+ * The `CartLineProvider` component creates a context for using a cart line.
+ */
+export declare function CartLineProvider({ children, line }: CartLineProviderProps): 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 {};

package/dist/types/ExternalVideo.d.ts

@@ -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'> & BaseProps;
 /**
  * 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/ProductPrice.d.ts

@@ -2,7 +2,7 @@ import type { Product } from './storefront-api-types.js';
 import { type MoneyProps } 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;
     }>;

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,36 @@ 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.
+ * Shopify-specific values that are used in various Hydrogen React components and hooks.
  */
-export type ShopifyContextProps = {
+export type ShopifyProviderProps = {
     /** 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;
+    countryIsoCode: CountryCode;
+    /**
+     * `ISO 369` language codes supported by Shopify.
+     */
+    languageIsoCode: LanguageCode;
+    /** React children to render. */
+    children?: ReactNode;
 };
-export type ShopifyContextValue = ShopifyContextProps & {
+export type ShopifyContextValue = Omit<ShopifyProviderProps, 'children'> & ShopifyContextReturn;
+type ShopifyContextReturn = {
     /**
      * Creates the fully-qualified URL to your store's GraphQL endpoint.
      *
@@ -49,12 +41,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 +51,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 +59,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[];

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

@@ -0,0 +1,108 @@
+import type { CurrencyCode, LanguageCode, Product, ProductVariant } from './storefront-api-types.js';
+import { AnalyticsEventName, ShopifySalesChannel } from './analytics-constants.js';
+import { SHOPIFY_Y, SHOPIFY_S } from './cart-constants.js';
+export type ClientBrowserParameters = {
+    /** Shopify unique user token: Value of `_shopify_y` cookie. Use `getClientBrowserParameters()` to collect this value. */
+    uniqueToken: string;
+    /** Shopify session token: Value of `_shopify_s` cookie. Use `getClientBrowserParameters()` to collect this value. */
+    visitToken: string;
+    /** `window.location.href`. Use `getClientBrowserParameters()` to collect this value. */
+    url: string;
+    /** `window.location.pathname`. Use `getClientBrowserParameters()` to collect this value. */
+    path: string;
+    /** `window.location.search`. Use `getClientBrowserParameters()` to collect this value. */
+    search: string;
+    /** `window.location.referrer`. Use `getClientBrowserParameters()` to collect this value. */
+    referrer: string;
+    /** `document.title`. Use `getClientBrowserParameters()` to collect this value. */
+    title: string;
+    /** `navigator.userAgent`. Use `getClientBrowserParameters()` to collect this value. */
+    userAgent: string;
+    /** Navigation type: 'navigate' | 'reload' | 'back_forward' | 'prerender' | 'unknown <number>'. Use `getClientBrowserParameters()` to collect this value. */
+    navigationType: string;
+    /** Navigation api: 'PerformanceNavigationTiming' | 'performance.navigation'. Use `getClientBrowserParameters()` to collect this value. */
+    navigationApi: string;
+};
+export type ShopifyAnalyticsProduct = {
+    productGid: Product['id'];
+    variantGid?: ProductVariant['id'];
+    name: Product['title'];
+    variantName?: ProductVariant['title'];
+    brand: Product['vendor'];
+    category?: Product['productType'];
+    price: ProductVariant['price']['amount'];
+    sku?: ProductVariant['sku'];
+    quantity?: number;
+};
+type ShopifyAnalyticsBase = {
+    /** If we have consent from buyer for data collection */
+    hasUserConsent: boolean;
+    /** Shopify shop id in the form of `gid://shopify/Shop/<id>`. */
+    shopId: string;
+    /** Currency code. */
+    currency: CurrencyCode;
+    /** Shopify storefront id generated by Hydrogen sales channel. */
+    storefrontId?: string;
+    /** Language displayed to buyer. */
+    acceptedLanguage?: LanguageCode;
+    /** Shopify sales channel. */
+    shopifySalesChannel?: ShopifySalesChannels;
+    /** Shopify customer id in the form of `gid://shopify/Customer/<id>`. */
+    customerId?: string;
+    /** Total value of products. */
+    totalValue?: number;
+    /** Shopify products. */
+    products?: ShopifyAnalyticsProduct[];
+};
+export type ShopifySalesChannels = keyof typeof ShopifySalesChannel;
+export type AnalyticsEventNames = keyof typeof AnalyticsEventName;
+export interface ShopifyPageViewPayload extends ShopifyAnalyticsBase, ClientBrowserParameters {
+    /** Canonical url. */
+    canonicalUrl?: string;
+    /** Shopify page type. */
+    pageType?: string;
+    /** Shopify resource id in the form of `gid://shopify/<type>/<id>`. */
+    resourceId?: string;
+    /** Shopify collection handle. */
+    collectionHandle?: string;
+    /** Search term used on a search results page. */
+    searchString?: string;
+}
+export type ShopifyPageView = {
+    /** Use `AnalyticsEventName.PAGE_VIEW` constant. */
+    eventName: string;
+    payload: ShopifyPageViewPayload;
+};
+export interface ShopifyAddToCartPayload extends ShopifyAnalyticsBase, ClientBrowserParameters {
+    /** Shopify cart id in the form of `gid://shopify/Cart/<id>`. */
+    cartId: string;
+}
+export type ShopifyAddToCart = {
+    /** Use `AnalyticsEventName.ADD_TO_CART` constant. */
+    eventName: string;
+    payload: ShopifyAddToCartPayload;
+};
+export type ShopifyMonorailPayload = {
+    products?: string[];
+    [key: string]: unknown;
+};
+export type ShopifyMonorailEvent = {
+    schema_id: string;
+    payload: ShopifyMonorailPayload;
+    metadata: {
+        event_created_at_ms: number;
+    };
+};
+export type ShopifyAnalyticsPayload = ShopifyPageViewPayload | ShopifyAddToCartPayload;
+export type ShopifyAnalytics = ShopifyPageView | ShopifyAddToCart;
+export type ShopifyCookies = {
+    /** Shopify unique user token: Value of `_shopify_y` cookie. */
+    [SHOPIFY_Y]: string;
+    /** Shopify session token: Value of `_shopify_s` cookie. */
+    [SHOPIFY_S]: string;
+};
+export type ShopifyGId = {
+    id: string;
+    resource: string | null;
+};
+export {};

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

@@ -0,0 +1,36 @@
+import type { ShopifyMonorailPayload, ShopifyMonorailEvent, ShopifyGId } from './analytics-types.js';
+/**
+ * Builds a Shopify Monorail event from a Shopify Monorail payload and a schema ID.
+ * @param payload - The Monorail payload
+ * @param schemaId - The schema ID to use
+ * @returns The formatted payload
+ **/
+export declare function schemaWrapper(schemaId: string, payload: ShopifyMonorailPayload): ShopifyMonorailEvent;
+/**
+ * Parses global id (gid) and returns the resource type and id.
+ * @see https://shopify.dev/api/usage/gids
+ * @param gid - A shopify GID (string)
+ *
+ * @example
+ * ```ts
+ * const {id, resource} = parseGid('gid://shopify/Order/123')
+ * // => id = "123", resource = 'Order'
+ *
+ *  * const {id, resource} = parseGid('gid://shopify/Cart/abc123')
+ * // => id = "abc123", resource = 'Cart'
+ * ```
+ **/
+export declare function parseGid(gid: string | undefined): ShopifyGId;
+/**
+ * Filters properties from an object and returns a new object with only the properties that have a truthy value.
+ * @param keyValuePairs - An object of key-value pairs
+ * @param formattedData - An object which will hold the truthy values
+ * @returns The formatted object
+ **/
+export declare function addDataIf(keyValuePairs: ShopifyMonorailPayload, formattedData: ShopifyMonorailPayload): ShopifyMonorailPayload;
+/**
+ * Utility that errors if a function is called on the server.
+ * @param fnName - The name of the function
+ * @returns A boolean
+ **/
+export declare function errorIfServer(fnName: string): boolean;

package/dist/types/analytics.d.ts

@@ -0,0 +1,9 @@
+import type { ClientBrowserParameters, ShopifyAnalytics } from './analytics-types.js';
+/**
+ * Set user and session cookies and refresh the expiry time
+ * @param event - The analytics event.
+ * @param shopDomain - The Online Store domain to sent Shopify analytics under the same
+ *   top level domain.
+ */
+export declare function sendShopifyAnalytics(event: ShopifyAnalytics, shopDomain?: string): Promise<void>;
+export declare function getClientBrowserParameters(): ClientBrowserParameters;

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

@@ -7,4 +7,4 @@ export declare const CartBuyerIdentityUpdate: (cartFragment: string) => string;
 export declare const CartAttributesUpdate: (cartFragment: string) => string;
 export declare const CartDiscountCodesUpdate: (cartFragment: string) => string;
 export declare const CartQuery: (cartFragment: string) => string;
-export declare const defaultCartFragment = "\n  fragment CartFragment on Cart {\n    id\n    checkoutUrl\n    totalQuantity\n    buyerIdentity {\n      countryCode\n      customer {\n        id\n        email\n        firstName\n        lastName\n        displayName\n      }\n      email\n      phone\n    }\n    lines(first: $numCartLines) {\n      edges {\n        node {\n          id\n          quantity\n          attributes {\n            key\n            value\n          }\n          cost {\n            totalAmount {\n              amount\n              currencyCode\n            }\n            compareAtAmountPerQuantity {\n              amount\n              currencyCode\n            }\n          }\n          merchandise {\n            ... on ProductVariant {\n              id\n              availableForSale\n              compareAtPrice {\n                ...MoneyFragment\n              }\n              # @deprecated remove in next major\n              compareAtPriceV2 {\n                ...MoneyFragment\n              }\n              price {\n                ...MoneyFragment\n              }\n              # @deprecated remove in next major\n              priceV2 {\n                ...MoneyFragment\n              }\n              requiresShipping\n              title\n              image {\n                ...ImageFragment\n              }\n              product {\n                handle\n                title\n                id\n              }\n              selectedOptions {\n                name\n                value\n              }\n            }\n          }\n        }\n      }\n    }\n    cost {\n      subtotalAmount {\n        ...MoneyFragment\n      }\n      totalAmount {\n        ...MoneyFragment\n      }\n      totalDutyAmount {\n        ...MoneyFragment\n      }\n      totalTaxAmount {\n        ...MoneyFragment\n      }\n    }\n    note\n    attributes {\n      key\n      value\n    }\n    discountCodes {\n      code\n    }\n  }\n\n  fragment MoneyFragment on MoneyV2 {\n    currencyCode\n    amount\n  }\n  fragment ImageFragment on Image {\n    id\n    url\n    altText\n    width\n    height\n  }\n";
+export declare const defaultCartFragment = "\n  fragment CartFragment on Cart {\n    id\n    checkoutUrl\n    totalQuantity\n    buyerIdentity {\n      countryCode\n      customer {\n        id\n        email\n        firstName\n        lastName\n        displayName\n      }\n      email\n      phone\n    }\n    lines(first: $numCartLines) {\n      edges {\n        node {\n          id\n          quantity\n          attributes {\n            key\n            value\n          }\n          cost {\n            totalAmount {\n              amount\n              currencyCode\n            }\n            compareAtAmountPerQuantity {\n              amount\n              currencyCode\n            }\n          }\n          merchandise {\n            ... on ProductVariant {\n              id\n              availableForSale\n              compareAtPrice {\n                ...MoneyFragment\n              }\n              price {\n                ...MoneyFragment\n              }\n              requiresShipping\n              title\n              image {\n                ...ImageFragment\n              }\n              product {\n                handle\n                title\n                id\n              }\n              selectedOptions {\n                name\n                value\n              }\n            }\n          }\n        }\n      }\n    }\n    cost {\n      subtotalAmount {\n        ...MoneyFragment\n      }\n      totalAmount {\n        ...MoneyFragment\n      }\n      totalDutyAmount {\n        ...MoneyFragment\n      }\n      totalTaxAmount {\n        ...MoneyFragment\n      }\n    }\n    note\n    attributes {\n      key\n      value\n    }\n    discountCodes {\n      code\n    }\n  }\n\n  fragment MoneyFragment on MoneyV2 {\n    currencyCode\n    amount\n  }\n  fragment ImageFragment on Image {\n    id\n    url\n    altText\n    width\n    height\n  }\n";

package/dist/types/cookies-utils.d.ts

@@ -0,0 +1,4 @@
+import { ShopifyCookies } from './analytics-types.js';
+export declare function buildUUID(): string;
+export declare function hexTime(): string;
+export declare function getShopifyCookies(cookies: string): ShopifyCookies;

package/dist/types/flatten-connection.d.ts

@@ -5,15 +5,35 @@ import type { PartialDeep } from 'type-fest';
  *
  * If `connection` is null or undefined, will return an empty array instead in production. In development, an error will be thrown.
  */
-export declare function flattenConnection<T>(connection?: PartialDeep<GraphQLConnection<T>, {
+export declare function flattenConnection<ConnectionGeneric extends PartialDeep<ConnectionEdges, {
     recurseIntoArrays: true;
-}>): PartialDeep<T, {
+}> | PartialDeep<ConnectionNodes, {
     recurseIntoArrays: true;
-}>[];
-interface GraphQLConnection<T> {
-    edges?: {
-        node: T;
-    }[];
-    nodes?: T[];
-}
+}> | ConnectionEdges | ConnectionNodes>(connection?: ConnectionGeneric): ConnectionGeneric extends {
+    edges: {
+        node: Array<infer ConnectionBaseType>;
+    };
+} | {
+    nodes: Array<infer ConnectionBaseType>;
+} ? ConnectionBaseType[] : ConnectionGeneric extends PartialDeep<{
+    edges: {
+        node: Array<infer ConnectionBaseType>;
+    };
+}, {
+    recurseIntoArrays: true;
+}> | PartialDeep<{
+    nodes: Array<infer ConnectionBaseType>;
+}, {
+    recurseIntoArrays: true;
+}> ? PartialDeep<ConnectionBaseType[], {
+    recurseIntoArrays: true;
+}> : never;
+type ConnectionEdges = {
+    edges: {
+        node: Array<unknown>;
+    };
+};
+type ConnectionNodes = {
+    nodes: Array<unknown>;
+};
 export {};

package/dist/types/index.d.cts

@@ -1,22 +1,29 @@
 export { AddToCartButton } from './AddToCartButton.js';
+export { getClientBrowserParameters, sendShopifyAnalytics } from './analytics.js';
+export { AnalyticsEventName, AnalyticsPageType, ShopifySalesChannel, } from './analytics-constants.js';
+export type { ClientBrowserParameters, ShopifyAddToCart, ShopifyAddToCartPayload, ShopifyAnalytics, ShopifyAnalyticsPayload, ShopifyAnalyticsProduct, ShopifyCookies, ShopifyPageView, ShopifyPageViewPayload, } from './analytics-types.js';
 export { BuyNowButton } from './BuyNowButton.js';
-export type { CartState, CartStatus, Cart, CartWithActions, CartAction, } from './cart-types.js';
+export type { Cart, CartAction, CartState, CartStatus, CartWithActions, } from './cart-types.js';
 export { CartCheckoutButton } from './CartCheckoutButton.js';
+export { CartCost } from './CartCost.js';
+export { CartLinePrice } from './CartLinePrice.js';
+export { CartLineProvider, useCartLine } from './CartLineProvider.js';
 export { CartProvider, useCart } from './CartProvider.js';
 export { storefrontApiCustomScalars } from './codegen.helpers.js';
+export { getShopifyCookies } from './cookies-utils.js';
 export { ExternalVideo } from './ExternalVideo.js';
 export { flattenConnection } from './flatten-connection.js';
 export { Image } from './Image.js';
 export { MediaFile } from './MediaFile.js';
-export { metafieldParser, type ParsedMetafields } from './metafield-parser.js';
-export { Metafield, parseMetafield, parseMetafieldValue } from './Metafield.js';
 export { ModelViewer } from './ModelViewer.js';
 export { Money } from './Money.js';
+export { type ParsedMetafields, parseMetafield } from './parse-metafield.js';
 export { ProductPrice } from './ProductPrice.js';
 export { ProductProvider, useProduct } from './ProductProvider.js';
 export { ShopifyProvider, useShop } from './ShopifyProvider.js';
 export { ShopPayButton } from './ShopPayButton.js';
-export type { StorefrontApiResponseOk, StorefrontApiResponseOkPartial, StorefrontApiResponseError, StorefrontApiResponse, StorefrontApiResponsePartial, } from './storefront-api-response.types.js';
+export type { StorefrontApiResponse, StorefrontApiResponseError, StorefrontApiResponseOk, StorefrontApiResponseOkPartial, StorefrontApiResponsePartial, } from './storefront-api-response.types.js';
 export { createStorefrontClient } from './storefront-client.js';
 export { useMoney } from './useMoney.js';
+export { useShopifyCookies } from './useShopifyCookies.js';
 export { Video } from './Video.js';