@shopify/hydrogen-react 2023.1.7 → 2023.4.0
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/CartProvider.mjs.map +1 -1
- package/dist/browser-dev/Image.mjs +336 -90
- package/dist/browser-dev/Image.mjs.map +1 -1
- package/dist/browser-dev/MediaFile.mjs.map +1 -1
- package/dist/browser-dev/ModelViewer.mjs.map +1 -1
- package/dist/browser-dev/Money.mjs.map +1 -1
- package/dist/browser-dev/ProductProvider.mjs +2 -2
- package/dist/browser-dev/ProductProvider.mjs.map +1 -1
- package/dist/browser-dev/Video.mjs +2 -2
- package/dist/browser-dev/Video.mjs.map +1 -1
- package/dist/browser-dev/analytics-utils.mjs +1 -1
- package/dist/browser-dev/analytics-utils.mjs.map +1 -1
- package/dist/browser-dev/index.mjs +2 -3
- package/dist/browser-dev/index.mjs.map +1 -1
- package/dist/browser-dev/node_modules/@xstate/react/es/useConstant.mjs +2 -2
- package/dist/browser-dev/node_modules/@xstate/react/es/useConstant.mjs.map +1 -1
- package/dist/browser-dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.mjs +2 -2
- package/dist/browser-dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.production.min.mjs +2 -2
- package/dist/browser-dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.production.min.mjs.map +1 -1
- package/dist/browser-dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.mjs +2 -2
- package/dist/browser-dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.min.mjs +2 -2
- package/dist/browser-dev/storefront-api-constants.mjs +1 -1
- package/dist/browser-dev/storefront-api-constants.mjs.map +1 -1
- package/dist/browser-dev/useCartAPIStateMachine.mjs.map +1 -1
- package/dist/browser-dev/useCartActions.mjs.map +1 -1
- package/dist/browser-prod/CartProvider.mjs.map +1 -1
- package/dist/browser-prod/Image.mjs +302 -82
- package/dist/browser-prod/Image.mjs.map +1 -1
- package/dist/browser-prod/MediaFile.mjs.map +1 -1
- package/dist/browser-prod/ModelViewer.mjs.map +1 -1
- package/dist/browser-prod/Money.mjs.map +1 -1
- package/dist/browser-prod/ProductProvider.mjs +2 -2
- package/dist/browser-prod/ProductProvider.mjs.map +1 -1
- package/dist/browser-prod/Video.mjs +2 -2
- package/dist/browser-prod/Video.mjs.map +1 -1
- package/dist/browser-prod/analytics-utils.mjs +1 -1
- package/dist/browser-prod/analytics-utils.mjs.map +1 -1
- package/dist/browser-prod/index.mjs +2 -3
- package/dist/browser-prod/index.mjs.map +1 -1
- package/dist/browser-prod/node_modules/@xstate/react/es/useConstant.mjs +2 -2
- package/dist/browser-prod/node_modules/@xstate/react/es/useConstant.mjs.map +1 -1
- package/dist/browser-prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.mjs +2 -2
- package/dist/browser-prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.production.min.mjs +2 -2
- package/dist/browser-prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.production.min.mjs.map +1 -1
- package/dist/browser-prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.mjs +2 -2
- package/dist/browser-prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.min.mjs +2 -2
- package/dist/browser-prod/storefront-api-constants.mjs +1 -1
- package/dist/browser-prod/storefront-api-constants.mjs.map +1 -1
- package/dist/browser-prod/useCartAPIStateMachine.mjs.map +1 -1
- package/dist/browser-prod/useCartActions.mjs.map +1 -1
- package/dist/node-dev/AddToCartButton.js +4 -4
- package/dist/node-dev/AddToCartButton.js.map +1 -1
- package/dist/node-dev/BaseButton.js +2 -2
- package/dist/node-dev/BaseButton.js.map +1 -1
- package/dist/node-dev/BuyNowButton.js +4 -4
- package/dist/node-dev/BuyNowButton.js.map +1 -1
- package/dist/node-dev/CartCheckoutButton.js +3 -3
- package/dist/node-dev/CartCheckoutButton.js.map +1 -1
- package/dist/node-dev/CartLineProvider.js +3 -3
- package/dist/node-dev/CartLineProvider.js.map +1 -1
- package/dist/node-dev/CartLineQuantityAdjustButton.js +2 -2
- package/dist/node-dev/CartLineQuantityAdjustButton.js.map +1 -1
- package/dist/node-dev/CartProvider.js +20 -20
- package/dist/node-dev/CartProvider.js.map +1 -1
- package/dist/node-dev/CartProvider.mjs.map +1 -1
- package/dist/node-dev/Image.js +350 -87
- package/dist/node-dev/Image.js.map +1 -1
- package/dist/node-dev/Image.mjs +336 -90
- package/dist/node-dev/Image.mjs.map +1 -1
- package/dist/node-dev/MediaFile.js.map +1 -1
- package/dist/node-dev/MediaFile.mjs.map +1 -1
- package/dist/node-dev/ModelViewer.js +4 -4
- package/dist/node-dev/ModelViewer.js.map +1 -1
- package/dist/node-dev/ModelViewer.mjs.map +1 -1
- package/dist/node-dev/Money.js.map +1 -1
- package/dist/node-dev/Money.mjs.map +1 -1
- package/dist/node-dev/ProductProvider.js +16 -16
- package/dist/node-dev/ProductProvider.js.map +1 -1
- package/dist/node-dev/ProductProvider.mjs +2 -2
- package/dist/node-dev/ProductProvider.mjs.map +1 -1
- package/dist/node-dev/ShopifyProvider.js +4 -4
- package/dist/node-dev/ShopifyProvider.js.map +1 -1
- package/dist/node-dev/Video.js +4 -4
- package/dist/node-dev/Video.js.map +1 -1
- package/dist/node-dev/Video.mjs +2 -2
- package/dist/node-dev/Video.mjs.map +1 -1
- package/dist/node-dev/analytics-utils.js +1 -1
- package/dist/node-dev/analytics-utils.js.map +1 -1
- package/dist/node-dev/analytics-utils.mjs +1 -1
- package/dist/node-dev/analytics-utils.mjs.map +1 -1
- package/dist/node-dev/cart-hooks.js +2 -2
- package/dist/node-dev/cart-hooks.js.map +1 -1
- package/dist/node-dev/index.js +1 -2
- package/dist/node-dev/index.js.map +1 -1
- package/dist/node-dev/index.mjs +2 -3
- package/dist/node-dev/index.mjs.map +1 -1
- package/dist/node-dev/load-script.js +3 -3
- package/dist/node-dev/load-script.js.map +1 -1
- package/dist/node-dev/node_modules/@xstate/react/es/fsm.js +6 -6
- package/dist/node-dev/node_modules/@xstate/react/es/fsm.js.map +1 -1
- package/dist/node-dev/node_modules/@xstate/react/es/useConstant.js +3 -3
- package/dist/node-dev/node_modules/@xstate/react/es/useConstant.js.map +1 -1
- package/dist/node-dev/node_modules/@xstate/react/es/useConstant.mjs +2 -2
- package/dist/node-dev/node_modules/@xstate/react/es/useConstant.mjs.map +1 -1
- package/dist/node-dev/node_modules/use-isomorphic-layout-effect/dist/use-isomorphic-layout-effect.esm.js +2 -2
- package/dist/node-dev/node_modules/use-isomorphic-layout-effect/dist/use-isomorphic-layout-effect.esm.js.map +1 -1
- package/dist/node-dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.js +3 -3
- package/dist/node-dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.js.map +1 -1
- package/dist/node-dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.mjs +2 -2
- package/dist/node-dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.production.min.js +2 -2
- package/dist/node-dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.production.min.js.map +1 -1
- package/dist/node-dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.production.min.mjs +2 -2
- package/dist/node-dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.production.min.mjs.map +1 -1
- package/dist/node-dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js +6 -6
- package/dist/node-dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js.map +1 -1
- package/dist/node-dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.mjs +2 -2
- package/dist/node-dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.min.js +2 -2
- package/dist/node-dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.min.js.map +1 -1
- package/dist/node-dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.min.mjs +2 -2
- package/dist/node-dev/storefront-api-constants.js +1 -1
- package/dist/node-dev/storefront-api-constants.js.map +1 -1
- package/dist/node-dev/storefront-api-constants.mjs +1 -1
- package/dist/node-dev/storefront-api-constants.mjs.map +1 -1
- package/dist/node-dev/useCartAPIStateMachine.js +3 -3
- package/dist/node-dev/useCartAPIStateMachine.js.map +1 -1
- package/dist/node-dev/useCartAPIStateMachine.mjs.map +1 -1
- package/dist/node-dev/useCartActions.js +11 -11
- package/dist/node-dev/useCartActions.js.map +1 -1
- package/dist/node-dev/useCartActions.mjs.map +1 -1
- package/dist/node-dev/useMoney.js +5 -5
- package/dist/node-dev/useMoney.js.map +1 -1
- package/dist/node-dev/useShopifyCookies.js +2 -2
- package/dist/node-dev/useShopifyCookies.js.map +1 -1
- package/dist/node-prod/AddToCartButton.js +4 -4
- package/dist/node-prod/AddToCartButton.js.map +1 -1
- package/dist/node-prod/BaseButton.js +2 -2
- package/dist/node-prod/BaseButton.js.map +1 -1
- package/dist/node-prod/BuyNowButton.js +4 -4
- package/dist/node-prod/BuyNowButton.js.map +1 -1
- package/dist/node-prod/CartCheckoutButton.js +3 -3
- package/dist/node-prod/CartCheckoutButton.js.map +1 -1
- package/dist/node-prod/CartLineProvider.js +3 -3
- package/dist/node-prod/CartLineProvider.js.map +1 -1
- package/dist/node-prod/CartLineQuantityAdjustButton.js +2 -2
- package/dist/node-prod/CartLineQuantityAdjustButton.js.map +1 -1
- package/dist/node-prod/CartProvider.js +20 -20
- package/dist/node-prod/CartProvider.js.map +1 -1
- package/dist/node-prod/CartProvider.mjs.map +1 -1
- package/dist/node-prod/Image.js +317 -80
- package/dist/node-prod/Image.js.map +1 -1
- package/dist/node-prod/Image.mjs +302 -82
- package/dist/node-prod/Image.mjs.map +1 -1
- package/dist/node-prod/MediaFile.js.map +1 -1
- package/dist/node-prod/MediaFile.mjs.map +1 -1
- package/dist/node-prod/ModelViewer.js +4 -4
- package/dist/node-prod/ModelViewer.js.map +1 -1
- package/dist/node-prod/ModelViewer.mjs.map +1 -1
- package/dist/node-prod/Money.js.map +1 -1
- package/dist/node-prod/Money.mjs.map +1 -1
- package/dist/node-prod/ProductProvider.js +16 -16
- package/dist/node-prod/ProductProvider.js.map +1 -1
- package/dist/node-prod/ProductProvider.mjs +2 -2
- package/dist/node-prod/ProductProvider.mjs.map +1 -1
- package/dist/node-prod/ShopifyProvider.js +4 -4
- package/dist/node-prod/ShopifyProvider.js.map +1 -1
- package/dist/node-prod/Video.js +4 -4
- package/dist/node-prod/Video.js.map +1 -1
- package/dist/node-prod/Video.mjs +2 -2
- package/dist/node-prod/Video.mjs.map +1 -1
- package/dist/node-prod/analytics-utils.js +1 -1
- package/dist/node-prod/analytics-utils.js.map +1 -1
- package/dist/node-prod/analytics-utils.mjs +1 -1
- package/dist/node-prod/analytics-utils.mjs.map +1 -1
- package/dist/node-prod/cart-hooks.js +2 -2
- package/dist/node-prod/cart-hooks.js.map +1 -1
- package/dist/node-prod/index.js +1 -2
- package/dist/node-prod/index.js.map +1 -1
- package/dist/node-prod/index.mjs +2 -3
- package/dist/node-prod/index.mjs.map +1 -1
- package/dist/node-prod/load-script.js +3 -3
- package/dist/node-prod/load-script.js.map +1 -1
- package/dist/node-prod/node_modules/@xstate/react/es/fsm.js +6 -6
- package/dist/node-prod/node_modules/@xstate/react/es/fsm.js.map +1 -1
- package/dist/node-prod/node_modules/@xstate/react/es/useConstant.js +3 -3
- package/dist/node-prod/node_modules/@xstate/react/es/useConstant.js.map +1 -1
- package/dist/node-prod/node_modules/@xstate/react/es/useConstant.mjs +2 -2
- package/dist/node-prod/node_modules/@xstate/react/es/useConstant.mjs.map +1 -1
- package/dist/node-prod/node_modules/use-isomorphic-layout-effect/dist/use-isomorphic-layout-effect.esm.js +2 -2
- package/dist/node-prod/node_modules/use-isomorphic-layout-effect/dist/use-isomorphic-layout-effect.esm.js.map +1 -1
- package/dist/node-prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.js +3 -3
- package/dist/node-prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.js.map +1 -1
- package/dist/node-prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.mjs +2 -2
- package/dist/node-prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.production.min.js +2 -2
- package/dist/node-prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.production.min.js.map +1 -1
- package/dist/node-prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.production.min.mjs +2 -2
- package/dist/node-prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.production.min.mjs.map +1 -1
- package/dist/node-prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js +6 -6
- package/dist/node-prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js.map +1 -1
- package/dist/node-prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.mjs +2 -2
- package/dist/node-prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.min.js +2 -2
- package/dist/node-prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.min.js.map +1 -1
- package/dist/node-prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.min.mjs +2 -2
- package/dist/node-prod/storefront-api-constants.js +1 -1
- package/dist/node-prod/storefront-api-constants.js.map +1 -1
- package/dist/node-prod/storefront-api-constants.mjs +1 -1
- package/dist/node-prod/storefront-api-constants.mjs.map +1 -1
- package/dist/node-prod/useCartAPIStateMachine.js +3 -3
- package/dist/node-prod/useCartAPIStateMachine.js.map +1 -1
- package/dist/node-prod/useCartAPIStateMachine.mjs.map +1 -1
- package/dist/node-prod/useCartActions.js +11 -11
- package/dist/node-prod/useCartActions.js.map +1 -1
- package/dist/node-prod/useCartActions.mjs.map +1 -1
- package/dist/node-prod/useMoney.js +5 -5
- package/dist/node-prod/useMoney.js.map +1 -1
- package/dist/node-prod/useShopifyCookies.js +2 -2
- package/dist/node-prod/useShopifyCookies.js.map +1 -1
- package/dist/types/CartProvider.d.ts +4 -2
- package/dist/types/Image.d.ts +235 -38
- package/dist/types/MediaFile.d.ts +2 -2
- package/dist/types/ModelViewer.d.ts +1 -1
- package/dist/types/Money.d.ts +1 -1
- package/dist/types/ProductProvider.d.ts +8 -4
- package/dist/types/Video.d.ts +3 -3
- package/dist/types/index.d.cts +1 -2
- package/dist/types/index.d.ts +1 -2
- package/dist/types/storefront-api-constants.d.ts +1 -1
- package/dist/types/storefront-api-types.d.ts +862 -118
- package/dist/types/useCartAPIStateMachine.d.ts +2 -2
- package/dist/types/useCartActions.d.ts +2 -2
- package/dist/umd/hydrogen-react.dev.js +334 -182
- package/dist/umd/hydrogen-react.dev.js.map +1 -1
- package/dist/umd/hydrogen-react.prod.js +22 -15
- package/dist/umd/hydrogen-react.prod.js.map +1 -1
- package/package.json +2 -2
- package/storefront.schema.json +1 -1
- package/dist/browser-dev/CartLinePrice.mjs +0 -21
- package/dist/browser-dev/CartLinePrice.mjs.map +0 -1
- package/dist/browser-dev/image-size.mjs +0 -80
- package/dist/browser-dev/image-size.mjs.map +0 -1
- package/dist/browser-prod/CartLinePrice.mjs +0 -18
- package/dist/browser-prod/CartLinePrice.mjs.map +0 -1
- package/dist/browser-prod/image-size.mjs +0 -80
- package/dist/browser-prod/image-size.mjs.map +0 -1
- package/dist/node-dev/CartLinePrice.js +0 -21
- package/dist/node-dev/CartLinePrice.js.map +0 -1
- package/dist/node-dev/CartLinePrice.mjs +0 -21
- package/dist/node-dev/CartLinePrice.mjs.map +0 -1
- package/dist/node-dev/image-size.js +0 -80
- package/dist/node-dev/image-size.js.map +0 -1
- package/dist/node-dev/image-size.mjs +0 -80
- package/dist/node-dev/image-size.mjs.map +0 -1
- package/dist/node-prod/CartLinePrice.js +0 -18
- package/dist/node-prod/CartLinePrice.js.map +0 -1
- package/dist/node-prod/CartLinePrice.mjs +0 -18
- package/dist/node-prod/CartLinePrice.mjs.map +0 -1
- package/dist/node-prod/image-size.js +0 -80
- package/dist/node-prod/image-size.js.map +0 -1
- package/dist/node-prod/image-size.mjs +0 -80
- package/dist/node-prod/image-size.mjs.map +0 -1
- package/dist/types/CartLinePrice.d.ts +0 -31
- package/dist/types/image-size.d.ts +0 -36
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCartActions.mjs","sources":["../../src/useCartActions.tsx"],"sourcesContent":["import {useCallback, useMemo} from 'react';\nimport {\n AttributeInput,\n CartBuyerIdentityInput,\n CartInput,\n CartLineInput,\n CartLineUpdateInput,\n CountryCode,\n Cart as CartType,\n MutationCartDiscountCodesUpdateArgs,\n MutationCartNoteUpdateArgs,\n} from './storefront-api-types.js';\nimport {\n CartAttributesUpdate,\n CartBuyerIdentityUpdate,\n CartCreate,\n CartDiscountCodesUpdate,\n CartLineAdd,\n CartLineRemove,\n CartLineUpdate,\n CartNoteUpdate,\n CartQuery,\n} from './cart-queries.js';\nimport {useCartFetch} from './cart-hooks.js';\nimport {PartialDeep} from 'type-fest';\n\ntype CartResponse = PartialDeep<CartType, {recurseIntoArrays: true}>;\n\n/**\n * The `useCartActions` hook returns helper graphql functions for Storefront Cart API\n *\n * See [cart API graphql mutations](https://shopify.dev/api/storefront/2023-
|
|
1
|
+
{"version":3,"file":"useCartActions.mjs","sources":["../../src/useCartActions.tsx"],"sourcesContent":["import {useCallback, useMemo} from 'react';\nimport {\n AttributeInput,\n CartBuyerIdentityInput,\n CartInput,\n CartLineInput,\n CartLineUpdateInput,\n CountryCode,\n Cart as CartType,\n MutationCartDiscountCodesUpdateArgs,\n MutationCartNoteUpdateArgs,\n} from './storefront-api-types.js';\nimport {\n CartAttributesUpdate,\n CartBuyerIdentityUpdate,\n CartCreate,\n CartDiscountCodesUpdate,\n CartLineAdd,\n CartLineRemove,\n CartLineUpdate,\n CartNoteUpdate,\n CartQuery,\n} from './cart-queries.js';\nimport {useCartFetch} from './cart-hooks.js';\nimport {PartialDeep} from 'type-fest';\n\ntype CartResponse = PartialDeep<CartType, {recurseIntoArrays: true}>;\n\n/**\n * The `useCartActions` hook returns helper graphql functions for Storefront Cart API\n *\n * See [cart API graphql mutations](https://shopify.dev/api/storefront/2023-04/objects/Cart)\n */\n// eslint-disable-next-line @typescript-eslint/explicit-function-return-type\nexport function useCartActions({\n numCartLines,\n cartFragment,\n countryCode = 'US',\n}: {\n /** Maximum number of cart lines to fetch. Defaults to 250 cart lines. */\n numCartLines?: number;\n /** A fragment used to query the Storefront API's [Cart object](https://shopify.dev/api/storefront/2023-04/objects/cart) for all queries and mutations. A default value is used if no argument is provided. */\n cartFragment: string;\n /** The ISO country code for i18n. */\n countryCode?: CountryCode;\n}) {\n const fetchCart = useCartFetch();\n\n const cartFetch = useCallback(\n (cartId: string) => {\n return fetchCart<{cart: CartResponse}>({\n query: CartQuery(cartFragment),\n variables: {\n id: cartId,\n numCartLines,\n country: countryCode,\n },\n });\n },\n [fetchCart, cartFragment, numCartLines, countryCode],\n );\n\n const cartCreate = useCallback(\n (cart: CartInput) => {\n return fetchCart<{cartCreate: {cart: CartResponse}}>({\n query: CartCreate(cartFragment),\n variables: {\n input: cart,\n numCartLines,\n country: countryCode,\n },\n });\n },\n [cartFragment, countryCode, fetchCart, numCartLines],\n );\n\n const cartLineAdd = useCallback(\n (cartId: string, lines: CartLineInput[]) => {\n return fetchCart<{cartLinesAdd: {cart: CartResponse}}>({\n query: CartLineAdd(cartFragment),\n variables: {\n cartId,\n lines,\n numCartLines,\n country: countryCode,\n },\n });\n },\n [cartFragment, countryCode, fetchCart, numCartLines],\n );\n\n const cartLineUpdate = useCallback(\n (cartId: string, lines: CartLineUpdateInput[]) => {\n return fetchCart<{cartLinesUpdate: {cart: CartResponse}}>({\n query: CartLineUpdate(cartFragment),\n variables: {\n cartId,\n lines,\n numCartLines,\n country: countryCode,\n },\n });\n },\n [cartFragment, countryCode, fetchCart, numCartLines],\n );\n\n const cartLineRemove = useCallback(\n (cartId: string, lines: string[]) => {\n return fetchCart<{cartLinesRemove: {cart: CartResponse}}>({\n query: CartLineRemove(cartFragment),\n variables: {\n cartId,\n lines,\n numCartLines,\n country: countryCode,\n },\n });\n },\n [cartFragment, countryCode, fetchCart, numCartLines],\n );\n\n const noteUpdate = useCallback(\n (cartId: string, note: MutationCartNoteUpdateArgs['note']) => {\n return fetchCart<{cartNoteUpdate: {cart: CartResponse}}>({\n query: CartNoteUpdate(cartFragment),\n variables: {\n cartId,\n note,\n numCartLines,\n country: countryCode,\n },\n });\n },\n [fetchCart, cartFragment, numCartLines, countryCode],\n );\n\n const buyerIdentityUpdate = useCallback(\n (cartId: string, buyerIdentity: CartBuyerIdentityInput) => {\n return fetchCart<{cartBuyerIdentityUpdate: {cart: CartResponse}}>({\n query: CartBuyerIdentityUpdate(cartFragment),\n variables: {\n cartId,\n buyerIdentity,\n numCartLines,\n country: countryCode,\n },\n });\n },\n [cartFragment, countryCode, fetchCart, numCartLines],\n );\n\n const cartAttributesUpdate = useCallback(\n (cartId: string, attributes: AttributeInput[]) => {\n return fetchCart<{cartAttributesUpdate: {cart: CartResponse}}>({\n query: CartAttributesUpdate(cartFragment),\n variables: {\n cartId,\n attributes,\n numCartLines,\n country: countryCode,\n },\n });\n },\n [cartFragment, countryCode, fetchCart, numCartLines],\n );\n\n const discountCodesUpdate = useCallback(\n (\n cartId: string,\n discountCodes: MutationCartDiscountCodesUpdateArgs['discountCodes'],\n ) => {\n return fetchCart<{cartDiscountCodesUpdate: {cart: CartResponse}}>({\n query: CartDiscountCodesUpdate(cartFragment),\n variables: {\n cartId,\n discountCodes,\n numCartLines,\n country: countryCode,\n },\n });\n },\n [cartFragment, countryCode, fetchCart, numCartLines],\n );\n\n return useMemo(\n () => ({\n cartFetch,\n cartCreate,\n cartLineAdd,\n cartLineUpdate,\n cartLineRemove,\n noteUpdate,\n buyerIdentityUpdate,\n cartAttributesUpdate,\n discountCodesUpdate,\n cartFragment,\n }),\n [\n cartFetch,\n cartCreate,\n cartLineAdd,\n cartLineUpdate,\n cartLineRemove,\n noteUpdate,\n buyerIdentityUpdate,\n cartAttributesUpdate,\n discountCodesUpdate,\n cartFragment,\n ],\n );\n}\n"],"names":[],"mappings":";;;AAkCO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA,cAAc;AAChB,GAOG;AACD,QAAM,YAAY;AAElB,QAAM,YAAY;AAAA,IAChB,CAAC,WAAmB;AAClB,aAAO,UAAgC;AAAA,QACrC,OAAO,UAAU,YAAY;AAAA,QAC7B,WAAW;AAAA,UACT,IAAI;AAAA,UACJ;AAAA,UACA,SAAS;AAAA,QACX;AAAA,MAAA,CACD;AAAA,IACH;AAAA,IACA,CAAC,WAAW,cAAc,cAAc,WAAW;AAAA,EAAA;AAGrD,QAAM,aAAa;AAAA,IACjB,CAAC,SAAoB;AACnB,aAAO,UAA8C;AAAA,QACnD,OAAO,WAAW,YAAY;AAAA,QAC9B,WAAW;AAAA,UACT,OAAO;AAAA,UACP;AAAA,UACA,SAAS;AAAA,QACX;AAAA,MAAA,CACD;AAAA,IACH;AAAA,IACA,CAAC,cAAc,aAAa,WAAW,YAAY;AAAA,EAAA;AAGrD,QAAM,cAAc;AAAA,IAClB,CAAC,QAAgB,UAA2B;AAC1C,aAAO,UAAgD;AAAA,QACrD,OAAO,YAAY,YAAY;AAAA,QAC/B,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA,SAAS;AAAA,QACX;AAAA,MAAA,CACD;AAAA,IACH;AAAA,IACA,CAAC,cAAc,aAAa,WAAW,YAAY;AAAA,EAAA;AAGrD,QAAM,iBAAiB;AAAA,IACrB,CAAC,QAAgB,UAAiC;AAChD,aAAO,UAAmD;AAAA,QACxD,OAAO,eAAe,YAAY;AAAA,QAClC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA,SAAS;AAAA,QACX;AAAA,MAAA,CACD;AAAA,IACH;AAAA,IACA,CAAC,cAAc,aAAa,WAAW,YAAY;AAAA,EAAA;AAGrD,QAAM,iBAAiB;AAAA,IACrB,CAAC,QAAgB,UAAoB;AACnC,aAAO,UAAmD;AAAA,QACxD,OAAO,eAAe,YAAY;AAAA,QAClC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA,SAAS;AAAA,QACX;AAAA,MAAA,CACD;AAAA,IACH;AAAA,IACA,CAAC,cAAc,aAAa,WAAW,YAAY;AAAA,EAAA;AAGrD,QAAM,aAAa;AAAA,IACjB,CAAC,QAAgB,SAA6C;AAC5D,aAAO,UAAkD;AAAA,QACvD,OAAO,eAAe,YAAY;AAAA,QAClC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA,SAAS;AAAA,QACX;AAAA,MAAA,CACD;AAAA,IACH;AAAA,IACA,CAAC,WAAW,cAAc,cAAc,WAAW;AAAA,EAAA;AAGrD,QAAM,sBAAsB;AAAA,IAC1B,CAAC,QAAgB,kBAA0C;AACzD,aAAO,UAA2D;AAAA,QAChE,OAAO,wBAAwB,YAAY;AAAA,QAC3C,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA,SAAS;AAAA,QACX;AAAA,MAAA,CACD;AAAA,IACH;AAAA,IACA,CAAC,cAAc,aAAa,WAAW,YAAY;AAAA,EAAA;AAGrD,QAAM,uBAAuB;AAAA,IAC3B,CAAC,QAAgB,eAAiC;AAChD,aAAO,UAAwD;AAAA,QAC7D,OAAO,qBAAqB,YAAY;AAAA,QACxC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA,SAAS;AAAA,QACX;AAAA,MAAA,CACD;AAAA,IACH;AAAA,IACA,CAAC,cAAc,aAAa,WAAW,YAAY;AAAA,EAAA;AAGrD,QAAM,sBAAsB;AAAA,IAC1B,CACE,QACA,kBACG;AACH,aAAO,UAA2D;AAAA,QAChE,OAAO,wBAAwB,YAAY;AAAA,QAC3C,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA,SAAS;AAAA,QACX;AAAA,MAAA,CACD;AAAA,IACH;AAAA,IACA,CAAC,cAAc,aAAa,WAAW,YAAY;AAAA,EAAA;AAG9C,SAAA;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EAAA;AAEJ;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const
|
|
3
|
+
const React = require("react");
|
|
4
4
|
const ShopifyProvider = require("./ShopifyProvider.js");
|
|
5
5
|
function useMoney(money) {
|
|
6
6
|
const { countryIsoCode, languageIsoCode } = ShopifyProvider.useShop();
|
|
@@ -11,7 +11,7 @@ function useMoney(money) {
|
|
|
11
11
|
);
|
|
12
12
|
}
|
|
13
13
|
const amount = parseFloat(money.amount);
|
|
14
|
-
const options =
|
|
14
|
+
const options = React.useMemo(
|
|
15
15
|
() => ({
|
|
16
16
|
style: "currency",
|
|
17
17
|
currency: money.currencyCode
|
|
@@ -38,7 +38,7 @@ function useMoney(money) {
|
|
|
38
38
|
maximumFractionDigits: 0
|
|
39
39
|
});
|
|
40
40
|
const isPartCurrency = (part) => part.type === "currency";
|
|
41
|
-
const lazyFormatters =
|
|
41
|
+
const lazyFormatters = React.useMemo(
|
|
42
42
|
() => ({
|
|
43
43
|
original: () => money,
|
|
44
44
|
currencyCode: () => money.currencyCode,
|
|
@@ -78,7 +78,7 @@ function useMoney(money) {
|
|
|
78
78
|
withoutTrailingZerosOrCurrencyFormatter
|
|
79
79
|
]
|
|
80
80
|
);
|
|
81
|
-
return
|
|
81
|
+
return React.useMemo(
|
|
82
82
|
() => new Proxy(lazyFormatters, {
|
|
83
83
|
// eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
|
|
84
84
|
get: (target, key) => {
|
|
@@ -90,7 +90,7 @@ function useMoney(money) {
|
|
|
90
90
|
);
|
|
91
91
|
}
|
|
92
92
|
function useLazyFormatter(locale, options) {
|
|
93
|
-
return
|
|
93
|
+
return React.useMemo(() => {
|
|
94
94
|
let memoized;
|
|
95
95
|
return () => memoized ?? (memoized = new Intl.NumberFormat(locale, options));
|
|
96
96
|
}, [locale, options]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useMoney.js","sources":["../../src/useMoney.tsx"],"sourcesContent":["import {useMemo} from 'react';\nimport {useShop} from './ShopifyProvider.js';\nimport {CurrencyCode, MoneyV2} from './storefront-api-types.js';\n\nexport type UseMoneyValue = {\n /**\n * The currency code from the `MoneyV2` object.\n */\n currencyCode: CurrencyCode;\n /**\n * The name for the currency code, returned by `Intl.NumberFormat`.\n */\n currencyName?: string;\n /**\n * The currency symbol returned by `Intl.NumberFormat`.\n */\n currencySymbol?: string;\n /**\n * The currency narrow symbol returned by `Intl.NumberFormat`.\n */\n currencyNarrowSymbol?: string;\n /**\n * The localized amount, without any currency symbols or non-number types from the `Intl.NumberFormat.formatToParts` parts.\n */\n amount: string;\n /**\n * All parts returned by `Intl.NumberFormat.formatToParts`.\n */\n parts: Intl.NumberFormatPart[];\n /**\n * A string returned by `new Intl.NumberFormat` for the amount and currency code,\n * using the `locale` value in the [`LocalizationProvider` component](https://shopify.dev/api/hydrogen/components/localization/localizationprovider).\n */\n localizedString: string;\n /**\n * The `MoneyV2` object provided as an argument to the hook.\n */\n original: MoneyV2;\n /**\n * A string with trailing zeros removed from the fractional part, if any exist. If there are no trailing zeros, then the fractional part remains.\n * For example, `$640.00` turns into `$640`.\n * `$640.42` remains `$640.42`.\n */\n withoutTrailingZeros: string;\n /**\n * A string without currency and without trailing zeros removed from the fractional part, if any exist. If there are no trailing zeros, then the fractional part remains.\n * For example, `$640.00` turns into `640`.\n * `$640.42` turns into `640.42`.\n */\n withoutTrailingZerosAndCurrency: string;\n};\n\n/**\n * The `useMoney` hook takes a [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2) and returns a\n * default-formatted string of the amount with the correct currency indicator, along with some of the parts provided by\n * [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat).\n * Uses `locale` from `ShopifyProvider`\n */\nexport function useMoney(money: MoneyV2): UseMoneyValue {\n const {countryIsoCode, languageIsoCode} = useShop();\n const locale = `${languageIsoCode}-${countryIsoCode}`;\n\n if (!locale) {\n throw new Error(\n `useMoney(): Unable to get 'locale' from 'useShop()', which means that 'locale' was not passed to '<ShopifyProvider/>'. 'locale' is required for 'useMoney()' to work`,\n );\n }\n\n const amount = parseFloat(money.amount);\n\n const options = useMemo(\n () => ({\n style: 'currency',\n currency: money.currencyCode,\n }),\n [money.currencyCode],\n );\n\n const defaultFormatter = useLazyFormatter(locale, options);\n\n const nameFormatter = useLazyFormatter(locale, {\n ...options,\n currencyDisplay: 'name',\n });\n\n const narrowSymbolFormatter = useLazyFormatter(locale, {\n ...options,\n currencyDisplay: 'narrowSymbol',\n });\n\n const withoutTrailingZerosFormatter = useLazyFormatter(locale, {\n ...options,\n minimumFractionDigits: 0,\n maximumFractionDigits: 0,\n });\n\n const withoutCurrencyFormatter = useLazyFormatter(locale);\n\n const withoutTrailingZerosOrCurrencyFormatter = useLazyFormatter(locale, {\n minimumFractionDigits: 0,\n maximumFractionDigits: 0,\n });\n\n const isPartCurrency = (part: Intl.NumberFormatPart): boolean =>\n part.type === 'currency';\n\n // By wrapping these properties in functions, we only\n // create formatters if they are going to be used.\n const lazyFormatters = useMemo(\n () => ({\n original: () => money,\n currencyCode: () => money.currencyCode,\n\n localizedString: () => defaultFormatter().format(amount),\n\n parts: () => defaultFormatter().formatToParts(amount),\n\n withoutTrailingZeros: () =>\n amount % 1 === 0\n ? withoutTrailingZerosFormatter().format(amount)\n : defaultFormatter().format(amount),\n\n withoutTrailingZerosAndCurrency: () =>\n amount % 1 === 0\n ? withoutTrailingZerosOrCurrencyFormatter().format(amount)\n : withoutCurrencyFormatter().format(amount),\n\n currencyName: () =>\n nameFormatter().formatToParts(amount).find(isPartCurrency)?.value ??\n money.currencyCode, // e.g. \"US dollars\"\n\n currencySymbol: () =>\n defaultFormatter().formatToParts(amount).find(isPartCurrency)?.value ??\n money.currencyCode, // e.g. \"USD\"\n\n currencyNarrowSymbol: () =>\n narrowSymbolFormatter().formatToParts(amount).find(isPartCurrency)\n ?.value ?? '', // e.g. \"$\"\n\n amount: () =>\n defaultFormatter()\n .formatToParts(amount)\n .filter((part) =>\n ['decimal', 'fraction', 'group', 'integer', 'literal'].includes(\n part.type,\n ),\n )\n .map((part) => part.value)\n .join(''),\n }),\n [\n money,\n amount,\n nameFormatter,\n defaultFormatter,\n narrowSymbolFormatter,\n withoutCurrencyFormatter,\n withoutTrailingZerosFormatter,\n withoutTrailingZerosOrCurrencyFormatter,\n ],\n );\n\n // Call functions automatically when the properties are accessed\n // to keep these functions as an implementation detail.\n return useMemo(\n () =>\n new Proxy(lazyFormatters as unknown as UseMoneyValue, {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call\n get: (target, key) => Reflect.get(target, key)?.call(null),\n }),\n [lazyFormatters],\n );\n}\n\nfunction useLazyFormatter(\n locale: string,\n options?: Intl.NumberFormatOptions,\n): () => Intl.NumberFormat {\n return useMemo(() => {\n let memoized: Intl.NumberFormat;\n return () => (memoized ??= new Intl.NumberFormat(locale, options));\n }, [locale, options]);\n}\n"],"names":["useShop","useMemo"],"mappings":";;;;AA0DO,SAAS,SAAS,OAA+B;AACtD,QAAM,EAAC,gBAAgB,gBAAe,IAAIA,gBAAQ,QAAA;AAC5C,QAAA,SAAS,GAAG,mBAAmB;AAErC,MAAI,CAAC,QAAQ;AACX,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAAA,EAEJ;AAEM,QAAA,SAAS,WAAW,MAAM,MAAM;AAEtC,QAAM,UAAUC,
|
|
1
|
+
{"version":3,"file":"useMoney.js","sources":["../../src/useMoney.tsx"],"sourcesContent":["import {useMemo} from 'react';\nimport {useShop} from './ShopifyProvider.js';\nimport {CurrencyCode, MoneyV2} from './storefront-api-types.js';\n\nexport type UseMoneyValue = {\n /**\n * The currency code from the `MoneyV2` object.\n */\n currencyCode: CurrencyCode;\n /**\n * The name for the currency code, returned by `Intl.NumberFormat`.\n */\n currencyName?: string;\n /**\n * The currency symbol returned by `Intl.NumberFormat`.\n */\n currencySymbol?: string;\n /**\n * The currency narrow symbol returned by `Intl.NumberFormat`.\n */\n currencyNarrowSymbol?: string;\n /**\n * The localized amount, without any currency symbols or non-number types from the `Intl.NumberFormat.formatToParts` parts.\n */\n amount: string;\n /**\n * All parts returned by `Intl.NumberFormat.formatToParts`.\n */\n parts: Intl.NumberFormatPart[];\n /**\n * A string returned by `new Intl.NumberFormat` for the amount and currency code,\n * using the `locale` value in the [`LocalizationProvider` component](https://shopify.dev/api/hydrogen/components/localization/localizationprovider).\n */\n localizedString: string;\n /**\n * The `MoneyV2` object provided as an argument to the hook.\n */\n original: MoneyV2;\n /**\n * A string with trailing zeros removed from the fractional part, if any exist. If there are no trailing zeros, then the fractional part remains.\n * For example, `$640.00` turns into `$640`.\n * `$640.42` remains `$640.42`.\n */\n withoutTrailingZeros: string;\n /**\n * A string without currency and without trailing zeros removed from the fractional part, if any exist. If there are no trailing zeros, then the fractional part remains.\n * For example, `$640.00` turns into `640`.\n * `$640.42` turns into `640.42`.\n */\n withoutTrailingZerosAndCurrency: string;\n};\n\n/**\n * The `useMoney` hook takes a [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2) and returns a\n * default-formatted string of the amount with the correct currency indicator, along with some of the parts provided by\n * [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat).\n * Uses `locale` from `ShopifyProvider`\n */\nexport function useMoney(money: MoneyV2): UseMoneyValue {\n const {countryIsoCode, languageIsoCode} = useShop();\n const locale = `${languageIsoCode}-${countryIsoCode}`;\n\n if (!locale) {\n throw new Error(\n `useMoney(): Unable to get 'locale' from 'useShop()', which means that 'locale' was not passed to '<ShopifyProvider/>'. 'locale' is required for 'useMoney()' to work`,\n );\n }\n\n const amount = parseFloat(money.amount);\n\n const options = useMemo(\n () => ({\n style: 'currency',\n currency: money.currencyCode,\n }),\n [money.currencyCode],\n );\n\n const defaultFormatter = useLazyFormatter(locale, options);\n\n const nameFormatter = useLazyFormatter(locale, {\n ...options,\n currencyDisplay: 'name',\n });\n\n const narrowSymbolFormatter = useLazyFormatter(locale, {\n ...options,\n currencyDisplay: 'narrowSymbol',\n });\n\n const withoutTrailingZerosFormatter = useLazyFormatter(locale, {\n ...options,\n minimumFractionDigits: 0,\n maximumFractionDigits: 0,\n });\n\n const withoutCurrencyFormatter = useLazyFormatter(locale);\n\n const withoutTrailingZerosOrCurrencyFormatter = useLazyFormatter(locale, {\n minimumFractionDigits: 0,\n maximumFractionDigits: 0,\n });\n\n const isPartCurrency = (part: Intl.NumberFormatPart): boolean =>\n part.type === 'currency';\n\n // By wrapping these properties in functions, we only\n // create formatters if they are going to be used.\n const lazyFormatters = useMemo(\n () => ({\n original: () => money,\n currencyCode: () => money.currencyCode,\n\n localizedString: () => defaultFormatter().format(amount),\n\n parts: () => defaultFormatter().formatToParts(amount),\n\n withoutTrailingZeros: () =>\n amount % 1 === 0\n ? withoutTrailingZerosFormatter().format(amount)\n : defaultFormatter().format(amount),\n\n withoutTrailingZerosAndCurrency: () =>\n amount % 1 === 0\n ? withoutTrailingZerosOrCurrencyFormatter().format(amount)\n : withoutCurrencyFormatter().format(amount),\n\n currencyName: () =>\n nameFormatter().formatToParts(amount).find(isPartCurrency)?.value ??\n money.currencyCode, // e.g. \"US dollars\"\n\n currencySymbol: () =>\n defaultFormatter().formatToParts(amount).find(isPartCurrency)?.value ??\n money.currencyCode, // e.g. \"USD\"\n\n currencyNarrowSymbol: () =>\n narrowSymbolFormatter().formatToParts(amount).find(isPartCurrency)\n ?.value ?? '', // e.g. \"$\"\n\n amount: () =>\n defaultFormatter()\n .formatToParts(amount)\n .filter((part) =>\n ['decimal', 'fraction', 'group', 'integer', 'literal'].includes(\n part.type,\n ),\n )\n .map((part) => part.value)\n .join(''),\n }),\n [\n money,\n amount,\n nameFormatter,\n defaultFormatter,\n narrowSymbolFormatter,\n withoutCurrencyFormatter,\n withoutTrailingZerosFormatter,\n withoutTrailingZerosOrCurrencyFormatter,\n ],\n );\n\n // Call functions automatically when the properties are accessed\n // to keep these functions as an implementation detail.\n return useMemo(\n () =>\n new Proxy(lazyFormatters as unknown as UseMoneyValue, {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call\n get: (target, key) => Reflect.get(target, key)?.call(null),\n }),\n [lazyFormatters],\n );\n}\n\nfunction useLazyFormatter(\n locale: string,\n options?: Intl.NumberFormatOptions,\n): () => Intl.NumberFormat {\n return useMemo(() => {\n let memoized: Intl.NumberFormat;\n return () => (memoized ??= new Intl.NumberFormat(locale, options));\n }, [locale, options]);\n}\n"],"names":["useShop","useMemo"],"mappings":";;;;AA0DO,SAAS,SAAS,OAA+B;AACtD,QAAM,EAAC,gBAAgB,gBAAe,IAAIA,gBAAQ,QAAA;AAC5C,QAAA,SAAS,GAAG,mBAAmB;AAErC,MAAI,CAAC,QAAQ;AACX,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAAA,EAEJ;AAEM,QAAA,SAAS,WAAW,MAAM,MAAM;AAEtC,QAAM,UAAUC,MAAA;AAAA,IACd,OAAO;AAAA,MACL,OAAO;AAAA,MACP,UAAU,MAAM;AAAA,IAAA;AAAA,IAElB,CAAC,MAAM,YAAY;AAAA,EAAA;AAGf,QAAA,mBAAmB,iBAAiB,QAAQ,OAAO;AAEnD,QAAA,gBAAgB,iBAAiB,QAAQ;AAAA,IAC7C,GAAG;AAAA,IACH,iBAAiB;AAAA,EAAA,CAClB;AAEK,QAAA,wBAAwB,iBAAiB,QAAQ;AAAA,IACrD,GAAG;AAAA,IACH,iBAAiB;AAAA,EAAA,CAClB;AAEK,QAAA,gCAAgC,iBAAiB,QAAQ;AAAA,IAC7D,GAAG;AAAA,IACH,uBAAuB;AAAA,IACvB,uBAAuB;AAAA,EAAA,CACxB;AAEK,QAAA,2BAA2B,iBAAiB,MAAM;AAElD,QAAA,0CAA0C,iBAAiB,QAAQ;AAAA,IACvE,uBAAuB;AAAA,IACvB,uBAAuB;AAAA,EAAA,CACxB;AAED,QAAM,iBAAiB,CAAC,SACtB,KAAK,SAAS;AAIhB,QAAM,iBAAiBA,MAAA;AAAA,IACrB,OAAO;AAAA,MACL,UAAU,MAAM;AAAA,MAChB,cAAc,MAAM,MAAM;AAAA,MAE1B,iBAAiB,MAAM,mBAAmB,OAAO,MAAM;AAAA,MAEvD,OAAO,MAAM,mBAAmB,cAAc,MAAM;AAAA,MAEpD,sBAAsB,MACpB,SAAS,MAAM,IACX,8BAAA,EAAgC,OAAO,MAAM,IAC7C,mBAAmB,OAAO,MAAM;AAAA,MAEtC,iCAAiC,MAC/B,SAAS,MAAM,IACX,wCAAA,EAA0C,OAAO,MAAM,IACvD,2BAA2B,OAAO,MAAM;AAAA,MAE9C,cAAc,MACZ;;AAAA,sCAAgB,cAAc,MAAM,EAAE,KAAK,cAAc,MAAzD,mBAA4D,UAC5D,MAAM;AAAA;AAAA;AAAA,MAER,gBAAgB,MACd;;AAAA,yCAAmB,cAAc,MAAM,EAAE,KAAK,cAAc,MAA5D,mBAA+D,UAC/D,MAAM;AAAA;AAAA;AAAA,MAER,sBAAsB,MAAA;;AACpB,4CAAwB,EAAA,cAAc,MAAM,EAAE,KAAK,cAAc,MAAjE,mBACI,UAAS;AAAA;AAAA;AAAA,MAEf,QAAQ,MACN,iBAAA,EACG,cAAc,MAAM,EACpB;AAAA,QAAO,CAAC,SACP,CAAC,WAAW,YAAY,SAAS,WAAW,SAAS,EAAE;AAAA,UACrD,KAAK;AAAA,QACP;AAAA,MAAA,EAED,IAAI,CAAC,SAAS,KAAK,KAAK,EACxB,KAAK,EAAE;AAAA,IAAA;AAAA,IAEd;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EAAA;AAKK,SAAAA,MAAA;AAAA,IACL,MACE,IAAI,MAAM,gBAA4C;AAAA;AAAA,MAEpD,KAAK,CAAC,QAAQ;;AAAQ,6BAAQ,IAAI,QAAQ,GAAG,MAAvB,mBAA0B,KAAK;AAAA;AAAA,IAAI,CAC1D;AAAA,IACH,CAAC,cAAc;AAAA,EAAA;AAEnB;AAEA,SAAS,iBACP,QACA,SACyB;AACzB,SAAOA,cAAQ,MAAM;AACf,QAAA;AACJ,WAAO,MAAO,wBAAa,IAAI,KAAK,aAAa,QAAQ,OAAO;AAAA,EAAA,GAC/D,CAAC,QAAQ,OAAO,CAAC;AACtB;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const
|
|
3
|
+
const React = require("react");
|
|
4
4
|
const cookie = require("worktop/cookie");
|
|
5
5
|
const cartConstants = require("./cart-constants.js");
|
|
6
6
|
const cookiesUtils = require("./cookies-utils.js");
|
|
@@ -8,7 +8,7 @@ const longTermLength = 60 * 60 * 24 * 360 * 1;
|
|
|
8
8
|
const shortTermLength = 60 * 30;
|
|
9
9
|
function useShopifyCookies(options) {
|
|
10
10
|
const { hasUserConsent = false, domain = "" } = options || {};
|
|
11
|
-
|
|
11
|
+
React.useEffect(() => {
|
|
12
12
|
const cookies = cookiesUtils.getShopifyCookies(document.cookie);
|
|
13
13
|
if (hasUserConsent) {
|
|
14
14
|
setCookie(
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useShopifyCookies.js","sources":["../../src/useShopifyCookies.tsx"],"sourcesContent":["import {useEffect} from 'react';\nimport {stringify} from 'worktop/cookie';\nimport {SHOPIFY_Y, SHOPIFY_S} from './cart-constants.js';\nimport {buildUUID, getShopifyCookies} from './cookies-utils.js';\n\nconst longTermLength = 60 * 60 * 24 * 360 * 1; // ~1 year expiry\nconst shortTermLength = 60 * 30; // 30 mins\n\ntype UseShopifyCookiesOptions = {\n /**\n * If set to `false`, Shopify cookies will be removed.\n * If set to `true`, Shopify unique user token cookie will have cookie expiry of 1 year.\n * Defaults to false.\n **/\n hasUserConsent?: boolean;\n /**\n * The domain scope of the cookie. Defaults to empty string.\n **/\n domain?: string;\n};\n\nexport function useShopifyCookies(options?: UseShopifyCookiesOptions): void {\n const {hasUserConsent = false, domain = ''} = options || {};\n useEffect(() => {\n const cookies = getShopifyCookies(document.cookie);\n\n /**\n * Set user and session cookies and refresh the expiry time\n */\n if (hasUserConsent) {\n setCookie(\n SHOPIFY_Y,\n cookies[SHOPIFY_Y] || buildUUID(),\n longTermLength,\n domain,\n );\n setCookie(\n SHOPIFY_S,\n cookies[SHOPIFY_S] || buildUUID(),\n shortTermLength,\n domain,\n );\n } else {\n setCookie(SHOPIFY_Y, '', 0, domain);\n setCookie(SHOPIFY_S, '', 0, domain);\n }\n });\n}\n\nfunction setCookie(\n name: string,\n value: string,\n maxage: number,\n domain: string,\n): void {\n document.cookie = stringify(name, value, {\n maxage,\n domain,\n samesite: 'Lax',\n path: '/',\n });\n}\n"],"names":["useEffect","getShopifyCookies","SHOPIFY_Y","buildUUID","SHOPIFY_S","stringify"],"mappings":";;;;;;AAKA,MAAM,iBAAiB,KAAK,KAAK,KAAK,MAAM;AAC5C,MAAM,kBAAkB,KAAK;AAetB,SAAS,kBAAkB,SAA0C;AAC1E,QAAM,EAAC,iBAAiB,OAAO,SAAS,GAAE,IAAI,WAAW;AACzDA,
|
|
1
|
+
{"version":3,"file":"useShopifyCookies.js","sources":["../../src/useShopifyCookies.tsx"],"sourcesContent":["import {useEffect} from 'react';\nimport {stringify} from 'worktop/cookie';\nimport {SHOPIFY_Y, SHOPIFY_S} from './cart-constants.js';\nimport {buildUUID, getShopifyCookies} from './cookies-utils.js';\n\nconst longTermLength = 60 * 60 * 24 * 360 * 1; // ~1 year expiry\nconst shortTermLength = 60 * 30; // 30 mins\n\ntype UseShopifyCookiesOptions = {\n /**\n * If set to `false`, Shopify cookies will be removed.\n * If set to `true`, Shopify unique user token cookie will have cookie expiry of 1 year.\n * Defaults to false.\n **/\n hasUserConsent?: boolean;\n /**\n * The domain scope of the cookie. Defaults to empty string.\n **/\n domain?: string;\n};\n\nexport function useShopifyCookies(options?: UseShopifyCookiesOptions): void {\n const {hasUserConsent = false, domain = ''} = options || {};\n useEffect(() => {\n const cookies = getShopifyCookies(document.cookie);\n\n /**\n * Set user and session cookies and refresh the expiry time\n */\n if (hasUserConsent) {\n setCookie(\n SHOPIFY_Y,\n cookies[SHOPIFY_Y] || buildUUID(),\n longTermLength,\n domain,\n );\n setCookie(\n SHOPIFY_S,\n cookies[SHOPIFY_S] || buildUUID(),\n shortTermLength,\n domain,\n );\n } else {\n setCookie(SHOPIFY_Y, '', 0, domain);\n setCookie(SHOPIFY_S, '', 0, domain);\n }\n });\n}\n\nfunction setCookie(\n name: string,\n value: string,\n maxage: number,\n domain: string,\n): void {\n document.cookie = stringify(name, value, {\n maxage,\n domain,\n samesite: 'Lax',\n path: '/',\n });\n}\n"],"names":["useEffect","getShopifyCookies","SHOPIFY_Y","buildUUID","SHOPIFY_S","stringify"],"mappings":";;;;;;AAKA,MAAM,iBAAiB,KAAK,KAAK,KAAK,MAAM;AAC5C,MAAM,kBAAkB,KAAK;AAetB,SAAS,kBAAkB,SAA0C;AAC1E,QAAM,EAAC,iBAAiB,OAAO,SAAS,GAAE,IAAI,WAAW;AACzDA,QAAAA,UAAU,MAAM;AACR,UAAA,UAAUC,aAAAA,kBAAkB,SAAS,MAAM;AAKjD,QAAI,gBAAgB;AAClB;AAAA,QACEC,cAAA;AAAA,QACA,QAAQA,cAAAA,SAAS,KAAKC,uBAAU;AAAA,QAChC;AAAA,QACA;AAAA,MAAA;AAEF;AAAA,QACEC,cAAA;AAAA,QACA,QAAQA,cAAAA,SAAS,KAAKD,uBAAU;AAAA,QAChC;AAAA,QACA;AAAA,MAAA;AAAA,IACF,OACK;AACK,gBAAAD,cAAAA,WAAW,IAAI,GAAG,MAAM;AACxB,gBAAAE,cAAAA,WAAW,IAAI,GAAG,MAAM;AAAA,IACpC;AAAA,EAAA,CACD;AACH;AAEA,SAAS,UACP,MACA,OACA,QACA,QACM;AACG,WAAA,SAASC,iBAAU,MAAM,OAAO;AAAA,IACvC;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,MAAM;AAAA,EAAA,CACP;AACH;;"}
|
|
@@ -43,11 +43,11 @@ type CartProviderProps = {
|
|
|
43
43
|
onAttributesUpdateComplete?: () => void;
|
|
44
44
|
/** A callback that is invoked when the process to update the cart discount codes completes */
|
|
45
45
|
onDiscountCodesUpdateComplete?: () => void;
|
|
46
|
-
/** An object with fields that correspond to the Storefront API's [Cart object](https://shopify.dev/api/storefront/
|
|
46
|
+
/** An object with fields that correspond to the Storefront API's [Cart object](https://shopify.dev/api/storefront/2023-04/objects/cart). */
|
|
47
47
|
data?: PartialDeep<CartType, {
|
|
48
48
|
recurseIntoArrays: true;
|
|
49
49
|
}>;
|
|
50
|
-
/** A fragment used to query the Storefront API's [Cart object](https://shopify.dev/api/storefront/
|
|
50
|
+
/** A fragment used to query the Storefront API's [Cart object](https://shopify.dev/api/storefront/2023-04/objects/cart) for all queries and mutations. A default value is used if no argument is provided. */
|
|
51
51
|
cartFragment?: string;
|
|
52
52
|
/** A customer access token that's accessible on the server if there's a customer login. */
|
|
53
53
|
customerAccessToken?: CartBuyerIdentityInput['customerAccessToken'];
|
|
@@ -61,6 +61,8 @@ type CartProviderProps = {
|
|
|
61
61
|
*
|
|
62
62
|
* There are props that trigger when a call to the Storefront API is made, such as `onLineAdd={}` when a line is added to the cart.
|
|
63
63
|
* There are also props that trigger when a call to the Storefront API is completed, such as `onLineAddComplete={}` when the fetch request for adding a line to the cart completes.
|
|
64
|
+
*
|
|
65
|
+
* The `CartProvider` component must be a descendant of the `ShopifyProvider` component.
|
|
64
66
|
*/
|
|
65
67
|
export declare function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLineRemove, onLineUpdate, onNoteUpdate, onBuyerIdentityUpdate, onAttributesUpdate, onDiscountCodesUpdate, onCreateComplete, onLineAddComplete, onLineRemoveComplete, onLineUpdateComplete, onNoteUpdateComplete, onBuyerIdentityUpdateComplete, onAttributesUpdateComplete, onDiscountCodesUpdateComplete, data: cart, cartFragment, customerAccessToken, countryCode, }: CartProviderProps): JSX.Element;
|
|
66
68
|
/** Check for storage availability funciton obtained from
|
package/dist/types/Image.d.ts
CHANGED
|
@@ -1,56 +1,253 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
+
import type { PartialDeep } from 'type-fest';
|
|
2
3
|
import type { Image as ImageType } from './storefront-api-types.js';
|
|
3
|
-
|
|
4
|
-
|
|
4
|
+
type SrcSetOptions = {
|
|
5
|
+
intervals: number;
|
|
6
|
+
startingWidth: number;
|
|
7
|
+
incrementSize: number;
|
|
8
|
+
placeholderWidth: number;
|
|
9
|
+
};
|
|
10
|
+
type HtmlImageProps = React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>;
|
|
11
|
+
export type LoaderParams = {
|
|
12
|
+
/** The base URL of the image */
|
|
13
|
+
src?: ImageType['url'];
|
|
14
|
+
/** The URL param that controls width */
|
|
15
|
+
width?: number;
|
|
16
|
+
/** The URL param that controls height */
|
|
17
|
+
height?: number;
|
|
18
|
+
/** The URL param that controls the cropping region */
|
|
19
|
+
crop?: Crop;
|
|
20
|
+
};
|
|
21
|
+
export type Loader = (params: LoaderParams) => string;
|
|
22
|
+
/** Legacy type for backwards compatibility *
|
|
23
|
+
* @deprecated Use `crop`, `width`, `height`, and `src` props, and/or `data` prop. Or pass a custom `loader` with `LoaderParams` */
|
|
5
24
|
export type ShopifyLoaderOptions = {
|
|
6
|
-
|
|
7
|
-
|
|
25
|
+
/** The base URL of the image */
|
|
26
|
+
src?: ImageType['url'];
|
|
27
|
+
/** The URL param that controls width */
|
|
8
28
|
width?: HtmlImageProps['width'] | ImageType['width'];
|
|
29
|
+
/** The URL param that controls height */
|
|
9
30
|
height?: HtmlImageProps['height'] | ImageType['height'];
|
|
31
|
+
/** The URL param that controls the cropping region */
|
|
32
|
+
crop?: Crop;
|
|
10
33
|
};
|
|
11
|
-
|
|
12
|
-
type
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
*
|
|
19
|
-
|
|
34
|
+
type Crop = 'center' | 'top' | 'bottom' | 'left' | 'right';
|
|
35
|
+
export type HydrogenImageProps = React.ImgHTMLAttributes<HTMLImageElement> & {
|
|
36
|
+
/** The aspect ratio of the image, in the format of `width/height`.
|
|
37
|
+
*
|
|
38
|
+
* @example
|
|
39
|
+
* ```
|
|
40
|
+
* <Image data={productImage} aspectRatio="4/5" />
|
|
41
|
+
* ```
|
|
42
|
+
*/
|
|
43
|
+
aspectRatio?: string;
|
|
44
|
+
/** The crop position of the image.
|
|
45
|
+
*
|
|
46
|
+
* @remarks
|
|
47
|
+
* In the event that AspectRatio is set, without specifying a crop,
|
|
48
|
+
* the Shopify CDN won't return the expected image.
|
|
49
|
+
*
|
|
50
|
+
* @defaultValue `center`
|
|
20
51
|
*/
|
|
21
|
-
|
|
52
|
+
crop?: Crop;
|
|
53
|
+
/** Data mapping to the Storefront API `Image` object. Must be an Image object.
|
|
54
|
+
* Optionally, import the `IMAGE_FRAGMENT` to use in your GraphQL queries.
|
|
55
|
+
*
|
|
56
|
+
* @example
|
|
57
|
+
* ```
|
|
58
|
+
* import {IMAGE_FRAGMENT, Image} from '@shopify/hydrogen';
|
|
59
|
+
*
|
|
60
|
+
* export const IMAGE_QUERY = `#graphql
|
|
61
|
+
* ${IMAGE_FRAGMENT}
|
|
62
|
+
* query {
|
|
63
|
+
* product {
|
|
64
|
+
* featuredImage {
|
|
65
|
+
* ...Image
|
|
66
|
+
* }
|
|
67
|
+
* }
|
|
68
|
+
* }`
|
|
69
|
+
*
|
|
70
|
+
* <Image
|
|
71
|
+
* data={productImage}
|
|
72
|
+
* sizes="(min-width: 45em) 50vw, 100vw"
|
|
73
|
+
* aspectRatio="4/5"
|
|
74
|
+
* />
|
|
75
|
+
* ```
|
|
76
|
+
*
|
|
77
|
+
* Image: {@link https://shopify.dev/api/storefront/reference/common-objects/image}
|
|
78
|
+
*/
|
|
79
|
+
data?: PartialDeep<ImageType, {
|
|
22
80
|
recurseIntoArrays: true;
|
|
23
81
|
}>;
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
*
|
|
30
|
-
* `loaderOptions` object (for example, `{scale: 2}`). The object shape is `ShopifyLoaderOptions`.
|
|
82
|
+
key?: React.Key;
|
|
83
|
+
/** A function that returns a URL string for an image.
|
|
84
|
+
*
|
|
85
|
+
* @remarks
|
|
86
|
+
* By default, this uses Shopify’s CDN {@link https://cdn.shopify.com/} but you can provide
|
|
87
|
+
* your own function to use a another provider, as long as they support URL based image transformations.
|
|
31
88
|
*/
|
|
89
|
+
loader?: Loader;
|
|
90
|
+
/** @deprecated Use `crop`, `width`, `height`, and `src` props, and/or `data` prop */
|
|
32
91
|
loaderOptions?: ShopifyLoaderOptions;
|
|
33
|
-
/**
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
src?: never;
|
|
37
|
-
/**
|
|
38
|
-
* An array of pixel widths to overwrite the default generated srcset. For example, `[300, 600, 800]`.
|
|
39
|
-
*/
|
|
92
|
+
/** An optional prop you can use to change the default srcSet generation behaviour */
|
|
93
|
+
srcSetOptions?: SrcSetOptions;
|
|
94
|
+
/** @deprecated Autocalculated, use only `width` prop, or srcSetOptions */
|
|
40
95
|
widths?: (HtmlImageProps['width'] | ImageType['width'])[];
|
|
41
96
|
};
|
|
42
97
|
/**
|
|
43
|
-
*
|
|
44
|
-
|
|
98
|
+
* A Storefront API GraphQL fragment that can be used to query for an image.
|
|
99
|
+
*/
|
|
100
|
+
export declare const IMAGE_FRAGMENT = "#graphql\n fragment Image on Image {\n altText\n url\n width\n height\n }\n";
|
|
101
|
+
/**
|
|
102
|
+
* Hydrgen’s Image component is a wrapper around the HTML image element.
|
|
103
|
+
* It supports the same props as the HTML `img` element, but automatically
|
|
104
|
+
* generates the srcSet and sizes attributes for you. For most use cases,
|
|
105
|
+
* you’ll want to set the `aspectRatio` prop to ensure the image is sized
|
|
106
|
+
* correctly.
|
|
107
|
+
*
|
|
108
|
+
* @remarks
|
|
109
|
+
* - `decoding` is set to `async` by default.
|
|
110
|
+
* - `loading` is set to `lazy` by default.
|
|
111
|
+
* - `alt` will automatically be set to the `altText` from the Storefront API if passed in the `data` prop
|
|
112
|
+
* - `src` will automatically be set to the `url` from the Storefront API if passed in the `data` prop
|
|
113
|
+
*
|
|
114
|
+
* @example
|
|
115
|
+
* A responsive image with a 4:5 aspect ratio:
|
|
116
|
+
* ```
|
|
117
|
+
* <Image
|
|
118
|
+
* data={product.featuredImage}
|
|
119
|
+
* aspectRatio="4/5"
|
|
120
|
+
* sizes="(min-width: 45em) 40vw, 100vw"
|
|
121
|
+
* />
|
|
122
|
+
* ```
|
|
123
|
+
* @example
|
|
124
|
+
* A fixed size image:
|
|
125
|
+
* ```
|
|
126
|
+
* <Image
|
|
127
|
+
* data={product.featuredImage}
|
|
128
|
+
* width={100}
|
|
129
|
+
* height={100}
|
|
130
|
+
* />
|
|
131
|
+
* ```
|
|
132
|
+
*
|
|
133
|
+
* {@link https://shopify.dev/docs/api/hydrogen-react/components/image}
|
|
134
|
+
*/
|
|
135
|
+
export declare const Image: React.ForwardRefExoticComponent<React.ImgHTMLAttributes<HTMLImageElement> & {
|
|
136
|
+
/** The aspect ratio of the image, in the format of `width/height`.
|
|
137
|
+
*
|
|
138
|
+
* @example
|
|
139
|
+
* ```
|
|
140
|
+
* <Image data={productImage} aspectRatio="4/5" />
|
|
141
|
+
* ```
|
|
142
|
+
*/
|
|
143
|
+
aspectRatio?: string | undefined;
|
|
144
|
+
/** The crop position of the image.
|
|
145
|
+
*
|
|
146
|
+
* @remarks
|
|
147
|
+
* In the event that AspectRatio is set, without specifying a crop,
|
|
148
|
+
* the Shopify CDN won't return the expected image.
|
|
149
|
+
*
|
|
150
|
+
* @defaultValue `center`
|
|
151
|
+
*/
|
|
152
|
+
crop?: Crop | undefined;
|
|
153
|
+
/** Data mapping to the Storefront API `Image` object. Must be an Image object.
|
|
154
|
+
* Optionally, import the `IMAGE_FRAGMENT` to use in your GraphQL queries.
|
|
155
|
+
*
|
|
156
|
+
* @example
|
|
157
|
+
* ```
|
|
158
|
+
* import {IMAGE_FRAGMENT, Image} from '@shopify/hydrogen';
|
|
159
|
+
*
|
|
160
|
+
* export const IMAGE_QUERY = `#graphql
|
|
161
|
+
* ${IMAGE_FRAGMENT}
|
|
162
|
+
* query {
|
|
163
|
+
* product {
|
|
164
|
+
* featuredImage {
|
|
165
|
+
* ...Image
|
|
166
|
+
* }
|
|
167
|
+
* }
|
|
168
|
+
* }`
|
|
169
|
+
*
|
|
170
|
+
* <Image
|
|
171
|
+
* data={productImage}
|
|
172
|
+
* sizes="(min-width: 45em) 50vw, 100vw"
|
|
173
|
+
* aspectRatio="4/5"
|
|
174
|
+
* />
|
|
175
|
+
* ```
|
|
176
|
+
*
|
|
177
|
+
* Image: {@link https://shopify.dev/api/storefront/reference/common-objects/image}
|
|
178
|
+
*/
|
|
179
|
+
data?: import("type-fest/source/partial-deep.js").PartialObjectDeep<ImageType, {
|
|
180
|
+
recurseIntoArrays: true;
|
|
181
|
+
}> | undefined;
|
|
182
|
+
key?: React.Key | undefined;
|
|
183
|
+
/** A function that returns a URL string for an image.
|
|
184
|
+
*
|
|
185
|
+
* @remarks
|
|
186
|
+
* By default, this uses Shopify’s CDN {@link https://cdn.shopify.com/} but you can provide
|
|
187
|
+
* your own function to use a another provider, as long as they support URL based image transformations.
|
|
188
|
+
*/
|
|
189
|
+
loader?: Loader | undefined;
|
|
190
|
+
/** @deprecated Use `crop`, `width`, `height`, and `src` props, and/or `data` prop */
|
|
191
|
+
loaderOptions?: ShopifyLoaderOptions | undefined;
|
|
192
|
+
/** An optional prop you can use to change the default srcSet generation behaviour */
|
|
193
|
+
srcSetOptions?: SrcSetOptions | undefined;
|
|
194
|
+
/** @deprecated Autocalculated, use only `width` prop, or srcSetOptions */
|
|
195
|
+
widths?: (string | import("./storefront-api-types.js").Maybe<number> | undefined)[] | undefined;
|
|
196
|
+
} & React.RefAttributes<HTMLImageElement>>;
|
|
197
|
+
/**
|
|
198
|
+
* The shopifyLoader function is a simple utility function that takes a src, width,
|
|
199
|
+
* height, and crop and returns a string that can be used as the src for an image.
|
|
200
|
+
* It can be used with the Hydrogen Image component or with the next/image component.
|
|
201
|
+
* (or any others that accept equivalent configuration)
|
|
202
|
+
* @param src - The source URL of the image, e.g. `https://cdn.shopify.com/static/sample-images/garnished.jpeg`
|
|
203
|
+
* @param width - The width of the image, e.g. `100`
|
|
204
|
+
* @param height - The height of the image, e.g. `100`
|
|
205
|
+
* @param crop - The crop of the image, e.g. `center`
|
|
206
|
+
* @returns A Shopify image URL with the correct query parameters, e.g. `https://cdn.shopify.com/static/sample-images/garnished.jpeg?width=100&height=100&crop=center`
|
|
45
207
|
*
|
|
46
|
-
*
|
|
47
|
-
*
|
|
48
|
-
*
|
|
49
|
-
*
|
|
208
|
+
* @example
|
|
209
|
+
* ```
|
|
210
|
+
* shopifyLoader({
|
|
211
|
+
* src: 'https://cdn.shopify.com/static/sample-images/garnished.jpeg',
|
|
212
|
+
* width: 100,
|
|
213
|
+
* height: 100,
|
|
214
|
+
* crop: 'center',
|
|
215
|
+
* })
|
|
216
|
+
* ```
|
|
217
|
+
*/
|
|
218
|
+
export declare function shopifyLoader({ src, width, height, crop }: LoaderParams): string;
|
|
219
|
+
/**
|
|
220
|
+
* This function generates a srcSet for Shopify images.
|
|
221
|
+
* @param src - The source URL of the image, e.g. https://cdn.shopify.com/static/sample-images/garnished.jpeg
|
|
222
|
+
* @param sizesArray - An array of objects containing the `width`, `height`, and `crop` of the image, e.g. [\{width: 200, height: 200, crop: 'center'\}, \{width: 400, height: 400, crop: 'center'\}]
|
|
223
|
+
* @param loader - A function that takes a Shopify image URL and returns a Shopify image URL with the correct query parameters
|
|
224
|
+
* @returns A srcSet for Shopify images, e.g. 'https://cdn.shopify.com/static/sample-images/garnished.jpeg?width=200&height=200&crop=center 200w, https://cdn.shopify.com/static/sample-images/garnished.jpeg?width=400&height=400&crop=center 400w'
|
|
225
|
+
*/
|
|
226
|
+
export declare function generateSrcSet(src?: string, sizesArray?: Array<{
|
|
227
|
+
width?: number;
|
|
228
|
+
height?: number;
|
|
229
|
+
crop?: Crop;
|
|
230
|
+
}>, loader?: Loader): string;
|
|
231
|
+
/**
|
|
232
|
+
* This function generates an array of sizes for Shopify images, for both fixed and responsive images.
|
|
233
|
+
* @param width - The CSS width of the image
|
|
234
|
+
* @param intervals - The number of intervals to generate
|
|
235
|
+
* @param startingWidth - The starting width of the image
|
|
236
|
+
* @param incrementSize - The size of each interval
|
|
237
|
+
* @returns An array of widths
|
|
238
|
+
*/
|
|
239
|
+
export declare function generateImageWidths(width: string | number | undefined, intervals: number, startingWidth: number, incrementSize: number): number[];
|
|
240
|
+
/**
|
|
241
|
+
* Simple utility function to convert an aspect ratio CSS string to a decimal, currently only supports values like `1/1`, not `0.5`, or `auto`
|
|
242
|
+
* @param aspectRatio - The aspect ratio of the image, e.g. `1/1`
|
|
243
|
+
* @returns The aspect ratio as a number, e.g. `0.5`
|
|
50
244
|
*
|
|
51
|
-
*
|
|
52
|
-
* provided that both `data.width` and `data.height` are available. If `data.width` and `data.height` aren't available, then the aspect ratio cannot be determined and the missing
|
|
53
|
-
* value will remain as `null`
|
|
245
|
+
* {@link https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio}
|
|
54
246
|
*/
|
|
55
|
-
export declare function
|
|
247
|
+
export declare function parseAspectRatio(aspectRatio?: string): number | undefined;
|
|
248
|
+
export declare function generateSizes(imageWidths?: number[], aspectRatio?: string, crop?: Crop): {
|
|
249
|
+
width: number;
|
|
250
|
+
height: number | undefined;
|
|
251
|
+
crop: Crop;
|
|
252
|
+
}[] | undefined;
|
|
56
253
|
export {};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type
|
|
1
|
+
import { type HydrogenImageProps } from './Image.js';
|
|
2
2
|
import { Video } from './Video.js';
|
|
3
3
|
import { ExternalVideo } from './ExternalVideo.js';
|
|
4
4
|
import { ModelViewer } from './ModelViewer.js';
|
|
@@ -16,7 +16,7 @@ export interface MediaFileProps extends BaseProps {
|
|
|
16
16
|
}
|
|
17
17
|
type MediaOptions = {
|
|
18
18
|
/** Props that will only apply when an `<Image />` is rendered */
|
|
19
|
-
image?: Omit<
|
|
19
|
+
image?: Omit<HydrogenImageProps, 'data'>;
|
|
20
20
|
/** Props that will only apply when a `<Video />` is rendered */
|
|
21
21
|
video?: Omit<React.ComponentProps<typeof Video>, 'data'>;
|
|
22
22
|
/** Props that will only apply when an `<ExternalVideo />` is rendered */
|
|
@@ -14,7 +14,7 @@ type ModelViewerProps = Omit<PartialDeep<JSX.IntrinsicElements['model-viewer'],
|
|
|
14
14
|
recurseIntoArrays: true;
|
|
15
15
|
}>, 'src'> & ModelViewerBaseProps;
|
|
16
16
|
type ModelViewerBaseProps = {
|
|
17
|
-
/** An object with fields that correspond to the Storefront API's [Model3D object](https://shopify.dev/api/storefront/
|
|
17
|
+
/** An object with fields that correspond to the Storefront API's [Model3D object](https://shopify.dev/api/storefront/2023-04/objects/model3d). */
|
|
18
18
|
data: PartialDeep<Model3d, {
|
|
19
19
|
recurseIntoArrays: true;
|
|
20
20
|
}>;
|
package/dist/types/Money.d.ts
CHANGED
|
@@ -12,7 +12,7 @@ export interface MoneyPropsBase<ComponentGeneric extends React.ElementType> {
|
|
|
12
12
|
withoutCurrency?: boolean;
|
|
13
13
|
/** Whether to remove trailing zeros (fractional money) from the output. */
|
|
14
14
|
withoutTrailingZeros?: boolean;
|
|
15
|
-
/** A [UnitPriceMeasurement object](https://shopify.dev/api/storefront/
|
|
15
|
+
/** A [UnitPriceMeasurement object](https://shopify.dev/api/storefront/2023-04/objects/unitpricemeasurement). */
|
|
16
16
|
measurement?: PartialDeep<UnitPriceMeasurement, {
|
|
17
17
|
recurseIntoArrays: true;
|
|
18
18
|
}>;
|
|
@@ -32,7 +32,9 @@ export interface OptionWithValues {
|
|
|
32
32
|
name: SelectedOptionType['name'];
|
|
33
33
|
values: SelectedOptionType['value'][];
|
|
34
34
|
}
|
|
35
|
-
type
|
|
35
|
+
type UseProductObjects = {
|
|
36
|
+
/** The raw product from the Storefront API */
|
|
37
|
+
product: Product;
|
|
36
38
|
/** An array of the variant `nodes` from the `VariantConnection`. */
|
|
37
39
|
variants: ProductVariantType[];
|
|
38
40
|
variantsConnection?: ProductVariantConnection;
|
|
@@ -50,9 +52,8 @@ type ProductHookValue = PartialDeep<{
|
|
|
50
52
|
sellingPlans: SellingPlanType[];
|
|
51
53
|
})[];
|
|
52
54
|
sellingPlanGroupsConnection?: SellingPlanGroupConnection;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
}> & {
|
|
55
|
+
};
|
|
56
|
+
type UseProductFunctions = {
|
|
56
57
|
/** A callback to set the selected variant to the variant passed as an argument. */
|
|
57
58
|
setSelectedVariant: (variant: PartialDeep<ProductVariantType, {
|
|
58
59
|
recurseIntoArrays: true;
|
|
@@ -68,6 +69,9 @@ type ProductHookValue = PartialDeep<{
|
|
|
68
69
|
/** A callback that returns a boolean indicating if the option is in stock. */
|
|
69
70
|
isOptionInStock: (name: SelectedOptionType['name'], value: SelectedOptionType['value']) => boolean;
|
|
70
71
|
};
|
|
72
|
+
type ProductHookValue = PartialDeep<UseProductObjects, {
|
|
73
|
+
recurseIntoArrays: true;
|
|
74
|
+
}> & UseProductFunctions;
|
|
71
75
|
export type SelectedOptions = {
|
|
72
76
|
[key: string]: string;
|
|
73
77
|
};
|
package/dist/types/Video.d.ts
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import { type HTMLAttributes } from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { shopifyLoader } from './Image.js';
|
|
3
3
|
import type { Video as VideoType } from './storefront-api-types.js';
|
|
4
4
|
import type { PartialDeep } from 'type-fest';
|
|
5
5
|
export interface VideoProps {
|
|
6
|
-
/** An object with fields that correspond to the Storefront API's [Video object](https://shopify.dev/api/storefront/
|
|
6
|
+
/** An object with fields that correspond to the Storefront API's [Video object](https://shopify.dev/api/storefront/2023-04/objects/video). */
|
|
7
7
|
data: PartialDeep<VideoType, {
|
|
8
8
|
recurseIntoArrays: true;
|
|
9
9
|
}>;
|
|
10
10
|
/** An object of image size options for the video's `previewImage`. Uses `shopifyImageLoader` to generate the `poster` URL. */
|
|
11
|
-
previewImageOptions?: Parameters<typeof
|
|
11
|
+
previewImageOptions?: Parameters<typeof shopifyLoader>[0];
|
|
12
12
|
/** Props that will be passed to the `video` element's `source` children elements. */
|
|
13
13
|
sourceProps?: HTMLAttributes<HTMLSourceElement> & {
|
|
14
14
|
'data-testid'?: string;
|
package/dist/types/index.d.cts
CHANGED
|
@@ -7,7 +7,6 @@ export { SHOPIFY_S, SHOPIFY_STOREFRONT_ID_HEADER, SHOPIFY_STOREFRONT_S_HEADER, S
|
|
|
7
7
|
export type { Cart, CartAction, CartState, CartStatus, CartWithActions, } from './cart-types.js';
|
|
8
8
|
export { CartCheckoutButton } from './CartCheckoutButton.js';
|
|
9
9
|
export { CartCost } from './CartCost.js';
|
|
10
|
-
export { CartLinePrice } from './CartLinePrice.js';
|
|
11
10
|
export { CartLineProvider, useCartLine } from './CartLineProvider.js';
|
|
12
11
|
export { CartLineQuantity } from './CartLineQuantity.js';
|
|
13
12
|
export { CartLineQuantityAdjustButton } from './CartLineQuantityAdjustButton.js';
|
|
@@ -16,7 +15,7 @@ export { storefrontApiCustomScalars } from './codegen.helpers.js';
|
|
|
16
15
|
export { getShopifyCookies } from './cookies-utils.js';
|
|
17
16
|
export { ExternalVideo } from './ExternalVideo.js';
|
|
18
17
|
export { flattenConnection } from './flatten-connection.js';
|
|
19
|
-
export { Image } from './Image.js';
|
|
18
|
+
export { Image, IMAGE_FRAGMENT } from './Image.js';
|
|
20
19
|
export { MediaFile } from './MediaFile.js';
|
|
21
20
|
export { ModelViewer } from './ModelViewer.js';
|
|
22
21
|
export { Money } from './Money.js';
|
package/dist/types/index.d.ts
CHANGED
|
@@ -7,7 +7,6 @@ export { SHOPIFY_S, SHOPIFY_STOREFRONT_ID_HEADER, SHOPIFY_STOREFRONT_S_HEADER, S
|
|
|
7
7
|
export type { Cart, CartAction, CartState, CartStatus, CartWithActions, } from './cart-types.js';
|
|
8
8
|
export { CartCheckoutButton } from './CartCheckoutButton.js';
|
|
9
9
|
export { CartCost } from './CartCost.js';
|
|
10
|
-
export { CartLinePrice } from './CartLinePrice.js';
|
|
11
10
|
export { CartLineProvider, useCartLine } from './CartLineProvider.js';
|
|
12
11
|
export { CartLineQuantity } from './CartLineQuantity.js';
|
|
13
12
|
export { CartLineQuantityAdjustButton } from './CartLineQuantityAdjustButton.js';
|
|
@@ -16,7 +15,7 @@ export { storefrontApiCustomScalars } from './codegen.helpers.js';
|
|
|
16
15
|
export { getShopifyCookies } from './cookies-utils.js';
|
|
17
16
|
export { ExternalVideo } from './ExternalVideo.js';
|
|
18
17
|
export { flattenConnection } from './flatten-connection.js';
|
|
19
|
-
export { Image } from './Image.js';
|
|
18
|
+
export { Image, IMAGE_FRAGMENT } from './Image.js';
|
|
20
19
|
export { MediaFile } from './MediaFile.js';
|
|
21
20
|
export { ModelViewer } from './ModelViewer.js';
|
|
22
21
|
export { Money } from './Money.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const SFAPI_VERSION = "2023-
|
|
1
|
+
export declare const SFAPI_VERSION = "2023-04";
|