@shopify/hydrogen 0.24.0 → 0.26.0

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

@@ -7,25 +7,25 @@ export declare function useCartLine(): {
     attributes: ({
         __typename?: "Attribute" | undefined;
     } & Pick<import("../../storefront-api-types").Attribute, "key" | "value">)[];
-    estimatedCost: {
-        __typename?: "CartLineEstimatedCost" | undefined;
+    cost: {
+        __typename?: "CartLineCost" | undefined;
     } & {
         totalAmount: {
             __typename?: "MoneyV2" | undefined;
-        } & Pick<import("../../storefront-api-types").MoneyV2, "amount" | "currencyCode">;
-        compareAtAmount?: import("../../storefront-api-types").Maybe<{
+        } & Pick<import("../../storefront-api-types").MoneyV2, "currencyCode" | "amount">;
+        compareAtAmountPerQuantity?: import("../../storefront-api-types").Maybe<{
             __typename?: "MoneyV2" | undefined;
-        } & Pick<import("../../storefront-api-types").MoneyV2, "amount" | "currencyCode">> | undefined;
+        } & Pick<import("../../storefront-api-types").MoneyV2, "currencyCode" | "amount">> | undefined;
     };
     merchandise: {
         __typename?: "ProductVariant" | undefined;
     } & Pick<import("../../storefront-api-types").ProductVariant, "id" | "title" | "availableForSale" | "requiresShipping"> & {
         compareAtPriceV2?: import("../../storefront-api-types").Maybe<{
             __typename?: "MoneyV2" | undefined;
-        } & Pick<import("../../storefront-api-types").MoneyV2, "amount" | "currencyCode">> | undefined;
+        } & Pick<import("../../storefront-api-types").MoneyV2, "currencyCode" | "amount">> | undefined;
         priceV2: {
             __typename?: "MoneyV2" | undefined;
-        } & Pick<import("../../storefront-api-types").MoneyV2, "amount" | "currencyCode">;
+        } & Pick<import("../../storefront-api-types").MoneyV2, "currencyCode" | "amount">;
         image?: import("../../storefront-api-types").Maybe<{
             __typename?: "Image" | undefined;
         } & Pick<import("../../storefront-api-types").Image, "id" | "height" | "width" | "url" | "altText">> | undefined;

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

@@ -0,0 +1,4 @@
+import { type LocalizationContextValue } from '../../components/LocalizationProvider/LocalizationContext.client';
+export declare function useLocalization(): LocalizationContextValue & {
+    locale: string;
+};

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

@@ -0,0 +1,14 @@
+import { useMemo } from 'react';
+import { LocalizationContext, } from '../../components/LocalizationProvider/LocalizationContext.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;
+}

package/dist/esnext/hooks/useMeasurement/hooks.js

@@ -1,8 +1,8 @@
 import { useMemo } from 'react';
-import { useShop } from '../../foundation';
+import { useLocalization } from '../useLocalization/useLocalization';
 import { getMeasurementAsParts, getMeasurementAsString } from '../../utilities';
 export function useMeasurement(measurement, options = {}) {
-    const { locale } = useShop();
+    const { locale } = useLocalization();
     return useMemo(() => {
         return {
             localizedString: getMeasurementAsString(measurement, locale, options),

package/dist/esnext/hooks/useMoney/hooks.js

@@ -1,66 +1,80 @@
 import { useMemo } from 'react';
-import { useShop } from '../../foundation/useShop';
+import { useLocalization } from '../useLocalization/useLocalization';
 /**
  * The `useMoney` hook takes a [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2) and returns a
  * default-formatted string of the amount with the correct currency indicator, along with some of the parts provided by
  * [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat).
  */
 export function useMoney(money) {
-    const { locale } = useShop();
+    const { locale } = useLocalization();
+    const amount = parseFloat(money.amount);
     const options = useMemo(() => ({
         style: 'currency',
         currency: money.currencyCode,
     }), [money.currencyCode]);
-    const amount = parseFloat(money.amount);
-    const value = useMemo(() => new Intl.NumberFormat(locale, options).format(amount), [amount, locale, options]);
-    const baseParts = new Intl.NumberFormat(locale, options).formatToParts(amount);
-    const nameParts = new Intl.NumberFormat(locale, {
+    const defaultFormatter = useLazyFormatter(locale, options);
+    const nameFormatter = useLazyFormatter(locale, {
         ...options,
         currencyDisplay: 'name',
-    }).formatToParts(amount);
-    const narrowParts = new Intl.NumberFormat(locale, {
+    });
+    const narrowSymbolFormatter = useLazyFormatter(locale, {
         ...options,
         currencyDisplay: 'narrowSymbol',
-    }).formatToParts(amount);
-    const withoutTrailingZerosFormatter = new Intl.NumberFormat(locale, {
+    });
+    const withoutTrailingZerosFormatter = useLazyFormatter(locale, {
         ...options,
         minimumFractionDigits: 0,
         maximumFractionDigits: 0,
     });
-    const withoutCurrencyFormatter = new Intl.NumberFormat(locale);
-    const withoutTrailingZerosOrCurrencyFormatter = new Intl.NumberFormat(locale, {
+    const withoutCurrencyFormatter = useLazyFormatter(locale);
+    const withoutTrailingZerosOrCurrencyFormatter = useLazyFormatter(locale, {
         minimumFractionDigits: 0,
         maximumFractionDigits: 0,
     });
-    const withoutTrailingZeros = amount % 1 === 0 ? withoutTrailingZerosFormatter.format(amount) : value;
-    const withoutTrailingZerosAndCurrency = amount % 1 === 0
-        ? withoutTrailingZerosOrCurrencyFormatter.format(amount)
-        : withoutCurrencyFormatter.format(amount);
-    const moneyValue = useMemo(() => {
-        var _a, _b, _c, _d, _e, _f;
-        return ({
-            currencyCode: money.currencyCode,
-            currencyName: (_b = (_a = nameParts.find((part) => part.type === 'currency')) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : money.currencyCode,
-            currencySymbol: (_d = (_c = baseParts.find((part) => part.type === 'currency')) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : money.currencyCode,
-            currencyNarrowSymbol: (_f = (_e = narrowParts.find((part) => part.type === 'currency')) === null || _e === void 0 ? void 0 : _e.value) !== null && _f !== void 0 ? _f : '',
-            parts: baseParts,
-            localizedString: value,
-            amount: baseParts
-                .filter((part) => ['decimal', 'fraction', 'group', 'integer', 'literal'].includes(part.type))
-                .map((part) => part.value)
-                .join(''),
-            original: money,
-            withoutTrailingZeros,
-            withoutTrailingZerosAndCurrency,
-        });
-    }, [
-        baseParts,
+    const isPartCurrency = (part) => part.type === 'currency';
+    // By wrapping these properties in functions, we only
+    // create formatters if they are going to be used.
+    const lazyFormatters = useMemo(() => ({
+        original: () => money,
+        currencyCode: () => money.currencyCode,
+        localizedString: () => defaultFormatter().format(amount),
+        parts: () => defaultFormatter().formatToParts(amount),
+        withoutTrailingZeros: () => amount % 1 === 0
+            ? withoutTrailingZerosFormatter().format(amount)
+            : defaultFormatter().format(amount),
+        withoutTrailingZerosAndCurrency: () => amount % 1 === 0
+            ? withoutTrailingZerosOrCurrencyFormatter().format(amount)
+            : withoutCurrencyFormatter().format(amount),
+        currencyName: () => nameFormatter().formatToParts(amount).find(isPartCurrency)?.value ??
+            money.currencyCode,
+        currencySymbol: () => defaultFormatter().formatToParts(amount).find(isPartCurrency)?.value ??
+            money.currencyCode,
+        currencyNarrowSymbol: () => narrowSymbolFormatter().formatToParts(amount).find(isPartCurrency)
+            ?.value ?? '',
+        amount: () => defaultFormatter()
+            .formatToParts(amount)
+            .filter((part) => ['decimal', 'fraction', 'group', 'integer', 'literal'].includes(part.type))
+            .map((part) => part.value)
+            .join(''),
+    }), [
         money,
-        nameParts,
-        narrowParts,
-        value,
-        withoutTrailingZeros,
-        withoutTrailingZerosAndCurrency,
+        amount,
+        nameFormatter,
+        defaultFormatter,
+        narrowSymbolFormatter,
+        withoutCurrencyFormatter,
+        withoutTrailingZerosFormatter,
+        withoutTrailingZerosOrCurrencyFormatter,
     ]);
-    return moneyValue;
+    // Call functions automatically when the properties are accessed
+    // to keep these functions as an implementation detail.
+    return useMemo(() => new Proxy(lazyFormatters, {
+        get: (target, key) => Reflect.get(target, key)?.call(null),
+    }), [lazyFormatters]);
+}
+function useLazyFormatter(locale, options) {
+    return useMemo(() => {
+        let memoized;
+        return () => (memoized ??= new Intl.NumberFormat(locale, options));
+    }, [locale, options]);
 }

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

@@ -3,31 +3,27 @@ export function getAllOptionValues(variants, option) {
         .value)));
 }
 export function getSelectedVariant(variants, choices) {
-    var _a, _b;
     /**
      * Ensure the user has selected all the required options, not just some.
      */
     if (!variants.length ||
-        ((_b = (_a = variants === null || variants === void 0 ? void 0 : variants[0]) === null || _a === void 0 ? void 0 : _a.selectedOptions) === null || _b === void 0 ? void 0 : _b.length) !== Object.keys(choices).length) {
+        variants?.[0]?.selectedOptions?.length !== Object.keys(choices).length) {
         return;
     }
-    return variants === null || variants === void 0 ? void 0 : variants.find((variant) => {
+    return variants?.find((variant) => {
         return Object.entries(choices).every(([name, value]) => {
-            var _a;
-            return (_a = variant === null || variant === void 0 ? void 0 : variant.selectedOptions) === null || _a === void 0 ? void 0 : _a.some((option) => (option === null || option === void 0 ? void 0 : option.name) === name && (option === null || option === void 0 ? void 0 : option.value) === value);
+            return variant?.selectedOptions?.some((option) => option?.name === name && option?.value === value);
         });
     });
 }
 export function getOptions(variants) {
     const map = variants.reduce((memo, variant) => {
-        var _a;
         if (!variant.selectedOptions) {
             throw new Error(`getOptions requires 'variant.selectedOptions`);
         }
-        (_a = variant === null || variant === void 0 ? void 0 : variant.selectedOptions) === null || _a === void 0 ? void 0 : _a.forEach((opt) => {
-            var _a, _b, _c, _d;
-            memo[(_a = opt === null || opt === void 0 ? void 0 : opt.name) !== null && _a !== void 0 ? _a : ''] = memo[(_b = opt === null || opt === void 0 ? void 0 : opt.name) !== null && _b !== void 0 ? _b : ''] || new Set();
-            memo[(_c = opt === null || opt === void 0 ? void 0 : opt.name) !== null && _c !== void 0 ? _c : ''].add((_d = opt === null || opt === void 0 ? void 0 : opt.value) !== null && _d !== void 0 ? _d : '');
+        variant?.selectedOptions?.forEach((opt) => {
+            memo[opt?.name ?? ''] = memo[opt?.name ?? ''] || new Set();
+            memo[opt?.name ?? ''].add(opt?.value ?? '');
         });
         return memo;
     }, {});

package/dist/esnext/hooks/useShopQuery/hooks.js

@@ -11,11 +11,10 @@ import { parseJSON } from '../../utilities/parse';
 // Check if the response body has GraphQL errors
 // https://spec.graphql.org/June2018/#sec-Response-Format
 const shouldCacheResponse = ([body]) => {
-    var _a;
     try {
-        return !((_a = parseJSON(body)) === null || _a === void 0 ? void 0 : _a.errors);
+        return !parseJSON(body)?.errors;
     }
-    catch (_b) {
+    catch {
         // If we can't parse the response, then assume
         // an error and don't cache the response
         return false;
@@ -25,7 +24,6 @@ const shouldCacheResponse = ([body]) => {
  * The `useShopQuery` hook allows you to make server-only GraphQL queries to the Storefront API. It must be a descendent of a `ShopifyProvider` component.
  */
 export function useShopQuery({ query, variables = {}, cache, preload = false, }) {
-    var _a;
     /**
      * If no query is passed, we no-op here to allow developers to obey the Rules of Hooks.
      */
@@ -58,7 +56,7 @@ export function useShopQuery({ query, variables = {}, cache, preload = false, })
     }
     catch (error) {
         // Pass-through thrown promise for Suspense functionality
-        if (error === null || error === void 0 ? void 0 : error.then) {
+        if (error?.then) {
             throw error;
         }
         useQueryError = error;
@@ -82,7 +80,7 @@ export function useShopQuery({ query, variables = {}, cache, preload = false, })
      * GraphQL errors get printed to the console but ultimately
      * get returned to the consumer.
      */
-    if (data === null || data === void 0 ? void 0 : data.errors) {
+    if (data?.errors) {
         const errors = Array.isArray(data.errors) ? data.errors : [data.errors];
         for (const error of errors) {
             if (__HYDROGEN_DEV__ && !__HYDROGEN_TEST__) {
@@ -95,11 +93,14 @@ export function useShopQuery({ query, variables = {}, cache, preload = false, })
         log.error(`GraphQL errors: ${errors.length}`);
     }
     if (__HYDROGEN_DEV__ &&
-        log.options().showUnusedQueryProperties &&
+        (log.options().showUnusedQueryProperties ||
+            serverRequest.ctx.hydrogenConfig?.__EXPERIMENTAL__devTools) &&
         query &&
-        (data === null || data === void 0 ? void 0 : data.data)) {
-        const fileLine = (_a = new Error('').stack) === null || _a === void 0 ? void 0 : _a.split('\n').find((line) => line.includes('.server.'));
-        const [, functionName, fileName] = (fileLine === null || fileLine === void 0 ? void 0 : fileLine.match(/^\s*at (\w+) \(([^)]+)\)/)) || [];
+        data?.data) {
+        const fileLine = new Error('').stack
+            ?.split('\n')
+            .find((line) => line.includes('.server.'));
+        const [, functionName, fileName] = fileLine?.match(/^\s*at (\w+) \(([^)]+)\)/) || [];
         injectGraphQLTracker({
             query,
             data,
@@ -123,8 +124,13 @@ export function useShopQuery({ query, variables = {}, cache, preload = false, })
                     `:\n• ${shownProperties.join(`\n• `)}\n` +
                     hiddenInfo +
                     footer;
-                log.warn(warning);
-                sendMessageToClient({ type: 'warn', data: warning });
+                if (log.options().showUnusedQueryProperties) {
+                    log.warn(warning);
+                    sendMessageToClient('browser-console', { type: 'warn', data: warning });
+                }
+                if (serverRequest.ctx.hydrogenConfig?.__EXPERIMENTAL__devTools) {
+                    sendMessageToClient('dev-tools', { type: 'warn', data: warning });
+                }
             },
         });
     }

package/dist/esnext/index.d.ts

@@ -19,16 +19,13 @@ export { Router } from './foundation/Router/Router.server';
 export { log, type Logger } from './utilities/log';
 export { LocalizationProvider } from './components/LocalizationProvider/LocalizationProvider.server';
 export { ShopifyProvider } from './foundation/ShopifyProvider/ShopifyProvider.server';
-export { generateCacheControlHeader, NoStore, CacheSeconds, CacheMinutes, CacheHours, CacheDays, CacheWeeks, CacheMonths, CacheCustom, } from './foundation/Cache/strategies';
+export { generateCacheControlHeader, CacheNone, CacheShort, CacheLong, CacheCustom, } from './foundation/Cache/strategies';
 export { useRequestContext } from './foundation/useRequestContext';
 export { useServerAnalytics } from './foundation/Analytics/hook';
 export { ShopifyAnalytics } from './foundation/Analytics/connectors/Shopify/ShopifyAnalytics.server';
 export { ShopifyAnalyticsConstants } from './foundation/Analytics/connectors/Shopify/const';
-export * as ShopifyServerAnalyticsConnector from './foundation/Analytics/connectors/Shopify/ServerAnalyticsConnector.server';
-export * as PerformanceMetricsServerAnalyticsConnector from './foundation/Analytics/connectors/PerformanceMetrics/ServerAnalyticsConnector.server';
 export { useSession } from './foundation/useSession/useSession';
-export { CookieSessionStorage } from './foundation/CookieSessionStorage/CookieSessionStorage';
-export { MemorySessionStorage } from './foundation/MemorySessionStorage/MemorySessionStorage';
+export { useLocalization } from './hooks/useLocalization/useLocalization';
 export { Cookie } from './foundation/Cookie/Cookie';
 /**
  * Export server-only CartQuery here instead of `CartProvider.client` to prevent
@@ -41,3 +38,5 @@ export { CartQuery } from './components/CartProvider/cart-queries';
 export { fetchSync } from './foundation/fetchSync/server/fetchSync';
 export { type HydrogenRequest } from './foundation/HydrogenRequest/HydrogenRequest.server';
 export { type HydrogenResponse } from './foundation/HydrogenResponse/HydrogenResponse.server';
+export { type HydrogenRouteProps } from './types';
+export { type ResourceGetter as HydrogenApiRoute, RequestOptions as HydrogenApiRouteOptions, } from './utilities/apiRoutes';

package/dist/esnext/index.js

@@ -19,16 +19,13 @@ export { Router } from './foundation/Router/Router.server';
 export { log } from './utilities/log';
 export { LocalizationProvider } from './components/LocalizationProvider/LocalizationProvider.server';
 export { ShopifyProvider } from './foundation/ShopifyProvider/ShopifyProvider.server';
-export { generateCacheControlHeader, NoStore, CacheSeconds, CacheMinutes, CacheHours, CacheDays, CacheWeeks, CacheMonths, CacheCustom, } from './foundation/Cache/strategies';
+export { generateCacheControlHeader, CacheNone, CacheShort, CacheLong, CacheCustom, } from './foundation/Cache/strategies';
 export { useRequestContext } from './foundation/useRequestContext';
 export { useServerAnalytics } from './foundation/Analytics/hook';
 export { ShopifyAnalytics } from './foundation/Analytics/connectors/Shopify/ShopifyAnalytics.server';
 export { ShopifyAnalyticsConstants } from './foundation/Analytics/connectors/Shopify/const';
-export * as ShopifyServerAnalyticsConnector from './foundation/Analytics/connectors/Shopify/ServerAnalyticsConnector.server';
-export * as PerformanceMetricsServerAnalyticsConnector from './foundation/Analytics/connectors/PerformanceMetrics/ServerAnalyticsConnector.server';
 export { useSession } from './foundation/useSession/useSession';
-export { CookieSessionStorage } from './foundation/CookieSessionStorage/CookieSessionStorage';
-export { MemorySessionStorage } from './foundation/MemorySessionStorage/MemorySessionStorage';
+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/platforms/node.d.ts

@@ -3,7 +3,7 @@ import connect from 'connect';
 declare type CreateServerOptions = {
     cache?: Cache;
 };
-export declare function createServer({ cache }?: CreateServerOptions): Promise<{
+export declare function createServer({ cache, }?: CreateServerOptions): Promise<{
     app: connect.Server;
 }>;
 export {};

package/dist/esnext/platforms/node.js

@@ -13,8 +13,9 @@ import serveStatic from 'serve-static';
 import compression from 'compression';
 import bodyParser from 'body-parser';
 import connect from 'connect';
+import { InMemoryCache } from '../framework/cache/in-memory';
 const handleRequest = entrypoint;
-export async function createServer({ cache } = {}) {
+export async function createServer({ cache = new InMemoryCache(), } = {}) {
     // @ts-ignore
     globalThis.Oxygen = { env: process.env };
     const app = connect();

package/dist/{node/entry-server.d.ts → esnext/shared-types.d.ts}

@@ -1,10 +1,9 @@
 /// <reference types="node" />
-import { RuntimeContext } from './foundation/HydrogenRequest/HydrogenRequest.server';
-import type { ServerResponse, IncomingMessage } from 'http';
-declare global {
-    var __HYDROGEN_WORKER__: boolean;
+import type { IncomingMessage, ServerResponse } from 'http';
+export interface RuntimeContext {
+    waitUntil: (fn: Promise<any>) => void;
 }
-interface RequestHandlerOptions {
+export interface RequestHandlerOptions {
     indexTemplate: string | ((url: string) => Promise<string | {
         default: string;
     }>);
@@ -18,5 +17,10 @@ interface RequestHandlerOptions {
 export interface RequestHandler {
     (request: Request | IncomingMessage, options: RequestHandlerOptions): Promise<Response | undefined>;
 }
-export declare const renderHydrogen: (App: any) => RequestHandler;
-export default renderHydrogen;
+export declare type ShopifyConfig = {
+    defaultLocale?: string;
+    storeDomain: string;
+    storefrontToken: string;
+    storefrontApiVersion: string;
+    multipassSecret?: string;
+};

package/dist/esnext/shared-types.js

@@ -0,0 +1,4 @@
+// These types are shared in ESM and CJS builds.
+// Do not import anything from subfolders here to avoid
+// affecting the files generated in the CJS build.
+export {};