@shopify/hydrogen 0.0.0-experimental-20220526194818

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

@@ -0,0 +1,19 @@
+import React, { useMemo } from 'react';
+import { useCart } from '../CartProvider';
+import { ShopPayButton } from '../ShopPayButton';
+/**
+ * The `CartShopPayButton` component renders a `ShopPayButton` for the items in the cart.
+ * It must be a descendent of a `CartProvider` component.
+ */
+export function CartShopPayButton({ 
+/** A string of classes to apply to the `div` that wraps the `shop-pay-button` web component. */
+className, }) {
+    const { lines } = useCart();
+    const idsAndQuantities = useMemo(() => {
+        return lines.map((line) => ({
+            id: line.merchandise.id,
+            quantity: line.quantity,
+        }));
+    }, [lines]);
+    return (React.createElement(ShopPayButton, { className: className, variantIdsAndQuantities: idsAndQuantities }));
+}

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

@@ -0,0 +1 @@
+export { CartShopPayButton } from './CartShopPayButton.client';

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

@@ -0,0 +1 @@
+export { CartShopPayButton } from './CartShopPayButton.client';

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

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

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

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

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

@@ -0,0 +1,21 @@
+import { YouTube, Vimeo } from '../../utilities';
+import type { ExternalVideo as ExternalVideoType } from '../../storefront-api-types';
+import type { PartialDeep } from 'type-fest';
+interface ExternalVideoProps {
+    /**
+     * An object with fields that correspond to the Storefront API's [ExternalVideo object](https://shopify.dev/api/storefront/reference/products/externalvideo).
+     */
+    data: PartialDeep<ExternalVideoType>;
+    /** An object containing the options available for either
+     * [YouTube](https://developers.google.com/youtube/player_parameters#Parameters) or
+     * [Vimeo](https://vimeo.zendesk.com/hc/en-us/articles/360001494447-Using-Player-Parameters).
+     */
+    options?: YouTube | Vimeo;
+}
+declare type PropsWeControl = 'src';
+/**
+ * The `ExternalVideo` component renders an embedded video for the Storefront
+ * API's [ExternalVideo object](https://shopify.dev/api/storefront/reference/products/externalvideo).
+ */
+export declare function ExternalVideo(props: Omit<JSX.IntrinsicElements['iframe'], PropsWeControl> & ExternalVideoProps): JSX.Element;
+export {};

package/dist/esnext/components/ExternalVideo/ExternalVideo.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { useEmbeddedVideoUrl } from '../../utilities';
+/**
+ * The `ExternalVideo` component renders an embedded video for the Storefront
+ * API's [ExternalVideo object](https://shopify.dev/api/storefront/reference/products/externalvideo).
+ */
+export function ExternalVideo(props) {
+    const { data, options, id = data.id, frameBorder = '0', allow = 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture', allowFullScreen = true, ...passthroughProps } = props;
+    if (!data.embedUrl) {
+        throw new Error(`<ExternalVideo/> requires the 'embedUrl' property`);
+    }
+    const url = useEmbeddedVideoUrl(data.embedUrl, options);
+    return (React.createElement("iframe", { ...passthroughProps, id: id !== null && id !== void 0 ? id : data.embedUrl, frameBorder: frameBorder, allow: allow, allowFullScreen: allowFullScreen, src: url }));
+}

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

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

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

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

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

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import type { Image as ImageType } from '../../storefront-api-types';
+import type { PartialDeep, Simplify, SetRequired } from 'type-fest';
+declare type HtmlImageProps = React.ImgHTMLAttributes<HTMLImageElement>;
+declare type ImageProps<GenericLoaderOpts> = Simplify<ShopifyImageProps | ExternalImageProps<GenericLoaderOpts>>;
+export declare function Image<GenericLoaderOpts>(props: ImageProps<GenericLoaderOpts>): JSX.Element;
+export declare type ShopifyLoaderOptions = {
+    crop?: 'top' | 'bottom' | 'left' | 'right' | 'center';
+    scale?: 2 | 3;
+    width?: HtmlImageProps['width'] | ImageType['width'];
+    height?: HtmlImageProps['height'] | ImageType['height'];
+};
+export declare type ShopifyLoaderParams = Simplify<ShopifyLoaderOptions & {
+    src: ImageType['url'];
+}>;
+export declare type ShopifyImageProps = Omit<HtmlImageProps, 'src'> & {
+    /** An object with fields that correspond to the Storefront API's
+     * [Image object](https://shopify.dev/api/storefront/reference/common-objects/image).
+     * The `data` prop is required if `src` isn't used, but both props shouldn't be used
+     * at the same time. If both `src` and `data` are passed, then `data` takes priority.
+     */
+    data: PartialDeep<ImageType>;
+    /** A custom function that generates the image URL. Parameters passed in
+     * are either `ShopifyLoaderParams` if using the `data` prop, or the
+     * `LoaderOptions` object that you pass to `loaderOptions`.
+     */
+    loader?: (params: ShopifyLoaderParams) => string;
+    /** An object of `loader` function options. For example, if the `loader` function
+     * requires a `scale` option, then the value can be a property of the
+     * `loaderOptions` object (for example, `{scale: 2}`). When the `data` prop
+     * is used, the object shape will be `ShopifyLoaderOptions`. When the `src`
+     * prop is used, the data shape is whatever you define it to be, and this shape
+     * will be passed to `loader`.
+     */
+    loaderOptions?: ShopifyLoaderOptions;
+    /**
+     * 'src' shouldn't be passed when 'data' is used.
+     */
+    src?: never;
+};
+declare type LoaderProps<GenericLoaderOpts> = {
+    /** A URL string. This string can be an absolute path or a relative path depending
+     * on the `loader`. The `src` prop is required if `data` isn't used, but both
+     * props shouldn't be used at the same time. If both `src` and `data` are passed,
+     * then `data` takes priority.
+     */
+    src: HtmlImageProps['src'];
+    /** The integer or string value for the width of the image. This is a required prop
+     * when `src` is present.
+     */
+    width: HtmlImageProps['width'];
+    /** The integer or string value for the height of the image. This is a required prop
+     * when `src` is present.
+     */
+    height: HtmlImageProps['height'];
+    /** An object of `loader` function options. For example, if the `loader` function
+     * requires a `scale` option, then the value can be a property of the
+     * `loaderOptions` object (for example, `{scale: 2}`). When the `data` prop
+     * is used, the object shape will be `ShopifyLoaderOptions`. When the `src`
+     * prop is used, the data shape is whatever you define it to be, and this shape
+     * will be passed to `loader`.
+     */
+    loaderOptions?: GenericLoaderOpts;
+};
+declare type ExternalImageProps<GenericLoaderOpts> = SetRequired<HtmlImageProps, 'src' | 'width' | 'height'> & {
+    /** A custom function that generates the image URL. Parameters passed in
+     * are either `ShopifyLoaderParams` if using the `data` prop, or the
+     * `LoaderOptions` object that you pass to `loaderOptions`.
+     */
+    loader?: (params: LoaderProps<GenericLoaderOpts>) => string;
+    /** An object of `loader` function options. For example, if the `loader` function
+     * requires a `scale` option, then the value can be a property of the
+     * `loaderOptions` object (for example, `{scale: 2}`). When the `data` prop
+     * is used, the object shape will be `ShopifyLoaderOptions`. When the `src`
+     * prop is used, the data shape is whatever you define it to be, and this shape
+     * will be passed to `loader`.
+     */
+    loaderOptions?: GenericLoaderOpts;
+    /**
+     * 'data' shouldn't be passed when 'src' is used.
+     */
+    data?: never;
+};
+export {};

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

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { getShopifyImageDimensions, shopifyImageLoader } from '../../utilities';
+export function Image(props) {
+    if (!props.data && !props.src) {
+        throw new Error(`<Image/>: requires either a 'data' or 'src' prop.`);
+    }
+    if (props.data && props.src) {
+        console.warn(`<Image/>: using both 'data' and 'src' props is not supported; using the 'data' prop by default`);
+    }
+    if (props.data) {
+        return React.createElement(ShopifyImage, { ...props });
+    }
+    else {
+        return React.createElement(ExternalImage, { ...props });
+    }
+}
+function ShopifyImage({ data, width, height, loading, loader = shopifyImageLoader, loaderOptions, ...rest }) {
+    var _a, _b, _c;
+    if (!data.url) {
+        throw new Error(`<Image/>: the 'data' prop requires the 'url' property`);
+    }
+    if (!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. ${data.id ? `Image ID: ${data.id}` : ''}`);
+    }
+    const { width: finalWidth, height: finalHeight } = getShopifyImageDimensions(data, loaderOptions);
+    if (!finalWidth || !finalHeight) {
+        console.warn(`<Image/>: the 'data' prop requires either 'width' or 'data.width', and 'height' or 'data.height' properties`);
+    }
+    let finalSrc = data.url;
+    if (loader) {
+        finalSrc = loader({
+            ...loaderOptions,
+            src: data.url,
+            width: finalWidth,
+            height: finalHeight,
+        });
+    }
+    /* eslint-disable hydrogen/prefer-image-component */
+    return (React.createElement("img", { id: (_a = data.id) !== null && _a !== void 0 ? _a : '', alt: (_c = (_b = data.altText) !== null && _b !== void 0 ? _b : rest.alt) !== null && _c !== void 0 ? _c : '', loading: loading !== null && loading !== void 0 ? loading : 'lazy', ...rest, src: finalSrc, width: finalWidth !== null && finalWidth !== void 0 ? finalWidth : undefined, height: finalHeight !== null && finalHeight !== void 0 ? finalHeight : undefined }));
+    /* eslint-enable hydrogen/prefer-image-component */
+}
+function ExternalImage({ src, width, height, alt, loader, loaderOptions, loading, ...rest }) {
+    if (!width || !height) {
+        throw new Error(`<Image/>: when 'src' is provided, 'width' and 'height' are required and need to be valid values (i.e. greater than zero). Provided values: 'src': ${src}, 'width': ${width}, 'height': ${height}`);
+    }
+    if (!alt) {
+        console.warn(`<Image/>: when 'src' is provided, 'alt' should also be provided`);
+    }
+    let finalSrc = src;
+    if (loader) {
+        finalSrc = loader({ src, width, height, ...loaderOptions });
+        if (typeof finalSrc !== 'string' || !finalSrc) {
+            throw new Error(`<Image/>: 'loader' did not return a valid string`);
+        }
+    }
+    /* eslint-disable hydrogen/prefer-image-component */
+    return (React.createElement("img", { ...rest, src: finalSrc, width: width, height: height, alt: alt !== null && alt !== void 0 ? alt : '', loading: loading !== null && loading !== void 0 ? loading : 'lazy' }));
+    /* eslint-enable hydrogen/prefer-image-component */
+}

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

@@ -0,0 +1,2 @@
+export { Image } from './Image';
+export type { ShopifyLoaderParams, ShopifyLoaderOptions, ShopifyImageProps, } from './Image';

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

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

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

@@ -0,0 +1,23 @@
+import React from 'react';
+export interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> {
+    /** The destination URL that the link points to. This is the `href` attribute of the underlying `<a>` element. */
+    to: string;
+    /** Whether to update the state object or URL of the current history entry. Refer to the [history.replaceState documentation](https://developer.mozilla.org/en-US/docs/Web/API/History/replaceState). */
+    replace?: boolean;
+    /** The custom client state with the navigation. */
+    clientState?: any;
+    /** Whether to reload the whole document on navigation. */
+    reloadDocument?: boolean;
+    /** Whether to prefetch the link source when the user signals intent. Defaults to `true`. For more information, refer to [Prefetching a link source](https://shopify.dev/custom-storefronts/hydrogen/framework/routes#prefetching-a-link-source). */
+    prefetch?: boolean;
+}
+/**
+ * The `Link` component is used to navigate between routes. Because it renders an underlying `<a>` element, all
+ * properties available to the `<a>` element are also available to the `Link` component.
+ * For more information, refer to the [`<a>` element documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes).
+ */
+export declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
+/**
+ * Credit: Remix's <Link> component.
+ */
+export declare function composeEventHandlers<EventType extends React.SyntheticEvent | Event>(theirHandler: ((event: EventType) => any) | undefined, ourHandler: (event: EventType) => any): (event: EventType) => any;

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

@@ -0,0 +1,135 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { useRouter } from '../../foundation/Router/BrowserRouter.client';
+import { createPath } from 'history';
+import { useNavigate } from '../../foundation/useNavigate/useNavigate';
+import { RSC_PATHNAME } from '../../constants';
+import { useInternalServerProps } from '../../foundation/useServerProps/use-server-props';
+/**
+ * The `Link` component is used to navigate between routes. Because it renders an underlying `<a>` element, all
+ * properties available to the `<a>` element are also available to the `Link` component.
+ * For more information, refer to the [`<a>` element documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes).
+ */
+export const Link = React.forwardRef(function Link(props, ref) {
+    const navigate = useNavigate();
+    const { location } = useRouter();
+    const [_, startTransition] = React.useTransition();
+    /**
+     * Inspired by Remix's Link component
+     */
+    const [shouldPrefetch, setShouldPrefetch] = useState(false);
+    const [maybePrefetch, setMaybePrefetch] = useState(false);
+    const { reloadDocument, target, replace: _replace, to, onClick, clientState, prefetch = true, } = props;
+    const internalClick = useCallback((e) => {
+        if (onClick)
+            onClick(e);
+        if (!reloadDocument && // do regular browser stuff
+            e.button === 0 && // Ignore everything but left clicks
+            (!target || target === '_self') && // Let browser handle "target=_blank"
+            !isModifiedEvent(e) // Ignore modifier key clicks
+        ) {
+            e.preventDefault();
+            // If the URL hasn't changed, the regular <a> will do a replace
+            const replace = !!_replace || createPath(location) === createPath({ pathname: to });
+            navigate(to, {
+                replace,
+                clientState,
+            });
+        }
+    }, [
+        reloadDocument,
+        target,
+        _replace,
+        to,
+        clientState,
+        onClick,
+        location,
+        navigate,
+    ]);
+    const signalPrefetchIntent = () => {
+        /**
+         * startTransition to yield to more important updates
+         */
+        startTransition(() => {
+            if (prefetch) {
+                setMaybePrefetch(true);
+            }
+        });
+    };
+    const cancelPrefetchIntent = () => {
+        /**
+         * startTransition to yield to more important updates
+         */
+        startTransition(() => {
+            if (prefetch) {
+                setMaybePrefetch(false);
+            }
+        });
+    };
+    /**
+     * Wrapping `maybePrefetch` inside useEffect allows the user to quickly graze over
+     * a link without triggering a prefetch.
+     */
+    useEffect(() => {
+        if (maybePrefetch) {
+            const id = setTimeout(() => {
+                setShouldPrefetch(true);
+            }, 100);
+            return () => {
+                clearTimeout(id);
+            };
+        }
+    }, [maybePrefetch]);
+    const onMouseEnter = composeEventHandlers(props.onMouseEnter, signalPrefetchIntent);
+    const onMouseLeave = composeEventHandlers(props.onMouseLeave, cancelPrefetchIntent);
+    const onFocus = composeEventHandlers(props.onFocus, signalPrefetchIntent);
+    const onBlur = composeEventHandlers(props.onBlur, cancelPrefetchIntent);
+    const onTouchStart = composeEventHandlers(props.onTouchStart, signalPrefetchIntent);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("a", { ...without(props, [
+                'to',
+                'replace',
+                'clientState',
+                'reloadDocument',
+                'prefetch',
+            ]), ref: ref, onClick: internalClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur, onTouchStart: onTouchStart, href: props.to }, props.children),
+        shouldPrefetch && React.createElement(Prefetch, { pathname: to })));
+});
+function Prefetch({ pathname }) {
+    const { getProposedLocationServerProps } = useInternalServerProps();
+    const { location } = useRouter();
+    const newPath = createPath({ pathname });
+    if (pathname.startsWith('http') || newPath === createPath(location)) {
+        return null;
+    }
+    const newLocation = new URL(newPath, window.location.href);
+    const proposedServerState = getProposedLocationServerProps({
+        pathname: newLocation.pathname,
+        search: newLocation.search,
+    });
+    const href = `${RSC_PATHNAME}?state=` +
+        encodeURIComponent(JSON.stringify(proposedServerState));
+    return React.createElement("link", { rel: "prefetch", as: "fetch", href: href });
+}
+/**
+ * Credit: Remix's <Link> component.
+ */
+export function composeEventHandlers(theirHandler, ourHandler) {
+    return (event) => {
+        theirHandler === null || theirHandler === void 0 ? void 0 : theirHandler(event);
+        if (!event.defaultPrevented) {
+            ourHandler(event);
+        }
+    };
+}
+function isModifiedEvent(event) {
+    return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
+}
+function without(obj, props) {
+    const newObj = {};
+    for (const key of Object.keys(obj)) {
+        if (!props.includes(key)) {
+            newObj[key] = obj[key];
+        }
+    }
+    return newObj;
+}

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

@@ -0,0 +1 @@
+export { Link } from './Link.client';

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

@@ -0,0 +1 @@
+export { Link } from './Link.client';

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

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+import { Localization } from './LocalizationContext.client';
+export default function LocalizationClientProvider({ localization, children, }: {
+    children: ReactNode;
+    localization: Localization;
+}): JSX.Element;

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

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

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

@@ -0,0 +1,6 @@
+import type { LocalizationQuery } from './LocalizationProvider.server';
+export declare type Localization = LocalizationQuery['localization'];
+export interface LocalizationContextValue {
+    country?: Localization['country'];
+}
+export declare const LocalizationContext: import("react").Context<LocalizationContextValue | null>;

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

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export const LocalizationContext = createContext(null);

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

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+import { PreloadOptions } from '../../types';
+import { Country } from '../../storefront-api-types';
+export interface LocalizationProviderProps {
+    /** A `ReactNode` element. */
+    children: ReactNode;
+    /** Whether to preload the query. Defaults to `false`. Specify `true` to
+     * [preload the query](https://shopify.dev/custom-storefronts/hydrogen/framework/preloaded-queries) for the URL
+     * or `'*'` to preload the query for all requests.
+     */
+    preload: PreloadOptions;
+}
+/**
+ * The `LocalizationProvider` component automatically queries the Storefront API's
+ * [`localization`](https://shopify.dev/api/storefront/reference/common-objects/queryroot) field
+ * for the `isoCode` and `name` of the `country` and keeps this information in a context.
+ *
+ * Any descendents of this provider can use the `useCountry` hook.
+ * The `isoCode` of the `country` can be used in the Storefront API's
+ * `@inContext` directive as the `country` value.
+ */
+export declare function LocalizationProvider(props: LocalizationProviderProps): JSX.Element;
+export declare type LocalizationQuery = {
+    __typename?: 'QueryRoot';
+} & {
+    localization: {
+        __typename?: 'Localization';
+    } & {
+        country: {
+            __typename?: 'Country';
+        } & Pick<Country, 'isoCode' | 'name'>;
+    };
+};

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import LocalizationClientProvider from './LocalizationClientProvider.client';
+import { useShop } from '../../foundation/useShop';
+import { useShopQuery } from '../../hooks/useShopQuery';
+import { CacheDays } from '../../framework/CachingStrategy';
+import { useSession } from '../../foundation/useSession/useSession';
+/**
+ * The `LocalizationProvider` component automatically queries the Storefront API's
+ * [`localization`](https://shopify.dev/api/storefront/reference/common-objects/queryroot) field
+ * for the `isoCode` and `name` of the `country` and keeps this information in a context.
+ *
+ * Any descendents of this provider can use the `useCountry` hook.
+ * The `isoCode` of the `country` can be used in the Storefront API's
+ * `@inContext` directive as the `country` value.
+ */
+export function LocalizationProvider(props) {
+    const { languageCode } = useShop();
+    const { countryCode, countryName } = useSession();
+    const { data: { localization }, } = useShopQuery({
+        query,
+        variables: { language: languageCode },
+        cache: CacheDays(),
+        preload: props.preload,
+    });
+    return (React.createElement(LocalizationClientProvider, { localization: countryCode
+            ? {
+                country: {
+                    name: countryName,
+                    isoCode: countryCode,
+                },
+            }
+            : localization }, props.children));
+}
+const query = `
+query Localization($language: LanguageCode)
+@inContext(language: $language) {
+   localization {
+    country {
+      isoCode
+      name
+    }
+  }
+}
+`;

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

@@ -0,0 +1,2 @@
+export { LocalizationProvider } from './LocalizationProvider.server';
+export { useCountry } from '../../hooks/useCountry/useCountry';

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

@@ -0,0 +1,2 @@
+export { LocalizationProvider } from './LocalizationProvider.server';
+export { useCountry } from '../../hooks/useCountry/useCountry';