@shopify/hydrogen 0.11.1 → 0.12.0

package/CHANGELOG.md

@@ -1,5 +1,204 @@
 # Changelog
 
+## 0.12.0
+
+### Minor Changes
+
+- [#858](https://github.com/Shopify/hydrogen/pull/858) [`eae3490`](https://github.com/Shopify/hydrogen/commit/eae3490bf630c92243e9e6820100d673e22ec421) Thanks [@michenly](https://github.com/michenly)! - Export Seo components Fragement and use them in the starter template.
+
+* [#858](https://github.com/Shopify/hydrogen/pull/858) [`eae3490`](https://github.com/Shopify/hydrogen/commit/eae3490bf630c92243e9e6820100d673e22ec421) Thanks [@michenly](https://github.com/michenly)! - Move any static `Fragment` properties on components to the entry point `@shopify/hydrogen/fragments`.
+  The migration diff are as follows:
+
+  ```diff
+  - import {ExternalVideoFragment} from '@shopify/hydrogen';
+  + import {ExternalVideoFragment} from '@shopify/hydrogen/fragments';
+  - import type {ExternalVideoFragmentFragment} from '@shopify/hydrogen';
+  + import type {ExternalVideoFragmentFragment} from '@shopify/hydrogen/fragments';
+  ```
+
+  ```diff
+  - import {ImageFragment} from '@shopify/hydrogen';
+  + import {ImageFragment} from '@shopify/hydrogen/fragments';
+  - import type {ImageFragmentFragment} from '@shopify/hydrogen';
+  + import type {ImageFragmentFragment} from '@shopify/hydrogen/fragments';
+  ```
+
+  ```diff
+  - import {MediaFileFragment} from '@shopify/hydrogen';
+  + import {MediaFileFragment} from '@shopify/hydrogen/fragments';
+  - import type {MediaFileFragmentFragment} from '@shopify/hydrogen';
+  + import type {MediaFileFragmentFragment} from '@shopify/hydrogen/fragments';
+  ```
+
+  ```diff
+  - import {MetafieldFragment} from '@shopify/hydrogen';
+  + import {MetafieldFragment} from '@shopify/hydrogen/fragments';
+  - import type {MetafieldFragmentFragment} from '@shopify/hydrogen';
+  + import type {MetafieldFragmentFragment} from '@shopify/hydrogen/fragments';
+  ```
+
+  ```diff
+  - import {Model3DFragment} from '@shopify/hydrogen';
+  + import {Model3DFragment} from '@shopify/hydrogen/fragments';
+  - import type {Model3DFragmentFragment} from '@shopify/hydrogen';
+  + import type {Model3DFragmentFragment} from '@shopify/hydrogen/fragments';
+  ```
+
+  ```diff
+  - import {MoneyFragment} from '@shopify/hydrogen';
+  + import {MoneyFragment} from '@shopify/hydrogen/fragments';
+  - import type {MoneyFragmentFragment} from '@shopify/hydrogen';
+  + import type {MoneyFragmentFragment} from '@shopify/hydrogen/fragments';
+  ```
+
+  ```diff
+  - import {ProductProviderFragment} from '@shopify/hydrogen';
+  + import {ProductProviderFragment} from '@shopify/hydrogen/fragments';
+  - import type {ProductProviderFragmentFragment} from '@shopify/hydrogen';
+  + import type {ProductProviderFragmentFragment} from '@shopify/hydrogen/fragments';
+  ```
+
+  ```diff
+  - import {UnitPriceFragment} from '@shopify/hydrogen';
+  + import {UnitPriceFragment} from '@shopify/hydrogen/fragments';
+  - import type {UnitPriceFragmentFragment} from '@shopify/hydrogen';
+  + import type {UnitPriceFragmentFragment} from '@shopify/hydrogen/fragments';
+  ```
+
+  ```diff
+  - import {VideoFragment} from '@shopify/hydrogen';
+  + import {VideoFragment} from '@shopify/hydrogen/fragments';
+  - import type {VideoFragmentFragment} from '@shopify/hydrogen';
+  + import type {VideoFragmentFragment} from '@shopify/hydrogen/fragments';
+  ```
+
+- [#858](https://github.com/Shopify/hydrogen/pull/858) [`eae3490`](https://github.com/Shopify/hydrogen/commit/eae3490bf630c92243e9e6820100d673e22ec421) Thanks [@michenly](https://github.com/michenly)! - Updated the ExternalVideo component to use the new `embedUrl` Storefront API ([introduced in 2022-04](https://shopify.dev/api/release-notes/2022-04#non-encoded-object-ids-in-the-graphql-storefront-api)) on ExternalVideo.
+
+* [#858](https://github.com/Shopify/hydrogen/pull/858) [`eae3490`](https://github.com/Shopify/hydrogen/commit/eae3490bf630c92243e9e6820100d673e22ec421) Thanks [@michenly](https://github.com/michenly)! - Upgrade default Storefront API to version '2022-04'. Some components have been updated to use the 2022-04 features and types as well.
+
+  One important change is that the `2022-04` Storefront API no longer encodes object IDs: see more [details here](https://shopify.dev/api/release-notes/2022-04#non-encoded-object-ids-in-the-graphql-storefront-api). Because of this, Hydrogen will no longer decode IDs, either, which will cause issues if you are using a previous version of the Storefront API with Hydrogen components.
+
+- [#858](https://github.com/Shopify/hydrogen/pull/858) [`eae3490`](https://github.com/Shopify/hydrogen/commit/eae3490bf630c92243e9e6820100d673e22ec421) Thanks [@michenly](https://github.com/michenly)! - Adds `queryShop` helper to API routes. This makes it easy to query the Storefront API, similar to how `useShopQuery` is available in server components:
+
+  ```jsx
+  // my-api.server.js
+
+  export default function api(request, {queryShop}) {
+    return await queryShop({
+      query: `query ShopName { shop { name } }`,
+    });
+  }
+  ```
+
+  `queryShop` accepts a single argument object with the following properties:
+
+  | Property    | Type                                   | Required |
+  | ----------- | -------------------------------------- | -------- |
+  | `query`     | `string \| ASTNode`                    | Yes      |
+  | `variables` | `Record<string, any>`                  | No       |
+  | `locale`    | `string` (defaults to `defaultLocale`) | No       |
+
+  **Important**: In order to use `queryShop`, you should pass `shopifyConfig` to `renderHydrogen` inside `App.server.jsx`:
+
+  ```diff
+  -export default renderHydrogen(App, {routes});
+  +export default renderHydrogen(App, {shopifyConfig, routes});
+  ```
+
+* [#858](https://github.com/Shopify/hydrogen/pull/858) [`eae3490`](https://github.com/Shopify/hydrogen/commit/eae3490bf630c92243e9e6820100d673e22ec421) Thanks [@michenly](https://github.com/michenly)! - Routing in Hydrogen has been updated according to [Custom Routes proposal](https://github.com/Shopify/hydrogen/discussions/569). Specifically, a new `Router` component has been added, and `DefaultRoutes` has been renamed to `FileRoutes`, along with other minor changes. Custom route components are not implemented yet.
+
+  Follow these steps to upgrade your `App.server.jsx` file:
+
+  1. Rename the parameter `pages` to `routes` when calling `renderHydrogen`.
+  2. Rename the `DefaultRoutes` component to `FileRoutes`.
+  3. Add the new `Router` component as a parent of `FileRoutes` and pass `fallback` and `serverProps` props (previously in `DefaultRoutes`).
+  4. Rename `src/pages` directory to `src/routes` and update the glob import in `App.server.jsx` to `import.meta.globEager('./routes/**/*.server.[jt](s|sx)')`.
+
+  #### Full example of `App.server.jsx`
+
+  ```jsx
+  import renderHydrogen from '@shopify/hydrogen/entry-server';
+  import {Router, FileRoutes, ShopifyProvider} from '@shopify/hydrogen';
+  import {Suspense} from 'react';
+  import shopifyConfig from '../shopify.config';
+  import DefaultSeo from './components/DefaultSeo.server';
+  import NotFound from './components/NotFound.server';
+  import LoadingFallback from './components/LoadingFallback';
+  import CartProvider from './components/CartProvider.client';
+
+  function App({routes, ...serverProps}) {
+    return (
+      <Suspense fallback={<LoadingFallback />}>
+        <ShopifyProvider shopifyConfig={shopifyConfig}>
+          <CartProvider>
+            <DefaultSeo />
+            <Router fallback={<NotFound />} serverProps={serverProps}>
+              <FileRoutes routes={routes} />
+            </Router>
+          </CartProvider>
+        </ShopifyProvider>
+      </Suspense>
+    );
+  }
+
+  const routes = import.meta.globEager('./routes/**/*.server.[jt](s|sx)');
+  export default renderHydrogen(App, {shopifyConfig, routes});
+  ```
+
+### Patch Changes
+
+- [#858](https://github.com/Shopify/hydrogen/pull/858) [`eae3490`](https://github.com/Shopify/hydrogen/commit/eae3490bf630c92243e9e6820100d673e22ec421) Thanks [@michenly](https://github.com/michenly)! - Update `linesAdd` to create cart if cart does not exist.
+
+* [#858](https://github.com/Shopify/hydrogen/pull/858) [`eae3490`](https://github.com/Shopify/hydrogen/commit/eae3490bf630c92243e9e6820100d673e22ec421) Thanks [@michenly](https://github.com/michenly)! - Hydrogen docs: Static assets and component props
+
+- [#858](https://github.com/Shopify/hydrogen/pull/858) [`eae3490`](https://github.com/Shopify/hydrogen/commit/eae3490bf630c92243e9e6820100d673e22ec421) Thanks [@michenly](https://github.com/michenly)! - Do not scroll to top if the URL pathname has not changed.
+
+* [#858](https://github.com/Shopify/hydrogen/pull/858) [`eae3490`](https://github.com/Shopify/hydrogen/commit/eae3490bf630c92243e9e6820100d673e22ec421) Thanks [@michenly](https://github.com/michenly)! - Add null check for ShopifyProvider
+
+- [#858](https://github.com/Shopify/hydrogen/pull/858) [`eae3490`](https://github.com/Shopify/hydrogen/commit/eae3490bf630c92243e9e6820100d673e22ec421) Thanks [@michenly](https://github.com/michenly)! - Ignore when boomerang doesn't load. This often happens when a adblocker is present on the client.
+  There is no longer an uncaught promise exception in the console.
+
+* [#858](https://github.com/Shopify/hydrogen/pull/858) [`eae3490`](https://github.com/Shopify/hydrogen/commit/eae3490bf630c92243e9e6820100d673e22ec421) Thanks [@michenly](https://github.com/michenly)! - Avoid accessing undefined global \_\_flight as a side effect of another unknown error.
+
+- [#858](https://github.com/Shopify/hydrogen/pull/858) [`eae3490`](https://github.com/Shopify/hydrogen/commit/eae3490bf630c92243e9e6820100d673e22ec421) Thanks [@michenly](https://github.com/michenly)! - Disable worker streaming until it is properly supported.
+
+* [#858](https://github.com/Shopify/hydrogen/pull/858) [`eae3490`](https://github.com/Shopify/hydrogen/commit/eae3490bf630c92243e9e6820100d673e22ec421) Thanks [@michenly](https://github.com/michenly)! - Minify server build output
+
+- [#858](https://github.com/Shopify/hydrogen/pull/858) [`eae3490`](https://github.com/Shopify/hydrogen/commit/eae3490bf630c92243e9e6820100d673e22ec421) Thanks [@michenly](https://github.com/michenly)! - Improve logging for useShopQuery errors
+
+* [#858](https://github.com/Shopify/hydrogen/pull/858) [`eae3490`](https://github.com/Shopify/hydrogen/commit/eae3490bf630c92243e9e6820100d673e22ec421) Thanks [@michenly](https://github.com/michenly)! - `@shopify/hydrogen` will no longer export the following types
+
+  - MediaFileProps
+  - VideoProps
+  - ImageProps
+  - ExternalVideoProps
+  - RawHtmlProps
+  - AddToCartButtonProps
+  - ModelViewerProps
+  - MoneyProps
+  - BuyNowButtonProps
+  - BuyNowButtonPropsWeControl
+  - ShopPayButtonProps
+
+  Any Component props type should be typed instead with `React.ComponentProps<typeof MyComponent>`.
+
+- [#858](https://github.com/Shopify/hydrogen/pull/858) [`eae3490`](https://github.com/Shopify/hydrogen/commit/eae3490bf630c92243e9e6820100d673e22ec421) Thanks [@michenly](https://github.com/michenly)! - Attributes from `<html>` and `<body>` elements in `index.html` are now included in the SSR response.
+
+* [#858](https://github.com/Shopify/hydrogen/pull/858) [`eae3490`](https://github.com/Shopify/hydrogen/commit/eae3490bf630c92243e9e6820100d673e22ec421) Thanks [@michenly](https://github.com/michenly)! - Support non-PascalCase filenames for client components.
+
+- [#858](https://github.com/Shopify/hydrogen/pull/858) [`eae3490`](https://github.com/Shopify/hydrogen/commit/eae3490bf630c92243e9e6820100d673e22ec421) Thanks [@michenly](https://github.com/michenly)! - Updated graphql-codegen, which updates the Typescript types available for each Storefront API object
+
+* [#858](https://github.com/Shopify/hydrogen/pull/858) [`eae3490`](https://github.com/Shopify/hydrogen/commit/eae3490bf630c92243e9e6820100d673e22ec421) Thanks [@michenly](https://github.com/michenly)! - Fix server the server to only log once for the full time it takes to stream render a page
+
+- [#858](https://github.com/Shopify/hydrogen/pull/858) [`eae3490`](https://github.com/Shopify/hydrogen/commit/eae3490bf630c92243e9e6820100d673e22ec421) Thanks [@michenly](https://github.com/michenly)! - Respond with 404 if the route has no matches.
+
+* [#858](https://github.com/Shopify/hydrogen/pull/858) [`eae3490`](https://github.com/Shopify/hydrogen/commit/eae3490bf630c92243e9e6820100d673e22ec421) Thanks [@michenly](https://github.com/michenly)! - Update MediaFile's options prop type to included Image options.
+
+- [#858](https://github.com/Shopify/hydrogen/pull/858) [`eae3490`](https://github.com/Shopify/hydrogen/commit/eae3490bf630c92243e9e6820100d673e22ec421) Thanks [@michenly](https://github.com/michenly)! - Hydrogen docs: Strict mode
+
+* [#858](https://github.com/Shopify/hydrogen/pull/858) [`eae3490`](https://github.com/Shopify/hydrogen/commit/eae3490bf630c92243e9e6820100d673e22ec421) Thanks [@michenly](https://github.com/michenly)! - Remove Router client-only logic from server bundle and avoid extra waterfall requests during Hydration.
+  Extract part of the client bundle into separate modules that can be loaded in parallel.
+
 ## 0.11.1
 
 ### Patch Changes

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

@@ -1,6 +1,5 @@
-import React, { ReactNode } from 'react';
-import { Props } from '../types';
-export interface AddToCartButtonProps {
+import { ReactNode } from 'react';
+interface AddToCartButtonProps {
     /** An array of cart line attributes that belong to the item being added to the cart. */
     attributes?: {
         key: string;
@@ -20,5 +19,5 @@ declare type PropsWeControl = 'onClick';
  * The `AddToCartButton` component renders a button that adds an item to the cart when pressed.
  * It must be a descendent of the `CartProvider` component.
  */
-export declare function AddToCartButton<TTag extends React.ElementType = 'button'>(props: Props<TTag, PropsWeControl> & AddToCartButtonProps): JSX.Element;
+export declare function AddToCartButton(props: Omit<JSX.IntrinsicElements['button'], PropsWeControl> & AddToCartButtonProps): JSX.Element;
 export {};

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

@@ -8,8 +8,8 @@ import { useProduct } from '../ProductProvider';
 export function AddToCartButton(props) {
     var _a, _b;
     const [addingItem, setAddingItem] = useState(false);
-    const { variantId: explicitVariantId, quantity = 1, attributes, children, onAdd, accessibleAddingToCartLabel, ...passthroughProps } = props;
-    const { status, id, cartCreate, linesAdd } = useCart();
+    const { variantId: explicitVariantId, quantity = 1, attributes, children, accessibleAddingToCartLabel, ...passthroughProps } = props;
+    const { status, linesAdd } = useCart();
     const product = useProduct();
     const variantId = (_b = explicitVariantId !== null && explicitVariantId !== void 0 ? explicitVariantId : (_a = product === null || product === void 0 ? void 0 : product.selectedVariant) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : '';
     const disabled = explicitVariantId === null ||
@@ -25,26 +25,13 @@ export function AddToCartButton(props) {
     return (React.createElement(React.Fragment, null,
         React.createElement("button", { ...passthroughProps, disabled: disabled, onClick: () => {
                 setAddingItem(true);
-                if (!id) {
-                    cartCreate({
-                        lines: [
-                            {
-                                quantity: quantity,
-                                merchandiseId: variantId,
-                                attributes: attributes,
-                            },
-                        ],
-                    });
-                }
-                else {
-                    linesAdd([
-                        {
-                            quantity: quantity,
-                            merchandiseId: variantId,
-                            attributes: attributes,
-                        },
-                    ]);
-                }
+                linesAdd([
+                    {
+                        quantity: quantity,
+                        merchandiseId: variantId,
+                        attributes: attributes,
+                    },
+                ]);
             } }, children),
         accessibleAddingToCartLabel ? (React.createElement("p", { style: {
                 position: 'absolute',

package/dist/esnext/components/AddToCartButton/index.d.ts

@@ -1 +1 @@
-export { AddToCartButton, AddToCartButtonProps } from './AddToCartButton.client';
+export { AddToCartButton } from './AddToCartButton.client';

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

@@ -1,7 +1,5 @@
-import { ElementType } from 'react';
 import type { ReactNode } from 'react';
-import { Props } from '../types';
-export interface BuyNowButtonProps {
+interface BuyNowButtonProps {
     /** The item quantity. Defaults to 1. */
     quantity?: number;
     /** The ID of the variant. */
@@ -14,6 +12,7 @@ export interface BuyNowButtonProps {
     /** Any `ReactNode` elements. */
     children: ReactNode;
 }
-export declare type BuyNowButtonPropsWeControl = 'onClick';
+declare type PropsWeControl = 'onClick';
 /** The `BuyNowButton` component renders a button that adds an item to the cart and redirects the customer to checkout. */
-export declare function BuyNowButton<TTag extends ElementType = 'button'>(props: Props<TTag, BuyNowButtonPropsWeControl> & BuyNowButtonProps): JSX.Element;
+export declare function BuyNowButton(props: Omit<JSX.IntrinsicElements['button'], PropsWeControl> & BuyNowButtonProps): JSX.Element;
+export {};

package/dist/esnext/components/BuyNowButton/index.d.ts

@@ -1 +1 @@
-export { BuyNowButton, BuyNowButtonProps, BuyNowButtonPropsWeControl, } from './BuyNowButton.client';
+export { BuyNowButton } from './BuyNowButton.client';

package/dist/esnext/components/BuyNowButton/index.js

@@ -1 +1 @@
-export { BuyNowButton, } from './BuyNowButton.client';
+export { BuyNowButton } from './BuyNowButton.client';

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

@@ -1,11 +1,10 @@
-import React, { ReactNode } from 'react';
-import { Props } from '../types';
+import { ReactNode } from 'react';
 declare type PropsWeControl = 'onClick';
 /**
  * The `CartCheckoutButton` component renders a button that redirects to the checkout URL for the cart.
  * It must be a descendent of a `CartProvider` component.
  */
-export declare function CartCheckoutButton<TTag extends React.ElementType = 'a'>(props: Props<TTag, PropsWeControl> & {
+export declare function CartCheckoutButton(props: Omit<JSX.IntrinsicElements['button'], PropsWeControl> & {
     /** A `ReactNode` element. */
     children: ReactNode;
 }): JSX.Element;

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

@@ -1,5 +1,5 @@
-import React, { ElementType } from 'react';
-import { Props } from '../types';
+import React from 'react';
+import { Money } from '../Money';
 export interface CartEstimatedCostProps {
     /** A string type that defines the type of cost needed. Valid values: `total`, `subtotal`, `tax`, or `duty`. */
     amountType?: 'total' | 'subtotal' | 'tax' | 'duty';
@@ -11,4 +11,4 @@ export interface CartEstimatedCostProps {
  * cost associated with the `amountType` prop. If no `amountType` prop is specified, then it defaults to `totalAmount`.
  * If `children` is a function, then it will pass down the render props provided by the parent component.
  */
-export declare function CartEstimatedCost<TTag extends ElementType>(props: Props<TTag> & CartEstimatedCostProps): JSX.Element | null;
+export declare function CartEstimatedCost<TTag extends keyof JSX.IntrinsicElements>(props: Omit<React.ComponentProps<typeof Money>, 'data'> & CartEstimatedCostProps): JSX.Element | null;

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

@@ -1,10 +1,12 @@
-import { ElementType } from 'react';
-import { Props } from '../types';
+import React from 'react';
+import { Image } from '../Image';
 import { ImageSizeOptions } from '../../utilities';
+declare type PropsWeControl = 'data' | 'options';
 /**
  * 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<TTag extends ElementType = 'img'>(props: Props<TTag> & {
+export declare function CartLineImage(props: Omit<React.ComponentProps<typeof Image>, PropsWeControl> & {
     options?: ImageSizeOptions;
 }): JSX.Element | null;
+export {};

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

@@ -1,7 +1,6 @@
-import { ElementType } from 'react';
-import { MoneyProps } from '../Money';
-import { Props } from '../types';
-export interface CartLinePriceProps<TTag> extends Omit<MoneyProps<TTag>, 'data'> {
+import React from 'react';
+import { Money } from '../Money';
+interface CartLinePriceProps {
     /** The type of price. Valid values:`regular` (default) or `compareAt`. */
     priceType?: 'regular' | 'compareAt';
 }
@@ -9,4 +8,5 @@ export interface CartLinePriceProps<TTag> extends Omit<MoneyProps<TTag>, 'data'>
  * The `CartLinePrice` component renders a `Money` component for the cart line merchandise's price or
  * compare at price. It must be a descendent of a `CartLineProvider` component.
  */
-export declare function CartLinePrice<TTag extends ElementType>(props: Props<TTag> & CartLinePriceProps<TTag>): JSX.Element | null;
+export declare function CartLinePrice<TTag extends keyof JSX.IntrinsicElements>(props: Omit<React.ComponentProps<typeof Money>, 'data'> & CartLinePriceProps): JSX.Element | null;
+export {};

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

@@ -15,7 +15,7 @@ export function CartLinePrice(props) {
         return null;
     }
     return (React.createElement(Money, { ...passthroughProps, data: {
-            amount: price.amount * cartLine.quantity,
+            amount: `${parseFloat(price.amount) * cartLine.quantity}`,
             currencyCode: price.currencyCode,
         } }));
 }

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

@@ -1,10 +1,8 @@
-import { ElementType } from 'react';
-import { Props } from '../types';
 /**
  * The `CartLineProductTitle` component renders a `span` element (or the type of HTML element specified by
  * the `as` prop) with the cart line merchandise's title. It must be a descendent of a `CartLineProvider` component.
  */
-export declare function CartLineProductTitle<TTag extends ElementType>(props: Props<TTag> & {
+export declare function CartLineProductTitle<TTag extends keyof JSX.IntrinsicElements = 'span'>(props: JSX.IntrinsicElements[TTag] & {
     /** An HTML tag to be rendered as the base element wrapper. The default is `span`.  */
     as?: TTag;
 }): JSX.Element;

package/dist/esnext/components/CartLineProvider/context.d.ts

@@ -9,18 +9,12 @@ export declare const CartLineContext: import("react").Context<({
     } & Pick<import("../../graphql/types/types").ProductVariant, "id" | "title" | "availableForSale" | "requiresShipping"> & {
         compareAtPriceV2?: import("../../graphql/types/types").Maybe<{
             __typename?: "MoneyV2" | undefined;
-        } & {
-            __typename?: "MoneyV2" | undefined;
         } & Pick<import("../../graphql/types/types").MoneyV2, "currencyCode" | "amount">> | undefined;
         priceV2: {
             __typename?: "MoneyV2" | undefined;
-        } & {
-            __typename?: "MoneyV2" | undefined;
         } & Pick<import("../../graphql/types/types").MoneyV2, "currencyCode" | "amount">;
         image?: import("../../graphql/types/types").Maybe<{
             __typename?: "Image" | undefined;
-        } & {
-            __typename?: "Image" | undefined;
         } & Pick<import("../../graphql/types/types").Image, "id" | "height" | "width" | "url" | "altText">> | undefined;
         product: {
             __typename?: "Product" | undefined;

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

@@ -1,10 +1,8 @@
-import { ElementType } from 'react';
-import { Props } from '../types';
 /**
  * The `CartLineQuantity` component renders a `span` element (or the type of HTML element
  * specified by the `as` prop) with the cart line's quantity. It must be a descendent of a `CartLineProvider` component.
  */
-export declare function CartLineQuantity<TTag extends ElementType>(props: Props<TTag> & {
+export declare function CartLineQuantity<TTag extends keyof JSX.IntrinsicElements = 'span'>(props: JSX.IntrinsicElements[TTag] & {
     /** An HTML tag to be rendered as the base element wrapper. The default is `div`. */
     as?: TTag;
 }): JSX.Element;

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

@@ -436,7 +436,12 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
                 : 0,
             cartCreate,
             linesAdd(lines) {
-                addLineItem(lines, state);
+                if ('cart' in state && state.cart.id) {
+                    addLineItem(lines, state);
+                }
+                else {
+                    cartCreate({ lines });
+                }
             },
             linesRemove(lines) {
                 removeLineItem(lines, state);

package/dist/esnext/components/CartProvider/graphql/CartAttributesUpdateMutation.d.ts

@@ -1,10 +1,13 @@
+/**
+ * THIS FILE IS AUTO-GENERATED, DO NOT EDIT.
+ * Instead, you can edit the associated .graphql file to query for additional fields and this file will be updated when you run `yarn graphql-types`
+ */
 import * as Types from '../../../graphql/types/types';
-import { CartFragmentFragment } from './CartFragment';
 export declare type CartAttributesUpdateMutationVariables = Types.Exact<{
     attributes: Array<Types.AttributeInput> | Types.AttributeInput;
     cartId: Types.Scalars['ID'];
-    numCartLines?: Types.Maybe<Types.Scalars['Int']>;
-    country?: Types.Maybe<Types.CountryCode>;
+    numCartLines?: Types.InputMaybe<Types.Scalars['Int']>;
+    country?: Types.InputMaybe<Types.CountryCode>;
 }>;
 export declare type CartAttributesUpdateMutation = {
     __typename?: 'Mutation';
@@ -14,6 +17,70 @@ export declare type CartAttributesUpdateMutation = {
     } & {
         cart?: Types.Maybe<{
             __typename?: 'Cart';
-        } & CartFragmentFragment>;
+        } & Pick<Types.Cart, 'id' | 'checkoutUrl' | 'note'> & {
+            buyerIdentity: {
+                __typename?: 'CartBuyerIdentity';
+            } & Pick<Types.CartBuyerIdentity, 'countryCode' | 'email' | 'phone'> & {
+                customer?: Types.Maybe<{
+                    __typename?: 'Customer';
+                } & Pick<Types.Customer, 'id' | 'email' | 'firstName' | 'lastName' | 'displayName'>>;
+            };
+            lines: {
+                __typename?: 'CartLineConnection';
+            } & {
+                edges: Array<{
+                    __typename?: 'CartLineEdge';
+                } & {
+                    node: {
+                        __typename?: 'CartLine';
+                    } & Pick<Types.CartLine, 'id' | 'quantity'> & {
+                        attributes: Array<{
+                            __typename?: 'Attribute';
+                        } & Pick<Types.Attribute, 'key' | 'value'>>;
+                        merchandise: {
+                            __typename?: 'ProductVariant';
+                        } & Pick<Types.ProductVariant, 'id' | 'availableForSale' | 'requiresShipping' | 'title'> & {
+                            compareAtPriceV2?: Types.Maybe<{
+                                __typename?: 'MoneyV2';
+                            } & Pick<Types.MoneyV2, 'currencyCode' | 'amount'>>;
+                            priceV2: {
+                                __typename?: 'MoneyV2';
+                            } & Pick<Types.MoneyV2, 'currencyCode' | 'amount'>;
+                            image?: Types.Maybe<{
+                                __typename?: 'Image';
+                            } & Pick<Types.Image, 'id' | 'url' | 'altText' | 'width' | 'height'>>;
+                            product: {
+                                __typename?: 'Product';
+                            } & Pick<Types.Product, 'handle' | 'title'>;
+                            selectedOptions: Array<{
+                                __typename?: 'SelectedOption';
+                            } & Pick<Types.SelectedOption, 'name' | 'value'>>;
+                        };
+                    };
+                }>;
+            };
+            estimatedCost: {
+                __typename?: 'CartEstimatedCost';
+            } & {
+                subtotalAmount: {
+                    __typename?: 'MoneyV2';
+                } & Pick<Types.MoneyV2, 'currencyCode' | 'amount'>;
+                totalAmount: {
+                    __typename?: 'MoneyV2';
+                } & Pick<Types.MoneyV2, 'currencyCode' | 'amount'>;
+                totalDutyAmount?: Types.Maybe<{
+                    __typename?: 'MoneyV2';
+                } & Pick<Types.MoneyV2, 'currencyCode' | 'amount'>>;
+                totalTaxAmount?: Types.Maybe<{
+                    __typename?: 'MoneyV2';
+                } & Pick<Types.MoneyV2, 'currencyCode' | 'amount'>>;
+            };
+            attributes: Array<{
+                __typename?: 'Attribute';
+            } & Pick<Types.Attribute, 'key' | 'value'>>;
+            discountCodes: Array<{
+                __typename?: 'CartDiscountCode';
+            } & Pick<Types.CartDiscountCode, 'code' | 'applicable'>>;
+        }>;
     }>;
 };

package/dist/esnext/components/CartProvider/graphql/CartBuyerIdentityUpdateMutation.d.ts

@@ -1,10 +1,13 @@
+/**
+ * THIS FILE IS AUTO-GENERATED, DO NOT EDIT.
+ * Instead, you can edit the associated .graphql file to query for additional fields and this file will be updated when you run `yarn graphql-types`
+ */
 import * as Types from '../../../graphql/types/types';
-import { CartFragmentFragment } from './CartFragment';
 export declare type CartBuyerIdentityUpdateMutationVariables = Types.Exact<{
     cartId: Types.Scalars['ID'];
     buyerIdentity: Types.CartBuyerIdentityInput;
-    numCartLines?: Types.Maybe<Types.Scalars['Int']>;
-    country?: Types.Maybe<Types.CountryCode>;
+    numCartLines?: Types.InputMaybe<Types.Scalars['Int']>;
+    country?: Types.InputMaybe<Types.CountryCode>;
 }>;
 export declare type CartBuyerIdentityUpdateMutation = {
     __typename?: 'Mutation';
@@ -14,6 +17,70 @@ export declare type CartBuyerIdentityUpdateMutation = {
     } & {
         cart?: Types.Maybe<{
             __typename?: 'Cart';
-        } & CartFragmentFragment>;
+        } & Pick<Types.Cart, 'id' | 'checkoutUrl' | 'note'> & {
+            buyerIdentity: {
+                __typename?: 'CartBuyerIdentity';
+            } & Pick<Types.CartBuyerIdentity, 'countryCode' | 'email' | 'phone'> & {
+                customer?: Types.Maybe<{
+                    __typename?: 'Customer';
+                } & Pick<Types.Customer, 'id' | 'email' | 'firstName' | 'lastName' | 'displayName'>>;
+            };
+            lines: {
+                __typename?: 'CartLineConnection';
+            } & {
+                edges: Array<{
+                    __typename?: 'CartLineEdge';
+                } & {
+                    node: {
+                        __typename?: 'CartLine';
+                    } & Pick<Types.CartLine, 'id' | 'quantity'> & {
+                        attributes: Array<{
+                            __typename?: 'Attribute';
+                        } & Pick<Types.Attribute, 'key' | 'value'>>;
+                        merchandise: {
+                            __typename?: 'ProductVariant';
+                        } & Pick<Types.ProductVariant, 'id' | 'availableForSale' | 'requiresShipping' | 'title'> & {
+                            compareAtPriceV2?: Types.Maybe<{
+                                __typename?: 'MoneyV2';
+                            } & Pick<Types.MoneyV2, 'currencyCode' | 'amount'>>;
+                            priceV2: {
+                                __typename?: 'MoneyV2';
+                            } & Pick<Types.MoneyV2, 'currencyCode' | 'amount'>;
+                            image?: Types.Maybe<{
+                                __typename?: 'Image';
+                            } & Pick<Types.Image, 'id' | 'url' | 'altText' | 'width' | 'height'>>;
+                            product: {
+                                __typename?: 'Product';
+                            } & Pick<Types.Product, 'handle' | 'title'>;
+                            selectedOptions: Array<{
+                                __typename?: 'SelectedOption';
+                            } & Pick<Types.SelectedOption, 'name' | 'value'>>;
+                        };
+                    };
+                }>;
+            };
+            estimatedCost: {
+                __typename?: 'CartEstimatedCost';
+            } & {
+                subtotalAmount: {
+                    __typename?: 'MoneyV2';
+                } & Pick<Types.MoneyV2, 'currencyCode' | 'amount'>;
+                totalAmount: {
+                    __typename?: 'MoneyV2';
+                } & Pick<Types.MoneyV2, 'currencyCode' | 'amount'>;
+                totalDutyAmount?: Types.Maybe<{
+                    __typename?: 'MoneyV2';
+                } & Pick<Types.MoneyV2, 'currencyCode' | 'amount'>>;
+                totalTaxAmount?: Types.Maybe<{
+                    __typename?: 'MoneyV2';
+                } & Pick<Types.MoneyV2, 'currencyCode' | 'amount'>>;
+            };
+            attributes: Array<{
+                __typename?: 'Attribute';
+            } & Pick<Types.Attribute, 'key' | 'value'>>;
+            discountCodes: Array<{
+                __typename?: 'CartDiscountCode';
+            } & Pick<Types.CartDiscountCode, 'code' | 'applicable'>>;
+        }>;
     }>;
 };