@shopify/hydrogen 1.0.2 → 1.3.0

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

@@ -1,7 +1,8 @@
 import React, { useState, useEffect } from 'react';
-import { ClientAnalytics } from '../../Analytics';
-import { Performance } from './Performance.client';
-import { Settings } from './Settings.client';
+import { ClientAnalytics } from '../../Analytics/index.js';
+import { Performance } from './Performance.client.js';
+import { Settings } from './Settings.client.js';
+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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Heading } from './Heading';
+import { Heading } from './Heading.js';
 export function Performance({ navigations }) {
     const navigationsMarkup = navigations.map(({ url, ttfb, fcp, size, duration, type }) => (React.createElement("li", { key: url, style: { padding: '0.5em 0', borderBottom: '1px solid' } },
         React.createElement(Item, { label: type, value: url.replace('http://localhost:3000', '') }),
@@ -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.d.ts

@@ -1,5 +1,6 @@
+import { Locale } from '../../ShopifyProvider/types.js';
 interface Props {
-    locale: string;
+    locale: Locale;
     storeDomain: string;
     storefrontApiVersion: string;
 }

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

@@ -1,6 +1,5 @@
 import React from 'react';
-import { Heading } from './Heading';
-import { Table } from './Table';
+import { Table } from './Table.js';
 const KEY_MAP = {
     locale: 'Locale',
     storeDomain: 'Domain',
@@ -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/DevTools/components/index.d.ts

@@ -1,2 +1,2 @@
-export { Interface } from './Interface.client';
-export { Panels } from './Panels';
+export { Interface } from './Interface.client.js';
+export { Panels } from './Panels.js';

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

@@ -1,2 +1,2 @@
-export { Interface } from './Interface.client';
-export { Panels } from './Panels';
+export { Interface } from './Interface.client.js';
+export { Panels } from './Panels.js';

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

@@ -1,4 +1,4 @@
-import type { ImportGlobEagerOutput } from '../../types';
+import type { ImportGlobEagerOutput } from '../../types.js';
 interface FileRoutesProps {
     /** The routes defined by Vite's [import.meta.globEager](https://vitejs.dev/guide/features.html#glob-import) method. */
     routes?: ImportGlobEagerOutput;

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

@@ -1,9 +1,9 @@
 import React, { useMemo } from 'react';
-import { matchPath } from '../../utilities/matchPath';
-import { log } from '../../utilities/log';
-import { extractPathFromRoutesKey } from '../../utilities/apiRoutes';
-import { useServerRequest } from '../ServerRequestProvider';
-import { RouteParamsProvider } from '../useRouteParams/RouteParamsProvider.client';
+import { matchPath } from '../../utilities/matchPath.js';
+import { log } from '../../utilities/log/index.js';
+import { extractPathFromRoutesKey } from '../../utilities/apiRoutes.js';
+import { useServerRequest } from '../ServerRequestProvider/index.js';
+import { RouteParamsProvider } from '../useRouteParams/RouteParamsProvider.client.js';
 /**
  * The `FileRoutes` component builds a set of default Hydrogen routes based on the output provided by Vite's
  * [import.meta.globEager](https://vitejs.dev/guide/features.html#glob-import) method. You can have multiple

package/dist/esnext/foundation/FileSessionStorage/FileSessionStorage.d.ts

@@ -1,6 +1,6 @@
-import type { SessionStorageAdapter } from '../session/session';
-import type { CookieOptions } from '../Cookie/Cookie';
-import { Logger } from '../../utilities/log';
+import type { SessionStorageAdapter } from '../session/session-types.js';
+import type { CookieOptions } from '../Cookie/Cookie.js';
+import { Logger } from '../../utilities/log/index.js';
 /** The `FileSessionStorage` component persists session data to the file system.
  */
 export declare const FileSessionStorage: (name: string, dir: string, cookieOptions: CookieOptions) => (log: Logger) => SessionStorageAdapter;

package/dist/esnext/foundation/FileSessionStorage/FileSessionStorage.js

@@ -1,8 +1,8 @@
-import { Cookie } from '../Cookie/Cookie';
+import { Cookie } from '../Cookie/Cookie.js';
 import { v4 as uid } from 'uuid';
 import path from 'path';
 import { promises as fsp } from 'fs';
-import { parseJSON } from '../../utilities/parse';
+import { parseJSON } from '../../utilities/parse.js';
 async function wait() {
     return new Promise((resolve) => setTimeout(resolve));
 }

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

@@ -0,0 +1,11 @@
+import React, { FormEvent } from 'react';
+interface FormProps {
+    action: string;
+    method?: string;
+    children?: Array<React.ReactNode>;
+    onSubmit?: (e: FormEvent<HTMLFormElement>) => void;
+    encType?: string;
+    noValidate?: boolean;
+}
+export declare function Form({ action, method, children, onSubmit, encType, noValidate, ...props }: FormProps): JSX.Element;
+export {};

package/dist/esnext/foundation/Form/Form.client.js

@@ -0,0 +1,51 @@
+import React, { useCallback, useState } from 'react';
+// @ts-ignore
+import { createFromFetch } from '@shopify/hydrogen/vendor/react-server-dom-vite';
+import { useInternalServerProps } from '../useServerProps/use-server-props.js';
+export function Form({ action, method, children, onSubmit, encType = 'application/x-www-form-urlencoded', noValidate, ...props }) {
+    const { setRscResponseFromApiRoute } = useInternalServerProps();
+    const [_, startTransition] = React.useTransition();
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const submit = useCallback(async (e) => {
+        onSubmit && onSubmit(e);
+        if (e.defaultPrevented)
+            return;
+        setLoading(true);
+        e.preventDefault();
+        const formData = new FormData(e.target);
+        // @ts-expect-error
+        // It's valid to pass a FormData instance to a URLSearchParams constructor
+        // @todo - support multipart forms
+        const formBody = new URLSearchParams(formData);
+        startTransition(() => {
+            fetch(action, {
+                method,
+                headers: {
+                    'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
+                    'Hydrogen-Client': 'Form-Action',
+                },
+                body: formBody.toString(),
+            })
+                .then((fetchResponse) => {
+                const rscPathname = fetchResponse.headers.get('Hydrogen-RSC-Pathname');
+                if (!rscPathname)
+                    throw new Error(`The component's \`action\` attribute must point to an API route that responds with a new Request()\nRead more at https://shopify.dev/custom-storefronts/hydrogen/framework/forms`);
+                if (rscPathname !== window.location.pathname) {
+                    window.history.pushState(null, '', rscPathname);
+                }
+                const rscResponse = createFromFetch(Promise.resolve(fetchResponse));
+                setRscResponseFromApiRoute({
+                    url: method + action,
+                    response: rscResponse,
+                });
+                setLoading(false);
+            })
+                .catch((error) => {
+                setError(error);
+                setLoading(false);
+            });
+        });
+    }, [onSubmit, startTransition, action, method, setRscResponseFromApiRoute]);
+    return (React.createElement("form", { action: action, method: method, onSubmit: submit, encType: "application/x-www-form-urlencoded", noValidate: noValidate, ...props }, children instanceof Function ? children({ loading, error }) : children));
+}

package/dist/esnext/foundation/Head/Head.client.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Helmet, HelmetData as HeadData, } from 'react-helmet-async';
-import { useEnvContext } from '../ssr-interop';
+import { useEnvContext } from '../ssr-interop.js';
 const clientHeadData = new HeadData({});
 export function Head({ children, ...props }) {
     const headData = useEnvContext((req) => req.ctx.head, clientHeadData);

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

@@ -1 +1 @@
-export { Head } from './Head.client';
+export { Head } from './Head.client.js';

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

@@ -1 +1 @@
-export { Head } from './Head.client';
+export { Head } from './Head.client.js';

package/dist/esnext/foundation/Html/Html.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import type { HelmetData as HeadData } from 'react-helmet-async';
-import { ResolvedHydrogenConfig } from '../../types';
+import { ResolvedHydrogenConfig } from '../../types.js';
 declare type HtmlOptions = {
     children: ReactNode;
     template: string;

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

@@ -1,9 +1,9 @@
-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 type { ShopifyContextValue, LocalizationContextValue } from '../ShopifyProvider/types.js';
+import type { QueryCacheControlHeaders } from '../../utilities/log/log-cache-header.js';
+import type { QueryTiming } from '../../utilities/log/log-query-timeline.js';
+import type { ResolvedHydrogenConfig, PreloadOptions, QueryKey, RuntimeContext } from '../../types.js';
 import { HelmetData as HeadData } from 'react-helmet-async';
-import { SessionSyncApi } from '../session/session';
+import type { SessionSyncApi } from '../session/session-types.js';
 export declare type PreloadQueryEntry = {
     key: QueryKey;
     fetcher: (request: HydrogenRequest) => Promise<unknown>;
@@ -46,6 +46,7 @@ export declare class HydrogenRequest extends Request {
         router: RouterContextData;
         buyerIpHeader?: string;
         session?: SessionSyncApi;
+        flashSession: Record<string, any>;
         runtime?: RuntimeContext;
         scopes: Map<string, Record<string, any>>;
         localization?: LocalizationContextValue;

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

@@ -1,8 +1,8 @@
-import { getTime } from '../../utilities/timing';
-import { hashKey } from '../../utilities/hash';
+import { getTime } from '../../utilities/timing.js';
+import { hashKey } from '../../utilities/hash.js';
 import { HelmetData as HeadData } from 'react-helmet-async';
-import { RSC_PATHNAME } from '../../constants';
-import { parseJSON } from '../../utilities/parse';
+import { RSC_PATHNAME } from '../../constants.js';
+import { parseJSON } from '../../utilities/parse.js';
 let reqCounter = 0; // For debugging
 const generateId = typeof crypto !== 'undefined' &&
     // @ts-ignore
@@ -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({}),
@@ -62,6 +60,7 @@ export class HydrogenRequest extends Request {
             },
             preloadQueries: new Map(),
             scopes: new Map(),
+            flashSession: {},
         };
         this.cookies = this.parseCookies();
     }

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

@@ -1,19 +1,17 @@
-import type { CachingStrategy } from '../../types';
+import type { CachingStrategy } from '../../types.js';
 import React from 'react';
 export declare class HydrogenResponse extends Response {
     private wait;
     private cacheOptions;
-    private proxy;
     status: number;
     statusText: string;
-    constructor(...args: ConstructorParameters<typeof Response>);
     /**
      * Buffer the current response until all queries have resolved,
      * and prevent it from streaming back early.
      */
     doNotStream(): void;
     canStream(): boolean;
-    cache(options?: CachingStrategy): import("../../types").AllCacheOptions;
+    cache(options?: CachingStrategy): import("../../types.js").AllCacheOptions;
     get cacheControlHeader(): string;
     redirect(location: string, status?: number): React.FunctionComponentElement<{
         to: string;

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

@@ -1,25 +1,11 @@
-import { CacheShort, generateCacheControlHeader } from '../Cache/strategies';
-import Redirect from '../Redirect/Redirect.client';
+import { CacheShort, generateCacheControlHeader, } from '../Cache/strategies/index.js';
+import Redirect from '../Redirect/Redirect.client.js';
 import React from 'react';
 export class HydrogenResponse extends Response {
     wait = false;
     cacheOptions = CacheShort();
-    proxy = Object.defineProperties(Object.create(null), {
-        // Default values:
-        status: { value: 200, writable: true },
-        statusText: { value: '', writable: true },
-    });
-    // @ts-ignore
-    status;
-    // @ts-ignore
-    statusText;
-    constructor(...args) {
-        super(...args);
-        return new Proxy(this, {
-            get: (target, key) => target.proxy[key] ?? Reflect.get(target, key),
-            set: (target, key, value) => Reflect.set(key in target.proxy ? target.proxy : target, key, value),
-        });
-    }
+    status = 200;
+    statusText = '';
     /**
      * Buffer the current response until all queries have resolved,
      * and prevent it from streaming back early.

package/dist/esnext/foundation/MemorySessionStorage/MemorySessionStorage.d.ts

@@ -1,5 +1,5 @@
-import type { SessionStorageAdapter } from '../session/session';
-import type { CookieOptions } from '../Cookie/Cookie';
+import type { SessionStorageAdapter } from '../session/session-types.js';
+import type { CookieOptions } from '../Cookie/Cookie.js';
 /** The `MemorySessionStorage` component stores session data within Hydrogen runtime memory.
  */
 export declare const MemorySessionStorage: (name: string, options: CookieOptions) => () => SessionStorageAdapter;

package/dist/esnext/foundation/MemorySessionStorage/MemorySessionStorage.js

@@ -1,4 +1,4 @@
-import { Cookie } from '../Cookie/Cookie';
+import { Cookie } from '../Cookie/Cookie.js';
 import { v4 as uid } from 'uuid';
 /** The `MemorySessionStorage` component stores session data within Hydrogen runtime memory.
  */

package/dist/esnext/foundation/Redirect/Redirect.client.js

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { useNavigate } from '../../foundation/useNavigate/useNavigate';
+import { useNavigate } from '../../foundation/useNavigate/useNavigate.js';
 export default function Redirect({ to }) {
     const navigate = useNavigate();
     useEffect(() => {

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

@@ -1,7 +1,7 @@
 import React, { cloneElement } from 'react';
-import { useServerRequest } from '../ServerRequestProvider';
-import { matchPath } from '../../utilities/matchPath';
-import { RouteParamsProvider } from '../useRouteParams/RouteParamsProvider.client';
+import { useServerRequest } from '../ServerRequestProvider/index.js';
+import { matchPath } from '../../utilities/matchPath.js';
+import { RouteParamsProvider } from '../useRouteParams/RouteParamsProvider.client.js';
 /**
  * The `Route` component is used to set up a route in Hydrogen that's independent of the file system. Routes are
  * matched in the order that they're defined.

package/dist/esnext/foundation/Router/BrowserRouter.client.js

@@ -1,7 +1,7 @@
 import { createBrowserHistory } from 'history';
 import React, { createContext, useContext, useMemo, useState, useEffect, useLayoutEffect, useCallback, } from 'react';
-import { META_ENV_SSR } from '../ssr-interop';
-import { useInternalServerProps } from '../useServerProps/use-server-props';
+import { META_ENV_SSR } from '../ssr-interop.js';
+import { useInternalServerProps } from '../useServerProps/use-server-props.js';
 export const RouterContext = createContext(undefined);
 let isFirstLoad = true;
 const positions = {};

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BrowserRouter } from './BrowserRouter.client';
+import { BrowserRouter } from './BrowserRouter.client.js';
 /**
  * The `Router` component provides the context for routing in your Hydrogen app.
  */

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

@@ -26,6 +26,7 @@ export interface InternalServerPropsContextValue extends BaseServerPropsContextV
     serverProps: ServerProps;
     locationServerProps: LocationServerProps;
     getProposedLocationServerProps: ProposedServerPropsSetter;
+    setRscResponseFromApiRoute: (response: any) => void;
 }
 export interface ServerPropsContextValue extends BaseServerPropsContextValue {
     serverProps: ServerProps;
@@ -35,7 +36,8 @@ export declare const ServerPropsContext: React.Context<InternalServerPropsContex
 interface ServerPropsProviderProps {
     initialServerProps: LocationServerProps;
     setServerPropsForRsc: React.Dispatch<React.SetStateAction<LocationServerProps>>;
+    setRscResponseFromApiRoute: (response: any) => void;
     children: ReactNode;
 }
-export declare function ServerPropsProvider({ initialServerProps, setServerPropsForRsc, children, }: ServerPropsProviderProps): JSX.Element;
+export declare function ServerPropsProvider({ initialServerProps, setServerPropsForRsc, setRscResponseFromApiRoute, children, }: ServerPropsProviderProps): JSX.Element;
 export {};

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

@@ -1,9 +1,7 @@
-import React, { createContext, useMemo, useCallback, 
-// @ts-ignore
-useTransition, useState, } from 'react';
+import React, { createContext, useMemo, useCallback, useTransition, useState, } from 'react';
 const PRIVATE_PROPS = ['request', 'response'];
 export const ServerPropsContext = createContext(null);
-export function ServerPropsProvider({ initialServerProps, setServerPropsForRsc, children, }) {
+export function ServerPropsProvider({ initialServerProps, setServerPropsForRsc, setRscResponseFromApiRoute, children, }) {
     const [locationServerProps, setLocationServerProps] = useState(initialServerProps);
     const [serverProps, setServerProps] = useState({});
     const [pending, startTransition] = useTransition();
@@ -13,12 +11,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) => {
@@ -53,6 +51,7 @@ export function ServerPropsProvider({ initialServerProps, setServerPropsForRsc,
         setServerProps: setServerPropsCallback,
         setLocationServerProps: setLocationServerPropsCallback,
         getProposedLocationServerProps: getProposedLocationServerPropsCallback,
+        setRscResponseFromApiRoute,
     }), [
         pending,
         locationServerProps,
@@ -60,6 +59,7 @@ export function ServerPropsProvider({ initialServerProps, setServerPropsForRsc,
         setServerPropsCallback,
         setLocationServerPropsCallback,
         getProposedLocationServerPropsCallback,
+        setRscResponseFromApiRoute,
     ]);
     return (React.createElement(ServerPropsContext.Provider, { value: value }, children));
 }

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

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

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

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

package/dist/esnext/foundation/ServerRequestProvider/ServerRequestProvider.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { HydrogenRequest } from '../HydrogenRequest/HydrogenRequest.server';
-import type { QueryKey } from '../../types';
+import type { HydrogenRequest } from '../HydrogenRequest/HydrogenRequest.server.js';
+import type { QueryKey } from '../../types.js';
 declare type ServerRequestProviderProps = {
     request: HydrogenRequest;
     children: React.ReactNode;

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

@@ -1,7 +1,7 @@
 import React, { createContext, useContext } from 'react';
-import { getTime } from '../../utilities/timing';
-import { hashKey } from '../../utilities/hash';
-import { collectQueryTimings } from '../../utilities/log';
+import { getTime } from '../../utilities/timing.js';
+import { hashKey } from '../../utilities/hash.js';
+import { collectQueryTimings } from '../../utilities/log/index.js';
 // Context to inject current request in SSR
 const RequestContextSSR = createContext(null);
 // Cache to inject current request in RSC

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

@@ -1 +1 @@
-export * from './ServerRequestProvider';
+export * from './ServerRequestProvider.js';

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

@@ -1 +1 @@
-export * from './ServerRequestProvider';
+export * from './ServerRequestProvider.js';

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

@@ -1,4 +1,4 @@
-import type { ShopifyContextValue, LocalizationContextValue } from './types';
+import type { ShopifyContextValue, LocalizationContextValue } from './types.js';
 import React, { ReactNode } from 'react';
 export declare const ShopifyContext: React.Context<ShopifyContextValue | null>;
 export declare const LocalizationContext: React.Context<LocalizationContextValue | null>;

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

@@ -1,5 +1,5 @@
-import type { ShopifyProviderProps, LocalizationContextValue } from './types';
-import type { CountryCode, LanguageCode } from '../../storefront-api-types';
+import type { ShopifyProviderProps, LocalizationContextValue } from './types.js';
+import type { CountryCode, LanguageCode } from '../../storefront-api-types.js';
 export declare const SHOPIFY_PROVIDER_CONTEXT_KEY: unique symbol;
 /**
  * The `ShopifyProvider` component wraps your entire app and provides support for hooks.

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

@@ -1,9 +1,10 @@
 import React, { useMemo } from 'react';
-import { ShopifyProviderClient } from './ShopifyProvider.client';
-import { DEFAULT_COUNTRY, DEFAULT_LANGUAGE } from '../constants';
-import { useRequestCacheData, useServerRequest } from '../ServerRequestProvider';
-import { getOxygenVariable } from '../../utilities/storefrontApi';
-import { SHOPIFY_STOREFRONT_ID_VARIABLE } from '../../constants';
+import { ShopifyProviderClient } from './ShopifyProvider.client.js';
+import { DEFAULT_COUNTRY, DEFAULT_LANGUAGE } from '../constants.js';
+import { useRequestCacheData, useServerRequest, } from '../ServerRequestProvider/index.js';
+import { getOxygenVariable } from '../../utilities/storefrontApi.js';
+import { SHOPIFY_STOREFRONT_ID_VARIABLE } from '../../constants.js';
+import { getLocale } from '../../utilities/locale/index.js';
 function makeShopifyContext(shopifyConfig) {
     const countryCode = shopifyConfig.defaultCountryCode ?? DEFAULT_COUNTRY;
     const languageCode = shopifyConfig.defaultLanguageCode ?? DEFAULT_LANGUAGE;
@@ -71,7 +72,7 @@ export function getLocalizationContextValue(defaultLanguageCode, defaultCountryC
             language: {
                 isoCode: runtimeLanguageCode,
             },
-            locale: `${runtimeLanguageCode}-${runtimeCountryCode}`,
+            locale: getLocale(runtimeLanguageCode, runtimeCountryCode),
         };
     }, [defaultLanguageCode, defaultCountryCode, countryCode, languageCode]);
 }

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

@@ -1 +1 @@
-export { ShopifyContext } from './ShopifyProvider.client';
+export { ShopifyContext } from './ShopifyProvider.client.js';

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

@@ -1 +1 @@
-export { ShopifyContext } from './ShopifyProvider.client';
+export { ShopifyContext } from './ShopifyProvider.client.js';