[ci] release v1.x-2022-07

[github-actions]

This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to v1.x-2022-07, this PR will be updated.

Releases

@shopify/[email protected]

Minor Changes

• #1570 36f26e54 Thanks @frehner! - <Image/> now takes into account a specific order for determining the width and height.

  1. loaderOptions's width/height
  2. width/height bare props
  3. data's width/height

  getShopifyImageDimensions() was also updated to handle this logic.

• #1506 58d6ef55 Thanks @wizardlyhel! - Hydrogen now supports full-page caching out of the box. Previously, Hydrogen relied on the network edge to provide full-page caching for dynamic responses (HTML).

• #1346 01814369 Thanks @lordofthecactus! - Add onClick and buttonRef props to AddToCartButton, BuyNowButton and CartLineQuantityAdjustButton

• #1523 4ef2e5b9 Thanks @blittle! - We've simplified the built-in Hydrogen caching strategies. Instead of CacheSeconds, CacheMinutes, CacheHours, CacheDays, CacheMonths, and NoStore, there is no simply CacheLong, CacheShort, and CacheNone. Please remember that you can build your own caching strategies.

• #1513 8d67b559 Thanks @frandiox! - Breaking change: We are starting to use exports property in package.json to list all the entry points in this package.

  This might incur breaking changes in some rare cases when importing private properties from Hydrogen dist files. Notice that we discourage doing so for anything that is not publicly documented but, if your app was relying on some private properties, then this might help:

  -import {xyz} from '@shopify/hydrogen/dist/esnext/<internal-path>';
  +import {xyz} from '@shopify/hydrogen/<internal-path>';

  Aside from that, it is recommended that TypeScript projects update the tsconfig.json file to use compilerOptions.moduleResolution: "node16" to make sure Hydrogen types are loaded in your editor.
  For JavaScript projects, create or edit <root>/jsconfig.json file with the following information to improve typings:

  {
    "compilerOptions": {
      "target": "es2020",
      "module": "esnext",
      "moduleResolution": "node16",
      "lib": ["dom", "dom.iterable", "scripthost", "es2020"],
      "jsx": "react",
      "types": ["vite/client"]
    },
    "exclude": ["node_modules", "dist"],
    "include": ["**/*.js", "**/*.jsx"]
  }

• #1528 72d21b87 Thanks @frehner! - Metafields have changed in Storefront API 2022-07. We updated our code to work with that update, which means that the following changes will only work if you're using 2022-07 or newer.

  Metafields changes

  Storefront API 2022-07

  Metafields have changed how you access them in the Storefront API. See the release notes for more details. In order to support the new way of querying metafields, Hydrogen has made the following updates:

  <Metafield/>

  Previously, the <Metafield/> component expected you to use useParseMetafields() before passing a metafield to it.

  Now, <Metafield/> will use parseMetafield() itself so that you don't have to. However, this does mean that if you use parseMetafield() and then pass it to <Metafield/>, it will likely break because it will try to parse your metafield's value a second time.

  useParsedMetafields() and parseMetafield()

  Deprecated useParsedMetafields() in favor of parseMetafield(). parseMetafield() takes in a single metafield and returns a new object, and importantly it can be used on both the client and the server.

  If you need to memoize the value on the client, then you can do so using React.memo:

  import {useMemo} from 'react';
  import {parseMetafield} from '@shopify/hydrogen'x
  
  function MyComponent() {
    const parsedMetafield = useMemo(() => parseMetafield(metafield), [metafield]);
  }

• #1517 68b8185e Thanks @frandiox! - Breaking change: The utilities used in hydrogen.config.js file are now exported from @shopiy/hydrogen/config instead of @shopify/hydrogen:

  -import {defineConfig} from '@shopify/hydrogen/config';
  import {
  + defineConfig,
    CookieSessionStorage,
    PerformanceMetricsServerAnalyticsConnector,
    ShopifyServerAnalyticsConnector,
  -} from '@shopify/hydrogen';
  +} from '@shopify/hydrogen/config'
  
  export default defineConfig({
    shopify: {/* ... */},
    session: CookieSessionStorage('__session', {
      path: '/',
      /* ... */
    }),
    serverAnalyticsConnectors: [
      PerformanceMetricsServerAnalyticsConnector,
      ShopifyServerAnalyticsConnector,
    ],
  });

Patch Changes

• #1494 3b549439 Thanks @jplhomer! - Update flattenConnection to accept nodes and edges payloads

• #1579 2f75247c Thanks @frandiox! - Support renaming client component exports in intermediate/facade files.

• #1562 d38f6413 Thanks @wizardlyhel! - Add storefront id to useShopQuery calls when available

• #1593 ae35b70b Thanks @juanpprieto! - Ensure the effect that updates the cart.buyerIdenity.countryCode is run when countyCode prop changes

• #1504 cc453242 Thanks @jplhomer! - Fix read-only request.status in worker environments.

• #1548 923cb140 Thanks @cartogram! - Add new devTools interface for performance, settings and graphQL tracking

• #1375 217b5f23 Thanks @blittle! - Add a built-in healthcheck route available at /__health. It responds with a 200 and no body. Also suppresses server logs for built-in routes like healthcheck and analytics.

• #1541 4fde81f9 Thanks @frandiox! - Fix support for latest React@experimental version.

• #1497 3364225f Thanks @blittle! - Improve waterfall detection

  1. Show a summary in dev mode with instructions on getting details
  2. Only show the waterfall warning the second time the page is loaded
  3. Don't show the waterfall warning on preloaded queries

• #1519 d54b1072 Thanks @frandiox! - Improve CPU performance of the useMoney hook.

• #1518 f0b69477 Thanks @frandiox! - Compile code to latest supported ES version in workers and Node.

• #1571 accdc78a Thanks @jplhomer! - Upgrade Hydrogen to React v18.2. To update your app, run yarn add @shopify/hydrogen@latest react@latest react-dom@latest.

• #1578 f5290393 Thanks @frandiox! - Fix an issue where newly imported client components were not found in the browser.

• #1556 06f3d174 Thanks @blittle! - Add support for Request.formData() within API Routes for Node 16-17. Example:

  export async function api(request) {
    const formData = await request.formData();
  
    const username = formData.get('user');
    const password = formData.get('pass');
  
    ...
  }

[email protected]

Patch Changes

• #1475 689aa68f Thanks @cartogram! - Deprecate create-hydrogen-app in favor of @shopify/create-hydrogen