@shopify/hydrogen 0.22.0 → 0.24.0

package/dist/esnext/types.d.ts

@@ -1,36 +1,45 @@
 /// <reference types="node" />
 import type { ServerResponse } from 'http';
-import type { Logger } from './utilities/log/log';
-import type { ServerComponentRequest } from './framework/Hydration/ServerComponentRequest.server';
-import type { ServerComponentResponse } from './framework/Hydration/ServerComponentResponse.server';
+import type { Logger, LoggerConfig } from './utilities/log/log';
+import type { HydrogenRequest } from './foundation/HydrogenRequest/HydrogenRequest.server';
+import type { HydrogenResponse } from './foundation/HydrogenResponse/HydrogenResponse.server';
 import type { Metafield, ProductVariant, Product, MediaImage } from './storefront-api-types';
 import type { SessionStorageAdapter } from './foundation/session/session';
-declare type CommonOptions = {
-    App: any;
+export declare type AssembleHtmlParams = {
+    ssrHtml: string;
+    rscPayload?: string;
     routes?: ImportGlobEagerOutput;
-    request: ServerComponentRequest;
-    componentResponse: ServerComponentResponse;
-    log: Logger;
-    dev?: boolean;
-};
-export declare type RendererOptions = CommonOptions & {
+    request: HydrogenRequest;
     template: string;
-    nonce?: string;
 };
-export declare type StreamerOptions = CommonOptions & {
-    response?: ServerResponse;
+export declare type RunSsrParams = {
+    state: Record<string, any>;
+    rsc: {
+        readable: ReadableStream;
+        didError: () => Error | undefined;
+    };
+    routes?: ImportGlobEagerOutput;
+    request: HydrogenRequest;
+    response: HydrogenResponse;
+    log: Logger;
+    dev?: boolean;
     template: string;
     nonce?: string;
+    nodeResponse?: ServerResponse;
 };
-export declare type HydratorOptions = CommonOptions & {
-    response?: ServerResponse;
-    isStreamable: boolean;
+export declare type RunRscParams = {
+    App: any;
+    state: Record<string, any>;
+    log: Logger;
+    request: HydrogenRequest;
+    response: HydrogenResponse;
 };
 export declare type ShopifyConfig = {
     defaultLocale?: string;
     storeDomain: string;
     storefrontToken: string;
     storefrontApiVersion: string;
+    multipassSecret?: string;
 };
 export declare type Hook = (params: {
     url: URL;
@@ -45,27 +54,27 @@ export declare type ResolvedHydrogenRoutes = {
     dirPrefix: string;
     basePath: string;
 };
-declare type ConfigFetcher<T> = (request: ServerComponentRequest) => T | Promise<T>;
+declare type ConfigFetcher<T> = (request: HydrogenRequest) => T | Promise<T>;
 export declare type ShopifyConfigFetcher = ConfigFetcher<ShopifyConfig>;
 export declare type ServerAnalyticsConnector = {
-    request: (request: Request, data?: any, contentType?: 'json' | 'text') => void;
+    request: (requestUrl: string, requestHeader: Headers, data?: any, contentType?: 'json' | 'text') => void;
 };
-export declare type InlineHydrogenConfig = {
+export declare type InlineHydrogenConfig = ClientConfig & {
     routes?: InlineHydrogenRoutes;
     shopify?: ShopifyConfig | ShopifyConfigFetcher;
     serverAnalyticsConnectors?: Array<ServerAnalyticsConnector>;
+    logger?: LoggerConfig;
     session?: (log: Logger) => SessionStorageAdapter;
-    enableStreaming?: (request: ServerComponentRequest) => boolean;
 };
 export declare type ResolvedHydrogenConfig = Omit<InlineHydrogenConfig, 'routes'> & {
     routes: ResolvedHydrogenRoutes;
 };
-export declare type ClientHandlerConfig = {
+export declare type ClientConfig = {
     /** React's StrictMode is on by default for your client side app; if you want to turn it off (not recommended), you can pass `false` */
     strictMode?: boolean;
     showDevTools?: boolean;
 };
-export declare type ClientHandler = (App: React.ElementType, config: ClientHandlerConfig) => Promise<void>;
+export declare type ClientHandler = (App: React.ElementType, config: ClientConfig) => Promise<void>;
 export interface GraphQLConnection<T> {
     edges?: {
         node: T;

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

@@ -1,5 +1,5 @@
 import { InlineHydrogenConfig, ResolvedHydrogenRoutes } from '../types';
-import type { ServerComponentRequest } from '../framework/Hydration/ServerComponentRequest.server';
+import type { HydrogenRequest } from '../foundation/HydrogenRequest/HydrogenRequest.server';
 import { SessionApi, SessionStorageAdapter } from '../foundation/session/session';
 declare type RouteParams = Record<string, string>;
 declare type RequestOptions = {
@@ -33,5 +33,5 @@ interface QueryShopArgs {
     /** An object of the variables for the GraphQL query. */
     variables?: Record<string, any>;
 }
-export declare function renderApiRoute(request: ServerComponentRequest, route: ApiRouteMatch, shopifyConfig: InlineHydrogenConfig['shopify'], session?: SessionStorageAdapter): Promise<Response | Request>;
+export declare function renderApiRoute(request: HydrogenRequest, route: ApiRouteMatch, shopifyConfig: InlineHydrogenConfig['shopify'], session?: SessionStorageAdapter): Promise<Response | Request>;
 export {};

package/dist/esnext/utilities/graphql-tracker.js

@@ -2,7 +2,7 @@ import gqlDev from 'graphql-tag';
 export const TIMEOUT_MS = 2000;
 export function injectGraphQLTracker({ query, data, onUnusedData, }) {
     var _a;
-    if (__DEV__ && typeof query === 'string') {
+    if (__HYDROGEN_DEV__ && typeof query === 'string') {
         query = gqlDev `${query}`;
     }
     const info = convertQueryToResolveInfo(query);

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

@@ -3,7 +3,7 @@ export { YouTube, Vimeo, addParametersToEmbeddedVideoUrl, useEmbeddedVideoUrl, }
 export { loadScript } from './load_script';
 export { wrapPromise } from './suspense';
 export { flattenConnection } from './flattenConnection';
-export { isClient } from './isClient';
+export { isBrowser } from './isBrowser';
 export { isServer } from './isServer';
 export { getMeasurementAsParts, getMeasurementAsString } from './measurement';
 export { parseMetafieldValue } from './parseMetafieldValue';

package/dist/esnext/utilities/index.js

@@ -3,7 +3,7 @@ export { addParametersToEmbeddedVideoUrl, useEmbeddedVideoUrl, } from './video_p
 export { loadScript } from './load_script';
 export { wrapPromise } from './suspense';
 export { flattenConnection } from './flattenConnection';
-export { isClient } from './isClient';
+export { isBrowser } from './isBrowser';
 export { isServer } from './isServer';
 export { getMeasurementAsParts, getMeasurementAsString } from './measurement';
 export { parseMetafieldValue } from './parseMetafieldValue';

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

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

package/dist/esnext/utilities/isBrowser/index.js

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

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

@@ -0,0 +1,4 @@
+/** The `isClient` utility is a function that returns a boolean indicating
+ * if the code was run in the browser.
+ */
+export declare function isBrowser(): boolean;

package/dist/esnext/utilities/isBrowser/isBrowser.js

@@ -0,0 +1,6 @@
+/** The `isClient` utility is a function that returns a boolean indicating
+ * if the code was run in the browser.
+ */
+export function isBrowser() {
+    return typeof document !== 'undefined';
+}

package/dist/esnext/utilities/isServer/isServer.js

@@ -1,7 +1,7 @@
-import { isClient } from '../isClient';
+import { isBrowser } from '../isBrowser';
 /** The `isServer` utility is a function that returns a `boolean` indicating
  * if the code was run on the server.
  */
 export function isServer() {
-    return !isClient();
+    return !isBrowser();
 }

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

@@ -1,4 +1,4 @@
-export { log, setLogger, setLoggerOptions, getLoggerWithContext, Logger, logServerResponse, resetLogger, } from './log';
+export { log, setLogger, getLoggerWithContext, Logger, logServerResponse, } from './log';
 export { collectQueryCacheControlHeaders, logCacheControlHeaders, } from './log-cache-header';
 export { logCacheApiStatus } from './log-cache-api-status';
 export { collectQueryTimings, logQueryTimings } from './log-query-timeline';

package/dist/esnext/utilities/log/index.js

@@ -1,4 +1,4 @@
-export { log, setLogger, setLoggerOptions, getLoggerWithContext, logServerResponse, resetLogger, } from './log';
+export { log, setLogger, getLoggerWithContext, logServerResponse, } from './log';
 export { collectQueryCacheControlHeaders, logCacheControlHeaders, } from './log-cache-header';
 export { logCacheApiStatus } from './log-cache-api-status';
 export { collectQueryTimings, logQueryTimings } from './log-query-timeline';

package/dist/esnext/utilities/log/log-cache-header.d.ts

@@ -1,10 +1,10 @@
-import { ServerComponentRequest } from '../../framework/Hydration/ServerComponentRequest.server';
-import { ServerComponentResponse } from '../../framework/Hydration/ServerComponentResponse.server';
+import { HydrogenRequest } from '../../foundation/HydrogenRequest/HydrogenRequest.server';
+import { HydrogenResponse } from '../../foundation/HydrogenResponse/HydrogenResponse.server';
 import { QueryKey } from '../../types';
 import type { RenderType } from './log';
 export declare type QueryCacheControlHeaders = {
     name: string;
     header: string | null;
 };
-export declare function collectQueryCacheControlHeaders(request: ServerComponentRequest, queryKey: QueryKey, cacheControlHeader: string | null): void;
-export declare function logCacheControlHeaders(type: RenderType, request: ServerComponentRequest, response?: ServerComponentResponse): void;
+export declare function collectQueryCacheControlHeaders(request: HydrogenRequest, queryKey: QueryKey, cacheControlHeader: string | null): void;
+export declare function logCacheControlHeaders(type: RenderType, request: HydrogenRequest, response?: HydrogenResponse): void;

package/dist/esnext/utilities/log/log-query-timeline.d.ts

@@ -1,4 +1,4 @@
-import { ServerComponentRequest } from '../../framework/Hydration/ServerComponentRequest.server';
+import { HydrogenRequest } from '../../foundation/HydrogenRequest/HydrogenRequest.server';
 import { QueryKey } from '../../types';
 import type { RenderType } from './log';
 export declare type TimingType = 'requested' | 'resolved' | 'rendered' | 'preload';
@@ -8,5 +8,5 @@ export declare type QueryTiming = {
     timestamp: number;
     duration?: number;
 };
-export declare function collectQueryTimings(request: ServerComponentRequest, queryKey: QueryKey, timingType: TimingType, duration?: number): void;
-export declare function logQueryTimings(type: RenderType, request: ServerComponentRequest): void;
+export declare function collectQueryTimings(request: HydrogenRequest, queryKey: QueryKey, timingType: TimingType, duration?: number): void;
+export declare function logQueryTimings(type: RenderType, request: HydrogenRequest): void;

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

@@ -1,10 +1,16 @@
-import { ServerComponentRequest } from '../../framework/Hydration/ServerComponentRequest.server';
+import { HydrogenRequest } from '../../foundation/HydrogenRequest/HydrogenRequest.server';
+/** The `log` utility is a function that's used for logging debugging, warning, and error information about the application.
+ * Use this utility by importing `log` from `@shopify/hydrogen`, or by using a `log` prop passed to each page
+ * component. We recommend using the `log` prop passed to each page because it will associated your log to the
+ * current request in progress.
+ */
+declare type LoggerMethod = (...args: Array<any>) => void | Promise<any>;
 export interface Logger {
-    trace: (...args: Array<any>) => void;
-    debug: (...args: Array<any>) => void;
-    warn: (...args: Array<any>) => void;
-    error: (...args: Array<any>) => void;
-    fatal: (...args: Array<any>) => void;
+    trace: LoggerMethod;
+    debug: LoggerMethod;
+    warn: LoggerMethod;
+    error: LoggerMethod;
+    fatal: LoggerMethod;
     options: () => LoggerOptions;
 }
 export declare type LoggerOptions = {
@@ -13,10 +19,10 @@ export declare type LoggerOptions = {
     showQueryTiming?: boolean;
     showUnusedQueryProperties?: boolean;
 };
+export declare type LoggerConfig = Partial<Exclude<Logger, 'options'>> & LoggerOptions;
 export declare type RenderType = 'str' | 'rsc' | 'ssr' | 'api';
+export declare function getLoggerWithContext(context: Partial<HydrogenRequest>): Logger;
 export declare const log: Logger;
-export declare function getLoggerWithContext(context?: any): Logger;
-export declare function setLogger(newLogger: Logger): void;
-export declare function setLoggerOptions(options: LoggerOptions): void;
-export declare function resetLogger(): void;
-export declare function logServerResponse(type: RenderType, request: ServerComponentRequest, responseStatus: number): void;
+export declare function setLogger(config?: LoggerConfig): void;
+export declare function logServerResponse(type: RenderType, request: HydrogenRequest, responseStatus: number): void;
+export {};

package/dist/esnext/utilities/log/log.js

@@ -20,29 +20,38 @@ const defaultLogger = {
     },
     options: () => ({}),
 };
-globalThis.__logger = defaultLogger;
-function buildLogger() {
+let currentLogger = defaultLogger;
+function doLog(method, request, ...args) {
+    var _a, _b, _c;
+    const maybePromise = currentLogger[method](request, ...args);
+    if (maybePromise instanceof Promise) {
+        (_c = (_b = (_a = request === null || request === void 0 ? void 0 : request.ctx) === null || _a === void 0 ? void 0 : _a.runtime) === null || _b === void 0 ? void 0 : _b.waitUntil) === null || _c === void 0 ? void 0 : _c.call(_b, maybePromise);
+    }
+}
+export function getLoggerWithContext(context) {
     return {
-        trace: (...args) => globalThis.__logger.trace(this, ...args),
-        debug: (...args) => globalThis.__logger.debug(this, ...args),
-        warn: (...args) => globalThis.__logger.warn(this, ...args),
-        error: (...args) => globalThis.__logger.error(this, ...args),
-        fatal: (...args) => globalThis.__logger.fatal(this, ...args),
-        options: () => globalThis.__logger.options(),
+        trace: (...args) => doLog('trace', context, ...args),
+        debug: (...args) => doLog('debug', context, ...args),
+        warn: (...args) => doLog('warn', context, ...args),
+        error: (...args) => doLog('error', context, ...args),
+        fatal: (...args) => doLog('fatal', context, ...args),
+        options: () => currentLogger.options(),
     };
 }
-export const log = buildLogger.call({});
-export function getLoggerWithContext(context = {}) {
-    return buildLogger.call(context);
-}
-export function setLogger(newLogger) {
-    globalThis.__logger = newLogger;
-}
-export function setLoggerOptions(options) {
-    globalThis.__logger.options = () => options;
-}
-export function resetLogger() {
-    globalThis.__logger = defaultLogger;
+export const log = getLoggerWithContext({});
+export function setLogger(config) {
+    if (!config) {
+        currentLogger = defaultLogger;
+        return;
+    }
+    const options = {};
+    currentLogger = { ...defaultLogger, ...config, options: () => options };
+    for (const key of Object.keys(config)) {
+        if (!(key in defaultLogger)) {
+            delete currentLogger[key];
+            options[key] = config[key];
+        }
+    }
 }
 const SERVER_RESPONSE_MAP = {
     str: 'streaming SSR',

package/dist/esnext/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "0.22.0";
+export declare const LIB_VERSION = "0.24.0";

package/dist/esnext/version.js

@@ -1 +1 @@
-export const LIB_VERSION = '0.22.0';
+export const LIB_VERSION = '0.24.0';

package/dist/node/client.d.ts

@@ -0,0 +1,16 @@
+export * from './components';
+export * from './hooks';
+export * from './foundation/useServerProps';
+export * from './foundation/useShop';
+export * from './foundation/ServerPropsProvider';
+export * from './foundation/useUrl';
+export { Head } from './foundation/Head';
+export * from './utilities';
+export { gql } from './utilities/graphql-tag';
+export { ClientAnalytics } from './foundation/Analytics';
+export { useRouteParams } from './foundation/useRouteParams/useRouteParams';
+export { useNavigate } from './foundation/useNavigate/useNavigate';
+export { fetchSync } from './foundation/fetchSync/client/fetchSync';
+export { suspendFunction, preloadFunction } from './utilities/suspense';
+export { PerformanceMetrics } from './foundation/Analytics/connectors/PerformanceMetrics/PerformanceMetrics.client';
+export { PerformanceMetricsDebug } from './foundation/Analytics/connectors/PerformanceMetrics/PerformanceMetricsDebug.client';

package/dist/node/client.js

@@ -0,0 +1,43 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PerformanceMetricsDebug = exports.PerformanceMetrics = exports.preloadFunction = exports.suspendFunction = exports.fetchSync = exports.useNavigate = exports.useRouteParams = exports.ClientAnalytics = exports.gql = exports.Head = void 0;
+__exportStar(require("./components"), exports);
+__exportStar(require("./hooks"), exports);
+__exportStar(require("./foundation/useServerProps"), exports);
+__exportStar(require("./foundation/useShop"), exports);
+__exportStar(require("./foundation/ServerPropsProvider"), exports);
+__exportStar(require("./foundation/useUrl"), exports);
+var Head_1 = require("./foundation/Head");
+Object.defineProperty(exports, "Head", { enumerable: true, get: function () { return Head_1.Head; } });
+__exportStar(require("./utilities"), exports);
+var graphql_tag_1 = require("./utilities/graphql-tag");
+Object.defineProperty(exports, "gql", { enumerable: true, get: function () { return graphql_tag_1.gql; } });
+var Analytics_1 = require("./foundation/Analytics");
+Object.defineProperty(exports, "ClientAnalytics", { enumerable: true, get: function () { return Analytics_1.ClientAnalytics; } });
+var useRouteParams_1 = require("./foundation/useRouteParams/useRouteParams");
+Object.defineProperty(exports, "useRouteParams", { enumerable: true, get: function () { return useRouteParams_1.useRouteParams; } });
+var useNavigate_1 = require("./foundation/useNavigate/useNavigate");
+Object.defineProperty(exports, "useNavigate", { enumerable: true, get: function () { return useNavigate_1.useNavigate; } });
+var fetchSync_1 = require("./foundation/fetchSync/client/fetchSync");
+Object.defineProperty(exports, "fetchSync", { enumerable: true, get: function () { return fetchSync_1.fetchSync; } });
+var suspense_1 = require("./utilities/suspense");
+Object.defineProperty(exports, "suspendFunction", { enumerable: true, get: function () { return suspense_1.suspendFunction; } });
+Object.defineProperty(exports, "preloadFunction", { enumerable: true, get: function () { return suspense_1.preloadFunction; } });
+var PerformanceMetrics_client_1 = require("./foundation/Analytics/connectors/PerformanceMetrics/PerformanceMetrics.client");
+Object.defineProperty(exports, "PerformanceMetrics", { enumerable: true, get: function () { return PerformanceMetrics_client_1.PerformanceMetrics; } });
+var PerformanceMetricsDebug_client_1 = require("./foundation/Analytics/connectors/PerformanceMetrics/PerformanceMetricsDebug.client");
+Object.defineProperty(exports, "PerformanceMetricsDebug", { enumerable: true, get: function () { return PerformanceMetricsDebug_client_1.PerformanceMetricsDebug; } });

package/dist/node/components/AddToCartButton/AddToCartButton.client.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+interface AddToCartButtonProps {
+    /** An array of cart line attributes that belong to the item being added to the cart. */
+    attributes?: {
+        key: string;
+        value: string;
+    }[];
+    /** The ID of the variant. */
+    variantId?: string | null;
+    /** The item quantity. */
+    quantity?: number;
+    /** Any ReactNode elements. */
+    children: ReactNode;
+    /** The text that is announced by the screen reader when the item is being added to the cart. Used for accessibility purposes only and not displayed on the page. */
+    accessibleAddingToCartLabel?: string;
+}
+declare type PropsWeControl = 'onClick';
+/**
+ * The `AddToCartButton` component renders a button that adds an item to the cart when pressed.
+ * It must be a descendent of the `CartProvider` component.
+ */
+export declare function AddToCartButton(props: Omit<JSX.IntrinsicElements['button'], PropsWeControl> & AddToCartButtonProps): JSX.Element;
+export {};

package/dist/node/components/AddToCartButton/AddToCartButton.client.js

@@ -0,0 +1,74 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AddToCartButton = void 0;
+const react_1 = __importStar(require("react"));
+const CartProvider_1 = require("../CartProvider");
+const ProductOptionsProvider_1 = require("../ProductOptionsProvider");
+/**
+ * The `AddToCartButton` component renders a button that adds an item to the cart when pressed.
+ * It must be a descendent of the `CartProvider` component.
+ */
+function AddToCartButton(props) {
+    var _a;
+    const [addingItem, setAddingItem] = (0, react_1.useState)(false);
+    const { variantId: explicitVariantId, quantity = 1, attributes, children, accessibleAddingToCartLabel, ...passthroughProps } = props;
+    const { status, linesAdd } = (0, CartProvider_1.useCart)();
+    const { selectedVariant } = (0, ProductOptionsProvider_1.useProductOptions)();
+    const variantId = (_a = explicitVariantId !== null && explicitVariantId !== void 0 ? explicitVariantId : selectedVariant === null || selectedVariant === void 0 ? void 0 : selectedVariant.id) !== null && _a !== void 0 ? _a : '';
+    const disabled = explicitVariantId === null ||
+        variantId === '' ||
+        selectedVariant === null ||
+        addingItem ||
+        passthroughProps.disabled;
+    (0, react_1.useEffect)(() => {
+        if (addingItem && status === 'idle') {
+            setAddingItem(false);
+        }
+    }, [status, addingItem]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("button", { ...passthroughProps, disabled: disabled, onClick: () => {
+                setAddingItem(true);
+                linesAdd([
+                    {
+                        quantity,
+                        merchandiseId: variantId,
+                        attributes,
+                    },
+                ]);
+            } }, children),
+        accessibleAddingToCartLabel ? (react_1.default.createElement("p", { style: {
+                position: 'absolute',
+                width: '1px',
+                height: '1px',
+                padding: '0',
+                margin: '-1px',
+                overflow: 'hidden',
+                clip: 'rect(0, 0, 0, 0)',
+                whiteSpace: 'nowrap',
+                borderWidth: '0',
+            }, role: "alert", "aria-live": "assertive" }, addingItem ? accessibleAddingToCartLabel : null)) : null));
+}
+exports.AddToCartButton = AddToCartButton;

package/dist/node/components/AddToCartButton/index.d.ts

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

package/dist/node/components/AddToCartButton/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AddToCartButton = void 0;
+var AddToCartButton_client_1 = require("./AddToCartButton.client");
+Object.defineProperty(exports, "AddToCartButton", { enumerable: true, get: function () { return AddToCartButton_client_1.AddToCartButton; } });

package/dist/node/components/BuyNowButton/BuyNowButton.client.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+interface BuyNowButtonProps {
+    /** The item quantity. Defaults to 1. */
+    quantity?: number;
+    /** The ID of the variant. */
+    variantId: string;
+    /** An array of cart line attributes that belong to the item being added to the cart. */
+    attributes?: {
+        key: string;
+        value: string;
+    }[];
+    /** Any `ReactNode` elements. */
+    children: ReactNode;
+}
+declare type PropsWeControl = 'onClick';
+/** The `BuyNowButton` component renders a button that adds an item to the cart and redirects the customer to checkout. */
+export declare function BuyNowButton(props: Omit<JSX.IntrinsicElements['button'], PropsWeControl> & BuyNowButtonProps): JSX.Element;
+export {};

package/dist/node/components/BuyNowButton/BuyNowButton.client.js

@@ -0,0 +1,53 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BuyNowButton = void 0;
+const react_1 = __importStar(require("react"));
+const CartProvider_1 = require("../CartProvider");
+/** The `BuyNowButton` component renders a button that adds an item to the cart and redirects the customer to checkout. */
+function BuyNowButton(props) {
+    const { createInstantCheckout, checkoutUrl } = (0, CartProvider_1.useInstantCheckout)();
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const { quantity, variantId, attributes, children, ...passthroughProps } = props;
+    (0, react_1.useEffect)(() => {
+        if (checkoutUrl) {
+            window.location.href = checkoutUrl;
+        }
+    }, [checkoutUrl]);
+    const handleBuyNow = (0, react_1.useCallback)(() => {
+        setLoading(true);
+        createInstantCheckout({
+            lines: [
+                {
+                    quantity: quantity !== null && quantity !== void 0 ? quantity : 1,
+                    merchandiseId: variantId,
+                    attributes,
+                },
+            ],
+        });
+    }, [setLoading, createInstantCheckout, quantity, variantId, attributes]);
+    return (react_1.default.createElement("button", { disabled: loading !== null && loading !== void 0 ? loading : passthroughProps.disabled, ...passthroughProps, onClick: handleBuyNow }, children));
+}
+exports.BuyNowButton = BuyNowButton;

package/dist/node/components/BuyNowButton/index.d.ts

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

package/dist/node/components/BuyNowButton/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BuyNowButton = void 0;
+var BuyNowButton_client_1 = require("./BuyNowButton.client");
+Object.defineProperty(exports, "BuyNowButton", { enumerable: true, get: function () { return BuyNowButton_client_1.BuyNowButton; } });

package/dist/node/components/CartCheckoutButton/CartCheckoutButton.client.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+declare type PropsWeControl = 'onClick';
+/**
+ * The `CartCheckoutButton` component renders a button that redirects to the checkout URL for the cart.
+ * It must be a descendent of a `CartProvider` component.
+ */
+export declare function CartCheckoutButton(props: Omit<JSX.IntrinsicElements['button'], PropsWeControl> & {
+    /** A `ReactNode` element. */
+    children: ReactNode;
+}): JSX.Element;
+export {};