@shopify/hydrogen-react 2024.10.0 → 2024.10.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/browser-dev/AddToCartButton.mjs.map +1 -1
- package/dist/browser-dev/BuyNowButton.mjs.map +1 -1
- package/dist/browser-dev/CartCost.mjs.map +1 -1
- package/dist/browser-dev/CartProvider.mjs.map +1 -1
- package/dist/browser-dev/ExternalVideo.mjs.map +1 -1
- package/dist/browser-dev/ProductPrice.mjs.map +1 -1
- package/dist/browser-dev/RichText.mjs.map +1 -1
- package/dist/browser-dev/ShopifyProvider.mjs +19 -1
- package/dist/browser-dev/ShopifyProvider.mjs.map +1 -1
- package/dist/browser-dev/analytics.mjs +4 -5
- package/dist/browser-dev/analytics.mjs.map +1 -1
- package/dist/browser-dev/cart-hooks.mjs +25 -7
- package/dist/browser-dev/cart-hooks.mjs.map +1 -1
- package/dist/browser-dev/cookies-utils.mjs +4 -4
- package/dist/browser-dev/cookies-utils.mjs.map +1 -1
- package/dist/browser-dev/getProductOptions.mjs +239 -0
- package/dist/browser-dev/getProductOptions.mjs.map +1 -0
- package/dist/browser-dev/index.mjs +10 -0
- package/dist/browser-dev/index.mjs.map +1 -1
- package/dist/browser-dev/packages/hydrogen-react/package.json.mjs +1 -1
- package/dist/browser-dev/tracking-utils.mjs +92 -0
- package/dist/browser-dev/tracking-utils.mjs.map +1 -0
- package/dist/browser-dev/useSelectedOptionInUrlParam.mjs +30 -0
- package/dist/browser-dev/useSelectedOptionInUrlParam.mjs.map +1 -0
- package/dist/browser-dev/useShopifyCookies.mjs +98 -9
- package/dist/browser-dev/useShopifyCookies.mjs.map +1 -1
- package/dist/browser-prod/AddToCartButton.mjs.map +1 -1
- package/dist/browser-prod/BuyNowButton.mjs.map +1 -1
- package/dist/browser-prod/CartCost.mjs.map +1 -1
- package/dist/browser-prod/CartProvider.mjs.map +1 -1
- package/dist/browser-prod/ExternalVideo.mjs.map +1 -1
- package/dist/browser-prod/ProductPrice.mjs.map +1 -1
- package/dist/browser-prod/RichText.mjs.map +1 -1
- package/dist/browser-prod/ShopifyProvider.mjs +19 -1
- package/dist/browser-prod/ShopifyProvider.mjs.map +1 -1
- package/dist/browser-prod/analytics.mjs +4 -5
- package/dist/browser-prod/analytics.mjs.map +1 -1
- package/dist/browser-prod/cart-hooks.mjs +25 -7
- package/dist/browser-prod/cart-hooks.mjs.map +1 -1
- package/dist/browser-prod/cookies-utils.mjs +4 -4
- package/dist/browser-prod/cookies-utils.mjs.map +1 -1
- package/dist/browser-prod/getProductOptions.mjs +239 -0
- package/dist/browser-prod/getProductOptions.mjs.map +1 -0
- package/dist/browser-prod/index.mjs +10 -0
- package/dist/browser-prod/index.mjs.map +1 -1
- package/dist/browser-prod/packages/hydrogen-react/package.json.mjs +1 -1
- package/dist/browser-prod/tracking-utils.mjs +92 -0
- package/dist/browser-prod/tracking-utils.mjs.map +1 -0
- package/dist/browser-prod/useSelectedOptionInUrlParam.mjs +30 -0
- package/dist/browser-prod/useSelectedOptionInUrlParam.mjs.map +1 -0
- package/dist/browser-prod/useShopifyCookies.mjs +98 -9
- package/dist/browser-prod/useShopifyCookies.mjs.map +1 -1
- package/dist/node-dev/AddToCartButton.js.map +1 -1
- package/dist/node-dev/AddToCartButton.mjs.map +1 -1
- package/dist/node-dev/BuyNowButton.js.map +1 -1
- package/dist/node-dev/BuyNowButton.mjs.map +1 -1
- package/dist/node-dev/CartCost.js.map +1 -1
- package/dist/node-dev/CartCost.mjs.map +1 -1
- package/dist/node-dev/CartProvider.js.map +1 -1
- package/dist/node-dev/CartProvider.mjs.map +1 -1
- package/dist/node-dev/ExternalVideo.js.map +1 -1
- package/dist/node-dev/ExternalVideo.mjs.map +1 -1
- package/dist/node-dev/ProductPrice.js.map +1 -1
- package/dist/node-dev/ProductPrice.mjs.map +1 -1
- package/dist/node-dev/RichText.js.map +1 -1
- package/dist/node-dev/RichText.mjs.map +1 -1
- package/dist/node-dev/ShopifyProvider.js +19 -1
- package/dist/node-dev/ShopifyProvider.js.map +1 -1
- package/dist/node-dev/ShopifyProvider.mjs +19 -1
- package/dist/node-dev/ShopifyProvider.mjs.map +1 -1
- package/dist/node-dev/analytics.js +4 -5
- package/dist/node-dev/analytics.js.map +1 -1
- package/dist/node-dev/analytics.mjs +4 -5
- package/dist/node-dev/analytics.mjs.map +1 -1
- package/dist/node-dev/cart-hooks.js +24 -6
- package/dist/node-dev/cart-hooks.js.map +1 -1
- package/dist/node-dev/cart-hooks.mjs +25 -7
- package/dist/node-dev/cart-hooks.mjs.map +1 -1
- package/dist/node-dev/cookies-utils.js +4 -4
- package/dist/node-dev/cookies-utils.js.map +1 -1
- package/dist/node-dev/cookies-utils.mjs +4 -4
- package/dist/node-dev/cookies-utils.mjs.map +1 -1
- package/dist/node-dev/getProductOptions.js +239 -0
- package/dist/node-dev/getProductOptions.js.map +1 -0
- package/dist/node-dev/getProductOptions.mjs +239 -0
- package/dist/node-dev/getProductOptions.mjs.map +1 -0
- package/dist/node-dev/index.js +10 -0
- package/dist/node-dev/index.js.map +1 -1
- package/dist/node-dev/index.mjs +10 -0
- package/dist/node-dev/index.mjs.map +1 -1
- package/dist/node-dev/packages/hydrogen-react/package.json.js +1 -1
- package/dist/node-dev/packages/hydrogen-react/package.json.mjs +1 -1
- package/dist/node-dev/tracking-utils.js +92 -0
- package/dist/node-dev/tracking-utils.js.map +1 -0
- package/dist/node-dev/tracking-utils.mjs +92 -0
- package/dist/node-dev/tracking-utils.mjs.map +1 -0
- package/dist/node-dev/useSelectedOptionInUrlParam.js +30 -0
- package/dist/node-dev/useSelectedOptionInUrlParam.js.map +1 -0
- package/dist/node-dev/useSelectedOptionInUrlParam.mjs +30 -0
- package/dist/node-dev/useSelectedOptionInUrlParam.mjs.map +1 -0
- package/dist/node-dev/useShopifyCookies.js +96 -7
- package/dist/node-dev/useShopifyCookies.js.map +1 -1
- package/dist/node-dev/useShopifyCookies.mjs +98 -9
- package/dist/node-dev/useShopifyCookies.mjs.map +1 -1
- package/dist/node-prod/AddToCartButton.js.map +1 -1
- package/dist/node-prod/AddToCartButton.mjs.map +1 -1
- package/dist/node-prod/BuyNowButton.js.map +1 -1
- package/dist/node-prod/BuyNowButton.mjs.map +1 -1
- package/dist/node-prod/CartCost.js.map +1 -1
- package/dist/node-prod/CartCost.mjs.map +1 -1
- package/dist/node-prod/CartProvider.js.map +1 -1
- package/dist/node-prod/CartProvider.mjs.map +1 -1
- package/dist/node-prod/ExternalVideo.js.map +1 -1
- package/dist/node-prod/ExternalVideo.mjs.map +1 -1
- package/dist/node-prod/ProductPrice.js.map +1 -1
- package/dist/node-prod/ProductPrice.mjs.map +1 -1
- package/dist/node-prod/RichText.js.map +1 -1
- package/dist/node-prod/RichText.mjs.map +1 -1
- package/dist/node-prod/ShopifyProvider.js +19 -1
- package/dist/node-prod/ShopifyProvider.js.map +1 -1
- package/dist/node-prod/ShopifyProvider.mjs +19 -1
- package/dist/node-prod/ShopifyProvider.mjs.map +1 -1
- package/dist/node-prod/analytics.js +4 -5
- package/dist/node-prod/analytics.js.map +1 -1
- package/dist/node-prod/analytics.mjs +4 -5
- package/dist/node-prod/analytics.mjs.map +1 -1
- package/dist/node-prod/cart-hooks.js +24 -6
- package/dist/node-prod/cart-hooks.js.map +1 -1
- package/dist/node-prod/cart-hooks.mjs +25 -7
- package/dist/node-prod/cart-hooks.mjs.map +1 -1
- package/dist/node-prod/cookies-utils.js +4 -4
- package/dist/node-prod/cookies-utils.js.map +1 -1
- package/dist/node-prod/cookies-utils.mjs +4 -4
- package/dist/node-prod/cookies-utils.mjs.map +1 -1
- package/dist/node-prod/getProductOptions.js +239 -0
- package/dist/node-prod/getProductOptions.js.map +1 -0
- package/dist/node-prod/getProductOptions.mjs +239 -0
- package/dist/node-prod/getProductOptions.mjs.map +1 -0
- package/dist/node-prod/index.js +10 -0
- package/dist/node-prod/index.js.map +1 -1
- package/dist/node-prod/index.mjs +10 -0
- package/dist/node-prod/index.mjs.map +1 -1
- package/dist/node-prod/packages/hydrogen-react/package.json.js +1 -1
- package/dist/node-prod/packages/hydrogen-react/package.json.mjs +1 -1
- package/dist/node-prod/tracking-utils.js +92 -0
- package/dist/node-prod/tracking-utils.js.map +1 -0
- package/dist/node-prod/tracking-utils.mjs +92 -0
- package/dist/node-prod/tracking-utils.mjs.map +1 -0
- package/dist/node-prod/useSelectedOptionInUrlParam.js +30 -0
- package/dist/node-prod/useSelectedOptionInUrlParam.js.map +1 -0
- package/dist/node-prod/useSelectedOptionInUrlParam.mjs +30 -0
- package/dist/node-prod/useSelectedOptionInUrlParam.mjs.map +1 -0
- package/dist/node-prod/useShopifyCookies.js +96 -7
- package/dist/node-prod/useShopifyCookies.js.map +1 -1
- package/dist/node-prod/useShopifyCookies.mjs +98 -9
- package/dist/node-prod/useShopifyCookies.mjs.map +1 -1
- package/dist/types/CartProvider.d.ts +4 -3
- package/dist/types/ShopifyProvider.d.ts +5 -0
- package/dist/types/cookies-utils.d.ts +4 -0
- package/dist/types/getProductOptions.d.ts +49 -0
- package/dist/types/index.d.cts +3 -0
- package/dist/types/index.d.ts +3 -0
- package/dist/types/storefront-api-response.types.d.ts +5 -5
- package/dist/types/tracking-utils.d.ts +22 -0
- package/dist/types/useSelectedOptionInUrlParam.d.ts +2 -0
- package/dist/types/useShopifyCookies.d.ts +28 -2
- package/dist/umd/hydrogen-react.dev.js +623 -175
- package/dist/umd/hydrogen-react.dev.js.map +1 -1
- package/dist/umd/hydrogen-react.prod.js +18 -18
- package/dist/umd/hydrogen-react.prod.js.map +1 -1
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExternalVideo.mjs","sources":["../../src/ExternalVideo.tsx"],"sourcesContent":["import type {ExternalVideo as ExternalVideoType} from './storefront-api-types.js';\nimport type {Entries, PartialDeep} from 'type-fest';\nimport {forwardRef, IframeHTMLAttributes} from 'react';\n\nexport interface ExternalVideoBaseProps {\n /**\n * An object with fields that correspond to the Storefront API's [ExternalVideo object](https://shopify.dev/api/storefront/reference/products/externalvideo).\n */\n data: PartialDeep<ExternalVideoType, {recurseIntoArrays: true}>;\n /** An object containing the options available for either\n * [YouTube](https://developers.google.com/youtube/player_parameters#Parameters) or\n * [Vimeo](https://vimeo.zendesk.com/hc/en-us/articles/360001494447-Using-Player-Parameters).\n */\n options?: YouTube | Vimeo;\n}\n\nexport type ExternalVideoProps = Omit<\n IframeHTMLAttributes<HTMLIFrameElement>,\n 'src'\n> &\n ExternalVideoBaseProps;\n\n/**\n * The `ExternalVideo` component renders an embedded video for the Storefront\n * API's [ExternalVideo object](https://shopify.dev/api/storefront/reference/products/externalvideo).\n */\
|
|
1
|
+
{"version":3,"file":"ExternalVideo.mjs","sources":["../../src/ExternalVideo.tsx"],"sourcesContent":["import type {ExternalVideo as ExternalVideoType} from './storefront-api-types.js';\nimport type {Entries, PartialDeep} from 'type-fest';\nimport {forwardRef, IframeHTMLAttributes} from 'react';\n\nexport interface ExternalVideoBaseProps {\n /**\n * An object with fields that correspond to the Storefront API's [ExternalVideo object](https://shopify.dev/api/storefront/reference/products/externalvideo).\n */\n data: PartialDeep<ExternalVideoType, {recurseIntoArrays: true}>;\n /** An object containing the options available for either\n * [YouTube](https://developers.google.com/youtube/player_parameters#Parameters) or\n * [Vimeo](https://vimeo.zendesk.com/hc/en-us/articles/360001494447-Using-Player-Parameters).\n */\n options?: YouTube | Vimeo;\n}\n\nexport type ExternalVideoProps = Omit<\n IframeHTMLAttributes<HTMLIFrameElement>,\n 'src'\n> &\n ExternalVideoBaseProps;\n\n/**\n * The `ExternalVideo` component renders an embedded video for the Storefront\n * API's [ExternalVideo object](https://shopify.dev/api/storefront/reference/products/externalvideo).\n */\nexport const ExternalVideo = forwardRef<HTMLIFrameElement, ExternalVideoProps>(\n (props, ref): JSX.Element => {\n const {\n data,\n options,\n id = data.id,\n frameBorder = '0',\n allow = 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture',\n allowFullScreen = true,\n loading = 'lazy',\n ...passthroughProps\n } = props;\n\n if (!data.embedUrl) {\n throw new Error(`<ExternalVideo/> requires the 'embedUrl' property`);\n }\n\n let finalUrl: string = data.embedUrl;\n\n if (options) {\n const urlObject = new URL(data.embedUrl);\n for (const [key, value] of Object.entries(options) as Entries<\n typeof options\n >) {\n if (typeof value === 'undefined') {\n continue;\n }\n\n urlObject.searchParams.set(key, value.toString());\n }\n finalUrl = urlObject.toString();\n }\n\n return (\n <iframe\n {...passthroughProps}\n id={id ?? data.embedUrl}\n title={data.alt ?? data.id ?? 'external video'}\n frameBorder={frameBorder}\n allow={allow}\n allowFullScreen={allowFullScreen}\n src={finalUrl}\n loading={loading}\n ref={ref}\n ></iframe>\n );\n },\n);\n\ninterface YouTube {\n autoplay?: 0 | 1;\n cc_lang_pref?: string;\n cc_load_policy?: 1;\n color?: 'red' | 'white';\n controls?: 0 | 1;\n disablekb?: 0 | 1;\n enablejsapi?: 0 | 1;\n end?: number;\n fs?: 0 | 1;\n hl?: string;\n iv_load_policy?: 1 | 3;\n list?: string;\n list_type?: 'playlist' | 'user_uploads';\n loop?: 0 | 1;\n modest_branding?: 1;\n origin?: string;\n playlist?: string;\n plays_inline?: 0 | 1;\n rel?: 0 | 1;\n start?: number;\n widget_referrer?: string;\n}\n\ntype VimeoBoolean = 0 | 1 | boolean;\n\ninterface Vimeo {\n autopause?: VimeoBoolean;\n autoplay?: VimeoBoolean;\n background?: VimeoBoolean;\n byline?: VimeoBoolean;\n color?: string;\n controls?: VimeoBoolean;\n dnt?: VimeoBoolean;\n loop?: VimeoBoolean;\n muted?: VimeoBoolean;\n pip?: VimeoBoolean;\n playsinline?: VimeoBoolean;\n portrait?: VimeoBoolean;\n quality?: '240p' | '360p' | '540p' | '720p' | '1080p' | '2k' | '4k';\n speed?: VimeoBoolean;\n '#t'?: string;\n texttrack?: string;\n title?: VimeoBoolean;\n transparent?: VimeoBoolean;\n}\n"],"names":[],"mappings":";;AA0BO,MAAM,gBAAgB;AAAA,EAC3B,CAAC,OAAO,QAAqB;AACrB,UAAA;AAAA,MACJ;AAAA,MACA;AAAA,MACA,KAAK,KAAK;AAAA,MACV,cAAc;AAAA,MACd,QAAQ;AAAA,MACR,kBAAkB;AAAA,MAClB,UAAU;AAAA,MACV,GAAG;AAAA,IACD,IAAA;AAEA,QAAA,CAAC,KAAK,UAAU;AACZ,YAAA,IAAI,MAAM,mDAAmD;AAAA,IACrE;AAEA,QAAI,WAAmB,KAAK;AAE5B,QAAI,SAAS;AACX,YAAM,YAAY,IAAI,IAAI,KAAK,QAAQ;AACvC,iBAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,OAAO,GAE9C;AACG,YAAA,OAAO,UAAU,aAAa;AAChC;AAAA,QACF;AAEA,kBAAU,aAAa,IAAI,KAAK,MAAM,UAAU;AAAA,MAClD;AACA,iBAAW,UAAU;IACvB;AAGE,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ,IAAI,MAAM,KAAK;AAAA,QACf,OAAO,KAAK,OAAO,KAAK,MAAM;AAAA,QAC9B;AAAA,QACA;AAAA,QACA;AAAA,QACA,KAAK;AAAA,QACL;AAAA,QACA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProductPrice.js","sources":["../../src/ProductPrice.tsx"],"sourcesContent":["import type {\n MoneyV2,\n UnitPriceMeasurement,\n Product,\n} from './storefront-api-types.js';\nimport {Money, type MoneyProps, type MoneyPropsBase} from './Money.js';\nimport type {PartialDeep} from 'type-fest';\nimport {flattenConnection} from './flatten-connection.js';\n\nexport interface ProductPriceProps {\n /** A Storefront API [Product object](https://shopify.dev/api/storefront/reference/products/product). */\n data: PartialDeep<Product, {recurseIntoArrays: true}>;\n /** The type of price. Valid values: `regular` (default) or `compareAt`. */\n priceType?: 'regular' | 'compareAt';\n /** The type of value. Valid values: `min` (default), `max` or `unit`. */\n valueType?: 'max' | 'min' | 'unit';\n /** The ID of the variant. */\n variantId?: string;\n}\n\n/**\n * The `ProductPrice` component renders a `Money` component with the product\n * [`priceRange`](https://shopify.dev/api/storefront/reference/products/productpricerange)'s `maxVariantPrice` or `minVariantPrice`, for either the regular price or compare at price range.\n */\nexport function ProductPrice<\n ComponentGeneric extends React.ElementType = 'div',\n>(\n props: ProductPriceProps &\n Omit<MoneyProps<ComponentGeneric>, 'data' | 'measurement'>,\n): JSX.Element | null {\n const {\n priceType = 'regular',\n variantId,\n valueType = 'min',\n data: product,\n ...passthroughProps\n } = props;\n\n if (product == null) {\n throw new Error(`<ProductPrice/> requires a product as the 'data' prop`);\n }\n\n let price: Partial<MoneyV2> | undefined | null;\n let measurement: Partial<UnitPriceMeasurement> | undefined | null;\n\n const variant = variantId\n ? flattenConnection(product?.variants ?? {}).find(\n (variant) => variant?.id === variantId,\n ) ?? null\n : null;\n\n const variantPriceProperty =\n valueType === 'max' ? 'maxVariantPrice' : 'minVariantPrice';\n\n if (priceType === 'compareAt') {\n if (variantId && variant) {\n price = variant.compareAtPrice;\n } else {\n price = product?.compareAtPriceRange?.[variantPriceProperty];\n }\n\n let priceAsNumber: number;\n if (variantId && variant) {\n priceAsNumber = parseFloat(variant.price?.amount ?? '0');\n } else {\n priceAsNumber = parseFloat(\n product?.priceRange?.[variantPriceProperty]?.amount ?? '0',\n );\n }\n\n const compareAtPriceAsNumber = parseFloat(price?.amount ?? '0');\n\n if (priceAsNumber >= compareAtPriceAsNumber) {\n return null;\n }\n } else {\n if (variantId && variant) {\n price = variant.price;\n if (valueType === 'unit') {\n price = variant.unitPrice;\n measurement = variant.unitPriceMeasurement;\n }\n } else if (valueType === 'max') {\n price = product.priceRange?.maxVariantPrice;\n } else {\n price = product.priceRange?.minVariantPrice;\n }\n }\n\n if (!price) {\n return null;\n }\n\n if (measurement) {\n return (\n <Money {...passthroughProps} data={price} measurement={measurement} />\n );\n }\n\n return <Money {...passthroughProps} data={price} />;\n}\n\n// This is only for
|
|
1
|
+
{"version":3,"file":"ProductPrice.js","sources":["../../src/ProductPrice.tsx"],"sourcesContent":["import type {\n MoneyV2,\n UnitPriceMeasurement,\n Product,\n} from './storefront-api-types.js';\nimport {Money, type MoneyProps, type MoneyPropsBase} from './Money.js';\nimport type {PartialDeep} from 'type-fest';\nimport {flattenConnection} from './flatten-connection.js';\n\nexport interface ProductPriceProps {\n /** A Storefront API [Product object](https://shopify.dev/api/storefront/reference/products/product). */\n data: PartialDeep<Product, {recurseIntoArrays: true}>;\n /** The type of price. Valid values: `regular` (default) or `compareAt`. */\n priceType?: 'regular' | 'compareAt';\n /** The type of value. Valid values: `min` (default), `max` or `unit`. */\n valueType?: 'max' | 'min' | 'unit';\n /** The ID of the variant. */\n variantId?: string;\n}\n\n/**\n * The `ProductPrice` component renders a `Money` component with the product\n * [`priceRange`](https://shopify.dev/api/storefront/reference/products/productpricerange)'s `maxVariantPrice` or `minVariantPrice`, for either the regular price or compare at price range.\n */\nexport function ProductPrice<\n ComponentGeneric extends React.ElementType = 'div',\n>(\n props: ProductPriceProps &\n Omit<MoneyProps<ComponentGeneric>, 'data' | 'measurement'>,\n): JSX.Element | null {\n const {\n priceType = 'regular',\n variantId,\n valueType = 'min',\n data: product,\n ...passthroughProps\n } = props;\n\n if (product == null) {\n throw new Error(`<ProductPrice/> requires a product as the 'data' prop`);\n }\n\n let price: Partial<MoneyV2> | undefined | null;\n let measurement: Partial<UnitPriceMeasurement> | undefined | null;\n\n const variant = variantId\n ? flattenConnection(product?.variants ?? {}).find(\n (variant) => variant?.id === variantId,\n ) ?? null\n : null;\n\n const variantPriceProperty =\n valueType === 'max' ? 'maxVariantPrice' : 'minVariantPrice';\n\n if (priceType === 'compareAt') {\n if (variantId && variant) {\n price = variant.compareAtPrice;\n } else {\n price = product?.compareAtPriceRange?.[variantPriceProperty];\n }\n\n let priceAsNumber: number;\n if (variantId && variant) {\n priceAsNumber = parseFloat(variant.price?.amount ?? '0');\n } else {\n priceAsNumber = parseFloat(\n product?.priceRange?.[variantPriceProperty]?.amount ?? '0',\n );\n }\n\n const compareAtPriceAsNumber = parseFloat(price?.amount ?? '0');\n\n if (priceAsNumber >= compareAtPriceAsNumber) {\n return null;\n }\n } else {\n if (variantId && variant) {\n price = variant.price;\n if (valueType === 'unit') {\n price = variant.unitPrice;\n measurement = variant.unitPriceMeasurement;\n }\n } else if (valueType === 'max') {\n price = product.priceRange?.maxVariantPrice;\n } else {\n price = product.priceRange?.minVariantPrice;\n }\n }\n\n if (!price) {\n return null;\n }\n\n if (measurement) {\n return (\n <Money {...passthroughProps} data={price} measurement={measurement} />\n );\n }\n\n return <Money {...passthroughProps} data={price} />;\n}\n\n// This is only for documentation purposes, and it is not used in the code.\nexport interface ProductPricePropsForDocs<\n AsType extends React.ElementType = 'div',\n> extends Omit<MoneyPropsBase<AsType>, 'data' | 'measurement'>,\n ProductPriceProps {}\n"],"names":["flattenConnection","variant","Money","jsx"],"mappings":";;;;;AAwBO,SAAS,aAGd,OAEoB;;AACd,QAAA;AAAA,IACJ,YAAY;AAAA,IACZ;AAAA,IACA,YAAY;AAAA,IACZ,MAAM;AAAA,IACN,GAAG;AAAA,EACD,IAAA;AAEJ,MAAI,WAAW,MAAM;AACb,UAAA,IAAI,MAAM,uDAAuD;AAAA,EACzE;AAEI,MAAA;AACA,MAAA;AAEJ,QAAM,UAAU,YACZA,kBAAA,mBAAkB,mCAAS,aAAY,CAAE,CAAA,EAAE;AAAA,IACzC,CAACC,cAAYA,qCAAS,QAAO;AAAA,EAAA,KAC1B,OACL;AAEE,QAAA,uBACJ,cAAc,QAAQ,oBAAoB;AAE5C,MAAI,cAAc,aAAa;AAC7B,QAAI,aAAa,SAAS;AACxB,cAAQ,QAAQ;AAAA,IAAA,OACX;AACG,eAAA,wCAAS,wBAAT,mBAA+B;AAAA,IACzC;AAEI,QAAA;AACJ,QAAI,aAAa,SAAS;AACxB,sBAAgB,aAAW,aAAQ,UAAR,mBAAe,WAAU,GAAG;AAAA,IAAA,OAClD;AACW,sBAAA;AAAA,UACd,8CAAS,eAAT,mBAAsB,0BAAtB,mBAA6C,WAAU;AAAA,MAAA;AAAA,IAE3D;AAEA,UAAM,yBAAyB,YAAW,+BAAO,WAAU,GAAG;AAE9D,QAAI,iBAAiB,wBAAwB;AACpC,aAAA;AAAA,IACT;AAAA,EAAA,OACK;AACL,QAAI,aAAa,SAAS;AACxB,cAAQ,QAAQ;AAChB,UAAI,cAAc,QAAQ;AACxB,gBAAQ,QAAQ;AAChB,sBAAc,QAAQ;AAAA,MACxB;AAAA,IAAA,WACS,cAAc,OAAO;AAC9B,eAAQ,aAAQ,eAAR,mBAAoB;AAAA,IAAA,OACvB;AACL,eAAQ,aAAQ,eAAR,mBAAoB;AAAA,IAC9B;AAAA,EACF;AAEA,MAAI,CAAC,OAAO;AACH,WAAA;AAAA,EACT;AAEA,MAAI,aAAa;AACf,0CACGC,MAAO,OAAA,EAAA,GAAG,kBAAkB,MAAM,OAAO,YAA0B,CAAA;AAAA,EAExE;AAEA,SAAQC,2BAAAA,IAAAD,MAAAA,OAAA,EAAO,GAAG,kBAAkB,MAAM,MAAO,CAAA;AACnD;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProductPrice.mjs","sources":["../../src/ProductPrice.tsx"],"sourcesContent":["import type {\n MoneyV2,\n UnitPriceMeasurement,\n Product,\n} from './storefront-api-types.js';\nimport {Money, type MoneyProps, type MoneyPropsBase} from './Money.js';\nimport type {PartialDeep} from 'type-fest';\nimport {flattenConnection} from './flatten-connection.js';\n\nexport interface ProductPriceProps {\n /** A Storefront API [Product object](https://shopify.dev/api/storefront/reference/products/product). */\n data: PartialDeep<Product, {recurseIntoArrays: true}>;\n /** The type of price. Valid values: `regular` (default) or `compareAt`. */\n priceType?: 'regular' | 'compareAt';\n /** The type of value. Valid values: `min` (default), `max` or `unit`. */\n valueType?: 'max' | 'min' | 'unit';\n /** The ID of the variant. */\n variantId?: string;\n}\n\n/**\n * The `ProductPrice` component renders a `Money` component with the product\n * [`priceRange`](https://shopify.dev/api/storefront/reference/products/productpricerange)'s `maxVariantPrice` or `minVariantPrice`, for either the regular price or compare at price range.\n */\nexport function ProductPrice<\n ComponentGeneric extends React.ElementType = 'div',\n>(\n props: ProductPriceProps &\n Omit<MoneyProps<ComponentGeneric>, 'data' | 'measurement'>,\n): JSX.Element | null {\n const {\n priceType = 'regular',\n variantId,\n valueType = 'min',\n data: product,\n ...passthroughProps\n } = props;\n\n if (product == null) {\n throw new Error(`<ProductPrice/> requires a product as the 'data' prop`);\n }\n\n let price: Partial<MoneyV2> | undefined | null;\n let measurement: Partial<UnitPriceMeasurement> | undefined | null;\n\n const variant = variantId\n ? flattenConnection(product?.variants ?? {}).find(\n (variant) => variant?.id === variantId,\n ) ?? null\n : null;\n\n const variantPriceProperty =\n valueType === 'max' ? 'maxVariantPrice' : 'minVariantPrice';\n\n if (priceType === 'compareAt') {\n if (variantId && variant) {\n price = variant.compareAtPrice;\n } else {\n price = product?.compareAtPriceRange?.[variantPriceProperty];\n }\n\n let priceAsNumber: number;\n if (variantId && variant) {\n priceAsNumber = parseFloat(variant.price?.amount ?? '0');\n } else {\n priceAsNumber = parseFloat(\n product?.priceRange?.[variantPriceProperty]?.amount ?? '0',\n );\n }\n\n const compareAtPriceAsNumber = parseFloat(price?.amount ?? '0');\n\n if (priceAsNumber >= compareAtPriceAsNumber) {\n return null;\n }\n } else {\n if (variantId && variant) {\n price = variant.price;\n if (valueType === 'unit') {\n price = variant.unitPrice;\n measurement = variant.unitPriceMeasurement;\n }\n } else if (valueType === 'max') {\n price = product.priceRange?.maxVariantPrice;\n } else {\n price = product.priceRange?.minVariantPrice;\n }\n }\n\n if (!price) {\n return null;\n }\n\n if (measurement) {\n return (\n <Money {...passthroughProps} data={price} measurement={measurement} />\n );\n }\n\n return <Money {...passthroughProps} data={price} />;\n}\n\n// This is only for
|
|
1
|
+
{"version":3,"file":"ProductPrice.mjs","sources":["../../src/ProductPrice.tsx"],"sourcesContent":["import type {\n MoneyV2,\n UnitPriceMeasurement,\n Product,\n} from './storefront-api-types.js';\nimport {Money, type MoneyProps, type MoneyPropsBase} from './Money.js';\nimport type {PartialDeep} from 'type-fest';\nimport {flattenConnection} from './flatten-connection.js';\n\nexport interface ProductPriceProps {\n /** A Storefront API [Product object](https://shopify.dev/api/storefront/reference/products/product). */\n data: PartialDeep<Product, {recurseIntoArrays: true}>;\n /** The type of price. Valid values: `regular` (default) or `compareAt`. */\n priceType?: 'regular' | 'compareAt';\n /** The type of value. Valid values: `min` (default), `max` or `unit`. */\n valueType?: 'max' | 'min' | 'unit';\n /** The ID of the variant. */\n variantId?: string;\n}\n\n/**\n * The `ProductPrice` component renders a `Money` component with the product\n * [`priceRange`](https://shopify.dev/api/storefront/reference/products/productpricerange)'s `maxVariantPrice` or `minVariantPrice`, for either the regular price or compare at price range.\n */\nexport function ProductPrice<\n ComponentGeneric extends React.ElementType = 'div',\n>(\n props: ProductPriceProps &\n Omit<MoneyProps<ComponentGeneric>, 'data' | 'measurement'>,\n): JSX.Element | null {\n const {\n priceType = 'regular',\n variantId,\n valueType = 'min',\n data: product,\n ...passthroughProps\n } = props;\n\n if (product == null) {\n throw new Error(`<ProductPrice/> requires a product as the 'data' prop`);\n }\n\n let price: Partial<MoneyV2> | undefined | null;\n let measurement: Partial<UnitPriceMeasurement> | undefined | null;\n\n const variant = variantId\n ? flattenConnection(product?.variants ?? {}).find(\n (variant) => variant?.id === variantId,\n ) ?? null\n : null;\n\n const variantPriceProperty =\n valueType === 'max' ? 'maxVariantPrice' : 'minVariantPrice';\n\n if (priceType === 'compareAt') {\n if (variantId && variant) {\n price = variant.compareAtPrice;\n } else {\n price = product?.compareAtPriceRange?.[variantPriceProperty];\n }\n\n let priceAsNumber: number;\n if (variantId && variant) {\n priceAsNumber = parseFloat(variant.price?.amount ?? '0');\n } else {\n priceAsNumber = parseFloat(\n product?.priceRange?.[variantPriceProperty]?.amount ?? '0',\n );\n }\n\n const compareAtPriceAsNumber = parseFloat(price?.amount ?? '0');\n\n if (priceAsNumber >= compareAtPriceAsNumber) {\n return null;\n }\n } else {\n if (variantId && variant) {\n price = variant.price;\n if (valueType === 'unit') {\n price = variant.unitPrice;\n measurement = variant.unitPriceMeasurement;\n }\n } else if (valueType === 'max') {\n price = product.priceRange?.maxVariantPrice;\n } else {\n price = product.priceRange?.minVariantPrice;\n }\n }\n\n if (!price) {\n return null;\n }\n\n if (measurement) {\n return (\n <Money {...passthroughProps} data={price} measurement={measurement} />\n );\n }\n\n return <Money {...passthroughProps} data={price} />;\n}\n\n// This is only for documentation purposes, and it is not used in the code.\nexport interface ProductPricePropsForDocs<\n AsType extends React.ElementType = 'div',\n> extends Omit<MoneyPropsBase<AsType>, 'data' | 'measurement'>,\n ProductPriceProps {}\n"],"names":["variant"],"mappings":";;;AAwBO,SAAS,aAGd,OAEoB;;AACd,QAAA;AAAA,IACJ,YAAY;AAAA,IACZ;AAAA,IACA,YAAY;AAAA,IACZ,MAAM;AAAA,IACN,GAAG;AAAA,EACD,IAAA;AAEJ,MAAI,WAAW,MAAM;AACb,UAAA,IAAI,MAAM,uDAAuD;AAAA,EACzE;AAEI,MAAA;AACA,MAAA;AAEJ,QAAM,UAAU,YACZ,mBAAkB,mCAAS,aAAY,CAAE,CAAA,EAAE;AAAA,IACzC,CAACA,cAAYA,qCAAS,QAAO;AAAA,EAAA,KAC1B,OACL;AAEE,QAAA,uBACJ,cAAc,QAAQ,oBAAoB;AAE5C,MAAI,cAAc,aAAa;AAC7B,QAAI,aAAa,SAAS;AACxB,cAAQ,QAAQ;AAAA,IAAA,OACX;AACG,eAAA,wCAAS,wBAAT,mBAA+B;AAAA,IACzC;AAEI,QAAA;AACJ,QAAI,aAAa,SAAS;AACxB,sBAAgB,aAAW,aAAQ,UAAR,mBAAe,WAAU,GAAG;AAAA,IAAA,OAClD;AACW,sBAAA;AAAA,UACd,8CAAS,eAAT,mBAAsB,0BAAtB,mBAA6C,WAAU;AAAA,MAAA;AAAA,IAE3D;AAEA,UAAM,yBAAyB,YAAW,+BAAO,WAAU,GAAG;AAE9D,QAAI,iBAAiB,wBAAwB;AACpC,aAAA;AAAA,IACT;AAAA,EAAA,OACK;AACL,QAAI,aAAa,SAAS;AACxB,cAAQ,QAAQ;AAChB,UAAI,cAAc,QAAQ;AACxB,gBAAQ,QAAQ;AAChB,sBAAc,QAAQ;AAAA,MACxB;AAAA,IAAA,WACS,cAAc,OAAO;AAC9B,eAAQ,aAAQ,eAAR,mBAAoB;AAAA,IAAA,OACvB;AACL,eAAQ,aAAQ,eAAR,mBAAoB;AAAA,IAC9B;AAAA,EACF;AAEA,MAAI,CAAC,OAAO;AACH,WAAA;AAAA,EACT;AAEA,MAAI,aAAa;AACf,+BACG,OAAO,EAAA,GAAG,kBAAkB,MAAM,OAAO,YAA0B,CAAA;AAAA,EAExE;AAEA,SAAQ,oBAAA,OAAA,EAAO,GAAG,kBAAkB,MAAM,MAAO,CAAA;AACnD;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RichText.js","sources":["../../src/RichText.tsx"],"sourcesContent":["import {createElement, Fragment, type ReactNode, useMemo} from 'react';\nimport type {RichTextASTNode} from './RichText.types.js';\nimport {\n type CustomComponents,\n RichTextComponents,\n} from './RichText.components.js';\n\nexport interface RichTextPropsBase<ComponentGeneric extends React.ElementType> {\n /** An HTML tag or React Component to be rendered as the base element wrapper. The default is `div`. */\n as?: ComponentGeneric;\n /** The JSON string that correspond to the Storefront API's [RichText format](https://shopify.dev/docs/apps/custom-data/metafields/types#rich-text-formatting). */\n data: string;\n /** Customize how rich text components are rendered */\n components?: CustomComponents;\n /** Remove rich text formatting and render plain text */\n plain?: boolean;\n}\n\nexport function RichText<ComponentGeneric extends React.ElementType = 'div'>({\n as,\n data,\n plain,\n components,\n ...passthroughProps\n}: RichTextProps<ComponentGeneric>): JSX.Element {\n try {\n const Wrapper = as ?? 'div';\n const parsedData = useMemo(\n () => JSON.parse(data) as RichTextASTNode,\n [data],\n );\n\n return (\n <Wrapper {...passthroughProps}>\n {plain\n ? richTextToString(parsedData)\n : serializeRichTextASTNode(components, parsedData)}\n </Wrapper>\n );\n } catch (e) {\n throw new Error(\n '[h2:error:RichText] Parsing error. Make sure to pass a JSON string of rich text metafield',\n {\n cause: e,\n },\n );\n }\n}\n\n// This article helps understand the typing here https://www.benmvp.com/blog/polymorphic-react-components-typescript/ Ben is the best :)\nexport type RichTextProps<ComponentGeneric extends React.ElementType> =\n RichTextPropsBase<ComponentGeneric> &\n Omit<\n React.ComponentPropsWithoutRef<ComponentGeneric>,\n keyof RichTextPropsBase<ComponentGeneric>\n >;\n\nfunction serializeRichTextASTNode(\n components: CustomComponents = {},\n node: RichTextASTNode,\n index = 0,\n): ReactNode {\n let children;\n if ('children' in node) {\n children = node.children.map((child, childIndex) =>\n serializeRichTextASTNode(components, child, childIndex),\n );\n }\n\n const Component =\n components[node.type === 'list-item' ? 'listItem' : node.type] ??\n RichTextComponents[node.type];\n\n switch (node.type) {\n case 'root':\n return createElement(\n Component as Exclude<CustomComponents['root'], undefined>,\n {\n key: index,\n node: {\n type: 'root',\n children,\n },\n },\n );\n case 'heading':\n return createElement(\n Component as Exclude<CustomComponents['heading'], undefined>,\n {\n key: index,\n node: {\n type: 'heading',\n level: node.level,\n children,\n },\n },\n );\n case 'paragraph':\n return createElement(\n Component as Exclude<CustomComponents['paragraph'], undefined>,\n {\n key: index,\n node: {\n type: 'paragraph',\n children,\n },\n },\n );\n case 'text': {\n const elements = (node.value ?? '')\n .split('\\n')\n .flatMap((value, subindex) => {\n const key = `${index}-${value}-${subindex}`;\n const textElement = createElement(\n Component as Exclude<CustomComponents['text'], undefined>,\n {\n key,\n node: {\n type: 'text',\n italic: node.italic,\n bold: node.bold,\n value,\n },\n },\n );\n\n // Add a `<br>` before each substring except the first one\n return subindex === 0\n ? textElement\n : [createElement('br', {key: `${key}-br`}), textElement];\n });\n\n return elements.length > 1\n ? createElement(Fragment, {key: index}, elements)\n : elements[0];\n }\n case 'link':\n return createElement(\n Component as Exclude<CustomComponents['link'], undefined>,\n {\n key: index,\n node: {\n type: 'link',\n url: node.url,\n title: node.title,\n target: node.target,\n children,\n },\n },\n );\n case 'list':\n return createElement(\n Component as Exclude<CustomComponents['list'], undefined>,\n {\n key: index,\n node: {\n type: 'list',\n listType: node.listType,\n children,\n },\n },\n );\n case 'list-item':\n return createElement(\n Component as Exclude<CustomComponents['listItem'], undefined>,\n {\n key: index,\n node: {\n type: 'list-item',\n children,\n },\n },\n );\n }\n}\n\nfunction richTextToString(\n node: RichTextASTNode,\n result: string[] = [],\n): string {\n switch (node.type) {\n case 'root':\n node.children.forEach((child) => richTextToString(child, result));\n break;\n case 'heading':\n case 'paragraph':\n node.children.forEach((child) => richTextToString(child, result));\n result.push(' ');\n break;\n case 'text':\n result.push(node.value || '');\n break;\n case 'link':\n node.children.forEach((child) => richTextToString(child, result));\n break;\n case 'list':\n node.children.forEach((item) => {\n if (item.children) {\n item.children.forEach((child) => richTextToString(child, result));\n }\n result.push(' ');\n });\n break;\n default:\n throw new Error(`Unknown node encountered ${node.type}`);\n }\n\n return result.join('').trim();\n}\n\n// This is only for
|
|
1
|
+
{"version":3,"file":"RichText.js","sources":["../../src/RichText.tsx"],"sourcesContent":["import {createElement, Fragment, type ReactNode, useMemo} from 'react';\nimport type {RichTextASTNode} from './RichText.types.js';\nimport {\n type CustomComponents,\n RichTextComponents,\n} from './RichText.components.js';\n\nexport interface RichTextPropsBase<ComponentGeneric extends React.ElementType> {\n /** An HTML tag or React Component to be rendered as the base element wrapper. The default is `div`. */\n as?: ComponentGeneric;\n /** The JSON string that correspond to the Storefront API's [RichText format](https://shopify.dev/docs/apps/custom-data/metafields/types#rich-text-formatting). */\n data: string;\n /** Customize how rich text components are rendered */\n components?: CustomComponents;\n /** Remove rich text formatting and render plain text */\n plain?: boolean;\n}\n\nexport function RichText<ComponentGeneric extends React.ElementType = 'div'>({\n as,\n data,\n plain,\n components,\n ...passthroughProps\n}: RichTextProps<ComponentGeneric>): JSX.Element {\n try {\n const Wrapper = as ?? 'div';\n const parsedData = useMemo(\n () => JSON.parse(data) as RichTextASTNode,\n [data],\n );\n\n return (\n <Wrapper {...passthroughProps}>\n {plain\n ? richTextToString(parsedData)\n : serializeRichTextASTNode(components, parsedData)}\n </Wrapper>\n );\n } catch (e) {\n throw new Error(\n '[h2:error:RichText] Parsing error. Make sure to pass a JSON string of rich text metafield',\n {\n cause: e,\n },\n );\n }\n}\n\n// This article helps understand the typing here https://www.benmvp.com/blog/polymorphic-react-components-typescript/ Ben is the best :)\nexport type RichTextProps<ComponentGeneric extends React.ElementType> =\n RichTextPropsBase<ComponentGeneric> &\n Omit<\n React.ComponentPropsWithoutRef<ComponentGeneric>,\n keyof RichTextPropsBase<ComponentGeneric>\n >;\n\nfunction serializeRichTextASTNode(\n components: CustomComponents = {},\n node: RichTextASTNode,\n index = 0,\n): ReactNode {\n let children;\n if ('children' in node) {\n children = node.children.map((child, childIndex) =>\n serializeRichTextASTNode(components, child, childIndex),\n );\n }\n\n const Component =\n components[node.type === 'list-item' ? 'listItem' : node.type] ??\n RichTextComponents[node.type];\n\n switch (node.type) {\n case 'root':\n return createElement(\n Component as Exclude<CustomComponents['root'], undefined>,\n {\n key: index,\n node: {\n type: 'root',\n children,\n },\n },\n );\n case 'heading':\n return createElement(\n Component as Exclude<CustomComponents['heading'], undefined>,\n {\n key: index,\n node: {\n type: 'heading',\n level: node.level,\n children,\n },\n },\n );\n case 'paragraph':\n return createElement(\n Component as Exclude<CustomComponents['paragraph'], undefined>,\n {\n key: index,\n node: {\n type: 'paragraph',\n children,\n },\n },\n );\n case 'text': {\n const elements = (node.value ?? '')\n .split('\\n')\n .flatMap((value, subindex) => {\n const key = `${index}-${value}-${subindex}`;\n const textElement = createElement(\n Component as Exclude<CustomComponents['text'], undefined>,\n {\n key,\n node: {\n type: 'text',\n italic: node.italic,\n bold: node.bold,\n value,\n },\n },\n );\n\n // Add a `<br>` before each substring except the first one\n return subindex === 0\n ? textElement\n : [createElement('br', {key: `${key}-br`}), textElement];\n });\n\n return elements.length > 1\n ? createElement(Fragment, {key: index}, elements)\n : elements[0];\n }\n case 'link':\n return createElement(\n Component as Exclude<CustomComponents['link'], undefined>,\n {\n key: index,\n node: {\n type: 'link',\n url: node.url,\n title: node.title,\n target: node.target,\n children,\n },\n },\n );\n case 'list':\n return createElement(\n Component as Exclude<CustomComponents['list'], undefined>,\n {\n key: index,\n node: {\n type: 'list',\n listType: node.listType,\n children,\n },\n },\n );\n case 'list-item':\n return createElement(\n Component as Exclude<CustomComponents['listItem'], undefined>,\n {\n key: index,\n node: {\n type: 'list-item',\n children,\n },\n },\n );\n }\n}\n\nfunction richTextToString(\n node: RichTextASTNode,\n result: string[] = [],\n): string {\n switch (node.type) {\n case 'root':\n node.children.forEach((child) => richTextToString(child, result));\n break;\n case 'heading':\n case 'paragraph':\n node.children.forEach((child) => richTextToString(child, result));\n result.push(' ');\n break;\n case 'text':\n result.push(node.value || '');\n break;\n case 'link':\n node.children.forEach((child) => richTextToString(child, result));\n break;\n case 'list':\n node.children.forEach((item) => {\n if (item.children) {\n item.children.forEach((child) => richTextToString(child, result));\n }\n result.push(' ');\n });\n break;\n default:\n throw new Error(`Unknown node encountered ${node.type}`);\n }\n\n return result.join('').trim();\n}\n\n// This is only for documentation purposes, and it is not used in the code.\nexport type RichTextPropsForDocs<AsType extends React.ElementType = 'div'> =\n RichTextPropsBase<AsType>;\n"],"names":["useMemo","jsx","RichTextComponents","createElement","Fragment"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RichText.mjs","sources":["../../src/RichText.tsx"],"sourcesContent":["import {createElement, Fragment, type ReactNode, useMemo} from 'react';\nimport type {RichTextASTNode} from './RichText.types.js';\nimport {\n type CustomComponents,\n RichTextComponents,\n} from './RichText.components.js';\n\nexport interface RichTextPropsBase<ComponentGeneric extends React.ElementType> {\n /** An HTML tag or React Component to be rendered as the base element wrapper. The default is `div`. */\n as?: ComponentGeneric;\n /** The JSON string that correspond to the Storefront API's [RichText format](https://shopify.dev/docs/apps/custom-data/metafields/types#rich-text-formatting). */\n data: string;\n /** Customize how rich text components are rendered */\n components?: CustomComponents;\n /** Remove rich text formatting and render plain text */\n plain?: boolean;\n}\n\nexport function RichText<ComponentGeneric extends React.ElementType = 'div'>({\n as,\n data,\n plain,\n components,\n ...passthroughProps\n}: RichTextProps<ComponentGeneric>): JSX.Element {\n try {\n const Wrapper = as ?? 'div';\n const parsedData = useMemo(\n () => JSON.parse(data) as RichTextASTNode,\n [data],\n );\n\n return (\n <Wrapper {...passthroughProps}>\n {plain\n ? richTextToString(parsedData)\n : serializeRichTextASTNode(components, parsedData)}\n </Wrapper>\n );\n } catch (e) {\n throw new Error(\n '[h2:error:RichText] Parsing error. Make sure to pass a JSON string of rich text metafield',\n {\n cause: e,\n },\n );\n }\n}\n\n// This article helps understand the typing here https://www.benmvp.com/blog/polymorphic-react-components-typescript/ Ben is the best :)\nexport type RichTextProps<ComponentGeneric extends React.ElementType> =\n RichTextPropsBase<ComponentGeneric> &\n Omit<\n React.ComponentPropsWithoutRef<ComponentGeneric>,\n keyof RichTextPropsBase<ComponentGeneric>\n >;\n\nfunction serializeRichTextASTNode(\n components: CustomComponents = {},\n node: RichTextASTNode,\n index = 0,\n): ReactNode {\n let children;\n if ('children' in node) {\n children = node.children.map((child, childIndex) =>\n serializeRichTextASTNode(components, child, childIndex),\n );\n }\n\n const Component =\n components[node.type === 'list-item' ? 'listItem' : node.type] ??\n RichTextComponents[node.type];\n\n switch (node.type) {\n case 'root':\n return createElement(\n Component as Exclude<CustomComponents['root'], undefined>,\n {\n key: index,\n node: {\n type: 'root',\n children,\n },\n },\n );\n case 'heading':\n return createElement(\n Component as Exclude<CustomComponents['heading'], undefined>,\n {\n key: index,\n node: {\n type: 'heading',\n level: node.level,\n children,\n },\n },\n );\n case 'paragraph':\n return createElement(\n Component as Exclude<CustomComponents['paragraph'], undefined>,\n {\n key: index,\n node: {\n type: 'paragraph',\n children,\n },\n },\n );\n case 'text': {\n const elements = (node.value ?? '')\n .split('\\n')\n .flatMap((value, subindex) => {\n const key = `${index}-${value}-${subindex}`;\n const textElement = createElement(\n Component as Exclude<CustomComponents['text'], undefined>,\n {\n key,\n node: {\n type: 'text',\n italic: node.italic,\n bold: node.bold,\n value,\n },\n },\n );\n\n // Add a `<br>` before each substring except the first one\n return subindex === 0\n ? textElement\n : [createElement('br', {key: `${key}-br`}), textElement];\n });\n\n return elements.length > 1\n ? createElement(Fragment, {key: index}, elements)\n : elements[0];\n }\n case 'link':\n return createElement(\n Component as Exclude<CustomComponents['link'], undefined>,\n {\n key: index,\n node: {\n type: 'link',\n url: node.url,\n title: node.title,\n target: node.target,\n children,\n },\n },\n );\n case 'list':\n return createElement(\n Component as Exclude<CustomComponents['list'], undefined>,\n {\n key: index,\n node: {\n type: 'list',\n listType: node.listType,\n children,\n },\n },\n );\n case 'list-item':\n return createElement(\n Component as Exclude<CustomComponents['listItem'], undefined>,\n {\n key: index,\n node: {\n type: 'list-item',\n children,\n },\n },\n );\n }\n}\n\nfunction richTextToString(\n node: RichTextASTNode,\n result: string[] = [],\n): string {\n switch (node.type) {\n case 'root':\n node.children.forEach((child) => richTextToString(child, result));\n break;\n case 'heading':\n case 'paragraph':\n node.children.forEach((child) => richTextToString(child, result));\n result.push(' ');\n break;\n case 'text':\n result.push(node.value || '');\n break;\n case 'link':\n node.children.forEach((child) => richTextToString(child, result));\n break;\n case 'list':\n node.children.forEach((item) => {\n if (item.children) {\n item.children.forEach((child) => richTextToString(child, result));\n }\n result.push(' ');\n });\n break;\n default:\n throw new Error(`Unknown node encountered ${node.type}`);\n }\n\n return result.join('').trim();\n}\n\n// This is only for
|
|
1
|
+
{"version":3,"file":"RichText.mjs","sources":["../../src/RichText.tsx"],"sourcesContent":["import {createElement, Fragment, type ReactNode, useMemo} from 'react';\nimport type {RichTextASTNode} from './RichText.types.js';\nimport {\n type CustomComponents,\n RichTextComponents,\n} from './RichText.components.js';\n\nexport interface RichTextPropsBase<ComponentGeneric extends React.ElementType> {\n /** An HTML tag or React Component to be rendered as the base element wrapper. The default is `div`. */\n as?: ComponentGeneric;\n /** The JSON string that correspond to the Storefront API's [RichText format](https://shopify.dev/docs/apps/custom-data/metafields/types#rich-text-formatting). */\n data: string;\n /** Customize how rich text components are rendered */\n components?: CustomComponents;\n /** Remove rich text formatting and render plain text */\n plain?: boolean;\n}\n\nexport function RichText<ComponentGeneric extends React.ElementType = 'div'>({\n as,\n data,\n plain,\n components,\n ...passthroughProps\n}: RichTextProps<ComponentGeneric>): JSX.Element {\n try {\n const Wrapper = as ?? 'div';\n const parsedData = useMemo(\n () => JSON.parse(data) as RichTextASTNode,\n [data],\n );\n\n return (\n <Wrapper {...passthroughProps}>\n {plain\n ? richTextToString(parsedData)\n : serializeRichTextASTNode(components, parsedData)}\n </Wrapper>\n );\n } catch (e) {\n throw new Error(\n '[h2:error:RichText] Parsing error. Make sure to pass a JSON string of rich text metafield',\n {\n cause: e,\n },\n );\n }\n}\n\n// This article helps understand the typing here https://www.benmvp.com/blog/polymorphic-react-components-typescript/ Ben is the best :)\nexport type RichTextProps<ComponentGeneric extends React.ElementType> =\n RichTextPropsBase<ComponentGeneric> &\n Omit<\n React.ComponentPropsWithoutRef<ComponentGeneric>,\n keyof RichTextPropsBase<ComponentGeneric>\n >;\n\nfunction serializeRichTextASTNode(\n components: CustomComponents = {},\n node: RichTextASTNode,\n index = 0,\n): ReactNode {\n let children;\n if ('children' in node) {\n children = node.children.map((child, childIndex) =>\n serializeRichTextASTNode(components, child, childIndex),\n );\n }\n\n const Component =\n components[node.type === 'list-item' ? 'listItem' : node.type] ??\n RichTextComponents[node.type];\n\n switch (node.type) {\n case 'root':\n return createElement(\n Component as Exclude<CustomComponents['root'], undefined>,\n {\n key: index,\n node: {\n type: 'root',\n children,\n },\n },\n );\n case 'heading':\n return createElement(\n Component as Exclude<CustomComponents['heading'], undefined>,\n {\n key: index,\n node: {\n type: 'heading',\n level: node.level,\n children,\n },\n },\n );\n case 'paragraph':\n return createElement(\n Component as Exclude<CustomComponents['paragraph'], undefined>,\n {\n key: index,\n node: {\n type: 'paragraph',\n children,\n },\n },\n );\n case 'text': {\n const elements = (node.value ?? '')\n .split('\\n')\n .flatMap((value, subindex) => {\n const key = `${index}-${value}-${subindex}`;\n const textElement = createElement(\n Component as Exclude<CustomComponents['text'], undefined>,\n {\n key,\n node: {\n type: 'text',\n italic: node.italic,\n bold: node.bold,\n value,\n },\n },\n );\n\n // Add a `<br>` before each substring except the first one\n return subindex === 0\n ? textElement\n : [createElement('br', {key: `${key}-br`}), textElement];\n });\n\n return elements.length > 1\n ? createElement(Fragment, {key: index}, elements)\n : elements[0];\n }\n case 'link':\n return createElement(\n Component as Exclude<CustomComponents['link'], undefined>,\n {\n key: index,\n node: {\n type: 'link',\n url: node.url,\n title: node.title,\n target: node.target,\n children,\n },\n },\n );\n case 'list':\n return createElement(\n Component as Exclude<CustomComponents['list'], undefined>,\n {\n key: index,\n node: {\n type: 'list',\n listType: node.listType,\n children,\n },\n },\n );\n case 'list-item':\n return createElement(\n Component as Exclude<CustomComponents['listItem'], undefined>,\n {\n key: index,\n node: {\n type: 'list-item',\n children,\n },\n },\n );\n }\n}\n\nfunction richTextToString(\n node: RichTextASTNode,\n result: string[] = [],\n): string {\n switch (node.type) {\n case 'root':\n node.children.forEach((child) => richTextToString(child, result));\n break;\n case 'heading':\n case 'paragraph':\n node.children.forEach((child) => richTextToString(child, result));\n result.push(' ');\n break;\n case 'text':\n result.push(node.value || '');\n break;\n case 'link':\n node.children.forEach((child) => richTextToString(child, result));\n break;\n case 'list':\n node.children.forEach((item) => {\n if (item.children) {\n item.children.forEach((child) => richTextToString(child, result));\n }\n result.push(' ');\n });\n break;\n default:\n throw new Error(`Unknown node encountered ${node.type}`);\n }\n\n return result.join('').trim();\n}\n\n// This is only for documentation purposes, and it is not used in the code.\nexport type RichTextPropsForDocs<AsType extends React.ElementType = 'div'> =\n RichTextPropsBase<AsType>;\n"],"names":[],"mappings":"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"}
|
|
@@ -23,6 +23,22 @@ const defaultShopifyContext = {
|
|
|
23
23
|
const ShopifyContext = React.createContext(
|
|
24
24
|
defaultShopifyContext
|
|
25
25
|
);
|
|
26
|
+
function isSfapiProxyEnabled() {
|
|
27
|
+
var _a, _b, _c;
|
|
28
|
+
if (typeof window === "undefined")
|
|
29
|
+
return false;
|
|
30
|
+
try {
|
|
31
|
+
const navigationEntry = (_b = (_a = window.performance) == null ? void 0 : _a.getEntriesByType) == null ? void 0 : _b.call(
|
|
32
|
+
_a,
|
|
33
|
+
"navigation"
|
|
34
|
+
)[0];
|
|
35
|
+
return !!((_c = navigationEntry == null ? void 0 : navigationEntry.serverTiming) == null ? void 0 : _c.some(
|
|
36
|
+
(entry) => entry.name === "_sfapi_proxy"
|
|
37
|
+
));
|
|
38
|
+
} catch (e) {
|
|
39
|
+
return false;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
26
42
|
function ShopifyProvider({
|
|
27
43
|
children,
|
|
28
44
|
...shopifyConfig
|
|
@@ -38,12 +54,14 @@ function ShopifyProvider({
|
|
|
38
54
|
);
|
|
39
55
|
}
|
|
40
56
|
const finalConfig = React.useMemo(() => {
|
|
57
|
+
const sameDomainForStorefrontApi = shopifyConfig.sameDomainForStorefrontApi ?? isSfapiProxyEnabled();
|
|
41
58
|
function getShopifyDomain(overrideProps) {
|
|
42
59
|
const domain = (overrideProps == null ? void 0 : overrideProps.storeDomain) ?? shopifyConfig.storeDomain;
|
|
43
60
|
return domain.includes("://") ? domain : `https://${domain}`;
|
|
44
61
|
}
|
|
45
62
|
return {
|
|
46
63
|
...shopifyConfig,
|
|
64
|
+
sameDomainForStorefrontApi,
|
|
47
65
|
getPublicTokenHeaders(overrideProps) {
|
|
48
66
|
return storefrontClient.getPublicTokenHeadersRaw(
|
|
49
67
|
overrideProps.contentType,
|
|
@@ -53,7 +71,7 @@ function ShopifyProvider({
|
|
|
53
71
|
},
|
|
54
72
|
getShopifyDomain,
|
|
55
73
|
getStorefrontApiUrl(overrideProps) {
|
|
56
|
-
const finalDomainUrl = getShopifyDomain({
|
|
74
|
+
const finalDomainUrl = sameDomainForStorefrontApi && typeof window !== "undefined" ? window.location.origin : getShopifyDomain({
|
|
57
75
|
storeDomain: (overrideProps == null ? void 0 : overrideProps.storeDomain) ?? shopifyConfig.storeDomain
|
|
58
76
|
});
|
|
59
77
|
return `${finalDomainUrl}${finalDomainUrl.endsWith("/") ? "" : "/"}api/${(overrideProps == null ? void 0 : overrideProps.storefrontApiVersion) ?? shopifyConfig.storefrontApiVersion}/graphql.json`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ShopifyProvider.js","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\nexport const defaultShopifyContext: ShopifyContextValue = {\n storeDomain: 'test',\n storefrontToken: 'abc123',\n storefrontApiVersion: SFAPI_VERSION,\n countryIsoCode: 'US',\n languageIsoCode: 'EN',\n getStorefrontApiUrl() {\n return '';\n },\n getPublicTokenHeaders() {\n return {};\n },\n getShopifyDomain() {\n return '';\n },\n};\n\nconst ShopifyContext = createContext<ShopifyContextValue>(\n defaultShopifyContext,\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}: ShopifyProviderProps): JSX.Element {\n if (\n !shopifyConfig.countryIsoCode ||\n !shopifyConfig.languageIsoCode ||\n !shopifyConfig.storeDomain ||\n !shopifyConfig.storefrontToken ||\n !shopifyConfig.storefrontApiVersion\n ) {\n throw new Error(\n `Please provide the necessary props to '<ShopifyProvider/>'`,\n );\n }\n\n if (shopifyConfig.storefrontApiVersion !== SFAPI_VERSION) {\n console.warn(\n `<ShopifyProvider/>: This version of Hydrogen React 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 React and the Storefront API.`,\n );\n }\n\n const finalConfig = useMemo<ShopifyContextValue>(() => {\n function getShopifyDomain(overrideProps?: {storeDomain?: string}): string {\n const domain = overrideProps?.storeDomain ?? shopifyConfig.storeDomain;\n return domain.includes('://') ? domain : `https://${domain}`;\n }\n\n return {\n ...shopifyConfig,\n getPublicTokenHeaders(overrideProps): Record<string, string> {\n return getPublicTokenHeadersRaw(\n overrideProps.contentType,\n shopifyConfig.storefrontApiVersion,\n overrideProps.storefrontToken ?? shopifyConfig.storefrontToken,\n );\n },\n getShopifyDomain,\n getStorefrontApiUrl(overrideProps): string {\n const finalDomainUrl = getShopifyDomain({\n storeDomain: overrideProps?.storeDomain ?? shopifyConfig.storeDomain,\n });\n return `${finalDomainUrl}${\n finalDomainUrl.endsWith('/') ? '' : '/'\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(): ShopifyContextValue {\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\nexport interface ShopifyProviderBase {\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 React was built for. Learn more about Shopify [API versioning](https://shopify.dev/api/usage/versioning) for more details. */\n storefrontApiVersion: string;\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 countryIsoCode: CountryCode;\n /**\n * `ISO 369` language codes supported by Shopify.\n */\n languageIsoCode: LanguageCode;\n}\n\n/**\n * Shopify-specific values that are used in various Hydrogen React components and hooks.\n */\nexport interface ShopifyProviderProps extends ShopifyProviderBase {\n /** React children to render. */\n children?: ReactNode;\n}\n\nexport interface ShopifyContextValue\n extends ShopifyProviderBase,\n ShopifyContextReturn {}\n\ntype ShopifyContextReturn = {\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?: GetStorefrontApiUrlProps) => 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: (\n props: GetPublicTokenHeadersProps,\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?: GetShopifyDomainProps) => string;\n};\n\ntype GetStorefrontApiUrlProps = {\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};\n\ntype GetPublicTokenHeadersProps = {\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};\n\ntype GetShopifyDomainProps = {storeDomain?: string};\n"],"names":["SFAPI_VERSION","createContext","useMemo","getPublicTokenHeadersRaw","useContext"],"mappings":";;;;;;AAKO,MAAM,wBAA6C;AAAA,EACxD,aAAa;AAAA,EACb,iBAAiB;AAAA,EACjB,sBAAsBA,uBAAA;AAAA,EACtB,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,sBAAsB;AACb,WAAA;AAAA,EACT;AAAA,EACA,wBAAwB;AACtB,WAAO;EACT;AAAA,EACA,mBAAmB;AACV,WAAA;AAAA,EACT;AACF;AAEA,MAAM,iBAAiBC,MAAA;AAAA,EACrB;AACF;AAKO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA,GAAG;AACL,GAAsC;AACpC,MACE,CAAC,cAAc,kBACf,CAAC,cAAc,mBACf,CAAC,cAAc,eACf,CAAC,cAAc,mBACf,CAAC,cAAc,sBACf;AACA,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAAA,EAEJ;AAEI,MAAA,cAAc,yBAAyBD,sCAAe;AAChD,YAAA;AAAA,MACN,oGAAoGA,uBAAAA,aAAa,4CAA4C,cAAc,oBAAoB;AAAA,IAAA;AAAA,EAEnM;AAEM,QAAA,cAAcE,MAAAA,QAA6B,MAAM;AACrD,aAAS,iBAAiB,eAAgD;AAClE,YAAA,UAAS,+CAAe,gBAAe,cAAc;AAC3D,aAAO,OAAO,SAAS,KAAK,IAAI,SAAS,WAAW,MAAM;AAAA,IAC5D;AAEO,WAAA;AAAA,MACL,GAAG;AAAA,MACH,sBAAsB,eAAuC;AACpD,eAAAC,iBAAA;AAAA,UACL,cAAc;AAAA,UACd,cAAc;AAAA,UACd,cAAc,mBAAmB,cAAc;AAAA,QAAA;AAAA,MAEnD;AAAA,MACA;AAAA,MACA,oBAAoB,eAAuB;AACzC,cAAM,iBAAiB,iBAAiB;AAAA,UACtC,cAAa,+CAAe,gBAAe,cAAc;AAAA,QAAA,CAC1D;AACD,eAAO,GAAG,cAAc,GACtB,eAAe,SAAS,GAAG,IAAI,KAAK,GACtC,QACE,+CAAe,yBACf,cAAc,oBAChB;AAAA,MACF;AAAA,IAAA;AAAA,EACF,GACC,CAAC,aAAa,CAAC;AAElB,wCACG,eAAe,UAAf,EAAwB,OAAO,aAC7B,SACH,CAAA;AAEJ;AAKO,SAAS,UAA+B;AACvC,QAAA,cAAcC,iBAAW,cAAc;AAC7C,MAAI,CAAC,aAAa;AACV,UAAA,IAAI,MAAM,wDAAwD;AAAA,EAC1E;AACO,SAAA;AACT;;;;"}
|
|
1
|
+
{"version":3,"file":"ShopifyProvider.js","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\nexport const defaultShopifyContext: ShopifyContextValue = {\n storeDomain: 'test',\n storefrontToken: 'abc123',\n storefrontApiVersion: SFAPI_VERSION,\n countryIsoCode: 'US',\n languageIsoCode: 'EN',\n getStorefrontApiUrl() {\n return '';\n },\n getPublicTokenHeaders() {\n return {};\n },\n getShopifyDomain() {\n return '';\n },\n};\n\nconst ShopifyContext = createContext<ShopifyContextValue>(\n defaultShopifyContext,\n);\n\n/**\n * Hydrogen server sets this server timing key when the SFAPI proxy is enabled.\n * Read it automatically in the browser for apps using frontend cart in full-stack Hydrogen,\n * but don't export this utility yet since we don't want to make this a public convention.\n */\nfunction isSfapiProxyEnabled(): boolean {\n if (typeof window === 'undefined') return false;\n\n try {\n const navigationEntry = window.performance?.getEntriesByType?.(\n 'navigation',\n )[0] as PerformanceNavigationTiming;\n\n return !!navigationEntry?.serverTiming?.some(\n (entry) => entry.name === '_sfapi_proxy',\n );\n } catch (e) {\n return false;\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}: ShopifyProviderProps): JSX.Element {\n if (\n !shopifyConfig.countryIsoCode ||\n !shopifyConfig.languageIsoCode ||\n !shopifyConfig.storeDomain ||\n !shopifyConfig.storefrontToken ||\n !shopifyConfig.storefrontApiVersion\n ) {\n throw new Error(\n `Please provide the necessary props to '<ShopifyProvider/>'`,\n );\n }\n\n if (shopifyConfig.storefrontApiVersion !== SFAPI_VERSION) {\n console.warn(\n `<ShopifyProvider/>: This version of Hydrogen React 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 React and the Storefront API.`,\n );\n }\n\n const finalConfig = useMemo<ShopifyContextValue>(() => {\n const sameDomainForStorefrontApi =\n shopifyConfig.sameDomainForStorefrontApi ?? isSfapiProxyEnabled();\n\n function getShopifyDomain(overrideProps?: {storeDomain?: string}): string {\n const domain = overrideProps?.storeDomain ?? shopifyConfig.storeDomain;\n return domain.includes('://') ? domain : `https://${domain}`;\n }\n\n return {\n ...shopifyConfig,\n sameDomainForStorefrontApi,\n getPublicTokenHeaders(overrideProps): Record<string, string> {\n return getPublicTokenHeadersRaw(\n overrideProps.contentType,\n shopifyConfig.storefrontApiVersion,\n overrideProps.storefrontToken ?? shopifyConfig.storefrontToken,\n );\n },\n getShopifyDomain,\n getStorefrontApiUrl(overrideProps): string {\n const finalDomainUrl =\n sameDomainForStorefrontApi && typeof window !== 'undefined'\n ? window.location.origin\n : getShopifyDomain({\n storeDomain:\n overrideProps?.storeDomain ?? shopifyConfig.storeDomain,\n });\n\n return `${finalDomainUrl}${\n finalDomainUrl.endsWith('/') ? '' : '/'\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(): ShopifyContextValue {\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\nexport interface ShopifyProviderBase {\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 React was built for. Learn more about Shopify [API versioning](https://shopify.dev/api/usage/versioning) for more details. */\n storefrontApiVersion: string;\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 countryIsoCode: CountryCode;\n /**\n * `ISO 369` language codes supported by Shopify.\n */\n languageIsoCode: LanguageCode;\n /**\n * Uses the current window.location.origin for Storefront API requests.\n * This requires setting up a proxy for Storefront API requests in your domain.\n */\n sameDomainForStorefrontApi?: boolean;\n}\n\n/**\n * Shopify-specific values that are used in various Hydrogen React components and hooks.\n */\nexport interface ShopifyProviderProps extends ShopifyProviderBase {\n /** React children to render. */\n children?: ReactNode;\n}\n\nexport interface ShopifyContextValue\n extends ShopifyProviderBase,\n ShopifyContextReturn {}\n\ntype ShopifyContextReturn = {\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?: GetStorefrontApiUrlProps) => 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: (\n props: GetPublicTokenHeadersProps,\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?: GetShopifyDomainProps) => string;\n};\n\ntype GetStorefrontApiUrlProps = {\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};\n\ntype GetPublicTokenHeadersProps = {\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};\n\ntype GetShopifyDomainProps = {storeDomain?: string};\n"],"names":["SFAPI_VERSION","createContext","useMemo","getPublicTokenHeadersRaw","useContext"],"mappings":";;;;;;AAKO,MAAM,wBAA6C;AAAA,EACxD,aAAa;AAAA,EACb,iBAAiB;AAAA,EACjB,sBAAsBA,uBAAA;AAAA,EACtB,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,sBAAsB;AACb,WAAA;AAAA,EACT;AAAA,EACA,wBAAwB;AACtB,WAAO;EACT;AAAA,EACA,mBAAmB;AACV,WAAA;AAAA,EACT;AACF;AAEA,MAAM,iBAAiBC,MAAA;AAAA,EACrB;AACF;AAOA,SAAS,sBAA+B;;AACtC,MAAI,OAAO,WAAW;AAAoB,WAAA;AAEtC,MAAA;AACI,UAAA,mBAAkB,kBAAO,gBAAP,mBAAoB,qBAApB;AAAA;AAAA,MACtB;AAAA,MACA;AAEK,WAAA,CAAC,GAAC,wDAAiB,iBAAjB,mBAA+B;AAAA,MACtC,CAAC,UAAU,MAAM,SAAS;AAAA;AAAA,WAErB,GAAG;AACH,WAAA;AAAA,EACT;AACF;AAKO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA,GAAG;AACL,GAAsC;AACpC,MACE,CAAC,cAAc,kBACf,CAAC,cAAc,mBACf,CAAC,cAAc,eACf,CAAC,cAAc,mBACf,CAAC,cAAc,sBACf;AACA,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAAA,EAEJ;AAEI,MAAA,cAAc,yBAAyBD,sCAAe;AAChD,YAAA;AAAA,MACN,oGAAoGA,uBAAAA,aAAa,4CAA4C,cAAc,oBAAoB;AAAA,IAAA;AAAA,EAEnM;AAEM,QAAA,cAAcE,MAAAA,QAA6B,MAAM;AAC/C,UAAA,6BACJ,cAAc,8BAA8B,oBAAoB;AAElE,aAAS,iBAAiB,eAAgD;AAClE,YAAA,UAAS,+CAAe,gBAAe,cAAc;AAC3D,aAAO,OAAO,SAAS,KAAK,IAAI,SAAS,WAAW,MAAM;AAAA,IAC5D;AAEO,WAAA;AAAA,MACL,GAAG;AAAA,MACH;AAAA,MACA,sBAAsB,eAAuC;AACpD,eAAAC,iBAAA;AAAA,UACL,cAAc;AAAA,UACd,cAAc;AAAA,UACd,cAAc,mBAAmB,cAAc;AAAA,QAAA;AAAA,MAEnD;AAAA,MACA;AAAA,MACA,oBAAoB,eAAuB;AACnC,cAAA,iBACJ,8BAA8B,OAAO,WAAW,cAC5C,OAAO,SAAS,SAChB,iBAAiB;AAAA,UACf,cACE,+CAAe,gBAAe,cAAc;AAAA,QAAA,CAC/C;AAEP,eAAO,GAAG,cAAc,GACtB,eAAe,SAAS,GAAG,IAAI,KAAK,GACtC,QACE,+CAAe,yBACf,cAAc,oBAChB;AAAA,MACF;AAAA,IAAA;AAAA,EACF,GACC,CAAC,aAAa,CAAC;AAElB,wCACG,eAAe,UAAf,EAAwB,OAAO,aAC7B,SACH,CAAA;AAEJ;AAKO,SAAS,UAA+B;AACvC,QAAA,cAAcC,iBAAW,cAAc;AAC7C,MAAI,CAAC,aAAa;AACV,UAAA,IAAI,MAAM,wDAAwD;AAAA,EAC1E;AACO,SAAA;AACT;;;;"}
|
|
@@ -21,6 +21,22 @@ const defaultShopifyContext = {
|
|
|
21
21
|
const ShopifyContext = createContext(
|
|
22
22
|
defaultShopifyContext
|
|
23
23
|
);
|
|
24
|
+
function isSfapiProxyEnabled() {
|
|
25
|
+
var _a, _b, _c;
|
|
26
|
+
if (typeof window === "undefined")
|
|
27
|
+
return false;
|
|
28
|
+
try {
|
|
29
|
+
const navigationEntry = (_b = (_a = window.performance) == null ? void 0 : _a.getEntriesByType) == null ? void 0 : _b.call(
|
|
30
|
+
_a,
|
|
31
|
+
"navigation"
|
|
32
|
+
)[0];
|
|
33
|
+
return !!((_c = navigationEntry == null ? void 0 : navigationEntry.serverTiming) == null ? void 0 : _c.some(
|
|
34
|
+
(entry) => entry.name === "_sfapi_proxy"
|
|
35
|
+
));
|
|
36
|
+
} catch (e) {
|
|
37
|
+
return false;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
24
40
|
function ShopifyProvider({
|
|
25
41
|
children,
|
|
26
42
|
...shopifyConfig
|
|
@@ -36,12 +52,14 @@ function ShopifyProvider({
|
|
|
36
52
|
);
|
|
37
53
|
}
|
|
38
54
|
const finalConfig = useMemo(() => {
|
|
55
|
+
const sameDomainForStorefrontApi = shopifyConfig.sameDomainForStorefrontApi ?? isSfapiProxyEnabled();
|
|
39
56
|
function getShopifyDomain(overrideProps) {
|
|
40
57
|
const domain = (overrideProps == null ? void 0 : overrideProps.storeDomain) ?? shopifyConfig.storeDomain;
|
|
41
58
|
return domain.includes("://") ? domain : `https://${domain}`;
|
|
42
59
|
}
|
|
43
60
|
return {
|
|
44
61
|
...shopifyConfig,
|
|
62
|
+
sameDomainForStorefrontApi,
|
|
45
63
|
getPublicTokenHeaders(overrideProps) {
|
|
46
64
|
return getPublicTokenHeadersRaw(
|
|
47
65
|
overrideProps.contentType,
|
|
@@ -51,7 +69,7 @@ function ShopifyProvider({
|
|
|
51
69
|
},
|
|
52
70
|
getShopifyDomain,
|
|
53
71
|
getStorefrontApiUrl(overrideProps) {
|
|
54
|
-
const finalDomainUrl = getShopifyDomain({
|
|
72
|
+
const finalDomainUrl = sameDomainForStorefrontApi && typeof window !== "undefined" ? window.location.origin : getShopifyDomain({
|
|
55
73
|
storeDomain: (overrideProps == null ? void 0 : overrideProps.storeDomain) ?? shopifyConfig.storeDomain
|
|
56
74
|
});
|
|
57
75
|
return `${finalDomainUrl}${finalDomainUrl.endsWith("/") ? "" : "/"}api/${(overrideProps == null ? void 0 : overrideProps.storefrontApiVersion) ?? shopifyConfig.storefrontApiVersion}/graphql.json`;
|
|
@@ -1 +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\nexport const defaultShopifyContext: ShopifyContextValue = {\n storeDomain: 'test',\n storefrontToken: 'abc123',\n storefrontApiVersion: SFAPI_VERSION,\n countryIsoCode: 'US',\n languageIsoCode: 'EN',\n getStorefrontApiUrl() {\n return '';\n },\n getPublicTokenHeaders() {\n return {};\n },\n getShopifyDomain() {\n return '';\n },\n};\n\nconst ShopifyContext = createContext<ShopifyContextValue>(\n defaultShopifyContext,\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}: ShopifyProviderProps): JSX.Element {\n if (\n !shopifyConfig.countryIsoCode ||\n !shopifyConfig.languageIsoCode ||\n !shopifyConfig.storeDomain ||\n !shopifyConfig.storefrontToken ||\n !shopifyConfig.storefrontApiVersion\n ) {\n throw new Error(\n `Please provide the necessary props to '<ShopifyProvider/>'`,\n );\n }\n\n if (shopifyConfig.storefrontApiVersion !== SFAPI_VERSION) {\n console.warn(\n `<ShopifyProvider/>: This version of Hydrogen React 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 React and the Storefront API.`,\n );\n }\n\n const finalConfig = useMemo<ShopifyContextValue>(() => {\n function getShopifyDomain(overrideProps?: {storeDomain?: string}): string {\n const domain = overrideProps?.storeDomain ?? shopifyConfig.storeDomain;\n return domain.includes('://') ? domain : `https://${domain}`;\n }\n\n return {\n ...shopifyConfig,\n getPublicTokenHeaders(overrideProps): Record<string, string> {\n return getPublicTokenHeadersRaw(\n overrideProps.contentType,\n shopifyConfig.storefrontApiVersion,\n overrideProps.storefrontToken ?? shopifyConfig.storefrontToken,\n );\n },\n getShopifyDomain,\n getStorefrontApiUrl(overrideProps): string {\n const finalDomainUrl = getShopifyDomain({\n storeDomain: overrideProps?.storeDomain ?? shopifyConfig.storeDomain,\n });\n return `${finalDomainUrl}${\n finalDomainUrl.endsWith('/') ? '' : '/'\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(): ShopifyContextValue {\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\nexport interface ShopifyProviderBase {\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 React was built for. Learn more about Shopify [API versioning](https://shopify.dev/api/usage/versioning) for more details. */\n storefrontApiVersion: string;\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 countryIsoCode: CountryCode;\n /**\n * `ISO 369` language codes supported by Shopify.\n */\n languageIsoCode: LanguageCode;\n}\n\n/**\n * Shopify-specific values that are used in various Hydrogen React components and hooks.\n */\nexport interface ShopifyProviderProps extends ShopifyProviderBase {\n /** React children to render. */\n children?: ReactNode;\n}\n\nexport interface ShopifyContextValue\n extends ShopifyProviderBase,\n ShopifyContextReturn {}\n\ntype ShopifyContextReturn = {\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?: GetStorefrontApiUrlProps) => 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: (\n props: GetPublicTokenHeadersProps,\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?: GetShopifyDomainProps) => string;\n};\n\ntype GetStorefrontApiUrlProps = {\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};\n\ntype GetPublicTokenHeadersProps = {\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};\n\ntype GetShopifyDomainProps = {storeDomain?: string};\n"],"names":[],"mappings":";;;;AAKO,MAAM,wBAA6C;AAAA,EACxD,aAAa;AAAA,EACb,iBAAiB;AAAA,EACjB,sBAAsB;AAAA,EACtB,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,sBAAsB;AACb,WAAA;AAAA,EACT;AAAA,EACA,wBAAwB;AACtB,WAAO;EACT;AAAA,EACA,mBAAmB;AACV,WAAA;AAAA,EACT;AACF;AAEA,MAAM,iBAAiB;AAAA,EACrB;AACF;AAKO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA,GAAG;AACL,GAAsC;AACpC,MACE,CAAC,cAAc,kBACf,CAAC,cAAc,mBACf,CAAC,cAAc,eACf,CAAC,cAAc,mBACf,CAAC,cAAc,sBACf;AACA,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAAA,EAEJ;AAEI,MAAA,cAAc,yBAAyB,eAAe;AAChD,YAAA;AAAA,MACN,oGAAoG,aAAa,4CAA4C,cAAc,oBAAoB;AAAA,IAAA;AAAA,EAEnM;AAEM,QAAA,cAAc,QAA6B,MAAM;AACrD,aAAS,iBAAiB,eAAgD;AAClE,YAAA,UAAS,+CAAe,gBAAe,cAAc;AAC3D,aAAO,OAAO,SAAS,KAAK,IAAI,SAAS,WAAW,MAAM;AAAA,IAC5D;AAEO,WAAA;AAAA,MACL,GAAG;AAAA,MACH,sBAAsB,eAAuC;AACpD,eAAA;AAAA,UACL,cAAc;AAAA,UACd,cAAc;AAAA,UACd,cAAc,mBAAmB,cAAc;AAAA,QAAA;AAAA,MAEnD;AAAA,MACA;AAAA,MACA,oBAAoB,eAAuB;AACzC,cAAM,iBAAiB,iBAAiB;AAAA,UACtC,cAAa,+CAAe,gBAAe,cAAc;AAAA,QAAA,CAC1D;AACD,eAAO,GAAG,cAAc,GACtB,eAAe,SAAS,GAAG,IAAI,KAAK,GACtC,QACE,+CAAe,yBACf,cAAc,oBAChB;AAAA,MACF;AAAA,IAAA;AAAA,EACF,GACC,CAAC,aAAa,CAAC;AAElB,6BACG,eAAe,UAAf,EAAwB,OAAO,aAC7B,SACH,CAAA;AAEJ;AAKO,SAAS,UAA+B;AACvC,QAAA,cAAc,WAAW,cAAc;AAC7C,MAAI,CAAC,aAAa;AACV,UAAA,IAAI,MAAM,wDAAwD;AAAA,EAC1E;AACO,SAAA;AACT;"}
|
|
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\nexport const defaultShopifyContext: ShopifyContextValue = {\n storeDomain: 'test',\n storefrontToken: 'abc123',\n storefrontApiVersion: SFAPI_VERSION,\n countryIsoCode: 'US',\n languageIsoCode: 'EN',\n getStorefrontApiUrl() {\n return '';\n },\n getPublicTokenHeaders() {\n return {};\n },\n getShopifyDomain() {\n return '';\n },\n};\n\nconst ShopifyContext = createContext<ShopifyContextValue>(\n defaultShopifyContext,\n);\n\n/**\n * Hydrogen server sets this server timing key when the SFAPI proxy is enabled.\n * Read it automatically in the browser for apps using frontend cart in full-stack Hydrogen,\n * but don't export this utility yet since we don't want to make this a public convention.\n */\nfunction isSfapiProxyEnabled(): boolean {\n if (typeof window === 'undefined') return false;\n\n try {\n const navigationEntry = window.performance?.getEntriesByType?.(\n 'navigation',\n )[0] as PerformanceNavigationTiming;\n\n return !!navigationEntry?.serverTiming?.some(\n (entry) => entry.name === '_sfapi_proxy',\n );\n } catch (e) {\n return false;\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}: ShopifyProviderProps): JSX.Element {\n if (\n !shopifyConfig.countryIsoCode ||\n !shopifyConfig.languageIsoCode ||\n !shopifyConfig.storeDomain ||\n !shopifyConfig.storefrontToken ||\n !shopifyConfig.storefrontApiVersion\n ) {\n throw new Error(\n `Please provide the necessary props to '<ShopifyProvider/>'`,\n );\n }\n\n if (shopifyConfig.storefrontApiVersion !== SFAPI_VERSION) {\n console.warn(\n `<ShopifyProvider/>: This version of Hydrogen React 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 React and the Storefront API.`,\n );\n }\n\n const finalConfig = useMemo<ShopifyContextValue>(() => {\n const sameDomainForStorefrontApi =\n shopifyConfig.sameDomainForStorefrontApi ?? isSfapiProxyEnabled();\n\n function getShopifyDomain(overrideProps?: {storeDomain?: string}): string {\n const domain = overrideProps?.storeDomain ?? shopifyConfig.storeDomain;\n return domain.includes('://') ? domain : `https://${domain}`;\n }\n\n return {\n ...shopifyConfig,\n sameDomainForStorefrontApi,\n getPublicTokenHeaders(overrideProps): Record<string, string> {\n return getPublicTokenHeadersRaw(\n overrideProps.contentType,\n shopifyConfig.storefrontApiVersion,\n overrideProps.storefrontToken ?? shopifyConfig.storefrontToken,\n );\n },\n getShopifyDomain,\n getStorefrontApiUrl(overrideProps): string {\n const finalDomainUrl =\n sameDomainForStorefrontApi && typeof window !== 'undefined'\n ? window.location.origin\n : getShopifyDomain({\n storeDomain:\n overrideProps?.storeDomain ?? shopifyConfig.storeDomain,\n });\n\n return `${finalDomainUrl}${\n finalDomainUrl.endsWith('/') ? '' : '/'\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(): ShopifyContextValue {\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\nexport interface ShopifyProviderBase {\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 React was built for. Learn more about Shopify [API versioning](https://shopify.dev/api/usage/versioning) for more details. */\n storefrontApiVersion: string;\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 countryIsoCode: CountryCode;\n /**\n * `ISO 369` language codes supported by Shopify.\n */\n languageIsoCode: LanguageCode;\n /**\n * Uses the current window.location.origin for Storefront API requests.\n * This requires setting up a proxy for Storefront API requests in your domain.\n */\n sameDomainForStorefrontApi?: boolean;\n}\n\n/**\n * Shopify-specific values that are used in various Hydrogen React components and hooks.\n */\nexport interface ShopifyProviderProps extends ShopifyProviderBase {\n /** React children to render. */\n children?: ReactNode;\n}\n\nexport interface ShopifyContextValue\n extends ShopifyProviderBase,\n ShopifyContextReturn {}\n\ntype ShopifyContextReturn = {\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?: GetStorefrontApiUrlProps) => 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: (\n props: GetPublicTokenHeadersProps,\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?: GetShopifyDomainProps) => string;\n};\n\ntype GetStorefrontApiUrlProps = {\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};\n\ntype GetPublicTokenHeadersProps = {\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};\n\ntype GetShopifyDomainProps = {storeDomain?: string};\n"],"names":[],"mappings":";;;;AAKO,MAAM,wBAA6C;AAAA,EACxD,aAAa;AAAA,EACb,iBAAiB;AAAA,EACjB,sBAAsB;AAAA,EACtB,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,sBAAsB;AACb,WAAA;AAAA,EACT;AAAA,EACA,wBAAwB;AACtB,WAAO;EACT;AAAA,EACA,mBAAmB;AACV,WAAA;AAAA,EACT;AACF;AAEA,MAAM,iBAAiB;AAAA,EACrB;AACF;AAOA,SAAS,sBAA+B;;AACtC,MAAI,OAAO,WAAW;AAAoB,WAAA;AAEtC,MAAA;AACI,UAAA,mBAAkB,kBAAO,gBAAP,mBAAoB,qBAApB;AAAA;AAAA,MACtB;AAAA,MACA;AAEK,WAAA,CAAC,GAAC,wDAAiB,iBAAjB,mBAA+B;AAAA,MACtC,CAAC,UAAU,MAAM,SAAS;AAAA;AAAA,WAErB,GAAG;AACH,WAAA;AAAA,EACT;AACF;AAKO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA,GAAG;AACL,GAAsC;AACpC,MACE,CAAC,cAAc,kBACf,CAAC,cAAc,mBACf,CAAC,cAAc,eACf,CAAC,cAAc,mBACf,CAAC,cAAc,sBACf;AACA,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAAA,EAEJ;AAEI,MAAA,cAAc,yBAAyB,eAAe;AAChD,YAAA;AAAA,MACN,oGAAoG,aAAa,4CAA4C,cAAc,oBAAoB;AAAA,IAAA;AAAA,EAEnM;AAEM,QAAA,cAAc,QAA6B,MAAM;AAC/C,UAAA,6BACJ,cAAc,8BAA8B,oBAAoB;AAElE,aAAS,iBAAiB,eAAgD;AAClE,YAAA,UAAS,+CAAe,gBAAe,cAAc;AAC3D,aAAO,OAAO,SAAS,KAAK,IAAI,SAAS,WAAW,MAAM;AAAA,IAC5D;AAEO,WAAA;AAAA,MACL,GAAG;AAAA,MACH;AAAA,MACA,sBAAsB,eAAuC;AACpD,eAAA;AAAA,UACL,cAAc;AAAA,UACd,cAAc;AAAA,UACd,cAAc,mBAAmB,cAAc;AAAA,QAAA;AAAA,MAEnD;AAAA,MACA;AAAA,MACA,oBAAoB,eAAuB;AACnC,cAAA,iBACJ,8BAA8B,OAAO,WAAW,cAC5C,OAAO,SAAS,SAChB,iBAAiB;AAAA,UACf,cACE,+CAAe,gBAAe,cAAc;AAAA,QAAA,CAC/C;AAEP,eAAO,GAAG,cAAc,GACtB,eAAe,SAAS,GAAG,IAAI,KAAK,GACtC,QACE,+CAAe,yBACf,cAAc,oBAChB;AAAA,MACF;AAAA,IAAA;AAAA,EACF,GACC,CAAC,aAAa,CAAC;AAElB,6BACG,eAAe,UAAf,EAAwB,OAAO,aAC7B,SACH,CAAA;AAEJ;AAKO,SAAS,UAA+B;AACvC,QAAA,cAAc,WAAW,cAAc;AAC7C,MAAI,CAAC,aAAa;AACV,UAAA,IAAI,MAAM,wDAAwD;AAAA,EAC1E;AACO,SAAA;AACT;"}
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const cartConstants = require("./cart-constants.js");
|
|
4
3
|
const analyticsConstants = require("./analytics-constants.js");
|
|
5
4
|
const analyticsUtils = require("./analytics-utils.js");
|
|
6
|
-
const
|
|
5
|
+
const trackingUtils = require("./tracking-utils.js");
|
|
7
6
|
const analyticsSchemaTrekkieStorefrontPageView = require("./analytics-schema-trekkie-storefront-page-view.js");
|
|
8
7
|
const analyticsSchemaCustomStorefrontCustomerTracking = require("./analytics-schema-custom-storefront-customer-tracking.js");
|
|
9
8
|
function sendShopifyAnalytics(event, shopDomain) {
|
|
@@ -105,10 +104,10 @@ function getClientBrowserParameters() {
|
|
|
105
104
|
};
|
|
106
105
|
}
|
|
107
106
|
const [navigationType, navigationApi] = getNavigationType();
|
|
108
|
-
const
|
|
107
|
+
const trackingValues = trackingUtils.getTrackingValues();
|
|
109
108
|
return {
|
|
110
|
-
uniqueToken:
|
|
111
|
-
visitToken:
|
|
109
|
+
uniqueToken: trackingValues.uniqueToken,
|
|
110
|
+
visitToken: trackingValues.visitToken,
|
|
112
111
|
url: location.href,
|
|
113
112
|
path: location.pathname,
|
|
114
113
|
search: location.search,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"analytics.js","sources":["../../src/analytics.ts"],"sourcesContent":["import {SHOPIFY_S, SHOPIFY_Y} from './cart-constants.js';\nimport type {\n ClientBrowserParameters,\n ShopifyAddToCartPayload,\n ShopifyAnalytics,\n ShopifyPageViewPayload,\n ShopifyMonorailEvent,\n} from './analytics-types.js';\nimport {AnalyticsEventName} from './analytics-constants.js';\nimport {errorIfServer} from './analytics-utils.js';\nimport {getShopifyCookies} from './cookies-utils.js';\n\nimport {pageView as trekkiePageView} from './analytics-schema-trekkie-storefront-page-view.js';\nimport {\n pageView as customerPageView,\n pageView2 as customerPageView2,\n collectionView as customerCollectionView,\n productView as customerProductView,\n searchView as customerSearchView,\n addToCart as customerAddToCart,\n} from './analytics-schema-custom-storefront-customer-tracking.js';\n\n/**\n * Set user and session cookies and refresh the expiry time\n * @param event - The analytics event.\n * @param shopDomain - The Online Store domain to sent Shopify analytics under the same\n * top level domain.\n */\nexport function sendShopifyAnalytics(\n event: ShopifyAnalytics,\n shopDomain?: string,\n): Promise<void> {\n const {eventName, payload} = event;\n if (!payload.hasUserConsent) return Promise.resolve();\n\n let events: ShopifyMonorailEvent[] = [];\n const pageViewPayload = payload as ShopifyPageViewPayload;\n\n if (eventName === AnalyticsEventName.PAGE_VIEW) {\n events = events.concat(\n trekkiePageView(pageViewPayload),\n customerPageView(pageViewPayload),\n );\n } else if (eventName === AnalyticsEventName.ADD_TO_CART) {\n events = events.concat(\n customerAddToCart(payload as ShopifyAddToCartPayload),\n );\n } else if (eventName === AnalyticsEventName.PAGE_VIEW_2) {\n events = events.concat(\n trekkiePageView(pageViewPayload),\n customerPageView2(pageViewPayload),\n );\n } else if (eventName === AnalyticsEventName.COLLECTION_VIEW) {\n events = events.concat(customerCollectionView(pageViewPayload));\n } else if (eventName === AnalyticsEventName.PRODUCT_VIEW) {\n events = events.concat(customerProductView(pageViewPayload));\n } else if (eventName === AnalyticsEventName.SEARCH_VIEW) {\n events = events.concat(customerSearchView(pageViewPayload));\n }\n\n if (events.length) {\n return sendToShopify(events, shopDomain);\n } else {\n return Promise.resolve();\n }\n}\n\n// Shopify monorail return invalid agent for Lighthouse userAgents\nfunction isLighthouseUserAgent(): boolean {\n if (typeof window === 'undefined' || !window.navigator) return false;\n return /Chrome-Lighthouse/.test(window.navigator.userAgent);\n}\n\ntype MonorailResponse = {\n status: number;\n message: string;\n};\n\nconst ERROR_MESSAGE = 'sendShopifyAnalytics request is unsuccessful';\n\nfunction sendToShopify(\n events: ShopifyMonorailEvent[],\n shopDomain?: string,\n): Promise<void> {\n if (isLighthouseUserAgent()) {\n return Promise.resolve();\n }\n\n const eventsToBeSent = {\n events,\n metadata: {\n event_sent_at_ms: Date.now(),\n },\n };\n\n try {\n return fetch(\n shopDomain\n ? `https://${shopDomain}/.well-known/shopify/monorail/unstable/produce_batch`\n : 'https://monorail-edge.shopifysvc.com/unstable/produce_batch',\n {\n method: 'post',\n headers: {\n 'content-type': 'text/plain',\n },\n body: JSON.stringify(eventsToBeSent),\n },\n )\n .then((response) => {\n if (!response.ok) {\n throw new Error('Response failed');\n }\n return response.text();\n })\n .then((data) => {\n if (data) {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n const jsonResponse = JSON.parse(data);\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call\n jsonResponse.result.forEach((eventResponse: MonorailResponse) => {\n if (eventResponse.status !== 200) {\n console.error(ERROR_MESSAGE, '\\n\\n', eventResponse.message);\n }\n });\n }\n })\n .catch((err) => {\n console.error(ERROR_MESSAGE, err);\n if (__HYDROGEN_DEV__) {\n throw new Error(ERROR_MESSAGE);\n }\n });\n } catch (error) {\n // Do nothing\n return Promise.resolve();\n }\n}\n\nexport function getClientBrowserParameters(): ClientBrowserParameters {\n if (errorIfServer('getClientBrowserParameters')) {\n return {\n uniqueToken: '',\n visitToken: '',\n url: '',\n path: '',\n search: '',\n referrer: '',\n title: '',\n userAgent: '',\n navigationType: '',\n navigationApi: '',\n };\n }\n\n const [navigationType, navigationApi] = getNavigationType();\n const cookies = getShopifyCookies(document.cookie);\n\n return {\n uniqueToken: cookies[SHOPIFY_Y],\n visitToken: cookies[SHOPIFY_S],\n url: location.href,\n path: location.pathname,\n search: location.search,\n referrer: document.referrer,\n title: document.title,\n userAgent: navigator.userAgent,\n navigationType,\n navigationApi,\n };\n}\n\nfunction getNavigationTypeExperimental(): string | undefined {\n try {\n const navigationEntries =\n performance?.getEntriesByType &&\n performance?.getEntriesByType('navigation');\n\n if (navigationEntries && navigationEntries[0]) {\n // https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigationTiming\n const rawType = (\n window.performance.getEntriesByType(\n 'navigation',\n )[0] as PerformanceNavigationTiming\n )['type'];\n const navType = rawType && rawType.toString();\n\n return navType;\n }\n } catch (err) {\n // Do nothing\n }\n return undefined;\n}\n\nfunction getNavigationTypeLegacy(): string | undefined {\n try {\n if (\n PerformanceNavigation &&\n performance?.navigation?.type !== null &&\n performance?.navigation?.type !== undefined\n ) {\n // https://developer.mozilla.org/en-US/docs/Web/API/Performance/navigation\n const rawType = performance.navigation.type;\n switch (rawType) {\n case PerformanceNavigation.TYPE_NAVIGATE:\n return 'navigate';\n break;\n case PerformanceNavigation.TYPE_RELOAD:\n return 'reload';\n break;\n case PerformanceNavigation.TYPE_BACK_FORWARD:\n return 'back_forward';\n break;\n default:\n return `unknown: ${rawType}`;\n }\n }\n } catch (err) {\n // do nothing\n }\n return undefined;\n}\n\nfunction getNavigationType(): [string, string] {\n try {\n let navApi = 'PerformanceNavigationTiming';\n let navType = getNavigationTypeExperimental();\n if (!navType) {\n navType = getNavigationTypeLegacy();\n navApi = 'performance.navigation';\n }\n if (navType) {\n return [navType, navApi];\n } else {\n return ['unknown', 'unknown'];\n }\n } catch (err) {\n // do nothing\n }\n return ['error', 'error'];\n}\n"],"names":["AnalyticsEventName","trekkiePageView","customerPageView","customerAddToCart","customerPageView2","customerCollectionView","customerProductView","customerSearchView","errorIfServer","getShopifyCookies","SHOPIFY_Y","SHOPIFY_S"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"analytics.js","sources":["../../src/analytics.ts"],"sourcesContent":["import type {\n ClientBrowserParameters,\n ShopifyAddToCartPayload,\n ShopifyAnalytics,\n ShopifyPageViewPayload,\n ShopifyMonorailEvent,\n} from './analytics-types.js';\nimport {AnalyticsEventName} from './analytics-constants.js';\nimport {errorIfServer} from './analytics-utils.js';\nimport {getTrackingValues} from './tracking-utils.js';\n\nimport {pageView as trekkiePageView} from './analytics-schema-trekkie-storefront-page-view.js';\nimport {\n pageView as customerPageView,\n pageView2 as customerPageView2,\n collectionView as customerCollectionView,\n productView as customerProductView,\n searchView as customerSearchView,\n addToCart as customerAddToCart,\n} from './analytics-schema-custom-storefront-customer-tracking.js';\n\n/**\n * Set user and session cookies and refresh the expiry time\n * @param event - The analytics event.\n * @param shopDomain - The Online Store domain to sent Shopify analytics under the same\n * top level domain.\n */\nexport function sendShopifyAnalytics(\n event: ShopifyAnalytics,\n shopDomain?: string,\n): Promise<void> {\n const {eventName, payload} = event;\n if (!payload.hasUserConsent) return Promise.resolve();\n\n let events: ShopifyMonorailEvent[] = [];\n const pageViewPayload = payload as ShopifyPageViewPayload;\n\n if (eventName === AnalyticsEventName.PAGE_VIEW) {\n events = events.concat(\n trekkiePageView(pageViewPayload),\n customerPageView(pageViewPayload),\n );\n } else if (eventName === AnalyticsEventName.ADD_TO_CART) {\n events = events.concat(\n customerAddToCart(payload as ShopifyAddToCartPayload),\n );\n } else if (eventName === AnalyticsEventName.PAGE_VIEW_2) {\n events = events.concat(\n trekkiePageView(pageViewPayload),\n customerPageView2(pageViewPayload),\n );\n } else if (eventName === AnalyticsEventName.COLLECTION_VIEW) {\n events = events.concat(customerCollectionView(pageViewPayload));\n } else if (eventName === AnalyticsEventName.PRODUCT_VIEW) {\n events = events.concat(customerProductView(pageViewPayload));\n } else if (eventName === AnalyticsEventName.SEARCH_VIEW) {\n events = events.concat(customerSearchView(pageViewPayload));\n }\n\n if (events.length) {\n return sendToShopify(events, shopDomain);\n } else {\n return Promise.resolve();\n }\n}\n\n// Shopify monorail return invalid agent for Lighthouse userAgents\nfunction isLighthouseUserAgent(): boolean {\n if (typeof window === 'undefined' || !window.navigator) return false;\n return /Chrome-Lighthouse/.test(window.navigator.userAgent);\n}\n\ntype MonorailResponse = {\n status: number;\n message: string;\n};\n\nconst ERROR_MESSAGE = 'sendShopifyAnalytics request is unsuccessful';\n\nfunction sendToShopify(\n events: ShopifyMonorailEvent[],\n shopDomain?: string,\n): Promise<void> {\n if (isLighthouseUserAgent()) {\n return Promise.resolve();\n }\n\n const eventsToBeSent = {\n events,\n metadata: {\n event_sent_at_ms: Date.now(),\n },\n };\n\n try {\n return fetch(\n shopDomain\n ? `https://${shopDomain}/.well-known/shopify/monorail/unstable/produce_batch`\n : 'https://monorail-edge.shopifysvc.com/unstable/produce_batch',\n {\n method: 'post',\n headers: {\n 'content-type': 'text/plain',\n },\n body: JSON.stringify(eventsToBeSent),\n },\n )\n .then((response) => {\n if (!response.ok) {\n throw new Error('Response failed');\n }\n return response.text();\n })\n .then((data) => {\n if (data) {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n const jsonResponse = JSON.parse(data);\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call\n jsonResponse.result.forEach((eventResponse: MonorailResponse) => {\n if (eventResponse.status !== 200) {\n console.error(ERROR_MESSAGE, '\\n\\n', eventResponse.message);\n }\n });\n }\n })\n .catch((err) => {\n console.error(ERROR_MESSAGE, err);\n if (__HYDROGEN_DEV__) {\n throw new Error(ERROR_MESSAGE);\n }\n });\n } catch (error) {\n // Do nothing\n return Promise.resolve();\n }\n}\n\nexport function getClientBrowserParameters(): ClientBrowserParameters {\n if (errorIfServer('getClientBrowserParameters')) {\n return {\n uniqueToken: '',\n visitToken: '',\n url: '',\n path: '',\n search: '',\n referrer: '',\n title: '',\n userAgent: '',\n navigationType: '',\n navigationApi: '',\n };\n }\n\n const [navigationType, navigationApi] = getNavigationType();\n const trackingValues = getTrackingValues();\n\n return {\n uniqueToken: trackingValues.uniqueToken,\n visitToken: trackingValues.visitToken,\n url: location.href,\n path: location.pathname,\n search: location.search,\n referrer: document.referrer,\n title: document.title,\n userAgent: navigator.userAgent,\n navigationType,\n navigationApi,\n };\n}\n\nfunction getNavigationTypeExperimental(): string | undefined {\n try {\n const navigationEntries =\n performance?.getEntriesByType &&\n performance?.getEntriesByType('navigation');\n\n if (navigationEntries && navigationEntries[0]) {\n // https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigationTiming\n const rawType = (\n window.performance.getEntriesByType(\n 'navigation',\n )[0] as PerformanceNavigationTiming\n )['type'];\n const navType = rawType && rawType.toString();\n\n return navType;\n }\n } catch (err) {\n // Do nothing\n }\n return undefined;\n}\n\nfunction getNavigationTypeLegacy(): string | undefined {\n try {\n if (\n PerformanceNavigation &&\n performance?.navigation?.type !== null &&\n performance?.navigation?.type !== undefined\n ) {\n // https://developer.mozilla.org/en-US/docs/Web/API/Performance/navigation\n const rawType = performance.navigation.type;\n switch (rawType) {\n case PerformanceNavigation.TYPE_NAVIGATE:\n return 'navigate';\n break;\n case PerformanceNavigation.TYPE_RELOAD:\n return 'reload';\n break;\n case PerformanceNavigation.TYPE_BACK_FORWARD:\n return 'back_forward';\n break;\n default:\n return `unknown: ${rawType}`;\n }\n }\n } catch (err) {\n // do nothing\n }\n return undefined;\n}\n\nfunction getNavigationType(): [string, string] {\n try {\n let navApi = 'PerformanceNavigationTiming';\n let navType = getNavigationTypeExperimental();\n if (!navType) {\n navType = getNavigationTypeLegacy();\n navApi = 'performance.navigation';\n }\n if (navType) {\n return [navType, navApi];\n } else {\n return ['unknown', 'unknown'];\n }\n } catch (err) {\n // do nothing\n }\n return ['error', 'error'];\n}\n"],"names":["AnalyticsEventName","trekkiePageView","customerPageView","customerAddToCart","customerPageView2","customerCollectionView","customerProductView","customerSearchView","errorIfServer","getTrackingValues"],"mappings":"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"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import { SHOPIFY_Y, SHOPIFY_S } from "./cart-constants.mjs";
|
|
2
1
|
import { AnalyticsEventName } from "./analytics-constants.mjs";
|
|
3
2
|
import { errorIfServer } from "./analytics-utils.mjs";
|
|
4
|
-
import {
|
|
3
|
+
import { getTrackingValues } from "./tracking-utils.mjs";
|
|
5
4
|
import { pageView } from "./analytics-schema-trekkie-storefront-page-view.mjs";
|
|
6
5
|
import { pageView as pageView$1, addToCart, pageView2, collectionView, productView, searchView } from "./analytics-schema-custom-storefront-customer-tracking.mjs";
|
|
7
6
|
function sendShopifyAnalytics(event, shopDomain) {
|
|
@@ -103,10 +102,10 @@ function getClientBrowserParameters() {
|
|
|
103
102
|
};
|
|
104
103
|
}
|
|
105
104
|
const [navigationType, navigationApi] = getNavigationType();
|
|
106
|
-
const
|
|
105
|
+
const trackingValues = getTrackingValues();
|
|
107
106
|
return {
|
|
108
|
-
uniqueToken:
|
|
109
|
-
visitToken:
|
|
107
|
+
uniqueToken: trackingValues.uniqueToken,
|
|
108
|
+
visitToken: trackingValues.visitToken,
|
|
110
109
|
url: location.href,
|
|
111
110
|
path: location.pathname,
|
|
112
111
|
search: location.search,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"analytics.mjs","sources":["../../src/analytics.ts"],"sourcesContent":["import {SHOPIFY_S, SHOPIFY_Y} from './cart-constants.js';\nimport type {\n ClientBrowserParameters,\n ShopifyAddToCartPayload,\n ShopifyAnalytics,\n ShopifyPageViewPayload,\n ShopifyMonorailEvent,\n} from './analytics-types.js';\nimport {AnalyticsEventName} from './analytics-constants.js';\nimport {errorIfServer} from './analytics-utils.js';\nimport {getShopifyCookies} from './cookies-utils.js';\n\nimport {pageView as trekkiePageView} from './analytics-schema-trekkie-storefront-page-view.js';\nimport {\n pageView as customerPageView,\n pageView2 as customerPageView2,\n collectionView as customerCollectionView,\n productView as customerProductView,\n searchView as customerSearchView,\n addToCart as customerAddToCart,\n} from './analytics-schema-custom-storefront-customer-tracking.js';\n\n/**\n * Set user and session cookies and refresh the expiry time\n * @param event - The analytics event.\n * @param shopDomain - The Online Store domain to sent Shopify analytics under the same\n * top level domain.\n */\nexport function sendShopifyAnalytics(\n event: ShopifyAnalytics,\n shopDomain?: string,\n): Promise<void> {\n const {eventName, payload} = event;\n if (!payload.hasUserConsent) return Promise.resolve();\n\n let events: ShopifyMonorailEvent[] = [];\n const pageViewPayload = payload as ShopifyPageViewPayload;\n\n if (eventName === AnalyticsEventName.PAGE_VIEW) {\n events = events.concat(\n trekkiePageView(pageViewPayload),\n customerPageView(pageViewPayload),\n );\n } else if (eventName === AnalyticsEventName.ADD_TO_CART) {\n events = events.concat(\n customerAddToCart(payload as ShopifyAddToCartPayload),\n );\n } else if (eventName === AnalyticsEventName.PAGE_VIEW_2) {\n events = events.concat(\n trekkiePageView(pageViewPayload),\n customerPageView2(pageViewPayload),\n );\n } else if (eventName === AnalyticsEventName.COLLECTION_VIEW) {\n events = events.concat(customerCollectionView(pageViewPayload));\n } else if (eventName === AnalyticsEventName.PRODUCT_VIEW) {\n events = events.concat(customerProductView(pageViewPayload));\n } else if (eventName === AnalyticsEventName.SEARCH_VIEW) {\n events = events.concat(customerSearchView(pageViewPayload));\n }\n\n if (events.length) {\n return sendToShopify(events, shopDomain);\n } else {\n return Promise.resolve();\n }\n}\n\n// Shopify monorail return invalid agent for Lighthouse userAgents\nfunction isLighthouseUserAgent(): boolean {\n if (typeof window === 'undefined' || !window.navigator) return false;\n return /Chrome-Lighthouse/.test(window.navigator.userAgent);\n}\n\ntype MonorailResponse = {\n status: number;\n message: string;\n};\n\nconst ERROR_MESSAGE = 'sendShopifyAnalytics request is unsuccessful';\n\nfunction sendToShopify(\n events: ShopifyMonorailEvent[],\n shopDomain?: string,\n): Promise<void> {\n if (isLighthouseUserAgent()) {\n return Promise.resolve();\n }\n\n const eventsToBeSent = {\n events,\n metadata: {\n event_sent_at_ms: Date.now(),\n },\n };\n\n try {\n return fetch(\n shopDomain\n ? `https://${shopDomain}/.well-known/shopify/monorail/unstable/produce_batch`\n : 'https://monorail-edge.shopifysvc.com/unstable/produce_batch',\n {\n method: 'post',\n headers: {\n 'content-type': 'text/plain',\n },\n body: JSON.stringify(eventsToBeSent),\n },\n )\n .then((response) => {\n if (!response.ok) {\n throw new Error('Response failed');\n }\n return response.text();\n })\n .then((data) => {\n if (data) {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n const jsonResponse = JSON.parse(data);\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call\n jsonResponse.result.forEach((eventResponse: MonorailResponse) => {\n if (eventResponse.status !== 200) {\n console.error(ERROR_MESSAGE, '\\n\\n', eventResponse.message);\n }\n });\n }\n })\n .catch((err) => {\n console.error(ERROR_MESSAGE, err);\n if (__HYDROGEN_DEV__) {\n throw new Error(ERROR_MESSAGE);\n }\n });\n } catch (error) {\n // Do nothing\n return Promise.resolve();\n }\n}\n\nexport function getClientBrowserParameters(): ClientBrowserParameters {\n if (errorIfServer('getClientBrowserParameters')) {\n return {\n uniqueToken: '',\n visitToken: '',\n url: '',\n path: '',\n search: '',\n referrer: '',\n title: '',\n userAgent: '',\n navigationType: '',\n navigationApi: '',\n };\n }\n\n const [navigationType, navigationApi] = getNavigationType();\n const cookies = getShopifyCookies(document.cookie);\n\n return {\n uniqueToken: cookies[SHOPIFY_Y],\n visitToken: cookies[SHOPIFY_S],\n url: location.href,\n path: location.pathname,\n search: location.search,\n referrer: document.referrer,\n title: document.title,\n userAgent: navigator.userAgent,\n navigationType,\n navigationApi,\n };\n}\n\nfunction getNavigationTypeExperimental(): string | undefined {\n try {\n const navigationEntries =\n performance?.getEntriesByType &&\n performance?.getEntriesByType('navigation');\n\n if (navigationEntries && navigationEntries[0]) {\n // https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigationTiming\n const rawType = (\n window.performance.getEntriesByType(\n 'navigation',\n )[0] as PerformanceNavigationTiming\n )['type'];\n const navType = rawType && rawType.toString();\n\n return navType;\n }\n } catch (err) {\n // Do nothing\n }\n return undefined;\n}\n\nfunction getNavigationTypeLegacy(): string | undefined {\n try {\n if (\n PerformanceNavigation &&\n performance?.navigation?.type !== null &&\n performance?.navigation?.type !== undefined\n ) {\n // https://developer.mozilla.org/en-US/docs/Web/API/Performance/navigation\n const rawType = performance.navigation.type;\n switch (rawType) {\n case PerformanceNavigation.TYPE_NAVIGATE:\n return 'navigate';\n break;\n case PerformanceNavigation.TYPE_RELOAD:\n return 'reload';\n break;\n case PerformanceNavigation.TYPE_BACK_FORWARD:\n return 'back_forward';\n break;\n default:\n return `unknown: ${rawType}`;\n }\n }\n } catch (err) {\n // do nothing\n }\n return undefined;\n}\n\nfunction getNavigationType(): [string, string] {\n try {\n let navApi = 'PerformanceNavigationTiming';\n let navType = getNavigationTypeExperimental();\n if (!navType) {\n navType = getNavigationTypeLegacy();\n navApi = 'performance.navigation';\n }\n if (navType) {\n return [navType, navApi];\n } else {\n return ['unknown', 'unknown'];\n }\n } catch (err) {\n // do nothing\n }\n return ['error', 'error'];\n}\n"],"names":["trekkiePageView","customerPageView","customerAddToCart","customerPageView2","customerCollectionView","customerProductView","customerSearchView"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"analytics.mjs","sources":["../../src/analytics.ts"],"sourcesContent":["import type {\n ClientBrowserParameters,\n ShopifyAddToCartPayload,\n ShopifyAnalytics,\n ShopifyPageViewPayload,\n ShopifyMonorailEvent,\n} from './analytics-types.js';\nimport {AnalyticsEventName} from './analytics-constants.js';\nimport {errorIfServer} from './analytics-utils.js';\nimport {getTrackingValues} from './tracking-utils.js';\n\nimport {pageView as trekkiePageView} from './analytics-schema-trekkie-storefront-page-view.js';\nimport {\n pageView as customerPageView,\n pageView2 as customerPageView2,\n collectionView as customerCollectionView,\n productView as customerProductView,\n searchView as customerSearchView,\n addToCart as customerAddToCart,\n} from './analytics-schema-custom-storefront-customer-tracking.js';\n\n/**\n * Set user and session cookies and refresh the expiry time\n * @param event - The analytics event.\n * @param shopDomain - The Online Store domain to sent Shopify analytics under the same\n * top level domain.\n */\nexport function sendShopifyAnalytics(\n event: ShopifyAnalytics,\n shopDomain?: string,\n): Promise<void> {\n const {eventName, payload} = event;\n if (!payload.hasUserConsent) return Promise.resolve();\n\n let events: ShopifyMonorailEvent[] = [];\n const pageViewPayload = payload as ShopifyPageViewPayload;\n\n if (eventName === AnalyticsEventName.PAGE_VIEW) {\n events = events.concat(\n trekkiePageView(pageViewPayload),\n customerPageView(pageViewPayload),\n );\n } else if (eventName === AnalyticsEventName.ADD_TO_CART) {\n events = events.concat(\n customerAddToCart(payload as ShopifyAddToCartPayload),\n );\n } else if (eventName === AnalyticsEventName.PAGE_VIEW_2) {\n events = events.concat(\n trekkiePageView(pageViewPayload),\n customerPageView2(pageViewPayload),\n );\n } else if (eventName === AnalyticsEventName.COLLECTION_VIEW) {\n events = events.concat(customerCollectionView(pageViewPayload));\n } else if (eventName === AnalyticsEventName.PRODUCT_VIEW) {\n events = events.concat(customerProductView(pageViewPayload));\n } else if (eventName === AnalyticsEventName.SEARCH_VIEW) {\n events = events.concat(customerSearchView(pageViewPayload));\n }\n\n if (events.length) {\n return sendToShopify(events, shopDomain);\n } else {\n return Promise.resolve();\n }\n}\n\n// Shopify monorail return invalid agent for Lighthouse userAgents\nfunction isLighthouseUserAgent(): boolean {\n if (typeof window === 'undefined' || !window.navigator) return false;\n return /Chrome-Lighthouse/.test(window.navigator.userAgent);\n}\n\ntype MonorailResponse = {\n status: number;\n message: string;\n};\n\nconst ERROR_MESSAGE = 'sendShopifyAnalytics request is unsuccessful';\n\nfunction sendToShopify(\n events: ShopifyMonorailEvent[],\n shopDomain?: string,\n): Promise<void> {\n if (isLighthouseUserAgent()) {\n return Promise.resolve();\n }\n\n const eventsToBeSent = {\n events,\n metadata: {\n event_sent_at_ms: Date.now(),\n },\n };\n\n try {\n return fetch(\n shopDomain\n ? `https://${shopDomain}/.well-known/shopify/monorail/unstable/produce_batch`\n : 'https://monorail-edge.shopifysvc.com/unstable/produce_batch',\n {\n method: 'post',\n headers: {\n 'content-type': 'text/plain',\n },\n body: JSON.stringify(eventsToBeSent),\n },\n )\n .then((response) => {\n if (!response.ok) {\n throw new Error('Response failed');\n }\n return response.text();\n })\n .then((data) => {\n if (data) {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n const jsonResponse = JSON.parse(data);\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call\n jsonResponse.result.forEach((eventResponse: MonorailResponse) => {\n if (eventResponse.status !== 200) {\n console.error(ERROR_MESSAGE, '\\n\\n', eventResponse.message);\n }\n });\n }\n })\n .catch((err) => {\n console.error(ERROR_MESSAGE, err);\n if (__HYDROGEN_DEV__) {\n throw new Error(ERROR_MESSAGE);\n }\n });\n } catch (error) {\n // Do nothing\n return Promise.resolve();\n }\n}\n\nexport function getClientBrowserParameters(): ClientBrowserParameters {\n if (errorIfServer('getClientBrowserParameters')) {\n return {\n uniqueToken: '',\n visitToken: '',\n url: '',\n path: '',\n search: '',\n referrer: '',\n title: '',\n userAgent: '',\n navigationType: '',\n navigationApi: '',\n };\n }\n\n const [navigationType, navigationApi] = getNavigationType();\n const trackingValues = getTrackingValues();\n\n return {\n uniqueToken: trackingValues.uniqueToken,\n visitToken: trackingValues.visitToken,\n url: location.href,\n path: location.pathname,\n search: location.search,\n referrer: document.referrer,\n title: document.title,\n userAgent: navigator.userAgent,\n navigationType,\n navigationApi,\n };\n}\n\nfunction getNavigationTypeExperimental(): string | undefined {\n try {\n const navigationEntries =\n performance?.getEntriesByType &&\n performance?.getEntriesByType('navigation');\n\n if (navigationEntries && navigationEntries[0]) {\n // https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigationTiming\n const rawType = (\n window.performance.getEntriesByType(\n 'navigation',\n )[0] as PerformanceNavigationTiming\n )['type'];\n const navType = rawType && rawType.toString();\n\n return navType;\n }\n } catch (err) {\n // Do nothing\n }\n return undefined;\n}\n\nfunction getNavigationTypeLegacy(): string | undefined {\n try {\n if (\n PerformanceNavigation &&\n performance?.navigation?.type !== null &&\n performance?.navigation?.type !== undefined\n ) {\n // https://developer.mozilla.org/en-US/docs/Web/API/Performance/navigation\n const rawType = performance.navigation.type;\n switch (rawType) {\n case PerformanceNavigation.TYPE_NAVIGATE:\n return 'navigate';\n break;\n case PerformanceNavigation.TYPE_RELOAD:\n return 'reload';\n break;\n case PerformanceNavigation.TYPE_BACK_FORWARD:\n return 'back_forward';\n break;\n default:\n return `unknown: ${rawType}`;\n }\n }\n } catch (err) {\n // do nothing\n }\n return undefined;\n}\n\nfunction getNavigationType(): [string, string] {\n try {\n let navApi = 'PerformanceNavigationTiming';\n let navType = getNavigationTypeExperimental();\n if (!navType) {\n navType = getNavigationTypeLegacy();\n navApi = 'performance.navigation';\n }\n if (navType) {\n return [navType, navApi];\n } else {\n return ['unknown', 'unknown'];\n }\n } catch (err) {\n // do nothing\n }\n return ['error', 'error'];\n}\n"],"names":["trekkiePageView","customerPageView","customerAddToCart","customerPageView2","customerCollectionView","customerProductView","customerSearchView"],"mappings":"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"}
|
|
@@ -3,9 +3,14 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
|
3
3
|
const React = require("react");
|
|
4
4
|
const ShopifyProvider = require("./ShopifyProvider.js");
|
|
5
5
|
const cartConstants = require("./cart-constants.js");
|
|
6
|
-
const
|
|
6
|
+
const trackingUtils = require("./tracking-utils.js");
|
|
7
7
|
function useCartFetch() {
|
|
8
|
-
const {
|
|
8
|
+
const {
|
|
9
|
+
storefrontId,
|
|
10
|
+
getPublicTokenHeaders,
|
|
11
|
+
getStorefrontApiUrl,
|
|
12
|
+
sameDomainForStorefrontApi
|
|
13
|
+
} = ShopifyProvider.useShop();
|
|
9
14
|
return React.useCallback(
|
|
10
15
|
({
|
|
11
16
|
query,
|
|
@@ -15,9 +20,17 @@ function useCartFetch() {
|
|
|
15
20
|
if (storefrontId) {
|
|
16
21
|
headers[cartConstants.SHOPIFY_STOREFRONT_ID_HEADER] = storefrontId;
|
|
17
22
|
}
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
23
|
+
if (!sameDomainForStorefrontApi) {
|
|
24
|
+
const { uniqueToken, visitToken } = trackingUtils.getTrackingValues();
|
|
25
|
+
if (uniqueToken) {
|
|
26
|
+
headers[cartConstants.SHOPIFY_STOREFRONT_Y_HEADER] = uniqueToken;
|
|
27
|
+
headers[trackingUtils.SHOPIFY_UNIQUE_TOKEN_HEADER] = uniqueToken;
|
|
28
|
+
}
|
|
29
|
+
if (visitToken) {
|
|
30
|
+
headers[cartConstants.SHOPIFY_STOREFRONT_S_HEADER] = visitToken;
|
|
31
|
+
headers[trackingUtils.SHOPIFY_VISIT_TOKEN_HEADER] = visitToken;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
21
34
|
return fetch(getStorefrontApiUrl(), {
|
|
22
35
|
method: "POST",
|
|
23
36
|
headers,
|
|
@@ -35,7 +48,12 @@ function useCartFetch() {
|
|
|
35
48
|
};
|
|
36
49
|
});
|
|
37
50
|
},
|
|
38
|
-
[
|
|
51
|
+
[
|
|
52
|
+
getPublicTokenHeaders,
|
|
53
|
+
storefrontId,
|
|
54
|
+
getStorefrontApiUrl,
|
|
55
|
+
sameDomainForStorefrontApi
|
|
56
|
+
]
|
|
39
57
|
);
|
|
40
58
|
}
|
|
41
59
|
exports.useCartFetch = useCartFetch;
|