@shopify/hydrogen 0.19.0 → 0.20.0

package/CHANGELOG.md

@@ -1,5 +1,63 @@
 # Changelog
 
+## 0.20.0
+
+### Minor Changes
+
+- [#1257](https://github.com/Shopify/hydrogen/pull/1257) [`5cd7a672`](https://github.com/Shopify/hydrogen/commit/5cd7a6727befe1e06f35b9ec68d4c81a8858d46f) Thanks [@frandiox](https://github.com/frandiox)! - Support for CSS Modules has been improved. It now behaves closer to the default behavior in Vite where styles are collected automatically.
+
+  Remove the `StyleTag` component that was needed before:
+
+  ```diff
+  export default function MyComponent() {
+    return (
+      <div>
+  -      <myStyles.StyleTag />
+        <h1>Title</h1>
+      </div>
+    );
+  }
+  ```
+
+  Optionally, update your wildcard imports to default or named imports:
+
+  ```diff
+  -import * as myStyles from './my.module.css';
+  +import myStyles from './my.module.css';
+  // Or
+  +import {red, green, blue} from './my.module.css';
+  ```
+
+* [#1271](https://github.com/Shopify/hydrogen/pull/1271) [`9d0359b8`](https://github.com/Shopify/hydrogen/commit/9d0359b87b0cfa04f12ffa9376e5b8ad72c560a3) Thanks [@frehner](https://github.com/frehner)! - ## `<Image/>`
+
+  The `<Image/>` component and related utility functions were reworked and the following changes apply:
+
+  - `useImageUrl` is no longer available; use `shopifyImageLoader` instead, which is available to run both server- and client-side.
+  - The TypeScript experience with `<Image/>` is improved; props will be validated better, and `loader` and `loaderOptions` will be better typed
+  - When using the `src` prop, `width` and `height` are now required
+  - When using the `data` prop, `data.width` and `data.height` or `width` and `height` props are required
+  - The `src` and `data` props are mutually exclusive
+  - The `loader` prop now receives a singular param as an object
+  - `options` has been merged with `loaderOptions`. When using the `data` prop, `loaderOptions` will be the options for Shopify CDN images. When using the `src` prop, `loaderOptions` will be whatever you define them to be.
+  - The TypeScript type `ImageSizeOptions` is now named `ShopifyLoaderOptions`
+  - The TypeScript type `ImageLoaderOptions` is now named `ShopifyLoaderParams`
+  - The `priority` prop was removed; use the HTML-standard `loading` prop instead
+
+  ## `<Video/>`
+
+  - The `<Video/>` component's `options` props was renamed to `imagePreviewOptions` to add clarity as to what the options were for.
+  - `imagePreviewOptions` matches the (newly updated) shape of `<Image/>`'s `loaderOptions`
+
+- [#1290](https://github.com/Shopify/hydrogen/pull/1290) [`437b1616`](https://github.com/Shopify/hydrogen/commit/437b1616fcfa15d8b4b2c033b364b2f74b99d6e4) Thanks [@jplhomer](https://github.com/jplhomer)! - Allow cart queries to be customized by adding a new `cartFragment` prop to `CartProvider`. [Learn more](https://shopify.dev/api/hydrogen/components/cart/cartprovider#cart-fragment).
+
+### Patch Changes
+
+- [#1247](https://github.com/Shopify/hydrogen/pull/1247) [`ee64873e`](https://github.com/Shopify/hydrogen/commit/ee64873ece372f9be2d6eb08b0594a91f4ed135a) Thanks [@frandiox](https://github.com/frandiox)! - Improve the way client components are discovered in order to reduce bundle sizes.
+
+* [#1276](https://github.com/Shopify/hydrogen/pull/1276) [`c6ce6a43`](https://github.com/Shopify/hydrogen/commit/c6ce6a43bbb944b67aec5fdc7e5566768846dac5) Thanks [@frandiox](https://github.com/frandiox)! - Fix page loading in Firefox during development ([known bug](https://bugzilla.mozilla.org/show_bug.cgi?id=1737882)).
+
+- [#1286](https://github.com/Shopify/hydrogen/pull/1286) [`53270249`](https://github.com/Shopify/hydrogen/commit/5327024995ff7b8823ddb8ea835b3a5b95175841) Thanks [@jplhomer](https://github.com/jplhomer)! - Fix some sourcemap warnings in server console
+
 ## 0.19.0
 
 ### Minor Changes

package/config.d.ts

@@ -0,0 +1 @@
+export * from './dist/esnext/config';

package/dist/esnext/components/CartLineImage/CartLineImage.client.d.ts

@@ -1,12 +1,9 @@
-import React from 'react';
-import { Image } from '../Image';
-import { ImageSizeOptions } from '../../utilities';
-declare type PropsWeControl = 'data' | 'options';
+import { type ShopifyImageProps } from '../Image';
+import type { Simplify } from 'type-fest';
+declare type PropsWeControl = 'data';
 /**
  * The `CartLineImage` component renders an `Image` component for the cart line merchandise's image.
  * It must be a descendent of a `CartLineProvider` component.
  */
-export declare function CartLineImage(props: Omit<React.ComponentProps<typeof Image>, PropsWeControl> & {
-    options?: ImageSizeOptions;
-}): JSX.Element | null;
+export declare function CartLineImage(props: Simplify<Omit<ShopifyImageProps, PropsWeControl>>): JSX.Element | null;
 export {};

package/dist/esnext/components/CartLineImage/CartLineImage.client.js

@@ -7,6 +7,5 @@ import { Image } from '../Image';
  */
 export function CartLineImage(props) {
     const cartLine = useCartLine();
-    const { options, ...passthroughProps } = props;
-    return cartLine.merchandise.image ? (React.createElement(Image, { ...passthroughProps, data: cartLine.merchandise.image, options: options })) : null;
+    return cartLine.merchandise.image ? (React.createElement(Image, { ...props, data: cartLine.merchandise.image })) : null;
 }

package/dist/esnext/components/CartProvider/CartProvider.client.d.ts

@@ -9,7 +9,7 @@ import { CartFragmentFragment } from './graphql/CartFragment';
  * The `CartProvider` component must be a descendent of the `ShopifyProvider` component.
  * You must use this component if you want to use the `useCart` hook or related hooks, or if you would like to use the `AddToCartButton` component.
  */
-export declare function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLineRemove, onLineUpdate, onNoteUpdate, onBuyerIdentityUpdate, onAttributesUpdate, onDiscountCodesUpdate, data: cart, }: {
+export declare function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLineRemove, onLineUpdate, onNoteUpdate, onBuyerIdentityUpdate, onAttributesUpdate, onDiscountCodesUpdate, data: cart, cartFragment, }: {
     /** Any `ReactNode` elements. */
     children: React.ReactNode;
     numCartLines?: number;
@@ -33,4 +33,6 @@ export declare function CartProvider({ children, numCartLines, onCreate, onLineA
      * An object with fields that correspond to the Storefront API's [Cart object](https://shopify.dev/api/storefront/latest/objects/cart).
      */
     data?: CartFragmentFragment;
+    /** A fragment used to query the Storefront API's [Cart object](https://shopify.dev/api/storefront/latest/objects/cart) for all queries and mutations. A default value is used if no argument is provided. */
+    cartFragment?: string;
 }): JSX.Element;

package/dist/esnext/components/CartProvider/CartProvider.client.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useCallback, useReducer, useMemo, useRef, } from 'react';
 import { flattenConnection } from '../../utilities';
-import { CartLineAdd, CartCreate, CartLineRemove, CartLineUpdate, CartNoteUpdate, CartBuyerIdentityUpdate, CartAttributesUpdate, CartDiscountCodesUpdate, CartQuery, } from './cart-queries';
+import { CartLineAdd, CartCreate, CartLineRemove, CartLineUpdate, CartNoteUpdate, CartBuyerIdentityUpdate, CartAttributesUpdate, CartDiscountCodesUpdate, CartQuery, defaultCartFragment, } from './cart-queries';
 import { useCartFetch } from './hooks.client';
 import { CartContext } from './context';
 import { CART_ID_STORAGE_KEY } from './constants';
@@ -150,7 +150,7 @@ function cartReducer(state, action) {
  * The `CartProvider` component must be a descendent of the `ShopifyProvider` component.
  * You must use this component if you want to use the `useCart` hook or related hooks, or if you would like to use the `AddToCartButton` component.
  */
-export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLineRemove, onLineUpdate, onNoteUpdate, onBuyerIdentityUpdate, onAttributesUpdate, onDiscountCodesUpdate, data: cart, }) {
+export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLineRemove, onLineUpdate, onNoteUpdate, onBuyerIdentityUpdate, onAttributesUpdate, onDiscountCodesUpdate, data: cart, cartFragment = defaultCartFragment, }) {
     var _a;
     const { serverProps } = useServerProps();
     const countryCode = (_a = serverProps === null || serverProps === void 0 ? void 0 : serverProps.country) === null || _a === void 0 ? void 0 : _a.isoCode;
@@ -162,7 +162,7 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
     const cartFetch = useCallback(async (cartId) => {
         dispatch({ type: 'cartFetch' });
         const { data } = await fetchCart({
-            query: CartQuery,
+            query: CartQuery(cartFragment),
             variables: {
                 id: cartId,
                 numCartLines,
@@ -175,7 +175,7 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
             return;
         }
         dispatch({ type: 'resolve', cart: cartFromGraphQL(data.cart) });
-    }, [fetchCart, numCartLines, countryCode]);
+    }, [fetchCart, cartFragment, numCartLines, countryCode]);
     const cartCreate = useCallback(async (cart) => {
         var _a, _b;
         dispatch({ type: 'cartCreate' });
@@ -187,7 +187,7 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
             cart.buyerIdentity.countryCode = countryCode;
         }
         const { data, error } = await fetchCart({
-            query: CartCreate,
+            query: CartCreate(cartFragment),
             variables: {
                 input: cart,
                 numCartLines,
@@ -213,14 +213,14 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
             });
             window.localStorage.setItem(CART_ID_STORAGE_KEY, data.cartCreate.cart.id);
         }
-    }, [onCreate, fetchCart, numCartLines, countryCode]);
+    }, [onCreate, countryCode, fetchCart, cartFragment, numCartLines]);
     const addLineItem = useCallback(async (lines, state) => {
         var _a;
         if (state.status === 'idle') {
             dispatch({ type: 'addLineItem' });
             onLineAdd === null || onLineAdd === void 0 ? void 0 : onLineAdd();
             const { data, error } = await fetchCart({
-                query: CartLineAdd,
+                query: CartLineAdd(cartFragment),
                 variables: {
                     cartId: state.cart.id,
                     lines,
@@ -245,14 +245,14 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
                 });
             }
         }
-    }, [fetchCart, numCartLines, onLineAdd, countryCode]);
+    }, [onLineAdd, fetchCart, cartFragment, numCartLines, countryCode]);
     const removeLineItem = useCallback(async (lines, state) => {
         var _a;
         if (state.status === 'idle') {
             dispatch({ type: 'removeLineItem', lines });
             onLineRemove === null || onLineRemove === void 0 ? void 0 : onLineRemove();
             const { data, error } = await fetchCart({
-                query: CartLineRemove,
+                query: CartLineRemove(cartFragment),
                 variables: {
                     cartId: state.cart.id,
                     lines,
@@ -277,14 +277,14 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
                 });
             }
         }
-    }, [fetchCart, onLineRemove, numCartLines, countryCode]);
+    }, [onLineRemove, fetchCart, cartFragment, numCartLines, countryCode]);
     const updateLineItem = useCallback(async (lines, state) => {
         var _a;
         if (state.status === 'idle') {
             dispatch({ type: 'updateLineItem', lines });
             onLineUpdate === null || onLineUpdate === void 0 ? void 0 : onLineUpdate();
             const { data, error } = await fetchCart({
-                query: CartLineUpdate,
+                query: CartLineUpdate(cartFragment),
                 variables: {
                     cartId: state.cart.id,
                     lines,
@@ -309,14 +309,14 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
                 });
             }
         }
-    }, [fetchCart, onLineUpdate, numCartLines, countryCode]);
+    }, [onLineUpdate, fetchCart, cartFragment, numCartLines, countryCode]);
     const noteUpdate = useCallback(async (note, state) => {
         var _a;
         if (state.status === 'idle') {
             dispatch({ type: 'noteUpdate' });
             onNoteUpdate === null || onNoteUpdate === void 0 ? void 0 : onNoteUpdate();
             const { data, error } = await fetchCart({
-                query: CartNoteUpdate,
+                query: CartNoteUpdate(cartFragment),
                 variables: {
                     cartId: state.cart.id,
                     note,
@@ -337,14 +337,14 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
                 });
             }
         }
-    }, [fetchCart, onNoteUpdate, numCartLines, countryCode]);
+    }, [onNoteUpdate, fetchCart, cartFragment, numCartLines, countryCode]);
     const buyerIdentityUpdate = useCallback(async (buyerIdentity, state) => {
         var _a;
         if (state.status === 'idle') {
             dispatch({ type: 'buyerIdentityUpdate' });
             onBuyerIdentityUpdate === null || onBuyerIdentityUpdate === void 0 ? void 0 : onBuyerIdentityUpdate();
             const { data, error } = await fetchCart({
-                query: CartBuyerIdentityUpdate,
+                query: CartBuyerIdentityUpdate(cartFragment),
                 variables: {
                     cartId: state.cart.id,
                     buyerIdentity,
@@ -365,14 +365,14 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
                 });
             }
         }
-    }, [fetchCart, onBuyerIdentityUpdate, numCartLines, countryCode]);
+    }, [onBuyerIdentityUpdate, fetchCart, cartFragment, numCartLines, countryCode]);
     const cartAttributesUpdate = useCallback(async (attributes, state) => {
         var _a;
         if (state.status === 'idle') {
             dispatch({ type: 'cartAttributesUpdate' });
             onAttributesUpdate === null || onAttributesUpdate === void 0 ? void 0 : onAttributesUpdate();
             const { data, error } = await fetchCart({
-                query: CartAttributesUpdate,
+                query: CartAttributesUpdate(cartFragment),
                 variables: {
                     cartId: state.cart.id,
                     attributes,
@@ -393,14 +393,14 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
                 });
             }
         }
-    }, [fetchCart, onAttributesUpdate, numCartLines, countryCode]);
+    }, [onAttributesUpdate, fetchCart, cartFragment, numCartLines, countryCode]);
     const discountCodesUpdate = useCallback(async (discountCodes, state) => {
         var _a;
         if (state.status === 'idle') {
             dispatch({ type: 'discountCodesUpdate' });
             onDiscountCodesUpdate === null || onDiscountCodesUpdate === void 0 ? void 0 : onDiscountCodesUpdate();
             const { data, error } = await fetchCart({
-                query: CartDiscountCodesUpdate,
+                query: CartDiscountCodesUpdate(cartFragment),
                 variables: {
                     cartId: state.cart.id,
                     discountCodes,
@@ -425,7 +425,7 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
                 });
             }
         }
-    }, [fetchCart, onDiscountCodesUpdate, numCartLines, countryCode]);
+    }, [onDiscountCodesUpdate, fetchCart, cartFragment, numCartLines, countryCode]);
     const didFetchCart = useRef(false);
     useEffect(() => {
         if (localStorage.getItem(CART_ID_STORAGE_KEY) &&
@@ -485,11 +485,13 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
             discountCodesUpdate(discountCodes) {
                 discountCodesUpdate(discountCodes, state);
             },
+            cartFragment,
         };
     }, [
         state,
         cart,
         cartCreate,
+        cartFragment,
         addLineItem,
         removeLineItem,
         updateLineItem,

package/dist/esnext/components/CartProvider/cart-queries.d.ts

@@ -1,9 +1,10 @@
-export declare const CartLineAdd = "\nmutation CartLineAdd($cartId: ID!, $lines: [CartLineInput!]!, $numCartLines: Int = 250, $country: CountryCode = ZZ) @inContext(country: $country) {\n  cartLinesAdd(cartId: $cartId, lines: $lines) {\n    cart {\n      ...CartFragment\n    }\n  }\n}\n\nfragment CartFragment on Cart {\n  id\n  checkoutUrl\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        merchandise {\n          ... on ProductVariant {\n            id\n            availableForSale\n            compareAtPriceV2 {\n              ...MoneyFragment\n            }\n            priceV2 {\n              ...MoneyFragment\n            }\n            requiresShipping\n            title\n            image {\n              ...ImageFragment\n            }\n            product {\n              handle\n              title\n            }\n            selectedOptions {\n              name\n              value\n            }\n          }\n        }\n      }\n    }\n  }\n  estimatedCost {\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\nfragment MoneyFragment on MoneyV2 {\n  currencyCode\n  amount\n}\nfragment ImageFragment on Image {\n  id\n  url\n  altText\n  width\n  height\n}\n";
-export declare const CartCreate = "\nmutation CartCreate($input: CartInput!, $numCartLines: Int = 250, $country: CountryCode = ZZ) @inContext(country: $country) {\n  cartCreate(input: $input) {\n    cart {\n      ...CartFragment\n    }\n  }\n}\n\nfragment CartFragment on Cart {\n  id\n  checkoutUrl\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        merchandise {\n          ... on ProductVariant {\n            id\n            availableForSale\n            compareAtPriceV2 {\n              ...MoneyFragment\n            }\n            priceV2 {\n              ...MoneyFragment\n            }\n            requiresShipping\n            title\n            image {\n              ...ImageFragment\n            }\n            product {\n              handle\n              title\n            }\n            selectedOptions {\n              name\n              value\n            }\n          }\n        }\n      }\n    }\n  }\n  estimatedCost {\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\nfragment MoneyFragment on MoneyV2 {\n  currencyCode\n  amount\n}\nfragment ImageFragment on Image {\n  id\n  url\n  altText\n  width\n  height\n}\n";
-export declare const CartLineRemove = "\nmutation CartLineRemove($cartId: ID!, $lines: [ID!]!, $numCartLines: Int = 250, $country: CountryCode = ZZ) @inContext(country: $country) {\n  cartLinesRemove(cartId: $cartId, lineIds: $lines) {\n    cart {\n      ...CartFragment\n    }\n  }\n}\n\nfragment CartFragment on Cart {\n  id\n  checkoutUrl\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        merchandise {\n          ... on ProductVariant {\n            id\n            availableForSale\n            compareAtPriceV2 {\n              ...MoneyFragment\n            }\n            priceV2 {\n              ...MoneyFragment\n            }\n            requiresShipping\n            title\n            image {\n              ...ImageFragment\n            }\n            product {\n              handle\n              title\n            }\n            selectedOptions {\n              name\n              value\n            }\n          }\n        }\n      }\n    }\n  }\n  estimatedCost {\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\nfragment MoneyFragment on MoneyV2 {\n  currencyCode\n  amount\n}\nfragment ImageFragment on Image {\n  id\n  url\n  altText\n  width\n  height\n}\n";
-export declare const CartLineUpdate = "\nmutation CartLineUpdate($cartId: ID!, $lines: [CartLineUpdateInput!]!, $numCartLines: Int = 250, $country: CountryCode = ZZ) @inContext(country: $country) {\n  cartLinesUpdate(cartId: $cartId, lines: $lines) {\n    cart {\n      ...CartFragment\n    }\n  }\n}\n\nfragment CartFragment on Cart {\n  id\n  checkoutUrl\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        merchandise {\n          ... on ProductVariant {\n            id\n            availableForSale\n            compareAtPriceV2 {\n              ...MoneyFragment\n            }\n            priceV2 {\n              ...MoneyFragment\n            }\n            requiresShipping\n            title\n            image {\n              ...ImageFragment\n            }\n            product {\n              handle\n              title\n            }\n            selectedOptions {\n              name\n              value\n            }\n          }\n        }\n      }\n    }\n  }\n  estimatedCost {\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\nfragment MoneyFragment on MoneyV2 {\n  currencyCode\n  amount\n}\nfragment ImageFragment on Image {\n  id\n  url\n  altText\n  width\n  height\n}\n";
-export declare const CartNoteUpdate = "\nmutation CartNoteUpdate($cartId: ID!, $note: String, $numCartLines: Int = 250, $country: CountryCode = ZZ) @inContext(country: $country) {\n  cartNoteUpdate(cartId: $cartId, note: $note) {\n    cart {\n      ...CartFragment\n    }\n  }\n}\n\nfragment CartFragment on Cart {\n  id\n  checkoutUrl\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        merchandise {\n          ... on ProductVariant {\n            id\n            availableForSale\n            compareAtPriceV2 {\n              ...MoneyFragment\n            }\n            priceV2 {\n              ...MoneyFragment\n            }\n            requiresShipping\n            title\n            image {\n              ...ImageFragment\n            }\n            product {\n              handle\n              title\n            }\n            selectedOptions {\n              name\n              value\n            }\n          }\n        }\n      }\n    }\n  }\n  estimatedCost {\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\nfragment MoneyFragment on MoneyV2 {\n  currencyCode\n  amount\n}\nfragment ImageFragment on Image {\n  id\n  url\n  altText\n  width\n  height\n}\n";
-export declare const CartBuyerIdentityUpdate = "\nmutation CartBuyerIdentityUpdate(\n  $cartId: ID!\n  $buyerIdentity: CartBuyerIdentityInput!\n  $numCartLines: Int = 250\n  $country: CountryCode = ZZ\n) @inContext(country: $country) {\n  cartBuyerIdentityUpdate(cartId: $cartId, buyerIdentity: $buyerIdentity) {\n    cart {\n      ...CartFragment\n    }\n  }\n}\n\nfragment CartFragment on Cart {\n  id\n  checkoutUrl\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        merchandise {\n          ... on ProductVariant {\n            id\n            availableForSale\n            compareAtPriceV2 {\n              ...MoneyFragment\n            }\n            priceV2 {\n              ...MoneyFragment\n            }\n            requiresShipping\n            title\n            image {\n              ...ImageFragment\n            }\n            product {\n              handle\n              title\n            }\n            selectedOptions {\n              name\n              value\n            }\n          }\n        }\n      }\n    }\n  }\n  estimatedCost {\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\nfragment MoneyFragment on MoneyV2 {\n  currencyCode\n  amount\n}\nfragment ImageFragment on Image {\n  id\n  url\n  altText\n  width\n  height\n}\n";
-export declare const CartAttributesUpdate = "\nmutation CartAttributesUpdate($attributes: [AttributeInput!]!, $cartId: ID!, $numCartLines: Int = 250, $country: CountryCode = ZZ) @inContext(country: $country) {\n  cartAttributesUpdate(attributes: $attributes, cartId: $cartId) {\n    cart {\n      ...CartFragment\n    }\n  }\n}\n\nfragment CartFragment on Cart {\n  id\n  checkoutUrl\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        merchandise {\n          ... on ProductVariant {\n            id\n            availableForSale\n            compareAtPriceV2 {\n              ...MoneyFragment\n            }\n            priceV2 {\n              ...MoneyFragment\n            }\n            requiresShipping\n            title\n            image {\n              ...ImageFragment\n            }\n            product {\n              handle\n              title\n            }\n            selectedOptions {\n              name\n              value\n            }\n          }\n        }\n      }\n    }\n  }\n  estimatedCost {\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\nfragment MoneyFragment on MoneyV2 {\n  currencyCode\n  amount\n}\nfragment ImageFragment on Image {\n  id\n  url\n  altText\n  width\n  height\n}\n";
-export declare const CartDiscountCodesUpdate = "\nmutation CartDiscountCodesUpdate($cartId: ID!, $discountCodes: [String!], $numCartLines: Int = 250, $country: CountryCode = ZZ) @inContext(country: $country) {\n  cartDiscountCodesUpdate(cartId: $cartId, discountCodes: $discountCodes) {\n    cart {\n      ...CartFragment\n    }\n  }\n}\n\nfragment CartFragment on Cart {\n  id\n  checkoutUrl\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        merchandise {\n          ... on ProductVariant {\n            id\n            availableForSale\n            compareAtPriceV2 {\n              ...MoneyFragment\n            }\n            priceV2 {\n              ...MoneyFragment\n            }\n            requiresShipping\n            title\n            image {\n              ...ImageFragment\n            }\n            product {\n              handle\n              title\n            }\n            selectedOptions {\n              name\n              value\n            }\n          }\n        }\n      }\n    }\n  }\n  estimatedCost {\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\nfragment MoneyFragment on MoneyV2 {\n  currencyCode\n  amount\n}\nfragment ImageFragment on Image {\n  id\n  url\n  altText\n  width\n  height\n}\n";
-export declare const CartQuery = "\nquery CartQuery($id: ID!, $numCartLines: Int = 250, $country: CountryCode = ZZ) @inContext(country: $country) {\n  cart(id: $id) {\n    ...CartFragment\n  }\n}\n\nfragment CartFragment on Cart {\n  id\n  checkoutUrl\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        merchandise {\n          ... on ProductVariant {\n            id\n            availableForSale\n            compareAtPriceV2 {\n              ...MoneyFragment\n            }\n            priceV2 {\n              ...MoneyFragment\n            }\n            requiresShipping\n            title\n            image {\n              ...ImageFragment\n            }\n            product {\n              handle\n              title\n            }\n            selectedOptions {\n              name\n              value\n            }\n          }\n        }\n      }\n    }\n  }\n  estimatedCost {\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\nfragment MoneyFragment on MoneyV2 {\n  currencyCode\n  amount\n}\nfragment ImageFragment on Image {\n  id\n  url\n  altText\n  width\n  height\n}\n";
+export declare const CartLineAdd: (cartFragment: string) => string;
+export declare const CartCreate: (cartFragment: string) => string;
+export declare const CartLineRemove: (cartFragment: string) => string;
+export declare const CartLineUpdate: (cartFragment: string) => string;
+export declare const CartNoteUpdate: (cartFragment: string) => string;
+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 = "\nfragment CartFragment on Cart {\n  id\n  checkoutUrl\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        merchandise {\n          ... on ProductVariant {\n            id\n            availableForSale\n            compareAtPriceV2 {\n              ...MoneyFragment\n            }\n            priceV2 {\n              ...MoneyFragment\n            }\n            requiresShipping\n            title\n            image {\n              ...ImageFragment\n            }\n            product {\n              handle\n              title\n            }\n            selectedOptions {\n              name\n              value\n            }\n          }\n        }\n      }\n    }\n  }\n  estimatedCost {\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\nfragment MoneyFragment on MoneyV2 {\n  currencyCode\n  amount\n}\nfragment ImageFragment on Image {\n  id\n  url\n  altText\n  width\n  height\n}\n";