@shopify/hydrogen 0.11.1 → 0.13.1

package/CHANGELOG.md

@@ -1,5 +1,503 @@
 # Changelog
 
+## 0.13.1
+
+### Patch Changes
+
+- [#1008](https://github.com/Shopify/hydrogen/pull/1008) [`ca1de82b`](https://github.com/Shopify/hydrogen/commit/ca1de82bc38c1c02caa451fb52065da499555e6f) Thanks [@frandiox](https://github.com/frandiox)! - Allow passing `cache` parameter to `createServer` in Node entry.
+
+* [#997](https://github.com/Shopify/hydrogen/pull/997) [`fffdc08f`](https://github.com/Shopify/hydrogen/commit/fffdc08f87f71592352a2eb67a63e80704054db2) Thanks [@frandiox](https://github.com/frandiox)! - Allow empty array values in flattenConnection utility.
+
+- [#1007](https://github.com/Shopify/hydrogen/pull/1007) [`7cfca7b0`](https://github.com/Shopify/hydrogen/commit/7cfca7b09289e028a463ababb51e69b4e3943d94) Thanks [@scottdixon](https://github.com/scottdixon)! - Fix API index routes https://github.com/Shopify/hydrogen/issues/562
+
+* [#1000](https://github.com/Shopify/hydrogen/pull/1000) [`6d0d5068`](https://github.com/Shopify/hydrogen/commit/6d0d50686029c3d66d9dc0ceb0b5f71456c7b19e) Thanks [@frandiox](https://github.com/frandiox)! - Do not cache Storefront API responses that contain GraphQL errors.
+
+- [#1003](https://github.com/Shopify/hydrogen/pull/1003) [`d8a9c929`](https://github.com/Shopify/hydrogen/commit/d8a9c9290aaf7c9d058b2c08567294822bea5396) Thanks [@jplhomer](https://github.com/jplhomer)! - Update useShopQuery to accept a custom Storefront API secret token, and forward the Buyer IP.
+
+## 0.13.0
+
+### Minor Changes
+
+- [#922](https://github.com/Shopify/hydrogen/pull/922) [`b5eaddc1`](https://github.com/Shopify/hydrogen/commit/b5eaddc113106ae946fd4b5273ff1485c74a2741) Thanks [@frehner](https://github.com/frehner)! - Fragments and their related types have been removed:
+
+  - ExternalVideoFragment and ExternalVideoFragmentFragment
+  - Model3DFragment and Model3DFragmentFragment
+  - ImageFragment and ImageFragmentFragment
+  - MoneyFragment and MoneyFragmentFragment
+  - UnitPriceFragment and UnitPriceFragmentFragment
+  - VideoFragment and VideoFragmentFragment
+  - MetafieldFragment and MetafieldFragmentFragment
+  - Seo fragments and types:
+    - DefaultPageSeoFragment and DefaultPageSeoFragmentFragment
+    - HomeSeoFragment and HomeSeoFragmentFragment
+    - ProductSeoFragment and ProductSeoFragmentFragment
+    - CollectionSeoFragment and CollectionSeoFragmentFragment
+    - PageSeoFragment and PageSeoFragmentFragment
+  - MediaFile fragments and types:
+    - MediaFileFragment and MediaFileFragmentFragment
+    - MediaFileFragment_ExternalVideo_Fragment
+    - MediaFileFragment_MediaImage_Fragment
+    - MediaFileFragment_Model3d_Fragment
+    - MediaFileFragment_Video_Fragment
+  - ProductFragment and ProductFragmentFragment
+
+  These fragments have been removed to reduce the chances of over-fetching (in other words, querying for fields you don't use) in your GraphQL queries. Please refer to the [Storefront API documentation](https://shopify.dev/api/storefront) for information and guides.
+
+* [#912](https://github.com/Shopify/hydrogen/pull/912) [`de0e0d6a`](https://github.com/Shopify/hydrogen/commit/de0e0d6a6652463243ee09013cd30830ce2a246a) Thanks [@blittle](https://github.com/blittle)! - Change the country selector to lazy load available countries. The motivation to do so is that a _lot_ of countries come with the Demo Store template. The problem is 1) the graphql query to fetch them all is relatively slow and 2) all of them get serialized to the browser in each RSC response.
+
+  This change removes `availableCountries` from the `LocalizationProvider`. As a result, the `useAvailableCountries` hook is also gone. Instead, the available countries are loaded on demand from an API route.
+
+  Migratation steps:
+
+  Create an API route to retrieve available countries:
+
+  ```jsx
+  export async function api(request, {queryShop}) {
+    const {
+      data: {
+        localization: {availableCountries},
+      },
+    } = await queryShop({
+      query: QUERY,
+    });
+
+    return availableCountries.sort((a, b) => a.name.localeCompare(b.name));
+  }
+
+  const QUERY = `
+    query Localization {
+      localization {
+        availableCountries {
+          isoCode
+          name
+          currency {
+            isoCode
+          }
+        }
+      }
+    }
+  `;
+  ```
+
+  Then within your client code, query the API route with a `useEffect` hook:
+
+  ```jsx
+  const [countries, setCountries] = useState([]);
+
+  useEffect(() => {
+    fetch('/api/countries')
+      .then((resp) => resp.json())
+      .then((c) => setCountries(c))
+      .catch((e) => setError(e))
+      .finally(() => setLoading(false));
+  }, []);
+  ```
+
+  See an example on how this could be done inside the Demo Store template [country selector](https://github.com/Shopify/hydrogen/blob/v1.x-2022-07/examples/template-hydrogen-default/src/components/CountrySelector.client.jsx)
+
+- [#698](https://github.com/Shopify/hydrogen/pull/698) [`6f30b9a1`](https://github.com/Shopify/hydrogen/commit/6f30b9a1327f06d648a01dd94d539c7dcb3061e0) Thanks [@jplhomer](https://github.com/jplhomer)! - Basic end-to-end tests have been added to the default Hydrogen template. You can run tests in development:
+
+  ```bash
+  yarn test
+  ```
+
+  Or in continuous-integration (CI) environments:
+
+  ```bash
+  yarn test:ci
+  ```
+
+* [#932](https://github.com/Shopify/hydrogen/pull/932) [`507c5cbf`](https://github.com/Shopify/hydrogen/commit/507c5cbf233a7f3ca05094e839656de227243299) Thanks [@jplhomer](https://github.com/jplhomer)! - Adds [CSS Modules](https://github.com/css-modules/css-modules) support. Hydrogen now includes a [Vite plugin](https://vitejs.dev/guide/features.html#css-modules) that collects styles for each CSS Module and exports them to a `StyleTag` component. To use CSS Modules in your Hydrogen app, you must render the style tag in the component along with your styles:
+
+  ```js
+  import * as styles from './styles.module.css';
+
+  export default MyComponent() {
+    return (
+      <div className={styles.wrapper}>
+        // A style is rendered inline
+        <styles.StyleTag />
+        <p>Hello</p>
+      </div>
+    );
+  }
+  ```
+
+  Explore an [example implementation of CSS Modules in GitHub](https://github.com/Shopify/hydrogen/tree/main/examples/css-modules).
+
+- [#846](https://github.com/Shopify/hydrogen/pull/846) [`58c823b5`](https://github.com/Shopify/hydrogen/commit/58c823b5eb5c5c33caa25cae629409ce651b3991) Thanks [@blittle](https://github.com/blittle)! - ## New `<Route>` Component
+
+  The `<Route>` component is available for routes not defined by the file system. The `<Route>` component must be used within the `<Router>` component.
+
+  ```jsx
+  // app.server.jsx
+
+  function App({routes, ...serverProps}) {
+    return (
+      <Suspense fallback={<LoadingFallback />}>
+        <ShopifyProvider shopifyConfig={shopifyConfig}>
+          <CartProvider>
+            <DefaultSeo />
+            <Router serverProps={serverProps}>
+              <Route path="/custom" page={<CustomRoute />} />
+            </Router>
+          </CartProvider>
+        </ShopifyProvider>
+      </Suspense>
+    );
+  }
+
+  function CustomRoute() {
+    return <h1>Custom route</h1>;
+  }
+  ```
+
+  `<Route>` accepts two props:
+
+  | Property | Type                                    | Required | Description                                                                                            |
+  | -------- | --------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------ |
+  | `path`   | `string`                                | Yes      | The URL path where the route exists. The path can contain variables. For example, `/products/:handle`. |
+  | `page`   | `A rendered Server Component reference` | Yes      | A reference to a React Server Component that's rendered when the route is active.                      |
+
+  ## Changes to `<Router>`
+
+  You can have multiple `<Route>` and `<FileRoutes>` components in your app. Hydrogen will only render one route for each request — whichever it finds first. This means the `<Router>` component no longer takes `fallback` as a prop. It also doesn't need `serverProps`. Instead, to render a 404 "Not Found" page, add `<Route path="*" page={<NotFound />} />` to your app. Make sure it's the last `<Route>` defined inside your app:
+
+  ```diff
+  function App({routes, ...serverProps}) {
+    return (
+      <ShopifyProvider shopifyConfig={shopifyConfig}>
+        <CartProvider>
+          <DefaultSeo />
+  -       <Router
+  -         fallback={<NotFound response={serverProps.response} />}
+  -         serverProps={serverProps}
+  -       >
+  +       <Router>
+            <FileRoutes routes={routes} />
+  +         <Route path="*" page={<NotFound />} />
+          </Router>
+        </CartProvider>
+      </ShopifyProvider>
+    );
+  }
+  ```
+
+  ## Changes to `<FileRoutes>`
+
+  The `<FileRoutes>` component now accepts two additional optional props:
+
+  | Property    | Type     | Required | Default Value | Description                                                             |
+  | ----------- | -------- | -------- | ------------- | ----------------------------------------------------------------------- |
+  | `basePath`  | `string` | No       | `"/"`         | A path that's prepended to all file routes.                             |
+  | `dirPrefix` | `string` | No       | `"./routes"`  | The portion of the file route path that shouldn't be a part of the URL. |
+
+  You need to modify `dirPrefix` if you want to import routes from a location other than `src/routes`.
+
+  You can modify `basePath` if you want to prefix all file routes. For example, you can prefix all file routes with a locale:
+
+  ```jsx
+  <Router>
+    <FileRoutes basePath={`/${locale}`} routes={routes} />
+    <Route path="*" page={<NotFound />} />
+  </Router>
+  ```
+
+  ## New `useRouteParams()` hook
+
+  You can use the `useRouteParams()` hook to retrieve the parameters of an active route. The hook is available in both server and client components:
+
+  ```jsx
+  // products/[handle].server.jsx
+
+  import {useRouteParams} from '@shopify/hydrogen';
+
+  export default function Product() {
+    const {handle} = useRouteParams();
+    // ...
+  }
+  ```
+
+  ```jsx
+  // ProductDetails.client.jsx
+  import {useRouteParams} from '@shopify/hydrogen/client';
+
+  export default function ProductDetails() {
+    const {handle} = useRouteParams();
+    // ...
+  }
+  ```
+
+* [#842](https://github.com/Shopify/hydrogen/pull/842) [`626e58ee`](https://github.com/Shopify/hydrogen/commit/626e58eebe3cf994423895bbdf7754c009d701fe) Thanks [@wizardlyhel](https://github.com/wizardlyhel)! - Removed the `Rawhtml` component.
+
+  Upgrade your project by replacing references to the `RawHtml` component to follow
+  [React's `dangerouslySetInnerHTML`](https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml):
+
+  Change all `RawHtml` component
+
+  ```jsx
+  <RawHtml string="<p>Hello world</p>" />
+  ```
+
+  to jsx equivalent
+
+  ```jsx
+  <div dangerouslySetInnerHTML={{__html: '<p>Hello world</p>'}} />
+  ```
+
+### Patch Changes
+
+- [#870](https://github.com/Shopify/hydrogen/pull/870) [`4c0fcd8f`](https://github.com/Shopify/hydrogen/commit/4c0fcd8f55a7956ab4641f12a5d9ebcb2587264c) Thanks [@frandiox](https://github.com/frandiox)! - Remove useQuery hook from client exports to avoid leaking server logic to the browser.
+
+* [#950](https://github.com/Shopify/hydrogen/pull/950) [`d19fc36b`](https://github.com/Shopify/hydrogen/commit/d19fc36ba548d64a3548df435358ae5bea7cdf8e) Thanks [@frandiox](https://github.com/frandiox)! - Allow disabling minification in vite.config.js
+
+- [#981](https://github.com/Shopify/hydrogen/pull/981) [`8dda8a86`](https://github.com/Shopify/hydrogen/commit/8dda8a860bc1cf58511756b6fff999fb7caa6081) Thanks [@michenly](https://github.com/michenly)! - Fix useUrl() when it is in RSC mode
+
+* [#965](https://github.com/Shopify/hydrogen/pull/965) [`cdad13ed`](https://github.com/Shopify/hydrogen/commit/cdad13ed85ff17b84981367f39c7d2fe45e72dcf) Thanks [@blittle](https://github.com/blittle)! - Fix server redirects to work properly with RSC responses. For example, the redirect component within the Demo Store template needs to change:
+
+  ```diff
+  export default function Redirect({response}) {
+  -  response.redirect('/products/snowboard');
+  -  return <div>This page is redirected</div>;
+  +  return response.redirect('/products/snowboard');
+  }
+  ```
+
+  This server component is rendered two ways:
+
+  1. When an app directly loads the redirect route, the server will render a 300 redirect with the proper location header.
+  2. The app is already loaded, but the user navigates to the redirected route. We cannot 300 respond in this scenario, instead `response.redirect(...)` returns a component which will redirect on the client.
+
+- [#904](https://github.com/Shopify/hydrogen/pull/904) [`1b46f8d0`](https://github.com/Shopify/hydrogen/commit/1b46f8d00ed5db9abaf0868574e252fa319a8ca9) Thanks [@wizardlyhel](https://github.com/wizardlyhel)! - Log query key when provided in string
+
+* [#758](https://github.com/Shopify/hydrogen/pull/758) [`0bee3af0`](https://github.com/Shopify/hydrogen/commit/0bee3af0373acad85dba38a630d3a81e52d6c134) Thanks [@frandiox](https://github.com/frandiox)! - Upgrade to React experimental version `0.0.0-experimental-2bf7c02f0-20220314`.
+
+  To upgrade your Hydrogen app, change the pinned version of `react` and `react-dom` in your `package.json` file to this version, or run:
+
+  ```bash
+  yarn add @shopify/hydrogen react@0.0.0-experimental-2bf7c02f0-20220314 react-dom@0.0.0-experimental-2bf7c02f0-20220314
+  ```
+
+- [#895](https://github.com/Shopify/hydrogen/pull/895) [`1017b541`](https://github.com/Shopify/hydrogen/commit/1017b541c275c030f97ee6dee1e310df1fe89fb5) Thanks [@frandiox](https://github.com/frandiox)! - Improve error thrown in development when entry point fails on load.
+
+* [#897](https://github.com/Shopify/hydrogen/pull/897) [`c01044e6`](https://github.com/Shopify/hydrogen/commit/c01044e6b4ebe74f8e2e310e78dbaa8178536016) Thanks [@blittle](https://github.com/blittle)! - Add new custom headers for storefront API calls. See Issue [#660](https://github.com/Shopify/hydrogen/issues/660)
+
+- [#908](https://github.com/Shopify/hydrogen/pull/908) [`8f4cd100`](https://github.com/Shopify/hydrogen/commit/8f4cd1005ce9d78a1426223b6d4ad44c3cae2ebc) Thanks [@mcvinci](https://github.com/mcvinci)! - Hydrogen docs: Updates to align with latest release
+
+* [#871](https://github.com/Shopify/hydrogen/pull/871) [`4cb07c73`](https://github.com/Shopify/hydrogen/commit/4cb07c7357cf05cc63f9d3c2834ac3c43e8859b5) Thanks [@scottdixon](https://github.com/scottdixon)! - Hydrogen docs: Update ProductProvider example query
+
+- [#878](https://github.com/Shopify/hydrogen/pull/878) [`587aa3e6`](https://github.com/Shopify/hydrogen/commit/587aa3e6b7bee39f8f8a88685ef95ec9bb7c057b) Thanks [@frandiox](https://github.com/frandiox)! - Fix preloading queries in workers to prevent waterfall requests.
+
+  **Breaking change**: `fetchBuilder` no longer accepts a `Request` argument. Instead, it now accepts a `url: string` and `options: FetchInit`:
+
+  ```diff
+  -fetchBuilder(new Request('https://my.endpoint.com', {headers: {foo: 'bar'}}));
+  +fetchBuilder('https://my.endpoint.com', {headers: {foo: 'bar}});
+  ```
+
+* [#923](https://github.com/Shopify/hydrogen/pull/923) [`993be985`](https://github.com/Shopify/hydrogen/commit/993be9856f32f282f14e5c893abfa0a69c5636a4) Thanks [@frandiox](https://github.com/frandiox)! - Provide a Logger option to use GraphQL and disable by default. Improve logging of unused query properties.
+
+- [#960](https://github.com/Shopify/hydrogen/pull/960) [`2e8a5ea2`](https://github.com/Shopify/hydrogen/commit/2e8a5ea24c4d506b14ad3b5b9ed81147a879fc2e) Thanks [@mcvinci](https://github.com/mcvinci)! - Hydrogen docs: Add reference to robots.txt.server.js file
+
+## 0.12.0
+
+### Minor Changes
+
+- [`8271be8`](https://github.com/Shopify/hydrogen/commit/8271be83331c99f27a258e6532983da4fe4f0b5b) Thanks [@michenly](https://github.com/michenly)! - Export Seo components Fragement and use them in the Demo Store template.
+
+* [#827](https://github.com/Shopify/hydrogen/pull/827) [`745e8c0`](https://github.com/Shopify/hydrogen/commit/745e8c0a87a7c41803934565e5a756295ff629c2) 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';
+  ```
+
+- [#455](https://github.com/Shopify/hydrogen/pull/455) [`81ac653`](https://github.com/Shopify/hydrogen/commit/81ac6534b8464e187b09ee13525319ed0c6c7c1d) Thanks [@johncraigcole](https://github.com/johncraigcole)! - 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.
+
+* [#809](https://github.com/Shopify/hydrogen/pull/809) [`47f23f9`](https://github.com/Shopify/hydrogen/commit/47f23f921873b782947aed2e54d997ad034801b8) Thanks [@frehner](https://github.com/frehner)! - 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.
+
+- [#780](https://github.com/Shopify/hydrogen/pull/780) [`122a5c5`](https://github.com/Shopify/hydrogen/commit/122a5c5e0b70fa2a11c2c708b303da987f25fc53) Thanks [@jplhomer](https://github.com/jplhomer)! - 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});
+  ```
+
+* [#712](https://github.com/Shopify/hydrogen/pull/712) [`6368968`](https://github.com/Shopify/hydrogen/commit/6368968e4c68bb44b01b6b0b6903e403269dc233) Thanks [@blittle](https://github.com/blittle)! - 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
+
+- [#799](https://github.com/Shopify/hydrogen/pull/799) [`350293a`](https://github.com/Shopify/hydrogen/commit/350293a9fa113fa9950aad27cf7ccaa6b535bedb) Thanks [@michenly](https://github.com/michenly)! - Update `linesAdd` to create cart if cart does not exist.
+
+* [#788](https://github.com/Shopify/hydrogen/pull/788) [`9d4c43d`](https://github.com/Shopify/hydrogen/commit/9d4c43d6cc4f0b52affc33274c438a356c95ad37) Thanks [@mcvinci](https://github.com/mcvinci)! - Hydrogen docs: Static assets and component props
+
+- [#813](https://github.com/Shopify/hydrogen/pull/813) [`b1b959c`](https://github.com/Shopify/hydrogen/commit/b1b959c45ae43d7078c655b4012b6d6cd2db6491) Thanks [@frandiox](https://github.com/frandiox)! - Do not scroll to top if the URL pathname has not changed.
+
+* [#821](https://github.com/Shopify/hydrogen/pull/821) [`548979e`](https://github.com/Shopify/hydrogen/commit/548979ea7cbc38e52628d3359fd6c4edd19b41cc) Thanks [@jplhomer](https://github.com/jplhomer)! - Add null check for ShopifyProvider
+
+- [#850](https://github.com/Shopify/hydrogen/pull/850) [`74b14e4`](https://github.com/Shopify/hydrogen/commit/74b14e4a66c72125bc1b372c57f305a86a2e1fe4) Thanks [@blittle](https://github.com/blittle)! - 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.
+
+* [#803](https://github.com/Shopify/hydrogen/pull/803) [`7528bf4`](https://github.com/Shopify/hydrogen/commit/7528bf4956970d76f37452bd33f9c9a692187c4f) Thanks [@frandiox](https://github.com/frandiox)! - Avoid accessing undefined global \_\_flight as a side effect of another unknown error.
+
+- [#833](https://github.com/Shopify/hydrogen/pull/833) [`214927a`](https://github.com/Shopify/hydrogen/commit/214927a071b9350d1f70fa02c74227f1e5d77238) Thanks [@frandiox](https://github.com/frandiox)! - Disable worker streaming until it is properly supported.
+
+* [#837](https://github.com/Shopify/hydrogen/pull/837) [`2e76d66`](https://github.com/Shopify/hydrogen/commit/2e76d66ac23d84c13cf9c60e0b7aacf9eddda9ce) Thanks [@jplhomer](https://github.com/jplhomer)! - Minify server build output
+
+- [#819](https://github.com/Shopify/hydrogen/pull/819) [`09d9ad5`](https://github.com/Shopify/hydrogen/commit/09d9ad5d7b65942d9187c6b766bf4c60a6979453) Thanks [@jplhomer](https://github.com/jplhomer)! - Improve logging for useShopQuery errors
+
+* [#825](https://github.com/Shopify/hydrogen/pull/825) [`1215fdb`](https://github.com/Shopify/hydrogen/commit/1215fdb02910190096c6920f533d06f00fc59a6c) 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>`.
+
+- [#792](https://github.com/Shopify/hydrogen/pull/792) [`8aad0b5`](https://github.com/Shopify/hydrogen/commit/8aad0b561ddbef55abc598c91c6e9bd642c46d9c) Thanks [@frandiox](https://github.com/frandiox)! - Attributes from `<html>` and `<body>` elements in `index.html` are now included in the SSR response.
+
+* [#811](https://github.com/Shopify/hydrogen/pull/811) [`2226b6e`](https://github.com/Shopify/hydrogen/commit/2226b6eda30a29ad79fb89c600a210b615dc5406) Thanks [@frandiox](https://github.com/frandiox)! - Support non-PascalCase filenames for client components.
+
+- [#786](https://github.com/Shopify/hydrogen/pull/786) [`d1ecaf7`](https://github.com/Shopify/hydrogen/commit/d1ecaf7efff4595da46b0ece08c3cd94c6cdd55f) Thanks [@frehner](https://github.com/frehner)! - Updated graphql-codegen, which updates the Typescript types available for each Storefront API object
+
+* [#849](https://github.com/Shopify/hydrogen/pull/849) [`e64fa17`](https://github.com/Shopify/hydrogen/commit/e64fa17c61585a7dc967bef5a2216dde40b2fc42) Thanks [@blittle](https://github.com/blittle)! - Fix server the server to only log once for the full time it takes to stream render a page
+
+- [#394](https://github.com/Shopify/hydrogen/pull/394) [`818312d`](https://github.com/Shopify/hydrogen/commit/818312d72618882056d0344f069568e71766d32d) Thanks [@sahilmob](https://github.com/sahilmob)! - Respond with 404 if the route has no matches.
+
+* [#841](https://github.com/Shopify/hydrogen/pull/841) [`0aa74cf`](https://github.com/Shopify/hydrogen/commit/0aa74cf78dae555fc111c06df3d2b73b022af4f0) Thanks [@michenly](https://github.com/michenly)! - Update MediaFile's options prop type to included Image options.
+
+- [#796](https://github.com/Shopify/hydrogen/pull/796) [`1dc62e2`](https://github.com/Shopify/hydrogen/commit/1dc62e2514b53411ae750d81c0a1b4f50eae9aff) Thanks [@mcvinci](https://github.com/mcvinci)! - Hydrogen docs: Strict mode
+
+* [#813](https://github.com/Shopify/hydrogen/pull/813) [`b1b959c`](https://github.com/Shopify/hydrogen/commit/b1b959c45ae43d7078c655b4012b6d6cd2db6491) Thanks [@frandiox](https://github.com/frandiox)! - 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
@@ -8,7 +506,7 @@
 
 * [#761](https://github.com/Shopify/hydrogen/pull/761) [`1142647`](https://github.com/Shopify/hydrogen/commit/114264716bc8f3027e3e6395d523714adbc92014) Thanks [@frehner](https://github.com/frehner)! - Fix issue with components that take in the `as` prop not validating other props when a component is passed to `as`.
 
-- [#752](https://github.com/Shopify/hydrogen/pull/752) [`b96179f`](https://github.com/Shopify/hydrogen/commit/b96179fdf960da52332a981e29a742b677826834) Thanks [@jplhomer](https://github.com/jplhomer)! - Ensure ProductSeo knows how to handle `featuredImage = null`
+- [#752](https://github.com/Shopify/hydrogen/pull/752) [`428aa7a`](https://github.com/Shopify/hydrogen/commit/428aa7adac179dd1efffc29bf382a7bb0a2c8971) Thanks [@michenly](https://github.com/michenly)! - Ensure ProductSeo knows how to handle `featuredImage = null`
 
 * [#774](https://github.com/Shopify/hydrogen/pull/774) [`052f148`](https://github.com/Shopify/hydrogen/commit/052f148e0d33029cdc2540afa5ead32825962f3a) Thanks [@frandiox](https://github.com/frandiox)! - Fix internal url usage in platforms like Vercel, which already provides protocol and host in `request.url`.
 
@@ -441,7 +939,7 @@ function SomeComponent() {
 
 ### Fixed
 
-- Starter template GalleryPreview unique key warning
+- Demo Store template GalleryPreview unique key warning
 - Mitigation for upcoming breaking minor Vite update
 
 ## 0.2.0 - 2021-10-08
@@ -508,4 +1006,3 @@ function SomeComponent() {
 [0.10.0]: https://github.com/Shopify/hydrogen/releases/tag/v0.10.0
 [0.10.1]: https://github.com/Shopify/hydrogen/releases/tag/v0.10.1
 [0.11.0]: https://github.com/Shopify/hydrogen/releases/tag/v0.11.0
-[unreleased]: https://github.com/Shopify/hydrogen/compare/v0.11.0...HEAD

package/dist/esnext/client.d.ts

@@ -5,3 +5,5 @@ export * from './foundation/useShop';
 export * from './foundation/ServerStateProvider';
 export { Head } from './foundation/Head';
 export * from './utilities';
+export { useRouteParams } from './foundation/useRouteParams/useRouteParams';
+export { useNavigate } from './foundation/useNavigate/useNavigate';

package/dist/esnext/client.js

@@ -5,3 +5,5 @@ export * from './foundation/useShop';
 export * from './foundation/ServerStateProvider';
 export { Head } from './foundation/Head';
 export * from './utilities';
+export { useRouteParams } from './foundation/useRouteParams/useRouteParams';
+export { useNavigate } from './foundation/useNavigate/useNavigate';

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';