@shopify/hydrogen 0.13.2 → 0.16.0

package/CHANGELOG.md

@@ -1,5 +1,149 @@
 # Changelog
 
+## 0.16.0
+
+### Patch Changes
+
+- [#1082](https://github.com/Shopify/hydrogen/pull/1082) [`bd14340c`](https://github.com/Shopify/hydrogen/commit/bd14340c3099a0bf375a5879410cdf0697ed22f6) Thanks [@jplhomer](https://github.com/jplhomer)! - Update `useUrl()` to allow a developer to subscribe to a reactive version of the current router location.
+
+  Example:
+
+  ```jsx
+  import {useUrl} from '@shopify/hydrogen/client';
+
+  function MyClientComponent() {
+    const url = useUrl();
+
+    useEffect(() => {
+      // Record navigation, analytics, etc
+    }, [url]);
+  }
+  ```
+
+* [#1075](https://github.com/Shopify/hydrogen/pull/1075) [`05dea552`](https://github.com/Shopify/hydrogen/commit/05dea552c90862a125b5111993003355a019b556) Thanks [@jplhomer](https://github.com/jplhomer)! - Properly set buyer IP and secret token for API Route queryShop helper
+
+## 0.15.0
+
+### Minor Changes
+
+- [#983](https://github.com/Shopify/hydrogen/pull/983) [`52af261b`](https://github.com/Shopify/hydrogen/commit/52af261ba2bf6ed08e232b9fb2d75e69905f4cc6) Thanks [@jplhomer](https://github.com/jplhomer)! - Introduce Suspense-friendly `fetchSync` API for server and client components.
+
+  When using `fetchSync` in server components, you provide options for caching and preloading. This is similar to the [`useQuery` hook](<[/api/hydrogen/hooks/global/useQuery](https://shopify.dev/api/hydrogen/hooks/global/usequery)>):
+
+  ```jsx
+  import {fetchSync, CacheMinutes} from '@shopify/hydrogen';
+  import {Suspense} from 'react';
+
+  export function MyServerComponent() {
+    return (
+      <Suspense fallback="Loading...">
+        <MyThings />
+      </Suspense>
+    );
+  }
+
+  function MyThings() {
+    const things = fetchSync('https://3p.api.com/things.json', {
+      preload: true,
+      cache: CacheMinutes(),
+    }).json();
+
+    return <h2>{things.title}</h2>;
+  }
+  ```
+
+  When using `fetchSync` in client components, you cannot provide options for caching and preloading. You must import `fetchSync` from `@shopify/hydrogen/client`:
+
+  ```jsx
+  import {fetchSync} from '@shopify/hydrogen/client';
+  import {Suspense} from 'react';
+
+  export function MyClientComponent() {
+    return (
+      <Suspense fallback="Loading...">
+        <MyThings />
+      </Suspense>
+    );
+  }
+
+  function MyThings() {
+    const things = fetchSync('https://3p.api.com/things.json').json();
+
+    return <h2>{things.title}</h2>;
+  }
+  ```
+
+* [#890](https://github.com/Shopify/hydrogen/pull/890) [`a4c6d6c4`](https://github.com/Shopify/hydrogen/commit/a4c6d6c4d31337cecbd4d5afb76887bcd31ceb65) Thanks [@wizardlyhel](https://github.com/wizardlyhel)! - Analytics instrumentation - this provides integration points for both server
+  and client side analytics instrumentations
+
+  - [Usage documentation](https://shopify.dev/custom-storefronts/hydrogen/framework/analytics)
+
+### Patch Changes
+
+- [#1061](https://github.com/Shopify/hydrogen/pull/1061) [`a4aa3887`](https://github.com/Shopify/hydrogen/commit/a4aa3887be9f448ec1f4322fadb9821e0d19a0b5) Thanks [@jplhomer](https://github.com/jplhomer)! - Support script tags in index.html that contain line breaks
+
+* [#1057](https://github.com/Shopify/hydrogen/pull/1057) [`06d92ddc`](https://github.com/Shopify/hydrogen/commit/06d92ddc44e03d37d2dd8a9bbeaa5fab4c4bbbd1) Thanks [@frandiox](https://github.com/frandiox)! - Ability to concatenate requests in API route handlers without leaving the server by returning a new Request instance.
+
+  ```jsx
+  // src/routes/my-page.server.jsx
+
+  export async function api(request) {
+    if (request.method === 'POST') {
+      // do some work here...
+    }
+
+    return new Request(request.url, {method: 'GET'});
+  }
+
+  export default function Page() {
+    return (
+      <form action="/my-page" method="POST">
+        ...
+      </form>
+    );
+  }
+  ```
+
+  In the previous example, a POST request to `/my-page` would run the API handler and automatically continue with the server component rendering (GET). This is useful for handling HTML forms without waterfall requests.
+
+- [#1049](https://github.com/Shopify/hydrogen/pull/1049) [`b88a885d`](https://github.com/Shopify/hydrogen/commit/b88a885d6b062209497a97d8ce7bcd438787d53c) Thanks [@wizardlyhel](https://github.com/wizardlyhel)! - Support sub request cache control header `stale-while-revalidate` everywhere
+
+* [#1047](https://github.com/Shopify/hydrogen/pull/1047) [`5268bf85`](https://github.com/Shopify/hydrogen/commit/5268bf85f61f8abf0e97788b7ae925ad4f3183b2) Thanks [@jplhomer](https://github.com/jplhomer)! - Restore scroll position when navigating using the back and forward buttons.
+
+- [#1062](https://github.com/Shopify/hydrogen/pull/1062) [`cc172ae7`](https://github.com/Shopify/hydrogen/commit/cc172ae778bad0d654adcd2f41d4a548d1d94a0a) Thanks [@jplhomer](https://github.com/jplhomer)! - Fix encoding of quotes in CSS Modules which caused hydration errors
+
+* [#1046](https://github.com/Shopify/hydrogen/pull/1046) [`3947d53a`](https://github.com/Shopify/hydrogen/commit/3947d53a99868a1e218bfab958b824ce0484615a) Thanks [@michenly](https://github.com/michenly)! - Fixed server Cookie bug where initializing with empty string will resulted in 1 item in the Cookies Map.
+
+- [#1059](https://github.com/Shopify/hydrogen/pull/1059) [`401f329d`](https://github.com/Shopify/hydrogen/commit/401f329d331bebc4842204d4df39c4dd6797b4e1) Thanks [@frandiox](https://github.com/frandiox)! - Fix link prefetch mismatch due to query-string
+
+* [#1072](https://github.com/Shopify/hydrogen/pull/1072) [`47c0c184`](https://github.com/Shopify/hydrogen/commit/47c0c18411eb20fa6652a981b09fd65cbed38304) Thanks [@michenly](https://github.com/michenly)! - Improve type for ShopifyContextValue to be based on ShopifyConfig.
+
+## 0.14.0
+
+### Minor Changes
+
+- [#1028](https://github.com/Shopify/hydrogen/pull/1028) [`ba174588`](https://github.com/Shopify/hydrogen/commit/ba174588d8f4a9f1054779a9bf32a92e8d2c921c) Thanks [@michenly](https://github.com/michenly)! - Starting from SF API version `2022-04`, the preferred way to request translatable resources is using the `@inContext` directive. See the [API docs](https://shopify.dev/api/examples/multiple-languages#retrieve-translations-with-the-storefront-api) on how to do this and which resources have translatable properties.
+
+  This causes a breaking change to the `useShopQuery` hook. The `locale` property has been removed from the argument object; `Accept-Language` is no longer being send with every request, and we are no longer using locale as part of the cache key.
+
+  The `useShop` hook will now return the `languageCode` key, which is the first two characters of the existing `locale` key.
+
+  Both `locale` & `languageCode` values are also now capitalized to make it easier to pass into a GraphQL `@inContext` directive.
+
+* [#1020](https://github.com/Shopify/hydrogen/pull/1020) [`e9529bc8`](https://github.com/Shopify/hydrogen/commit/e9529bc81410e0d99f9d3dbdb138ae61d00f876b) Thanks [@jplhomer](https://github.com/jplhomer)! - Preload `Link` URLs by default when a user signals intent to visit the URL. This includes hovering or focusing on the URL. To disable preloading, pass `<Link preload={false} />` to the component.
+
+### Patch Changes
+
+- [#1017](https://github.com/Shopify/hydrogen/pull/1017) [`4c87fb63`](https://github.com/Shopify/hydrogen/commit/4c87fb639a79da883f99c58acde0d17c713c7620) Thanks [@frandiox](https://github.com/frandiox)! - Do not cache Storefront API responses that contain GraphQL errors (amend previous fix).
+
+* [#1039](https://github.com/Shopify/hydrogen/pull/1039) [`3a297862`](https://github.com/Shopify/hydrogen/commit/3a29786202947fab0bfe876042b37a91923ed637) Thanks [@frandiox](https://github.com/frandiox)! - Update to Vite 2.9
+
+- [#1026](https://github.com/Shopify/hydrogen/pull/1026) [`836b064d`](https://github.com/Shopify/hydrogen/commit/836b064d1648fb1a9f209a08a82ee5c20f7dfba9) Thanks [@frehner](https://github.com/frehner)! - Updated the Typescript types and GraphQL schema to the newest updates from Storefront API 2022-04. Of note in this update is the ability to skip `edges` and go directly to `node`, for example: `product.nodes[0]` instead of `product.edges[0].node`
+
+* [#1032](https://github.com/Shopify/hydrogen/pull/1032) [`03488083`](https://github.com/Shopify/hydrogen/commit/034880833dc500f66f9b67417c00099c283dfa67) Thanks [@jplhomer](https://github.com/jplhomer)! - Catch hydration errors related to experimental server components bugs and prevent them from being logged in production.
+
+- [#1037](https://github.com/Shopify/hydrogen/pull/1037) [`13376efb`](https://github.com/Shopify/hydrogen/commit/13376efbe4db93efd705b6900a6198708bc37e69) Thanks [@jplhomer](https://github.com/jplhomer)! - Use new header for private Storefront token
+
 ## 0.13.2
 
 ### Patch Changes

package/dist/esnext/client.d.ts

@@ -2,8 +2,12 @@ export * from './components';
 export * from './hooks';
 export * from './foundation/useServerState';
 export * from './foundation/useShop';
+export * from './foundation/useUrl';
 export * from './foundation/ServerStateProvider';
 export { Head } from './foundation/Head';
 export * from './utilities';
+export { ClientAnalytics } from './foundation/Analytics';
 export { useRouteParams } from './foundation/useRouteParams/useRouteParams';
 export { useNavigate } from './foundation/useNavigate/useNavigate';
+export { fetchSync } from './foundation/fetchSync/client/fetchSync';
+export { suspendFunction, preloadFunction } from './utilities/suspense';

package/dist/esnext/client.js

@@ -2,8 +2,12 @@ export * from './components';
 export * from './hooks';
 export * from './foundation/useServerState';
 export * from './foundation/useShop';
+export * from './foundation/useUrl';
 export * from './foundation/ServerStateProvider';
 export { Head } from './foundation/Head';
 export * from './utilities';
+export { ClientAnalytics } from './foundation/Analytics';
 export { useRouteParams } from './foundation/useRouteParams/useRouteParams';
 export { useNavigate } from './foundation/useNavigate/useNavigate';
+export { fetchSync } from './foundation/fetchSync/client/fetchSync';
+export { suspendFunction, preloadFunction } from './utilities/suspense';

package/dist/esnext/components/CartProvider/CartProvider.client.js

@@ -5,6 +5,7 @@ import { useCartFetch } from './hooks';
 import { CartContext } from './context';
 import { CART_ID_STORAGE_KEY } from './constants';
 import { useServerState } from '../../foundation/useServerState';
+import { ClientAnalytics } from '../../foundation/Analytics';
 function cartReducer(state, action) {
     switch (action.type) {
         case 'cartFetch': {
@@ -200,6 +201,12 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
             });
         }
         if ((_b = data === null || data === void 0 ? void 0 : data.cartCreate) === null || _b === void 0 ? void 0 : _b.cart) {
+            if (cart.lines) {
+                ClientAnalytics.publish(ClientAnalytics.eventNames.ADD_TO_CART, true, {
+                    addedCartLines: cart.lines,
+                    cart: data.cartCreate.cart,
+                });
+            }
             dispatch({
                 type: 'resolve',
                 cart: cartFromGraphQL(data.cartCreate.cart),
@@ -228,6 +235,10 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
                 });
             }
             if ((_a = data === null || data === void 0 ? void 0 : data.cartLinesAdd) === null || _a === void 0 ? void 0 : _a.cart) {
+                ClientAnalytics.publish(ClientAnalytics.eventNames.ADD_TO_CART, true, {
+                    addedCartLines: lines,
+                    cart: data.cartLinesAdd.cart,
+                });
                 dispatch({
                     type: 'resolve',
                     cart: cartFromGraphQL(data.cartLinesAdd.cart),
@@ -256,6 +267,10 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
                 });
             }
             if ((_a = data === null || data === void 0 ? void 0 : data.cartLinesRemove) === null || _a === void 0 ? void 0 : _a.cart) {
+                ClientAnalytics.publish(ClientAnalytics.eventNames.REMOVE_FROM_CART, true, {
+                    removedCartLines: lines,
+                    cart: data.cartLinesRemove.cart,
+                });
                 dispatch({
                     type: 'resolve',
                     cart: cartFromGraphQL(data.cartLinesRemove.cart),
@@ -284,6 +299,10 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
                 });
             }
             if ((_a = data === null || data === void 0 ? void 0 : data.cartLinesUpdate) === null || _a === void 0 ? void 0 : _a.cart) {
+                ClientAnalytics.publish(ClientAnalytics.eventNames.UPDATE_CART, true, {
+                    updatedCartLines: lines,
+                    oldCart: state.cart,
+                });
                 dispatch({
                     type: 'resolve',
                     cart: cartFromGraphQL(data.cartLinesUpdate.cart),
@@ -396,6 +415,10 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
                 });
             }
             if ((_a = data === null || data === void 0 ? void 0 : data.cartDiscountCodesUpdate) === null || _a === void 0 ? void 0 : _a.cart) {
+                ClientAnalytics.publish(ClientAnalytics.eventNames.DISCOUNT_CODE_UPDATED, true, {
+                    updatedDiscountCodes: discountCodes,
+                    cart: data.cartDiscountCodesUpdate.cart,
+                });
                 dispatch({
                     type: 'resolve',
                     cart: cartFromGraphQL(data.cartDiscountCodesUpdate.cart),

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

@@ -0,0 +1 @@
+export default function DevTools(): JSX.Element | null;

package/dist/esnext/components/DevTools.js

@@ -0,0 +1,128 @@
+import React, { useEffect, useState, useCallback } from 'react';
+export default function DevTools() {
+    const [warnings, setWarnings] = useState(null);
+    const [open, setOpen] = useState(false);
+    const [activePanel, setActivePanel] = useState('warnings');
+    const toggleOpen = useCallback(() => setOpen((state) => !state), []);
+    const [hasMounted, setHasMounted] = React.useState(false);
+    useEffect(() => {
+        setHasMounted(true);
+        if (import.meta.hot) {
+            import.meta.hot.on('hydrogen', ({ type, data }) => {
+                if (type === 'warn') {
+                    setWarnings((state) => [...(state || []), data]);
+                }
+            });
+        }
+    }, []);
+    const perfData = performance.getEntriesByType('navigation');
+    const entry = perfData[0];
+    let activePanelContent = null;
+    switch (activePanel) {
+        case 'warnings':
+            const warningsMarkup = warnings
+                ? warnings.map((war, i) => React.createElement("li", { key: war + i }, war))
+                : null;
+            activePanelContent = (React.createElement(React.Fragment, null,
+                React.createElement(PanelHeading, null, "Overfetched graphQL fields"),
+                React.createElement("ul", { style: {
+                        fontFamily: 'monospace',
+                        paddingTop: '1em',
+                        fontSize: '0.9em',
+                    } }, warningsMarkup)));
+            break;
+        case 'network':
+            activePanelContent = (React.createElement(React.Fragment, null,
+                React.createElement(PanelHeading, null, "Metrics"),
+                React.createElement("ul", { style: {
+                        fontFamily: 'monospace',
+                        paddingTop: '1em',
+                        fontSize: '0.9em',
+                    } }, Object.entries(entry.toJSON())
+                    .filter(([key]) => ['duration', 'domInteractive'].includes(key))
+                    .map(([key, value]) => (React.createElement("li", { key: key },
+                    React.createElement("strong", null, key),
+                    " ",
+                    (value / 1000).toFixed(2),
+                    "s"))))));
+            break;
+    }
+    const buttonText = (React.createElement("svg", { style: {
+            height: '3em',
+            width: '3em',
+        }, width: "131", height: "130", viewBox: "0 0 131 130", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        React.createElement("path", { d: "M64.9548 106.281L27.1377 86.1894L40.0714 79.3723L54.6329 87.1049L66.851 80.6638L52.2895 72.9313L65.2231 66.0979L103.04 86.1894L90.1065 93.0064L76.35 85.6989L64.114 92.1563L77.8884 99.4638L64.9548 106.281Z", fill: "white" }),
+        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M65.2247 25L105.178 46.2267L90.105 54.1716L76.3488 46.8642L66.2525 52.1924L80.028 59.5005L64.9532 67.446L25 46.2196L40.0734 38.2748L54.6349 46.0073L64.713 40.6944L50.1533 32.9628L65.2247 25ZM54.4262 32.9673L68.9896 40.7008L54.6315 48.27L40.0699 40.5374L29.276 46.2267L64.9569 65.1833L75.7495 59.4947L61.9761 52.1878L76.3518 44.6012L90.1087 51.9088L100.902 46.2196L65.2221 27.2634L54.4262 32.9673Z", fill: "white" })));
+    if (import.meta.env.DEV && hasMounted) {
+        return (React.createElement("div", { style: {
+                position: 'fixed',
+                right: open ? 0 : '2em',
+                left: open ? 0 : '2em',
+                bottom: open ? 0 : '-2em',
+                borderRadius: open ? 0 : '2em',
+                top: '100%',
+                zIndex: 10000,
+                display: 'flex',
+                flexDirection: 'column',
+                overflow: 'hidden',
+                height: open ? '75%' : '4em',
+                transform: open ? 'translateY(-100%)' : 'translateY(-5em)',
+            } },
+            React.createElement("button", { style: {
+                    position: 'absolute',
+                    top: '0.35em',
+                    right: '1em',
+                    overflow: 'hidden',
+                    zIndex: 10,
+                }, onClick: toggleOpen }, buttonText),
+            React.createElement("div", { style: {
+                    overflow: 'scroll',
+                    color: 'white',
+                    height: '100%',
+                    padding: '2em',
+                    background: 'rgba(0, 0, 0, 0.95)',
+                    borderRadius: open ? 0 : '2em',
+                } },
+                React.createElement("div", { style: {
+                        position: 'absolute',
+                        padding: '1.2em 2em',
+                        top: 0,
+                        left: '-0.5em',
+                        right: 0,
+                        background: 'rgba(0, 0, 0, 0.95)',
+                        borderRadius: open ? 0 : '2em',
+                        display: 'flex',
+                        alignItems: 'center',
+                    } },
+                    warnings && warnings.length > 0 && (React.createElement("button", { onClick: () => {
+                            setOpen(true);
+                            setActivePanel('warnings');
+                        }, style: {
+                            margin: '0 0.5em',
+                            textDecoration: open && activePanel === 'warnings' ? 'underline' : 'none',
+                        } },
+                        "Warnings",
+                        ' ',
+                        warnings && (React.createElement("strong", { style: {
+                                borderRadius: '2em',
+                                padding: '.25em 0.5em',
+                                background: 'white',
+                                margin: '0 0.25em',
+                                color: 'black',
+                                textAlign: 'center',
+                            } }, warnings.length)))),
+                    React.createElement("button", { onClick: () => {
+                            setOpen(true);
+                            setActivePanel('network');
+                        }, disabled: activePanel === 'network', style: {
+                            margin: '0 0.5em',
+                            textDecoration: open && activePanel === 'network' ? 'underline' : 'none',
+                        } }, "Network")),
+                React.createElement("div", { style: { paddingTop: '2em' } }, activePanelContent))));
+    }
+    return null;
+}
+const PanelHeading = ({ children }) => (React.createElement("h1", { style: {
+        paddingTop: '1em',
+        fontWeight: 'bold',
+    } }, children));

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

@@ -8,6 +8,8 @@ export interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorEle
     clientState?: any;
     /** Whether to reload the whole document on navigation. */
     reloadDocument?: boolean;
+    /** Whether to prefetch the link source when the user signals intent. Defaults to `true`. For more information, refer to [Prefetching a link source](/custom-storefronts/hydrogen/framework/routes#prefetching-a-link-source). */
+    prefetch?: boolean;
 }
 /**
  * The `Link` component is used to navigate between routes. Because it renders an underlying `<a>` element, all
@@ -15,3 +17,7 @@ export interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorEle
  * For more information, refer to the [`<a>` element documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes).
  */
 export declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
+/**
+ * Credit: Remix's <Link> component.
+ */
+export declare function composeEventHandlers<EventType extends React.SyntheticEvent | Event>(theirHandler: ((event: EventType) => any) | undefined, ourHandler: (event: EventType) => any): (event: EventType) => any;

package/dist/esnext/components/Link/Link.client.js

@@ -1,7 +1,9 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useRouter } from '../../foundation/Router/BrowserRouter.client';
 import { createPath } from 'history';
 import { useNavigate } from '../../foundation/useNavigate/useNavigate';
+import { useServerState } from '../../foundation/useServerState';
+import { RSC_PATHNAME } from '../../constants';
 /**
  * The `Link` component is used to navigate between routes. Because it renders an underlying `<a>` element, all
  * properties available to the `<a>` element are also available to the `Link` component.
@@ -10,7 +12,13 @@ import { useNavigate } from '../../foundation/useNavigate/useNavigate';
 export const Link = React.forwardRef(function Link(props, ref) {
     const navigate = useNavigate();
     const { location } = useRouter();
-    const { reloadDocument, target, replace: _replace, to, onClick, clientState, } = props;
+    const [_, startTransition] = React.useTransition();
+    /**
+     * Inspired by Remix's Link component
+     */
+    const [shouldPrefetch, setShouldPrefetch] = useState(false);
+    const [maybePrefetch, setMaybePrefetch] = useState(false);
+    const { reloadDocument, target, replace: _replace, to, onClick, clientState, prefetch = true, } = props;
     const internalClick = useCallback((e) => {
         if (onClick)
             onClick(e);
@@ -28,8 +36,82 @@ export const Link = React.forwardRef(function Link(props, ref) {
             });
         }
     }, [reloadDocument, target, _replace, to, clientState, onClick, location]);
-    return (React.createElement("a", { ...without(props, ['to', 'replace', 'clientState', 'reloadDocument']), ref: ref, onClick: internalClick, href: props.to }, props.children));
+    const signalPrefetchIntent = () => {
+        /**
+         * startTransition to yield to more important updates
+         */
+        startTransition(() => {
+            if (prefetch) {
+                setMaybePrefetch(true);
+            }
+        });
+    };
+    const cancelPrefetchIntent = () => {
+        /**
+         * startTransition to yield to more important updates
+         */
+        startTransition(() => {
+            if (prefetch) {
+                setMaybePrefetch(false);
+            }
+        });
+    };
+    /**
+     * Wrapping `maybePrefetch` inside useEffect allows the user to quickly graze over
+     * a link without triggering a prefetch.
+     */
+    useEffect(() => {
+        if (maybePrefetch) {
+            const id = setTimeout(() => {
+                setShouldPrefetch(true);
+            }, 100);
+            return () => {
+                clearTimeout(id);
+            };
+        }
+    }, [maybePrefetch]);
+    const onMouseEnter = composeEventHandlers(props.onMouseEnter, signalPrefetchIntent);
+    const onMouseLeave = composeEventHandlers(props.onMouseLeave, cancelPrefetchIntent);
+    const onFocus = composeEventHandlers(props.onFocus, signalPrefetchIntent);
+    const onBlur = composeEventHandlers(props.onBlur, cancelPrefetchIntent);
+    const onTouchStart = composeEventHandlers(props.onTouchStart, signalPrefetchIntent);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("a", { ...without(props, [
+                'to',
+                'replace',
+                'clientState',
+                'reloadDocument',
+                'prefetch',
+            ]), ref: ref, onClick: internalClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur, onTouchStart: onTouchStart, href: props.to }, props.children),
+        shouldPrefetch && React.createElement(Prefetch, { pathname: to })));
 });
+function Prefetch({ pathname }) {
+    const { getProposedServerState } = useServerState();
+    const { location } = useRouter();
+    const newPath = createPath({ pathname });
+    if (pathname.startsWith('http') || newPath === createPath(location)) {
+        return null;
+    }
+    const newLocation = new URL(newPath, window.location.href);
+    const proposedServerState = getProposedServerState({
+        pathname: newLocation.pathname,
+        search: newLocation.search,
+    });
+    const href = `${RSC_PATHNAME}?state=` +
+        encodeURIComponent(JSON.stringify(proposedServerState));
+    return React.createElement("link", { rel: "prefetch", as: "fetch", href: href });
+}
+/**
+ * Credit: Remix's <Link> component.
+ */
+export function composeEventHandlers(theirHandler, ourHandler) {
+    return (event) => {
+        theirHandler === null || theirHandler === void 0 ? void 0 : theirHandler(event);
+        if (!event.defaultPrevented) {
+            ourHandler(event);
+        }
+    };
+}
 function isModifiedEvent(event) {
     return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
 }

package/dist/esnext/components/LocalizationProvider/LocalizationContext.client.d.ts

@@ -1,4 +1,4 @@
-import { LocalizationQuery } from './LocalizationQuery';
+import type { LocalizationQuery } from './LocalizationProvider.server';
 export declare type Localization = LocalizationQuery['localization'];
 export interface LocalizationContextValue {
     country?: Localization['country'];

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

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { PreloadOptions } from '../../types';
+import { Country, Currency } from '../../storefront-api-types';
 export interface LocalizationProviderProps {
     /** A `ReactNode` element. */
     children: ReactNode;
@@ -19,3 +20,18 @@ export interface LocalizationProviderProps {
  * `@inContext` directive as the `country` value.
  */
 export declare function LocalizationProvider(props: LocalizationProviderProps): JSX.Element;
+export declare type LocalizationQuery = {
+    __typename?: 'QueryRoot';
+} & {
+    localization: {
+        __typename?: 'Localization';
+    } & {
+        country: {
+            __typename?: 'Country';
+        } & Pick<Country, 'isoCode' | 'name'> & {
+            currency: {
+                __typename?: 'Currency';
+            } & Pick<Currency, 'isoCode'>;
+        };
+    };
+};

package/dist/esnext/components/LocalizationProvider/LocalizationProvider.server.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import LocalizationClientProvider from './LocalizationClientProvider.client';
+import { useShop } from '../../foundation/useShop';
 import { useShopQuery } from '../../hooks/useShopQuery';
 import { CacheDays } from '../../framework/CachingStrategy';
 /**
@@ -12,15 +13,19 @@ import { CacheDays } from '../../framework/CachingStrategy';
  * `@inContext` directive as the `country` value.
  */
 export function LocalizationProvider(props) {
+    const { languageCode } = useShop();
     const { data: { localization }, } = useShopQuery({
         query: query,
+        variables: { language: languageCode },
         cache: CacheDays(),
         preload: props.preload,
     });
     return (React.createElement(LocalizationClientProvider, { localization: localization }, props.children));
 }
-const query = `query Localization {
-  localization {
+const query = `
+query Localization($language: LanguageCode) 
+@inContext(language: $language) {
+   localization {
     country {
       isoCode
       name

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

@@ -5,8 +5,7 @@ import { TitleSeo } from './TitleSeo.client';
 import { DescriptionSeo } from './DescriptionSeo.client';
 import { TwitterSeo } from './TwitterSeo.client';
 export function DefaultPageSeo({ title, description, url, titleTemplate, lang, }) {
-    const { locale } = useShop();
-    const fallBacklang = locale.split(/[-_]/)[0];
+    const { languageCode: fallBacklang } = useShop();
     return (React.createElement(React.Fragment, null,
         React.createElement(Head, { defaultTitle: title !== null && title !== void 0 ? title : '', titleTemplate: titleTemplate !== null && titleTemplate !== void 0 ? titleTemplate : `%s - ${title}` },
             React.createElement("html", { lang: lang !== null && lang !== void 0 ? lang : fallBacklang }),

package/dist/esnext/constants.d.ts

@@ -1 +1,7 @@
 export declare const RSC_PATHNAME = "/__rsc";
+export declare const EVENT_PATHNAME = "/__event";
+export declare const EVENT_PATHNAME_REGEX: RegExp;
+export declare const OXYGEN_SECRET_TOKEN_ENVIRONMENT_VARIABLE = "SHOPIFY_STOREFRONT_API_SECRET_TOKEN";
+export declare const STOREFRONT_API_SECRET_TOKEN_HEADER = "Shopify-Storefront-Private-Token";
+export declare const STOREFRONT_API_PUBLIC_TOKEN_HEADER = "X-Shopify-Storefront-Access-Token";
+export declare const STOREFRONT_API_BUYER_IP_HEADER = "Shopify-Storefront-Buyer-IP";

package/dist/esnext/constants.js

@@ -1 +1,7 @@
 export const RSC_PATHNAME = '/__rsc';
+export const EVENT_PATHNAME = '/__event';
+export const EVENT_PATHNAME_REGEX = new RegExp(`^${EVENT_PATHNAME}\/`);
+export const OXYGEN_SECRET_TOKEN_ENVIRONMENT_VARIABLE = 'SHOPIFY_STOREFRONT_API_SECRET_TOKEN';
+export const STOREFRONT_API_SECRET_TOKEN_HEADER = 'Shopify-Storefront-Private-Token';
+export const STOREFRONT_API_PUBLIC_TOKEN_HEADER = 'X-Shopify-Storefront-Access-Token';
+export const STOREFRONT_API_BUYER_IP_HEADER = 'Shopify-Storefront-Buyer-IP';

package/dist/esnext/entry-client.js

@@ -4,6 +4,7 @@ import { hydrateRoot } from 'react-dom/client';
 import { ErrorBoundary } from 'react-error-boundary';
 import { useServerResponse } from './framework/Hydration/rsc';
 import { ServerStateProvider } from './foundation/ServerStateProvider';
+const DevTools = React.lazy(() => import('./components/DevTools'));
 const renderHydrogen = async (ClientWrapper, config) => {
     const root = document.getElementById('root');
     if (!root) {
@@ -19,10 +20,25 @@ const renderHydrogen = async (ClientWrapper, config) => {
     }
     // 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 })))));
+    let hasCaughtError = false;
+    hydrateRoot(root, React.createElement(React.Fragment, null,
+        React.createElement(RootComponent, null,
+            React.createElement(ErrorBoundary, { FallbackComponent: Error },
+                React.createElement(Suspense, { fallback: null },
+                    React.createElement(Content, { clientWrapper: ClientWrapper })))),
+        typeof DevTools !== 'undefined' && (config === null || config === void 0 ? void 0 : config.showDevTools) ? (React.createElement(DevTools, null)) : null), {
+        onRecoverableError(e) {
+            if (__DEV__ && !hasCaughtError) {
+                hasCaughtError = true;
+                console.log(`React encountered an error while attempting to hydrate the application. ` +
+                    `This is likely due to a bug in React's Suspense behavior related to experimental server components, ` +
+                    `and it is safe to ignore this error.\n` +
+                    `Visit this issue to learn more: https://github.com/Shopify/hydrogen/issues/920.\n\n` +
+                    `The original error is printed below:`);
+                console.log(e);
+            }
+        },
+    });
 };
 export default renderHydrogen;
 function Content({ clientWrapper: ClientWrapper = ({ children }) => children, }) {

package/dist/esnext/entry-server.d.ts

@@ -19,5 +19,5 @@ interface RequestHandlerOptions {
 export interface RequestHandler {
     (request: Request | IncomingMessage, options: RequestHandlerOptions): Promise<Response | undefined>;
 }
-export declare const renderHydrogen: (App: any, { shopifyConfig, routes }: ServerHandlerConfig) => RequestHandler;
+export declare const renderHydrogen: (App: any, { shopifyConfig, routes, serverAnalyticsConnectors }: ServerHandlerConfig) => RequestHandler;
 export default renderHydrogen;