@shopify/hydrogen-react 2022.7.0

package/dist/types/ShopifyProvider.d.ts

@@ -0,0 +1,42 @@
+import { type ReactNode } from 'react';
+import type { LanguageCode, CountryCode, Shop } from './storefront-api-types.js';
+/**
+ * The `<ShopifyProvider/>` component enables use of the `useShop()` hook. The component should wrap your app.
+ */
+export declare function ShopifyProvider({ children, shopifyConfig, }: {
+    children: ReactNode;
+    shopifyConfig: ShopifyContextValue;
+}): JSX.Element;
+/**
+ * Provides access to the `shopifyConfig` prop of `<ShopifyProvider/>`. Must be a descendent of `<ShopifyProvider/>`.
+ */
+export declare function useShop(): ShopifyContextValue;
+/**
+ * Shopify-specific values that are used in various Hydrogen-UI components and hooks.
+ */
+export declare type ShopifyContextValue = {
+    /** The globally-unique identifier for the Shop */
+    storefrontId?: string;
+    /** The host name of the domain (eg: `{shop}.myshopify.com`). If a URL with a scheme (for example `https://`) is passed in, then the scheme is removed. */
+    storeDomain: Shop['primaryDomain']['host'];
+    /** The Storefront API public access token. Refer to the [authentication](https://shopify.dev/api/storefront#authentication) documentation for more details. */
+    storefrontToken: string;
+    /** The Storefront API version. This should almost always be the same as the version Hydrogen-UI was built for. Learn more about Shopify [API versioning](https://shopify.dev/api/usage/versioning) for more details.  */
+    storefrontApiVersion: string;
+    country?: {
+        /**
+         * The code designating a country, which generally follows ISO 3166-1 alpha-2 guidelines. If a territory doesn't have a country code value in the `CountryCode` enum, it might be considered a subdivision of another country. For example, the territories associated with Spain are represented by the country code `ES`, and the territories associated with the United States of America are represented by the country code `US`.
+         */
+        isoCode: CountryCode;
+    };
+    language?: {
+        /**
+         * `ISO 369` language codes supported by Shopify.
+         */
+        isoCode: LanguageCode;
+    };
+    /**
+     * The locale string based on `country` and `language`.
+     */
+    locale?: string;
+};

package/dist/types/Video.d.ts

@@ -0,0 +1,20 @@
+import { type HTMLAttributes } from 'react';
+import { shopifyImageLoader } from './image-size.js';
+import type { Video as VideoType } from './storefront-api-types.js';
+import type { PartialDeep } from 'type-fest';
+export interface VideoProps {
+    /** An object with fields that correspond to the Storefront API's [Video object](https://shopify.dev/api/storefront/latest/objects/video). */
+    data: PartialDeep<VideoType, {
+        recurseIntoArrays: true;
+    }>;
+    /** An object of image size options for the video's `previewImage`. Uses `shopifyImageLoader` to generate the `poster` URL. */
+    previewImageOptions?: Parameters<typeof shopifyImageLoader>[0];
+    /** Props that will be passed to the `video` element's `source` children elements. */
+    sourceProps?: HTMLAttributes<HTMLSourceElement> & {
+        'data-testid'?: string;
+    };
+}
+/**
+ * The `Video` component renders a `video` for the Storefront API's [Video object](https://shopify.dev/api/storefront/reference/products/video).
+ */
+export declare function Video(props: JSX.IntrinsicElements['video'] & VideoProps): JSX.Element;

package/dist/types/flatten-connection.d.ts

@@ -0,0 +1,17 @@
+import type { PartialDeep } from 'type-fest';
+/**
+ * The `flattenConnection` utility transforms a connection object from the Storefront API (for example, [Product-related connections](https://shopify.dev/api/storefront/reference/products/product)) into a flat array of nodes.
+ * The utility works with either `nodes` or `edges.node`.
+ */
+export declare function flattenConnection<T>(connection: PartialDeep<GraphQLConnection<T>, {
+    recurseIntoArrays: true;
+}>): PartialDeep<T, {
+    recurseIntoArrays: true;
+}>[];
+interface GraphQLConnection<T> {
+    edges?: {
+        node: T;
+    }[];
+    nodes?: T[];
+}
+export {};

package/dist/types/image-size.d.ts

@@ -0,0 +1,36 @@
+import type { Image as ImageType } from './storefront-api-types.js';
+import type { PartialDeep } from 'type-fest';
+import type { ShopifyLoaderOptions, ShopifyLoaderParams } from './Image.js';
+export declare const IMG_SRC_SET_SIZES: number[];
+/**
+ * Adds image size parameters to an image URL hosted by Shopify's CDN
+ */
+export declare function addImageSizeParametersToUrl({ src, width, height, crop, scale, }: ShopifyLoaderParams): string;
+export declare function shopifyImageLoader(params: ShopifyLoaderParams): string;
+declare type HtmlImageProps = React.ImgHTMLAttributes<HTMLImageElement>;
+export declare type GetShopifyImageDimensionsProps = {
+    data: Pick<PartialDeep<ImageType, {
+        recurseIntoArrays: true;
+    }>, 'altText' | 'url' | 'id' | 'width' | 'height'>;
+    loaderOptions?: ShopifyLoaderOptions;
+    elementProps?: {
+        width?: HtmlImageProps['width'];
+        height?: HtmlImageProps['height'];
+    };
+};
+declare type GetShopifyImageDimensionsPropsReturn = {
+    width: number | string | null;
+    height: number | string | null;
+};
+/**
+ * Width and height are determined using the followiing priority list:
+ * 1. `loaderOptions`'s width/height
+ * 2. `elementProps`'s width/height
+ * 3. `data`'s width/height
+ *
+ * If only one of `width` or `height` are defined, then the other will attempt to be calculated based on the Image's aspect ratio,
+ * provided that both `data.width` and `data.height` are available. If not, then the aspect ratio cannot be determined and the missing
+ * value will reamin as `null`
+ */
+export declare function getShopifyImageDimensions({ data: sfapiImage, loaderOptions, elementProps, }: GetShopifyImageDimensionsProps): GetShopifyImageDimensionsPropsReturn;
+export {};

package/dist/types/index.d.cts

@@ -0,0 +1,15 @@
+export { ExternalVideo } from './ExternalVideo.js';
+export { flattenConnection } from './flatten-connection.js';
+export { Image } from './Image.js';
+export { MediaFile } from './MediaFile.js';
+export { Metafield, parseMetafield, parseMetafieldValue } from './Metafield.js';
+export { ModelViewer } from './ModelViewer.js';
+export { Money } from './Money.js';
+export { ProductPrice } from './ProductPrice.js';
+export { ProductProvider, useProduct } from './ProductProvider.js';
+export { ShopifyProvider, useShop } from './ShopifyProvider.js';
+export { ShopPayButton } from './ShopPayButton.js';
+export type { StorefrontApiResponseOk, StorefrontApiResponseOkPartial, StorefrontApiResponseError, StorefrontApiResponse, StorefrontApiResponsePartial, } from './storefront-api-response.types.js';
+export { createStorefrontClient } from './storefront-client.js';
+export { useMoney } from './useMoney.js';
+export { Video } from './Video.js';

package/dist/types/index.d.ts

@@ -0,0 +1,15 @@
+export { ExternalVideo } from './ExternalVideo.js';
+export { flattenConnection } from './flatten-connection.js';
+export { Image } from './Image.js';
+export { MediaFile } from './MediaFile.js';
+export { Metafield, parseMetafield, parseMetafieldValue } from './Metafield.js';
+export { ModelViewer } from './ModelViewer.js';
+export { Money } from './Money.js';
+export { ProductPrice } from './ProductPrice.js';
+export { ProductProvider, useProduct } from './ProductProvider.js';
+export { ShopifyProvider, useShop } from './ShopifyProvider.js';
+export { ShopPayButton } from './ShopPayButton.js';
+export type { StorefrontApiResponseOk, StorefrontApiResponseOkPartial, StorefrontApiResponseError, StorefrontApiResponse, StorefrontApiResponsePartial, } from './storefront-api-response.types.js';
+export { createStorefrontClient } from './storefront-client.js';
+export { useMoney } from './useMoney.js';
+export { Video } from './Video.js';

package/dist/types/load-script.d.ts

@@ -0,0 +1,11 @@
+export declare function loadScript(src: string, options?: {
+    module?: boolean;
+    in?: 'head' | 'body';
+}): Promise<boolean>;
+declare type LoadScriptParams = Parameters<typeof loadScript>;
+/**
+ * The `useLoadScript` hook loads an external script tag in the browser. It allows React components to lazy-load large third-party dependencies.
+ */
+export declare function useLoadScript(url: LoadScriptParams[0], options?: LoadScriptParams[1]): ScriptState;
+declare type ScriptState = 'loading' | 'done' | 'error';
+export {};

package/dist/types/storefront-api-constants.d.ts

@@ -0,0 +1 @@
+export declare const SFAPI_VERSION = "2022-07";

package/dist/types/storefront-api-response.types.d.ts

@@ -0,0 +1,68 @@
+import type { FormattedExecutionResult } from 'graphql';
+import type { PartialDeep } from 'type-fest';
+/**
+ * Provides more information about the error(s) including properties and metadata.
+ * Refer to https://shopify.dev/api/storefront#status_and_error_codes for more information.
+ */
+declare type StorefrontApiExtensions = {
+    /**
+     * Shows error codes common to Shopify. Additional error codes may also be shown.
+     * https://shopify.dev/api/storefront#status_and_error_codes
+     */
+    code?: 'THROTTLED' | 'ACCESS_DENIED' | 'SHOP_INACTIVE' | 'INTERNAL_SERVER_ERROR' | string;
+};
+/**
+ * The Storefront API can return a 200 OK response code when the query succeeds, and will populate the `data` property. The generic you pass in through type parameters will be the shape of the `data` object if successful. If you prefer a "deeply-partial" version of that generic object, consider using `StorefrontApiResponseOkPartial` instead.
+ *
+ * The Storefront API can also return a 200 OK response code in cases that would typically produce 4xx errors in REST. This will propulate the `errors` property.
+ *
+ * Refer to https://shopify.dev/api/storefront#status_and_error_codes for more information.
+ */
+export declare type StorefrontApiResponseOk<DataGeneric> = FormattedExecutionResult<DataGeneric, StorefrontApiExtensions>;
+/**
+ * The Storefront API can return a 200 OK response code when the query succeeds, and will populate the `data` property. The generic you pass in through type parameters will be the shape of the `data` object, with `Partial` deeply-applied to all nested objects and properties, if successful. If you prefer not using this "deeply-partial" generic data object, consider using `StorefrontApiResponseOk` instead.
+ *
+ * The Storefront API can also return a 200 OK response code in cases that would typically produce 4xx errors in REST. This will propulate the `errors` property.
+ *
+ * Refer to https://shopify.dev/api/storefront#status_and_error_codes for more information.
+ */
+export declare type StorefrontApiResponseOkPartial<DataGeneric> = FormattedExecutionResult<PartialDeep<DataGeneric, {
+    recurseIntoArrays: true;
+}>, StorefrontApiExtensions>;
+/**
+ * The 4xx and 5xx errors occur infrequently. They are often related to network communications, your account, or an issue with Shopify’s services.
+ *
+ * Many errors that would typically return a 4xx or 5xx status code, return an HTTP 200 errors response instead. Refer to the 200 OK section in the link below for details.
+ *
+ * Commonly the response is a `JSON.parse`-able string, but in rare occasions may also return HTML which is not `JSON.parse()`-able.
+ *
+ * Refer to https://shopify.dev/api/storefront#status_and_error_codes for more information.
+ */
+export declare type StorefrontApiResponseError = string | {
+    errors: {
+        query: string;
+    };
+} | {
+    errors: string;
+};
+/**
+ * The Storefront API can return a 200 OK response code when the query succeeds, and will populate the `data` property. The generic you pass in through type parameters will be the shape of the `data` object if successful. If you prefer a "deeply-partial" version of that generic object, consider using `StorefrontApiResponseOkPartial` instead.
+ *
+ * The Storefront API can also return a 200 OK response code in cases that would typically produce 4xx errors in REST. This will propulate the `errors` property.
+ *
+ * 4xx and 5xx errors occur infrequently. They are often related to network communications, your account, or an issue with Shopify’s services.  Commonly the response is a `JSON.parse`-able string, but in rare occasions may also return HTML which is not `JSON.parse()`-able.
+ *
+ * Refer to https://shopify.dev/api/storefront#status_and_error_codes for more information.
+ */
+export declare type StorefrontApiResponse<DataGeneric> = StorefrontApiResponseOk<DataGeneric> | StorefrontApiResponseError;
+/**
+ * The Storefront API can return a 200 OK response code when the query succeeds, and will populate the `data` property. The generic you pass in through type parameters will be the shape of the `data` object, with `Partial` deeply-applied to all nested objects and properties, if successful. If you prefer not using this "deeply-partial" generic data object, consider using `StorefrontApiResponseOk` instead.
+ *
+ * The Storefront API can also return a 200 OK response code in cases that would typically produce 4xx errors in REST. This will propulate the `errors` property.
+ *
+ * 4xx and 5xx errors occur infrequently. They are often related to network communications, your account, or an issue with Shopify’s services. Commonly the response is a `JSON.parse`-able string, but in rare occasions may also return HTML which is not `JSON.parse()`-able.
+ *
+ * Refer to https://shopify.dev/api/storefront#status_and_error_codes for more information.
+ */
+export declare type StorefrontApiResponsePartial<DataGeneric> = StorefrontApiResponseOkPartial<DataGeneric> | StorefrontApiResponseError;
+export {};