@shopify/hydrogen-react@2023.1.6

Patch Changes

• 67da795: Fix issue with props on the <CartLineQuantityAdjustButton /> being possibly overwritten.
• 0152f3d: Update internal deps
• 8302b55: (Internal) Migrate from yarn to npm
• 37d036f: Fixed an issue in which the Storefront Client had a check that was meant to only run on the client, but was also running on the server.

@shopify/hydrogen-react@2023.1.5

Patch Changes

• b8757bd: Fix the UMD global variable name from storefrontkitreact to hydrogenreact.

• 6225d33: Add a deprecation notice to <CartLinePrice/>:

  Use Money instead. To migrate, use the priceType prop that matches the corresponding property on the CartLine object:

  • regular: cartLine.cost.totalAmount
  • compareAt: cartLine.cost.compareAtAmountPerQuantity

  For example:

  // before
  <CartLinePrice data={cartLine} priceType="regular" />
  // after
  <Money data={cartLine.cost.totalAmount} />

• 2bb8c81: Adding <CartLineQuantity /> and <CartLineQuantityAdjustButton />

  The <CartLineQuantity /> and <CartLineQuantityAdjustButton /> components have been added / migrated over from Hydrogen v1.

  Additionally, fixed a bug when using <CartLineQuantityAdjustButton /> that caused CartLine Attributes to be erased. CartLine Attributes should now be persisted when using that component.

  useCartLine() TypeScript types update

  useCartLine()'s TypeScript type originally returned a CartLine. It has now been updated to be PartialDeep<CartLine>, which makes all the properties optional instead of required. This matches with the rest of hydrogen-react in that we can't know or guarnatee what properties exist on certain objects so we reflect that state in the TypeScript types.

• eb1656f: Update docs

@shopify/hydrogen-react@2023.1.4

Major Changes

This is admittedly a strange release.

It has been decided to rename the repo back to @shopify/hydrogen-react, and with that we're abandoning the name @shopify/storefront-kit-react. Sorry about that, and hopefully it isn't too big of an inconvenience.

Additionally, the renaming offered an opportunity to introduce a couple of breaking changes that normally we wouldn't do in a patch release. This is the one and only time that we'll do this, so again, we apologize for the strangeness and inconvenience.

Depending on your upgrade path, here's a summary of the changes you need to be aware of:

• If upgrading from @shopify/storefront-kit-react
  • Please note the breaking changes below to <ShopifyProvider /> and useShop()
  • Please note the breaking changes below to the Analytics components
• If upgrading from an older release of @shopify/hydrogen-react
  • Please note the breaking changes below to <ShopifyProvider /> and useShop()
  • Analytics components were added in 2023.1.2, and then were updated in this release
  • Please note the breaking changes in the 2023.1.1 release below

---

The detailed changelog now follows:

• 8d8ab13: Breaking Changes on Shopify analytics components

  • useShopifyCookies - if hasUserConsent is false, no cookies will be set
  • sendShopifyAnalytics - if hasUserConsent is false, no analytics will be sent
  • ShopifyAppSource got rename to ShopifySalesChannel
  • getClientBrowserParameters returns empty string for each field key if run on server
  • Added documents on analytics components

• 6184517: Added the following components and hooks, which have been a part of this package for a while but weren't actually able to be used/imported.

  • <CartCost />
  • <CartLinePrice />
  • <CartLineProvider />
  • useCartLine()

• 3309706: <ShopifyProvider /> and useShop() have had a breaking update:

  ShopifyProvider

  • <ShopifyProvider /> previously accepted a single shopifyConfig object as a prop; now, each of the keys in this object are their own separate props.
  • We also removed country and language as objects, and they are now strings with the names countryIsoCode and languageIsoCode, respectively.
  • The locale prop has been removed completely; this was a duplicative prop that was a combination of countryIsoCode and languageIsoCode, so it made no sense to have to include it as well.

  An example:

  // previously:
  
  <ShopifyProvider
    shopifyConfig={{
      storeDomain: 'my-store',
      storefrontToken: 'abc123',
      storefrontApiVersion: '2022-10',
      country: {
        isoCode: 'CA',
      },
      language: {
        isoCode: 'EN',
      },
      locale: 'EN-CA',
    }}
  >
    {/* rest of your client-side app */}
  </ShopifyProvider>

  // now
  
  <ShopifyProvider
    storeDomain="my-store"
    storefrontToken="abc123"
    storefrontApiVersion="2022-10"
    countryIsoCode="CA"
    languageIsoCode="EN"
  >
    {/* rest of your client-side app */}
  </ShopifyProvider>

  useShop()

  As noted above, locale was removed from the <ShopifyProvider /> component, and countryIsoCode and languageIsoCode were renamed. Here's an example of how the return value of useShop() was affected

  // before
  
  const {country, language, locale} = useShop();
  
  console.log(country.isoCode);
  console.log(language.isoCode);
  console.log(locale);

  // after
  
  const {countryIsoCode, languageIsoCode} = useShop();
  
  console.log(countryIsoCode);
  console.log(languageIsoCode);
  console.log(`${languageIsoCode}-${countryIsoCode}`);

  Note that locale can be replicated by combining languageIsoCode and countryIsoCode with a hypthen (-) between them.

@shopify/storefront-kit-react@2023.1.3

Patch Changes

• 736cc41: In the version 2023.1.1 "Breaking Changes" section, we said

  The storefront client and ShopifyProvider now provide the storeDomain exactly as it is received; it's recommended that you pass the domain with the protocol and the fully-qualified domain name for your Storefront. For example: https://hydrogen-test.myshopify.com

  Unfortunately, the Storefront Client wasn't fully updated to actually do that. This update corrects this bug, but also means that you need to provide a full URL to your Storefront Domain (as was originally intended in our breaking change update).

@shopify/storefront-kit-react@2023.1.2

Patch Changes

• 16b6b81: Shopify Analytics

  Methods:

  • useShopifyCookies(hasUserConsent = true, domain = ''): void - sets and refreshes Shopify cookies
  • getShopifyCookie(cookieString: string): ShopifyCookie - returns Shopify cookies
  • sendShopifyAnalytics({eventName: AnalyticsEventName, payload: ShopifyAnalytics}, domain?): Promise<void> - sends Shopify analytics
  • getClientBrowserParameters(): ClientBrowserParameters - returns commonly tracked client browser values

  Constants:

  • AnalyticsEventName - list of Shopify accepted analytics events
  • AnalyticsPageType - list of Shopify accepted page type names
  • ShopifyAppSource - list of Shopify accepted application source

  Types:

  • ShopifyCookies
  • ClientBrowserParameters
  • ShopifyAnalytics - generic type for ShopifyPageView and ShopifyAddToCart
  • ShopifyAnalyticsPayload - generic type for ShopifyPageViewPayload and ShopifyAddToCartPayload
  • ShopifyPageView
  • ShopifyPageViewPayload
  • ShopifyAddToCart
  • ShopifyAddToCartPayload
  • ShopifyAnalyticsProduct

@shopify/storefront-kit-react@2023.1.1

Changes

• 9bff83c: Updated to Storefront API version 2023-01

  Storefront API Changes

  The Storefront API changelog can be viewed here. There are not any breaking changes in the Storefront API itself.

  Storefront Kit changes

  Breaking Changes

  • The default Cart query no longer uses compareAtPriceV2 and priceV2; use compareAtPrice and price instead. The V2 fields will be removed in an upcoming version of the Storefront API.

  • The storefront client and ShopifyProvider now provide the storeDomain exactly as it is received; it's recommended that you pass the domain with the protocol and the fully-qualified domain name for your Storefront. For example: https://hydrogen-test.myshopify.com

  • parseMetafield's implementation has been updated and vastly improved so that it is correctly parsing all the metafield types.

    • The parsed metafield will now be found on the parsedValue property. For example:

      const metafield = parseMetafield(rawMetafield);
      
      console.log(metafield.parsedValue);

    • Additionally, a new TypeScript type called ParsedMetafield is provided to help the parseMetafield function return the correct TypeScript types, by passing the type of metafield into the ParsedMetafield type. For example:

      const metafield =
        parseMetafield<ParsedMetafield['boolean']>(rawMetafield);
      
      // parsedValue is a boolean
      if (metafield.parsedValue === true) {
      }

  • The <Metafield/> component has been removed; use parseMetafield().parsedValue to have control over what you want to render

  Other Changes

  • The TypeScript types for the returned value of flattenConnection() should now be friendlier: if you are using a PartialDeep object, you'll still get a PartialDeep object in return; if you're NOT using a PartialDeep object, then the returned type will not be wrapped in PartialDeep.

@shopify/hydrogen-react@2022.10.8

Patch Changes

• c1359eb: Actually add content to the READMEs so that they're seen when published to NPM.

@shopify/hydrogen-react@2022.10.7

Patch Changes

• 3d3d123: This is the final release of the package called "Hydrogen-UI." This package will be renamed to "storefront-kit", and will be published as @shopify/storefront-kit-react.

  See you in the new package!

@shopify/hydrogen-react@2022.10.6

Patch Changes

• f570f72: Added the price and compareAtPrice fields to our defaultCartFragment, which is used to get the Cart fields in the <CartProvider /> component.

  The above fields should be identical to priceV2 and compareAtPriceV2, with the exception that these V2 fields are being deprecated in a future version of the Storefront API.

  We'll keep both for now, to help deveopers upgrade without issues, and then remove the V2 versions in a future breaking update.

• 203abf9: Fix bad path for require() statements in non-Node environments.

• de1429e: CartProvider small internal fix to the last valid card and previous stored cart.

@shopify/hydrogen-react@2022.10.5

Patch Changes

• b1989c9: Fix issue with package.json's main and module fields that were not updated to point to the new output directory structure.
• a776e01: Update the TypeScript types for <Money/> so that the default rendered element is a "div".
• f1ffd57: Show storefront development warnings only once.