@shopify/hydrogen-react 0.0.0-next-5c16c78 → 0.0.0-next-ea3959b

package/dist/browser-prod/ShopifyProvider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ShopifyProvider.mjs","sources":["../../src/ShopifyProvider.tsx"],"sourcesContent":["import {createContext, useContext, useMemo, type ReactNode} from 'react';\nimport type {LanguageCode, CountryCode} from './storefront-api-types.js';\nimport {SFAPI_VERSION} from './storefront-api-constants.js';\nimport {getPublicTokenHeadersRaw} from './storefront-client.js';\n\nconst ShopifyContext = createContext<ShopifyContextValue>({\n  storeDomain: 'test',\n  storefrontToken: 'abc123',\n  storefrontApiVersion: SFAPI_VERSION,\n  country: {\n    isoCode: 'US',\n  },\n  language: {\n    isoCode: 'EN',\n  },\n  locale: 'EN-US',\n  getStorefrontApiUrl() {\n    return '';\n  },\n  getPublicTokenHeaders() {\n    return {};\n  },\n  getShopifyDomain() {\n    return '';\n  },\n});\n\n/**\n * The `<ShopifyProvider/>` component enables use of the `useShop()` hook. The component should wrap your app.\n */\nexport function ShopifyProvider({\n  children,\n  shopifyConfig,\n}: {\n  children: ReactNode;\n  shopifyConfig: ShopifyContextProps;\n}) {\n  if (!shopifyConfig) {\n    throw new Error(\n      `The 'shopifyConfig' prop must be passed to '<ShopifyProvider/>'`\n    );\n  }\n\n  if (shopifyConfig.storefrontApiVersion !== SFAPI_VERSION) {\n    console.warn(\n      `<ShopifyProvider/>: This version of Hydrogen-UI is built for Shopify's Storefront API version ${SFAPI_VERSION}, but it looks like you're using version ${shopifyConfig.storefrontApiVersion}. There may be issues or bugs if you use a mismatched version of Hydrogen-UI and the Storefront API.`\n    );\n  }\n\n  const finalConfig = useMemo<ShopifyContextValue>(() => {\n    function getShopifyDomain(overrideProps?: {storeDomain?: string}) {\n      return overrideProps?.storeDomain ?? shopifyConfig.storeDomain;\n    }\n\n    return {\n      ...shopifyConfig,\n      getPublicTokenHeaders(overrideProps) {\n        return getPublicTokenHeadersRaw(\n          overrideProps.contentType,\n          shopifyConfig.storefrontApiVersion,\n          overrideProps.storefrontToken ?? shopifyConfig.storefrontToken\n        );\n      },\n      getShopifyDomain,\n      getStorefrontApiUrl(overrideProps) {\n        if (overrideProps?.storeDomain?.includes('.myshopify.com')) {\n          if (__HYDROGEN_DEV__) {\n            console.warn(\n              `<ShopifyProvider/>: passing a 'storeDomain' prop that includes '.myshopify.com' will be unsupported in the future. Passing only the subdomain (for example, if the URL is 'test.myshopify.com', passing in 'test') will be the supported way going forward.`\n            );\n          }\n        }\n        return `${getShopifyDomain({\n          storeDomain: overrideProps?.storeDomain ?? shopifyConfig.storeDomain,\n        })}/api/${\n          overrideProps?.storefrontApiVersion ??\n          shopifyConfig.storefrontApiVersion\n        }/graphql.json`;\n      },\n    };\n  }, [shopifyConfig]);\n\n  return (\n    <ShopifyContext.Provider value={finalConfig}>\n      {children}\n    </ShopifyContext.Provider>\n  );\n}\n\n/**\n * Provides access to the `shopifyConfig` prop of `<ShopifyProvider/>`. Must be a descendent of `<ShopifyProvider/>`.\n */\nexport function useShop() {\n  const shopContext = useContext(ShopifyContext);\n  if (!shopContext) {\n    throw new Error(`'useShop()' must be a descendent of <ShopifyProvider/>`);\n  }\n  return shopContext;\n}\n\n/**\n * Shopify-specific values that are used in various Hydrogen-UI components and hooks.\n */\nexport type ShopifyContextProps = {\n  /** The globally-unique identifier for the Shop */\n  storefrontId?: string;\n  /** The full domain of your Shopify storefront URL (eg: the complete string of `{subdomain}.myshopify.com`). */\n  storeDomain: string;\n  /** The Storefront API public access token. Refer to the [authentication](https://shopify.dev/api/storefront#authentication) documentation for more details. */\n  storefrontToken: string;\n  /** 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.  */\n  storefrontApiVersion: string;\n  country?: {\n    /**\n     * 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`.\n     */\n    isoCode: CountryCode;\n  };\n  language?: {\n    /**\n     * `ISO 369` language codes supported by Shopify.\n     */\n    isoCode: LanguageCode;\n  };\n  /**\n   * The locale string based on `country` and `language`.\n   */\n  locale?: string;\n};\n\nexport type ShopifyContextValue = ShopifyContextProps & {\n  /**\n   * Creates the fully-qualified URL to your store's GraphQL endpoint.\n   *\n   * By default, it will use the config you passed in when creating `<ShopifyProvider/>`. However, you can override the following settings on each invocation of `getStorefrontApiUrl({...})`:\n   *\n   * - `storeDomain`\n   * - `storefrontApiVersion`\n   */\n  getStorefrontApiUrl: (props?: {\n    /** The host name of the domain (eg: `{shop}.myshopify.com`). */\n    storeDomain?: string;\n    /** 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. */\n    storefrontApiVersion?: string;\n  }) => string;\n  /**\n   * Returns an object that contains headers that are needed for each query to Storefront API GraphQL endpoint. This uses the public Storefront API token.\n   *\n   * By default, it will use the config you passed in when creating `<ShopifyProvider/>`. However, you can override the following settings on each invocation of `getPublicTokenHeaders({...})`:\n   *\n   * - `contentType`\n   * - `storefrontToken`\n   *\n   */\n  getPublicTokenHeaders: (props: {\n    /**\n     * Customizes which `\"content-type\"` header is added when using `getPrivateTokenHeaders()` and `getPublicTokenHeaders()`. When fetching with a `JSON.stringify()`-ed `body`, use `\"json\"`. When fetching with a `body` that is a plain string, use `\"graphql\"`. Defaults to `\"json\"`\n     */\n    contentType: 'json' | 'graphql';\n    /** The Storefront API access token. Refer to the [authentication](https://shopify.dev/api/storefront#authentication) documentation for more details. */\n    storefrontToken?: string;\n  }) => Record<string, string>;\n  /**\n   * Creates the fully-qualified URL to your myshopify.com domain.\n   *\n   * By default, it will use the config you passed in when calling `<ShopifyProvider/>`. However, you can override the following settings on each invocation of `getShopifyDomain({...})`:\n   *\n   * - `storeDomain`\n   */\n  getShopifyDomain: (props?: {storeDomain?: string}) => string;\n};\n"],"names":["ShopifyContext","createContext","storeDomain","storefrontToken","storefrontApiVersion","SFAPI_VERSION","country","isoCode","language","locale","getStorefrontApiUrl","getPublicTokenHeaders","getShopifyDomain","ShopifyProvider","children","shopifyConfig","Error","console","warn","finalConfig","useMemo","overrideProps","getPublicTokenHeadersRaw","contentType","includes","_jsx","useShop","shopContext","useContext"],"mappings":";;;;AAKA,MAAMA,iBAAiBC,cAAmC;AAAA,EACxDC,aAAa;AAAA,EACbC,iBAAiB;AAAA,EACjBC,sBAAsBC;AAAAA,EACtBC,SAAS;AAAA,IACPC,SAAS;AAAA,EACX;AAAA,EACAC,UAAU;AAAA,IACRD,SAAS;AAAA,EACX;AAAA,EACAE,QAAQ;AAAA,EACRC,sBAAsB;AACb,WAAA;AAAA,EACT;AAAA,EACAC,wBAAwB;AACtB,WAAO;EACT;AAAA,EACAC,mBAAmB;AACV,WAAA;AAAA,EACT;AACF,CAAC;AAKM,SAASC,gBAAgB;AAAA,EAC9BC;AAAAA,EACAC;AAIF,GAAG;AACD,MAAI,CAACA,eAAe;AACZ,UAAA,IAAIC,MACP,iEAAgE;AAAA,EAErE;AAEID,MAAAA,cAAcX,yBAAyBC,eAAe;AACxDY,YAAQC,KACL,iGAAgGb,yDAAyDU,cAAcX,0HAA0H;AAAA,EAEtS;AAEMe,QAAAA,cAAcC,QAA6B,MAAM;AACrD,aAASR,iBAAiBS,eAAwC;;AACzDA,cAAAA,oDAAenB,gBAAfmB,YAA8BN,cAAcb;AAAAA,IACrD;AAEO,WAAA;AAAA,MACL,GAAGa;AAAAA,MACHJ,sBAAsBU,eAAe;;AAC5BC,eAAAA,yBACLD,cAAcE,aACdR,cAAcX,uBACdiB,mBAAclB,oBAAdkB,YAAiCN,cAAcZ,eAAe;AAAA,MAElE;AAAA,MACAS;AAAAA,MACAF,oBAAoBW,eAAe;;AACjC,aAAIA,oDAAenB,gBAAfmB,mBAA4BG,SAAS;AAAmB;AAO5D,eAAQ,GAAEZ,iBAAiB;AAAA,UACzBV,cAAamB,oDAAenB,gBAAfmB,YAA8BN,cAAcb;AAAAA,QAAAA,CAC1D,UACCmB,oDAAejB,yBAAfiB,YACAN,cAAcX;AAAAA,MAElB;AAAA,IAAA;AAAA,EACF,GACC,CAACW,aAAa,CAAC;AAGhB,SAAAU,oBAAC,eAAe,UAAQ;AAAA,IAAC,OAAON;AAAAA,IAAY;AAAA,EAAA,CAElB;AAE9B;AAKO,SAASO,UAAU;AAClBC,QAAAA,cAAcC,WAAW5B,cAAc;AAC7C,MAAI,CAAC2B,aAAa;AACV,UAAA,IAAIX,MAAO,wDAAuD;AAAA,EAC1E;AACOW,SAAAA;AACT;"}
+{"version":3,"file":"ShopifyProvider.mjs","sources":["../../src/ShopifyProvider.tsx"],"sourcesContent":["import {createContext, useContext, useMemo, type ReactNode} from 'react';\nimport type {LanguageCode, CountryCode} from './storefront-api-types.js';\nimport {SFAPI_VERSION} from './storefront-api-constants.js';\nimport {getPublicTokenHeadersRaw} from './storefront-client.js';\n\nconst ShopifyContext = createContext<ShopifyContextValue>({\n  storeDomain: 'test',\n  storefrontToken: 'abc123',\n  storefrontApiVersion: SFAPI_VERSION,\n  country: {\n    isoCode: 'US',\n  },\n  language: {\n    isoCode: 'EN',\n  },\n  locale: 'EN-US',\n  getStorefrontApiUrl() {\n    return '';\n  },\n  getPublicTokenHeaders() {\n    return {};\n  },\n  getShopifyDomain() {\n    return '';\n  },\n});\n\n/**\n * The `<ShopifyProvider/>` component enables use of the `useShop()` hook. The component should wrap your app.\n */\nexport function ShopifyProvider({\n  children,\n  shopifyConfig,\n}: {\n  children: ReactNode;\n  shopifyConfig: ShopifyContextProps;\n}) {\n  if (!shopifyConfig) {\n    throw new Error(\n      `The 'shopifyConfig' prop must be passed to '<ShopifyProvider/>'`\n    );\n  }\n\n  if (shopifyConfig.storefrontApiVersion !== SFAPI_VERSION) {\n    console.warn(\n      `<ShopifyProvider/>: This version of Hydrogen-UI is built for Shopify's Storefront API version ${SFAPI_VERSION}, but it looks like you're using version ${shopifyConfig.storefrontApiVersion}. There may be issues or bugs if you use a mismatched version of Hydrogen-UI and the Storefront API.`\n    );\n  }\n\n  const finalConfig = useMemo<ShopifyContextValue>(() => {\n    function getShopifyDomain(overrideProps?: {storeDomain?: string}) {\n      return overrideProps?.storeDomain ?? shopifyConfig.storeDomain;\n    }\n\n    return {\n      ...shopifyConfig,\n      getPublicTokenHeaders(overrideProps) {\n        return getPublicTokenHeadersRaw(\n          overrideProps.contentType,\n          shopifyConfig.storefrontApiVersion,\n          overrideProps.storefrontToken ?? shopifyConfig.storefrontToken\n        );\n      },\n      getShopifyDomain,\n      getStorefrontApiUrl(overrideProps) {\n        if (overrideProps?.storeDomain?.includes('.myshopify.com')) {\n          if (__HYDROGEN_DEV__) {\n            console.warn(\n              `<ShopifyProvider/>: passing a 'storeDomain' prop that includes '.myshopify.com' will be unsupported in the future. Passing only the subdomain (for example, if the URL is 'test.myshopify.com', passing in 'test') will be the supported way going forward.`\n            );\n          }\n        }\n        return `${getShopifyDomain({\n          storeDomain: overrideProps?.storeDomain ?? shopifyConfig.storeDomain,\n        })}/api/${\n          overrideProps?.storefrontApiVersion ??\n          shopifyConfig.storefrontApiVersion\n        }/graphql.json`;\n      },\n    };\n  }, [shopifyConfig]);\n\n  return (\n    <ShopifyContext.Provider value={finalConfig}>\n      {children}\n    </ShopifyContext.Provider>\n  );\n}\n\n/**\n * Provides access to the `shopifyConfig` prop of `<ShopifyProvider/>`. Must be a descendent of `<ShopifyProvider/>`.\n */\nexport function useShop() {\n  const shopContext = useContext(ShopifyContext);\n  if (!shopContext) {\n    throw new Error(`'useShop()' must be a descendent of <ShopifyProvider/>`);\n  }\n  return shopContext;\n}\n\n/**\n * Shopify-specific values that are used in various Hydrogen-UI components and hooks.\n */\nexport type ShopifyContextProps = {\n  /** The globally-unique identifier for the Shop */\n  storefrontId?: string;\n  /** The full domain of your Shopify storefront URL (eg: the complete string of `{subdomain}.myshopify.com`). */\n  storeDomain: string;\n  /** The Storefront API public access token. Refer to the [authentication](https://shopify.dev/api/storefront#authentication) documentation for more details. */\n  storefrontToken: string;\n  /** 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.  */\n  storefrontApiVersion: string;\n  country?: {\n    /**\n     * 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`.\n     */\n    isoCode: CountryCode;\n  };\n  language?: {\n    /**\n     * `ISO 369` language codes supported by Shopify.\n     */\n    isoCode: LanguageCode;\n  };\n  /**\n   * The locale string based on `country` and `language`.\n   */\n  locale?: string;\n};\n\nexport type ShopifyContextValue = ShopifyContextProps & {\n  /**\n   * Creates the fully-qualified URL to your store's GraphQL endpoint.\n   *\n   * By default, it will use the config you passed in when creating `<ShopifyProvider/>`. However, you can override the following settings on each invocation of `getStorefrontApiUrl({...})`:\n   *\n   * - `storeDomain`\n   * - `storefrontApiVersion`\n   */\n  getStorefrontApiUrl: (props?: {\n    /** The host name of the domain (eg: `{shop}.myshopify.com`). */\n    storeDomain?: string;\n    /** 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. */\n    storefrontApiVersion?: string;\n  }) => string;\n  /**\n   * Returns an object that contains headers that are needed for each query to Storefront API GraphQL endpoint. This uses the public Storefront API token.\n   *\n   * By default, it will use the config you passed in when creating `<ShopifyProvider/>`. However, you can override the following settings on each invocation of `getPublicTokenHeaders({...})`:\n   *\n   * - `contentType`\n   * - `storefrontToken`\n   *\n   */\n  getPublicTokenHeaders: (props: {\n    /**\n     * Customizes which `\"content-type\"` header is added when using `getPrivateTokenHeaders()` and `getPublicTokenHeaders()`. When fetching with a `JSON.stringify()`-ed `body`, use `\"json\"`. When fetching with a `body` that is a plain string, use `\"graphql\"`. Defaults to `\"json\"`\n     */\n    contentType: 'json' | 'graphql';\n    /** The Storefront API access token. Refer to the [authentication](https://shopify.dev/api/storefront#authentication) documentation for more details. */\n    storefrontToken?: string;\n  }) => Record<string, string>;\n  /**\n   * Creates the fully-qualified URL to your myshopify.com domain.\n   *\n   * By default, it will use the config you passed in when calling `<ShopifyProvider/>`. However, you can override the following settings on each invocation of `getShopifyDomain({...})`:\n   *\n   * - `storeDomain`\n   */\n  getShopifyDomain: (props?: {storeDomain?: string}) => string;\n};\n"],"names":[],"mappings":";;;;AAKA,MAAM,iBAAiB,cAAmC;AAAA,EACxD,aAAa;AAAA,EACb,iBAAiB;AAAA,EACjB,sBAAsB;AAAA,EACtB,SAAS;AAAA,IACP,SAAS;AAAA,EACX;AAAA,EACA,UAAU;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,QAAQ;AAAA,EACR,sBAAsB;AACb,WAAA;AAAA,EACT;AAAA,EACA,wBAAwB;AACtB,WAAO;EACT;AAAA,EACA,mBAAmB;AACV,WAAA;AAAA,EACT;AACF,CAAC;AAKM,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AACF,GAGG;AACD,MAAI,CAAC,eAAe;AAClB,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAAA,EAEJ;AAEI,MAAA,cAAc,yBAAyB,eAAe;AAChD,YAAA;AAAA,MACN,iGAAiG,yDAAyD,cAAc;AAAA,IAAA;AAAA,EAE5K;AAEM,QAAA,cAAc,QAA6B,MAAM;AACrD,aAAS,iBAAiB,eAAwC;AACzD,cAAA,+CAAe,gBAAe,cAAc;AAAA,IACrD;AAEO,WAAA;AAAA,MACL,GAAG;AAAA,MACH,sBAAsB,eAAe;AAC5B,eAAA;AAAA,UACL,cAAc;AAAA,UACd,cAAc;AAAA,UACd,cAAc,mBAAmB,cAAc;AAAA,QAAA;AAAA,MAEnD;AAAA,MACA;AAAA,MACA,oBAAoB,eAAe;;AACjC,aAAI,oDAAe,gBAAf,mBAA4B,SAAS;AAAmB;AAO5D,eAAO,GAAG,iBAAiB;AAAA,UACzB,cAAa,+CAAe,gBAAe,cAAc;AAAA,QAAA,CAC1D,UACC,+CAAe,yBACf,cAAc;AAAA,MAElB;AAAA,IAAA;AAAA,EACF,GACC,CAAC,aAAa,CAAC;AAElB,6BACG,eAAe,UAAf,EAAwB,OAAO,aAC7B,SACH,CAAA;AAEJ;AAKO,SAAS,UAAU;AAClB,QAAA,cAAc,WAAW,cAAc;AAC7C,MAAI,CAAC,aAAa;AACV,UAAA,IAAI,MAAM,wDAAwD;AAAA,EAC1E;AACO,SAAA;AACT;"}

package/dist/browser-prod/Video.mjs

@@ -1,8 +1,8 @@
-import { shopifyImageLoader } from "./image-size.mjs";
-import { createElement } from "react";
 import { jsx } from "react/jsx-runtime";
+import { createElement } from "react";
+import { shopifyImageLoader } from "./image-size.mjs";
 function Video(props) {
-  var _a, _b;
+  var _a;
   const {
     data,
     previewImageOptions,
@@ -13,30 +13,39 @@ function Video(props) {
     ...passthroughProps
   } = props;
   const posterUrl = shopifyImageLoader({
-    src: (_b = (_a = data.previewImage) == null ? void 0 : _a.url) != null ? _b : "",
+    src: ((_a = data.previewImage) == null ? void 0 : _a.url) ?? "",
     ...previewImageOptions
   });
   if (!data.sources) {
     throw new Error(`<Video/> requires a 'data.sources' array`);
   }
-  return /* @__PURE__ */ jsx("video", {
-    ...passthroughProps,
-    id,
-    playsInline,
-    controls,
-    poster: posterUrl,
-    children: data.sources.map((source) => {
-      if (!((source == null ? void 0 : source.url) && (source == null ? void 0 : source.mimeType))) {
-        throw new Error(`<Video/> needs 'source.url' and 'source.mimeType'`);
+  return (
+    // eslint-disable-next-line jsx-a11y/media-has-caption
+    /* @__PURE__ */ jsx(
+      "video",
+      {
+        ...passthroughProps,
+        id,
+        playsInline,
+        controls,
+        poster: posterUrl,
+        children: data.sources.map((source) => {
+          if (!((source == null ? void 0 : source.url) && (source == null ? void 0 : source.mimeType))) {
+            throw new Error(`<Video/> needs 'source.url' and 'source.mimeType'`);
+          }
+          return /* @__PURE__ */ createElement(
+            "source",
+            {
+              ...sourceProps,
+              key: source.url,
+              src: source.url,
+              type: source.mimeType
+            }
+          );
+        })
       }
-      return /* @__PURE__ */ createElement("source", {
-        ...sourceProps,
-        key: source.url,
-        src: source.url,
-        type: source.mimeType
-      });
-    })
-  });
+    )
+  );
 }
 export {
   Video

package/dist/browser-prod/Video.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Video.mjs","sources":["../../src/Video.tsx"],"sourcesContent":["import {type HTMLAttributes} from 'react';\nimport {shopifyImageLoader} from './image-size.js';\nimport type {Video as VideoType} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\n\nexport interface VideoProps {\n  /** An object with fields that correspond to the Storefront API's [Video object](https://shopify.dev/api/storefront/latest/objects/video). */\n  data: PartialDeep<VideoType, {recurseIntoArrays: true}>;\n  /** An object of image size options for the video's `previewImage`. Uses `shopifyImageLoader` to generate the `poster` URL. */\n  previewImageOptions?: Parameters<typeof shopifyImageLoader>[0];\n  /** Props that will be passed to the `video` element's `source` children elements. */\n  sourceProps?: HTMLAttributes<HTMLSourceElement> & {\n    'data-testid'?: string;\n  };\n}\n\n/**\n * The `Video` component renders a `video` for the Storefront API's [Video object](https://shopify.dev/api/storefront/reference/products/video).\n */\nexport function Video(props: JSX.IntrinsicElements['video'] & VideoProps) {\n  const {\n    data,\n    previewImageOptions,\n    id = data.id,\n    playsInline = true,\n    controls = true,\n    sourceProps = {},\n    ...passthroughProps\n  } = props;\n\n  const posterUrl = shopifyImageLoader({\n    src: data.previewImage?.url ?? '',\n    ...previewImageOptions,\n  });\n\n  if (!data.sources) {\n    throw new Error(`<Video/> requires a 'data.sources' array`);\n  }\n\n  return (\n    // eslint-disable-next-line jsx-a11y/media-has-caption\n    <video\n      {...passthroughProps}\n      id={id}\n      playsInline={playsInline}\n      controls={controls}\n      poster={posterUrl}\n    >\n      {data.sources.map((source) => {\n        if (!(source?.url && source?.mimeType)) {\n          throw new Error(`<Video/> needs 'source.url' and 'source.mimeType'`);\n        }\n        return (\n          <source\n            {...sourceProps}\n            key={source.url}\n            src={source.url}\n            type={source.mimeType}\n          />\n        );\n      })}\n    </video>\n  );\n}\n"],"names":["Video","props","data","previewImageOptions","id","playsInline","controls","sourceProps","passthroughProps","posterUrl","shopifyImageLoader","src","previewImage","url","sources","Error","map","source","mimeType"],"mappings":";;;AAmBO,SAASA,MAAMC,OAAoD;;AAClE,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,KAAKF,KAAKE;AAAAA,IACVC,cAAc;AAAA,IACdC,WAAW;AAAA,IACXC,cAAc,CAAC;AAAA,OACZC;AAAAA,EACDP,IAAAA;AAEJ,QAAMQ,YAAYC,mBAAmB;AAAA,IACnCC,MAAKT,gBAAKU,iBAALV,mBAAmBW,QAAnBX,YAA0B;AAAA,IAC/B,GAAGC;AAAAA,EAAAA,CACJ;AAEG,MAAA,CAACD,KAAKY,SAAS;AACX,UAAA,IAAIC,MAAO,0CAAyC;AAAA,EAC5D;AAEA,6BAEE,SAAA;AAAA,IAAA,GACMP;AAAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQC;AAAAA,IAAU,UAEjBP,KAAKY,QAAQE,IAAKC,CAAW,WAAA;AAC5B,UAAI,GAAEA,iCAAQJ,SAAOI,iCAAQC,YAAW;AAChC,cAAA,IAAIH,MAAO,mDAAkD;AAAA,MACrE;AACA,2CACE,UAAA;AAAA,QAAA,GACMR;AAAAA,QACJ,KAAKU,OAAOJ;AAAAA,QACZ,KAAKI,OAAOJ;AAAAA,QACZ,MAAMI,OAAOC;AAAAA,MAAAA,CACb;AAAA,IAAA,CAEL;AAAA,EAAA,CAAC;AAGR;"}
+{"version":3,"file":"Video.mjs","sources":["../../src/Video.tsx"],"sourcesContent":["import {type HTMLAttributes} from 'react';\nimport {shopifyImageLoader} from './image-size.js';\nimport type {Video as VideoType} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\n\nexport interface VideoProps {\n  /** An object with fields that correspond to the Storefront API's [Video object](https://shopify.dev/api/storefront/latest/objects/video). */\n  data: PartialDeep<VideoType, {recurseIntoArrays: true}>;\n  /** An object of image size options for the video's `previewImage`. Uses `shopifyImageLoader` to generate the `poster` URL. */\n  previewImageOptions?: Parameters<typeof shopifyImageLoader>[0];\n  /** Props that will be passed to the `video` element's `source` children elements. */\n  sourceProps?: HTMLAttributes<HTMLSourceElement> & {\n    'data-testid'?: string;\n  };\n}\n\n/**\n * The `Video` component renders a `video` for the Storefront API's [Video object](https://shopify.dev/api/storefront/reference/products/video).\n */\nexport function Video(props: JSX.IntrinsicElements['video'] & VideoProps) {\n  const {\n    data,\n    previewImageOptions,\n    id = data.id,\n    playsInline = true,\n    controls = true,\n    sourceProps = {},\n    ...passthroughProps\n  } = props;\n\n  const posterUrl = shopifyImageLoader({\n    src: data.previewImage?.url ?? '',\n    ...previewImageOptions,\n  });\n\n  if (!data.sources) {\n    throw new Error(`<Video/> requires a 'data.sources' array`);\n  }\n\n  return (\n    // eslint-disable-next-line jsx-a11y/media-has-caption\n    <video\n      {...passthroughProps}\n      id={id}\n      playsInline={playsInline}\n      controls={controls}\n      poster={posterUrl}\n    >\n      {data.sources.map((source) => {\n        if (!(source?.url && source?.mimeType)) {\n          throw new Error(`<Video/> needs 'source.url' and 'source.mimeType'`);\n        }\n        return (\n          <source\n            {...sourceProps}\n            key={source.url}\n            src={source.url}\n            type={source.mimeType}\n          />\n        );\n      })}\n    </video>\n  );\n}\n"],"names":[],"mappings":";;;AAmBO,SAAS,MAAM,OAAoD;;AAClE,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,KAAK,KAAK;AAAA,IACV,cAAc;AAAA,IACd,WAAW;AAAA,IACX,cAAc,CAAC;AAAA,IACf,GAAG;AAAA,EACD,IAAA;AAEJ,QAAM,YAAY,mBAAmB;AAAA,IACnC,OAAK,UAAK,iBAAL,mBAAmB,QAAO;AAAA,IAC/B,GAAG;AAAA,EAAA,CACJ;AAEG,MAAA,CAAC,KAAK,SAAS;AACX,UAAA,IAAI,MAAM,0CAA0C;AAAA,EAC5D;AAEA;AAAA;AAAA,IAEE;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA,QAAQ;AAAA,QAEP,UAAK,KAAA,QAAQ,IAAI,CAAC,WAAW;AAC5B,cAAI,GAAE,iCAAQ,SAAO,iCAAQ,YAAW;AAChC,kBAAA,IAAI,MAAM,mDAAmD;AAAA,UACrE;AAEE,iBAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACE,GAAG;AAAA,cACJ,KAAK,OAAO;AAAA,cACZ,KAAK,OAAO;AAAA,cACZ,MAAM,OAAO;AAAA,YAAA;AAAA,UAAA;AAAA,QACf,CAEH;AAAA,MAAA;AAAA,IACH;AAAA;AAEJ;"}

package/dist/browser-prod/_virtual/index.mjs

@@ -1,5 +1,14 @@
-var shim = { exports: {} };
+var shimExports = {};
+var shim = {
+  get exports() {
+    return shimExports;
+  },
+  set exports(v) {
+    shimExports = v;
+  }
+};
 export {
-  shim as s
+  shim as __module,
+  shimExports as exports
 };
 //# sourceMappingURL=index.mjs.map

package/dist/browser-prod/_virtual/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/dist/browser-prod/_virtual/with-selector.mjs

@@ -1,5 +1,14 @@
-var withSelector = { exports: {} };
+var withSelectorExports = {};
+var withSelector = {
+  get exports() {
+    return withSelectorExports;
+  },
+  set exports(v) {
+    withSelectorExports = v;
+  }
+};
 export {
-  withSelector as w
+  withSelector as __module,
+  withSelectorExports as exports
 };
 //# sourceMappingURL=with-selector.mjs.map

package/dist/browser-prod/_virtual/with-selector.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"with-selector.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"with-selector.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/dist/browser-prod/cart-hooks.mjs

@@ -3,40 +3,37 @@ import { useShop } from "./ShopifyProvider.mjs";
 import { SHOPIFY_STOREFRONT_ID_HEADER, SHOPIFY_Y, SHOPIFY_S, SHOPIFY_STOREFRONT_Y_HEADER, SHOPIFY_STOREFRONT_S_HEADER } from "./cart-constants.mjs";
 import { parse } from "worktop/cookie";
 function useCartFetch() {
-  const {
-    storefrontId,
-    getPublicTokenHeaders,
-    getStorefrontApiUrl
-  } = useShop();
-  return useCallback(({
-    query,
-    variables
-  }) => {
-    const headers = getPublicTokenHeaders({
-      contentType: "json"
-    });
-    if (storefrontId) {
-      headers[SHOPIFY_STOREFRONT_ID_HEADER] = storefrontId;
-    }
-    const cookieData = parse(document.cookie);
-    if (cookieData[SHOPIFY_Y] && cookieData[SHOPIFY_S]) {
-      headers[SHOPIFY_STOREFRONT_Y_HEADER] = cookieData[SHOPIFY_Y];
-      headers[SHOPIFY_STOREFRONT_S_HEADER] = cookieData[SHOPIFY_S];
-    }
-    return fetch(getStorefrontApiUrl(), {
-      method: "POST",
-      headers,
-      body: JSON.stringify({
-        query: query.toString(),
-        variables
-      })
-    }).then((res) => res.json()).catch((error) => {
-      return {
-        data: void 0,
-        errors: error.toString()
-      };
-    });
-  }, [getPublicTokenHeaders, storefrontId, getStorefrontApiUrl]);
+  const { storefrontId, getPublicTokenHeaders, getStorefrontApiUrl } = useShop();
+  return useCallback(
+    ({
+      query,
+      variables
+    }) => {
+      const headers = getPublicTokenHeaders({ contentType: "json" });
+      if (storefrontId) {
+        headers[SHOPIFY_STOREFRONT_ID_HEADER] = storefrontId;
+      }
+      const cookieData = parse(document.cookie);
+      if (cookieData[SHOPIFY_Y] && cookieData[SHOPIFY_S]) {
+        headers[SHOPIFY_STOREFRONT_Y_HEADER] = cookieData[SHOPIFY_Y];
+        headers[SHOPIFY_STOREFRONT_S_HEADER] = cookieData[SHOPIFY_S];
+      }
+      return fetch(getStorefrontApiUrl(), {
+        method: "POST",
+        headers,
+        body: JSON.stringify({
+          query: query.toString(),
+          variables
+        })
+      }).then((res) => res.json()).catch((error) => {
+        return {
+          data: void 0,
+          errors: error.toString()
+        };
+      });
+    },
+    [getPublicTokenHeaders, storefrontId, getStorefrontApiUrl]
+  );
 }
 export {
   useCartFetch

package/dist/browser-prod/cart-hooks.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"cart-hooks.mjs","sources":["../../src/cart-hooks.tsx"],"sourcesContent":["import {useState, useCallback} from 'react';\nimport {useShop} from './ShopifyProvider.js';\nimport {flattenConnection} from './flatten-connection.js';\nimport {CartInput, Cart as CartType} from './storefront-api-types.js';\nimport {CartCreate, defaultCartFragment} from './cart-queries.js';\nimport {Cart} from './cart-types.js';\nimport {\n  SHOPIFY_STOREFRONT_ID_HEADER,\n  SHOPIFY_STOREFRONT_Y_HEADER,\n  SHOPIFY_STOREFRONT_S_HEADER,\n  SHOPIFY_Y,\n  SHOPIFY_S,\n} from './cart-constants.js';\nimport {parse} from 'worktop/cookie';\nimport type {StorefrontApiResponseOkPartial} from './storefront-api-response.types.js';\n\nexport function useCartFetch() {\n  const {storefrontId, getPublicTokenHeaders, getStorefrontApiUrl} = useShop();\n\n  return useCallback(\n    <ReturnDataGeneric,>({\n      query,\n      variables,\n    }: {\n      query: string;\n      variables: Record<string, unknown>;\n    }): Promise<StorefrontApiResponseOkPartial<ReturnDataGeneric>> => {\n      const headers = getPublicTokenHeaders({contentType: 'json'});\n\n      if (storefrontId) {\n        headers[SHOPIFY_STOREFRONT_ID_HEADER] = storefrontId;\n      }\n\n      // Find Shopify cookies\n      const cookieData = parse(document.cookie);\n      if (cookieData[SHOPIFY_Y] && cookieData[SHOPIFY_S]) {\n        headers[SHOPIFY_STOREFRONT_Y_HEADER] = cookieData[SHOPIFY_Y];\n        headers[SHOPIFY_STOREFRONT_S_HEADER] = cookieData[SHOPIFY_S];\n      }\n\n      return fetch(getStorefrontApiUrl(), {\n        method: 'POST',\n        headers,\n        body: JSON.stringify({\n          query: query.toString(),\n          variables,\n        }),\n      })\n        .then((res) => res.json())\n        .catch((error) => {\n          return {\n            data: undefined,\n            errors: error.toString(),\n          };\n        });\n    },\n    [getPublicTokenHeaders, storefrontId, getStorefrontApiUrl]\n  );\n}\n\nexport function useInstantCheckout() {\n  const [cart, updateCart] = useState<Cart | undefined>();\n  const [checkoutUrl, updateCheckoutUrl] = useState<Cart['checkoutUrl']>();\n  const [error, updateError] = useState<string | undefined>();\n\n  const fetch = useCartFetch();\n\n  const createInstantCheckout = useCallback(\n    async (cartInput: CartInput) => {\n      const {data, errors} = await fetch<{\n        cartCreate: {cart: CartType};\n      }>({\n        query: CartCreate(defaultCartFragment),\n        variables: {\n          input: cartInput,\n        },\n      });\n\n      if (errors) {\n        updateError(errors.toString());\n        updateCart(undefined);\n        updateCheckoutUrl(undefined);\n      }\n\n      if (data?.cartCreate?.cart) {\n        const dataCart = data.cartCreate.cart;\n        updateCart({\n          ...dataCart,\n          lines: flattenConnection(dataCart.lines),\n          note: dataCart.note ?? undefined,\n        });\n        updateCheckoutUrl(dataCart.checkoutUrl);\n      }\n    },\n    [fetch]\n  );\n\n  return {cart, checkoutUrl, error, createInstantCheckout};\n}\n"],"names":["useCartFetch","storefrontId","getPublicTokenHeaders","getStorefrontApiUrl","useShop","useCallback","query","variables","headers","contentType","SHOPIFY_STOREFRONT_ID_HEADER","cookieData","parse","document","cookie","SHOPIFY_Y","SHOPIFY_S","SHOPIFY_STOREFRONT_Y_HEADER","SHOPIFY_STOREFRONT_S_HEADER","fetch","method","body","JSON","stringify","toString","then","res","json","catch","error","data","undefined","errors"],"mappings":";;;;AAgBO,SAASA,eAAe;AACvB,QAAA;AAAA,IAACC;AAAAA,IAAcC;AAAAA,IAAuBC;AAAAA,MAAuBC,QAAS;AAE5E,SAAOC,YACL,CAAqB;AAAA,IACnBC;AAAAA,IACAC;AAAAA,EAAAA,MAIgE;AAChE,UAAMC,UAAUN,sBAAsB;AAAA,MAACO,aAAa;AAAA,IAAA,CAAO;AAE3D,QAAIR,cAAc;AAChBO,cAAQE,gCAAgCT;AAAAA,IAC1C;AAGMU,UAAAA,aAAaC,MAAMC,SAASC,MAAM;AACpCH,QAAAA,WAAWI,cAAcJ,WAAWK,YAAY;AAClDR,cAAQS,+BAA+BN,WAAWI;AAClDP,cAAQU,+BAA+BP,WAAWK;AAAAA,IACpD;AAEOG,WAAAA,MAAMhB,uBAAuB;AAAA,MAClCiB,QAAQ;AAAA,MACRZ;AAAAA,MACAa,MAAMC,KAAKC,UAAU;AAAA,QACnBjB,OAAOA,MAAMkB,SAAU;AAAA,QACvBjB;AAAAA,MAAAA,CACD;AAAA,IAAA,CACF,EACEkB,KAAMC,CAAAA,QAAQA,IAAIC,MAAM,EACxBC,MAAOC,CAAU,UAAA;AACT,aAAA;AAAA,QACLC,MAAMC;AAAAA,QACNC,QAAQH,MAAML,SAAQ;AAAA,MAAA;AAAA,IACxB,CACD;AAAA,EAEL,GAAA,CAACtB,uBAAuBD,cAAcE,mBAAmB,CAAC;AAE9D;"}
+{"version":3,"file":"cart-hooks.mjs","sources":["../../src/cart-hooks.tsx"],"sourcesContent":["import {useState, useCallback} from 'react';\nimport {useShop} from './ShopifyProvider.js';\nimport {flattenConnection} from './flatten-connection.js';\nimport {CartInput, Cart as CartType} from './storefront-api-types.js';\nimport {CartCreate, defaultCartFragment} from './cart-queries.js';\nimport {Cart} from './cart-types.js';\nimport {\n  SHOPIFY_STOREFRONT_ID_HEADER,\n  SHOPIFY_STOREFRONT_Y_HEADER,\n  SHOPIFY_STOREFRONT_S_HEADER,\n  SHOPIFY_Y,\n  SHOPIFY_S,\n} from './cart-constants.js';\nimport {parse} from 'worktop/cookie';\nimport type {StorefrontApiResponseOkPartial} from './storefront-api-response.types.js';\n\nexport function useCartFetch() {\n  const {storefrontId, getPublicTokenHeaders, getStorefrontApiUrl} = useShop();\n\n  return useCallback(\n    <ReturnDataGeneric,>({\n      query,\n      variables,\n    }: {\n      query: string;\n      variables: Record<string, unknown>;\n    }): Promise<StorefrontApiResponseOkPartial<ReturnDataGeneric>> => {\n      const headers = getPublicTokenHeaders({contentType: 'json'});\n\n      if (storefrontId) {\n        headers[SHOPIFY_STOREFRONT_ID_HEADER] = storefrontId;\n      }\n\n      // Find Shopify cookies\n      const cookieData = parse(document.cookie);\n      if (cookieData[SHOPIFY_Y] && cookieData[SHOPIFY_S]) {\n        headers[SHOPIFY_STOREFRONT_Y_HEADER] = cookieData[SHOPIFY_Y];\n        headers[SHOPIFY_STOREFRONT_S_HEADER] = cookieData[SHOPIFY_S];\n      }\n\n      return fetch(getStorefrontApiUrl(), {\n        method: 'POST',\n        headers,\n        body: JSON.stringify({\n          query: query.toString(),\n          variables,\n        }),\n      })\n        .then((res) => res.json())\n        .catch((error) => {\n          return {\n            data: undefined,\n            errors: error.toString(),\n          };\n        });\n    },\n    [getPublicTokenHeaders, storefrontId, getStorefrontApiUrl]\n  );\n}\n\nexport function useInstantCheckout() {\n  const [cart, updateCart] = useState<Cart | undefined>();\n  const [checkoutUrl, updateCheckoutUrl] = useState<Cart['checkoutUrl']>();\n  const [error, updateError] = useState<string | undefined>();\n\n  const fetch = useCartFetch();\n\n  const createInstantCheckout = useCallback(\n    async (cartInput: CartInput) => {\n      const {data, errors} = await fetch<{\n        cartCreate: {cart: CartType};\n      }>({\n        query: CartCreate(defaultCartFragment),\n        variables: {\n          input: cartInput,\n        },\n      });\n\n      if (errors) {\n        updateError(errors.toString());\n        updateCart(undefined);\n        updateCheckoutUrl(undefined);\n      }\n\n      if (data?.cartCreate?.cart) {\n        const dataCart = data.cartCreate.cart;\n        updateCart({\n          ...dataCart,\n          lines: flattenConnection(dataCart.lines),\n          note: dataCart.note ?? undefined,\n        });\n        updateCheckoutUrl(dataCart.checkoutUrl);\n      }\n    },\n    [fetch]\n  );\n\n  return {cart, checkoutUrl, error, createInstantCheckout};\n}\n"],"names":[],"mappings":";;;;AAgBO,SAAS,eAAe;AAC7B,QAAM,EAAC,cAAc,uBAAuB,wBAAuB,QAAQ;AAEpE,SAAA;AAAA,IACL,CAAqB;AAAA,MACnB;AAAA,MACA;AAAA,IAAA,MAIgE;AAChE,YAAM,UAAU,sBAAsB,EAAC,aAAa,OAAO,CAAA;AAE3D,UAAI,cAAc;AAChB,gBAAQ,4BAA4B,IAAI;AAAA,MAC1C;AAGM,YAAA,aAAa,MAAM,SAAS,MAAM;AACxC,UAAI,WAAW,SAAS,KAAK,WAAW,SAAS,GAAG;AAC1C,gBAAA,2BAA2B,IAAI,WAAW,SAAS;AACnD,gBAAA,2BAA2B,IAAI,WAAW,SAAS;AAAA,MAC7D;AAEO,aAAA,MAAM,uBAAuB;AAAA,QAClC,QAAQ;AAAA,QACR;AAAA,QACA,MAAM,KAAK,UAAU;AAAA,UACnB,OAAO,MAAM,SAAS;AAAA,UACtB;AAAA,QAAA,CACD;AAAA,MAAA,CACF,EACE,KAAK,CAAC,QAAQ,IAAI,MAAM,EACxB,MAAM,CAAC,UAAU;AACT,eAAA;AAAA,UACL,MAAM;AAAA,UACN,QAAQ,MAAM,SAAS;AAAA,QAAA;AAAA,MACzB,CACD;AAAA,IACL;AAAA,IACA,CAAC,uBAAuB,cAAc,mBAAmB;AAAA,EAAA;AAE7D;"}

package/dist/browser-prod/cart-queries.mjs

@@ -1,4 +1,6 @@
-const CartLineAdd = (cartFragment) => `
+const CartLineAdd = (cartFragment) => (
+  /* GraphQL */
+  `
   mutation CartLineAdd(
     $cartId: ID!
     $lines: [CartLineInput!]!
@@ -13,8 +15,11 @@ const CartLineAdd = (cartFragment) => `
   }
 
   ${cartFragment}
-`;
-const CartCreate = (cartFragment) => `
+`
+);
+const CartCreate = (cartFragment) => (
+  /* GraphQL */
+  `
   mutation CartCreate(
     $input: CartInput!
     $numCartLines: Int = 250
@@ -28,8 +33,11 @@ const CartCreate = (cartFragment) => `
   }
 
   ${cartFragment}
-`;
-const CartLineRemove = (cartFragment) => `
+`
+);
+const CartLineRemove = (cartFragment) => (
+  /* GraphQL */
+  `
   mutation CartLineRemove(
     $cartId: ID!
     $lines: [ID!]!
@@ -44,8 +52,11 @@ const CartLineRemove = (cartFragment) => `
   }
 
   ${cartFragment}
-`;
-const CartLineUpdate = (cartFragment) => `
+`
+);
+const CartLineUpdate = (cartFragment) => (
+  /* GraphQL */
+  `
   mutation CartLineUpdate(
     $cartId: ID!
     $lines: [CartLineUpdateInput!]!
@@ -60,8 +71,11 @@ const CartLineUpdate = (cartFragment) => `
   }
 
   ${cartFragment}
-`;
-const CartNoteUpdate = (cartFragment) => `
+`
+);
+const CartNoteUpdate = (cartFragment) => (
+  /* GraphQL */
+  `
   mutation CartNoteUpdate(
     $cartId: ID!
     $note: String
@@ -76,8 +90,11 @@ const CartNoteUpdate = (cartFragment) => `
   }
 
   ${cartFragment}
-`;
-const CartBuyerIdentityUpdate = (cartFragment) => `
+`
+);
+const CartBuyerIdentityUpdate = (cartFragment) => (
+  /* GraphQL */
+  `
   mutation CartBuyerIdentityUpdate(
     $cartId: ID!
     $buyerIdentity: CartBuyerIdentityInput!
@@ -92,8 +109,11 @@ const CartBuyerIdentityUpdate = (cartFragment) => `
   }
 
   ${cartFragment}
-`;
-const CartAttributesUpdate = (cartFragment) => `
+`
+);
+const CartAttributesUpdate = (cartFragment) => (
+  /* GraphQL */
+  `
   mutation CartAttributesUpdate(
     $attributes: [AttributeInput!]!
     $cartId: ID!
@@ -108,8 +128,11 @@ const CartAttributesUpdate = (cartFragment) => `
   }
 
   ${cartFragment}
-`;
-const CartDiscountCodesUpdate = (cartFragment) => `
+`
+);
+const CartDiscountCodesUpdate = (cartFragment) => (
+  /* GraphQL */
+  `
   mutation CartDiscountCodesUpdate(
     $cartId: ID!
     $discountCodes: [String!]
@@ -124,8 +147,11 @@ const CartDiscountCodesUpdate = (cartFragment) => `
   }
 
   ${cartFragment}
-`;
-const CartQuery = (cartFragment) => `
+`
+);
+const CartQuery = (cartFragment) => (
+  /* GraphQL */
+  `
   query CartQuery(
     $id: ID!
     $numCartLines: Int = 250
@@ -137,8 +163,11 @@ const CartQuery = (cartFragment) => `
   }
 
   ${cartFragment}
-`;
-const defaultCartFragment = `
+`
+);
+const defaultCartFragment = (
+  /* GraphQL */
+  `
   fragment CartFragment on Cart {
     id
     checkoutUrl
@@ -238,7 +267,8 @@ const defaultCartFragment = `
     width
     height
   }
-`;
+`
+);
 export {
   CartAttributesUpdate,
   CartBuyerIdentityUpdate,

package/dist/browser-prod/cart-queries.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"cart-queries.mjs","sources":["../../src/cart-queries.ts"],"sourcesContent":["export const CartLineAdd = (cartFragment: string) => /* GraphQL */ `\n  mutation CartLineAdd(\n    $cartId: ID!\n    $lines: [CartLineInput!]!\n    $numCartLines: Int = 250\n    $country: CountryCode = ZZ\n  ) @inContext(country: $country) {\n    cartLinesAdd(cartId: $cartId, lines: $lines) {\n      cart {\n        ...CartFragment\n      }\n    }\n  }\n\n  ${cartFragment}\n`;\n\nexport const CartCreate = (cartFragment: string) => /* GraphQL */ `\n  mutation CartCreate(\n    $input: CartInput!\n    $numCartLines: Int = 250\n    $country: CountryCode = ZZ\n  ) @inContext(country: $country) {\n    cartCreate(input: $input) {\n      cart {\n        ...CartFragment\n      }\n    }\n  }\n\n  ${cartFragment}\n`;\n\nexport const CartLineRemove = (cartFragment: string) => /* GraphQL */ `\n  mutation CartLineRemove(\n    $cartId: ID!\n    $lines: [ID!]!\n    $numCartLines: Int = 250\n    $country: CountryCode = ZZ\n  ) @inContext(country: $country) {\n    cartLinesRemove(cartId: $cartId, lineIds: $lines) {\n      cart {\n        ...CartFragment\n      }\n    }\n  }\n\n  ${cartFragment}\n`;\n\nexport const CartLineUpdate = (cartFragment: string) => /* GraphQL */ `\n  mutation CartLineUpdate(\n    $cartId: ID!\n    $lines: [CartLineUpdateInput!]!\n    $numCartLines: Int = 250\n    $country: CountryCode = ZZ\n  ) @inContext(country: $country) {\n    cartLinesUpdate(cartId: $cartId, lines: $lines) {\n      cart {\n        ...CartFragment\n      }\n    }\n  }\n\n  ${cartFragment}\n`;\n\nexport const CartNoteUpdate = (cartFragment: string) => /* GraphQL */ `\n  mutation CartNoteUpdate(\n    $cartId: ID!\n    $note: String\n    $numCartLines: Int = 250\n    $country: CountryCode = ZZ\n  ) @inContext(country: $country) {\n    cartNoteUpdate(cartId: $cartId, note: $note) {\n      cart {\n        ...CartFragment\n      }\n    }\n  }\n\n  ${cartFragment}\n`;\n\nexport const CartBuyerIdentityUpdate = (cartFragment: string) => /* GraphQL */ `\n  mutation CartBuyerIdentityUpdate(\n    $cartId: ID!\n    $buyerIdentity: CartBuyerIdentityInput!\n    $numCartLines: Int = 250\n    $country: CountryCode = ZZ\n  ) @inContext(country: $country) {\n    cartBuyerIdentityUpdate(cartId: $cartId, buyerIdentity: $buyerIdentity) {\n      cart {\n        ...CartFragment\n      }\n    }\n  }\n\n  ${cartFragment}\n`;\n\nexport const CartAttributesUpdate = (cartFragment: string) => /* GraphQL */ `\n  mutation CartAttributesUpdate(\n    $attributes: [AttributeInput!]!\n    $cartId: ID!\n    $numCartLines: Int = 250\n    $country: CountryCode = ZZ\n  ) @inContext(country: $country) {\n    cartAttributesUpdate(attributes: $attributes, cartId: $cartId) {\n      cart {\n        ...CartFragment\n      }\n    }\n  }\n\n  ${cartFragment}\n`;\n\nexport const CartDiscountCodesUpdate = (cartFragment: string) => /* GraphQL */ `\n  mutation CartDiscountCodesUpdate(\n    $cartId: ID!\n    $discountCodes: [String!]\n    $numCartLines: Int = 250\n    $country: CountryCode = ZZ\n  ) @inContext(country: $country) {\n    cartDiscountCodesUpdate(cartId: $cartId, discountCodes: $discountCodes) {\n      cart {\n        ...CartFragment\n      }\n    }\n  }\n\n  ${cartFragment}\n`;\n\nexport const CartQuery = (cartFragment: string) => /* GraphQL */ `\n  query CartQuery(\n    $id: ID!\n    $numCartLines: Int = 250\n    $country: CountryCode = ZZ\n  ) @inContext(country: $country) {\n    cart(id: $id) {\n      ...CartFragment\n    }\n  }\n\n  ${cartFragment}\n`;\n\nexport const defaultCartFragment = /* GraphQL */ `\n  fragment CartFragment on Cart {\n    id\n    checkoutUrl\n    totalQuantity\n    buyerIdentity {\n      countryCode\n      customer {\n        id\n        email\n        firstName\n        lastName\n        displayName\n      }\n      email\n      phone\n    }\n    lines(first: $numCartLines) {\n      edges {\n        node {\n          id\n          quantity\n          attributes {\n            key\n            value\n          }\n          cost {\n            totalAmount {\n              amount\n              currencyCode\n            }\n            compareAtAmountPerQuantity {\n              amount\n              currencyCode\n            }\n          }\n          merchandise {\n            ... on ProductVariant {\n              id\n              availableForSale\n              compareAtPrice {\n                ...MoneyFragment\n              }\n              price {\n                ...MoneyFragment\n              }\n              requiresShipping\n              title\n              image {\n                ...ImageFragment\n              }\n              product {\n                handle\n                title\n                id\n              }\n              selectedOptions {\n                name\n                value\n              }\n            }\n          }\n        }\n      }\n    }\n    cost {\n      subtotalAmount {\n        ...MoneyFragment\n      }\n      totalAmount {\n        ...MoneyFragment\n      }\n      totalDutyAmount {\n        ...MoneyFragment\n      }\n      totalTaxAmount {\n        ...MoneyFragment\n      }\n    }\n    note\n    attributes {\n      key\n      value\n    }\n    discountCodes {\n      code\n    }\n  }\n\n  fragment MoneyFragment on MoneyV2 {\n    currencyCode\n    amount\n  }\n  fragment ImageFragment on Image {\n    id\n    url\n    altText\n    width\n    height\n  }\n`;\n"],"names":[],"mappings":"AAAa,MAAA,cAAc,CAAC,iBAAuC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAc/D;AAAA;AAGS,MAAA,aAAa,CAAC,iBAAuC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAa9D;AAAA;AAGS,MAAA,iBAAiB,CAAC,iBAAuC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAclE;AAAA;AAGS,MAAA,iBAAiB,CAAC,iBAAuC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAclE;AAAA;AAGS,MAAA,iBAAiB,CAAC,iBAAuC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAclE;AAAA;AAGS,MAAA,0BAA0B,CAAC,iBAAuC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAc3E;AAAA;AAGS,MAAA,uBAAuB,CAAC,iBAAuC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAcxE;AAAA;AAGS,MAAA,0BAA0B,CAAC,iBAAuC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAc3E;AAAA;AAGS,MAAA,YAAY,CAAC,iBAAuC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAW7D;AAAA;AAGG,MAAM,sBAAoC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"cart-queries.mjs","sources":["../../src/cart-queries.ts"],"sourcesContent":["export const CartLineAdd = (cartFragment: string) => /* GraphQL */ `\n  mutation CartLineAdd(\n    $cartId: ID!\n    $lines: [CartLineInput!]!\n    $numCartLines: Int = 250\n    $country: CountryCode = ZZ\n  ) @inContext(country: $country) {\n    cartLinesAdd(cartId: $cartId, lines: $lines) {\n      cart {\n        ...CartFragment\n      }\n    }\n  }\n\n  ${cartFragment}\n`;\n\nexport const CartCreate = (cartFragment: string) => /* GraphQL */ `\n  mutation CartCreate(\n    $input: CartInput!\n    $numCartLines: Int = 250\n    $country: CountryCode = ZZ\n  ) @inContext(country: $country) {\n    cartCreate(input: $input) {\n      cart {\n        ...CartFragment\n      }\n    }\n  }\n\n  ${cartFragment}\n`;\n\nexport const CartLineRemove = (cartFragment: string) => /* GraphQL */ `\n  mutation CartLineRemove(\n    $cartId: ID!\n    $lines: [ID!]!\n    $numCartLines: Int = 250\n    $country: CountryCode = ZZ\n  ) @inContext(country: $country) {\n    cartLinesRemove(cartId: $cartId, lineIds: $lines) {\n      cart {\n        ...CartFragment\n      }\n    }\n  }\n\n  ${cartFragment}\n`;\n\nexport const CartLineUpdate = (cartFragment: string) => /* GraphQL */ `\n  mutation CartLineUpdate(\n    $cartId: ID!\n    $lines: [CartLineUpdateInput!]!\n    $numCartLines: Int = 250\n    $country: CountryCode = ZZ\n  ) @inContext(country: $country) {\n    cartLinesUpdate(cartId: $cartId, lines: $lines) {\n      cart {\n        ...CartFragment\n      }\n    }\n  }\n\n  ${cartFragment}\n`;\n\nexport const CartNoteUpdate = (cartFragment: string) => /* GraphQL */ `\n  mutation CartNoteUpdate(\n    $cartId: ID!\n    $note: String\n    $numCartLines: Int = 250\n    $country: CountryCode = ZZ\n  ) @inContext(country: $country) {\n    cartNoteUpdate(cartId: $cartId, note: $note) {\n      cart {\n        ...CartFragment\n      }\n    }\n  }\n\n  ${cartFragment}\n`;\n\nexport const CartBuyerIdentityUpdate = (cartFragment: string) => /* GraphQL */ `\n  mutation CartBuyerIdentityUpdate(\n    $cartId: ID!\n    $buyerIdentity: CartBuyerIdentityInput!\n    $numCartLines: Int = 250\n    $country: CountryCode = ZZ\n  ) @inContext(country: $country) {\n    cartBuyerIdentityUpdate(cartId: $cartId, buyerIdentity: $buyerIdentity) {\n      cart {\n        ...CartFragment\n      }\n    }\n  }\n\n  ${cartFragment}\n`;\n\nexport const CartAttributesUpdate = (cartFragment: string) => /* GraphQL */ `\n  mutation CartAttributesUpdate(\n    $attributes: [AttributeInput!]!\n    $cartId: ID!\n    $numCartLines: Int = 250\n    $country: CountryCode = ZZ\n  ) @inContext(country: $country) {\n    cartAttributesUpdate(attributes: $attributes, cartId: $cartId) {\n      cart {\n        ...CartFragment\n      }\n    }\n  }\n\n  ${cartFragment}\n`;\n\nexport const CartDiscountCodesUpdate = (cartFragment: string) => /* GraphQL */ `\n  mutation CartDiscountCodesUpdate(\n    $cartId: ID!\n    $discountCodes: [String!]\n    $numCartLines: Int = 250\n    $country: CountryCode = ZZ\n  ) @inContext(country: $country) {\n    cartDiscountCodesUpdate(cartId: $cartId, discountCodes: $discountCodes) {\n      cart {\n        ...CartFragment\n      }\n    }\n  }\n\n  ${cartFragment}\n`;\n\nexport const CartQuery = (cartFragment: string) => /* GraphQL */ `\n  query CartQuery(\n    $id: ID!\n    $numCartLines: Int = 250\n    $country: CountryCode = ZZ\n  ) @inContext(country: $country) {\n    cart(id: $id) {\n      ...CartFragment\n    }\n  }\n\n  ${cartFragment}\n`;\n\nexport const defaultCartFragment = /* GraphQL */ `\n  fragment CartFragment on Cart {\n    id\n    checkoutUrl\n    totalQuantity\n    buyerIdentity {\n      countryCode\n      customer {\n        id\n        email\n        firstName\n        lastName\n        displayName\n      }\n      email\n      phone\n    }\n    lines(first: $numCartLines) {\n      edges {\n        node {\n          id\n          quantity\n          attributes {\n            key\n            value\n          }\n          cost {\n            totalAmount {\n              amount\n              currencyCode\n            }\n            compareAtAmountPerQuantity {\n              amount\n              currencyCode\n            }\n          }\n          merchandise {\n            ... on ProductVariant {\n              id\n              availableForSale\n              compareAtPrice {\n                ...MoneyFragment\n              }\n              price {\n                ...MoneyFragment\n              }\n              requiresShipping\n              title\n              image {\n                ...ImageFragment\n              }\n              product {\n                handle\n                title\n                id\n              }\n              selectedOptions {\n                name\n                value\n              }\n            }\n          }\n        }\n      }\n    }\n    cost {\n      subtotalAmount {\n        ...MoneyFragment\n      }\n      totalAmount {\n        ...MoneyFragment\n      }\n      totalDutyAmount {\n        ...MoneyFragment\n      }\n      totalTaxAmount {\n        ...MoneyFragment\n      }\n    }\n    note\n    attributes {\n      key\n      value\n    }\n    discountCodes {\n      code\n    }\n  }\n\n  fragment MoneyFragment on MoneyV2 {\n    currencyCode\n    amount\n  }\n  fragment ImageFragment on Image {\n    id\n    url\n    altText\n    width\n    height\n  }\n`;\n"],"names":[],"mappings":"AAAO,MAAM,cAAc,CAAC;AAAA;AAAA,EAAuC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAc/D;AAAA;AAAA;AAGG,MAAM,aAAa,CAAC;AAAA;AAAA,EAAuC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAa9D;AAAA;AAAA;AAGG,MAAM,iBAAiB,CAAC;AAAA;AAAA,EAAuC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAclE;AAAA;AAAA;AAGG,MAAM,iBAAiB,CAAC;AAAA;AAAA,EAAuC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAclE;AAAA;AAAA;AAGG,MAAM,iBAAiB,CAAC;AAAA;AAAA,EAAuC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAclE;AAAA;AAAA;AAGG,MAAM,0BAA0B,CAAC;AAAA;AAAA,EAAuC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAc3E;AAAA;AAAA;AAGG,MAAM,uBAAuB,CAAC;AAAA;AAAA,EAAuC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAcxE;AAAA;AAAA;AAGG,MAAM,0BAA0B,CAAC;AAAA;AAAA,EAAuC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAc3E;AAAA;AAAA;AAGG,MAAM,YAAY,CAAC;AAAA;AAAA,EAAuC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAW7D;AAAA;AAAA;AAGS,MAAA;AAAA;AAAA,EAAoC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/browser-prod/codegen.helpers.mjs

@@ -1,4 +1,5 @@
 const storefrontApiCustomScalars = {
+  // Keep in sync with the definitions in the app/nextjs/codegen.ts!
   DateTime: "string",
   Decimal: "string",
   HTML: "string",

package/dist/browser-prod/codegen.helpers.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"codegen.helpers.mjs","sources":["../../src/codegen.helpers.ts"],"sourcesContent":["/** Meant to be used with GraphQL CodeGen to type the Storefront API's custom scalars correctly */\nexport const storefrontApiCustomScalars = {\n  // Keep in sync with the definitions in the app/nextjs/codegen.ts!\n  DateTime: 'string',\n  Decimal: 'string',\n  HTML: 'string',\n  URL: 'string',\n  Color: 'string',\n  UnsignedInt64: 'string',\n};\n"],"names":[],"mappings":"AACO,MAAM,6BAA6B;AAAA,EAExC,UAAU;AAAA,EACV,SAAS;AAAA,EACT,MAAM;AAAA,EACN,KAAK;AAAA,EACL,OAAO;AAAA,EACP,eAAe;AACjB;"}
+{"version":3,"file":"codegen.helpers.mjs","sources":["../../src/codegen.helpers.ts"],"sourcesContent":["/** Meant to be used with GraphQL CodeGen to type the Storefront API's custom scalars correctly */\nexport const storefrontApiCustomScalars = {\n  // Keep in sync with the definitions in the app/nextjs/codegen.ts!\n  DateTime: 'string',\n  Decimal: 'string',\n  HTML: 'string',\n  URL: 'string',\n  Color: 'string',\n  UnsignedInt64: 'string',\n};\n"],"names":[],"mappings":"AACO,MAAM,6BAA6B;AAAA;AAAA,EAExC,UAAU;AAAA,EACV,SAAS;AAAA,EACT,MAAM;AAAA,EACN,KAAK;AAAA,EACL,OAAO;AAAA,EACP,eAAe;AACjB;"}

package/dist/browser-prod/image-size.mjs

@@ -15,7 +15,7 @@ function addImageSizeParametersToUrl({
   scale
 }) {
   const newUrl = new URL(src);
-  const multipliedScale = scale != null ? scale : 1;
+  const multipliedScale = scale ?? 1;
   if (width) {
     let finalWidth;
     if (typeof width === "string") {
@@ -46,27 +46,27 @@ function getShopifyImageDimensions({
   loaderOptions,
   elementProps
 }) {
-  var _a, _b, _c, _d, _e, _f;
   let aspectRatio = null;
   if ((sfapiImage == null ? void 0 : sfapiImage.width) && (sfapiImage == null ? void 0 : sfapiImage.height)) {
     aspectRatio = (sfapiImage == null ? void 0 : sfapiImage.width) / (sfapiImage == null ? void 0 : sfapiImage.height);
   }
   if ((loaderOptions == null ? void 0 : loaderOptions.width) || (loaderOptions == null ? void 0 : loaderOptions.height)) {
     return {
-      width: (_a = loaderOptions == null ? void 0 : loaderOptions.width) != null ? _a : aspectRatio && typeof loaderOptions.height === "number" ? Math.round(aspectRatio * loaderOptions.height) : null,
-      height: (_b = loaderOptions == null ? void 0 : loaderOptions.height) != null ? _b : aspectRatio && typeof loaderOptions.width === "number" ? Math.round(aspectRatio * loaderOptions.width) : null
+      width: (loaderOptions == null ? void 0 : loaderOptions.width) ?? (aspectRatio && typeof loaderOptions.height === "number" ? Math.round(aspectRatio * loaderOptions.height) : null),
+      height: (loaderOptions == null ? void 0 : loaderOptions.height) ?? (aspectRatio && typeof loaderOptions.width === "number" ? Math.round(aspectRatio * loaderOptions.width) : null)
     };
   }
   if ((elementProps == null ? void 0 : elementProps.width) || (elementProps == null ? void 0 : elementProps.height)) {
     return {
-      width: (_c = elementProps == null ? void 0 : elementProps.width) != null ? _c : aspectRatio && typeof elementProps.height === "number" ? Math.round(aspectRatio * elementProps.height) : null,
-      height: (_d = elementProps == null ? void 0 : elementProps.height) != null ? _d : aspectRatio && typeof elementProps.width === "number" ? Math.round(aspectRatio * elementProps.width) : null
+      width: (elementProps == null ? void 0 : elementProps.width) ?? (aspectRatio && typeof elementProps.height === "number" ? Math.round(aspectRatio * elementProps.height) : null),
+      height: (elementProps == null ? void 0 : elementProps.height) ?? (aspectRatio && typeof elementProps.width === "number" ? Math.round(aspectRatio * elementProps.width) : null)
     };
   }
   if ((sfapiImage == null ? void 0 : sfapiImage.width) || (sfapiImage == null ? void 0 : sfapiImage.height)) {
     return {
-      width: (_e = sfapiImage == null ? void 0 : sfapiImage.width) != null ? _e : null,
-      height: (_f = sfapiImage == null ? void 0 : sfapiImage.height) != null ? _f : null
+      // can't calculate the aspect ratio here
+      width: (sfapiImage == null ? void 0 : sfapiImage.width) ?? null,
+      height: (sfapiImage == null ? void 0 : sfapiImage.height) ?? null
     };
   }
   return { width: null, height: null };

package/dist/browser-prod/image-size.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"image-size.mjs","sources":["../../src/image-size.ts"],"sourcesContent":["import type {Image as ImageType} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\nimport type {ShopifyLoaderOptions, ShopifyLoaderParams} from './Image.js';\n\n// TODO: Are there other CDNs missing from here?\nconst PRODUCTION_CDN_HOSTNAMES = [\n  'cdn.shopify.com',\n  'cdn.shopifycdn.net',\n  'shopify-assets.shopifycdn.com',\n  'shopify-assets.shopifycdn.net',\n];\nconst LOCAL_CDN_HOSTNAMES = ['spin.dev'];\nconst ALL_CDN_HOSTNAMES = [...PRODUCTION_CDN_HOSTNAMES, ...LOCAL_CDN_HOSTNAMES];\n\n// based on the default width sizes used by the Shopify liquid HTML tag img_tag plus a 2560 width to account for 2k resolutions\n// reference: https://shopify.dev/api/liquid/filters/html-filters#image_tag\nexport const IMG_SRC_SET_SIZES = [352, 832, 1200, 1920, 2560];\n\n/**\n * Adds image size parameters to an image URL hosted by Shopify's CDN\n */\nexport function addImageSizeParametersToUrl({\n  src,\n  width,\n  height,\n  crop,\n  scale,\n}: ShopifyLoaderParams) {\n  const newUrl = new URL(src);\n\n  const multipliedScale = scale ?? 1;\n\n  if (width) {\n    let finalWidth: string;\n\n    if (typeof width === 'string') {\n      finalWidth = (IMG_SRC_SET_SIZES[0] * multipliedScale).toString();\n    } else {\n      finalWidth = (Number(width) * multipliedScale).toString();\n    }\n\n    newUrl.searchParams.append('width', finalWidth);\n  }\n\n  if (height && typeof height === 'number') {\n    newUrl.searchParams.append('height', (height * multipliedScale).toString());\n  }\n\n  crop && newUrl.searchParams.append('crop', crop);\n\n  // for now we intentionally leave off the scale param, and instead multiple width & height by scale instead\n  // scale && newUrl.searchParams.append('scale', scale.toString());\n\n  return newUrl.toString();\n}\n\nexport function shopifyImageLoader(params: ShopifyLoaderParams) {\n  const newSrc = new URL(params.src);\n  const isShopifyServedImage = ALL_CDN_HOSTNAMES.some((allowedHostname) =>\n    newSrc.hostname.endsWith(allowedHostname)\n  );\n\n  if (\n    !isShopifyServedImage ||\n    (!params.width && !params.height && !params.crop && !params.scale)\n  ) {\n    return params.src;\n  }\n\n  return addImageSizeParametersToUrl(params);\n}\n\ntype HtmlImageProps = React.ImgHTMLAttributes<HTMLImageElement>;\n\nexport type GetShopifyImageDimensionsProps = {\n  data: Pick<\n    PartialDeep<ImageType, {recurseIntoArrays: true}>,\n    'altText' | 'url' | 'id' | 'width' | 'height'\n  >;\n  loaderOptions?: ShopifyLoaderOptions;\n  elementProps?: {\n    width?: HtmlImageProps['width'];\n    height?: HtmlImageProps['height'];\n  };\n};\n\ntype GetShopifyImageDimensionsPropsReturn = {\n  width: number | string | null;\n  height: number | string | null;\n};\n\n/**\n * Width and height are determined using the followiing priority list:\n * 1. `loaderOptions`'s width/height\n * 2. `elementProps`'s width/height\n * 3. `data`'s width/height\n *\n * If only one of `width` or `height` are defined, then the other will attempt to be calculated based on the Image's aspect ratio,\n * provided that both `data.width` and `data.height` are available. If not, then the aspect ratio cannot be determined and the missing\n * value will reamin as `null`\n */\nexport function getShopifyImageDimensions({\n  data: sfapiImage,\n  loaderOptions,\n  elementProps,\n}: GetShopifyImageDimensionsProps): GetShopifyImageDimensionsPropsReturn {\n  let aspectRatio: number | null = null;\n\n  if (sfapiImage?.width && sfapiImage?.height) {\n    aspectRatio = sfapiImage?.width / sfapiImage?.height;\n  }\n\n  //  * 1. `loaderOptions`'s width/height\n  if (loaderOptions?.width || loaderOptions?.height) {\n    return {\n      width:\n        loaderOptions?.width ??\n        (aspectRatio && typeof loaderOptions.height === 'number'\n          ? Math.round(aspectRatio * loaderOptions.height)\n          : null),\n      height:\n        loaderOptions?.height ??\n        (aspectRatio && typeof loaderOptions.width === 'number'\n          ? Math.round(aspectRatio * loaderOptions.width)\n          : null),\n    };\n  }\n\n  //  * 2. `elementProps`'s width/height\n  if (elementProps?.width || elementProps?.height) {\n    return {\n      width:\n        elementProps?.width ??\n        (aspectRatio && typeof elementProps.height === 'number'\n          ? Math.round(aspectRatio * elementProps.height)\n          : null),\n      height:\n        elementProps?.height ??\n        (aspectRatio && typeof elementProps.width === 'number'\n          ? Math.round(aspectRatio * elementProps.width)\n          : null),\n    };\n  }\n\n  //  * 3. `data`'s width/height\n  if (sfapiImage?.width || sfapiImage?.height) {\n    return {\n      // can't calculate the aspect ratio here\n      width: sfapiImage?.width ?? null,\n      height: sfapiImage?.height ?? null,\n    };\n  }\n\n  return {width: null, height: null};\n}\n"],"names":[],"mappings":"AAKA,MAAM,2BAA2B;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AACA,MAAM,sBAAsB,CAAC,UAAU;AACvC,MAAM,oBAAoB,CAAC,GAAG,0BAA0B,GAAG,mBAAmB;AAIvE,MAAM,oBAAoB,CAAC,KAAK,KAAK,MAAM,MAAM,IAAI;AAKrD,SAAS,4BAA4B;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAwB;AAChB,QAAA,SAAS,IAAI,IAAI,GAAG;AAE1B,QAAM,kBAAkB,wBAAS;AAEjC,MAAI,OAAO;AACL,QAAA;AAEA,QAAA,OAAO,UAAU,UAAU;AACf,oBAAA,kBAAkB,KAAK,iBAAiB,SAAS;AAAA,IAAA,OAC1D;AACL,oBAAc,OAAO,KAAK,IAAI,iBAAiB,SAAS;AAAA,IAC1D;AAEO,WAAA,aAAa,OAAO,SAAS,UAAU;AAAA,EAChD;AAEI,MAAA,UAAU,OAAO,WAAW,UAAU;AACxC,WAAO,aAAa,OAAO,WAAW,SAAS,iBAAiB,UAAU;AAAA,EAC5E;AAEA,UAAQ,OAAO,aAAa,OAAO,QAAQ,IAAI;AAK/C,SAAO,OAAO;AAChB;AAEO,SAAS,mBAAmB,QAA6B;AAC9D,QAAM,SAAS,IAAI,IAAI,OAAO,GAAG;AACjC,QAAM,uBAAuB,kBAAkB;AAAA,IAAK,CAAC,oBACnD,OAAO,SAAS,SAAS,eAAe;AAAA,EAAA;AAG1C,MACE,CAAC,wBACA,CAAC,OAAO,SAAS,CAAC,OAAO,UAAU,CAAC,OAAO,QAAQ,CAAC,OAAO,OAC5D;AACA,WAAO,OAAO;AAAA,EAChB;AAEA,SAAO,4BAA4B,MAAM;AAC3C;AA+BO,SAAS,0BAA0B;AAAA,EACxC,MAAM;AAAA,EACN;AAAA,EACA;AACF,GAAyE;AApGzE;AAqGE,MAAI,cAA6B;AAE7B,OAAA,yCAAY,WAAS,yCAAY,SAAQ;AAC7B,mBAAA,yCAAY,UAAQ,yCAAY;AAAA,EAChD;AAGI,OAAA,+CAAe,WAAS,+CAAe,SAAQ;AAC1C,WAAA;AAAA,MACL,QACE,oDAAe,UAAf,YACC,eAAe,OAAO,cAAc,WAAW,WAC5C,KAAK,MAAM,cAAc,cAAc,MAAM,IAC7C;AAAA,MACN,SACE,oDAAe,WAAf,YACC,eAAe,OAAO,cAAc,UAAU,WAC3C,KAAK,MAAM,cAAc,cAAc,KAAK,IAC5C;AAAA,IAAA;AAAA,EAEV;AAGI,OAAA,6CAAc,WAAS,6CAAc,SAAQ;AACxC,WAAA;AAAA,MACL,QACE,kDAAc,UAAd,YACC,eAAe,OAAO,aAAa,WAAW,WAC3C,KAAK,MAAM,cAAc,aAAa,MAAM,IAC5C;AAAA,MACN,SACE,kDAAc,WAAd,YACC,eAAe,OAAO,aAAa,UAAU,WAC1C,KAAK,MAAM,cAAc,aAAa,KAAK,IAC3C;AAAA,IAAA;AAAA,EAEV;AAGI,OAAA,yCAAY,WAAS,yCAAY,SAAQ;AACpC,WAAA;AAAA,MAEL,QAAO,8CAAY,UAAZ,YAAqB;AAAA,MAC5B,SAAQ,8CAAY,WAAZ,YAAsB;AAAA,IAAA;AAAA,EAElC;AAEA,SAAO,EAAC,OAAO,MAAM,QAAQ,KAAI;AACnC;"}
+{"version":3,"file":"image-size.mjs","sources":["../../src/image-size.ts"],"sourcesContent":["import type {Image as ImageType} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\nimport type {ShopifyLoaderOptions, ShopifyLoaderParams} from './Image.js';\n\n// TODO: Are there other CDNs missing from here?\nconst PRODUCTION_CDN_HOSTNAMES = [\n  'cdn.shopify.com',\n  'cdn.shopifycdn.net',\n  'shopify-assets.shopifycdn.com',\n  'shopify-assets.shopifycdn.net',\n];\nconst LOCAL_CDN_HOSTNAMES = ['spin.dev'];\nconst ALL_CDN_HOSTNAMES = [...PRODUCTION_CDN_HOSTNAMES, ...LOCAL_CDN_HOSTNAMES];\n\n// based on the default width sizes used by the Shopify liquid HTML tag img_tag plus a 2560 width to account for 2k resolutions\n// reference: https://shopify.dev/api/liquid/filters/html-filters#image_tag\nexport const IMG_SRC_SET_SIZES = [352, 832, 1200, 1920, 2560];\n\n/**\n * Adds image size parameters to an image URL hosted by Shopify's CDN\n */\nexport function addImageSizeParametersToUrl({\n  src,\n  width,\n  height,\n  crop,\n  scale,\n}: ShopifyLoaderParams) {\n  const newUrl = new URL(src);\n\n  const multipliedScale = scale ?? 1;\n\n  if (width) {\n    let finalWidth: string;\n\n    if (typeof width === 'string') {\n      finalWidth = (IMG_SRC_SET_SIZES[0] * multipliedScale).toString();\n    } else {\n      finalWidth = (Number(width) * multipliedScale).toString();\n    }\n\n    newUrl.searchParams.append('width', finalWidth);\n  }\n\n  if (height && typeof height === 'number') {\n    newUrl.searchParams.append('height', (height * multipliedScale).toString());\n  }\n\n  crop && newUrl.searchParams.append('crop', crop);\n\n  // for now we intentionally leave off the scale param, and instead multiple width & height by scale instead\n  // scale && newUrl.searchParams.append('scale', scale.toString());\n\n  return newUrl.toString();\n}\n\nexport function shopifyImageLoader(params: ShopifyLoaderParams) {\n  const newSrc = new URL(params.src);\n  const isShopifyServedImage = ALL_CDN_HOSTNAMES.some((allowedHostname) =>\n    newSrc.hostname.endsWith(allowedHostname)\n  );\n\n  if (\n    !isShopifyServedImage ||\n    (!params.width && !params.height && !params.crop && !params.scale)\n  ) {\n    return params.src;\n  }\n\n  return addImageSizeParametersToUrl(params);\n}\n\ntype HtmlImageProps = React.ImgHTMLAttributes<HTMLImageElement>;\n\nexport type GetShopifyImageDimensionsProps = {\n  data: Pick<\n    PartialDeep<ImageType, {recurseIntoArrays: true}>,\n    'altText' | 'url' | 'id' | 'width' | 'height'\n  >;\n  loaderOptions?: ShopifyLoaderOptions;\n  elementProps?: {\n    width?: HtmlImageProps['width'];\n    height?: HtmlImageProps['height'];\n  };\n};\n\ntype GetShopifyImageDimensionsPropsReturn = {\n  width: number | string | null;\n  height: number | string | null;\n};\n\n/**\n * Width and height are determined using the followiing priority list:\n * 1. `loaderOptions`'s width/height\n * 2. `elementProps`'s width/height\n * 3. `data`'s width/height\n *\n * If only one of `width` or `height` are defined, then the other will attempt to be calculated based on the Image's aspect ratio,\n * provided that both `data.width` and `data.height` are available. If not, then the aspect ratio cannot be determined and the missing\n * value will reamin as `null`\n */\nexport function getShopifyImageDimensions({\n  data: sfapiImage,\n  loaderOptions,\n  elementProps,\n}: GetShopifyImageDimensionsProps): GetShopifyImageDimensionsPropsReturn {\n  let aspectRatio: number | null = null;\n\n  if (sfapiImage?.width && sfapiImage?.height) {\n    aspectRatio = sfapiImage?.width / sfapiImage?.height;\n  }\n\n  //  * 1. `loaderOptions`'s width/height\n  if (loaderOptions?.width || loaderOptions?.height) {\n    return {\n      width:\n        loaderOptions?.width ??\n        (aspectRatio && typeof loaderOptions.height === 'number'\n          ? Math.round(aspectRatio * loaderOptions.height)\n          : null),\n      height:\n        loaderOptions?.height ??\n        (aspectRatio && typeof loaderOptions.width === 'number'\n          ? Math.round(aspectRatio * loaderOptions.width)\n          : null),\n    };\n  }\n\n  //  * 2. `elementProps`'s width/height\n  if (elementProps?.width || elementProps?.height) {\n    return {\n      width:\n        elementProps?.width ??\n        (aspectRatio && typeof elementProps.height === 'number'\n          ? Math.round(aspectRatio * elementProps.height)\n          : null),\n      height:\n        elementProps?.height ??\n        (aspectRatio && typeof elementProps.width === 'number'\n          ? Math.round(aspectRatio * elementProps.width)\n          : null),\n    };\n  }\n\n  //  * 3. `data`'s width/height\n  if (sfapiImage?.width || sfapiImage?.height) {\n    return {\n      // can't calculate the aspect ratio here\n      width: sfapiImage?.width ?? null,\n      height: sfapiImage?.height ?? null,\n    };\n  }\n\n  return {width: null, height: null};\n}\n"],"names":[],"mappings":"AAKA,MAAM,2BAA2B;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AACA,MAAM,sBAAsB,CAAC,UAAU;AACvC,MAAM,oBAAoB,CAAC,GAAG,0BAA0B,GAAG,mBAAmB;AAIvE,MAAM,oBAAoB,CAAC,KAAK,KAAK,MAAM,MAAM,IAAI;AAKrD,SAAS,4BAA4B;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAwB;AAChB,QAAA,SAAS,IAAI,IAAI,GAAG;AAE1B,QAAM,kBAAkB,SAAS;AAEjC,MAAI,OAAO;AACL,QAAA;AAEA,QAAA,OAAO,UAAU,UAAU;AAC7B,oBAAc,kBAAkB,CAAC,IAAI,iBAAiB,SAAS;AAAA,IAAA,OAC1D;AACL,oBAAc,OAAO,KAAK,IAAI,iBAAiB,SAAS;AAAA,IAC1D;AAEO,WAAA,aAAa,OAAO,SAAS,UAAU;AAAA,EAChD;AAEI,MAAA,UAAU,OAAO,WAAW,UAAU;AACxC,WAAO,aAAa,OAAO,WAAW,SAAS,iBAAiB,UAAU;AAAA,EAC5E;AAEA,UAAQ,OAAO,aAAa,OAAO,QAAQ,IAAI;AAK/C,SAAO,OAAO;AAChB;AAEO,SAAS,mBAAmB,QAA6B;AAC9D,QAAM,SAAS,IAAI,IAAI,OAAO,GAAG;AACjC,QAAM,uBAAuB,kBAAkB;AAAA,IAAK,CAAC,oBACnD,OAAO,SAAS,SAAS,eAAe;AAAA,EAAA;AAG1C,MACE,CAAC,wBACA,CAAC,OAAO,SAAS,CAAC,OAAO,UAAU,CAAC,OAAO,QAAQ,CAAC,OAAO,OAC5D;AACA,WAAO,OAAO;AAAA,EAChB;AAEA,SAAO,4BAA4B,MAAM;AAC3C;AA+BO,SAAS,0BAA0B;AAAA,EACxC,MAAM;AAAA,EACN;AAAA,EACA;AACF,GAAyE;AACvE,MAAI,cAA6B;AAE7B,OAAA,yCAAY,WAAS,yCAAY,SAAQ;AAC7B,mBAAA,yCAAY,UAAQ,yCAAY;AAAA,EAChD;AAGI,OAAA,+CAAe,WAAS,+CAAe,SAAQ;AAC1C,WAAA;AAAA,MACL,QACE,+CAAe,WACd,eAAe,OAAO,cAAc,WAAW,WAC5C,KAAK,MAAM,cAAc,cAAc,MAAM,IAC7C;AAAA,MACN,SACE,+CAAe,YACd,eAAe,OAAO,cAAc,UAAU,WAC3C,KAAK,MAAM,cAAc,cAAc,KAAK,IAC5C;AAAA,IAAA;AAAA,EAEV;AAGI,OAAA,6CAAc,WAAS,6CAAc,SAAQ;AACxC,WAAA;AAAA,MACL,QACE,6CAAc,WACb,eAAe,OAAO,aAAa,WAAW,WAC3C,KAAK,MAAM,cAAc,aAAa,MAAM,IAC5C;AAAA,MACN,SACE,6CAAc,YACb,eAAe,OAAO,aAAa,UAAU,WAC1C,KAAK,MAAM,cAAc,aAAa,KAAK,IAC3C;AAAA,IAAA;AAAA,EAEV;AAGI,OAAA,yCAAY,WAAS,yCAAY,SAAQ;AACpC,WAAA;AAAA;AAAA,MAEL,QAAO,yCAAY,UAAS;AAAA,MAC5B,SAAQ,yCAAY,WAAU;AAAA,IAAA;AAAA,EAElC;AAEA,SAAO,EAAC,OAAO,MAAM,QAAQ,KAAI;AACnC;"}

package/dist/browser-prod/load-script.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"load-script.mjs","sources":["../../src/load-script.tsx"],"sourcesContent":["import {useState, useEffect} from 'react';\n\nconst SCRIPTS_LOADED: Record<string, Promise<boolean>> = {};\n\nexport function loadScript(\n  src: string,\n  options?: {module?: boolean; in?: 'head' | 'body'}\n): Promise<boolean> {\n  const isScriptLoaded: Promise<boolean> = SCRIPTS_LOADED[src];\n\n  if (isScriptLoaded) {\n    return isScriptLoaded;\n  }\n\n  const promise = new Promise<boolean>((resolve, reject) => {\n    const script = document.createElement('script');\n    if (options?.module) {\n      script.type = 'module';\n    } else {\n      script.type = 'text/javascript';\n    }\n    script.src = src;\n    script.onload = () => {\n      resolve(true);\n    };\n    script.onerror = () => {\n      reject(false);\n    };\n    if (options?.in === 'head') {\n      document.head.appendChild(script);\n    } else {\n      document.body.appendChild(script);\n    }\n  });\n\n  SCRIPTS_LOADED[src] = promise;\n\n  return promise;\n}\n\ntype LoadScriptParams = Parameters<typeof loadScript>;\n\n/**\n * The `useLoadScript` hook loads an external script tag in the browser. It allows React components to lazy-load large third-party dependencies.\n */\nexport function useLoadScript(\n  url: LoadScriptParams[0],\n  options?: LoadScriptParams[1]\n): ScriptState {\n  const [status, setStatus] = useState<ScriptState>('loading');\n  const stringifiedOptions = JSON.stringify(options);\n\n  useEffect(() => {\n    async function loadScriptWrapper() {\n      try {\n        setStatus('loading');\n        await loadScript(url, options);\n        setStatus('done');\n      } catch (error) {\n        setStatus('error');\n      }\n    }\n\n    loadScriptWrapper();\n  }, [url, stringifiedOptions, options]);\n\n  return status;\n}\n\ntype ScriptState = 'loading' | 'done' | 'error';\n"],"names":["SCRIPTS_LOADED","loadScript","src","options","isScriptLoaded","promise","Promise","resolve","reject","script","document","createElement","module","type","onload","onerror","in","head","appendChild","body","useLoadScript","url","status","setStatus","useState","stringifiedOptions","JSON","stringify","useEffect","loadScriptWrapper","error"],"mappings":";AAEA,MAAMA,iBAAmD,CAAA;AAEzCC,SAAAA,WACdC,KACAC,SACkB;AAClB,QAAMC,iBAAmCJ,eAAeE;AAExD,MAAIE,gBAAgB;AACXA,WAAAA;AAAAA,EACT;AAEA,QAAMC,UAAU,IAAIC,QAAiB,CAACC,SAASC,WAAW;AAClDC,UAAAA,SAASC,SAASC,cAAc,QAAQ;AAC9C,QAAIR,mCAASS,QAAQ;AACnBH,aAAOI,OAAO;AAAA,IAAA,OACT;AACLJ,aAAOI,OAAO;AAAA,IAChB;AACAJ,WAAOP,MAAMA;AACbO,WAAOK,SAAS,MAAM;AACpBP,cAAQ,IAAI;AAAA,IAAA;AAEdE,WAAOM,UAAU,MAAM;AACrBP,aAAO,KAAK;AAAA,IAAA;AAEVL,SAAAA,mCAASa,QAAO,QAAQ;AACjBC,eAAAA,KAAKC,YAAYT,MAAM;AAAA,IAAA,OAC3B;AACIU,eAAAA,KAAKD,YAAYT,MAAM;AAAA,IAClC;AAAA,EAAA,CACD;AAEDT,iBAAeE,OAAOG;AAEfA,SAAAA;AACT;AAOgBe,SAAAA,cACdC,KACAlB,SACa;AACb,QAAM,CAACmB,QAAQC,SAAS,IAAIC,SAAsB,SAAS;AACrDC,QAAAA,qBAAqBC,KAAKC,UAAUxB,OAAO;AAEjDyB,YAAU,MAAM;AACd,mBAAeC,oBAAoB;AAC7B,UAAA;AACFN,kBAAU,SAAS;AACbtB,cAAAA,WAAWoB,KAAKlB,OAAO;AAC7BoB,kBAAU,MAAM;AAAA,eACTO;AACPP,kBAAU,OAAO;AAAA,MACnB;AAAA,IACF;AAEmB;EAClB,GAAA,CAACF,KAAKI,oBAAoBtB,OAAO,CAAC;AAE9BmB,SAAAA;AACT;"}
+{"version":3,"file":"load-script.mjs","sources":["../../src/load-script.tsx"],"sourcesContent":["import {useState, useEffect} from 'react';\n\nconst SCRIPTS_LOADED: Record<string, Promise<boolean>> = {};\n\nexport function loadScript(\n  src: string,\n  options?: {module?: boolean; in?: 'head' | 'body'}\n): Promise<boolean> {\n  const isScriptLoaded: Promise<boolean> = SCRIPTS_LOADED[src];\n\n  if (isScriptLoaded) {\n    return isScriptLoaded;\n  }\n\n  const promise = new Promise<boolean>((resolve, reject) => {\n    const script = document.createElement('script');\n    if (options?.module) {\n      script.type = 'module';\n    } else {\n      script.type = 'text/javascript';\n    }\n    script.src = src;\n    script.onload = () => {\n      resolve(true);\n    };\n    script.onerror = () => {\n      reject(false);\n    };\n    if (options?.in === 'head') {\n      document.head.appendChild(script);\n    } else {\n      document.body.appendChild(script);\n    }\n  });\n\n  SCRIPTS_LOADED[src] = promise;\n\n  return promise;\n}\n\ntype LoadScriptParams = Parameters<typeof loadScript>;\n\n/**\n * The `useLoadScript` hook loads an external script tag in the browser. It allows React components to lazy-load large third-party dependencies.\n */\nexport function useLoadScript(\n  url: LoadScriptParams[0],\n  options?: LoadScriptParams[1]\n): ScriptState {\n  const [status, setStatus] = useState<ScriptState>('loading');\n  const stringifiedOptions = JSON.stringify(options);\n\n  useEffect(() => {\n    async function loadScriptWrapper() {\n      try {\n        setStatus('loading');\n        await loadScript(url, options);\n        setStatus('done');\n      } catch (error) {\n        setStatus('error');\n      }\n    }\n\n    loadScriptWrapper();\n  }, [url, stringifiedOptions, options]);\n\n  return status;\n}\n\ntype ScriptState = 'loading' | 'done' | 'error';\n"],"names":[],"mappings":";AAEA,MAAM,iBAAmD,CAAA;AAEzC,SAAA,WACd,KACA,SACkB;AACZ,QAAA,iBAAmC,eAAe,GAAG;AAE3D,MAAI,gBAAgB;AACX,WAAA;AAAA,EACT;AAEA,QAAM,UAAU,IAAI,QAAiB,CAAC,SAAS,WAAW;AAClD,UAAA,SAAS,SAAS,cAAc,QAAQ;AAC9C,QAAI,mCAAS,QAAQ;AACnB,aAAO,OAAO;AAAA,IAAA,OACT;AACL,aAAO,OAAO;AAAA,IAChB;AACA,WAAO,MAAM;AACb,WAAO,SAAS,MAAM;AACpB,cAAQ,IAAI;AAAA,IAAA;AAEd,WAAO,UAAU,MAAM;AACrB,aAAO,KAAK;AAAA,IAAA;AAEV,SAAA,mCAAS,QAAO,QAAQ;AACjB,eAAA,KAAK,YAAY,MAAM;AAAA,IAAA,OAC3B;AACI,eAAA,KAAK,YAAY,MAAM;AAAA,IAClC;AAAA,EAAA,CACD;AAED,iBAAe,GAAG,IAAI;AAEf,SAAA;AACT;AAOgB,SAAA,cACd,KACA,SACa;AACb,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAsB,SAAS;AACrD,QAAA,qBAAqB,KAAK,UAAU,OAAO;AAEjD,YAAU,MAAM;AACd,mBAAe,oBAAoB;AAC7B,UAAA;AACF,kBAAU,SAAS;AACb,cAAA,WAAW,KAAK,OAAO;AAC7B,kBAAU,MAAM;AAAA,eACT;AACP,kBAAU,OAAO;AAAA,MACnB;AAAA,IACF;AAEkB;EACjB,GAAA,CAAC,KAAK,oBAAoB,OAAO,CAAC;AAE9B,SAAA;AACT;"}