@shopify/hydrogen 1.0.1 → 1.0.2

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/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/foundation/Analytics/connectors/Shopify/ShopifyAnalytics.client.js

@@ -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/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

@@ -130,7 +130,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/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;

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

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

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

@@ -1,4 +1,5 @@
-import type { ShopifyProviderProps } from './types';
+import type { ShopifyProviderProps, LocalizationContextValue } from './types';
+import type { CountryCode, LanguageCode } from '../../storefront-api-types';
 export declare const SHOPIFY_PROVIDER_CONTEXT_KEY: unique symbol;
 /**
  * The `ShopifyProvider` component wraps your entire app and provides support for hooks.
@@ -11,6 +12,7 @@ export declare function ShopifyProvider({
  * Shopify connection information. Defaults to
  * [the `shopify` property in the `hydrogen.config.js` file](https://shopify.dev/custom-storefronts/hydrogen/framework/hydrogen-config).
  */
-shopifyConfig, 
+shopifyConfig, countryCode, languageCode, 
 /** Any `ReactNode` elements. */
 children, }: ShopifyProviderProps): JSX.Element;
+export declare function getLocalizationContextValue(defaultLanguageCode: `${LanguageCode}`, defaultCountryCode: `${CountryCode}`, languageCode?: `${LanguageCode}`, countryCode?: `${CountryCode}`): LocalizationContextValue;

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

@@ -30,7 +30,7 @@ export function ShopifyProvider({
  * Shopify connection information. Defaults to
  * [the `shopify` property in the `hydrogen.config.js` file](https://shopify.dev/custom-storefronts/hydrogen/framework/hydrogen-config).
  */
-shopifyConfig, 
+shopifyConfig, countryCode, languageCode, 
 /** Any `ReactNode` elements. */
 children, }) {
     const request = useServerRequest();
@@ -55,6 +55,23 @@ children, }) {
         actualShopifyConfig = shopifyConfig;
     }
     const shopifyProviderValue = useMemo(() => makeShopifyContext(actualShopifyConfig), [actualShopifyConfig]);
+    const localization = getLocalizationContextValue(shopifyProviderValue.defaultLanguageCode, shopifyProviderValue.defaultCountryCode, languageCode, countryCode);
+    request.ctx.localization = localization;
     request.ctx.shopifyConfig = shopifyProviderValue;
-    return (React.createElement(ShopifyProviderClient, { shopifyConfig: shopifyProviderValue }, children));
+    return (React.createElement(ShopifyProviderClient, { shopifyConfig: shopifyProviderValue, localization: localization }, children));
+}
+export function getLocalizationContextValue(defaultLanguageCode, defaultCountryCode, languageCode, countryCode) {
+    return useMemo(() => {
+        const runtimeLanguageCode = (languageCode ?? defaultLanguageCode).toUpperCase();
+        const runtimeCountryCode = (countryCode ?? defaultCountryCode).toUpperCase();
+        return {
+            country: {
+                isoCode: runtimeCountryCode,
+            },
+            language: {
+                isoCode: runtimeLanguageCode,
+            },
+            locale: `${runtimeLanguageCode}-${runtimeCountryCode}`,
+        };
+    }, [defaultLanguageCode, defaultCountryCode, countryCode, languageCode]);
 }

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

@@ -6,9 +6,26 @@ export interface ShopifyContextValue extends Omit<ShopifyConfig, 'defaultLanguag
     defaultCountryCode: `${CountryCode}`;
     storefrontId: string | null;
 }
+export interface LocalizationContextValue {
+    country: {
+        isoCode: `${CountryCode}`;
+    };
+    language: {
+        isoCode: `${LanguageCode}`;
+    };
+    locale: `${LanguageCode}-${CountryCode}`;
+}
 export declare type ShopifyProviderProps = {
     /** Shopify connection information. Defaults to the `shopify` property in the `hydrogen.config.js` file. */
     shopifyConfig?: ShopifyConfig | ShopifyConfigFetcher;
     /** Any `ReactNode` elements. */
     children?: ReactNode;
+    /**
+     * Override the `isoCode` to define the active country
+     */
+    countryCode?: `${CountryCode}`;
+    /**
+     * Override the `languageCode` to define the active language
+     */
+    languageCode?: `${LanguageCode}`;
 };

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

@@ -3,3 +3,4 @@ export * from './useProductOptions/types';
 export { useMoney } from './useMoney';
 export { useMeasurement } from './useMeasurement';
 export { useLoadScript } from './useLoadScript';
+export { useLocalization } from './useLocalization/useLocalization';

package/dist/esnext/hooks/index.js

@@ -3,3 +3,4 @@ export * from './useProductOptions/types';
 export { useMoney } from './useMoney';
 export { useMeasurement } from './useMeasurement';
 export { useLoadScript } from './useLoadScript';
+export { useLocalization } from './useLocalization/useLocalization';

package/dist/esnext/hooks/useLocalization/useLocalization.d.ts

@@ -1,4 +1,5 @@
-import { type LocalizationContextValue } from '../../components/LocalizationProvider/LocalizationContext.client';
+import type { LocalizationContextValue } from '../../foundation/ShopifyProvider/types';
+import { CountryCode, LanguageCode } from '../../storefront-api-types';
 export declare function useLocalization(): LocalizationContextValue & {
-    locale: string;
+    locale: `${LanguageCode}-${CountryCode}`;
 };

package/dist/esnext/hooks/useLocalization/useLocalization.js

@@ -1,14 +1,9 @@
-import { useMemo } from 'react';
-import { LocalizationContext, } from '../../components/LocalizationProvider/LocalizationContext.client';
+import { LocalizationContext } from '../../foundation/ShopifyProvider/ShopifyProvider.client';
 import { useEnvContext } from '../../foundation/ssr-interop';
 export function useLocalization() {
     const localization = useEnvContext((req) => req.ctx.localization, LocalizationContext);
     if (localization == null) {
         throw new Error('No Localization Context available');
     }
-    const localizationValue = useMemo(() => ({
-        ...localization,
-        locale: localization.language.isoCode + '-' + localization.country.isoCode,
-    }), [localization]);
-    return localizationValue;
+    return localization;
 }

package/dist/esnext/hooks/useProductOptions/helpers.js

@@ -19,7 +19,7 @@ export function getSelectedVariant(variants, choices) {
 export function getOptions(variants) {
     const map = variants.reduce((memo, variant) => {
         if (!variant.selectedOptions) {
-            throw new Error(`getOptions requires 'variant.selectedOptions`);
+            throw new Error(`'getOptions' requires 'variant.selectedOptions'`);
         }
         variant?.selectedOptions?.forEach((opt) => {
             memo[opt?.name ?? ''] = memo[opt?.name ?? ''] || new Set();

package/dist/esnext/index.d.ts

@@ -9,10 +9,12 @@ export * from './client';
  * The following are exported from this file because they are intended to be available
  * *only* on the server.
  */
-export * from './foundation/';
-export * from './hooks/useShopQuery/hooks';
-export * from './foundation/useQuery/hooks';
-export * from './foundation/useServerProps';
+export { ServerPropsProvider, ServerPropsContext, type ServerProps, type ServerPropsContextValue, } from './foundation/ServerPropsProvider';
+export { useShop } from './foundation/useShop';
+export { useUrl } from './foundation/useUrl';
+export { useShopQuery, type UseShopQueryResponse, } from './hooks/useShopQuery/hooks';
+export { useQuery, type HydrogenUseQueryOptions, } from './foundation/useQuery/hooks';
+export { useServerProps } from './foundation/useServerProps';
 export { FileRoutes } from './foundation/FileRoutes/FileRoutes.server';
 export { Route } from './foundation/Route/Route.server';
 export { Router } from './foundation/Router/Router.server';
@@ -25,7 +27,6 @@ export { useServerAnalytics } from './foundation/Analytics/hook';
 export { ShopifyAnalytics } from './foundation/Analytics/connectors/Shopify/ShopifyAnalytics.server';
 export { ShopifyAnalyticsConstants } from './foundation/Analytics/connectors/Shopify/const';
 export { useSession } from './foundation/useSession/useSession';
-export { useLocalization } from './hooks/useLocalization/useLocalization';
 export { Cookie } from './foundation/Cookie/Cookie';
 /**
  * Export server-only CartQuery here instead of `CartProvider.client` to prevent

package/dist/esnext/index.js

@@ -9,10 +9,12 @@ export * from './client';
  * The following are exported from this file because they are intended to be available
  * *only* on the server.
  */
-export * from './foundation/';
-export * from './hooks/useShopQuery/hooks';
-export * from './foundation/useQuery/hooks';
-export * from './foundation/useServerProps';
+export { ServerPropsProvider, ServerPropsContext, } from './foundation/ServerPropsProvider';
+export { useShop } from './foundation/useShop';
+export { useUrl } from './foundation/useUrl';
+export { useShopQuery, } from './hooks/useShopQuery/hooks';
+export { useQuery, } from './foundation/useQuery/hooks';
+export { useServerProps } from './foundation/useServerProps';
 export { FileRoutes } from './foundation/FileRoutes/FileRoutes.server';
 export { Route } from './foundation/Route/Route.server';
 export { Router } from './foundation/Router/Router.server';
@@ -25,7 +27,6 @@ export { useServerAnalytics } from './foundation/Analytics/hook';
 export { ShopifyAnalytics } from './foundation/Analytics/connectors/Shopify/ShopifyAnalytics.server';
 export { ShopifyAnalyticsConstants } from './foundation/Analytics/connectors/Shopify/const';
 export { useSession } from './foundation/useSession/useSession';
-export { useLocalization } from './hooks/useLocalization/useLocalization';
 export { Cookie } from './foundation/Cookie/Cookie';
 /**
  * Export server-only CartQuery here instead of `CartProvider.client` to prevent

package/dist/esnext/utilities/image_size.d.ts

@@ -1,6 +1,7 @@
 import type { Image as ImageType } from '../storefront-api-types';
 import type { PartialDeep } from 'type-fest';
 import type { ShopifyLoaderOptions, ShopifyLoaderParams } from '../components/Image';
+export declare const IMG_SRC_SET_SIZES: number[];
 /**
  * Adds image size parameters to an image URL hosted by Shopify's CDN
  */

package/dist/esnext/utilities/image_size.js

@@ -7,26 +7,31 @@ const PRODUCTION_CDN_HOSTNAMES = [
 ];
 const LOCAL_CDN_HOSTNAMES = ['spin.dev'];
 const ALL_CDN_HOSTNAMES = [...PRODUCTION_CDN_HOSTNAMES, ...LOCAL_CDN_HOSTNAMES];
+// 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
+export const IMG_SRC_SET_SIZES = [352, 832, 1200, 1920, 2560];
 /**
  * Adds image size parameters to an image URL hosted by Shopify's CDN
  */
 export function addImageSizeParametersToUrl({ src, width, height, crop, scale, }) {
-    if (scale) {
-        // Have to do this specifically for 'scale' because it doesn't currently work otherwise.
-        // I'm also intentionally leaving 'scale' as a searchParam because that way it'll "just work" in the future and we can just delete this whole section of code
-        // We assume here that the last `.` is the delimiter between the file name and the file type
-        const baseUrl = new URL(src);
-        const fileDelimiterIndex = baseUrl.pathname.lastIndexOf('.');
-        const fileName = baseUrl.pathname.slice(0, fileDelimiterIndex);
-        const fileType = baseUrl.pathname.slice(fileDelimiterIndex);
-        baseUrl.pathname = `${fileName}${`@${scale.toString()}x`}${fileType}`;
-        src = baseUrl.toString();
-    }
     const newUrl = new URL(src);
-    width && newUrl.searchParams.append('width', width.toString());
-    height && newUrl.searchParams.append('height', height.toString());
+    const multipliedScale = scale ?? 1;
+    if (width) {
+        let finalWidth;
+        if (typeof width === 'string') {
+            finalWidth = (IMG_SRC_SET_SIZES[0] * multipliedScale).toString();
+        }
+        else {
+            finalWidth = (Number(width) * multipliedScale).toString();
+        }
+        newUrl.searchParams.append('width', finalWidth);
+    }
+    if (height && typeof height === 'number') {
+        newUrl.searchParams.append('height', (height * multipliedScale).toString());
+    }
     crop && newUrl.searchParams.append('crop', crop);
-    scale && newUrl.searchParams.append('scale', scale.toString());
+    // for now we intentionally leave off the scale param, and instead multiple width & height by scale instead
+    // scale && newUrl.searchParams.append('scale', scale.toString());
     return newUrl.toString();
 }
 export function shopifyImageLoader(params) {
@@ -57,14 +62,12 @@ export function getShopifyImageDimensions({ data: sfapiImage, loaderOptions, ele
     if (loaderOptions?.width || loaderOptions?.height) {
         return {
             width: loaderOptions?.width ??
-                (aspectRatio
-                    ? // @ts-expect-error if width isn't defined, then height has to be defined due to the If statement above
-                        Math.round(aspectRatio * loaderOptions.height)
+                (aspectRatio && typeof loaderOptions.height === 'number'
+                    ? Math.round(aspectRatio * loaderOptions.height)
                     : null),
             height: loaderOptions?.height ??
-                (aspectRatio
-                    ? // @ts-expect-error if height isn't defined, then width has to be defined due to the If statement above
-                        Math.round(aspectRatio * loaderOptions.width)
+                (aspectRatio && typeof loaderOptions.width === 'number'
+                    ? Math.round(aspectRatio * loaderOptions.width)
                     : null),
         };
     }
@@ -72,14 +75,12 @@ export function getShopifyImageDimensions({ data: sfapiImage, loaderOptions, ele
     if (elementProps?.width || elementProps?.height) {
         return {
             width: elementProps?.width ??
-                (aspectRatio
-                    ? // @ts-expect-error if width isn't defined, then height has to be defined due to the If statement above
-                        Math.round(aspectRatio * elementProps.height)
+                (aspectRatio && typeof elementProps.height === 'number'
+                    ? Math.round(aspectRatio * elementProps.height)
                     : null),
             height: elementProps?.height ??
-                (aspectRatio
-                    ? // @ts-expect-error if height isn't defined, then width has to be defined due to the If statement above
-                        Math.round(aspectRatio * elementProps.width)
+                (aspectRatio && typeof elementProps.width === 'number'
+                    ? Math.round(aspectRatio * elementProps.width)
                     : null),
         };
     }

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

@@ -1,4 +1,4 @@
-export { addImageSizeParametersToUrl, getShopifyImageDimensions, shopifyImageLoader, } from './image_size';
+export { addImageSizeParametersToUrl, getShopifyImageDimensions, shopifyImageLoader, IMG_SRC_SET_SIZES, } from './image_size';
 export { YouTube, Vimeo, addParametersToEmbeddedVideoUrl, useEmbeddedVideoUrl, } from './video_parameters';
 export { loadScript } from './load_script';
 export { wrapPromise } from './suspense';

package/dist/esnext/utilities/index.js

@@ -1,4 +1,4 @@
-export { addImageSizeParametersToUrl, getShopifyImageDimensions, shopifyImageLoader, } from './image_size';
+export { addImageSizeParametersToUrl, getShopifyImageDimensions, shopifyImageLoader, IMG_SRC_SET_SIZES, } from './image_size';
 export { addParametersToEmbeddedVideoUrl, useEmbeddedVideoUrl, } from './video_parameters';
 export { loadScript } from './load_script';
 export { wrapPromise } from './suspense';

package/dist/esnext/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "1.0.1";
+export declare const LIB_VERSION = "1.0.2";

package/dist/esnext/version.js

@@ -1 +1 @@
-export const LIB_VERSION = '1.0.1';
+export const LIB_VERSION = '1.0.2';