@shopify/hydrogen-react@2022.10.4

Patch Changes

• 6a3a0b3: Add CartLinePrice component

• ad4aca4: Update TypeScript types for <MediaFile/> so that mediaOptions's properties are all optional instead of required.

• 669809a: <ShopifyProvider/> and useShop() updates:

  • Added a function getShopifyDomain() which will return a fully-qualified domain URL for your Shopify backend. For example:

    const {getShopifyDomain} = useShop();
    console.log(getShopifyDomain());
    // 'https://test.myshopify.com'

    This matches the function that was added to createStorefrontClient().

  • ShopifyProvider's storeDomain prop can now accept the Shopify backend subdomain, matching how createStorefrontClient()'s storeDomain prop. ShopifyProvider still accepts a full domain, but that will be removed in a future breaking change.

  // preferred
  <ShopifyProvider shopifyConfig={{storeDomain: 'shop'}}></ShopifyProvider>
  
  // still works, but will be removed in the future
  <ShopifyProvider shopifyConfig={{storeDomain: 'shop.myshopify.com'}}></ShopifyProvider>

@shopify/hydrogen-react@2022.10.3

Patch Changes

• ccfbbbd: Adds the functions getStorefrontApiUrl() and getPublicTokenHeaders() to the object returned by useShop() (and provided by <ShopifyProvider/>).

  For example:

  const {storefrontId, getPublicTokenHeaders, getStorefrontApiUrl} = useShop();
  
  fetch(getStorefrontApiUrl(), {
    headers: getPublicTokenHeaders({contentType: 'json'})
    body: {...}
  })

• 0683765: Adds CartLines components and hooks.

  • The CartLineProvider component creates a context for using a cart line.
  • The useCartLine hook provides access to the cart line object. It must be a descendent of a CartProvider component.

• 94fdddd: Provide a mapping of Storefront API's custom scalars to their actual types, for use with GraphQL CodeGen.

  For example:

  import {storefrontApiCustomScalars} from '@shopify/hydrogen-react';
  
  const config: CodegenConfig = {
    // Use the schema that's bundled with @shopify/hydrogen-react
    schema: './node_modules/@shopify/hydrogen-react/storefront.schema.json',
    generates: {
      './gql/': {
        preset: 'client',
        plugins: [],
        config: {
          // Use the custom scalar definitions that @shopify/hydrogen-react provides to improve the custom scalar types
          scalars: storefrontApiCustomScalars,
        },
      },
    },
  };

• 676eb75: Adds additional builds for Node-specific targets, to help ensure that server-side code was getting compiled for server-side runtimes, instead of browser-side code for server-side runtimes.

• 2dc6ac4: Add a new utility helper for getting the myshopify domain for the site:

  const client = createStorefrontClient(...);
  client.getShopifyDomain() === `https://testing.myshopify.com`;

@shopify/hydrogen-react@2022.10.2

Patch Changes

• d31be71: Added that redirects to the CheckoutUrl when clicked.

• 8005144: Adds the AddToCartButton component. This component renders a button that adds an item to the cart when pressed.

• f1cb723: Adds BuyNowButton that adds an item to the cart and redirects the customer to checkout.

• a34f44d: Add <CartCost/> component

• 1ccbd1c: Introducing the new metafieldParser() function and ParsedMetafield type.

  metafieldParser()

  metafieldParser() is a temporary name; it will be renamed to parseMetafield() in a future release.

  The metafieldParser() function is an improvement and enhancement upon the existing parseMetafield() and parseMetafieldValue() functions. metafieldParser() now supports all Metafield types as outlined in the Storefront API documentation, including the list types!

  The parsed value can be found on the newly-added parsedValue property of the returned object from metafieldParser(). For example:

  const parsed = metafieldParser(metafield);
  
  console.log(parsed.parsedValue);

  parseMetafieldValue() has been marked as deprecated and will be removed in a future version of Hydrogen-UI.

  The ParsedMetafield type

  For TypeScript developers, we also introduce the new ParsedMetafield type to help improve your experience. The ParsedMetafield type is an object in which the keys map to the type that will be returned from metafieldParser(). For example:

  ParsedMetafield['boolean'];
  // or
  ParsedMetafield['list.collection'];

  When used in conjunction with metafieldParser(), it will help TypeScript to understand what the returned object's parsedValue type is:

  const parsed = metafieldParser<ParsedMetafield['boolean']>(booleanMetafield)
  
  // type of `parsedValue` is `boolean | null`
  if(parsed.parsedValue) {
    ...
  }

  or

  const parsed = metafieldParser<ParsedMetafield['list.collection']>(
    listCollectionMetafield
  );
  
  // type of `parsedValue` is `Array<Collection> | null`
  parsed.parsedValue?.map((collection) => {
    console.log(collection?.name);
  });

• f7a3932: Update the TS types for MediaFile to allow className and other HTML attributes

@shopify/hydrogen-react@2022.10.1

We're excited to announce an experimental version of Hydrogen UI React is now available! We’ve decoupled key components, hooks, and utilities from the Hydrogen framework and moved them into a new package called @shopify/hydrogen-react.

You can now bring Hydrogen functionality to your React framework of choice!

The components, hooks, and utilities will continue to be supported in @shopify/hydrogen until Hydrogen UI React is made generally available, but all new features will only go into @shopify/hydrogen-react going forward.

Check out the documentation to learn more!

Patch Changes

• 71b78b0: Initial release of version 2022-10!

@shopify/hydrogen-react@2022.10.0

@shopify/hydrogen-react

2022.7.1

Patch Changes

• 702df8f: Fixed issue with TypeScript not being able to find the typings for @shopify/hydrogen-react/storefront-api-types

• b9c3940: Add <CartProvider/> and releated hooks & types.

  Component:

  • <CartProvider/>

  Hooks:

  • useCart()
  • useCartFetch()
  • useInstantCheckout()

  Types:

  • CartState
  • CartStatus
  • Cart
  • CartWithActions
  • CartAction

  Also updated flattenConnection() to better handle a null or undefined argument.

@shopify/hydrogen-react@2022.7.1

Patch Changes

• 702df8f: Fixed issue with TypeScript not being able to find the typings for @shopify/hydrogen-react/storefront-api-types

• b9c3940: Add <CartProvider/> and releated hooks & types.

  Component:

  • <CartProvider/>

  Hooks:

  • useCart()
  • useCartFetch()
  • useInstantCheckout()

  Types:

  • CartState
  • CartStatus
  • Cart
  • CartWithActions
  • CartAction

  Also updated flattenConnection() to better handle a null or undefined argument.

@shopify/hydrogen-react@2022.7.0

@shopify/hydrogen-react@2022.7.0