diff --git a/.changeset/afraid-meals-fly.md b/.changeset/afraid-meals-fly.md deleted file mode 100644 index 164d970568..0000000000 --- a/.changeset/afraid-meals-fly.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@shopify/hydrogen': patch ---- - -Update `linesAdd` to create cart if cart does not exist. diff --git a/.changeset/chilled-parrots-rest.md b/.changeset/chilled-parrots-rest.md deleted file mode 100644 index 429dd94d74..0000000000 --- a/.changeset/chilled-parrots-rest.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@shopify/hydrogen': patch ---- - -Hydrogen docs: Static assets and component props diff --git a/.changeset/cool-swans-thank.md b/.changeset/cool-swans-thank.md deleted file mode 100644 index 11b8902582..0000000000 --- a/.changeset/cool-swans-thank.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@shopify/hydrogen': patch ---- - -Do not scroll to top if the URL pathname has not changed. diff --git a/.changeset/dirty-elephants-worry.md b/.changeset/dirty-elephants-worry.md deleted file mode 100644 index b104407193..0000000000 --- a/.changeset/dirty-elephants-worry.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@shopify/hydrogen': patch ---- - -Add null check for ShopifyProvider diff --git a/.changeset/dirty-starfishes-compare.md b/.changeset/dirty-starfishes-compare.md deleted file mode 100644 index 0f41cb06d2..0000000000 --- a/.changeset/dirty-starfishes-compare.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -'@shopify/hydrogen': patch ---- - -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. diff --git a/.changeset/five-colts-destroy.md b/.changeset/five-colts-destroy.md deleted file mode 100644 index 7b8c6488d7..0000000000 --- a/.changeset/five-colts-destroy.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -'@shopify/hydrogen': minor -'create-hydrogen-app': patch ---- - -Export Seo components Fragement and use them in the starter template. diff --git a/.changeset/four-pans-look.md b/.changeset/four-pans-look.md deleted file mode 100644 index a083b6dab3..0000000000 --- a/.changeset/four-pans-look.md +++ /dev/null @@ -1,69 +0,0 @@ ---- -'@shopify/hydrogen': minor ---- - -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'; -``` diff --git a/.changeset/healthy-pets-unite.md b/.changeset/healthy-pets-unite.md deleted file mode 100644 index 0c45215f61..0000000000 --- a/.changeset/healthy-pets-unite.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@shopify/hydrogen': patch ---- - -Avoid accessing undefined global \_\_flight as a side effect of another unknown error. diff --git a/.changeset/heavy-snails-approve.md b/.changeset/heavy-snails-approve.md deleted file mode 100644 index 43d01cbed1..0000000000 --- a/.changeset/heavy-snails-approve.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@shopify/hydrogen': patch ---- - -Disable worker streaming until it is properly supported. diff --git a/.changeset/mean-mirrors-worry.md b/.changeset/mean-mirrors-worry.md deleted file mode 100644 index 1b98a2064d..0000000000 --- a/.changeset/mean-mirrors-worry.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@shopify/hydrogen': minor ---- - -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. diff --git a/.changeset/moody-waves-wash.md b/.changeset/moody-waves-wash.md deleted file mode 100644 index da2fcedf01..0000000000 --- a/.changeset/moody-waves-wash.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@shopify/hydrogen': patch ---- - -Minify server build output diff --git a/.changeset/nervous-worms-breathe.md b/.changeset/nervous-worms-breathe.md deleted file mode 100644 index e37ff051f2..0000000000 --- a/.changeset/nervous-worms-breathe.md +++ /dev/null @@ -1,9 +0,0 @@ ---- -'@shopify/hydrogen-cli': minor -'@shopify/hydrogen': minor -'create-hydrogen-app': minor ---- - -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. diff --git a/.changeset/nine-bears-float.md b/.changeset/nine-bears-float.md deleted file mode 100644 index bd4faf2ed3..0000000000 --- a/.changeset/nine-bears-float.md +++ /dev/null @@ -1,31 +0,0 @@ ---- -'@shopify/hydrogen': minor -'create-hydrogen-app': minor ---- - -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` | 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}); -``` diff --git a/.changeset/plenty-squids-clap.md b/.changeset/plenty-squids-clap.md deleted file mode 100644 index 6466698a6e..0000000000 --- a/.changeset/plenty-squids-clap.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@shopify/hydrogen': patch ---- - -Improve logging for useShopQuery errors diff --git a/.changeset/quick-jeans-visit.md b/.changeset/quick-jeans-visit.md deleted file mode 100644 index 1572034930..0000000000 --- a/.changeset/quick-jeans-visit.md +++ /dev/null @@ -1,19 +0,0 @@ ---- -'@shopify/hydrogen': patch ---- - -`@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`. diff --git a/.changeset/real-avocados-develop.md b/.changeset/real-avocados-develop.md deleted file mode 100644 index 6b38209dbe..0000000000 --- a/.changeset/real-avocados-develop.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -'create-hydrogen-app': minor -'@shopify/hydrogen': minor ---- - -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 ( - }> - - - - } serverProps={serverProps}> - - - - - - ); -} - -const routes = import.meta.globEager('./routes/**/*.server.[jt](s|sx)'); -export default renderHydrogen(App, {shopifyConfig, routes}); -``` diff --git a/.changeset/rotten-wasps-share.md b/.changeset/rotten-wasps-share.md deleted file mode 100644 index d0843d88dc..0000000000 --- a/.changeset/rotten-wasps-share.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@shopify/hydrogen': patch ---- - -Attributes from `` and `` elements in `index.html` are now included in the SSR response. diff --git a/.changeset/shaggy-bees-promise.md b/.changeset/shaggy-bees-promise.md deleted file mode 100644 index 17cb0e77cd..0000000000 --- a/.changeset/shaggy-bees-promise.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@shopify/hydrogen': patch ---- - -Support non-PascalCase filenames for client components. diff --git a/.changeset/sharp-birds-search.md b/.changeset/sharp-birds-search.md deleted file mode 100644 index 41ecf68b22..0000000000 --- a/.changeset/sharp-birds-search.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@shopify/hydrogen': patch ---- - -Updated graphql-codegen, which updates the Typescript types available for each Storefront API object diff --git a/.changeset/small-crabs-roll.md b/.changeset/small-crabs-roll.md deleted file mode 100644 index 7bda37592a..0000000000 --- a/.changeset/small-crabs-roll.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@shopify/hydrogen': patch ---- - -Fix server the server to only log once for the full time it takes to stream render a page diff --git a/.changeset/some-words-here.md b/.changeset/some-words-here.md deleted file mode 100644 index a83d3271c4..0000000000 --- a/.changeset/some-words-here.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@shopify/hydrogen': patch ---- - -Respond with 404 if the route has no matches. diff --git a/.changeset/thin-socks-rush.md b/.changeset/thin-socks-rush.md deleted file mode 100644 index 6a46661b97..0000000000 --- a/.changeset/thin-socks-rush.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@shopify/hydrogen': patch ---- - -Update MediaFile's options prop type to included Image options. diff --git a/.changeset/tidy-apricots-protect.md b/.changeset/tidy-apricots-protect.md deleted file mode 100644 index ae5d3f660b..0000000000 --- a/.changeset/tidy-apricots-protect.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@shopify/hydrogen': patch ---- - -Hydrogen docs: Strict mode diff --git a/.changeset/twenty-moose-wait.md b/.changeset/twenty-moose-wait.md deleted file mode 100644 index ae4b3f221e..0000000000 --- a/.changeset/twenty-moose-wait.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -'@shopify/hydrogen': patch ---- - -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. diff --git a/.changeset/wet-onions-poke.md b/.changeset/wet-onions-poke.md deleted file mode 100644 index c83c879bc9..0000000000 --- a/.changeset/wet-onions-poke.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'create-hydrogen-app': patch ---- - -Update @headlessui/react version to fix Cart dialog not opening. diff --git a/examples/template-hydrogen-default/package.json b/examples/template-hydrogen-default/package.json index 5b3fbb491e..f33072f048 100644 --- a/examples/template-hydrogen-default/package.json +++ b/examples/template-hydrogen-default/package.json @@ -34,7 +34,7 @@ }, "dependencies": { "@headlessui/react": "^1.5.0", - "@shopify/hydrogen": "^0.11.1", + "@shopify/hydrogen": "^0.12.0", "body-parser": "^1.19.1", "compression": "^1.7.4", "graphql-tag": "^2.12.4", diff --git a/packages/cli/CHANGELOG.md b/packages/cli/CHANGELOG.md index 6cd80f33d3..d4b41c222a 100644 --- a/packages/cli/CHANGELOG.md +++ b/packages/cli/CHANGELOG.md @@ -1,5 +1,13 @@ # 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)! - 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. + ## 0.11.1 ### Patch Changes diff --git a/packages/cli/package.json b/packages/cli/package.json index c1ddc58ba2..7985316137 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -1,6 +1,6 @@ { "name": "@shopify/hydrogen-cli", - "version": "0.11.1", + "version": "0.12.0", "description": "Command line interface for hydrogen", "license": "MIT", "engines": { diff --git a/packages/create-hydrogen-app/CHANGELOG.md b/packages/create-hydrogen-app/CHANGELOG.md index 36a7091f19..8b323e737c 100644 --- a/packages/create-hydrogen-app/CHANGELOG.md +++ b/packages/create-hydrogen-app/CHANGELOG.md @@ -1,5 +1,86 @@ # 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)! - 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` | 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 ( + }> + + + + } serverProps={serverProps}> + + + + + + ); + } + + 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)! - Export Seo components Fragement and use them in the starter template. + +* [#852](https://github.com/Shopify/hydrogen/pull/852) [`6015edf`](https://github.com/Shopify/hydrogen/commit/6015edfa01f7c8e3e7a0120db0847bdc1c068263) Thanks [@frandiox](https://github.com/frandiox)! - Update @headlessui/react version to fix Cart dialog not opening. + ## 0.11.0 - 2022-02-24 - feat: update favicon diff --git a/packages/create-hydrogen-app/package.json b/packages/create-hydrogen-app/package.json index 764f65da10..78618a52fb 100644 --- a/packages/create-hydrogen-app/package.json +++ b/packages/create-hydrogen-app/package.json @@ -4,7 +4,7 @@ "access": "public", "@shopify:registry": "https://registry.npmjs.org" }, - "version": "0.11.0", + "version": "0.12.0", "main": "index.js", "license": "MIT", "bin": { diff --git a/packages/hydrogen/CHANGELOG.md b/packages/hydrogen/CHANGELOG.md index 970598abef..d49b265490 100644 --- a/packages/hydrogen/CHANGELOG.md +++ b/packages/hydrogen/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` | 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 ( + }> + + + + } serverProps={serverProps}> + + + + + + ); + } + + 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`. + +- [#858](https://github.com/Shopify/hydrogen/pull/858) [`eae3490`](https://github.com/Shopify/hydrogen/commit/eae3490bf630c92243e9e6820100d673e22ec421) Thanks [@michenly](https://github.com/michenly)! - Attributes from `` and `` 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 diff --git a/packages/hydrogen/package.json b/packages/hydrogen/package.json index 5ebfd5b0e8..10cf6a7e0f 100644 --- a/packages/hydrogen/package.json +++ b/packages/hydrogen/package.json @@ -7,7 +7,7 @@ "engines": { "node": ">=14" }, - "version": "0.11.1", + "version": "0.12.0", "description": "Modern custom Shopify storefronts", "license": "MIT", "main": "dist/esnext/index.js", diff --git a/packages/hydrogen/src/version.ts b/packages/hydrogen/src/version.ts index 05ec6ba4c4..ec9f63aef6 100644 --- a/packages/hydrogen/src/version.ts +++ b/packages/hydrogen/src/version.ts @@ -1 +1 @@ -export const LIB_VERSION = '0.11.1'; +export const LIB_VERSION = '0.12.0'; diff --git a/packages/playground/server-components/package.json b/packages/playground/server-components/package.json index 4f746ba720..545752e2bf 100644 --- a/packages/playground/server-components/package.json +++ b/packages/playground/server-components/package.json @@ -17,7 +17,7 @@ }, "dependencies": { "@cloudflare/kv-asset-handler": "*", - "@shopify/hydrogen": "^0.11.1", + "@shopify/hydrogen": "^0.12.0", "miniflare": "^1.3.3", "react": "0.0.0-experimental-529dc3ce8-20220124", "react-dom": "0.0.0-experimental-529dc3ce8-20220124"