@shopify/hydrogen 1.0.0-alpha.22 → 1.0.0

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

@@ -0,0 +1,53 @@
+import { Cookie } from '../Cookie/Cookie';
+import { v4 as uid } from 'uuid';
+/** The `MemorySessionStorage` component stores session data within Hydrogen runtime memory.
+ */
+export const MemorySessionStorage = function (
+/** The name of the cookie stored in the browser. */
+name, 
+/** An optional object to configure [how the cookie is persisted in the browser](https://shopify.dev/api/hydrogen/components/framework/cookie#cookie-options). */
+options) {
+    const sessions = new Map();
+    return function () {
+        const cookie = new Cookie(name, options);
+        return {
+            async get(request) {
+                const sid = cookie.getSessionId(request);
+                let sessionData;
+                if (sid && sessions.has(sid)) {
+                    const { expires, data } = sessions.get(sid);
+                    if (expires < new Date().getTime()) {
+                        sessions.delete(sid);
+                        sessionData = {};
+                    }
+                    else {
+                        sessionData = data;
+                    }
+                }
+                else {
+                    sessionData = {};
+                }
+                return sessionData;
+            },
+            async set(request, value) {
+                let sid = cookie.getSessionId(request);
+                if (!sid) {
+                    sid = uid();
+                }
+                sessions.set(sid, {
+                    data: value,
+                    expires: cookie.expires,
+                });
+                cookie.setSessionid(sid);
+                return cookie.serialize();
+            },
+            async destroy(request) {
+                const sid = cookie.getSessionId(request);
+                if (sid) {
+                    sessions.delete(sid);
+                }
+                return cookie.destroy();
+            },
+        };
+    };
+};

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

@@ -0,0 +1,5 @@
+declare type RedirectProps = {
+    to: string;
+};
+export default function Redirect({ to }: RedirectProps): null;
+export {};

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

@@ -0,0 +1,15 @@
+import { useEffect } from 'react';
+import { useNavigate } from '../../foundation/useNavigate/useNavigate';
+export default function Redirect({ to }) {
+    const navigate = useNavigate();
+    useEffect(() => {
+        if (to.startsWith('http')) {
+            window.location.href = to;
+        }
+        else {
+            navigate(to);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return null;
+}

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

@@ -0,0 +1,12 @@
+import { ReactElement } from 'react';
+export declare type RouteProps = {
+    /** The URL path where the route exists. The path can contain variables. For example, `/products/:handle`. */
+    path: string;
+    /** A reference to a React Server Component that's rendered when the route is active. */
+    page: ReactElement;
+};
+/**
+ * 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.
+ */
+export declare function Route({ path, page }: RouteProps): ReactElement | null;

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

@@ -0,0 +1,28 @@
+import React, { cloneElement } from 'react';
+import { useServerRequest } from '../ServerRequestProvider';
+import { matchPath } from '../../utilities/matchPath';
+import { RouteParamsProvider } from '../useRouteParams/RouteParamsProvider.client';
+/**
+ * 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.
+ */
+export function Route({ path, page }) {
+    const request = useServerRequest();
+    const { routeRendered, serverProps } = request.ctx.router;
+    if (routeRendered)
+        return null;
+    if (path === '*') {
+        request.ctx.router.routeRendered = true;
+        return cloneElement(page, serverProps);
+    }
+    const match = matchPath(serverProps.pathname, {
+        path,
+        exact: true,
+    });
+    if (match) {
+        request.ctx.router.routeRendered = true;
+        request.ctx.router.routeParams = match.params;
+        return (React.createElement(RouteParamsProvider, { routeParams: match.params, basePath: '/' }, cloneElement(page, { params: match.params || {}, ...serverProps })));
+    }
+    return null;
+}

package/dist/esnext/foundation/Router/BrowserRouter.client.d.ts

@@ -0,0 +1,14 @@
+import { BrowserHistory, Location } from 'history';
+import React, { FC, ReactNode } from 'react';
+declare type RouterContextValue = {
+    history: BrowserHistory;
+    location: Location;
+};
+export declare const RouterContext: React.Context<RouterContextValue | undefined>;
+export declare const BrowserRouter: FC<{
+    history?: BrowserHistory;
+    children: ReactNode;
+}>;
+export declare function useRouter(): RouterContextValue;
+export declare function useLocation(): Location;
+export {};

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

@@ -0,0 +1,138 @@
+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';
+export const RouterContext = createContext(undefined);
+let isFirstLoad = true;
+const positions = {};
+export const BrowserRouter = ({ history: pHistory, children }) => {
+    if (META_ENV_SSR)
+        return React.createElement(React.Fragment, null, children);
+    /* eslint-disable react-hooks/rules-of-hooks */
+    const history = useMemo(() => pHistory || createBrowserHistory(), [pHistory]);
+    const [location, setLocation] = useState(history.location);
+    const [scrollNeedsRestoration, setScrollNeedsRestoration] = useState(false);
+    const { pending, locationServerProps, setLocationServerProps } = useInternalServerProps();
+    useScrollRestoration({
+        location,
+        pending,
+        serverProps: locationServerProps,
+        scrollNeedsRestoration,
+        onFinishNavigating: () => setScrollNeedsRestoration(false),
+    });
+    useLayoutEffect(() => {
+        const unlisten = history.listen(({ location: newLocation, action }) => {
+            positions[location.key] = window.scrollY;
+            setLocationServerProps({
+                pathname: newLocation.pathname,
+                search: newLocation.search,
+            });
+            setLocation(newLocation);
+            const state = (newLocation.state ?? {});
+            /**
+             * "pop" navigations, like forward/backward buttons, always restore scroll position
+             * regardless of what the original forward navigation intent was.
+             */
+            const needsScrollRestoration = action === 'POP' || !!state.scroll;
+            setScrollNeedsRestoration(needsScrollRestoration);
+        });
+        return () => unlisten();
+    }, [
+        history,
+        location,
+        setScrollNeedsRestoration,
+        setLocation,
+        setLocationServerProps,
+    ]);
+    /* eslint-enable react-hooks/rules-of-hooks */
+    return (React.createElement(RouterContext.Provider, { value: {
+            history,
+            location,
+        } }, children));
+};
+export function useRouter() {
+    if (META_ENV_SSR)
+        return { location: {}, history: {} };
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const router = useContext(RouterContext);
+    if (router)
+        return router;
+    throw new Error('Router hooks and <Link> component must be used within a <Router> component');
+}
+export function useLocation() {
+    return useRouter().location;
+}
+/**
+ * Run a callback before browser unload.
+ */
+function useBeforeUnload(callback) {
+    React.useEffect(() => {
+        window.addEventListener('beforeunload', callback);
+        return () => {
+            window.removeEventListener('beforeunload', callback);
+        };
+    }, [callback]);
+}
+function useScrollRestoration({ location, pending, serverProps, scrollNeedsRestoration, onFinishNavigating, }) {
+    /**
+     * Browsers have an API for scroll restoration. We wait for the page to load first,
+     * in case the browser is able to restore scroll position automatically, and then
+     * set it to manual mode.
+     */
+    useEffect(() => {
+        window.history.scrollRestoration = 'manual';
+    }, []);
+    /**
+     * If the page is reloading, allow the browser to handle its own scroll restoration.
+     */
+    useBeforeUnload(useCallback(() => {
+        window.history.scrollRestoration = 'auto';
+    }, []));
+    useLayoutEffect(() => {
+        // The app has just loaded
+        if (isFirstLoad || !scrollNeedsRestoration) {
+            isFirstLoad = false;
+            return;
+        }
+        const position = positions[location.key];
+        /**
+         * When serverState gets updated, `pending` is true while the fetch is in progress.
+         * When that resolves, the serverState is updated. We should wait until the internal
+         * location pointer and serverState match, and pending is false, to do any scrolling.
+         */
+        const finishedNavigating = !pending &&
+            location.pathname === serverProps.pathname &&
+            location.search === serverProps.search;
+        if (!finishedNavigating) {
+            return;
+        }
+        // If there is a location hash, scroll to it
+        if (location.hash) {
+            const element = document.querySelector(location.hash);
+            if (element) {
+                element.scrollIntoView();
+                onFinishNavigating();
+                return;
+            }
+        }
+        // If we have a matching position, scroll to it
+        if (position) {
+            window.scrollTo(0, position);
+            onFinishNavigating();
+            return;
+        }
+        // Scroll to the top of new pages
+        window.scrollTo(0, 0);
+        onFinishNavigating();
+    }, [
+        location.pathname,
+        location.search,
+        location.hash,
+        location.key,
+        pending,
+        serverProps.pathname,
+        serverProps.search,
+        scrollNeedsRestoration,
+        onFinishNavigating,
+    ]);
+}

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

@@ -0,0 +1,10 @@
+import { ReactElement } from 'react';
+declare type RouterProps = {
+    /** Any React elements. */
+    children: Array<ReactElement> | ReactElement;
+};
+/**
+ * The `Router` component provides the context for routing in your Hydrogen app.
+ */
+export declare function Router({ children }: RouterProps): ReactElement;
+export {};

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { BrowserRouter } from './BrowserRouter.client';
+/**
+ * The `Router` component provides the context for routing in your Hydrogen app.
+ */
+export function Router({ children }) {
+    return React.createElement(BrowserRouter, null, children);
+}

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

@@ -0,0 +1,41 @@
+import React, { ReactNode } from 'react';
+declare global {
+    var __HYDROGEN_DEV__: boolean;
+    var __HYDROGEN_TEST__: boolean;
+}
+export interface LocationServerProps {
+    pathname: string;
+    search: string;
+}
+export interface ServerProps {
+    [key: string]: any;
+}
+declare type ServerPropsSetterInput = ((prev: ServerProps) => Partial<ServerProps>) | Partial<ServerProps> | string;
+export interface ServerPropsSetter {
+    (input: ServerPropsSetterInput, propValue?: any): void;
+}
+interface ProposedServerPropsSetter {
+    (input: ServerPropsSetterInput, propValue?: any): LocationServerProps;
+}
+interface BaseServerPropsContextValue {
+    pending: boolean;
+}
+export interface InternalServerPropsContextValue extends BaseServerPropsContextValue {
+    setLocationServerProps: ServerPropsSetter;
+    setServerProps: ServerPropsSetter;
+    serverProps: ServerProps;
+    locationServerProps: LocationServerProps;
+    getProposedLocationServerProps: ProposedServerPropsSetter;
+}
+export interface ServerPropsContextValue extends BaseServerPropsContextValue {
+    serverProps: ServerProps;
+    setServerProps: ServerPropsSetter;
+}
+export declare const ServerPropsContext: React.Context<InternalServerPropsContextValue>;
+interface ServerPropsProviderProps {
+    initialServerProps: LocationServerProps;
+    setServerPropsForRsc: React.Dispatch<React.SetStateAction<LocationServerProps>>;
+    children: ReactNode;
+}
+export declare function ServerPropsProvider({ initialServerProps, setServerPropsForRsc, children, }: ServerPropsProviderProps): JSX.Element;
+export {};

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

@@ -0,0 +1,65 @@
+import React, { createContext, useMemo, useCallback, 
+// @ts-ignore
+useTransition, useState, } from 'react';
+const PRIVATE_PROPS = ['request', 'response'];
+export const ServerPropsContext = createContext(null);
+export function ServerPropsProvider({ initialServerProps, setServerPropsForRsc, children, }) {
+    const [locationServerProps, setLocationServerProps] = useState(initialServerProps);
+    const [serverProps, setServerProps] = useState({});
+    const [pending, startTransition] = useTransition();
+    const setServerPropsCallback = useCallback((input, propValue) => {
+        startTransition(() => {
+            setServerProps((prev) => getNewValue(prev, input, propValue));
+            setServerPropsForRsc((prev) => getNewValue(prev, input, propValue));
+        });
+    }, [setServerProps, setServerPropsForRsc]);
+    const setLocationServerPropsCallback = useCallback((input, propValue) => {
+        // Flush the existing user server state when location changes, leaving only the persisted state
+        startTransition(() => {
+            setServerPropsForRsc((prev) => getNewValue(prev, input, propValue));
+            setServerProps({});
+            setLocationServerProps((prev) => getNewValue(prev, input, propValue));
+        });
+    }, [setServerProps, setServerPropsForRsc, setLocationServerProps]);
+    const getProposedLocationServerPropsCallback = useCallback((input, propValue) => {
+        return getNewValue(locationServerProps, input, propValue);
+    }, [locationServerProps]);
+    function getNewValue(prev, input, propValue) {
+        let newValue;
+        if (typeof input === 'function') {
+            newValue = input(prev);
+        }
+        else if (typeof input === 'string') {
+            newValue = { [input]: propValue };
+        }
+        else {
+            newValue = input;
+        }
+        if (__HYDROGEN_DEV__) {
+            const privateProp = PRIVATE_PROPS.find((prop) => prop in newValue);
+            if (privateProp) {
+                console.warn(`Custom "${privateProp}" property in server state is ignored. Use a different name.`);
+            }
+        }
+        return {
+            ...prev,
+            ...newValue,
+        };
+    }
+    const value = useMemo(() => ({
+        pending,
+        locationServerProps,
+        serverProps,
+        setServerProps: setServerPropsCallback,
+        setLocationServerProps: setLocationServerPropsCallback,
+        getProposedLocationServerProps: getProposedLocationServerPropsCallback,
+    }), [
+        pending,
+        locationServerProps,
+        serverProps,
+        setServerPropsCallback,
+        setLocationServerPropsCallback,
+        getProposedLocationServerPropsCallback,
+    ]);
+    return (React.createElement(ServerPropsContext.Provider, { value: value }, children));
+}

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

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

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

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

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { HydrogenRequest } from '../HydrogenRequest/HydrogenRequest.server';
+import type { QueryKey } from '../../types';
+declare type ServerRequestProviderProps = {
+    request: HydrogenRequest;
+    children: React.ReactNode;
+};
+export declare function ServerRequestProvider({ request, children, }: ServerRequestProviderProps): JSX.Element;
+export declare function useServerRequest(): HydrogenRequest;
+declare type RequestCacheResult<T> = {
+    data: T;
+    error?: never;
+} | {
+    data?: never;
+    error: Response | Error;
+};
+/**
+ * Returns data stored in the request cache.
+ * It will throw the promise if data is not ready.
+ */
+export declare function useRequestCacheData<T>(key: QueryKey, fetcher: (request: HydrogenRequest) => T | Promise<T>): RequestCacheResult<T>;
+export declare function preloadRequestCacheData(request: HydrogenRequest): void;
+export {};

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

@@ -0,0 +1,125 @@
+import React, { createContext, useContext } from 'react';
+import { getTime } from '../../utilities/timing';
+import { hashKey } from '../../utilities/hash';
+import { collectQueryTimings } from '../../utilities/log';
+// Context to inject current request in SSR
+const RequestContextSSR = createContext(null);
+// Cache to inject current request in RSC
+function requestCacheRSC() {
+    return new Map();
+}
+requestCacheRSC.key = Symbol.for('HYDROGEN_REQUEST');
+function getInternalReactDispatcher() {
+    return (
+    // @ts-ignore
+    React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
+        .ReactCurrentDispatcher.current || {});
+}
+function isRsc() {
+    // This flag is added by RSC Vite plugin
+    return __HYDROGEN_TEST__ || !!getInternalReactDispatcher().isRsc;
+}
+// Note: use this only during RSC/Flight rendering. The React dispatcher
+// for SSR/Fizz rendering does not implement getCacheForType.
+function getCacheForType(resource) {
+    const dispatcher = getInternalReactDispatcher();
+    // @ts-ignore
+    if (__HYDROGEN_TEST__ && !dispatcher.getCacheForType) {
+        // Jest does not have access to the RSC runtime, mock it here:
+        // @ts-ignore
+        return (globalThis.__jestRscCache ??= resource());
+    }
+    return dispatcher.getCacheForType(resource);
+}
+export function ServerRequestProvider({ request, children, }) {
+    if (isRsc()) {
+        // Save the request object in a React cache that is
+        // scoped to this current rendering.
+        const requestCache = getCacheForType(requestCacheRSC);
+        requestCache.set(requestCacheRSC.key, request);
+        return React.createElement(React.Fragment, null, children);
+    }
+    // Use a normal provider in SSR to make the request object
+    // available in the current rendering.
+    return (React.createElement(RequestContextSSR.Provider, { value: request }, children));
+}
+export function useServerRequest() {
+    const request = isRsc()
+        ? getCacheForType(requestCacheRSC)?.get(requestCacheRSC.key)
+        : useContext(RequestContextSSR); // eslint-disable-line react-hooks/rules-of-hooks
+    if (!request) {
+        if (__HYDROGEN_TEST__) {
+            // Unit tests are not wrapped in ServerRequestProvider.
+            // This mocks it, instead of providing it in every test.
+            return { ctx: {} };
+        }
+        throw new Error('No ServerRequest Context found');
+    }
+    return request;
+}
+/**
+ * Returns data stored in the request cache.
+ * It will throw the promise if data is not ready.
+ */
+export function useRequestCacheData(key, fetcher) {
+    const request = useServerRequest();
+    const cache = request.ctx.cache;
+    const cacheKey = hashKey(key);
+    if (!cache.has(cacheKey)) {
+        let result;
+        let promise;
+        cache.set(cacheKey, () => {
+            if (result !== undefined) {
+                collectQueryTimings(request, key, 'rendered');
+                return result;
+            }
+            if (!promise) {
+                const startApiTime = getTime();
+                const maybePromise = fetcher(request);
+                if (!(maybePromise instanceof Promise)) {
+                    result = { data: maybePromise };
+                    return result;
+                }
+                promise = maybePromise.then((data) => {
+                    result = { data };
+                    collectQueryTimings(request, key, 'resolved', getTime() - startApiTime);
+                }, (error) => (result = { error }));
+            }
+            throw promise;
+        });
+    }
+    // Making sure the promise has returned data because it can be initated by a preload request,
+    // otherwise, we throw the promise
+    const result = cache.get(cacheKey).call();
+    if (result instanceof Promise)
+        throw result;
+    return result;
+}
+export function preloadRequestCacheData(request) {
+    const preloadQueries = request.getPreloadQueries();
+    const { cache } = request.ctx;
+    preloadQueries?.forEach((preloadQuery, cacheKey) => {
+        collectQueryTimings(request, preloadQuery.key, 'preload');
+        if (!cache.has(cacheKey)) {
+            let result;
+            let promise;
+            cache.set(cacheKey, () => {
+                if (result !== undefined) {
+                    collectQueryTimings(request, preloadQuery.key, 'rendered');
+                    return result;
+                }
+                if (!promise) {
+                    const startApiTime = getTime();
+                    promise = preloadQuery.fetcher(request).then((data) => {
+                        result = { data };
+                        collectQueryTimings(request, preloadQuery.key, 'resolved', getTime() - startApiTime);
+                    }, (error) => {
+                        result = { error };
+                    });
+                }
+                return promise;
+            });
+        }
+        cache.get(cacheKey).call();
+    });
+}

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

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

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

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

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

@@ -0,0 +1,30 @@
+import React, { ReactNode } from 'react';
+declare global {
+    var __HYDROGEN_DEV__: boolean;
+}
+export interface ServerState {
+    pathname: string;
+    search: string;
+    [key: string]: any;
+}
+declare type ServerStateSetterInput = ((prev: ServerState) => Partial<ServerState>) | Partial<ServerState> | string;
+export interface ServerStateSetter {
+    (input: ServerStateSetterInput, propValue?: any): void;
+}
+interface ProposedServerStateSetter {
+    (input: ServerStateSetterInput, propValue?: any): ServerState;
+}
+export interface ServerStateContextValue {
+    pending: boolean;
+    serverState: ServerState;
+    setServerState: ServerStateSetter;
+    getProposedServerState: ProposedServerStateSetter;
+}
+export declare const ServerStateContext: React.Context<ServerStateContextValue>;
+interface ServerStateProviderProps {
+    serverState: ServerState;
+    setServerState: React.Dispatch<React.SetStateAction<ServerState>>;
+    children: ReactNode;
+}
+export declare function ServerStateProvider({ serverState, setServerState, children, }: ServerStateProviderProps): JSX.Element;
+export {};

package/dist/esnext/foundation/ServerStateProvider/ServerStateProvider.js

@@ -0,0 +1,59 @@
+import React, { createContext, useMemo, useCallback, 
+// @ts-ignore
+useTransition, } from 'react';
+const PRIVATE_PROPS = ['request', 'response'];
+export const ServerStateContext = createContext(null);
+export function ServerStateProvider({ serverState, setServerState, children, }) {
+    const [pending, startTransition] = useTransition();
+    const setServerStateCallback = useCallback((input, propValue) => {
+        /**
+         * By wrapping this state change in a transition, React renders the new state
+         * concurrently in a new "tree" instead of Suspending and showing the (blank)
+         * fallback. This is preferred behavior, though we may want to revisit how
+         * we make this decision globally for the developer - and consider providing
+         * the `pending` flag also provided by the hook to display in the UI.
+         */
+        startTransition(() => {
+            return setServerState((prev) => getNewServerState(prev, input, propValue));
+        });
+    }, [setServerState, startTransition]);
+    const getProposedServerStateCallback = useCallback((input, propValue) => {
+        return getNewServerState(serverState, input, propValue);
+    }, [serverState]);
+    function getNewServerState(prev, input, propValue) {
+        let newValue;
+        if (typeof input === 'function') {
+            newValue = input(prev);
+        }
+        else if (typeof input === 'string') {
+            newValue = { [input]: propValue };
+        }
+        else {
+            newValue = input;
+        }
+        if (!newValue)
+            return { ...prev };
+        if (__HYDROGEN_DEV__) {
+            const privateProp = PRIVATE_PROPS.find((prop) => prop in newValue);
+            if (privateProp) {
+                console.warn(`Custom "${privateProp}" property in server state is ignored. Use a different name.`);
+            }
+        }
+        return {
+            ...prev,
+            ...newValue,
+        };
+    }
+    const value = useMemo(() => ({
+        pending,
+        serverState,
+        setServerState: setServerStateCallback,
+        getProposedServerState: getProposedServerStateCallback,
+    }), [
+        serverState,
+        getProposedServerStateCallback,
+        setServerStateCallback,
+        pending,
+    ]);
+    return (React.createElement(ServerStateContext.Provider, { value: value }, children));
+}

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

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

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

@@ -0,0 +1,8 @@
+import React, { createContext } from 'react';
+export const ShopifyContext = createContext(null);
+export function ShopifyProviderClient({ children, shopifyConfig, }) {
+    if (!shopifyConfig) {
+        throw new Error('The `shopifyConfig` prop should be passed to `ShopifyProvider`');
+    }
+    return (React.createElement(ShopifyContext.Provider, { value: shopifyConfig }, children));
+}