@shopify/hydrogen 0.11.0 → 0.11.1

package/CHANGELOG.md

@@ -0,0 +1,511 @@
+# Changelog
+
+## 0.11.1
+
+### Patch Changes
+
+- [#770](https://github.com/Shopify/hydrogen/pull/770) [`71e0255`](https://github.com/Shopify/hydrogen/commit/71e0255ea48dc1caa34d2c05a1556cc0ce6d4ce9) Thanks [@mcvinci](https://github.com/mcvinci)! - Hydrogen docs: Framework and global hooks content updates
+
+* [#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`
+
+* [#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`.
+
+- [#744](https://github.com/Shopify/hydrogen/pull/744) [`2e487b7`](https://github.com/Shopify/hydrogen/commit/2e487b7e70fe0572538dc2a24b6b6b36ba9fc804) Thanks [@jplhomer](https://github.com/jplhomer)! - Switch to using Changesets for changelogs.
+
+* [#775](https://github.com/Shopify/hydrogen/pull/775) [`d5b7ee1`](https://github.com/Shopify/hydrogen/commit/d5b7ee1d8312f64922d1f78afc82ec5ad4a3f457) Thanks [@cartogram](https://github.com/cartogram)! - In cases where the `initialVariantId` is missing on the `<ProductProvider />`, the `selectedVariantId` in the returned `object` from `useProduct()` will now use the first available variant _or_ the first variant (if non are available).
+
+- [#773](https://github.com/Shopify/hydrogen/pull/773) [`b6a053e`](https://github.com/Shopify/hydrogen/commit/b6a053e774da443b5692dec51546f5558b3018ad) Thanks [@frandiox](https://github.com/frandiox)! - Fix server bundle name in cases where CSS or images are imported in server components.
+
+* [#764](https://github.com/Shopify/hydrogen/pull/764) [`5e55da4`](https://github.com/Shopify/hydrogen/commit/5e55da4090692369ff6a3d57fbc6d29124bdf2e9) Thanks [@wizardlyhel](https://github.com/wizardlyhel)! - Preload queries breaking fetch on Cloudfare [#764](https://github.com/Shopify/hydrogen/pull/764)
+
+- [#763](https://github.com/Shopify/hydrogen/pull/763) [`ea2857a`](https://github.com/Shopify/hydrogen/commit/ea2857a515866f37f392bca5da8be1139c055a64) Thanks [@frehner](https://github.com/frehner)! - Client-side apps now have React's `StrictMode` component wrapping the whole app, with an option to disable it. If you do turn it off, it is recommended that you still include the `StrictMode` component at as high of a level as possible in your React tree.
+
+  See also [React 17's docs](https://reactjs.org/docs/strict-mode.html) on `StrictMode`, and [React 18's updates](https://github.com/reactwg/react-18/discussions/19) to `StrictMode`.
+
+* [#747](https://github.com/Shopify/hydrogen/pull/747) [`2d8ab7e`](https://github.com/Shopify/hydrogen/commit/2d8ab7e2a8038ff8b43e6e9398e0bb2da72220a0) Thanks [@mcvinci](https://github.com/mcvinci)! - Hydrogen docs: Preloaded queries and query timing
+
+## [0.11.0] - 2022-02-24
+
+### Added
+
+- New React hook `useScriptLoader` is available to more easily load external scripts
+- Add `totalQuantity` to the returned object from `useCart()`
+- Export `ProductPrice` and `ProductMetafield` standalone components
+- Added `useUrl` hook that allows the consumer to get the current url in server or client component
+- Added logging option `showCacheApiStatus` and `cacheControlHeader` by @wizardlyhel in [#472](https://github.com/Shopify/hydrogen/pull/472)
+- Pass HYDROGEN_ASSET_BASE_URL into config to set base URL for compiled assets
+- Introduce Hydrogen the `<Link>` component and `useNavigate` hook for routing
+- Add a default virtual entry-client in `/@shopify/hydrogen/entry-client` that can be used in `index.html`
+- Enable early hydration when streaming
+- Add variantId prop to `<ProductMetafield />` component [#730](https://github.com/Shopify/hydrogen/pull/730)
+- Add query timing logging option `showQueryTiming` [#699](https://github.com/Shopify/hydrogen/pull/699)
+- Add variantId prop to `<ProductPrice />` component
+- Add `preload` option to `useQuery` and `useShopQuery` [#700](https://github.com/Shopify/hydrogen/pull/700)
+
+### Breaking Change
+
+- `<Model3D>` has been renamed to `<ModelViewer>`
+- `<Product />` and `<CartLine />` aliases have been removed; use the original components `<ProductProvider />` and `<CartLineProvider />` instead. Their nested component aliases, such as `<Product.Image />`, have also been removed; in this example you should use `<ProductImage />`.
+- Merge `/src/entry-server.jsx` entry point into `App.server.jsx`
+- The following components had their prop name renamed. Refer to the documentation or [#627](https://github.com/Shopify/hydrogen/issues/627) for more details.
+  - `<ExternalVideo />`: renamed video prop to data
+  - `<Video />`: renamed video prop to data
+  - `<Image>`: renamed image prop to data
+  - `<MediaFile>`: renamed media prop to data
+  - `<ModelViewer>`: renamed model prop to data
+  - `<Metafield>`: renamed metafield prop to data
+  - `<Money>`: renamed money prop to data
+  - `<UnitPrice>`: renamed unitPrice prop to data, unitPriceMeasurement prop to measurement
+  - `<ProductProvider>`: renamed product prop to data
+  - `<CartProvider>`: renamed cart prop to data
+- Helmet component has been renamed to Head
+- Remove the `<SelectedVariantBuyNowButton />` component in favour of using `<BuyNowButton variantId={product.selectedVariant.id} />`
+- `<SelectedVariantAddToCartButton />` has been removed; the `<AddToCartButton />` will now use the selectedVariant by default.
+- Remove the `<SelectedVariantImage />` component in favour of using `<Image data={product.selectedVariant.image} />`
+- Remove the `<SelectedVariantMetafield />` component in favour of using `<ProductMetafield variantId={product.selectedVariant.id} />`
+- Remove the `<SelectedVariantShopPayButton />` component in favour of using `<ShopPayButton variantId={product.selectedVariant.id} />`
+- Remove the `<SelectedVariantPrice/>` and `<SelectedVariantUnitPrice/>` component in favour of using `<ProductPrice variantId={product.selectedVariant.id} />`
+
+### Changed
+
+- Change `/react` RSC path to `/__rsc`
+- `<ShopifyProvider>` can again be used in server components
+- Use hashes as client component ids instead of absolute paths
+- Transition away from deprecated currency selector in favor of country selector
+- Simplify Helmet usage and make it compatible with RSC
+- The `Seo.client` component has been moved from `src/components` to `@shopify/hydrogen`. The props of the `Seo.client` component also changed to always take in `type` and `data`. Refer to the [`Seo` component reference](../src/components/Seo/README.md) for more details. [#539](https://github.com/Shopify/hydrogen/pull/539)
+- Standardize cache control header into caching strategies by @wizardlyhel in [#629](https://github.com/Shopify/hydrogen/pull/629)
+- Target future release to use '2022-01' API Version
+- Correct Typescript issue where `as` was a default prop for all components when it should not be
+- Update types and docs for `useCart()` hook and `<CartProvider>`
+- Track page load performance
+- The following money components no longer allow the function-as-a-child (also known as "render props") pattern; see [#589](https://github.com/Shopify/hydrogen/pull/589)
+  - `<Money>` Use `useMoney()` for customization
+  - `<CartLinePrice>` Use `useMoney()` for customization
+  - `<ProductPrice>` Use `useMoney()` for customization
+  - `<SelectedVariantPrice>` Use `useMoney()` for customization
+  - `<Metafield>` Use `useParsedMetafields()` for customization
+  - `<ProductMetafield>` Use `useParsedMetafields()` for customization
+  - `<SelectedVariantMetafield>` Use `useParsedMetafields()` for customization
+  - `<UnitPrice>` Use `useMoney()` for customization
+  - `<CartLines>` Use `useCart()` for customization
+- `<Metafield>` now renders `ratings` as a `<span>` with text instead of stars; `multi_line_text_field` inside of a `<span>` instead of a `<div>`
+- Use `featureImage` instead of images(first:1) on product query
+- Update `react-helmet-async` to 1.2.3 and remove our custom types
+
+### Fixed
+
+- Fix index routes. See [#562](https://github.com/Shopify/hydrogen/issues/562)
+- Fix missing server state on SSR pass
+- Fix mobile navigation in example that scrolls the body underneath when shown by @Francismori7 in [#582](https://github.com/Shopify/hydrogen/pull/582)
+- Add charset to content type in HTML responses
+- Fix header shift when cart is opened by @Francismori7 in [#600](https://github.com/Shopify/hydrogen/pull/600)
+- Fix bug where search param is not being pass along during RSC streaming call [#623](https://github.com/Shopify/hydrogen/pull/623)
+- Allow custom entry-client filenames
+- Clear browser fetch cache by @wizardlyhel in [#591](https://github.com/Shopify/hydrogen/pull/591)
+- Cannot redefine property error when updating client components
+- `ShopPayButton` supports quantities greater than 1. Also fixed issues with IDs in Storefront API version 2022-01
+- Render error in `Gallery.client.jsx` component when product resource has an external video or no images.
+- Ensure youtube external videos are embed compatible urls
+- Prevent client components from being cached during development
+- Backticks in HTML break RSC hydration.
+
+### Removed
+
+- <CartLineSelectedOptions /> and <CartLineAttributes /> components. These components used the “function-as-a-child” pattern which doesn’t allow the `children` prop to be serialized, preventing them from being rendered within Server components.
+
+_Migration_
+
+The functionality provided by these components can be replicated using the `useCartLine()` hook instead.
+
+_Example_
+
+```tsx
+// Before
+function SomeComponent() {
+  return (
+    <>
+      <CartLineSelectedOptions as="ul" className="text-xs space-y-1">
+        {({name, value}) => (
+          <>
+            {name}: {value}
+          </>
+        )}
+      </CartLineSelectedOptions>
+      <CartLineAttributes as="ul" className="text-sm space-y-1">
+        {({key, value}) => (
+          <>
+            {key}: {value}
+          </>
+        )}
+      </CartLineAttributes>
+    </>
+  );
+}
+
+// After
+function SomeComponent() {
+  const {merchandise} = useCartLine();
+
+  return (
+    <>
+      <ul className="text-xs space-y-1">
+        {merchandise.selectedOptions.map(({name, value}) => (
+          <li key={name}>
+            {name}: {value}
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+}
+```
+
+- Remove `fetch` workaround
+- Remove the following hooks. (All the same functionality can be retrieved through the `useCart()` hook)
+  - `useCartAttributesUpdateCallback`
+  - `useCartBuyerIdentityUpdateCallback`
+  - `useCartCheckoutUrl`
+  - `useCartCreateCallback`
+  - `useCartDiscountCodesUpdateCallback`
+  - `useCartLinesAddCallback`
+  - `useCartLinesRemoveCallback`
+  - `useCartLinesTotalQuantity`
+  - `useCartLinesUpdateCallback`
+  - `useCartNoteUpdateCallback`
+- Remove React Router on the client
+- Remove `handleEvent` in favor of `handleRequest`
+- Remove `assetHandler` parameter in the new `handleRequest`
+- `<SelectedVariantAddToCartButton />` has been removed; the `<AddToCartButton />` will now use the selectedVariant by default.
+- Remove the `<SelectedVariantImage />` component in favour of using `<Image data={product.selectedVariant.image} />`
+- Remove the `<SelectedVariantMetafield />` component in favour of using `<ProductMetafield variantId={product.selectedVariant.id} />`
+- Remove the `<SelectedVariantBuyNowButton />` component in favour of using `<BuyNowButton variantId={product.selectedVariant.id} />`
+- Remove the `<SelectedVariantShopPayButton />` component in favour of using `<ShopPayButton variantId={product.selectedVariant.id} />`
+
+## [0.10.1] - 2022-01-26
+
+### Fixed
+
+- Hot reload for newly added page files
+
+## [0.10.0] - 2022-01-25
+
+### Changed
+
+- Warn instead of error when a page server component is missing valid exports
+- Adopt upstream version of React Server Components. See [#498](https://github.com/Shopify/hydrogen/pull/498) for breaking changes
+- Bump to latest version of React experimental to include [upstream context bugfix](https://github.com/facebook/react/issues/23089)
+- Improve API routes by allowing [strings and JS objects](https://github.com/Shopify/hydrogen/issues/476) to be returned.
+
+### Breaking Change
+
+- The 'locale' option in shopify.config.js had been renamed to 'defaultLocale'
+- Rename `graphqlApiVersion` to `storefrontApiVersion` in `shopify.config.js`
+
+### Fixed
+
+- Make sure that API routes [hot reload properly](https://github.com/Shopify/hydrogen/issues/497)
+
+## [0.9.1] - 2022-01-20
+
+### Changed
+
+- Transitive dependency bump.
+
+## [0.9.0] - 2022-01-20
+
+### Added
+
+- API routes 🎉
+
+### Changed
+
+- Move to undici instead of node-fetch
+
+## [0.8.3] - 2022-01-13
+
+### Added
+
+- Add optional `locale` param to `useShopQuery` to be used as `Accept-Language` in the store Storefront API query
+- Optional purge query cache per build
+
+### Fixed
+
+- Replace log abbreviations with full text.
+
+## [0.8.2] - 2022-01-07
+
+### Changed
+
+- Warn when requests take longer than 3000ms instead of erroring
+- `useQuery` returns an error if the query's fetch was unsuccessful
+- `useShopQuery` will give error hints to look at `shopify.config.js` when the Storefront API responds with a 403
+
+### Fixed
+
+- Load logger only once.
+- Do not attempt to decode product IDs, as they are no longer base64-encoded in `unstable`
+
+## [0.8.1] - 2022-01-04
+
+### Added
+
+- Detect bot user agents and give bots a non-streamed response.
+- Add global `Oxygen.env` for server-only environment variables.
+- Logging abstraction with default timing information
+
+### Changed
+
+- Upgrade to latest React 18 experimental version
+
+### Fixed
+
+- Cart decrease button removes at zero quantity
+
+## [0.8.0] - 2021-12-07
+
+### Fixed
+
+- Export `CartLineSelectedOptions` properly
+- Fix suspense utility function
+
+## [0.7.1] - 2021-12-02
+
+### Changed
+
+- Allow `useShopQuery` to be skippable if no query is passed
+- Remove usage of `react-query` (Not a breaking change)
+
+### Fixed
+
+- Avoid repeating the same identifier for default and named exports
+- Remove sourcemap warnings
+
+## [0.7.0] - 2021-11-22
+
+### Added
+
+- Add file reference metafield support
+- Allow custom Model3D poster
+- Support synchronous server redirects
+
+### Fixed
+
+- Binding of waitUntil in playground/server-components-worker
+- Default to `retry: false` in `useQuery`
+- Warn and ignore reserved properties in server state
+- Run graphiql middleware before vite, fixing graphiql
+
+## [0.6.4] - 2021-11-11
+
+### Fixed
+
+- Let Vite handle public assets in development
+- New lines in hydration request break JSON.parse
+- Normalize POSIX separators to support windows [#201](https://github.com/Shopify/hydrogen/pull/201)
+- Scroll to top on app first load
+- Update variantID to variantId [#78](https://github.com/Shopify/hydrogen/pull/78)
+
+## [0.6.3] - 2021-11-10
+
+### Fixed
+
+- Add trailing slash to user components glob
+
+## [0.6.2] - 2021-11-10
+
+### Fixed
+
+- Remove CartProvider from BuyNowButton
+- Reading property of null for component props
+- Transform deeply-imported client components
+- Duplicated files and contexts in browser
+
+## [0.6.1] - 2021-11-08
+
+### Changed
+
+- Transitive dependency bump.
+
+### Fixed
+
+- Do not set headers after they are sent to client
+
+## [0.6.0] - 2021-11-05
+
+### Changed
+
+- Disable the quantity adjust button when the cart is not idle
+- Use country server state in cart for the inContext directive
+- Use Image url field instead of deprecated originalSrc field
+- Switch to unstable API
+
+### Fixed
+
+- Update interaction prompt and interaction promp style attributes for Model3d
+- Make sure all errors show an error dialog when hydrogen is in dev mode
+- MediaFile component warning on non-Model3D types
+- Remove console logs for caching
+- Lowercased SVG tags in RSC
+- Make the URL search property available via hooks
+
+## 0.5.8 - 2021-11-04
+
+### Fixed
+
+- Ensure delayed callback is fired for cache purposes in Workers runtimes.
+
+## 0.5.3 - 2021-11-02
+
+### Changed
+
+- No updates. Transitive dependency bump.
+
+## 0.5.2 - 2021-11-02
+
+### Changed
+
+- No updates. Transitive dependency bump.
+
+## 0.5.1 - 2021-11-02
+
+### Changed
+
+- No updates. Transitive dependency bump.
+
+## 0.5.0 - 2021-11-01
+
+### Fixed
+
+- Update the ServerStateProvider context
+- Add tabIndex to ShopPayButton
+- Update LocalizationProvider query, context, and exports
+
+## 0.4.3 - 2021-10-29
+
+### Added
+
+- Introduct full-page and sub-request caching API.
+
+## 0.4.2 - 2021-10-29
+
+### Changed
+
+- Update Model3D props and add binding to model-viewer events
+
+### Fixed
+
+- Add `passthoughProps.disabled` to `AddToCartButton`
+- Do not show undefined currency symbol in production
+
+## 0.4.0 - 2021-10-27
+
+### Added
+
+- Add external image support to Image component
+
+### Changed
+
+- Make `CartProvider` a client-only concern. [#631](https://github.com/Shopify/hydrogen/pull/631)
+- Use `Accept: application/hydrogen` as a header when making `fetch` calls against a Hydrogen page. Useful for Custom Responses.
+
+### Fixed
+
+- Lock model-viewer.js version to 1.8
+- Use the Intl.NumberFormat parts for determining the amount value returned by the useMoney hook
+- Optimize React related dependencies at server start to avoid page reloads
+- Do not throw when `storeDomain` contains protocol.
+
+## 0.3.0 - 2021-10-20
+
+### Added
+
+- Export utilities in client bundle
+
+### Fixed
+
+- `parseCookies` will split only on first =
+- Make BuyNowButton a client component since it uses useEffect
+- Preserve original aspect ratio for product images
+- Invoke CartProvider callbacks before performing the GraphQL mutations
+- Fix the accessible label in the AddToCartButton component when an item is added to cart
+- Cart fetch to return stringified error
+
+### Removed
+
+- Remove sourcemap warnings
+
+## 0.2.1 - 2021-10-12
+
+### Fixed
+
+- Starter template GalleryPreview unique key warning
+- Mitigation for upcoming breaking minor Vite update
+
+## 0.2.0 - 2021-10-08
+
+### Added
+
+- Added support for images and collections in the ProductProvider component
+- Added more GraphQL fragments for building block components (Metafield, UnitPrice) and updated exports of these fragments
+
+### Breaking Change
+
+- `useQuery` now behaves exactly like [react-query's hook of the same name](https://react-query.tanstack.com/reference/useQuery#_top)
+
+### Fixed
+
+- Handle products with selling plans
+
+## 0.1.2 - 2021-09-30
+
+### Fixed
+
+- SSR issue when running Vite 2.6
+- Occasional `ProductProviderFragment` error when booting Hydrogen dev server [#571](https://github.com/Shopify/hydrogen/issues/571)
+
+## 0.1.1 - 2021-09-24
+
+### Added
+
+- New GraphQL fragments for Variants, SellingPlans, and SellingPlanGroups
+
+### Changed
+
+- Updated types for the `useProductOptions` hook
+
+### Fixed
+
+- `Dynamic require of "stream" is not supported` error in browser logs
+
+## 0.1.0 - 2021-09-23
+
+### Changed
+
+- No updates. Transitive dependency bump.
+
+## 1.0.0-alpha.22 - 2021-09-22
+
+### Changed
+
+- No updates. Transitive dependency bump.
+
+[0.6.0]: https://github.com/Shopify/hydrogen/releases/tag/v0.6.0
+[0.6.1]: https://github.com/Shopify/hydrogen/releases/tag/v0.6.1
+[0.6.2]: https://github.com/Shopify/hydrogen/releases/tag/v0.6.2
+[0.6.3]: https://github.com/Shopify/hydrogen/releases/tag/v0.6.3
+[0.6.4]: https://github.com/Shopify/hydrogen/releases/tag/v0.6.4
+[0.7.0]: https://github.com/Shopify/hydrogen/releases/tag/v0.7.0
+[0.7.1]: https://github.com/Shopify/hydrogen/releases/tag/v0.7.1
+[0.8.0]: https://github.com/Shopify/hydrogen/releases/tag/v0.8.0
+[0.8.1]: https://github.com/Shopify/hydrogen/releases/tag/v0.8.1
+[0.8.2]: https://github.com/Shopify/hydrogen/releases/tag/v0.8.2
+[0.8.3]: https://github.com/Shopify/hydrogen/releases/tag/v0.8.3
+[0.9.0]: https://github.com/Shopify/hydrogen/releases/tag/v0.9.0
+[0.9.1]: https://github.com/Shopify/hydrogen/releases/tag/v0.9.1
+[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/components/AddToCartButton/AddToCartButton.client.js

@@ -6,12 +6,12 @@ import { useProduct } from '../ProductProvider';
  * It must be a descendent of the `CartProvider` component.
  */
 export function AddToCartButton(props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    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 product = useProduct();
-    const variantId = (_h = (_e = (_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 : (_d = (_c = product === null || product === void 0 ? void 0 : product.variants) === null || _c === void 0 ? void 0 : _c.find((variant) => variant.availableForSale)) === null || _d === void 0 ? void 0 : _d.id) !== null && _e !== void 0 ? _e : (_g = (_f = product === null || product === void 0 ? void 0 : product.variants) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.id) !== null && _h !== void 0 ? _h : '';
+    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 ||
         variantId === '' ||
         (product === null || product === void 0 ? void 0 : product.selectedVariant) === null ||

package/dist/esnext/components/CartLinePrice/CartLinePrice.client.d.ts

@@ -1,7 +1,7 @@
 import { ElementType } from 'react';
 import { MoneyProps } from '../Money';
 import { Props } from '../types';
-export interface CartLinePriceProps extends Omit<MoneyProps, 'data'> {
+export interface CartLinePriceProps<TTag> extends Omit<MoneyProps<TTag>, 'data'> {
     /** The type of price. Valid values:`regular` (default) or `compareAt`. */
     priceType?: 'regular' | 'compareAt';
 }
@@ -9,4 +9,4 @@ export interface CartLinePriceProps extends Omit<MoneyProps, 'data'> {
  * The `CartLinePrice` component renders a `Money` component for the cart line merchandise's price or
  * compare at price. It must be a descendent of a `CartLineProvider` component.
  */
-export declare function CartLinePrice<TTag extends ElementType>(props: Props<TTag> & CartLinePriceProps): JSX.Element | null;
+export declare function CartLinePrice<TTag extends ElementType>(props: Props<TTag> & CartLinePriceProps<TTag>): JSX.Element | null;

package/dist/esnext/components/CartLineProductTitle/CartLineProductTitle.client.d.ts

@@ -6,5 +6,5 @@ import { Props } from '../types';
  */
 export declare function CartLineProductTitle<TTag extends ElementType>(props: Props<TTag> & {
     /** An HTML tag to be rendered as the base element wrapper. The default is `span`.  */
-    as?: ElementType;
+    as?: TTag;
 }): JSX.Element;

package/dist/esnext/components/CartLineQuantity/CartLineQuantity.client.d.ts

@@ -6,5 +6,5 @@ import { Props } from '../types';
  */
 export declare function CartLineQuantity<TTag extends ElementType>(props: Props<TTag> & {
     /** An HTML tag to be rendered as the base element wrapper. The default is `div`. */
-    as?: ElementType;
+    as?: TTag;
 }): JSX.Element;

package/dist/esnext/components/LocalizationProvider/LocalizationProvider.server.d.ts

@@ -2,9 +2,12 @@ import { ReactNode, ElementType } from 'react';
 import { PreloadOptions } from '../../types';
 import { Props } from '../types';
 export interface LocalizationProviderProps {
-    /** Any ReactNode elements. */
+    /** A `ReactNode` element. */
     children: ReactNode;
-    /** `true` to preload the localization query for the url or `'*'` to preload the localization query for all urls */
+    /** Whether to preload the query. Defaults to `false`. Specify `true` to
+     * [preload the query](/custom-storefronts/hydrogen/framework/preloaded-queries) for the URL
+     * or `'*'` to preload the query for all requests.
+     */
     preload: PreloadOptions;
 }
 /**

package/dist/esnext/components/Metafield/Metafield.client.d.ts

@@ -1,11 +1,11 @@
 import { ElementType } from 'react';
 import { Props } from '../types';
 import { ParsedMetafield } from '../../types';
-export interface MetafieldProps {
+export interface MetafieldProps<TTag> {
     /** A [Metafield object](/api/storefront/reference/common-objects/metafield) from the Storefront API. */
     data: ParsedMetafield;
     /** An HTML tag to be rendered as the base element wrapper. The default value varies depending on [metafield.type](/apps/metafields/types). */
-    as?: ElementType;
+    as?: TTag;
 }
 /**
  * The `Metafield` component renders the value of a Storefront
@@ -14,7 +14,7 @@ export interface MetafieldProps {
  * Renders a smart default of the
  * Metafield's `value`. For more information, refer to the [Default Output](#default-output) section.
  */
-export declare function Metafield<TTag extends ElementType>(props: Props<TTag> & MetafieldProps): JSX.Element | null;
+export declare function Metafield<TTag extends ElementType>(props: Props<TTag> & MetafieldProps<TTag>): JSX.Element | null;
 export declare namespace Metafield {
     var Fragment: string;
 }

package/dist/esnext/components/Metafield/components/StarRating/StarRating.d.ts

@@ -3,12 +3,12 @@ import { Props } from '../../../types';
 import { Rating } from '../../../../types';
 export declare const STAR_EMPTY = "\u2606";
 export declare const STAR_FILLED = "\u2605";
-export interface StarRatingProps {
+export interface StarRatingProps<TTag> {
     rating: Rating;
     /** An HTML tag to be rendered as the base element wrapper. The default is `div`. */
-    as?: ElementType;
+    as?: TTag;
 }
-export declare function StarRating<TTag extends ElementType>(props: Props<TTag> & StarRatingProps): JSX.Element;
+export declare function StarRating<TTag extends ElementType>(props: Props<TTag> & StarRatingProps<TTag>): JSX.Element;
 export declare function Star({ percentFilled }: {
     percentFilled: number;
 }): JSX.Element;

package/dist/esnext/components/Money/Money.client.d.ts

@@ -1,9 +1,9 @@
 import { ElementType } from 'react';
 import { Props } from '../types';
 import { MoneyV2 } from '../../graphql/types/types';
-export interface MoneyProps {
+export interface MoneyProps<TTag> {
     /** An HTML tag to be rendered as the base element wrapper. The default is `div`. */
-    as?: ElementType;
+    as?: TTag;
     /** A [`MoneyV2` object](/api/storefront/reference/common-objects/moneyv2). */
     data: MoneyV2;
 }
@@ -12,7 +12,7 @@ export interface MoneyProps {
  * [`MoneyV2` object](/api/storefront/reference/common-objects/moneyv2) according to the
  * `defaultLocale` in the `shopify.config.js` file.
  */
-export declare function Money<TTag extends ElementType>(props: Props<TTag> & MoneyProps): JSX.Element;
+export declare function Money<TTag extends ElementType>(props: Props<TTag> & MoneyProps<TTag>): JSX.Element;
 export declare namespace Money {
     var Fragment: string;
 }

package/dist/esnext/components/ProductMetafield/ProductMetafield.client.d.ts

@@ -1,7 +1,7 @@
 import { ElementType } from 'react';
 import { Props } from '../types';
 import { MetafieldProps } from '../Metafield/Metafield.client';
-export interface ProductMetafieldProps extends Omit<MetafieldProps, 'metafield'> {
+export interface ProductMetafieldProps<TTag> extends Omit<MetafieldProps<TTag>, 'metafield'> {
     /** A string corresponding to the [key](/api/storefront/reference/common-objects/metafield) of the product's
      * metafield.
      */
@@ -18,4 +18,4 @@ export interface ProductMetafieldProps extends Omit<MetafieldProps, 'metafield'>
  * [`Metafield`](/api/hydrogen/components/primitive/metafield) component with the product metafield.
  * It must be a descendent of a `ProductProvider` component.
  */
-export declare function ProductMetafield<TTag extends ElementType>(props: Props<TTag> & Omit<ProductMetafieldProps, 'data'>): JSX.Element | null;
+export declare function ProductMetafield<TTag extends ElementType>(props: Props<TTag> & Omit<ProductMetafieldProps<TTag>, 'data'>): JSX.Element | null;

package/dist/esnext/components/ProductPrice/ProductPrice.client.d.ts

@@ -1,7 +1,7 @@
 import { ElementType } from 'react';
 import { MoneyProps } from '../Money';
 import { Props } from '../types';
-export interface ProductPriceProps extends Omit<MoneyProps, 'data'> {
+export interface ProductPriceProps<TTag> extends Omit<MoneyProps<TTag>, 'data'> {
     /** The type of price. Valid values: `regular` (default) or `compareAt`. */
     priceType?: 'regular' | 'compareAt';
     /** The type of value. Valid values: `min` (default), `max` or `unit`. */
@@ -13,4 +13,4 @@ export interface ProductPriceProps extends Omit<MoneyProps, 'data'> {
  * The `ProductPrice` component renders a `Money` component with the product
  * [`priceRange`](/api/storefront/reference/products/productpricerange)'s `maxVariantPrice` or `minVariantPrice`, for either the regular price or compare at price range. It must be a descendent of the `ProductProvider` component.
  */
-export declare function ProductPrice<TTag extends ElementType>(props: Props<TTag> & ProductPriceProps): JSX.Element | null;
+export declare function ProductPrice<TTag extends ElementType>(props: Props<TTag> & ProductPriceProps<TTag>): JSX.Element | null;

package/dist/esnext/components/ProductTitle/ProductTitle.client.d.ts

@@ -9,5 +9,5 @@ export declare function ProductTitle<TTag extends ElementType = 'span'>(props: P
     /** An HTML tag to wrap the title. If not specified, then the
      * title is wrapped in a `span` element.
      */
-    as?: ElementType;
+    as?: TTag;
 }): JSX.Element | null;

package/dist/esnext/components/RawHtml/RawHtml.d.ts

@@ -1,12 +1,12 @@
 import { ElementType } from 'react';
 import { Props } from '../types';
-export interface RawHtmlProps {
+export interface RawHtmlProps<TTag> {
     /** An HTML string. */
     string: string;
     /** Whether the HTML string should be sanitized with `isomorphic-dompurify`. */
     unsanitized?: boolean;
     /** An HTML tag to be rendered as the base element wrapper. The default is `div`. */
-    as?: ElementType;
+    as?: TTag;
 }
 /**
  * The `RawHtml` component renders an HTML string as HTML DOM elements. This should be used for
@@ -16,4 +16,4 @@ export interface RawHtmlProps {
  * [isomorphic-dompurify](https://github.com/kkomelin/isomorphic-dompurify) by default.
  * To keep the text unsanitized, set the `unsanitized` prop to `true`.
  */
-export declare function RawHtml<TTag extends ElementType>(props: Props<TTag> & RawHtmlProps): JSX.Element;
+export declare function RawHtml<TTag extends ElementType>(props: Props<TTag> & RawHtmlProps<TTag>): JSX.Element;

package/dist/esnext/components/Seo/ProductSeo.client.js

@@ -20,7 +20,9 @@ export function ProductSeo({ url, title, description, seo, vendor, featuredImage
         },
         url,
     };
-    productSchema.image = featuredImage.url;
+    if (featuredImage) {
+        productSchema.image = featuredImage.url;
+    }
     if (variants.edges.length > 0) {
         const firstVariant = variants.edges[0].node;
         firstVariantPrice = firstVariant.priceV2;

package/dist/esnext/components/Seo/types.d.ts

@@ -32,7 +32,7 @@ export interface Product {
         description?: Description;
     };
     vendor: string;
-    featuredImage: Image;
+    featuredImage?: Image;
     variants: {
         edges: {
             node: {

package/dist/esnext/components/UnitPrice/UnitPrice.client.d.ts

@@ -1,19 +1,19 @@
 import { ElementType } from 'react';
 import { Props } from '../types';
 import { UnitPriceMeasurement, MoneyV2 } from '../../graphql/types/types';
-export interface UnitPriceProps {
+export interface UnitPriceProps<TTag> {
     /** A [`MoneyV2` object](/api/storefront/reference/common-objects/moneyv2). */
     data: MoneyV2;
     /** A [`UnitPriceMeasurement` object](/api/storefront/reference/products/unitpricemeasurement). */
     measurement: UnitPriceMeasurement;
     /** An HTML tag to be rendered as the base element wrapper. The default is `div`. */
-    as?: ElementType;
+    as?: TTag;
 }
 /**
  * The `UnitPrice` component renders a string with a [UnitPrice](/themes/pricing-payments/unit-pricing) as the
  * [Storefront API's `MoneyV2` object](/api/storefront/reference/common-objects/moneyv2) with a reference unit from the [Storefront API's `UnitPriceMeasurement` object](/api/storefront/reference/products/unitpricemeasurement).
  */
-export declare function UnitPrice<TTag extends ElementType>(props: Props<TTag> & UnitPriceProps): JSX.Element;
+export declare function UnitPrice<TTag extends ElementType>(props: Props<TTag> & UnitPriceProps<TTag>): JSX.Element;
 export declare namespace UnitPrice {
     var Fragment: string;
 }

package/dist/esnext/entry-client.js

@@ -1,19 +1,22 @@
-import React, { Suspense, useState } from 'react';
-// @ts-ignore
+import React, { Suspense, useState, StrictMode, Fragment, } from 'react';
+// @ts-expect-error hydrateRoot isn't on the TS types yet, but we're using React 18 so it exists
 import { hydrateRoot } from 'react-dom';
 import { ErrorBoundary } from 'react-error-boundary';
 import { useServerResponse } from './framework/Hydration/rsc';
 import { ServerStateProvider } from './client';
 import { Router } from './foundation/Router/Router.client';
-const renderHydrogen = async (ClientWrapper) => {
+const renderHydrogen = async (ClientWrapper, config) => {
     const root = document.getElementById('root');
     if (!root) {
         console.error(`Could not find a root element <div id="root"></div> to render.`);
         return;
     }
-    hydrateRoot(root, React.createElement(ErrorBoundary, { FallbackComponent: Error },
-        React.createElement(Suspense, { fallback: null },
-            React.createElement(Content, { clientWrapper: ClientWrapper }))));
+    // default to StrictMode on, unless explicitly turned off
+    const RootComponent = (config === null || config === void 0 ? void 0 : config.strictMode) !== false ? StrictMode : Fragment;
+    hydrateRoot(root, React.createElement(RootComponent, null,
+        React.createElement(ErrorBoundary, { FallbackComponent: Error },
+            React.createElement(Suspense, { fallback: null },
+                React.createElement(Content, { clientWrapper: ClientWrapper })))));
 };
 export default renderHydrogen;
 function Content({ clientWrapper: ClientWrapper = ({ children }) => children, }) {

package/dist/esnext/foundation/ServerRequestProvider/ServerRequestProvider.js

@@ -96,7 +96,14 @@ export function preloadRequestCacheData(request, preloadQueries) {
                     promise = preloadQuery.fetcher().then((r) => {
                         data = { data: r };
                         collectQueryTimings(request, preloadQuery.key, 'resolved', getTime() - startApiTime);
-                    }, (e) => (data = { error: e }));
+                    }, (e) => {
+                        // The preload query failed for some reason:
+                        // On Cloudfare, this happens when a Cache item has expired at max-age
+                        //
+                        // We need to remove this entry from cache so that render cycle will retry on its own
+                        cache.delete(cacheKey);
+                        collectQueryTimings(request, preloadQuery.key, 'expired', getTime() - startApiTime);
+                    });
                 }
                 return promise;
             });

package/dist/esnext/foundation/useQuery/hooks.d.ts

@@ -1,22 +1,32 @@
 import type { CachingStrategy, PreloadOptions, QueryKey } from '../../types';
 export interface HydrogenUseQueryOptions {
+    /** The [caching strategy](/custom-storefronts/hydrogen/framework/cache#caching-strategies) to help you
+     * determine which cache control header to set.
+     */
     cache?: CachingStrategy;
+    /** Whether to [preload the query](/custom-storefronts/hydrogen/framework/preloaded-queries).
+     * Defaults to `false`. Specify `true` to preload the query for the URL or `'*'`
+     * to preload the query for all requests.
+     */
     preload?: PreloadOptions;
 }
 /**
- * The `useQuery` hook is a wrapper around Suspense calls and
- * global runtime's Cache if it exists.
- * It supports Suspense calls on the server and on the client.
+ * The `useQuery` hook executes an asynchronous operation like `fetch` in a way that
+ * supports [Suspense](https://reactjs.org/docs/concurrent-mode-suspense.html). It's based
+ * on [react-query](https://react-query.tanstack.com/reference/useQuery). You can use this
+ * hook to call any third-party APIs.
  */
 export declare function useQuery<T>(
 /** A string or array to uniquely identify the current query. */
 key: QueryKey, 
 /** An asynchronous query function like `fetch` which returns data. */
 queryFn: () => Promise<T>, 
-/** Options including `cache` to manage the cache behavior of the sub-request. */
+/** The options to manage the cache behavior of the sub-request. */
 queryOptions?: HydrogenUseQueryOptions): {
     data?: undefined;
-    error: Response;
+    error: Response; /**
+     * Attempt to read the query from cache. If it doesn't exist or if it's stale, regenerate it.
+     */
 } | {
     data: T;
     error?: undefined;

package/dist/esnext/foundation/useQuery/hooks.js

@@ -3,16 +3,17 @@ import { deleteItemFromCache, generateSubRequestCacheControlHeader, getItemFromC
 import { runDelayedFunction } from '../../framework/runtime';
 import { useRequestCacheData, useServerRequest } from '../ServerRequestProvider';
 /**
- * The `useQuery` hook is a wrapper around Suspense calls and
- * global runtime's Cache if it exists.
- * It supports Suspense calls on the server and on the client.
+ * The `useQuery` hook executes an asynchronous operation like `fetch` in a way that
+ * supports [Suspense](https://reactjs.org/docs/concurrent-mode-suspense.html). It's based
+ * on [react-query](https://react-query.tanstack.com/reference/useQuery). You can use this
+ * hook to call any third-party APIs.
  */
 export function useQuery(
 /** A string or array to uniquely identify the current query. */
 key, 
 /** An asynchronous query function like `fetch` which returns data. */
 queryFn, 
-/** Options including `cache` to manage the cache behavior of the sub-request. */
+/** The options to manage the cache behavior of the sub-request. */
 queryOptions) {
     const request = useServerRequest();
     const withCacheIdKey = ['__QUERY_CACHE_ID__', ...key];

package/dist/esnext/framework/Hydration/ServerComponentRequest.server.js

@@ -100,7 +100,10 @@ function saveToPreloadAllPreload(query) {
  */
 function getUrlFromNodeRequest(request) {
     var _a;
+    const url = (_a = request.originalUrl) !== null && _a !== void 0 ? _a : request.url;
+    if (url && !url.startsWith('/'))
+        return url;
     // TODO: Find out how to determine https from `request` object without forwarded proto
     const secure = request.headers['x-forwarded-proto'] === 'https';
-    return new URL(`${secure ? 'https' : 'http'}://${request.headers.host + ((_a = request.originalUrl) !== null && _a !== void 0 ? _a : request.url)}`).toString();
+    return new URL(`${secure ? 'https' : 'http'}://${request.headers.host + url}`).toString();
 }

package/dist/esnext/framework/plugins/vite-plugin-platform-entry.js

@@ -43,7 +43,7 @@ export default () => {
         },
         generateBundle(options, bundle) {
             if (config.build.ssr) {
-                const [[key, value]] = Object.entries(bundle);
+                const [key, value] = Object.entries(bundle).find(([, value]) => value.type === 'chunk' && value.isEntry);
                 delete bundle[key];
                 value.fileName = SSR_BUNDLE_NAME;
                 bundle[SSR_BUNDLE_NAME] = value;

package/dist/esnext/hooks/useProductOptions/useProductOptions.d.ts

@@ -4,7 +4,7 @@ import { GraphQLConnection } from '../../types';
  * The `useProductOptions` hook returns an object that enables you to keep track of the
  * selected variant and/or selling plan state, as well as callbacks for modifying the state.
  */
-export declare function useProductOptions({ variants: variantsConnection, sellingPlanGroups: sellingPlanGroupsConnection, initialVariantId, }: {
+export declare function useProductOptions({ variants: variantsConnection, sellingPlanGroups: sellingPlanGroupsConnection, initialVariantId: explicitVariantId, }: {
     /** The product's `VariantConnection`. */
     variants?: GraphQLConnection<Variant>;
     /** The product's `SellingPlanGroups`. */

package/dist/esnext/hooks/useProductOptions/useProductOptions.js

@@ -5,18 +5,21 @@ import { getOptions, getSelectedVariant } from './helpers';
  * The `useProductOptions` hook returns an object that enables you to keep track of the
  * selected variant and/or selling plan state, as well as callbacks for modifying the state.
  */
-export function useProductOptions({ variants: variantsConnection, sellingPlanGroups: sellingPlanGroupsConnection, initialVariantId, }) {
+export function useProductOptions({ variants: variantsConnection, sellingPlanGroups: sellingPlanGroupsConnection, initialVariantId: explicitVariantId, }) {
     // The flattened variants
     const variants = useMemo(() => (variantsConnection ? flattenConnection(variantsConnection) : []), [variantsConnection]);
     // All the options available for a product, based on all the variants
     const options = useMemo(() => getOptions(variants), [variants]);
+    const initialVariantId = explicitVariantId === null
+        ? explicitVariantId
+        : variants.find((variant) => variant.id === explicitVariantId) ||
+            variants.find((variant) => variant.availableForSale) ||
+            variants[0];
     /**
      * Track the selectedVariant within the hook. If `initialVariantId`
      * is passed, use that as an initial value.
      */
-    const [selectedVariant, setSelectedVariant] = useState(initialVariantId == null
-        ? initialVariantId
-        : variants.find((variant) => variant.id === initialVariantId));
+    const [selectedVariant, setSelectedVariant] = useState(initialVariantId);
     /**
      * Track the selectedOptions within the hook. If a `initialVariantId`
      * is passed, use that to select initial options.
@@ -34,10 +37,7 @@ export function useProductOptions({ variants: variantsConnection, sellingPlanGro
      * values.
      */
     useEffect(() => {
-        const selectedVariant = initialVariantId == null
-            ? initialVariantId
-            : variants.find((variant) => variant.id === initialVariantId);
-        setSelectedVariant(selectedVariant);
+        setSelectedVariant(initialVariantId);
         const selectedOptions = (selectedVariant === null || selectedVariant === void 0 ? void 0 : selectedVariant.selectedOptions)
             ? selectedVariant.selectedOptions.reduce((memo, optionSet) => {
                 memo[optionSet.name] = optionSet.value;

package/dist/esnext/hooks/useShopQuery/hooks.d.ts

@@ -15,10 +15,15 @@ export declare function useShopQuery<T>({ query, variables, cache, locale, prelo
     query?: ASTNode | string;
     /** An object of the variables for the GraphQL query. */
     variables?: Record<string, any>;
-    /** An object containing cache-control options for the sub-request. */
+    /** The [caching strategy](/custom-storefronts/hydrogen/framework/cache#caching-strategies) to
+     * help you determine which cache control header to set.
+     */
     cache?: CachingStrategy;
     /** A string corresponding to a valid locale identifier like `en-us` used to make the request. */
     locale?: string;
-    /** Whether to preload this query */
+    /** Whether to[preload the query](/custom-storefronts/hydrogen/framework/preloaded-queries).
+     * Defaults to `false`. Specify `true` to preload the query for the URL or `'*'`
+     * to preload the query for all requests.
+     */
     preload?: PreloadOptions;
 }): UseShopQueryResponse<T>;

package/dist/esnext/types.d.ts

@@ -41,8 +41,10 @@ export declare type ServerHandlerConfig = {
 };
 export declare type ClientHandlerConfig = {
     shopifyConfig: ShopifyConfig;
+    /** React's StrictMode is on by default for your client side app; if you want to turn it off (not recommended), you can pass `false` */
+    strictMode?: boolean;
 };
-export declare type ClientHandler = (App: any, config: ClientHandlerConfig) => Promise<void>;
+export declare type ClientHandler = (App: React.ElementType, config: ClientHandlerConfig) => Promise<void>;
 export interface GraphQLConnection<T> {
     edges?: {
         node: T;

package/dist/esnext/utilities/log/log-query-timeline.d.ts

@@ -1,7 +1,7 @@
 import { ServerComponentRequest } from '../../framework/Hydration/ServerComponentRequest.server';
 import { QueryKey } from '../../types';
 import type { RenderType } from './log';
-export declare type TimingType = 'requested' | 'resolved' | 'rendered' | 'preload';
+export declare type TimingType = 'requested' | 'resolved' | 'rendered' | 'preload' | 'expired';
 export declare type QueryTiming = {
     name: string;
     timingType: TimingType;

package/dist/esnext/utilities/log/log-query-timeline.js

@@ -9,6 +9,7 @@ const TIMING_MAPPING = {
     rendered: 'Rendered',
     resolved: 'Resolved',
     preload: 'Preload',
+    expired: 'Expired',
 };
 export function collectQueryTimings(request, queryKey, timingType, duration) {
     request.ctx.queryTimings.push({
@@ -31,7 +32,6 @@ export function logQueryTimings(type, request) {
         const detectMultipleDataLoad = {};
         let suspenseWaterfallDetectedCount = 0;
         queryList.forEach((query, index) => {
-            var _a;
             if (query.timingType === 'requested' || query.timingType === 'preload') {
                 detectSuspenseWaterfall[query.name] = true;
             }
@@ -44,8 +44,9 @@ export function logQueryTimings(type, request) {
                     : 1;
             }
             const loadColor = query.timingType === 'preload' ? green : color;
-            log.debug(color(`│ ${`${(query.timestamp - requestStartTime).toFixed(2)}ms`.padEnd(10)} ${loadColor(TIMING_MAPPING[query.timingType].padEnd(10))} ${query.name}${query.timingType === 'resolved'
-                ? ` (Took ${(_a = query.duration) === null || _a === void 0 ? void 0 : _a.toFixed(2)}ms)`
+            const duration = query.duration;
+            log.debug(color(`│ ${`${(query.timestamp - requestStartTime).toFixed(2)}ms`.padEnd(10)} ${loadColor(TIMING_MAPPING[query.timingType].padEnd(10))} ${query.name}${query.timingType === 'resolved' || query.timingType === 'expired'
+                ? ` (Took ${duration === null || duration === void 0 ? void 0 : duration.toFixed(2)}ms)`
                 : ''}`));
             // SSR + RSC render path generates 2 `load` and `render` for each query
             // We want to avoid falsely identifying a suspense waterfall near the end

package/dist/esnext/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "0.11.0";
+export declare const LIB_VERSION = "0.11.1";

package/dist/esnext/version.js

@@ -1 +1 @@
-export const LIB_VERSION = '0.11.0';
+export const LIB_VERSION = '0.11.1';

package/dist/node/foundation/ServerRequestProvider/ServerRequestProvider.js

@@ -121,7 +121,14 @@ function preloadRequestCacheData(request, preloadQueries) {
                     promise = preloadQuery.fetcher().then((r) => {
                         data = { data: r };
                         (0, log_1.collectQueryTimings)(request, preloadQuery.key, 'resolved', (0, timing_1.getTime)() - startApiTime);
-                    }, (e) => (data = { error: e }));
+                    }, (e) => {
+                        // The preload query failed for some reason:
+                        // On Cloudfare, this happens when a Cache item has expired at max-age
+                        //
+                        // We need to remove this entry from cache so that render cycle will retry on its own
+                        cache.delete(cacheKey);
+                        (0, log_1.collectQueryTimings)(request, preloadQuery.key, 'expired', (0, timing_1.getTime)() - startApiTime);
+                    });
                 }
                 return promise;
             });

package/dist/node/framework/Hydration/ServerComponentRequest.server.js

@@ -104,7 +104,10 @@ function saveToPreloadAllPreload(query) {
  */
 function getUrlFromNodeRequest(request) {
     var _a;
+    const url = (_a = request.originalUrl) !== null && _a !== void 0 ? _a : request.url;
+    if (url && !url.startsWith('/'))
+        return url;
     // TODO: Find out how to determine https from `request` object without forwarded proto
     const secure = request.headers['x-forwarded-proto'] === 'https';
-    return new URL(`${secure ? 'https' : 'http'}://${request.headers.host + ((_a = request.originalUrl) !== null && _a !== void 0 ? _a : request.url)}`).toString();
+    return new URL(`${secure ? 'https' : 'http'}://${request.headers.host + url}`).toString();
 }

package/dist/node/framework/plugins/vite-plugin-platform-entry.js

@@ -48,7 +48,7 @@ exports.default = () => {
         },
         generateBundle(options, bundle) {
             if (config.build.ssr) {
-                const [[key, value]] = Object.entries(bundle);
+                const [key, value] = Object.entries(bundle).find(([, value]) => value.type === 'chunk' && value.isEntry);
                 delete bundle[key];
                 value.fileName = SSR_BUNDLE_NAME;
                 bundle[SSR_BUNDLE_NAME] = value;

package/dist/node/types.d.ts

@@ -41,8 +41,10 @@ export declare type ServerHandlerConfig = {
 };
 export declare type ClientHandlerConfig = {
     shopifyConfig: ShopifyConfig;
+    /** React's StrictMode is on by default for your client side app; if you want to turn it off (not recommended), you can pass `false` */
+    strictMode?: boolean;
 };
-export declare type ClientHandler = (App: any, config: ClientHandlerConfig) => Promise<void>;
+export declare type ClientHandler = (App: React.ElementType, config: ClientHandlerConfig) => Promise<void>;
 export interface GraphQLConnection<T> {
     edges?: {
         node: T;

package/dist/node/utilities/log/log-query-timeline.d.ts

@@ -1,7 +1,7 @@
 import { ServerComponentRequest } from '../../framework/Hydration/ServerComponentRequest.server';
 import { QueryKey } from '../../types';
 import type { RenderType } from './log';
-export declare type TimingType = 'requested' | 'resolved' | 'rendered' | 'preload';
+export declare type TimingType = 'requested' | 'resolved' | 'rendered' | 'preload' | 'expired';
 export declare type QueryTiming = {
     name: string;
     timingType: TimingType;

package/dist/node/utilities/log/log-query-timeline.js

@@ -12,6 +12,7 @@ const TIMING_MAPPING = {
     rendered: 'Rendered',
     resolved: 'Resolved',
     preload: 'Preload',
+    expired: 'Expired',
 };
 function collectQueryTimings(request, queryKey, timingType, duration) {
     request.ctx.queryTimings.push({
@@ -35,7 +36,6 @@ function logQueryTimings(type, request) {
         const detectMultipleDataLoad = {};
         let suspenseWaterfallDetectedCount = 0;
         queryList.forEach((query, index) => {
-            var _a;
             if (query.timingType === 'requested' || query.timingType === 'preload') {
                 detectSuspenseWaterfall[query.name] = true;
             }
@@ -48,8 +48,9 @@ function logQueryTimings(type, request) {
                     : 1;
             }
             const loadColor = query.timingType === 'preload' ? kolorist_1.green : color;
-            log.debug(color(`│ ${`${(query.timestamp - requestStartTime).toFixed(2)}ms`.padEnd(10)} ${loadColor(TIMING_MAPPING[query.timingType].padEnd(10))} ${query.name}${query.timingType === 'resolved'
-                ? ` (Took ${(_a = query.duration) === null || _a === void 0 ? void 0 : _a.toFixed(2)}ms)`
+            const duration = query.duration;
+            log.debug(color(`│ ${`${(query.timestamp - requestStartTime).toFixed(2)}ms`.padEnd(10)} ${loadColor(TIMING_MAPPING[query.timingType].padEnd(10))} ${query.name}${query.timingType === 'resolved' || query.timingType === 'expired'
+                ? ` (Took ${duration === null || duration === void 0 ? void 0 : duration.toFixed(2)}ms)`
                 : ''}`));
             // SSR + RSC render path generates 2 `load` and `render` for each query
             // We want to avoid falsely identifying a suspense waterfall near the end

package/package.json

@@ -7,7 +7,7 @@
   "engines": {
     "node": ">=14"
   },
-  "version": "0.11.0",
+  "version": "0.11.1",
   "description": "Modern custom Shopify storefronts",
   "license": "MIT",
   "main": "dist/esnext/index.js",
@@ -115,6 +115,5 @@
     "react-helmet-async": "^1.2.3",
     "vite-plugin-inspect": "^0.3.6",
     "web-streams-polyfill": "^3.2.0"
-  },
-  "gitHead": "57d5e40c2193780639d765aa777cb8670bfbca40"
+  }
 }

package/LICENSE.md

@@ -1,7 +0,0 @@
-Copyright 2021-present, Shopify Inc.
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.