@shopify/hydrogen-react 2022.7.0

package/dist/prod/image-size.cjs

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const PRODUCTION_CDN_HOSTNAMES = [
+  "cdn.shopify.com",
+  "cdn.shopifycdn.net",
+  "shopify-assets.shopifycdn.com",
+  "shopify-assets.shopifycdn.net"
+];
+const LOCAL_CDN_HOSTNAMES = ["spin.dev"];
+const ALL_CDN_HOSTNAMES = [...PRODUCTION_CDN_HOSTNAMES, ...LOCAL_CDN_HOSTNAMES];
+const IMG_SRC_SET_SIZES = [352, 832, 1200, 1920, 2560];
+function addImageSizeParametersToUrl({
+  src,
+  width,
+  height,
+  crop,
+  scale
+}) {
+  const newUrl = new URL(src);
+  const multipliedScale = scale != null ? scale : 1;
+  if (width) {
+    let finalWidth;
+    if (typeof width === "string") {
+      finalWidth = (IMG_SRC_SET_SIZES[0] * multipliedScale).toString();
+    } else {
+      finalWidth = (Number(width) * multipliedScale).toString();
+    }
+    newUrl.searchParams.append("width", finalWidth);
+  }
+  if (height && typeof height === "number") {
+    newUrl.searchParams.append("height", (height * multipliedScale).toString());
+  }
+  crop && newUrl.searchParams.append("crop", crop);
+  return newUrl.toString();
+}
+function shopifyImageLoader(params) {
+  const newSrc = new URL(params.src);
+  const isShopifyServedImage = ALL_CDN_HOSTNAMES.some(
+    (allowedHostname) => newSrc.hostname.endsWith(allowedHostname)
+  );
+  if (!isShopifyServedImage || !params.width && !params.height && !params.crop && !params.scale) {
+    return params.src;
+  }
+  return addImageSizeParametersToUrl(params);
+}
+function getShopifyImageDimensions({
+  data: sfapiImage,
+  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
+    };
+  }
+  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
+    };
+  }
+  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
+    };
+  }
+  return { width: null, height: null };
+}
+exports.IMG_SRC_SET_SIZES = IMG_SRC_SET_SIZES;
+exports.addImageSizeParametersToUrl = addImageSizeParametersToUrl;
+exports.getShopifyImageDimensions = getShopifyImageDimensions;
+exports.shopifyImageLoader = shopifyImageLoader;
+//# sourceMappingURL=image-size.cjs.map

package/dist/prod/image-size.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-size.cjs","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;;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,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;;;;;"}

package/dist/prod/image-size.js

@@ -0,0 +1,80 @@
+const PRODUCTION_CDN_HOSTNAMES = [
+  "cdn.shopify.com",
+  "cdn.shopifycdn.net",
+  "shopify-assets.shopifycdn.com",
+  "shopify-assets.shopifycdn.net"
+];
+const LOCAL_CDN_HOSTNAMES = ["spin.dev"];
+const ALL_CDN_HOSTNAMES = [...PRODUCTION_CDN_HOSTNAMES, ...LOCAL_CDN_HOSTNAMES];
+const IMG_SRC_SET_SIZES = [352, 832, 1200, 1920, 2560];
+function addImageSizeParametersToUrl({
+  src,
+  width,
+  height,
+  crop,
+  scale
+}) {
+  const newUrl = new URL(src);
+  const multipliedScale = scale != null ? scale : 1;
+  if (width) {
+    let finalWidth;
+    if (typeof width === "string") {
+      finalWidth = (IMG_SRC_SET_SIZES[0] * multipliedScale).toString();
+    } else {
+      finalWidth = (Number(width) * multipliedScale).toString();
+    }
+    newUrl.searchParams.append("width", finalWidth);
+  }
+  if (height && typeof height === "number") {
+    newUrl.searchParams.append("height", (height * multipliedScale).toString());
+  }
+  crop && newUrl.searchParams.append("crop", crop);
+  return newUrl.toString();
+}
+function shopifyImageLoader(params) {
+  const newSrc = new URL(params.src);
+  const isShopifyServedImage = ALL_CDN_HOSTNAMES.some(
+    (allowedHostname) => newSrc.hostname.endsWith(allowedHostname)
+  );
+  if (!isShopifyServedImage || !params.width && !params.height && !params.crop && !params.scale) {
+    return params.src;
+  }
+  return addImageSizeParametersToUrl(params);
+}
+function getShopifyImageDimensions({
+  data: sfapiImage,
+  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
+    };
+  }
+  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
+    };
+  }
+  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
+    };
+  }
+  return { width: null, height: null };
+}
+export {
+  IMG_SRC_SET_SIZES,
+  addImageSizeParametersToUrl,
+  getShopifyImageDimensions,
+  shopifyImageLoader
+};
+//# sourceMappingURL=image-size.js.map

package/dist/prod/image-size.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-size.js","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;"}

package/dist/prod/index.cjs

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const ExternalVideo = require("./ExternalVideo.cjs");
+const flattenConnection = require("./flatten-connection.cjs");
+const Image = require("./Image.cjs");
+const MediaFile = require("./MediaFile.cjs");
+const Metafield = require("./Metafield.cjs");
+const ModelViewer = require("./ModelViewer.cjs");
+const Money = require("./Money.cjs");
+const ProductPrice = require("./ProductPrice.cjs");
+const ProductProvider = require("./ProductProvider.cjs");
+const ShopifyProvider = require("./ShopifyProvider.cjs");
+const ShopPayButton = require("./ShopPayButton.cjs");
+const storefrontClient = require("./storefront-client.cjs");
+const useMoney = require("./useMoney.cjs");
+const Video = require("./Video.cjs");
+exports.ExternalVideo = ExternalVideo.ExternalVideo;
+exports.flattenConnection = flattenConnection.flattenConnection;
+exports.Image = Image.Image;
+exports.MediaFile = MediaFile.MediaFile;
+exports.Metafield = Metafield.Metafield;
+exports.parseMetafield = Metafield.parseMetafield;
+exports.parseMetafieldValue = Metafield.parseMetafieldValue;
+exports.ModelViewer = ModelViewer.ModelViewer;
+exports.Money = Money.Money;
+exports.ProductPrice = ProductPrice.ProductPrice;
+exports.ProductProvider = ProductProvider.ProductProvider;
+exports.useProduct = ProductProvider.useProduct;
+exports.ShopifyProvider = ShopifyProvider.ShopifyProvider;
+exports.useShop = ShopifyProvider.useShop;
+exports.ShopPayButton = ShopPayButton.ShopPayButton;
+exports.createStorefrontClient = storefrontClient.createStorefrontClient;
+exports.useMoney = useMoney.useMoney;
+exports.Video = Video.Video;
+//# sourceMappingURL=index.cjs.map

package/dist/prod/index.cjs.map

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

package/dist/prod/index.js

@@ -0,0 +1,35 @@
+import { ExternalVideo } from "./ExternalVideo.js";
+import { flattenConnection } from "./flatten-connection.js";
+import { Image } from "./Image.js";
+import { MediaFile } from "./MediaFile.js";
+import { Metafield, parseMetafield, parseMetafieldValue } from "./Metafield.js";
+import { ModelViewer } from "./ModelViewer.js";
+import { Money } from "./Money.js";
+import { ProductPrice } from "./ProductPrice.js";
+import { ProductProvider, useProduct } from "./ProductProvider.js";
+import { ShopifyProvider, useShop } from "./ShopifyProvider.js";
+import { ShopPayButton } from "./ShopPayButton.js";
+import { createStorefrontClient } from "./storefront-client.js";
+import { useMoney } from "./useMoney.js";
+import { Video } from "./Video.js";
+export {
+  ExternalVideo,
+  Image,
+  MediaFile,
+  Metafield,
+  ModelViewer,
+  Money,
+  ProductPrice,
+  ProductProvider,
+  ShopPayButton,
+  ShopifyProvider,
+  Video,
+  createStorefrontClient,
+  flattenConnection,
+  parseMetafield,
+  parseMetafieldValue,
+  useMoney,
+  useProduct,
+  useShop
+};
+//# sourceMappingURL=index.js.map

package/dist/prod/index.js.map

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

package/dist/prod/load-script.cjs

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const react = require("react");
+const SCRIPTS_LOADED = {};
+function loadScript(src, options) {
+  const isScriptLoaded = SCRIPTS_LOADED[src];
+  if (isScriptLoaded) {
+    return isScriptLoaded;
+  }
+  const promise = new Promise((resolve, reject) => {
+    const script = document.createElement("script");
+    if (options == null ? void 0 : options.module) {
+      script.type = "module";
+    } else {
+      script.type = "text/javascript";
+    }
+    script.src = src;
+    script.onload = () => {
+      resolve(true);
+    };
+    script.onerror = () => {
+      reject(false);
+    };
+    if ((options == null ? void 0 : options.in) === "head") {
+      document.head.appendChild(script);
+    } else {
+      document.body.appendChild(script);
+    }
+  });
+  SCRIPTS_LOADED[src] = promise;
+  return promise;
+}
+function useLoadScript(url, options) {
+  const [status, setStatus] = react.useState("loading");
+  const stringifiedOptions = JSON.stringify(options);
+  react.useEffect(() => {
+    async function loadScriptWrapper() {
+      try {
+        setStatus("loading");
+        await loadScript(url, options);
+        setStatus("done");
+      } catch (error) {
+        setStatus("error");
+      }
+    }
+    loadScriptWrapper();
+  }, [url, stringifiedOptions, options]);
+  return status;
+}
+exports.loadScript = loadScript;
+exports.useLoadScript = useLoadScript;
+//# sourceMappingURL=load-script.cjs.map

package/dist/prod/load-script.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"load-script.cjs","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,EACR;AAED,QAAMC,UAAU,IAAIC,QAAiB,CAACC,SAASC,WAAW;AAClDC,UAAAA,SAASC,SAASC,cAAc,QAAvB;AACf,QAAIR,mCAASS,QAAQ;AACnBH,aAAOI,OAAO;AAAA,IAAA,OACT;AACLJ,aAAOI,OAAO;AAAA,IACf;AACDJ,WAAOP,MAAMA;AACbO,WAAOK,SAAS,MAAM;AACpBP,cAAQ,IAAD;AAAA,IAAA;AAETE,WAAOM,UAAU,MAAM;AACrBP,aAAO,KAAD;AAAA,IAAA;AAEJL,SAAAA,mCAASa,QAAO,QAAQ;AACjBC,eAAAA,KAAKC,YAAYT,MAA1B;AAAA,IAAA,OACK;AACIU,eAAAA,KAAKD,YAAYT,MAA1B;AAAA,IACD;AAAA,EAAA,CAlBa;AAqBhBT,iBAAeE,OAAOG;AAEfA,SAAAA;AACR;AAOee,SAAAA,cACdC,KACAlB,SACa;AACb,QAAM,CAACmB,QAAQC,SAAT,IAAsBC,eAAsB,SAAd;AAC9BC,QAAAA,qBAAqBC,KAAKC,UAAUxB,OAAf;AAE3ByB,QAAAA,UAAU,MAAM;AACd,mBAAeC,oBAAoB;AAC7B,UAAA;AACFN,kBAAU,SAAD;AACHtB,cAAAA,WAAWoB,KAAKlB,OAAN;AAChBoB,kBAAU,MAAD;AAAA,eACFO;AACPP,kBAAU,OAAD;AAAA,MACV;AAAA,IACF;AAEgB;EAChB,GAAA,CAACF,KAAKI,oBAAoBtB,OAA1B,CAZM;AAcFmB,SAAAA;AACR;;;"}

package/dist/prod/load-script.js

@@ -0,0 +1,52 @@
+import { useState, useEffect } from "react";
+const SCRIPTS_LOADED = {};
+function loadScript(src, options) {
+  const isScriptLoaded = SCRIPTS_LOADED[src];
+  if (isScriptLoaded) {
+    return isScriptLoaded;
+  }
+  const promise = new Promise((resolve, reject) => {
+    const script = document.createElement("script");
+    if (options == null ? void 0 : options.module) {
+      script.type = "module";
+    } else {
+      script.type = "text/javascript";
+    }
+    script.src = src;
+    script.onload = () => {
+      resolve(true);
+    };
+    script.onerror = () => {
+      reject(false);
+    };
+    if ((options == null ? void 0 : options.in) === "head") {
+      document.head.appendChild(script);
+    } else {
+      document.body.appendChild(script);
+    }
+  });
+  SCRIPTS_LOADED[src] = promise;
+  return promise;
+}
+function useLoadScript(url, options) {
+  const [status, setStatus] = useState("loading");
+  const stringifiedOptions = JSON.stringify(options);
+  useEffect(() => {
+    async function loadScriptWrapper() {
+      try {
+        setStatus("loading");
+        await loadScript(url, options);
+        setStatus("done");
+      } catch (error) {
+        setStatus("error");
+      }
+    }
+    loadScriptWrapper();
+  }, [url, stringifiedOptions, options]);
+  return status;
+}
+export {
+  loadScript,
+  useLoadScript
+};
+//# sourceMappingURL=load-script.js.map

package/dist/prod/load-script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"load-script.js","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,EACR;AAED,QAAMC,UAAU,IAAIC,QAAiB,CAACC,SAASC,WAAW;AAClDC,UAAAA,SAASC,SAASC,cAAc,QAAvB;AACf,QAAIR,mCAASS,QAAQ;AACnBH,aAAOI,OAAO;AAAA,IAAA,OACT;AACLJ,aAAOI,OAAO;AAAA,IACf;AACDJ,WAAOP,MAAMA;AACbO,WAAOK,SAAS,MAAM;AACpBP,cAAQ,IAAD;AAAA,IAAA;AAETE,WAAOM,UAAU,MAAM;AACrBP,aAAO,KAAD;AAAA,IAAA;AAEJL,SAAAA,mCAASa,QAAO,QAAQ;AACjBC,eAAAA,KAAKC,YAAYT,MAA1B;AAAA,IAAA,OACK;AACIU,eAAAA,KAAKD,YAAYT,MAA1B;AAAA,IACD;AAAA,EAAA,CAlBa;AAqBhBT,iBAAeE,OAAOG;AAEfA,SAAAA;AACR;AAOee,SAAAA,cACdC,KACAlB,SACa;AACb,QAAM,CAACmB,QAAQC,SAAT,IAAsBC,SAAsB,SAAd;AAC9BC,QAAAA,qBAAqBC,KAAKC,UAAUxB,OAAf;AAE3ByB,YAAU,MAAM;AACd,mBAAeC,oBAAoB;AAC7B,UAAA;AACFN,kBAAU,SAAD;AACHtB,cAAAA,WAAWoB,KAAKlB,OAAN;AAChBoB,kBAAU,MAAD;AAAA,eACFO;AACPP,kBAAU,OAAD;AAAA,MACV;AAAA,IACF;AAEgB;EAChB,GAAA,CAACF,KAAKI,oBAAoBtB,OAA1B,CAZM;AAcFmB,SAAAA;AACR;"}

package/dist/prod/storefront-api-constants.cjs

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const SFAPI_VERSION = "2022-07";
+exports.SFAPI_VERSION = SFAPI_VERSION;
+//# sourceMappingURL=storefront-api-constants.cjs.map

package/dist/prod/storefront-api-constants.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"storefront-api-constants.cjs","sources":["../../src/storefront-api-constants.ts"],"sourcesContent":["export const SFAPI_VERSION = '2022-07';\n"],"names":[],"mappings":";;AAAO,MAAM,gBAAgB;;"}

package/dist/prod/storefront-api-constants.js

@@ -0,0 +1,5 @@
+const SFAPI_VERSION = "2022-07";
+export {
+  SFAPI_VERSION
+};
+//# sourceMappingURL=storefront-api-constants.js.map

package/dist/prod/storefront-api-constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"storefront-api-constants.js","sources":["../../src/storefront-api-constants.ts"],"sourcesContent":["export const SFAPI_VERSION = '2022-07';\n"],"names":[],"mappings":"AAAO,MAAM,gBAAgB;"}

package/dist/prod/storefront-client.cjs

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const storefrontApiConstants = require("./storefront-api-constants.cjs");
+function createStorefrontClient({
+  storeDomain,
+  privateStorefrontToken,
+  publicStorefrontToken,
+  storefrontApiVersion,
+  contentType
+}) {
+  if (storefrontApiVersion !== storefrontApiConstants.SFAPI_VERSION) {
+    console.warn(
+      `StorefrontClient: The Storefront API version that you're using is different than the version this build of Hydrogen-UI is targeting. You may run into unexpected errors if these versions don't match. Received verion: "${storefrontApiVersion}"; expected version ${storefrontApiConstants.SFAPI_VERSION}`
+    );
+  }
+  return {
+    getStorefrontApiUrl(overrideProps) {
+      var _a, _b;
+      return `https://${(_a = overrideProps == null ? void 0 : overrideProps.storeDomain) != null ? _a : storeDomain}.myshopify.com/api/${(_b = overrideProps == null ? void 0 : overrideProps.storefrontApiVersion) != null ? _b : storefrontApiVersion}/graphql.json`;
+    },
+    getPrivateTokenHeaders(overrideProps) {
+      var _a, _b, _c;
+      if (!privateStorefrontToken && !(overrideProps == null ? void 0 : overrideProps.privateStorefrontToken)) {
+        throw new Error(
+          `StorefrontClient: You did not pass in a 'privateStorefrontToken' while using 'getPrivateTokenHeaders()'`
+        );
+      }
+      const finalContentType = (_a = overrideProps == null ? void 0 : overrideProps.contentType) != null ? _a : contentType;
+      return {
+        "content-type": finalContentType === "graphql" ? "application/graphql" : "application/json",
+        "X-SDK-Variant": "hydrogen-ui",
+        "X-SDK-Variant-Source": "react",
+        "X-SDK-Version": storefrontApiVersion,
+        "Shopify-Storefront-Private-Token": (_c = (_b = overrideProps == null ? void 0 : overrideProps.privateStorefrontToken) != null ? _b : privateStorefrontToken) != null ? _c : "",
+        ...(overrideProps == null ? void 0 : overrideProps.buyerIp) ? { "Shopify-Storefront-Buyer-IP": overrideProps.buyerIp } : {}
+      };
+    },
+    getPublicTokenHeaders(overrideProps) {
+      var _a, _b, _c;
+      if (!publicStorefrontToken && !(overrideProps == null ? void 0 : overrideProps.publicStorefrontToken)) {
+        throw new Error(
+          `StorefrontClient: You did not pass in a 'publicStorefrontToken' while using 'getPublicTokenHeaders()'`
+        );
+      }
+      const finalContentType = (_a = overrideProps == null ? void 0 : overrideProps.contentType) != null ? _a : contentType;
+      return {
+        "content-type": finalContentType === "graphql" ? "application/graphql" : "application/json",
+        "X-SDK-Variant": "hydrogen-ui",
+        "X-SDK-Variant-Source": "react",
+        "X-SDK-Version": storefrontApiVersion,
+        "X-Shopify-Storefront-Access-Token": (_c = (_b = overrideProps == null ? void 0 : overrideProps.publicStorefrontToken) != null ? _b : publicStorefrontToken) != null ? _c : ""
+      };
+    }
+  };
+}
+exports.createStorefrontClient = createStorefrontClient;
+//# sourceMappingURL=storefront-client.cjs.map

package/dist/prod/storefront-client.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"storefront-client.cjs","sources":["../../src/storefront-client.ts"],"sourcesContent":["import {SFAPI_VERSION} from './storefront-api-constants.js';\n\n/**\n * The `createStorefrontClient()` function creates helpers that enable you to quickly query the Shopify Storefront API.\n *\n * When used on the server, it is recommended to use the `privateStorefrontToken` prop. When used on the client, it is recommended to use the `publicStorefrontToken` prop.\n */\nexport function createStorefrontClient({\n  storeDomain,\n  privateStorefrontToken,\n  publicStorefrontToken,\n  storefrontApiVersion,\n  contentType,\n}: StorefrontClientProps): StorefrontClientReturn {\n  if (storefrontApiVersion !== SFAPI_VERSION) {\n    console.warn(\n      `StorefrontClient: The Storefront API version that you're using is different than the version this build of Hydrogen-UI is targeting. You may run into unexpected errors if these versions don't match. Received verion: \"${storefrontApiVersion}\"; expected version ${SFAPI_VERSION}`\n    );\n  }\n\n  // only warn if not in a browser environment\n  if (__HYDROGEN_DEV__ && !privateStorefrontToken && !globalThis.document) {\n    console.warn(\n      `StorefrontClient: Using a private storefront token is recommended for server environments.  Refer to the authentication https://shopify.dev/api/storefront#authentication documentation for more details. `\n    );\n  }\n\n  // only warn if in a browser environment and you're using the privateStorefrontToken\n  if (__HYDROGEN_DEV__ && privateStorefrontToken && globalThis) {\n    console.warn(\n      `StorefrontClient: You are attempting to use a private token in an environment where it can be easily accessed by anyone. This is a security risk; please use the public token and the 'publicStorefrontToken' prop`\n    );\n  }\n\n  return {\n    getStorefrontApiUrl(overrideProps) {\n      return `https://${\n        overrideProps?.storeDomain ?? storeDomain\n      }.myshopify.com/api/${\n        overrideProps?.storefrontApiVersion ?? storefrontApiVersion\n      }/graphql.json`;\n    },\n    getPrivateTokenHeaders(overrideProps) {\n      if (!privateStorefrontToken && !overrideProps?.privateStorefrontToken) {\n        throw new Error(\n          `StorefrontClient: You did not pass in a 'privateStorefrontToken' while using 'getPrivateTokenHeaders()'`\n        );\n      }\n\n      if (__HYDROGEN_DEV__ && !overrideProps?.buyerIp) {\n        console.warn(\n          `StorefrontClient: it is recommended to pass in the 'buyerIp' property which improves analytics and data in the admin.`\n        );\n      }\n\n      const finalContentType = overrideProps?.contentType ?? contentType;\n\n      return {\n        // default to json\n        'content-type':\n          finalContentType === 'graphql'\n            ? 'application/graphql'\n            : 'application/json',\n        'X-SDK-Variant': 'hydrogen-ui',\n        'X-SDK-Variant-Source': 'react',\n        'X-SDK-Version': storefrontApiVersion,\n        'Shopify-Storefront-Private-Token':\n          overrideProps?.privateStorefrontToken ?? privateStorefrontToken ?? '',\n        ...(overrideProps?.buyerIp\n          ? {'Shopify-Storefront-Buyer-IP': overrideProps.buyerIp}\n          : {}),\n      };\n    },\n    getPublicTokenHeaders(overrideProps) {\n      if (!publicStorefrontToken && !overrideProps?.publicStorefrontToken) {\n        throw new Error(\n          `StorefrontClient: You did not pass in a 'publicStorefrontToken' while using 'getPublicTokenHeaders()'`\n        );\n      }\n\n      const finalContentType = overrideProps?.contentType ?? contentType;\n\n      return {\n        // default to json\n        'content-type':\n          finalContentType === 'graphql'\n            ? 'application/graphql'\n            : 'application/json',\n        'X-SDK-Variant': 'hydrogen-ui',\n        'X-SDK-Variant-Source': 'react',\n        'X-SDK-Version': storefrontApiVersion,\n        'X-Shopify-Storefront-Access-Token':\n          overrideProps?.publicStorefrontToken ?? publicStorefrontToken ?? '',\n      };\n    },\n  };\n}\n\ntype StorefrontClientProps = {\n  /** The host name of the domain (eg: `{shop}.myshopify.com`). */\n  storeDomain: string;\n  /** The Storefront API delegate access token. Refer to the [authentication](https://shopify.dev/api/storefront#authentication) and [delegate access token](https://shopify.dev/apps/auth/oauth/delegate-access-tokens) documentation for more details. */\n  privateStorefrontToken?: string;\n  /** The Storefront API access token. Refer to the [authentication](https://shopify.dev/api/storefront#authentication) documentation for more details. */\n  publicStorefrontToken?: 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  /**\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   * Can also be customized on a call-by-call basis by passing in `'contentType'` to both `getPrivateTokenHeaders({...})` and `getPublicTokenHeaders({...})`, for example: `getPublicTokenHeaders({contentType: 'graphql'})`\n   */\n  contentType?: 'json' | 'graphql';\n};\n\ntype OverrideTokenHeaderProps = Partial<\n  Pick<StorefrontClientProps, 'contentType'>\n>;\n\ntype StorefrontClientReturn = {\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 calling `createStorefrontClient()`. However, you can override the following settings on each invocation of `getStorefrontApiUrl({...})`:\n   *\n   * - `storeDomain`\n   * - `storefrontApiVersion`\n   */\n  getStorefrontApiUrl: (\n    props?: Partial<\n      Pick<StorefrontClientProps, 'storeDomain' | 'storefrontApiVersion'>\n    >\n  ) => string;\n  /**\n   * Returns an object that contains headers that are needed for each query to Storefront API GraphQL endpoint. This method uses the private Server-to-Server token which reduces the chance of throttling but must not be exposed to clients. Server-side calls should prefer using this over `getPublicTokenHeaders()`.\n   *\n   * By default, it will use the config you passed in when calling `createStorefrontClient()`. However, you can override the following settings on each invocation of `getPrivateTokenHeaders({...})`:\n   *\n   * - `contentType`\n   * - `privateStorefrontToken`\n   * - `buyerIp`\n   *\n   * Note that `contentType` defaults to what you configured in `createStorefrontClient({...})` and defaults to `'json'`, but a specific call may require using `graphql`. When using `JSON.stringify()` on the `body`, use `'json'`; otherwise, use `'graphql'`.\n   */\n  getPrivateTokenHeaders: (\n    props?: OverrideTokenHeaderProps &\n      Pick<StorefrontClientProps, 'privateStorefrontToken'> & {\n        /**\n         * The client's IP address. Passing this to the Storefront API when using a server-to-server token will help improve your store's analytics data.\n         */\n        buyerIp?: string;\n      }\n  ) => Record<string, string>;\n  /**\n   * Returns an object that contains headers that are needed for each query to Storefront API GraphQL endpoint. This method uses the private Server-to-Server token which reduces the chance of throttling but must not be exposed to clients. Server-side calls should prefer using this over `getPublicTokenHeaders()`.\n   *\n   * By default, it will use the config you passed in when calling `createStorefrontClient()`. However, you can override the following settings on each invocation of `getPrivateTokenHeaders({...})`:\n   *\n   * - `contentType`\n   * - `publicStorefrontToken`\n   *\n   * Note that `contentType` defaults to what you configured in `createStorefrontClient({...})` and defaults to `'json'`, but a specific call may require using `graphql`. When using `JSON.stringify()` on the `body`, use `'json'`; otherwise, use `'graphql'`.\n   */\n  getPublicTokenHeaders: (\n    props?: OverrideTokenHeaderProps &\n      Pick<StorefrontClientProps, 'publicStorefrontToken'>\n  ) => Record<string, string>;\n};\n"],"names":["SFAPI_VERSION"],"mappings":";;;AAOO,SAAS,uBAAuB;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAkD;AAChD,MAAI,yBAAyBA,uBAAAA,eAAe;AAClC,YAAA;AAAA,MACN,4NAA4N,2CAA2CA,uBAAA;AAAA,IAAA;AAAA,EAE3Q;AAgBO,SAAA;AAAA,IACL,oBAAoB,eAAe;;AACjC,aAAO,YACL,oDAAe,gBAAf,YAA8B,kCAE9B,oDAAe,yBAAf,YAAuC;AAAA,IAE3C;AAAA,IACA,uBAAuB,eAAe;;AACpC,UAAI,CAAC,0BAA0B,EAAC,+CAAe,yBAAwB;AACrE,cAAM,IAAI;AAAA,UACR;AAAA,QAAA;AAAA,MAEJ;AAQM,YAAA,oBAAmB,oDAAe,gBAAf,YAA8B;AAEhD,aAAA;AAAA,QAEL,gBACE,qBAAqB,YACjB,wBACA;AAAA,QACN,iBAAiB;AAAA,QACjB,wBAAwB;AAAA,QACxB,iBAAiB;AAAA,QACjB,qCACE,0DAAe,2BAAf,YAAyC,2BAAzC,YAAmE;AAAA,QACrE,IAAI,+CAAe,WACf,EAAC,+BAA+B,cAAc,QAAA,IAC9C,CAAC;AAAA,MAAA;AAAA,IAET;AAAA,IACA,sBAAsB,eAAe;;AACnC,UAAI,CAAC,yBAAyB,EAAC,+CAAe,wBAAuB;AACnE,cAAM,IAAI;AAAA,UACR;AAAA,QAAA;AAAA,MAEJ;AAEM,YAAA,oBAAmB,oDAAe,gBAAf,YAA8B;AAEhD,aAAA;AAAA,QAEL,gBACE,qBAAqB,YACjB,wBACA;AAAA,QACN,iBAAiB;AAAA,QACjB,wBAAwB;AAAA,QACxB,iBAAiB;AAAA,QACjB,sCACE,0DAAe,0BAAf,YAAwC,0BAAxC,YAAiE;AAAA,MAAA;AAAA,IAEvE;AAAA,EAAA;AAEJ;;"}

package/dist/prod/storefront-client.js

@@ -0,0 +1,57 @@
+import { SFAPI_VERSION } from "./storefront-api-constants.js";
+function createStorefrontClient({
+  storeDomain,
+  privateStorefrontToken,
+  publicStorefrontToken,
+  storefrontApiVersion,
+  contentType
+}) {
+  if (storefrontApiVersion !== SFAPI_VERSION) {
+    console.warn(
+      `StorefrontClient: The Storefront API version that you're using is different than the version this build of Hydrogen-UI is targeting. You may run into unexpected errors if these versions don't match. Received verion: "${storefrontApiVersion}"; expected version ${SFAPI_VERSION}`
+    );
+  }
+  return {
+    getStorefrontApiUrl(overrideProps) {
+      var _a, _b;
+      return `https://${(_a = overrideProps == null ? void 0 : overrideProps.storeDomain) != null ? _a : storeDomain}.myshopify.com/api/${(_b = overrideProps == null ? void 0 : overrideProps.storefrontApiVersion) != null ? _b : storefrontApiVersion}/graphql.json`;
+    },
+    getPrivateTokenHeaders(overrideProps) {
+      var _a, _b, _c;
+      if (!privateStorefrontToken && !(overrideProps == null ? void 0 : overrideProps.privateStorefrontToken)) {
+        throw new Error(
+          `StorefrontClient: You did not pass in a 'privateStorefrontToken' while using 'getPrivateTokenHeaders()'`
+        );
+      }
+      const finalContentType = (_a = overrideProps == null ? void 0 : overrideProps.contentType) != null ? _a : contentType;
+      return {
+        "content-type": finalContentType === "graphql" ? "application/graphql" : "application/json",
+        "X-SDK-Variant": "hydrogen-ui",
+        "X-SDK-Variant-Source": "react",
+        "X-SDK-Version": storefrontApiVersion,
+        "Shopify-Storefront-Private-Token": (_c = (_b = overrideProps == null ? void 0 : overrideProps.privateStorefrontToken) != null ? _b : privateStorefrontToken) != null ? _c : "",
+        ...(overrideProps == null ? void 0 : overrideProps.buyerIp) ? { "Shopify-Storefront-Buyer-IP": overrideProps.buyerIp } : {}
+      };
+    },
+    getPublicTokenHeaders(overrideProps) {
+      var _a, _b, _c;
+      if (!publicStorefrontToken && !(overrideProps == null ? void 0 : overrideProps.publicStorefrontToken)) {
+        throw new Error(
+          `StorefrontClient: You did not pass in a 'publicStorefrontToken' while using 'getPublicTokenHeaders()'`
+        );
+      }
+      const finalContentType = (_a = overrideProps == null ? void 0 : overrideProps.contentType) != null ? _a : contentType;
+      return {
+        "content-type": finalContentType === "graphql" ? "application/graphql" : "application/json",
+        "X-SDK-Variant": "hydrogen-ui",
+        "X-SDK-Variant-Source": "react",
+        "X-SDK-Version": storefrontApiVersion,
+        "X-Shopify-Storefront-Access-Token": (_c = (_b = overrideProps == null ? void 0 : overrideProps.publicStorefrontToken) != null ? _b : publicStorefrontToken) != null ? _c : ""
+      };
+    }
+  };
+}
+export {
+  createStorefrontClient
+};
+//# sourceMappingURL=storefront-client.js.map

package/dist/prod/storefront-client.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"storefront-client.js","sources":["../../src/storefront-client.ts"],"sourcesContent":["import {SFAPI_VERSION} from './storefront-api-constants.js';\n\n/**\n * The `createStorefrontClient()` function creates helpers that enable you to quickly query the Shopify Storefront API.\n *\n * When used on the server, it is recommended to use the `privateStorefrontToken` prop. When used on the client, it is recommended to use the `publicStorefrontToken` prop.\n */\nexport function createStorefrontClient({\n  storeDomain,\n  privateStorefrontToken,\n  publicStorefrontToken,\n  storefrontApiVersion,\n  contentType,\n}: StorefrontClientProps): StorefrontClientReturn {\n  if (storefrontApiVersion !== SFAPI_VERSION) {\n    console.warn(\n      `StorefrontClient: The Storefront API version that you're using is different than the version this build of Hydrogen-UI is targeting. You may run into unexpected errors if these versions don't match. Received verion: \"${storefrontApiVersion}\"; expected version ${SFAPI_VERSION}`\n    );\n  }\n\n  // only warn if not in a browser environment\n  if (__HYDROGEN_DEV__ && !privateStorefrontToken && !globalThis.document) {\n    console.warn(\n      `StorefrontClient: Using a private storefront token is recommended for server environments.  Refer to the authentication https://shopify.dev/api/storefront#authentication documentation for more details. `\n    );\n  }\n\n  // only warn if in a browser environment and you're using the privateStorefrontToken\n  if (__HYDROGEN_DEV__ && privateStorefrontToken && globalThis) {\n    console.warn(\n      `StorefrontClient: You are attempting to use a private token in an environment where it can be easily accessed by anyone. This is a security risk; please use the public token and the 'publicStorefrontToken' prop`\n    );\n  }\n\n  return {\n    getStorefrontApiUrl(overrideProps) {\n      return `https://${\n        overrideProps?.storeDomain ?? storeDomain\n      }.myshopify.com/api/${\n        overrideProps?.storefrontApiVersion ?? storefrontApiVersion\n      }/graphql.json`;\n    },\n    getPrivateTokenHeaders(overrideProps) {\n      if (!privateStorefrontToken && !overrideProps?.privateStorefrontToken) {\n        throw new Error(\n          `StorefrontClient: You did not pass in a 'privateStorefrontToken' while using 'getPrivateTokenHeaders()'`\n        );\n      }\n\n      if (__HYDROGEN_DEV__ && !overrideProps?.buyerIp) {\n        console.warn(\n          `StorefrontClient: it is recommended to pass in the 'buyerIp' property which improves analytics and data in the admin.`\n        );\n      }\n\n      const finalContentType = overrideProps?.contentType ?? contentType;\n\n      return {\n        // default to json\n        'content-type':\n          finalContentType === 'graphql'\n            ? 'application/graphql'\n            : 'application/json',\n        'X-SDK-Variant': 'hydrogen-ui',\n        'X-SDK-Variant-Source': 'react',\n        'X-SDK-Version': storefrontApiVersion,\n        'Shopify-Storefront-Private-Token':\n          overrideProps?.privateStorefrontToken ?? privateStorefrontToken ?? '',\n        ...(overrideProps?.buyerIp\n          ? {'Shopify-Storefront-Buyer-IP': overrideProps.buyerIp}\n          : {}),\n      };\n    },\n    getPublicTokenHeaders(overrideProps) {\n      if (!publicStorefrontToken && !overrideProps?.publicStorefrontToken) {\n        throw new Error(\n          `StorefrontClient: You did not pass in a 'publicStorefrontToken' while using 'getPublicTokenHeaders()'`\n        );\n      }\n\n      const finalContentType = overrideProps?.contentType ?? contentType;\n\n      return {\n        // default to json\n        'content-type':\n          finalContentType === 'graphql'\n            ? 'application/graphql'\n            : 'application/json',\n        'X-SDK-Variant': 'hydrogen-ui',\n        'X-SDK-Variant-Source': 'react',\n        'X-SDK-Version': storefrontApiVersion,\n        'X-Shopify-Storefront-Access-Token':\n          overrideProps?.publicStorefrontToken ?? publicStorefrontToken ?? '',\n      };\n    },\n  };\n}\n\ntype StorefrontClientProps = {\n  /** The host name of the domain (eg: `{shop}.myshopify.com`). */\n  storeDomain: string;\n  /** The Storefront API delegate access token. Refer to the [authentication](https://shopify.dev/api/storefront#authentication) and [delegate access token](https://shopify.dev/apps/auth/oauth/delegate-access-tokens) documentation for more details. */\n  privateStorefrontToken?: string;\n  /** The Storefront API access token. Refer to the [authentication](https://shopify.dev/api/storefront#authentication) documentation for more details. */\n  publicStorefrontToken?: 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  /**\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   * Can also be customized on a call-by-call basis by passing in `'contentType'` to both `getPrivateTokenHeaders({...})` and `getPublicTokenHeaders({...})`, for example: `getPublicTokenHeaders({contentType: 'graphql'})`\n   */\n  contentType?: 'json' | 'graphql';\n};\n\ntype OverrideTokenHeaderProps = Partial<\n  Pick<StorefrontClientProps, 'contentType'>\n>;\n\ntype StorefrontClientReturn = {\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 calling `createStorefrontClient()`. However, you can override the following settings on each invocation of `getStorefrontApiUrl({...})`:\n   *\n   * - `storeDomain`\n   * - `storefrontApiVersion`\n   */\n  getStorefrontApiUrl: (\n    props?: Partial<\n      Pick<StorefrontClientProps, 'storeDomain' | 'storefrontApiVersion'>\n    >\n  ) => string;\n  /**\n   * Returns an object that contains headers that are needed for each query to Storefront API GraphQL endpoint. This method uses the private Server-to-Server token which reduces the chance of throttling but must not be exposed to clients. Server-side calls should prefer using this over `getPublicTokenHeaders()`.\n   *\n   * By default, it will use the config you passed in when calling `createStorefrontClient()`. However, you can override the following settings on each invocation of `getPrivateTokenHeaders({...})`:\n   *\n   * - `contentType`\n   * - `privateStorefrontToken`\n   * - `buyerIp`\n   *\n   * Note that `contentType` defaults to what you configured in `createStorefrontClient({...})` and defaults to `'json'`, but a specific call may require using `graphql`. When using `JSON.stringify()` on the `body`, use `'json'`; otherwise, use `'graphql'`.\n   */\n  getPrivateTokenHeaders: (\n    props?: OverrideTokenHeaderProps &\n      Pick<StorefrontClientProps, 'privateStorefrontToken'> & {\n        /**\n         * The client's IP address. Passing this to the Storefront API when using a server-to-server token will help improve your store's analytics data.\n         */\n        buyerIp?: string;\n      }\n  ) => Record<string, string>;\n  /**\n   * Returns an object that contains headers that are needed for each query to Storefront API GraphQL endpoint. This method uses the private Server-to-Server token which reduces the chance of throttling but must not be exposed to clients. Server-side calls should prefer using this over `getPublicTokenHeaders()`.\n   *\n   * By default, it will use the config you passed in when calling `createStorefrontClient()`. However, you can override the following settings on each invocation of `getPrivateTokenHeaders({...})`:\n   *\n   * - `contentType`\n   * - `publicStorefrontToken`\n   *\n   * Note that `contentType` defaults to what you configured in `createStorefrontClient({...})` and defaults to `'json'`, but a specific call may require using `graphql`. When using `JSON.stringify()` on the `body`, use `'json'`; otherwise, use `'graphql'`.\n   */\n  getPublicTokenHeaders: (\n    props?: OverrideTokenHeaderProps &\n      Pick<StorefrontClientProps, 'publicStorefrontToken'>\n  ) => Record<string, string>;\n};\n"],"names":[],"mappings":";AAOO,SAAS,uBAAuB;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAkD;AAChD,MAAI,yBAAyB,eAAe;AAClC,YAAA;AAAA,MACN,4NAA4N,2CAA2C;AAAA,IAAA;AAAA,EAE3Q;AAgBO,SAAA;AAAA,IACL,oBAAoB,eAAe;;AACjC,aAAO,YACL,oDAAe,gBAAf,YAA8B,kCAE9B,oDAAe,yBAAf,YAAuC;AAAA,IAE3C;AAAA,IACA,uBAAuB,eAAe;;AACpC,UAAI,CAAC,0BAA0B,EAAC,+CAAe,yBAAwB;AACrE,cAAM,IAAI;AAAA,UACR;AAAA,QAAA;AAAA,MAEJ;AAQM,YAAA,oBAAmB,oDAAe,gBAAf,YAA8B;AAEhD,aAAA;AAAA,QAEL,gBACE,qBAAqB,YACjB,wBACA;AAAA,QACN,iBAAiB;AAAA,QACjB,wBAAwB;AAAA,QACxB,iBAAiB;AAAA,QACjB,qCACE,0DAAe,2BAAf,YAAyC,2BAAzC,YAAmE;AAAA,QACrE,IAAI,+CAAe,WACf,EAAC,+BAA+B,cAAc,QAAA,IAC9C,CAAC;AAAA,MAAA;AAAA,IAET;AAAA,IACA,sBAAsB,eAAe;;AACnC,UAAI,CAAC,yBAAyB,EAAC,+CAAe,wBAAuB;AACnE,cAAM,IAAI;AAAA,UACR;AAAA,QAAA;AAAA,MAEJ;AAEM,YAAA,oBAAmB,oDAAe,gBAAf,YAA8B;AAEhD,aAAA;AAAA,QAEL,gBACE,qBAAqB,YACjB,wBACA;AAAA,QACN,iBAAiB;AAAA,QACjB,wBAAwB;AAAA,QACxB,iBAAiB;AAAA,QACjB,sCACE,0DAAe,0BAAf,YAAwC,0BAAxC,YAAiE;AAAA,MAAA;AAAA,IAEvE;AAAA,EAAA;AAEJ;"}