@shopify/hydrogen 1.0.0 → 1.1.0

package/dist/esnext/client.d.ts

@@ -1,9 +1,9 @@
 export * from './components';
 export * from './hooks';
-export * from './foundation/useServerProps';
-export * from './foundation/useShop';
-export * from './foundation/ServerPropsProvider';
-export * from './foundation/useUrl';
+export { useServerProps } from './foundation/useServerProps';
+export { useShop } from './foundation/useShop';
+export { ServerPropsProvider, ServerPropsContext, type ServerProps, type ServerPropsContextValue, } from './foundation/ServerPropsProvider';
+export { useUrl } from './foundation/useUrl';
 export { Head } from './foundation/Head';
 export * from './utilities';
 export { gql } from './utilities/graphql-tag';

package/dist/esnext/client.js

@@ -1,9 +1,9 @@
 export * from './components';
 export * from './hooks';
-export * from './foundation/useServerProps';
-export * from './foundation/useShop';
-export * from './foundation/ServerPropsProvider';
-export * from './foundation/useUrl';
+export { useServerProps } from './foundation/useServerProps';
+export { useShop } from './foundation/useShop';
+export { ServerPropsProvider, ServerPropsContext, } from './foundation/ServerPropsProvider';
+export { useUrl } from './foundation/useUrl';
 export { Head } from './foundation/Head';
 export * from './utilities';
 export { gql } from './utilities/graphql-tag';

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

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { useCart } from '../CartProvider';
-import { useProductOptions } from '../ProductOptionsProvider';
+import { useProductOptions } from '../../hooks/useProductOptions';
 import { BaseButton } from '../BaseButton';
 /**
  * The `AddToCartButton` component renders a button that adds an item to the cart when pressed.

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

@@ -2,7 +2,8 @@ import React, { useState } from 'react';
 import { useShop } from '../../foundation';
 import { flattenConnection } from '../../utilities';
 import { CartCreate, defaultCartFragment } from './cart-queries';
-import { SHOPIFY_STOREFRONT_ID_HEADER, STOREFRONT_API_PUBLIC_TOKEN_HEADER, } from '../../constants';
+import { SHOPIFY_STOREFRONT_ID_HEADER, STOREFRONT_API_PUBLIC_TOKEN_HEADER, SHOPIFY_STOREFRONT_Y_HEADER, SHOPIFY_STOREFRONT_S_HEADER, SHOPIFY_Y, SHOPIFY_S, } from '../../constants';
+import { parse } from 'worktop/cookie';
 export function useCartFetch() {
     const { storeDomain, storefrontApiVersion, storefrontToken, storefrontId } = useShop();
     return React.useCallback(({ query, variables, }) => {
@@ -15,6 +16,12 @@ export function useCartFetch() {
         if (storefrontId) {
             headers[SHOPIFY_STOREFRONT_ID_HEADER] = storefrontId;
         }
+        // Find Shopify cookies
+        const cookieData = parse(document.cookie);
+        if (cookieData[SHOPIFY_Y] && cookieData[SHOPIFY_S]) {
+            headers[SHOPIFY_STOREFRONT_Y_HEADER] = cookieData[SHOPIFY_Y];
+            headers[SHOPIFY_STOREFRONT_S_HEADER] = cookieData[SHOPIFY_S];
+        }
         return fetch(`https://${storeDomain}/api/${storefrontApiVersion}/graphql.json`, {
             method: 'POST',
             headers,

package/dist/esnext/components/Image/Image.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getShopifyImageDimensions, shopifyImageLoader, addImageSizeParametersToUrl, } from '../../utilities';
+import { getShopifyImageDimensions, shopifyImageLoader, addImageSizeParametersToUrl, IMG_SRC_SET_SIZES, } from '../../utilities';
 /**
  * The `Image` component renders an image for the Storefront API's
  * [Image object](https://shopify.dev/api/storefront/reference/common-objects/image) by using the `data` prop, or a custom location by using the `src` prop. You can [customize this component](https://shopify.dev/api/hydrogen/components#customizing-hydrogen-components) using passthrough props.
@@ -34,7 +34,7 @@ function ShopifyImage({ data, width, height, loading, loader = shopifyImageLoade
     if (__HYDROGEN_DEV__ && !data.altText && !rest.alt) {
         console.warn(`<Image/>: the 'data' prop should have the 'altText' property, or the 'alt' prop, and one of them should not be empty. ${`Image: ${data.id ?? data.url}`}`);
     }
-    const { width: finalWidth, height: finalHeight } = getShopifyImageDimensions({
+    const { width: imgElementWidth, height: imgElementHeight } = getShopifyImageDimensions({
         data,
         loaderOptions,
         elementProps: {
@@ -42,7 +42,7 @@ function ShopifyImage({ data, width, height, loading, loader = shopifyImageLoade
             height,
         },
     });
-    if (__HYDROGEN_DEV__ && (!finalWidth || !finalHeight)) {
+    if (__HYDROGEN_DEV__ && (!imgElementWidth || !imgElementHeight)) {
         console.warn(`<Image/>: the 'data' prop requires either 'width' or 'data.width', and 'height' or 'data.height' properties. ${`Image: ${data.id ?? data.url}`}`);
     }
     let finalSrc = data.url;
@@ -50,8 +50,8 @@ function ShopifyImage({ data, width, height, loading, loader = shopifyImageLoade
         finalSrc = loader({
             ...loaderOptions,
             src: data.url,
-            width: finalWidth,
-            height: finalHeight,
+            width: imgElementWidth,
+            height: imgElementHeight,
         });
         if (typeof finalSrc !== 'string' || !finalSrc) {
             throw new Error(`<Image/>: 'loader' did not return a valid string. ${`Image: ${data.id ?? data.url}`}`);
@@ -59,17 +59,20 @@ function ShopifyImage({ data, width, height, loading, loader = shopifyImageLoade
     }
     // determining what the intended width of the image is. For example, if the width is specified and lower than the image width, then that is the maximum image width
     // to prevent generating a srcset with widths bigger than needed or to generate images that would distort because of being larger than original
-    const maxWidth = width && finalWidth && width < finalWidth ? width : finalWidth;
+    const maxWidth = width && imgElementWidth && width < imgElementWidth
+        ? width
+        : imgElementWidth;
     const finalSrcset = rest.srcSet ??
         internalImageSrcSet({
             ...loaderOptions,
             widths,
             src: data.url,
             width: maxWidth,
+            height: imgElementHeight,
             loader,
         });
     /* eslint-disable hydrogen/prefer-image-component */
-    return (React.createElement("img", { id: data.id ?? '', alt: data.altText ?? rest.alt ?? '', loading: loading ?? 'lazy', ...rest, src: finalSrc, width: finalWidth ?? undefined, height: finalHeight ?? undefined, srcSet: finalSrcset }));
+    return (React.createElement("img", { id: data.id ?? '', alt: data.altText ?? rest.alt ?? '', loading: loading ?? 'lazy', ...rest, src: finalSrc, width: imgElementWidth ?? undefined, height: imgElementHeight ?? undefined, srcSet: finalSrcset }));
     /* eslint-enable hydrogen/prefer-image-component */
 }
 function ExternalImage({ src, width, height, alt, loader, loaderOptions, widths, loading, ...rest }) {
@@ -112,23 +115,29 @@ function ExternalImage({ src, width, height, alt, loader, loaderOptions, widths,
         height: loaderOptions?.height ?? height, alt: alt ?? '', loading: loading ?? 'lazy', srcSet: finalSrcset }));
     /* eslint-enable hydrogen/prefer-image-component */
 }
-// based on the default width sizes used by the Shopify liquid HTML tag img_tag plus a 2560 width to account for 2k resolutions
-// reference: https://shopify.dev/api/liquid/filters/html-filters#image_tag
-const IMG_SRC_SET_SIZES = [352, 832, 1200, 1920, 2560];
-function internalImageSrcSet({ src, width, crop, scale, widths, loader, }) {
+function internalImageSrcSet({ src, width, crop, scale, widths, loader, height, }) {
     const hasCustomWidths = widths && Array.isArray(widths);
-    if (hasCustomWidths && widths.some((size) => isNaN(size)))
+    if (hasCustomWidths && widths.some((size) => isNaN(size))) {
         throw new Error(`<Image/>: the 'widths' must be an array of numbers`);
+    }
+    let aspectRatio = 1;
+    if (width && height) {
+        aspectRatio = Number(height) / Number(width);
+    }
     let setSizes = hasCustomWidths ? widths : IMG_SRC_SET_SIZES;
     if (!hasCustomWidths &&
         width &&
-        width < IMG_SRC_SET_SIZES[IMG_SRC_SET_SIZES.length - 1])
+        width < IMG_SRC_SET_SIZES[IMG_SRC_SET_SIZES.length - 1]) {
         setSizes = IMG_SRC_SET_SIZES.filter((size) => size <= width);
+    }
     const srcGenerator = loader ? loader : addImageSizeParametersToUrl;
     return setSizes
         .map((size) => `${srcGenerator({
         src,
         width: size,
+        // height is not applied if there is no crop
+        // if there is crop, then height is applied as a ratio of the original width + height aspect ratio * size
+        height: crop ? Number(size) * aspectRatio : undefined,
         crop,
         scale,
     })} ${size}w`)

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

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { LocalizationContextValue } from './LocalizationContext.client';
+import type { LocalizationContextValue } from '../../foundation/ShopifyProvider/types';
 export default function LocalizationClientProvider({ localization, children, }: {
     children: ReactNode;
     localization: LocalizationContextValue;

package/dist/esnext/components/LocalizationProvider/LocalizationClientProvider.client.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { LocalizationContext, } from './LocalizationContext.client';
+import { LocalizationContext } from '../../foundation/ShopifyProvider/ShopifyProvider.client';
 export default function LocalizationClientProvider({ localization, children, }) {
     return (React.createElement(LocalizationContext.Provider, { value: localization }, children));
 }

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

@@ -1,15 +1,16 @@
 import { ReactNode } from 'react';
+import { CountryCode, LanguageCode } from '../../storefront-api-types';
 export interface LocalizationProviderProps {
     /** A `ReactNode` element. */
     children: ReactNode;
     /**
      * Override the `isoCode` to define the active country
      */
-    countryCode?: string;
+    countryCode?: CountryCode;
     /**
      * Override the `languageCode` to define the active language
      */
-    languageCode?: string;
+    languageCode?: LanguageCode;
 }
 /**
  * The `LocalizationProvider` component automatically queries the Storefront API's

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

@@ -2,6 +2,8 @@ import React from 'react';
 import LocalizationClientProvider from './LocalizationClientProvider.client';
 import { useShop } from '../../foundation/useShop';
 import { useServerRequest } from '../../foundation/ServerRequestProvider';
+import { log } from '../../utilities/log';
+import { getLocalizationContextValue } from '../../foundation/ShopifyProvider/ShopifyProvider.server';
 /**
  * The `LocalizationProvider` component automatically queries the Storefront API's
  * [`localization`](https://shopify.dev/api/storefront/reference/common-objects/queryroot) field
@@ -10,18 +12,12 @@ import { useServerRequest } from '../../foundation/ServerRequestProvider';
  * Any descendents of this provider can use the `useLocalization` hook.
  */
 export function LocalizationProvider(props) {
+    if (import.meta.env.DEV) {
+        log.warn('<LocalizationProvider> is no longer necessary. Pass localization props directly to `<ShopifyProvider>` instead.');
+    }
     const { defaultLanguageCode, defaultCountryCode } = useShop();
-    const languageCode = (props.languageCode ?? defaultLanguageCode).toUpperCase();
-    const countryCode = (props.countryCode ?? defaultCountryCode).toUpperCase();
     const request = useServerRequest();
-    const localization = {
-        country: {
-            isoCode: countryCode,
-        },
-        language: {
-            isoCode: languageCode,
-        },
-    };
+    const localization = getLocalizationContextValue(defaultLanguageCode, defaultCountryCode, props.languageCode, props.countryCode);
     request.ctx.localization = localization;
     return (React.createElement(LocalizationClientProvider, { localization: localization }, props.children));
 }

package/dist/esnext/components/ProductOptionsProvider/context.d.ts

@@ -1,2 +1,2 @@
-import { ProductOptionsHookValue } from '../../hooks';
+import type { ProductOptionsHookValue } from '../../hooks';
 export declare const ProductOptionsContext: import("react").Context<ProductOptionsHookValue | null>;

package/dist/esnext/components/ProductOptionsProvider/index.d.ts

@@ -1,2 +1 @@
 export { ProductOptionsProvider } from './ProductOptionsProvider.client';
-export { useProductOptions } from '../../hooks/useProductOptions/useProductOptions.client';

package/dist/esnext/components/ProductOptionsProvider/index.js

@@ -1,2 +1 @@
 export { ProductOptionsProvider } from './ProductOptionsProvider.client';
-export { useProductOptions } from '../../hooks/useProductOptions/useProductOptions.client';

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

@@ -20,9 +20,8 @@ export { CartShopPayButton } from './CartShopPayButton';
 export { CartCost } from './CartCost';
 export { CartProvider, useCart, useInstantCheckout } from './CartProvider';
 export type { State, Status, Cart, CartWithActions, CartAction, } from './CartProvider';
-export { ProductOptionsProvider, useProductOptions, } from './ProductOptionsProvider';
+export { ProductOptionsProvider } from './ProductOptionsProvider';
 export { ProductPrice } from './ProductPrice';
 export { BuyNowButton } from './BuyNowButton';
 export { ShopPayButton } from './ShopPayButton';
-export { useLocalization } from '../hooks/useLocalization/useLocalization';
 export { Seo } from './Seo';

package/dist/esnext/components/index.js

@@ -18,9 +18,8 @@ export { CartCheckoutButton } from './CartCheckoutButton';
 export { CartShopPayButton } from './CartShopPayButton';
 export { CartCost } from './CartCost';
 export { CartProvider, useCart, useInstantCheckout } from './CartProvider';
-export { ProductOptionsProvider, useProductOptions, } from './ProductOptionsProvider';
+export { ProductOptionsProvider } from './ProductOptionsProvider';
 export { ProductPrice } from './ProductPrice';
 export { BuyNowButton } from './BuyNowButton';
 export { ShopPayButton } from './ShopPayButton';
-export { useLocalization } from '../hooks/useLocalization/useLocalization';
 export { Seo } from './Seo';

package/dist/esnext/constants.d.ts

@@ -7,3 +7,7 @@ export declare const STOREFRONT_API_PUBLIC_TOKEN_HEADER = "X-Shopify-Storefront-
 export declare const STOREFRONT_API_BUYER_IP_HEADER = "Shopify-Storefront-Buyer-IP";
 export declare const SHOPIFY_STOREFRONT_ID_VARIABLE = "SHOPIFY_STOREFRONT_ID";
 export declare const SHOPIFY_STOREFRONT_ID_HEADER = "Shopify-Storefront-Id";
+export declare const SHOPIFY_STOREFRONT_Y_HEADER = "Shopify-Storefront-Y";
+export declare const SHOPIFY_STOREFRONT_S_HEADER = "Shopify-Storefront-S";
+export declare const SHOPIFY_Y = "_shopify_y";
+export declare const SHOPIFY_S = "_shopify_s";

package/dist/esnext/constants.js

@@ -7,3 +7,7 @@ export const STOREFRONT_API_PUBLIC_TOKEN_HEADER = 'X-Shopify-Storefront-Access-T
 export const STOREFRONT_API_BUYER_IP_HEADER = 'Shopify-Storefront-Buyer-IP';
 export const SHOPIFY_STOREFRONT_ID_VARIABLE = 'SHOPIFY_STOREFRONT_ID';
 export const SHOPIFY_STOREFRONT_ID_HEADER = 'Shopify-Storefront-Id';
+export const SHOPIFY_STOREFRONT_Y_HEADER = 'Shopify-Storefront-Y';
+export const SHOPIFY_STOREFRONT_S_HEADER = 'Shopify-Storefront-S';
+export const SHOPIFY_Y = '_shopify_y';
+export const SHOPIFY_S = '_shopify_s';

package/dist/esnext/entry-server.js

@@ -10,7 +10,6 @@ import { ServerPropsProvider } from './foundation/ServerPropsProvider';
 import { isBotUA } from './utilities/bot-ua';
 import { getCache, setCache } from './foundation/runtime';
 import { ssrRenderToPipeableStream, ssrRenderToReadableStream, rscRenderToReadableStream, createFromReadableStream, bufferReadableStream, } from './streaming.server';
-import { RSC_PATHNAME } from './constants';
 import { stripScriptsFromTemplate } from './utilities/template';
 import { setLogger } from './utilities/log/log';
 import { Analytics } from './foundation/Analytics/Analytics.server';
@@ -110,7 +109,7 @@ export const renderHydrogen = (App) => {
 async function processRequest(handleRequest, App, url, request, sessionApi, options, response, hydrogenConfig, revalidate = false) {
     const { dev, nonce, indexTemplate, streamableResponse: nodeResponse } = options;
     const log = getLoggerWithContext(request);
-    const isRSCRequest = url.pathname === RSC_PATHNAME;
+    const isRSCRequest = request.isRscRequest();
     const apiRoute = !isRSCRequest && getApiRoute(url, hydrogenConfig.routes);
     // The API Route might have a default export, making it also a server component
     // If it does, only render the API route if the request method is GET
@@ -123,8 +122,11 @@ async function processRequest(handleRequest, App, url, request, sessionApi, opti
             : apiResponse;
     }
     const state = isRSCRequest
-        ? parseJSON(url.searchParams.get('state') || '{}')
-        : { pathname: url.pathname, search: url.search };
+        ? parseJSON(decodeURIComponent(url.searchParams.get('state') || '{}'))
+        : {
+            pathname: decodeURIComponent(url.pathname),
+            search: decodeURIComponent(url.search),
+        };
     const rsc = runRSC({ App, state, log, request, response });
     if (isRSCRequest) {
         const buffered = await bufferReadableStream(rsc.readable.getReader());
@@ -552,13 +554,13 @@ function tagOnWrite(response) {
 async function cacheResponse(response, request, chunks, revalidate) {
     const cache = getCache();
     /**
-     * Only cache on cachable responses where response
+     * Only full page cache on cachable responses where response
      *
      * - have content to cache
      * - have status 200
      * - does not have no-store on cache-control header
      * - does not have set-cookie header
-     * - is not a POST request
+     * - is a GET request
      * - does not have a session or does not have an active customer access token
      */
     if (cache &&
@@ -566,7 +568,7 @@ async function cacheResponse(response, request, chunks, revalidate) {
         response.status === 200 &&
         response.cache().mode !== NO_STORE &&
         !response.headers.has('Set-Cookie') &&
-        !/post/i.test(request.method) &&
+        /get/i.test(request.method) &&
         !sessionHasCustomerAccessToken(request)) {
         if (revalidate) {
             await saveCacheResponse(response, request, chunks);
@@ -593,10 +595,9 @@ async function saveCacheResponse(response, request, chunks) {
     const cache = getCache();
     if (cache && chunks.length > 0) {
         const { headers, status, statusText } = getResponseOptions(response);
-        const url = new URL(request.url);
         headers.set('cache-control', response.cacheControlHeader);
         const currentHeader = headers.get('Content-Type');
-        if (!currentHeader && url.pathname !== RSC_PATHNAME) {
+        if (!currentHeader && !request.isRscRequest()) {
             headers.set('Content-Type', HTML_CONTENT_TYPE);
         }
         await setItemInCache(request.cacheKey(), new Response(chunks.join(''), {

package/dist/esnext/foundation/Analytics/connectors/PerformanceMetrics/PerformanceMetrics.client.js

@@ -18,7 +18,7 @@ export function PerformanceMetrics() {
                     const initTime = new Date().getTime();
                     ClientAnalytics.publish(ClientAnalytics.eventNames.PERFORMANCE, true, data);
                     const pageData = ClientAnalytics.getPageAnalyticsData();
-                    const shopId = pageData.shopify.shopId || '';
+                    const shopId = pageData.shopify?.shopId;
                     fetch('https://monorail-edge.shopifysvc.com/v1/produce', {
                         method: 'post',
                         headers: {
@@ -28,7 +28,9 @@ export function PerformanceMetrics() {
                             schema_id: 'hydrogen_buyer_performance/2.0',
                             payload: {
                                 ...data,
-                                shop_id: shopId.substring(shopId.lastIndexOf('/') + 1) || '',
+                                shop_id: shopId
+                                    ? shopId.substring(shopId.lastIndexOf('/') + 1)
+                                    : '',
                             },
                             metadata: {
                                 event_created_at_ms: initTime,

package/dist/esnext/foundation/Analytics/connectors/Shopify/ShopifyAnalytics.client.js

@@ -1,8 +1,8 @@
 import { useEffect } from 'react';
 import { parse, stringify } from 'worktop/cookie';
+import { SHOPIFY_Y, SHOPIFY_S } from '../../../../constants';
 import { ClientAnalytics } from '../../ClientAnalytics';
 import { buildUUID, addDataIf } from './utils';
-import { SHOPIFY_S, SHOPIFY_Y } from './const';
 const longTermLength = 60 * 60 * 24 * 360 * 2; // ~2 year expiry
 const shortTermLength = 60 * 30; // 30 mins
 const myShopifyDomain = 'myshopify.com';
@@ -52,7 +52,7 @@ function updateCookie(cookieName, value, maxage, cookieDomain) {
     const cookieString = stringify(cookieName, value, {
         maxage,
         domain: getCookieDomain(cookieDomain),
-        secure: process.env.NODE_ENV === 'production',
+        secure: import.meta.env.PROD,
         samesite: 'Lax',
         path: '/',
     });

package/dist/esnext/foundation/Analytics/connectors/Shopify/ShopifyAnalytics.server.js

@@ -4,11 +4,11 @@ import AnalyticsErrorBoundary from '../../../AnalyticsErrorBoundary.client';
 import { useServerRequest } from '../../../ServerRequestProvider';
 import { useServerAnalytics } from '../../hook';
 import { useShop } from '../../../useShop';
-import { SHOPIFY_S, SHOPIFY_Y } from './const';
 import { ShopifyAnalyticsClient } from './ShopifyAnalytics.client';
 import { useShopQuery } from '../../../../hooks/useShopQuery';
 import { CacheLong } from '../../../Cache/strategies';
 import { gql } from '../../../../utilities/graphql-tag';
+import { SHOPIFY_Y, SHOPIFY_S } from '../../../../constants';
 export function ShopifyAnalytics({ cookieDomain }) {
     const { storeDomain } = useShop();
     const request = useServerRequest();

package/dist/esnext/foundation/Analytics/connectors/Shopify/const.d.ts

@@ -1,5 +1,3 @@
-export declare const SHOPIFY_Y = "_shopify_y";
-export declare const SHOPIFY_S = "_shopify_s";
 export declare const ShopifyAnalyticsConstants: {
     pageType: {
         article: string;

package/dist/esnext/foundation/Analytics/connectors/Shopify/const.js

@@ -1,5 +1,3 @@
-export const SHOPIFY_Y = '_shopify_y';
-export const SHOPIFY_S = '_shopify_s';
 // Shopify analytics constants
 const article = 'article';
 const blog = 'blog';

package/dist/esnext/foundation/DevTools/components/Heading.js

@@ -1,6 +1,6 @@
 import React from 'react';
 export function Heading({ linkText, url, children, }) {
-    return (React.createElement("span", { style: { display: 'flex', alignItems: 'baseline', padding: '0 0 0.5em' } },
+    return (React.createElement("span", { style: { display: 'flex', alignItems: 'baseline', padding: '0 0 0em' } },
         React.createElement("span", { style: { paddingRight: '0em', flex: 1, fontWeight: 'bold' } },
             children,
             ' '),

package/dist/esnext/foundation/DevTools/components/Panels.js

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { ClientAnalytics } from '../../Analytics';
 import { Performance } from './Performance.client';
 import { Settings } from './Settings.client';
+const isComponentPanel = (panel) => panel.component !== undefined;
 export function Panels({ settings }) {
     const [selectedPanel, setSelectedPanel] = useState(0);
     const [navigations, setNavigations] = useState([]);
@@ -22,36 +23,41 @@ export function Panels({ settings }) {
         });
     }, [setNavigations, navigations]);
     const panels = getPanels({ settings, performance: { navigations } });
-    const panelComponents = panels.map((obj, index) => (React.createElement("div", { key: obj.content, style: { display: selectedPanel === index ? 'block' : 'none' } }, obj.panel)));
+    const panelComponents = panels.map((obj, index) => isComponentPanel(obj) ? (React.createElement("div", { key: obj.content, style: { display: selectedPanel === index ? 'block' : 'none' } }, obj.component)) : null);
     return (React.createElement("div", { style: { display: 'flex', height: '100%' } },
-        React.createElement("div", { style: { borderRight: '1px solid', padding: '1em 0em' } }, panels.map(({ content, icon, id }, index) => {
+        React.createElement("div", { style: { borderRight: '1px solid', padding: '1em 0em' } }, panels.map((panel, index) => {
             const active = selectedPanel === index;
-            return (React.createElement("button", { key: id, type: "button", style: {
-                    lineHeight: 2,
-                    padding: '0em 1.25em',
-                    fontWeight: active ? 'bold' : 'normal',
-                    display: 'flex',
-                    alignItems: 'center',
-                }, onClick: () => setSelectedPanel(index) },
-                React.createElement("span", { style: { paddingRight: '0.4em' } }, icon),
-                React.createElement("span", { style: { fontFamily: 'monospace' } }, content)));
+            const style = {
+                padding: '0em 1.25em',
+                fontWeight: 'bold',
+                textDecoration: active ? 'underline' : 'none',
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+            };
+            if (isComponentPanel(panel)) {
+                return (React.createElement("button", { key: panel.id, type: "button", style: style, onClick: () => setSelectedPanel(index) },
+                    React.createElement("span", null, panel.content)));
+            }
+            return (React.createElement("a", { style: style, target: "_blank", rel: "noreferrer", href: panel.url, key: panel.url },
+                panel.content,
+                React.createElement("span", null, "\u2197")));
         })),
-        React.createElement("div", { style: { padding: '1.25em', width: '100%' } }, panelComponents[selectedPanel ? selectedPanel : 0])));
-}
-function Panel({ children }) {
-    return React.createElement("div", null, children);
+        React.createElement("div", { style: { padding: '1em', width: '100%' } }, panelComponents[selectedPanel ? selectedPanel : 0])));
 }
 function getPanels({ settings, performance }) {
     const panels = {
         settings: {
             content: 'Settings',
-            panel: React.createElement(Settings, { ...settings }),
-            icon: '🎛',
+            component: React.createElement(Settings, { ...settings }),
         },
         performance: {
             content: 'Performance',
-            panel: React.createElement(Performance, { ...performance }),
-            icon: '⏱',
+            component: React.createElement(Performance, { ...performance }),
+        },
+        graphiql: {
+            content: 'GraphiQL',
+            url: '/___graphql',
         },
     };
     return Object.keys(panels).map((key) => {

package/dist/esnext/foundation/DevTools/components/Performance.client.js

@@ -19,7 +19,6 @@ const Item = ({ label, value, unit }) => {
     return (React.createElement("span", { style: {
             fontFamily: 'monospace',
             padding: '0 2em 0 0',
-            fontSize: '0.75em',
         } },
         label && label.padEnd(10),
         val));

package/dist/esnext/foundation/DevTools/components/Settings.client.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { Heading } from './Heading';
 import { Table } from './Table';
 const KEY_MAP = {
     locale: 'Locale',
@@ -14,7 +13,5 @@ export function Settings(props) {
             type: typeof value,
         };
     });
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Heading, null, "Config"),
-        React.createElement(Table, { items: items })));
+    return React.createElement(Table, { items: items });
 }

package/dist/esnext/foundation/DevTools/components/Table.js

@@ -1,7 +1,7 @@
 import React from 'react';
 export function Table({ items }) {
-    const itemsMarkup = items.map(({ key, value }) => (React.createElement("div", { key: key, style: { display: 'flex' } },
-        React.createElement("span", { style: { width: '30%', fontFamily: 'monospace', paddingRight: '1em' } }, key),
-        React.createElement("span", { style: { width: '70%', fontFamily: 'monospace', fontWeight: 'bold' } }, value))));
+    const itemsMarkup = items.map(({ key, value }) => (React.createElement("div", { key: key, style: { display: 'flex', paddingBottom: '1em', flexDirection: 'column' } },
+        React.createElement("span", { style: { fontWeight: 'bold' } }, key),
+        React.createElement("span", { style: { width: '70%', fontFamily: 'monospace' } }, value))));
     return React.createElement("ul", null, itemsMarkup);
 }

package/dist/esnext/foundation/HydrogenRequest/HydrogenRequest.server.d.ts

@@ -1,10 +1,9 @@
-import type { ShopifyContextValue } from '../ShopifyProvider/types';
+import type { ShopifyContextValue, LocalizationContextValue } from '../ShopifyProvider/types';
 import type { QueryCacheControlHeaders } from '../../utilities/log/log-cache-header';
 import type { QueryTiming } from '../../utilities/log/log-query-timeline';
 import type { ResolvedHydrogenConfig, PreloadOptions, QueryKey, RuntimeContext } from '../../types';
 import { HelmetData as HeadData } from 'react-helmet-async';
 import { SessionSyncApi } from '../session/session';
-import { LocalizationContextValue } from '../../components/LocalizationProvider/LocalizationContext.client';
 export declare type PreloadQueryEntry = {
     key: QueryKey;
     fetcher: (request: HydrogenRequest) => Promise<unknown>;

package/dist/esnext/foundation/HydrogenRequest/HydrogenRequest.server.js

@@ -43,9 +43,7 @@ export class HydrogenRequest extends Request {
         }
         this.time = getTime();
         this.id = generateId();
-        this.normalizedUrl = this.isRscRequest()
-            ? normalizeUrl(this.url)
-            : this.url;
+        this.normalizedUrl = decodeURIComponent(this.isRscRequest() ? normalizeUrl(this.url) : this.url);
         this.ctx = {
             cache: new Map(),
             head: new HeadData({}),
@@ -130,7 +128,7 @@ export class HydrogenRequest extends Request {
     }
     async formData() {
         // @ts-ignore
-        if (!__HYDROGEN_WORKER__ && super.formData)
+        if (__HYDROGEN_WORKER__ || super.formData)
             return super.formData();
         const contentType = this.headers.get('Content-Type') || '';
         // If mimeType’s essence is "multipart/form-data", then:

package/dist/esnext/foundation/ServerPropsProvider/ServerPropsProvider.js

@@ -13,12 +13,12 @@ export function ServerPropsProvider({ initialServerProps, setServerPropsForRsc,
             setServerPropsForRsc((prev) => getNewValue(prev, input, propValue));
         });
     }, [setServerProps, setServerPropsForRsc]);
-    const setLocationServerPropsCallback = useCallback((input, propValue) => {
+    const setLocationServerPropsCallback = useCallback((input) => {
         // Flush the existing user server state when location changes, leaving only the persisted state
         startTransition(() => {
-            setServerPropsForRsc((prev) => getNewValue(prev, input, propValue));
+            setServerPropsForRsc(input);
             setServerProps({});
-            setLocationServerProps((prev) => getNewValue(prev, input, propValue));
+            setLocationServerProps(input);
         });
     }, [setServerProps, setServerPropsForRsc, setLocationServerProps]);
     const getProposedLocationServerPropsCallback = useCallback((input, propValue) => {

package/dist/esnext/foundation/ServerPropsProvider/index.d.ts

@@ -1,2 +1 @@
-export { ServerPropsProvider, ServerPropsContext } from './ServerPropsProvider';
-export type { ServerProps, ServerPropsContextValue } from './ServerPropsProvider';
+export { ServerPropsProvider, ServerPropsContext, type ServerProps, type ServerPropsContextValue, } from './ServerPropsProvider';

package/dist/esnext/foundation/ServerPropsProvider/index.js

@@ -1 +1 @@
-export { ServerPropsProvider, ServerPropsContext } from './ServerPropsProvider';
+export { ServerPropsProvider, ServerPropsContext, } from './ServerPropsProvider';

package/dist/esnext/foundation/ShopifyProvider/ShopifyProvider.client.d.ts

@@ -1,7 +1,9 @@
-import type { ShopifyContextValue } from './types';
+import type { ShopifyContextValue, LocalizationContextValue } from './types';
 import React, { ReactNode } from 'react';
 export declare const ShopifyContext: React.Context<ShopifyContextValue | null>;
-export declare function ShopifyProviderClient({ children, shopifyConfig, }: {
+export declare const LocalizationContext: React.Context<LocalizationContextValue | null>;
+export declare function ShopifyProviderClient({ children, shopifyConfig, localization, }: {
     children: ReactNode;
     shopifyConfig: ShopifyContextValue;
+    localization: LocalizationContextValue;
 }): JSX.Element;