@shopify/hydrogen-react 2022.7.1 → 2022.10.1
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/README.md +1 -1
- package/dist/dev/CartProvider.js +35 -35
- package/dist/dev/CartProvider.js.map +1 -1
- package/dist/dev/{CartProvider.cjs → CartProvider.mjs} +36 -36
- package/dist/dev/{CartProvider.cjs.map → CartProvider.mjs.map} +1 -1
- package/dist/dev/ExternalVideo.js +5 -5
- package/dist/dev/ExternalVideo.js.map +1 -1
- package/dist/dev/{ExternalVideo.cjs → ExternalVideo.mjs} +6 -6
- package/dist/{prod/ExternalVideo.cjs.map → dev/ExternalVideo.mjs.map} +1 -1
- package/dist/dev/Image.js +12 -12
- package/dist/dev/Image.js.map +1 -1
- package/dist/dev/{Image.cjs → Image.mjs} +13 -13
- package/dist/dev/{Image.cjs.map → Image.mjs.map} +1 -1
- package/dist/dev/MediaFile.js +12 -12
- package/dist/dev/MediaFile.js.map +1 -1
- package/dist/dev/{MediaFile.cjs → MediaFile.mjs} +13 -13
- package/dist/dev/{MediaFile.cjs.map → MediaFile.mjs.map} +1 -1
- package/dist/dev/Metafield.js +32 -32
- package/dist/dev/Metafield.js.map +1 -1
- package/dist/dev/{Metafield.cjs → Metafield.mjs} +33 -33
- package/dist/dev/Metafield.mjs.map +1 -0
- package/dist/dev/ModelViewer.js +11 -11
- package/dist/dev/ModelViewer.js.map +1 -1
- package/dist/dev/{ModelViewer.cjs → ModelViewer.mjs} +12 -12
- package/dist/dev/{ModelViewer.cjs.map → ModelViewer.mjs.map} +1 -1
- package/dist/dev/Money.js +8 -8
- package/dist/dev/Money.js.map +1 -1
- package/dist/{prod/Money.cjs → dev/Money.mjs} +9 -9
- package/dist/dev/{Money.cjs.map → Money.mjs.map} +1 -1
- package/dist/dev/ProductPrice.js +9 -9
- package/dist/dev/ProductPrice.js.map +1 -1
- package/dist/{prod/ProductPrice.cjs → dev/ProductPrice.mjs} +10 -10
- package/dist/dev/{ProductPrice.cjs.map → ProductPrice.mjs.map} +1 -1
- package/dist/dev/ProductProvider.js +25 -25
- package/dist/dev/ProductProvider.js.map +1 -1
- package/dist/{prod/ProductProvider.cjs → dev/ProductProvider.mjs} +26 -26
- package/dist/{prod/ProductProvider.cjs.map → dev/ProductProvider.mjs.map} +1 -1
- package/dist/dev/ShopPayButton.js +13 -13
- package/dist/dev/ShopPayButton.js.map +1 -1
- package/dist/{prod/ShopPayButton.cjs → dev/ShopPayButton.mjs} +14 -14
- package/dist/{prod/ShopPayButton.cjs.map → dev/ShopPayButton.mjs.map} +1 -1
- package/dist/dev/ShopifyProvider.js +14 -14
- package/dist/dev/ShopifyProvider.js.map +1 -1
- package/dist/dev/ShopifyProvider.mjs +46 -0
- package/dist/dev/{ShopifyProvider.cjs.map → ShopifyProvider.mjs.map} +1 -1
- package/dist/dev/Video.js +9 -9
- package/dist/dev/Video.js.map +1 -1
- package/dist/dev/{Video.cjs → Video.mjs} +10 -10
- package/dist/dev/{Video.cjs.map → Video.mjs.map} +1 -1
- package/dist/dev/_virtual/index.js +3 -3
- package/dist/dev/_virtual/index.js.map +1 -1
- package/dist/dev/_virtual/index.mjs +5 -0
- package/dist/dev/_virtual/index.mjs.map +1 -0
- package/dist/dev/_virtual/use-sync-external-store-shim.development.js +3 -3
- package/dist/dev/_virtual/use-sync-external-store-shim.development.js.map +1 -1
- package/dist/dev/_virtual/use-sync-external-store-shim.development.mjs +5 -0
- package/dist/dev/_virtual/use-sync-external-store-shim.development.mjs.map +1 -0
- package/dist/dev/_virtual/use-sync-external-store-shim.production.min.js +3 -3
- package/dist/dev/_virtual/use-sync-external-store-shim.production.min.js.map +1 -1
- package/dist/dev/_virtual/use-sync-external-store-shim.production.min.mjs +5 -0
- package/dist/dev/_virtual/use-sync-external-store-shim.production.min.mjs.map +1 -0
- package/dist/dev/_virtual/with-selector.development.js +3 -3
- package/dist/dev/_virtual/with-selector.development.js.map +1 -1
- package/dist/dev/_virtual/with-selector.development.mjs +5 -0
- package/dist/dev/_virtual/with-selector.development.mjs.map +1 -0
- package/dist/dev/_virtual/with-selector.js +3 -3
- package/dist/dev/_virtual/with-selector.js.map +1 -1
- package/dist/dev/_virtual/with-selector.mjs +5 -0
- package/dist/dev/_virtual/with-selector.mjs.map +1 -0
- package/dist/dev/_virtual/with-selector.production.min.js +3 -3
- package/dist/dev/_virtual/with-selector.production.min.js.map +1 -1
- package/dist/dev/_virtual/with-selector.production.min.mjs +5 -0
- package/dist/dev/_virtual/with-selector.production.min.mjs.map +1 -0
- package/dist/dev/cart-constants.js +9 -9
- package/dist/dev/cart-constants.js.map +1 -1
- package/dist/dev/cart-constants.mjs +17 -0
- package/dist/dev/{cart-constants.cjs.map → cart-constants.mjs.map} +1 -1
- package/dist/dev/cart-hooks.js +15 -56
- package/dist/dev/cart-hooks.js.map +1 -1
- package/dist/dev/cart-hooks.mjs +48 -0
- package/dist/dev/{cart-hooks.cjs.map → cart-hooks.mjs.map} +1 -1
- package/dist/dev/cart-queries.js +11 -113
- package/dist/dev/cart-queries.js.map +1 -1
- package/dist/{prod/cart-queries.cjs → dev/cart-queries.mjs} +12 -114
- package/dist/dev/{cart-queries.cjs.map → cart-queries.mjs.map} +1 -1
- package/dist/dev/flatten-connection.js +3 -3
- package/dist/dev/flatten-connection.js.map +1 -1
- package/dist/dev/{flatten-connection.cjs → flatten-connection.mjs} +4 -4
- package/dist/dev/{flatten-connection.cjs.map → flatten-connection.mjs.map} +1 -1
- package/dist/dev/image-size.js +6 -6
- package/dist/dev/image-size.js.map +1 -1
- package/dist/dev/{image-size.cjs → image-size.mjs} +7 -7
- package/dist/{prod/image-size.cjs.map → dev/image-size.mjs.map} +1 -1
- package/dist/dev/index.js +37 -40
- package/dist/dev/index.js.map +1 -1
- package/dist/dev/index.mjs +38 -0
- package/dist/dev/index.mjs.map +1 -0
- package/dist/dev/load-script.js +7 -7
- package/dist/dev/load-script.js.map +1 -1
- package/dist/{prod/load-script.cjs → dev/load-script.mjs} +8 -8
- package/dist/dev/{load-script.cjs.map → load-script.mjs.map} +1 -1
- package/dist/dev/node_modules/@xstate/fsm/es/index.js +34 -35
- package/dist/dev/node_modules/@xstate/fsm/es/index.js.map +1 -1
- package/dist/{prod/node_modules/@xstate/fsm/es/index.cjs → dev/node_modules/@xstate/fsm/es/index.mjs} +36 -35
- package/dist/dev/node_modules/@xstate/fsm/es/index.mjs.map +1 -0
- package/dist/dev/node_modules/@xstate/react/es/fsm.js +21 -21
- package/dist/dev/node_modules/@xstate/react/es/fsm.js.map +1 -1
- package/dist/dev/node_modules/@xstate/react/es/{fsm.cjs → fsm.mjs} +22 -22
- package/dist/dev/node_modules/@xstate/react/es/{fsm.cjs.map → fsm.mjs.map} +1 -1
- package/dist/dev/node_modules/@xstate/react/es/useConstant.js +23 -5
- package/dist/dev/node_modules/@xstate/react/es/useConstant.js.map +1 -1
- package/dist/dev/node_modules/@xstate/react/es/useConstant.mjs +12 -0
- package/dist/dev/node_modules/@xstate/react/es/useConstant.mjs.map +1 -0
- package/dist/dev/node_modules/use-isomorphic-layout-effect/dist/use-isomorphic-layout-effect.browser.esm.js +4 -5
- package/dist/dev/node_modules/use-isomorphic-layout-effect/dist/use-isomorphic-layout-effect.browser.esm.js.map +1 -1
- package/dist/dev/node_modules/use-isomorphic-layout-effect/dist/use-isomorphic-layout-effect.browser.esm.mjs +6 -0
- package/dist/dev/node_modules/use-isomorphic-layout-effect/dist/{use-isomorphic-layout-effect.browser.esm.cjs.map → use-isomorphic-layout-effect.browser.esm.mjs.map} +1 -1
- package/dist/dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.js +13 -11
- package/dist/dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.js.map +1 -1
- package/dist/{prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.cjs → dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.mjs} +12 -14
- package/dist/{prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.cjs.map → dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.mjs.map} +1 -1
- package/dist/dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.production.min.js +12 -10
- package/dist/dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.production.min.js.map +1 -1
- package/dist/dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/{with-selector.production.min.cjs → with-selector.production.min.mjs} +11 -13
- package/dist/dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.production.min.mjs.map +1 -0
- package/dist/dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js +11 -9
- package/dist/dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js.map +1 -1
- package/dist/{prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.cjs → dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.mjs} +10 -12
- package/dist/{prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.cjs.map → dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.mjs.map} +1 -1
- package/dist/dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.min.js +11 -9
- package/dist/dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.min.js.map +1 -1
- package/dist/{prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.min.cjs → dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.min.mjs} +10 -12
- package/dist/dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.min.mjs.map +1 -0
- package/dist/dev/node_modules/use-sync-external-store/shim/index.js +12 -12
- package/dist/dev/node_modules/use-sync-external-store/shim/index.js.map +1 -1
- package/dist/dev/node_modules/use-sync-external-store/shim/index.mjs +21 -0
- package/dist/dev/node_modules/use-sync-external-store/shim/{index.cjs.map → index.mjs.map} +1 -1
- package/dist/dev/node_modules/use-sync-external-store/shim/with-selector.js +7 -6
- package/dist/dev/node_modules/use-sync-external-store/shim/with-selector.js.map +1 -1
- package/dist/dev/node_modules/use-sync-external-store/shim/with-selector.mjs +11 -0
- package/dist/dev/node_modules/use-sync-external-store/shim/{with-selector.cjs.map → with-selector.mjs.map} +1 -1
- package/dist/dev/node_modules/worktop/cookie/index.js +3 -3
- package/dist/dev/node_modules/worktop/cookie/index.js.map +1 -1
- package/dist/{prod/node_modules/worktop/cookie/index.cjs → dev/node_modules/worktop/cookie/index.mjs} +4 -4
- package/dist/dev/node_modules/worktop/cookie/{index.cjs.map → index.mjs.map} +1 -1
- package/dist/dev/storefront-api-constants.js +4 -4
- package/dist/dev/storefront-api-constants.js.map +1 -1
- package/dist/dev/storefront-api-constants.mjs +5 -0
- package/dist/dev/storefront-api-constants.mjs.map +1 -0
- package/dist/dev/storefront-client.js +6 -6
- package/dist/dev/storefront-client.js.map +1 -1
- package/dist/dev/{storefront-client.cjs → storefront-client.mjs} +7 -7
- package/dist/dev/storefront-client.mjs.map +1 -0
- package/dist/dev/useCartAPIStateMachine.js +20 -20
- package/dist/dev/useCartAPIStateMachine.js.map +1 -1
- package/dist/dev/{useCartAPIStateMachine.cjs → useCartAPIStateMachine.mjs} +21 -21
- package/dist/dev/{useCartAPIStateMachine.cjs.map → useCartAPIStateMachine.mjs.map} +1 -1
- package/dist/dev/useCartActions.js +26 -26
- package/dist/dev/useCartActions.js.map +1 -1
- package/dist/{prod/useCartActions.cjs → dev/useCartActions.mjs} +27 -27
- package/dist/dev/{useCartActions.cjs.map → useCartActions.mjs.map} +1 -1
- package/dist/dev/useMoney.js +10 -10
- package/dist/dev/useMoney.js.map +1 -1
- package/dist/{prod/useMoney.cjs → dev/useMoney.mjs} +11 -11
- package/dist/dev/{useMoney.cjs.map → useMoney.mjs.map} +1 -1
- package/dist/prod/CartProvider.js +35 -35
- package/dist/prod/CartProvider.js.map +1 -1
- package/dist/prod/{CartProvider.cjs → CartProvider.mjs} +36 -36
- package/dist/prod/{CartProvider.cjs.map → CartProvider.mjs.map} +1 -1
- package/dist/prod/ExternalVideo.js +5 -5
- package/dist/prod/ExternalVideo.js.map +1 -1
- package/dist/prod/{ExternalVideo.cjs → ExternalVideo.mjs} +6 -6
- package/dist/{dev/ExternalVideo.cjs.map → prod/ExternalVideo.mjs.map} +1 -1
- package/dist/prod/Image.js +12 -12
- package/dist/prod/Image.js.map +1 -1
- package/dist/prod/{Image.cjs → Image.mjs} +13 -13
- package/dist/prod/{Image.cjs.map → Image.mjs.map} +1 -1
- package/dist/prod/MediaFile.js +12 -12
- package/dist/prod/MediaFile.js.map +1 -1
- package/dist/prod/{MediaFile.cjs → MediaFile.mjs} +13 -13
- package/dist/prod/{MediaFile.cjs.map → MediaFile.mjs.map} +1 -1
- package/dist/prod/Metafield.js +32 -32
- package/dist/prod/Metafield.js.map +1 -1
- package/dist/prod/{Metafield.cjs → Metafield.mjs} +33 -33
- package/dist/prod/Metafield.mjs.map +1 -0
- package/dist/prod/ModelViewer.js +11 -11
- package/dist/prod/ModelViewer.js.map +1 -1
- package/dist/prod/{ModelViewer.cjs → ModelViewer.mjs} +12 -12
- package/dist/prod/{ModelViewer.cjs.map → ModelViewer.mjs.map} +1 -1
- package/dist/prod/Money.js +8 -8
- package/dist/prod/Money.js.map +1 -1
- package/dist/{dev/Money.cjs → prod/Money.mjs} +9 -9
- package/dist/prod/{Money.cjs.map → Money.mjs.map} +1 -1
- package/dist/prod/ProductPrice.js +9 -9
- package/dist/prod/ProductPrice.js.map +1 -1
- package/dist/{dev/ProductPrice.cjs → prod/ProductPrice.mjs} +10 -10
- package/dist/prod/{ProductPrice.cjs.map → ProductPrice.mjs.map} +1 -1
- package/dist/prod/ProductProvider.js +25 -25
- package/dist/prod/ProductProvider.js.map +1 -1
- package/dist/{dev/ProductProvider.cjs → prod/ProductProvider.mjs} +26 -26
- package/dist/{dev/ProductProvider.cjs.map → prod/ProductProvider.mjs.map} +1 -1
- package/dist/prod/ShopPayButton.js +13 -13
- package/dist/prod/ShopPayButton.js.map +1 -1
- package/dist/{dev/ShopPayButton.cjs → prod/ShopPayButton.mjs} +14 -14
- package/dist/{dev/ShopPayButton.cjs.map → prod/ShopPayButton.mjs.map} +1 -1
- package/dist/prod/ShopifyProvider.js +14 -14
- package/dist/prod/ShopifyProvider.js.map +1 -1
- package/dist/prod/ShopifyProvider.mjs +46 -0
- package/dist/prod/{ShopifyProvider.cjs.map → ShopifyProvider.mjs.map} +1 -1
- package/dist/prod/Video.js +9 -9
- package/dist/prod/Video.js.map +1 -1
- package/dist/prod/{Video.cjs → Video.mjs} +10 -10
- package/dist/prod/{Video.cjs.map → Video.mjs.map} +1 -1
- package/dist/prod/_virtual/index.js +3 -3
- package/dist/prod/_virtual/index.js.map +1 -1
- package/dist/prod/_virtual/index.mjs +5 -0
- package/dist/prod/_virtual/index.mjs.map +1 -0
- package/dist/prod/_virtual/use-sync-external-store-shim.development.js +3 -3
- package/dist/prod/_virtual/use-sync-external-store-shim.development.js.map +1 -1
- package/dist/prod/_virtual/use-sync-external-store-shim.development.mjs +5 -0
- package/dist/prod/_virtual/use-sync-external-store-shim.development.mjs.map +1 -0
- package/dist/prod/_virtual/use-sync-external-store-shim.production.min.js +3 -3
- package/dist/prod/_virtual/use-sync-external-store-shim.production.min.js.map +1 -1
- package/dist/prod/_virtual/use-sync-external-store-shim.production.min.mjs +5 -0
- package/dist/prod/_virtual/use-sync-external-store-shim.production.min.mjs.map +1 -0
- package/dist/prod/_virtual/with-selector.development.js +3 -3
- package/dist/prod/_virtual/with-selector.development.js.map +1 -1
- package/dist/prod/_virtual/with-selector.development.mjs +5 -0
- package/dist/prod/_virtual/with-selector.development.mjs.map +1 -0
- package/dist/prod/_virtual/with-selector.js +3 -3
- package/dist/prod/_virtual/with-selector.js.map +1 -1
- package/dist/prod/_virtual/with-selector.mjs +5 -0
- package/dist/prod/_virtual/with-selector.mjs.map +1 -0
- package/dist/prod/_virtual/with-selector.production.min.js +3 -3
- package/dist/prod/_virtual/with-selector.production.min.js.map +1 -1
- package/dist/prod/_virtual/with-selector.production.min.mjs +5 -0
- package/dist/prod/_virtual/with-selector.production.min.mjs.map +1 -0
- package/dist/prod/cart-constants.js +9 -9
- package/dist/prod/cart-constants.js.map +1 -1
- package/dist/prod/cart-constants.mjs +17 -0
- package/dist/prod/{cart-constants.cjs.map → cart-constants.mjs.map} +1 -1
- package/dist/prod/cart-hooks.js +15 -56
- package/dist/prod/cart-hooks.js.map +1 -1
- package/dist/prod/cart-hooks.mjs +48 -0
- package/dist/prod/{cart-hooks.cjs.map → cart-hooks.mjs.map} +1 -1
- package/dist/prod/cart-queries.js +11 -113
- package/dist/prod/cart-queries.js.map +1 -1
- package/dist/{dev/cart-queries.cjs → prod/cart-queries.mjs} +12 -114
- package/dist/prod/{cart-queries.cjs.map → cart-queries.mjs.map} +1 -1
- package/dist/prod/flatten-connection.js +3 -3
- package/dist/prod/flatten-connection.js.map +1 -1
- package/dist/prod/{flatten-connection.cjs → flatten-connection.mjs} +4 -4
- package/dist/prod/{flatten-connection.cjs.map → flatten-connection.mjs.map} +1 -1
- package/dist/prod/image-size.js +6 -6
- package/dist/prod/image-size.js.map +1 -1
- package/dist/prod/{image-size.cjs → image-size.mjs} +7 -7
- package/dist/{dev/image-size.cjs.map → prod/image-size.mjs.map} +1 -1
- package/dist/prod/index.js +37 -40
- package/dist/prod/index.js.map +1 -1
- package/dist/prod/index.mjs +38 -0
- package/dist/prod/index.mjs.map +1 -0
- package/dist/prod/load-script.js +7 -7
- package/dist/prod/load-script.js.map +1 -1
- package/dist/{dev/load-script.cjs → prod/load-script.mjs} +8 -8
- package/dist/prod/{load-script.cjs.map → load-script.mjs.map} +1 -1
- package/dist/prod/node_modules/@xstate/fsm/es/index.js +34 -35
- package/dist/prod/node_modules/@xstate/fsm/es/index.js.map +1 -1
- package/dist/{dev/node_modules/@xstate/fsm/es/index.cjs → prod/node_modules/@xstate/fsm/es/index.mjs} +36 -35
- package/dist/prod/node_modules/@xstate/fsm/es/index.mjs.map +1 -0
- package/dist/prod/node_modules/@xstate/react/es/fsm.js +21 -21
- package/dist/prod/node_modules/@xstate/react/es/fsm.js.map +1 -1
- package/dist/prod/node_modules/@xstate/react/es/{fsm.cjs → fsm.mjs} +22 -22
- package/dist/prod/node_modules/@xstate/react/es/{fsm.cjs.map → fsm.mjs.map} +1 -1
- package/dist/prod/node_modules/@xstate/react/es/useConstant.js +23 -5
- package/dist/prod/node_modules/@xstate/react/es/useConstant.js.map +1 -1
- package/dist/prod/node_modules/@xstate/react/es/useConstant.mjs +12 -0
- package/dist/prod/node_modules/@xstate/react/es/useConstant.mjs.map +1 -0
- package/dist/prod/node_modules/use-isomorphic-layout-effect/dist/use-isomorphic-layout-effect.browser.esm.js +4 -5
- package/dist/prod/node_modules/use-isomorphic-layout-effect/dist/use-isomorphic-layout-effect.browser.esm.js.map +1 -1
- package/dist/prod/node_modules/use-isomorphic-layout-effect/dist/use-isomorphic-layout-effect.browser.esm.mjs +6 -0
- package/dist/prod/node_modules/use-isomorphic-layout-effect/dist/{use-isomorphic-layout-effect.browser.esm.cjs.map → use-isomorphic-layout-effect.browser.esm.mjs.map} +1 -1
- package/dist/prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.js +13 -11
- package/dist/prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.js.map +1 -1
- package/dist/{dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.cjs → prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.mjs} +12 -14
- package/dist/{dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.cjs.map → prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.mjs.map} +1 -1
- package/dist/prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.production.min.js +12 -10
- package/dist/prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.production.min.js.map +1 -1
- package/dist/prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/{with-selector.production.min.cjs → with-selector.production.min.mjs} +11 -13
- package/dist/prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.production.min.mjs.map +1 -0
- package/dist/prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js +11 -9
- package/dist/prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js.map +1 -1
- package/dist/{dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.cjs → prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.mjs} +10 -12
- package/dist/{dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.cjs.map → prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.mjs.map} +1 -1
- package/dist/prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.min.js +11 -9
- package/dist/prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.min.js.map +1 -1
- package/dist/{dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.min.cjs → prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.min.mjs} +10 -12
- package/dist/prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.min.mjs.map +1 -0
- package/dist/prod/node_modules/use-sync-external-store/shim/index.js +12 -12
- package/dist/prod/node_modules/use-sync-external-store/shim/index.js.map +1 -1
- package/dist/prod/node_modules/use-sync-external-store/shim/index.mjs +21 -0
- package/dist/prod/node_modules/use-sync-external-store/shim/{index.cjs.map → index.mjs.map} +1 -1
- package/dist/prod/node_modules/use-sync-external-store/shim/with-selector.js +7 -6
- package/dist/prod/node_modules/use-sync-external-store/shim/with-selector.js.map +1 -1
- package/dist/prod/node_modules/use-sync-external-store/shim/with-selector.mjs +11 -0
- package/dist/prod/node_modules/use-sync-external-store/shim/{with-selector.cjs.map → with-selector.mjs.map} +1 -1
- package/dist/prod/node_modules/worktop/cookie/index.js +3 -3
- package/dist/prod/node_modules/worktop/cookie/index.js.map +1 -1
- package/dist/{dev/node_modules/worktop/cookie/index.cjs → prod/node_modules/worktop/cookie/index.mjs} +4 -4
- package/dist/prod/node_modules/worktop/cookie/{index.cjs.map → index.mjs.map} +1 -1
- package/dist/prod/storefront-api-constants.js +4 -4
- package/dist/prod/storefront-api-constants.js.map +1 -1
- package/dist/prod/storefront-api-constants.mjs +5 -0
- package/dist/prod/storefront-api-constants.mjs.map +1 -0
- package/dist/prod/storefront-client.js +6 -6
- package/dist/prod/storefront-client.js.map +1 -1
- package/dist/prod/{storefront-client.cjs → storefront-client.mjs} +7 -7
- package/dist/prod/storefront-client.mjs.map +1 -0
- package/dist/prod/useCartAPIStateMachine.js +20 -20
- package/dist/prod/useCartAPIStateMachine.js.map +1 -1
- package/dist/prod/{useCartAPIStateMachine.cjs → useCartAPIStateMachine.mjs} +21 -21
- package/dist/prod/{useCartAPIStateMachine.cjs.map → useCartAPIStateMachine.mjs.map} +1 -1
- package/dist/prod/useCartActions.js +26 -26
- package/dist/prod/useCartActions.js.map +1 -1
- package/dist/{dev/useCartActions.cjs → prod/useCartActions.mjs} +27 -27
- package/dist/prod/{useCartActions.cjs.map → useCartActions.mjs.map} +1 -1
- package/dist/prod/useMoney.js +10 -10
- package/dist/prod/useMoney.js.map +1 -1
- package/dist/{dev/useMoney.cjs → prod/useMoney.mjs} +11 -11
- package/dist/prod/{useMoney.cjs.map → useMoney.mjs.map} +1 -1
- package/dist/types/index.d.cts +0 -1
- package/dist/types/index.d.ts +0 -1
- package/dist/types/storefront-api-constants.d.ts +1 -1
- package/dist/types/storefront-api-types.d.ts +278 -73
- package/dist/types/useCartActions.d.ts +1 -1
- package/dist/umd/hydrogen-react.dev.js +253 -394
- package/dist/umd/hydrogen-react.dev.js.map +1 -1
- package/dist/umd/hydrogen-react.prod.js +57 -157
- package/dist/umd/hydrogen-react.prod.js.map +1 -1
- package/package.json +15 -14
- package/storefront.schema.json +1 -1
- package/dist/dev/Metafield.cjs.map +0 -1
- package/dist/dev/ShopifyProvider.cjs +0 -46
- package/dist/dev/_virtual/index.cjs +0 -5
- package/dist/dev/_virtual/index.cjs.map +0 -1
- package/dist/dev/_virtual/use-sync-external-store-shim.development.cjs +0 -5
- package/dist/dev/_virtual/use-sync-external-store-shim.development.cjs.map +0 -1
- package/dist/dev/_virtual/use-sync-external-store-shim.production.min.cjs +0 -5
- package/dist/dev/_virtual/use-sync-external-store-shim.production.min.cjs.map +0 -1
- package/dist/dev/_virtual/with-selector.cjs +0 -5
- package/dist/dev/_virtual/with-selector.cjs.map +0 -1
- package/dist/dev/_virtual/with-selector.development.cjs +0 -5
- package/dist/dev/_virtual/with-selector.development.cjs.map +0 -1
- package/dist/dev/_virtual/with-selector.production.min.cjs +0 -5
- package/dist/dev/_virtual/with-selector.production.min.cjs.map +0 -1
- package/dist/dev/cart-constants.cjs +0 -17
- package/dist/dev/cart-hooks.cjs +0 -89
- package/dist/dev/index.cjs +0 -41
- package/dist/dev/index.cjs.map +0 -1
- package/dist/dev/node_modules/@xstate/fsm/es/index.cjs.map +0 -1
- package/dist/dev/node_modules/@xstate/react/es/useConstant.cjs +0 -30
- package/dist/dev/node_modules/@xstate/react/es/useConstant.cjs.map +0 -1
- package/dist/dev/node_modules/use-isomorphic-layout-effect/dist/use-isomorphic-layout-effect.browser.esm.cjs +0 -5
- package/dist/dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.production.min.cjs.map +0 -1
- package/dist/dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.min.cjs.map +0 -1
- package/dist/dev/node_modules/use-sync-external-store/shim/index.cjs +0 -21
- package/dist/dev/node_modules/use-sync-external-store/shim/with-selector.cjs +0 -12
- package/dist/dev/storefront-api-constants.cjs +0 -5
- package/dist/dev/storefront-api-constants.cjs.map +0 -1
- package/dist/dev/storefront-client.cjs.map +0 -1
- package/dist/prod/Metafield.cjs.map +0 -1
- package/dist/prod/ShopifyProvider.cjs +0 -46
- package/dist/prod/_virtual/index.cjs +0 -5
- package/dist/prod/_virtual/index.cjs.map +0 -1
- package/dist/prod/_virtual/use-sync-external-store-shim.development.cjs +0 -5
- package/dist/prod/_virtual/use-sync-external-store-shim.development.cjs.map +0 -1
- package/dist/prod/_virtual/use-sync-external-store-shim.production.min.cjs +0 -5
- package/dist/prod/_virtual/use-sync-external-store-shim.production.min.cjs.map +0 -1
- package/dist/prod/_virtual/with-selector.cjs +0 -5
- package/dist/prod/_virtual/with-selector.cjs.map +0 -1
- package/dist/prod/_virtual/with-selector.development.cjs +0 -5
- package/dist/prod/_virtual/with-selector.development.cjs.map +0 -1
- package/dist/prod/_virtual/with-selector.production.min.cjs +0 -5
- package/dist/prod/_virtual/with-selector.production.min.cjs.map +0 -1
- package/dist/prod/cart-constants.cjs +0 -17
- package/dist/prod/cart-hooks.cjs +0 -89
- package/dist/prod/index.cjs +0 -41
- package/dist/prod/index.cjs.map +0 -1
- package/dist/prod/node_modules/@xstate/fsm/es/index.cjs.map +0 -1
- package/dist/prod/node_modules/@xstate/react/es/useConstant.cjs +0 -30
- package/dist/prod/node_modules/@xstate/react/es/useConstant.cjs.map +0 -1
- package/dist/prod/node_modules/use-isomorphic-layout-effect/dist/use-isomorphic-layout-effect.browser.esm.cjs +0 -5
- package/dist/prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.production.min.cjs.map +0 -1
- package/dist/prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.min.cjs.map +0 -1
- package/dist/prod/node_modules/use-sync-external-store/shim/index.cjs +0 -21
- package/dist/prod/node_modules/use-sync-external-store/shim/with-selector.cjs +0 -12
- package/dist/prod/storefront-api-constants.cjs +0 -5
- package/dist/prod/storefront-api-constants.cjs.map +0 -1
- package/dist/prod/storefront-client.cjs.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModelViewer.js","sources":["../../src/ModelViewer.tsx"],"sourcesContent":["import {useState, useEffect, useCallback} from 'react';\nimport {useLoadScript} from './load-script.js';\nimport type {Model3d} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\nimport type {ModelViewerElement} from '@google/model-viewer/lib/model-viewer.js';\n\ntype PropsWeControl = 'src';\n\ndeclare global {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n interface IntrinsicElements {\n 'model-viewer': PartialDeep<\n ModelViewerElement,\n {recurseIntoArrays: true}\n >;\n }\n }\n}\n\ntype ModelViewerProps = Omit<\n PartialDeep<JSX.IntrinsicElements['model-viewer'], {recurseIntoArrays: true}>,\n PropsWeControl\n> & {\n /** An object with fields that correspond to the Storefront API's [Model3D object](https://shopify.dev/api/storefront/latest/objects/model3d). */\n data: PartialDeep<Model3d, {recurseIntoArrays: true}>;\n /** The callback to invoke when the 'error' event is triggered. Refer to [error in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-error). */\n onError?: (event: Event) => void;\n /** The callback to invoke when the `load` event is triggered. Refer to [load in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-load). */\n onLoad?: (event: Event) => void;\n /** The callback to invoke when the 'preload' event is triggered. Refer to [preload in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-preload). */\n onPreload?: (event: Event) => void;\n /** The callback to invoke when the 'model-visibility' event is triggered. Refer to [model-visibility in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-modelVisibility). */\n onModelVisibility?: (event: Event) => void;\n /** The callback to invoke when the 'progress' event is triggered. Refer to [progress in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-progress). */\n onProgress?: (event: Event) => void;\n /** The callback to invoke when the 'ar-status' event is triggered. Refer to [ar-status in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-events-arStatus). */\n onArStatus?: (event: Event) => void;\n /** The callback to invoke when the 'ar-tracking' event is triggered. Refer to [ar-tracking in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-events-arTracking). */\n onArTracking?: (event: Event) => void;\n /** The callback to invoke when the 'quick-look-button-tapped' event is triggered. Refer to [quick-look-button-tapped in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-events-quickLookButtonTapped). */\n onQuickLookButtonTapped?: (event: Event) => void;\n /** The callback to invoke when the 'camera-change' event is triggered. Refer to [camera-change in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-stagingandcameras-events-cameraChange). */\n onCameraChange?: (event: Event) => void;\n /** The callback to invoke when the 'environment-change' event is triggered. Refer to [environment-change in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-lightingandenv-events-environmentChange). */\n onEnvironmentChange?: (event: Event) => void;\n /** The callback to invoke when the 'play' event is triggered. Refer to [play in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-animation-events-play). */\n onPlay?: (event: Event) => void;\n /** The callback to invoke when the 'pause' event is triggered. Refer to [pause in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-animation-events-pause). */\n onPause?: (event: Event) => void;\n /** The callback to invoke when the 'scene-graph-ready' event is triggered. Refer to [scene-graph-ready in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-scenegraph-events-sceneGraphReady). */\n onSceneGraphReady?: (event: Event) => void;\n};\n\n/**\n * The `ModelViewer` component renders a 3D model (with the `model-viewer` custom element) for\n * the Storefront API's [Model3d object](https://shopify.dev/api/storefront/reference/products/model3d).\n *\n * The `model-viewer` custom element is lazily downloaded through a dynamically-injected `<script type=\"module\">` tag when the `<ModelViewer />` component is rendered\n *\n * ModelViewer is using version `1.21.1` of the `@google/model-viewer` library.\n */\nexport function ModelViewer(props: ModelViewerProps) {\n const [modelViewer, setModelViewer] = useState<undefined | HTMLElement>(\n undefined\n );\n const callbackRef = useCallback((node: HTMLElement) => {\n setModelViewer(node);\n }, []);\n const {data, children, className, ...passthroughProps} = props;\n\n const modelViewerLoadedStatus = useLoadScript(\n 'https://unpkg.com/@google/model-viewer@v1.12.1/dist/model-viewer.min.js',\n {\n module: true,\n }\n );\n\n useEffect(() => {\n if (!modelViewer) {\n return;\n }\n if (passthroughProps.onError)\n modelViewer.addEventListener('error', passthroughProps.onError);\n if (passthroughProps.onLoad)\n modelViewer.addEventListener('load', passthroughProps.onLoad);\n if (passthroughProps.onPreload)\n modelViewer.addEventListener('preload', passthroughProps.onPreload);\n if (passthroughProps.onModelVisibility)\n modelViewer.addEventListener(\n 'model-visibility',\n passthroughProps.onModelVisibility\n );\n if (passthroughProps.onProgress)\n modelViewer.addEventListener('progress', passthroughProps.onProgress);\n if (passthroughProps.onArStatus)\n modelViewer.addEventListener('ar-status', passthroughProps.onArStatus);\n if (passthroughProps.onArTracking)\n modelViewer.addEventListener(\n 'ar-tracking',\n passthroughProps.onArTracking\n );\n if (passthroughProps.onQuickLookButtonTapped)\n modelViewer.addEventListener(\n 'quick-look-button-tapped',\n passthroughProps.onQuickLookButtonTapped\n );\n if (passthroughProps.onCameraChange)\n modelViewer.addEventListener(\n 'camera-change',\n passthroughProps.onCameraChange\n );\n if (passthroughProps.onEnvironmentChange)\n modelViewer.addEventListener(\n 'environment-change',\n passthroughProps.onEnvironmentChange\n );\n if (passthroughProps.onPlay)\n modelViewer.addEventListener('play', passthroughProps.onPlay);\n if (passthroughProps.onPause)\n modelViewer.addEventListener('ar-status', passthroughProps.onPause);\n if (passthroughProps.onSceneGraphReady)\n modelViewer.addEventListener(\n 'scene-graph-ready',\n passthroughProps.onSceneGraphReady\n );\n\n return () => {\n if (modelViewer == null) {\n return;\n }\n if (passthroughProps.onError)\n modelViewer.removeEventListener('error', passthroughProps.onError);\n if (passthroughProps.onLoad)\n modelViewer.removeEventListener('load', passthroughProps.onLoad);\n if (passthroughProps.onPreload)\n modelViewer.removeEventListener('preload', passthroughProps.onPreload);\n if (passthroughProps.onModelVisibility)\n modelViewer.removeEventListener(\n 'model-visibility',\n passthroughProps.onModelVisibility\n );\n if (passthroughProps.onProgress)\n modelViewer.removeEventListener(\n 'progress',\n passthroughProps.onProgress\n );\n if (passthroughProps.onArStatus)\n modelViewer.removeEventListener(\n 'ar-status',\n passthroughProps.onArStatus\n );\n if (passthroughProps.onArTracking)\n modelViewer.removeEventListener(\n 'ar-tracking',\n passthroughProps.onArTracking\n );\n if (passthroughProps.onQuickLookButtonTapped)\n modelViewer.removeEventListener(\n 'quick-look-button-tapped',\n passthroughProps.onQuickLookButtonTapped\n );\n if (passthroughProps.onCameraChange)\n modelViewer.removeEventListener(\n 'camera-change',\n passthroughProps.onCameraChange\n );\n if (passthroughProps.onEnvironmentChange)\n modelViewer.removeEventListener(\n 'environment-change',\n passthroughProps.onEnvironmentChange\n );\n if (passthroughProps.onPlay)\n modelViewer.removeEventListener('play', passthroughProps.onPlay);\n if (passthroughProps.onPause)\n modelViewer.removeEventListener('ar-status', passthroughProps.onPause);\n if (passthroughProps.onSceneGraphReady)\n modelViewer.removeEventListener(\n 'scene-graph-ready',\n passthroughProps.onSceneGraphReady\n );\n };\n }, [\n modelViewer,\n passthroughProps.onArStatus,\n passthroughProps.onArTracking,\n passthroughProps.onCameraChange,\n passthroughProps.onEnvironmentChange,\n passthroughProps.onError,\n passthroughProps.onLoad,\n passthroughProps.onModelVisibility,\n passthroughProps.onPause,\n passthroughProps.onPlay,\n passthroughProps.onPreload,\n passthroughProps.onProgress,\n passthroughProps.onQuickLookButtonTapped,\n passthroughProps.onSceneGraphReady,\n ]);\n\n if (modelViewerLoadedStatus !== 'done') {\n // TODO: What do we want to display while the model-viewer library loads?\n return null;\n }\n\n if (!data.sources?.[0]?.url) {\n const sourcesUrlError = `<ModelViewer/> requires 'data.sources' prop to be an array, with an object that has a property 'url' on it. Rendering 'null'`;\n if (__HYDROGEN_DEV__) {\n throw new Error(sourcesUrlError);\n } else {\n console.error(sourcesUrlError);\n return null;\n }\n }\n\n if (__HYDROGEN_DEV__ && !data.alt) {\n console.warn(\n `<ModelViewer/> requires the 'data.alt' prop for accessibility`\n );\n }\n\n return (\n <model-viewer\n // @ts-expect-error ref should exist\n ref={callbackRef}\n {...passthroughProps}\n className={className}\n id={passthroughProps.id ?? data.id}\n src={data.sources[0].url}\n alt={data.alt ?? null}\n camera-controls={passthroughProps.cameraControls ?? true}\n poster={(passthroughProps.poster || data.previewImage?.url) ?? null}\n autoplay={passthroughProps.autoplay ?? true}\n loading={passthroughProps.loading}\n reveal={passthroughProps.reveal}\n ar={passthroughProps.ar}\n ar-modes={passthroughProps.arModes}\n ar-scale={passthroughProps.arScale}\n // @ts-expect-error arPlacement should exist as a type, not sure why it doesn't. https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-attributes-arPlacement\n ar-placement={passthroughProps.arPlacement}\n ios-src={passthroughProps.iosSrc}\n touch-action={passthroughProps.touchAction}\n disable-zoom={passthroughProps.disableZoom}\n orbit-sensitivity={passthroughProps.orbitSensitivity}\n auto-rotate={passthroughProps.autoRotate}\n auto-rotate-delay={passthroughProps.autoRotateDelay}\n // @ts-expect-error rotationPerSecond should exist as a type, not sure why it doesn't. https://modelviewer.dev/docs/index.html#entrydocs-stagingandcameras-attributes-rotationPerSecond\n rotation-per-second={passthroughProps.rotationPerSecond}\n interaction-policy={passthroughProps.interactionPolicy}\n interaction-prompt={passthroughProps.interactionPrompt}\n interaction-prompt-style={passthroughProps.interactionPromptStyle}\n interaction-prompt-threshold={passthroughProps.interactionPromptThreshold}\n camera-orbit={passthroughProps.cameraOrbit}\n camera-target={passthroughProps.cameraTarget}\n field-of-view={passthroughProps.fieldOfView}\n max-camera-orbit={passthroughProps.maxCameraOrbit}\n min-camera-orbit={passthroughProps.minCameraOrbit}\n max-field-of-view={passthroughProps.maxFieldOfView}\n min-field-of-view={passthroughProps.minFieldOfView}\n bounds={passthroughProps.bounds}\n interpolation-decay={passthroughProps.interpolationDecay ?? 100}\n skybox-image={passthroughProps.skyboxImage}\n environment-image={passthroughProps.environmentImage}\n exposure={passthroughProps.exposure}\n shadow-intensity={passthroughProps.shadowIntensity ?? 0}\n shadow-softness={passthroughProps.shadowSoftness ?? 0}\n animation-name={passthroughProps.animationName}\n animation-crossfade-duration={passthroughProps.animationCrossfadeDuration}\n variant-name={passthroughProps.variantName}\n orientation={passthroughProps.orientation}\n scale={passthroughProps.scale}\n >\n {children}\n </model-viewer>\n );\n}\n"],"names":["ModelViewer","props","modelViewer","setModelViewer","useState","undefined","callbackRef","useCallback","node","data","children","className","passthroughProps","modelViewerLoadedStatus","useLoadScript","module","useEffect","onError","addEventListener","onLoad","onPreload","onModelVisibility","onProgress","onArStatus","onArTracking","onQuickLookButtonTapped","onCameraChange","onEnvironmentChange","onPlay","onPause","onSceneGraphReady","removeEventListener","sources","url","sourcesUrlError","console","error","id","alt","cameraControls","poster","previewImage","autoplay","loading","reveal","ar","arModes","arScale","arPlacement","iosSrc","touchAction","disableZoom","orbitSensitivity","autoRotate","autoRotateDelay","rotationPerSecond","interactionPolicy","interactionPrompt","interactionPromptStyle","interactionPromptThreshold","cameraOrbit","cameraTarget","fieldOfView","maxCameraOrbit","minCameraOrbit","maxFieldOfView","minFieldOfView","bounds","interpolationDecay","skyboxImage","environmentImage","exposure","shadowIntensity","shadowSoftness","animationName","animationCrossfadeDuration","variantName","orientation","scale"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ModelViewer.js","sources":["../../src/ModelViewer.tsx"],"sourcesContent":["import {useState, useEffect, useCallback} from 'react';\nimport {useLoadScript} from './load-script.js';\nimport type {Model3d} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\nimport type {ModelViewerElement} from '@google/model-viewer/lib/model-viewer.js';\n\ntype PropsWeControl = 'src';\n\ndeclare global {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n interface IntrinsicElements {\n 'model-viewer': PartialDeep<\n ModelViewerElement,\n {recurseIntoArrays: true}\n >;\n }\n }\n}\n\ntype ModelViewerProps = Omit<\n PartialDeep<JSX.IntrinsicElements['model-viewer'], {recurseIntoArrays: true}>,\n PropsWeControl\n> & {\n /** An object with fields that correspond to the Storefront API's [Model3D object](https://shopify.dev/api/storefront/latest/objects/model3d). */\n data: PartialDeep<Model3d, {recurseIntoArrays: true}>;\n /** The callback to invoke when the 'error' event is triggered. Refer to [error in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-error). */\n onError?: (event: Event) => void;\n /** The callback to invoke when the `load` event is triggered. Refer to [load in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-load). */\n onLoad?: (event: Event) => void;\n /** The callback to invoke when the 'preload' event is triggered. Refer to [preload in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-preload). */\n onPreload?: (event: Event) => void;\n /** The callback to invoke when the 'model-visibility' event is triggered. Refer to [model-visibility in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-modelVisibility). */\n onModelVisibility?: (event: Event) => void;\n /** The callback to invoke when the 'progress' event is triggered. Refer to [progress in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-progress). */\n onProgress?: (event: Event) => void;\n /** The callback to invoke when the 'ar-status' event is triggered. Refer to [ar-status in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-events-arStatus). */\n onArStatus?: (event: Event) => void;\n /** The callback to invoke when the 'ar-tracking' event is triggered. Refer to [ar-tracking in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-events-arTracking). */\n onArTracking?: (event: Event) => void;\n /** The callback to invoke when the 'quick-look-button-tapped' event is triggered. Refer to [quick-look-button-tapped in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-events-quickLookButtonTapped). */\n onQuickLookButtonTapped?: (event: Event) => void;\n /** The callback to invoke when the 'camera-change' event is triggered. Refer to [camera-change in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-stagingandcameras-events-cameraChange). */\n onCameraChange?: (event: Event) => void;\n /** The callback to invoke when the 'environment-change' event is triggered. Refer to [environment-change in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-lightingandenv-events-environmentChange). */\n onEnvironmentChange?: (event: Event) => void;\n /** The callback to invoke when the 'play' event is triggered. Refer to [play in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-animation-events-play). */\n onPlay?: (event: Event) => void;\n /** The callback to invoke when the 'pause' event is triggered. Refer to [pause in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-animation-events-pause). */\n onPause?: (event: Event) => void;\n /** The callback to invoke when the 'scene-graph-ready' event is triggered. Refer to [scene-graph-ready in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-scenegraph-events-sceneGraphReady). */\n onSceneGraphReady?: (event: Event) => void;\n};\n\n/**\n * The `ModelViewer` component renders a 3D model (with the `model-viewer` custom element) for\n * the Storefront API's [Model3d object](https://shopify.dev/api/storefront/reference/products/model3d).\n *\n * The `model-viewer` custom element is lazily downloaded through a dynamically-injected `<script type=\"module\">` tag when the `<ModelViewer />` component is rendered\n *\n * ModelViewer is using version `1.21.1` of the `@google/model-viewer` library.\n */\nexport function ModelViewer(props: ModelViewerProps) {\n const [modelViewer, setModelViewer] = useState<undefined | HTMLElement>(\n undefined\n );\n const callbackRef = useCallback((node: HTMLElement) => {\n setModelViewer(node);\n }, []);\n const {data, children, className, ...passthroughProps} = props;\n\n const modelViewerLoadedStatus = useLoadScript(\n 'https://unpkg.com/@google/model-viewer@v1.12.1/dist/model-viewer.min.js',\n {\n module: true,\n }\n );\n\n useEffect(() => {\n if (!modelViewer) {\n return;\n }\n if (passthroughProps.onError)\n modelViewer.addEventListener('error', passthroughProps.onError);\n if (passthroughProps.onLoad)\n modelViewer.addEventListener('load', passthroughProps.onLoad);\n if (passthroughProps.onPreload)\n modelViewer.addEventListener('preload', passthroughProps.onPreload);\n if (passthroughProps.onModelVisibility)\n modelViewer.addEventListener(\n 'model-visibility',\n passthroughProps.onModelVisibility\n );\n if (passthroughProps.onProgress)\n modelViewer.addEventListener('progress', passthroughProps.onProgress);\n if (passthroughProps.onArStatus)\n modelViewer.addEventListener('ar-status', passthroughProps.onArStatus);\n if (passthroughProps.onArTracking)\n modelViewer.addEventListener(\n 'ar-tracking',\n passthroughProps.onArTracking\n );\n if (passthroughProps.onQuickLookButtonTapped)\n modelViewer.addEventListener(\n 'quick-look-button-tapped',\n passthroughProps.onQuickLookButtonTapped\n );\n if (passthroughProps.onCameraChange)\n modelViewer.addEventListener(\n 'camera-change',\n passthroughProps.onCameraChange\n );\n if (passthroughProps.onEnvironmentChange)\n modelViewer.addEventListener(\n 'environment-change',\n passthroughProps.onEnvironmentChange\n );\n if (passthroughProps.onPlay)\n modelViewer.addEventListener('play', passthroughProps.onPlay);\n if (passthroughProps.onPause)\n modelViewer.addEventListener('ar-status', passthroughProps.onPause);\n if (passthroughProps.onSceneGraphReady)\n modelViewer.addEventListener(\n 'scene-graph-ready',\n passthroughProps.onSceneGraphReady\n );\n\n return () => {\n if (modelViewer == null) {\n return;\n }\n if (passthroughProps.onError)\n modelViewer.removeEventListener('error', passthroughProps.onError);\n if (passthroughProps.onLoad)\n modelViewer.removeEventListener('load', passthroughProps.onLoad);\n if (passthroughProps.onPreload)\n modelViewer.removeEventListener('preload', passthroughProps.onPreload);\n if (passthroughProps.onModelVisibility)\n modelViewer.removeEventListener(\n 'model-visibility',\n passthroughProps.onModelVisibility\n );\n if (passthroughProps.onProgress)\n modelViewer.removeEventListener(\n 'progress',\n passthroughProps.onProgress\n );\n if (passthroughProps.onArStatus)\n modelViewer.removeEventListener(\n 'ar-status',\n passthroughProps.onArStatus\n );\n if (passthroughProps.onArTracking)\n modelViewer.removeEventListener(\n 'ar-tracking',\n passthroughProps.onArTracking\n );\n if (passthroughProps.onQuickLookButtonTapped)\n modelViewer.removeEventListener(\n 'quick-look-button-tapped',\n passthroughProps.onQuickLookButtonTapped\n );\n if (passthroughProps.onCameraChange)\n modelViewer.removeEventListener(\n 'camera-change',\n passthroughProps.onCameraChange\n );\n if (passthroughProps.onEnvironmentChange)\n modelViewer.removeEventListener(\n 'environment-change',\n passthroughProps.onEnvironmentChange\n );\n if (passthroughProps.onPlay)\n modelViewer.removeEventListener('play', passthroughProps.onPlay);\n if (passthroughProps.onPause)\n modelViewer.removeEventListener('ar-status', passthroughProps.onPause);\n if (passthroughProps.onSceneGraphReady)\n modelViewer.removeEventListener(\n 'scene-graph-ready',\n passthroughProps.onSceneGraphReady\n );\n };\n }, [\n modelViewer,\n passthroughProps.onArStatus,\n passthroughProps.onArTracking,\n passthroughProps.onCameraChange,\n passthroughProps.onEnvironmentChange,\n passthroughProps.onError,\n passthroughProps.onLoad,\n passthroughProps.onModelVisibility,\n passthroughProps.onPause,\n passthroughProps.onPlay,\n passthroughProps.onPreload,\n passthroughProps.onProgress,\n passthroughProps.onQuickLookButtonTapped,\n passthroughProps.onSceneGraphReady,\n ]);\n\n if (modelViewerLoadedStatus !== 'done') {\n // TODO: What do we want to display while the model-viewer library loads?\n return null;\n }\n\n if (!data.sources?.[0]?.url) {\n const sourcesUrlError = `<ModelViewer/> requires 'data.sources' prop to be an array, with an object that has a property 'url' on it. Rendering 'null'`;\n if (__HYDROGEN_DEV__) {\n throw new Error(sourcesUrlError);\n } else {\n console.error(sourcesUrlError);\n return null;\n }\n }\n\n if (__HYDROGEN_DEV__ && !data.alt) {\n console.warn(\n `<ModelViewer/> requires the 'data.alt' prop for accessibility`\n );\n }\n\n return (\n <model-viewer\n // @ts-expect-error ref should exist\n ref={callbackRef}\n {...passthroughProps}\n className={className}\n id={passthroughProps.id ?? data.id}\n src={data.sources[0].url}\n alt={data.alt ?? null}\n camera-controls={passthroughProps.cameraControls ?? true}\n poster={(passthroughProps.poster || data.previewImage?.url) ?? null}\n autoplay={passthroughProps.autoplay ?? true}\n loading={passthroughProps.loading}\n reveal={passthroughProps.reveal}\n ar={passthroughProps.ar}\n ar-modes={passthroughProps.arModes}\n ar-scale={passthroughProps.arScale}\n // @ts-expect-error arPlacement should exist as a type, not sure why it doesn't. https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-attributes-arPlacement\n ar-placement={passthroughProps.arPlacement}\n ios-src={passthroughProps.iosSrc}\n touch-action={passthroughProps.touchAction}\n disable-zoom={passthroughProps.disableZoom}\n orbit-sensitivity={passthroughProps.orbitSensitivity}\n auto-rotate={passthroughProps.autoRotate}\n auto-rotate-delay={passthroughProps.autoRotateDelay}\n // @ts-expect-error rotationPerSecond should exist as a type, not sure why it doesn't. https://modelviewer.dev/docs/index.html#entrydocs-stagingandcameras-attributes-rotationPerSecond\n rotation-per-second={passthroughProps.rotationPerSecond}\n interaction-policy={passthroughProps.interactionPolicy}\n interaction-prompt={passthroughProps.interactionPrompt}\n interaction-prompt-style={passthroughProps.interactionPromptStyle}\n interaction-prompt-threshold={passthroughProps.interactionPromptThreshold}\n camera-orbit={passthroughProps.cameraOrbit}\n camera-target={passthroughProps.cameraTarget}\n field-of-view={passthroughProps.fieldOfView}\n max-camera-orbit={passthroughProps.maxCameraOrbit}\n min-camera-orbit={passthroughProps.minCameraOrbit}\n max-field-of-view={passthroughProps.maxFieldOfView}\n min-field-of-view={passthroughProps.minFieldOfView}\n bounds={passthroughProps.bounds}\n interpolation-decay={passthroughProps.interpolationDecay ?? 100}\n skybox-image={passthroughProps.skyboxImage}\n environment-image={passthroughProps.environmentImage}\n exposure={passthroughProps.exposure}\n shadow-intensity={passthroughProps.shadowIntensity ?? 0}\n shadow-softness={passthroughProps.shadowSoftness ?? 0}\n animation-name={passthroughProps.animationName}\n animation-crossfade-duration={passthroughProps.animationCrossfadeDuration}\n variant-name={passthroughProps.variantName}\n orientation={passthroughProps.orientation}\n scale={passthroughProps.scale}\n >\n {children}\n </model-viewer>\n );\n}\n"],"names":["ModelViewer","props","modelViewer","setModelViewer","useState","undefined","callbackRef","useCallback","node","data","children","className","passthroughProps","modelViewerLoadedStatus","useLoadScript","module","useEffect","onError","addEventListener","onLoad","onPreload","onModelVisibility","onProgress","onArStatus","onArTracking","onQuickLookButtonTapped","onCameraChange","onEnvironmentChange","onPlay","onPause","onSceneGraphReady","removeEventListener","sources","url","sourcesUrlError","console","error","id","alt","cameraControls","poster","previewImage","autoplay","loading","reveal","ar","arModes","arScale","arPlacement","iosSrc","touchAction","disableZoom","orbitSensitivity","autoRotate","autoRotateDelay","rotationPerSecond","interactionPolicy","interactionPrompt","interactionPromptStyle","interactionPromptThreshold","cameraOrbit","cameraTarget","fieldOfView","maxCameraOrbit","minCameraOrbit","maxFieldOfView","minFieldOfView","bounds","interpolationDecay","skyboxImage","environmentImage","exposure","shadowIntensity","shadowSoftness","animationName","animationCrossfadeDuration","variantName","orientation","scale"],"mappings":"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"}
|
|
@@ -1,12 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
const loadScript = require("./load-script.cjs");
|
|
5
|
-
const jsxRuntime = require("react/jsx-runtime");
|
|
1
|
+
import { useState, useCallback, useEffect } from "react";
|
|
2
|
+
import { useLoadScript } from "./load-script.mjs";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
6
4
|
function ModelViewer(props) {
|
|
7
5
|
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
|
|
8
|
-
const [modelViewer, setModelViewer] =
|
|
9
|
-
const callbackRef =
|
|
6
|
+
const [modelViewer, setModelViewer] = useState(void 0);
|
|
7
|
+
const callbackRef = useCallback((node) => {
|
|
10
8
|
setModelViewer(node);
|
|
11
9
|
}, []);
|
|
12
10
|
const {
|
|
@@ -15,10 +13,10 @@ function ModelViewer(props) {
|
|
|
15
13
|
className,
|
|
16
14
|
...passthroughProps
|
|
17
15
|
} = props;
|
|
18
|
-
const modelViewerLoadedStatus =
|
|
16
|
+
const modelViewerLoadedStatus = useLoadScript("https://unpkg.com/@google/model-viewer@v1.12.1/dist/model-viewer.min.js", {
|
|
19
17
|
module: true
|
|
20
18
|
});
|
|
21
|
-
|
|
19
|
+
useEffect(() => {
|
|
22
20
|
if (!modelViewer) {
|
|
23
21
|
return;
|
|
24
22
|
}
|
|
@@ -90,7 +88,7 @@ function ModelViewer(props) {
|
|
|
90
88
|
return null;
|
|
91
89
|
}
|
|
92
90
|
}
|
|
93
|
-
return /* @__PURE__ */
|
|
91
|
+
return /* @__PURE__ */ jsx("model-viewer", {
|
|
94
92
|
ref: callbackRef,
|
|
95
93
|
...passthroughProps,
|
|
96
94
|
className,
|
|
@@ -139,5 +137,7 @@ function ModelViewer(props) {
|
|
|
139
137
|
children
|
|
140
138
|
});
|
|
141
139
|
}
|
|
142
|
-
|
|
143
|
-
|
|
140
|
+
export {
|
|
141
|
+
ModelViewer
|
|
142
|
+
};
|
|
143
|
+
//# sourceMappingURL=ModelViewer.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModelViewer.cjs","sources":["../../src/ModelViewer.tsx"],"sourcesContent":["import {useState, useEffect, useCallback} from 'react';\nimport {useLoadScript} from './load-script.js';\nimport type {Model3d} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\nimport type {ModelViewerElement} from '@google/model-viewer/lib/model-viewer.js';\n\ntype PropsWeControl = 'src';\n\ndeclare global {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n interface IntrinsicElements {\n 'model-viewer': PartialDeep<\n ModelViewerElement,\n {recurseIntoArrays: true}\n >;\n }\n }\n}\n\ntype ModelViewerProps = Omit<\n PartialDeep<JSX.IntrinsicElements['model-viewer'], {recurseIntoArrays: true}>,\n PropsWeControl\n> & {\n /** An object with fields that correspond to the Storefront API's [Model3D object](https://shopify.dev/api/storefront/latest/objects/model3d). */\n data: PartialDeep<Model3d, {recurseIntoArrays: true}>;\n /** The callback to invoke when the 'error' event is triggered. Refer to [error in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-error). */\n onError?: (event: Event) => void;\n /** The callback to invoke when the `load` event is triggered. Refer to [load in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-load). */\n onLoad?: (event: Event) => void;\n /** The callback to invoke when the 'preload' event is triggered. Refer to [preload in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-preload). */\n onPreload?: (event: Event) => void;\n /** The callback to invoke when the 'model-visibility' event is triggered. Refer to [model-visibility in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-modelVisibility). */\n onModelVisibility?: (event: Event) => void;\n /** The callback to invoke when the 'progress' event is triggered. Refer to [progress in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-progress). */\n onProgress?: (event: Event) => void;\n /** The callback to invoke when the 'ar-status' event is triggered. Refer to [ar-status in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-events-arStatus). */\n onArStatus?: (event: Event) => void;\n /** The callback to invoke when the 'ar-tracking' event is triggered. Refer to [ar-tracking in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-events-arTracking). */\n onArTracking?: (event: Event) => void;\n /** The callback to invoke when the 'quick-look-button-tapped' event is triggered. Refer to [quick-look-button-tapped in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-events-quickLookButtonTapped). */\n onQuickLookButtonTapped?: (event: Event) => void;\n /** The callback to invoke when the 'camera-change' event is triggered. Refer to [camera-change in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-stagingandcameras-events-cameraChange). */\n onCameraChange?: (event: Event) => void;\n /** The callback to invoke when the 'environment-change' event is triggered. Refer to [environment-change in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-lightingandenv-events-environmentChange). */\n onEnvironmentChange?: (event: Event) => void;\n /** The callback to invoke when the 'play' event is triggered. Refer to [play in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-animation-events-play). */\n onPlay?: (event: Event) => void;\n /** The callback to invoke when the 'pause' event is triggered. Refer to [pause in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-animation-events-pause). */\n onPause?: (event: Event) => void;\n /** The callback to invoke when the 'scene-graph-ready' event is triggered. Refer to [scene-graph-ready in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-scenegraph-events-sceneGraphReady). */\n onSceneGraphReady?: (event: Event) => void;\n};\n\n/**\n * The `ModelViewer` component renders a 3D model (with the `model-viewer` custom element) for\n * the Storefront API's [Model3d object](https://shopify.dev/api/storefront/reference/products/model3d).\n *\n * The `model-viewer` custom element is lazily downloaded through a dynamically-injected `<script type=\"module\">` tag when the `<ModelViewer />` component is rendered\n *\n * ModelViewer is using version `1.21.1` of the `@google/model-viewer` library.\n */\nexport function ModelViewer(props: ModelViewerProps) {\n const [modelViewer, setModelViewer] = useState<undefined | HTMLElement>(\n undefined\n );\n const callbackRef = useCallback((node: HTMLElement) => {\n setModelViewer(node);\n }, []);\n const {data, children, className, ...passthroughProps} = props;\n\n const modelViewerLoadedStatus = useLoadScript(\n 'https://unpkg.com/@google/model-viewer@v1.12.1/dist/model-viewer.min.js',\n {\n module: true,\n }\n );\n\n useEffect(() => {\n if (!modelViewer) {\n return;\n }\n if (passthroughProps.onError)\n modelViewer.addEventListener('error', passthroughProps.onError);\n if (passthroughProps.onLoad)\n modelViewer.addEventListener('load', passthroughProps.onLoad);\n if (passthroughProps.onPreload)\n modelViewer.addEventListener('preload', passthroughProps.onPreload);\n if (passthroughProps.onModelVisibility)\n modelViewer.addEventListener(\n 'model-visibility',\n passthroughProps.onModelVisibility\n );\n if (passthroughProps.onProgress)\n modelViewer.addEventListener('progress', passthroughProps.onProgress);\n if (passthroughProps.onArStatus)\n modelViewer.addEventListener('ar-status', passthroughProps.onArStatus);\n if (passthroughProps.onArTracking)\n modelViewer.addEventListener(\n 'ar-tracking',\n passthroughProps.onArTracking\n );\n if (passthroughProps.onQuickLookButtonTapped)\n modelViewer.addEventListener(\n 'quick-look-button-tapped',\n passthroughProps.onQuickLookButtonTapped\n );\n if (passthroughProps.onCameraChange)\n modelViewer.addEventListener(\n 'camera-change',\n passthroughProps.onCameraChange\n );\n if (passthroughProps.onEnvironmentChange)\n modelViewer.addEventListener(\n 'environment-change',\n passthroughProps.onEnvironmentChange\n );\n if (passthroughProps.onPlay)\n modelViewer.addEventListener('play', passthroughProps.onPlay);\n if (passthroughProps.onPause)\n modelViewer.addEventListener('ar-status', passthroughProps.onPause);\n if (passthroughProps.onSceneGraphReady)\n modelViewer.addEventListener(\n 'scene-graph-ready',\n passthroughProps.onSceneGraphReady\n );\n\n return () => {\n if (modelViewer == null) {\n return;\n }\n if (passthroughProps.onError)\n modelViewer.removeEventListener('error', passthroughProps.onError);\n if (passthroughProps.onLoad)\n modelViewer.removeEventListener('load', passthroughProps.onLoad);\n if (passthroughProps.onPreload)\n modelViewer.removeEventListener('preload', passthroughProps.onPreload);\n if (passthroughProps.onModelVisibility)\n modelViewer.removeEventListener(\n 'model-visibility',\n passthroughProps.onModelVisibility\n );\n if (passthroughProps.onProgress)\n modelViewer.removeEventListener(\n 'progress',\n passthroughProps.onProgress\n );\n if (passthroughProps.onArStatus)\n modelViewer.removeEventListener(\n 'ar-status',\n passthroughProps.onArStatus\n );\n if (passthroughProps.onArTracking)\n modelViewer.removeEventListener(\n 'ar-tracking',\n passthroughProps.onArTracking\n );\n if (passthroughProps.onQuickLookButtonTapped)\n modelViewer.removeEventListener(\n 'quick-look-button-tapped',\n passthroughProps.onQuickLookButtonTapped\n );\n if (passthroughProps.onCameraChange)\n modelViewer.removeEventListener(\n 'camera-change',\n passthroughProps.onCameraChange\n );\n if (passthroughProps.onEnvironmentChange)\n modelViewer.removeEventListener(\n 'environment-change',\n passthroughProps.onEnvironmentChange\n );\n if (passthroughProps.onPlay)\n modelViewer.removeEventListener('play', passthroughProps.onPlay);\n if (passthroughProps.onPause)\n modelViewer.removeEventListener('ar-status', passthroughProps.onPause);\n if (passthroughProps.onSceneGraphReady)\n modelViewer.removeEventListener(\n 'scene-graph-ready',\n passthroughProps.onSceneGraphReady\n );\n };\n }, [\n modelViewer,\n passthroughProps.onArStatus,\n passthroughProps.onArTracking,\n passthroughProps.onCameraChange,\n passthroughProps.onEnvironmentChange,\n passthroughProps.onError,\n passthroughProps.onLoad,\n passthroughProps.onModelVisibility,\n passthroughProps.onPause,\n passthroughProps.onPlay,\n passthroughProps.onPreload,\n passthroughProps.onProgress,\n passthroughProps.onQuickLookButtonTapped,\n passthroughProps.onSceneGraphReady,\n ]);\n\n if (modelViewerLoadedStatus !== 'done') {\n // TODO: What do we want to display while the model-viewer library loads?\n return null;\n }\n\n if (!data.sources?.[0]?.url) {\n const sourcesUrlError = `<ModelViewer/> requires 'data.sources' prop to be an array, with an object that has a property 'url' on it. Rendering 'null'`;\n if (__HYDROGEN_DEV__) {\n throw new Error(sourcesUrlError);\n } else {\n console.error(sourcesUrlError);\n return null;\n }\n }\n\n if (__HYDROGEN_DEV__ && !data.alt) {\n console.warn(\n `<ModelViewer/> requires the 'data.alt' prop for accessibility`\n );\n }\n\n return (\n <model-viewer\n // @ts-expect-error ref should exist\n ref={callbackRef}\n {...passthroughProps}\n className={className}\n id={passthroughProps.id ?? data.id}\n src={data.sources[0].url}\n alt={data.alt ?? null}\n camera-controls={passthroughProps.cameraControls ?? true}\n poster={(passthroughProps.poster || data.previewImage?.url) ?? null}\n autoplay={passthroughProps.autoplay ?? true}\n loading={passthroughProps.loading}\n reveal={passthroughProps.reveal}\n ar={passthroughProps.ar}\n ar-modes={passthroughProps.arModes}\n ar-scale={passthroughProps.arScale}\n // @ts-expect-error arPlacement should exist as a type, not sure why it doesn't. https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-attributes-arPlacement\n ar-placement={passthroughProps.arPlacement}\n ios-src={passthroughProps.iosSrc}\n touch-action={passthroughProps.touchAction}\n disable-zoom={passthroughProps.disableZoom}\n orbit-sensitivity={passthroughProps.orbitSensitivity}\n auto-rotate={passthroughProps.autoRotate}\n auto-rotate-delay={passthroughProps.autoRotateDelay}\n // @ts-expect-error rotationPerSecond should exist as a type, not sure why it doesn't. https://modelviewer.dev/docs/index.html#entrydocs-stagingandcameras-attributes-rotationPerSecond\n rotation-per-second={passthroughProps.rotationPerSecond}\n interaction-policy={passthroughProps.interactionPolicy}\n interaction-prompt={passthroughProps.interactionPrompt}\n interaction-prompt-style={passthroughProps.interactionPromptStyle}\n interaction-prompt-threshold={passthroughProps.interactionPromptThreshold}\n camera-orbit={passthroughProps.cameraOrbit}\n camera-target={passthroughProps.cameraTarget}\n field-of-view={passthroughProps.fieldOfView}\n max-camera-orbit={passthroughProps.maxCameraOrbit}\n min-camera-orbit={passthroughProps.minCameraOrbit}\n max-field-of-view={passthroughProps.maxFieldOfView}\n min-field-of-view={passthroughProps.minFieldOfView}\n bounds={passthroughProps.bounds}\n interpolation-decay={passthroughProps.interpolationDecay ?? 100}\n skybox-image={passthroughProps.skyboxImage}\n environment-image={passthroughProps.environmentImage}\n exposure={passthroughProps.exposure}\n shadow-intensity={passthroughProps.shadowIntensity ?? 0}\n shadow-softness={passthroughProps.shadowSoftness ?? 0}\n animation-name={passthroughProps.animationName}\n animation-crossfade-duration={passthroughProps.animationCrossfadeDuration}\n variant-name={passthroughProps.variantName}\n orientation={passthroughProps.orientation}\n scale={passthroughProps.scale}\n >\n {children}\n </model-viewer>\n );\n}\n"],"names":["ModelViewer","props","modelViewer","setModelViewer","useState","undefined","callbackRef","useCallback","node","data","children","className","passthroughProps","modelViewerLoadedStatus","useLoadScript","module","useEffect","onError","addEventListener","onLoad","onPreload","onModelVisibility","onProgress","onArStatus","onArTracking","onQuickLookButtonTapped","onCameraChange","onEnvironmentChange","onPlay","onPause","onSceneGraphReady","removeEventListener","sources","url","sourcesUrlError","console","error","id","alt","cameraControls","poster","previewImage","autoplay","loading","reveal","ar","arModes","arScale","arPlacement","iosSrc","touchAction","disableZoom","orbitSensitivity","autoRotate","autoRotateDelay","rotationPerSecond","interactionPolicy","interactionPrompt","interactionPromptStyle","interactionPromptThreshold","cameraOrbit","cameraTarget","fieldOfView","maxCameraOrbit","minCameraOrbit","maxFieldOfView","minFieldOfView","bounds","interpolationDecay","skyboxImage","environmentImage","exposure","shadowIntensity","shadowSoftness","animationName","animationCrossfadeDuration","variantName","orientation","scale"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ModelViewer.mjs","sources":["../../src/ModelViewer.tsx"],"sourcesContent":["import {useState, useEffect, useCallback} from 'react';\nimport {useLoadScript} from './load-script.js';\nimport type {Model3d} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\nimport type {ModelViewerElement} from '@google/model-viewer/lib/model-viewer.js';\n\ntype PropsWeControl = 'src';\n\ndeclare global {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n interface IntrinsicElements {\n 'model-viewer': PartialDeep<\n ModelViewerElement,\n {recurseIntoArrays: true}\n >;\n }\n }\n}\n\ntype ModelViewerProps = Omit<\n PartialDeep<JSX.IntrinsicElements['model-viewer'], {recurseIntoArrays: true}>,\n PropsWeControl\n> & {\n /** An object with fields that correspond to the Storefront API's [Model3D object](https://shopify.dev/api/storefront/latest/objects/model3d). */\n data: PartialDeep<Model3d, {recurseIntoArrays: true}>;\n /** The callback to invoke when the 'error' event is triggered. Refer to [error in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-error). */\n onError?: (event: Event) => void;\n /** The callback to invoke when the `load` event is triggered. Refer to [load in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-load). */\n onLoad?: (event: Event) => void;\n /** The callback to invoke when the 'preload' event is triggered. Refer to [preload in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-preload). */\n onPreload?: (event: Event) => void;\n /** The callback to invoke when the 'model-visibility' event is triggered. Refer to [model-visibility in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-modelVisibility). */\n onModelVisibility?: (event: Event) => void;\n /** The callback to invoke when the 'progress' event is triggered. Refer to [progress in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-progress). */\n onProgress?: (event: Event) => void;\n /** The callback to invoke when the 'ar-status' event is triggered. Refer to [ar-status in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-events-arStatus). */\n onArStatus?: (event: Event) => void;\n /** The callback to invoke when the 'ar-tracking' event is triggered. Refer to [ar-tracking in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-events-arTracking). */\n onArTracking?: (event: Event) => void;\n /** The callback to invoke when the 'quick-look-button-tapped' event is triggered. Refer to [quick-look-button-tapped in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-events-quickLookButtonTapped). */\n onQuickLookButtonTapped?: (event: Event) => void;\n /** The callback to invoke when the 'camera-change' event is triggered. Refer to [camera-change in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-stagingandcameras-events-cameraChange). */\n onCameraChange?: (event: Event) => void;\n /** The callback to invoke when the 'environment-change' event is triggered. Refer to [environment-change in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-lightingandenv-events-environmentChange). */\n onEnvironmentChange?: (event: Event) => void;\n /** The callback to invoke when the 'play' event is triggered. Refer to [play in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-animation-events-play). */\n onPlay?: (event: Event) => void;\n /** The callback to invoke when the 'pause' event is triggered. Refer to [pause in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-animation-events-pause). */\n onPause?: (event: Event) => void;\n /** The callback to invoke when the 'scene-graph-ready' event is triggered. Refer to [scene-graph-ready in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-scenegraph-events-sceneGraphReady). */\n onSceneGraphReady?: (event: Event) => void;\n};\n\n/**\n * The `ModelViewer` component renders a 3D model (with the `model-viewer` custom element) for\n * the Storefront API's [Model3d object](https://shopify.dev/api/storefront/reference/products/model3d).\n *\n * The `model-viewer` custom element is lazily downloaded through a dynamically-injected `<script type=\"module\">` tag when the `<ModelViewer />` component is rendered\n *\n * ModelViewer is using version `1.21.1` of the `@google/model-viewer` library.\n */\nexport function ModelViewer(props: ModelViewerProps) {\n const [modelViewer, setModelViewer] = useState<undefined | HTMLElement>(\n undefined\n );\n const callbackRef = useCallback((node: HTMLElement) => {\n setModelViewer(node);\n }, []);\n const {data, children, className, ...passthroughProps} = props;\n\n const modelViewerLoadedStatus = useLoadScript(\n 'https://unpkg.com/@google/model-viewer@v1.12.1/dist/model-viewer.min.js',\n {\n module: true,\n }\n );\n\n useEffect(() => {\n if (!modelViewer) {\n return;\n }\n if (passthroughProps.onError)\n modelViewer.addEventListener('error', passthroughProps.onError);\n if (passthroughProps.onLoad)\n modelViewer.addEventListener('load', passthroughProps.onLoad);\n if (passthroughProps.onPreload)\n modelViewer.addEventListener('preload', passthroughProps.onPreload);\n if (passthroughProps.onModelVisibility)\n modelViewer.addEventListener(\n 'model-visibility',\n passthroughProps.onModelVisibility\n );\n if (passthroughProps.onProgress)\n modelViewer.addEventListener('progress', passthroughProps.onProgress);\n if (passthroughProps.onArStatus)\n modelViewer.addEventListener('ar-status', passthroughProps.onArStatus);\n if (passthroughProps.onArTracking)\n modelViewer.addEventListener(\n 'ar-tracking',\n passthroughProps.onArTracking\n );\n if (passthroughProps.onQuickLookButtonTapped)\n modelViewer.addEventListener(\n 'quick-look-button-tapped',\n passthroughProps.onQuickLookButtonTapped\n );\n if (passthroughProps.onCameraChange)\n modelViewer.addEventListener(\n 'camera-change',\n passthroughProps.onCameraChange\n );\n if (passthroughProps.onEnvironmentChange)\n modelViewer.addEventListener(\n 'environment-change',\n passthroughProps.onEnvironmentChange\n );\n if (passthroughProps.onPlay)\n modelViewer.addEventListener('play', passthroughProps.onPlay);\n if (passthroughProps.onPause)\n modelViewer.addEventListener('ar-status', passthroughProps.onPause);\n if (passthroughProps.onSceneGraphReady)\n modelViewer.addEventListener(\n 'scene-graph-ready',\n passthroughProps.onSceneGraphReady\n );\n\n return () => {\n if (modelViewer == null) {\n return;\n }\n if (passthroughProps.onError)\n modelViewer.removeEventListener('error', passthroughProps.onError);\n if (passthroughProps.onLoad)\n modelViewer.removeEventListener('load', passthroughProps.onLoad);\n if (passthroughProps.onPreload)\n modelViewer.removeEventListener('preload', passthroughProps.onPreload);\n if (passthroughProps.onModelVisibility)\n modelViewer.removeEventListener(\n 'model-visibility',\n passthroughProps.onModelVisibility\n );\n if (passthroughProps.onProgress)\n modelViewer.removeEventListener(\n 'progress',\n passthroughProps.onProgress\n );\n if (passthroughProps.onArStatus)\n modelViewer.removeEventListener(\n 'ar-status',\n passthroughProps.onArStatus\n );\n if (passthroughProps.onArTracking)\n modelViewer.removeEventListener(\n 'ar-tracking',\n passthroughProps.onArTracking\n );\n if (passthroughProps.onQuickLookButtonTapped)\n modelViewer.removeEventListener(\n 'quick-look-button-tapped',\n passthroughProps.onQuickLookButtonTapped\n );\n if (passthroughProps.onCameraChange)\n modelViewer.removeEventListener(\n 'camera-change',\n passthroughProps.onCameraChange\n );\n if (passthroughProps.onEnvironmentChange)\n modelViewer.removeEventListener(\n 'environment-change',\n passthroughProps.onEnvironmentChange\n );\n if (passthroughProps.onPlay)\n modelViewer.removeEventListener('play', passthroughProps.onPlay);\n if (passthroughProps.onPause)\n modelViewer.removeEventListener('ar-status', passthroughProps.onPause);\n if (passthroughProps.onSceneGraphReady)\n modelViewer.removeEventListener(\n 'scene-graph-ready',\n passthroughProps.onSceneGraphReady\n );\n };\n }, [\n modelViewer,\n passthroughProps.onArStatus,\n passthroughProps.onArTracking,\n passthroughProps.onCameraChange,\n passthroughProps.onEnvironmentChange,\n passthroughProps.onError,\n passthroughProps.onLoad,\n passthroughProps.onModelVisibility,\n passthroughProps.onPause,\n passthroughProps.onPlay,\n passthroughProps.onPreload,\n passthroughProps.onProgress,\n passthroughProps.onQuickLookButtonTapped,\n passthroughProps.onSceneGraphReady,\n ]);\n\n if (modelViewerLoadedStatus !== 'done') {\n // TODO: What do we want to display while the model-viewer library loads?\n return null;\n }\n\n if (!data.sources?.[0]?.url) {\n const sourcesUrlError = `<ModelViewer/> requires 'data.sources' prop to be an array, with an object that has a property 'url' on it. Rendering 'null'`;\n if (__HYDROGEN_DEV__) {\n throw new Error(sourcesUrlError);\n } else {\n console.error(sourcesUrlError);\n return null;\n }\n }\n\n if (__HYDROGEN_DEV__ && !data.alt) {\n console.warn(\n `<ModelViewer/> requires the 'data.alt' prop for accessibility`\n );\n }\n\n return (\n <model-viewer\n // @ts-expect-error ref should exist\n ref={callbackRef}\n {...passthroughProps}\n className={className}\n id={passthroughProps.id ?? data.id}\n src={data.sources[0].url}\n alt={data.alt ?? null}\n camera-controls={passthroughProps.cameraControls ?? true}\n poster={(passthroughProps.poster || data.previewImage?.url) ?? null}\n autoplay={passthroughProps.autoplay ?? true}\n loading={passthroughProps.loading}\n reveal={passthroughProps.reveal}\n ar={passthroughProps.ar}\n ar-modes={passthroughProps.arModes}\n ar-scale={passthroughProps.arScale}\n // @ts-expect-error arPlacement should exist as a type, not sure why it doesn't. https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-attributes-arPlacement\n ar-placement={passthroughProps.arPlacement}\n ios-src={passthroughProps.iosSrc}\n touch-action={passthroughProps.touchAction}\n disable-zoom={passthroughProps.disableZoom}\n orbit-sensitivity={passthroughProps.orbitSensitivity}\n auto-rotate={passthroughProps.autoRotate}\n auto-rotate-delay={passthroughProps.autoRotateDelay}\n // @ts-expect-error rotationPerSecond should exist as a type, not sure why it doesn't. https://modelviewer.dev/docs/index.html#entrydocs-stagingandcameras-attributes-rotationPerSecond\n rotation-per-second={passthroughProps.rotationPerSecond}\n interaction-policy={passthroughProps.interactionPolicy}\n interaction-prompt={passthroughProps.interactionPrompt}\n interaction-prompt-style={passthroughProps.interactionPromptStyle}\n interaction-prompt-threshold={passthroughProps.interactionPromptThreshold}\n camera-orbit={passthroughProps.cameraOrbit}\n camera-target={passthroughProps.cameraTarget}\n field-of-view={passthroughProps.fieldOfView}\n max-camera-orbit={passthroughProps.maxCameraOrbit}\n min-camera-orbit={passthroughProps.minCameraOrbit}\n max-field-of-view={passthroughProps.maxFieldOfView}\n min-field-of-view={passthroughProps.minFieldOfView}\n bounds={passthroughProps.bounds}\n interpolation-decay={passthroughProps.interpolationDecay ?? 100}\n skybox-image={passthroughProps.skyboxImage}\n environment-image={passthroughProps.environmentImage}\n exposure={passthroughProps.exposure}\n shadow-intensity={passthroughProps.shadowIntensity ?? 0}\n shadow-softness={passthroughProps.shadowSoftness ?? 0}\n animation-name={passthroughProps.animationName}\n animation-crossfade-duration={passthroughProps.animationCrossfadeDuration}\n variant-name={passthroughProps.variantName}\n orientation={passthroughProps.orientation}\n scale={passthroughProps.scale}\n >\n {children}\n </model-viewer>\n );\n}\n"],"names":["ModelViewer","props","modelViewer","setModelViewer","useState","undefined","callbackRef","useCallback","node","data","children","className","passthroughProps","modelViewerLoadedStatus","useLoadScript","module","useEffect","onError","addEventListener","onLoad","onPreload","onModelVisibility","onProgress","onArStatus","onArTracking","onQuickLookButtonTapped","onCameraChange","onEnvironmentChange","onPlay","onPause","onSceneGraphReady","removeEventListener","sources","url","sourcesUrlError","console","error","id","alt","cameraControls","poster","previewImage","autoplay","loading","reveal","ar","arModes","arScale","arPlacement","iosSrc","touchAction","disableZoom","orbitSensitivity","autoRotate","autoRotateDelay","rotationPerSecond","interactionPolicy","interactionPrompt","interactionPromptStyle","interactionPromptThreshold","cameraOrbit","cameraTarget","fieldOfView","maxCameraOrbit","minCameraOrbit","maxFieldOfView","minFieldOfView","bounds","interpolationDecay","skyboxImage","environmentImage","exposure","shadowIntensity","shadowSoftness","animationName","animationCrossfadeDuration","variantName","orientation","scale"],"mappings":"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"}
|
package/dist/prod/Money.js
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
|
|
3
|
+
const useMoney = require("./useMoney.js");
|
|
4
|
+
const jsxRuntime = require("react/jsx-runtime");
|
|
3
5
|
function Money({
|
|
4
6
|
data,
|
|
5
7
|
as,
|
|
@@ -12,7 +14,7 @@ function Money({
|
|
|
12
14
|
if (!isMoney(data)) {
|
|
13
15
|
throw new Error(`<Money/> needs a valid 'data' prop that has 'amount' and 'currencyCode'`);
|
|
14
16
|
}
|
|
15
|
-
const moneyObject = useMoney(data);
|
|
17
|
+
const moneyObject = useMoney.useMoney(data);
|
|
16
18
|
const Wrapper = as != null ? as : "div";
|
|
17
19
|
let output = moneyObject.localizedString;
|
|
18
20
|
if (withoutCurrency || withoutTrailingZeros) {
|
|
@@ -24,9 +26,9 @@ function Money({
|
|
|
24
26
|
output = moneyObject.withoutTrailingZerosAndCurrency;
|
|
25
27
|
}
|
|
26
28
|
}
|
|
27
|
-
return /* @__PURE__ */ jsxs(Wrapper, {
|
|
29
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(Wrapper, {
|
|
28
30
|
...passthroughProps,
|
|
29
|
-
children: [output, measurement && measurement.referenceUnit && /* @__PURE__ */ jsxs(Fragment, {
|
|
31
|
+
children: [output, measurement && measurement.referenceUnit && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
30
32
|
children: [measurementSeparator, measurement.referenceUnit]
|
|
31
33
|
})]
|
|
32
34
|
});
|
|
@@ -34,7 +36,5 @@ function Money({
|
|
|
34
36
|
function isMoney(maybeMoney) {
|
|
35
37
|
return typeof maybeMoney.amount === "string" && !!maybeMoney.amount && typeof maybeMoney.currencyCode === "string" && !!maybeMoney.currencyCode;
|
|
36
38
|
}
|
|
37
|
-
|
|
38
|
-
Money
|
|
39
|
-
};
|
|
39
|
+
exports.Money = Money;
|
|
40
40
|
//# sourceMappingURL=Money.js.map
|
package/dist/prod/Money.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Money.js","sources":["../../src/Money.tsx"],"sourcesContent":["import {type ReactNode} from 'react';\nimport {useMoney} from './useMoney.js';\nimport type {MoneyV2, UnitPriceMeasurement} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\n\ninterface CustomProps<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 /** An object with fields that correspond to the Storefront API's [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2). */\n data: PartialDeep<MoneyV2, {recurseIntoArrays: true}>;\n /** Whether to remove the currency symbol from the output. */\n withoutCurrency?: boolean;\n /** Whether to remove trailing zeros (fractional money) from the output. */\n withoutTrailingZeros?: boolean;\n /** A [UnitPriceMeasurement object](https://shopify.dev/api/storefront/latest/objects/unitpricemeasurement). */\n measurement?: PartialDeep<UnitPriceMeasurement, {recurseIntoArrays: true}>;\n /** Customizes the separator between the money output and the measurement output. Used with the `measurement` prop. Defaults to `'/'`. */\n measurementSeparator?: ReactNode;\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 MoneyProps<ComponentGeneric extends React.ElementType> =\n CustomProps<ComponentGeneric> &\n Omit<\n React.ComponentPropsWithoutRef<ComponentGeneric>,\n keyof CustomProps<ComponentGeneric>\n >;\n\n/**\n * The `Money` component renders a string of the Storefront API's\n * [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2) according to the\n * `locale` in the `ShopifyProvider` component.\n */\nexport function Money<ComponentGeneric extends React.ElementType>({\n data,\n as,\n withoutCurrency,\n withoutTrailingZeros,\n measurement,\n measurementSeparator = '/',\n ...passthroughProps\n}: MoneyProps<ComponentGeneric>) {\n if (!isMoney(data)) {\n throw new Error(\n `<Money/> needs a valid 'data' prop that has 'amount' and 'currencyCode'`\n );\n }\n const moneyObject = useMoney(data);\n const Wrapper = as ?? 'div';\n\n let output = moneyObject.localizedString;\n\n if (withoutCurrency || withoutTrailingZeros) {\n if (withoutCurrency && !withoutTrailingZeros) {\n output = moneyObject.amount;\n } else if (!withoutCurrency && withoutTrailingZeros) {\n output = moneyObject.withoutTrailingZeros;\n } else {\n // both\n output = moneyObject.withoutTrailingZerosAndCurrency;\n }\n }\n\n return (\n <Wrapper {...passthroughProps}>\n {output}\n {measurement && measurement.referenceUnit && (\n <>\n {measurementSeparator}\n {measurement.referenceUnit}\n </>\n )}\n </Wrapper>\n );\n}\n\n// required in order to narrow the money object down and make TS happy\nfunction isMoney(\n maybeMoney: PartialDeep<MoneyV2, {recurseIntoArrays: true}>\n): maybeMoney is MoneyV2 {\n return (\n typeof maybeMoney.amount === 'string' &&\n !!maybeMoney.amount &&\n typeof maybeMoney.currencyCode === 'string' &&\n !!maybeMoney.currencyCode\n );\n}\n"],"names":["Money","data","as","withoutCurrency","withoutTrailingZeros","measurement","measurementSeparator","passthroughProps","isMoney","Error","moneyObject","useMoney","Wrapper","output","localizedString","amount","withoutTrailingZerosAndCurrency","referenceUnit","_Fragment","maybeMoney","currencyCode"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Money.js","sources":["../../src/Money.tsx"],"sourcesContent":["import {type ReactNode} from 'react';\nimport {useMoney} from './useMoney.js';\nimport type {MoneyV2, UnitPriceMeasurement} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\n\ninterface CustomProps<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 /** An object with fields that correspond to the Storefront API's [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2). */\n data: PartialDeep<MoneyV2, {recurseIntoArrays: true}>;\n /** Whether to remove the currency symbol from the output. */\n withoutCurrency?: boolean;\n /** Whether to remove trailing zeros (fractional money) from the output. */\n withoutTrailingZeros?: boolean;\n /** A [UnitPriceMeasurement object](https://shopify.dev/api/storefront/latest/objects/unitpricemeasurement). */\n measurement?: PartialDeep<UnitPriceMeasurement, {recurseIntoArrays: true}>;\n /** Customizes the separator between the money output and the measurement output. Used with the `measurement` prop. Defaults to `'/'`. */\n measurementSeparator?: ReactNode;\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 MoneyProps<ComponentGeneric extends React.ElementType> =\n CustomProps<ComponentGeneric> &\n Omit<\n React.ComponentPropsWithoutRef<ComponentGeneric>,\n keyof CustomProps<ComponentGeneric>\n >;\n\n/**\n * The `Money` component renders a string of the Storefront API's\n * [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2) according to the\n * `locale` in the `ShopifyProvider` component.\n */\nexport function Money<ComponentGeneric extends React.ElementType>({\n data,\n as,\n withoutCurrency,\n withoutTrailingZeros,\n measurement,\n measurementSeparator = '/',\n ...passthroughProps\n}: MoneyProps<ComponentGeneric>) {\n if (!isMoney(data)) {\n throw new Error(\n `<Money/> needs a valid 'data' prop that has 'amount' and 'currencyCode'`\n );\n }\n const moneyObject = useMoney(data);\n const Wrapper = as ?? 'div';\n\n let output = moneyObject.localizedString;\n\n if (withoutCurrency || withoutTrailingZeros) {\n if (withoutCurrency && !withoutTrailingZeros) {\n output = moneyObject.amount;\n } else if (!withoutCurrency && withoutTrailingZeros) {\n output = moneyObject.withoutTrailingZeros;\n } else {\n // both\n output = moneyObject.withoutTrailingZerosAndCurrency;\n }\n }\n\n return (\n <Wrapper {...passthroughProps}>\n {output}\n {measurement && measurement.referenceUnit && (\n <>\n {measurementSeparator}\n {measurement.referenceUnit}\n </>\n )}\n </Wrapper>\n );\n}\n\n// required in order to narrow the money object down and make TS happy\nfunction isMoney(\n maybeMoney: PartialDeep<MoneyV2, {recurseIntoArrays: true}>\n): maybeMoney is MoneyV2 {\n return (\n typeof maybeMoney.amount === 'string' &&\n !!maybeMoney.amount &&\n typeof maybeMoney.currencyCode === 'string' &&\n !!maybeMoney.currencyCode\n );\n}\n"],"names":["Money","data","as","withoutCurrency","withoutTrailingZeros","measurement","measurementSeparator","passthroughProps","isMoney","Error","moneyObject","useMoney","Wrapper","output","localizedString","amount","withoutTrailingZerosAndCurrency","referenceUnit","_Fragment","maybeMoney","currencyCode"],"mappings":";;;;AAiCO,SAASA,MAAkD;AAAA,EAChEC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,uBAAuB;AAAA,KACpBC;AAP6D,GAQjC;AAC3B,MAAA,CAACC,QAAQP,IAAD,GAAQ;AACZ,UAAA,IAAIQ,MACP,yEADG;AAAA,EAGP;AACKC,QAAAA,cAAcC,kBAASV,IAAD;AAC5B,QAAMW,UAAUV,kBAAM;AAEtB,MAAIW,SAASH,YAAYI;AAEzB,MAAIX,mBAAmBC,sBAAsB;AACvCD,QAAAA,mBAAmB,CAACC,sBAAsB;AAC5CS,eAASH,YAAYK;AAAAA,IAAAA,WACZ,CAACZ,mBAAmBC,sBAAsB;AACnDS,eAASH,YAAYN;AAAAA,IAAAA,OAChB;AAELS,eAASH,YAAYM;AAAAA,IACtB;AAAA,EACF;AAED,yCACG,SAAD;AAAA,IAAA,GAAaT;AAAAA,IAAb,UAAA,CACGM,QACAR,eAAeA,YAAYY,iDAC1BC,qBAAA;AAAA,MAAA,UAAA,CACGZ,sBACAD,YAAYY,aAFf;AAAA,IAAA,CAHJ,CAAA;AAAA,EAAA,CADF;AAWD;AAGD,SAAST,QACPW,YACuB;AACvB,SACE,OAAOA,WAAWJ,WAAW,YAC7B,CAAC,CAACI,WAAWJ,UACb,OAAOI,WAAWC,iBAAiB,YACnC,CAAC,CAACD,WAAWC;AAEhB;;"}
|
|
@@ -1,7 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
const useMoney = require("./useMoney.cjs");
|
|
4
|
-
const jsxRuntime = require("react/jsx-runtime");
|
|
1
|
+
import { useMoney } from "./useMoney.mjs";
|
|
2
|
+
import { jsxs, Fragment } from "react/jsx-runtime";
|
|
5
3
|
function Money({
|
|
6
4
|
data,
|
|
7
5
|
as,
|
|
@@ -14,7 +12,7 @@ function Money({
|
|
|
14
12
|
if (!isMoney(data)) {
|
|
15
13
|
throw new Error(`<Money/> needs a valid 'data' prop that has 'amount' and 'currencyCode'`);
|
|
16
14
|
}
|
|
17
|
-
const moneyObject = useMoney
|
|
15
|
+
const moneyObject = useMoney(data);
|
|
18
16
|
const Wrapper = as != null ? as : "div";
|
|
19
17
|
let output = moneyObject.localizedString;
|
|
20
18
|
if (withoutCurrency || withoutTrailingZeros) {
|
|
@@ -26,9 +24,9 @@ function Money({
|
|
|
26
24
|
output = moneyObject.withoutTrailingZerosAndCurrency;
|
|
27
25
|
}
|
|
28
26
|
}
|
|
29
|
-
return /* @__PURE__ */
|
|
27
|
+
return /* @__PURE__ */ jsxs(Wrapper, {
|
|
30
28
|
...passthroughProps,
|
|
31
|
-
children: [output, measurement && measurement.referenceUnit && /* @__PURE__ */
|
|
29
|
+
children: [output, measurement && measurement.referenceUnit && /* @__PURE__ */ jsxs(Fragment, {
|
|
32
30
|
children: [measurementSeparator, measurement.referenceUnit]
|
|
33
31
|
})]
|
|
34
32
|
});
|
|
@@ -36,5 +34,7 @@ function Money({
|
|
|
36
34
|
function isMoney(maybeMoney) {
|
|
37
35
|
return typeof maybeMoney.amount === "string" && !!maybeMoney.amount && typeof maybeMoney.currencyCode === "string" && !!maybeMoney.currencyCode;
|
|
38
36
|
}
|
|
39
|
-
|
|
40
|
-
|
|
37
|
+
export {
|
|
38
|
+
Money
|
|
39
|
+
};
|
|
40
|
+
//# sourceMappingURL=Money.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Money.
|
|
1
|
+
{"version":3,"file":"Money.mjs","sources":["../../src/Money.tsx"],"sourcesContent":["import {type ReactNode} from 'react';\nimport {useMoney} from './useMoney.js';\nimport type {MoneyV2, UnitPriceMeasurement} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\n\ninterface CustomProps<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 /** An object with fields that correspond to the Storefront API's [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2). */\n data: PartialDeep<MoneyV2, {recurseIntoArrays: true}>;\n /** Whether to remove the currency symbol from the output. */\n withoutCurrency?: boolean;\n /** Whether to remove trailing zeros (fractional money) from the output. */\n withoutTrailingZeros?: boolean;\n /** A [UnitPriceMeasurement object](https://shopify.dev/api/storefront/latest/objects/unitpricemeasurement). */\n measurement?: PartialDeep<UnitPriceMeasurement, {recurseIntoArrays: true}>;\n /** Customizes the separator between the money output and the measurement output. Used with the `measurement` prop. Defaults to `'/'`. */\n measurementSeparator?: ReactNode;\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 MoneyProps<ComponentGeneric extends React.ElementType> =\n CustomProps<ComponentGeneric> &\n Omit<\n React.ComponentPropsWithoutRef<ComponentGeneric>,\n keyof CustomProps<ComponentGeneric>\n >;\n\n/**\n * The `Money` component renders a string of the Storefront API's\n * [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2) according to the\n * `locale` in the `ShopifyProvider` component.\n */\nexport function Money<ComponentGeneric extends React.ElementType>({\n data,\n as,\n withoutCurrency,\n withoutTrailingZeros,\n measurement,\n measurementSeparator = '/',\n ...passthroughProps\n}: MoneyProps<ComponentGeneric>) {\n if (!isMoney(data)) {\n throw new Error(\n `<Money/> needs a valid 'data' prop that has 'amount' and 'currencyCode'`\n );\n }\n const moneyObject = useMoney(data);\n const Wrapper = as ?? 'div';\n\n let output = moneyObject.localizedString;\n\n if (withoutCurrency || withoutTrailingZeros) {\n if (withoutCurrency && !withoutTrailingZeros) {\n output = moneyObject.amount;\n } else if (!withoutCurrency && withoutTrailingZeros) {\n output = moneyObject.withoutTrailingZeros;\n } else {\n // both\n output = moneyObject.withoutTrailingZerosAndCurrency;\n }\n }\n\n return (\n <Wrapper {...passthroughProps}>\n {output}\n {measurement && measurement.referenceUnit && (\n <>\n {measurementSeparator}\n {measurement.referenceUnit}\n </>\n )}\n </Wrapper>\n );\n}\n\n// required in order to narrow the money object down and make TS happy\nfunction isMoney(\n maybeMoney: PartialDeep<MoneyV2, {recurseIntoArrays: true}>\n): maybeMoney is MoneyV2 {\n return (\n typeof maybeMoney.amount === 'string' &&\n !!maybeMoney.amount &&\n typeof maybeMoney.currencyCode === 'string' &&\n !!maybeMoney.currencyCode\n );\n}\n"],"names":["Money","data","as","withoutCurrency","withoutTrailingZeros","measurement","measurementSeparator","passthroughProps","isMoney","Error","moneyObject","useMoney","Wrapper","output","localizedString","amount","withoutTrailingZerosAndCurrency","referenceUnit","_Fragment","maybeMoney","currencyCode"],"mappings":";;AAiCO,SAASA,MAAkD;AAAA,EAChEC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,uBAAuB;AAAA,KACpBC;AAP6D,GAQjC;AAC3B,MAAA,CAACC,QAAQP,IAAD,GAAQ;AACZ,UAAA,IAAIQ,MACP,yEADG;AAAA,EAGP;AACKC,QAAAA,cAAcC,SAASV,IAAD;AAC5B,QAAMW,UAAUV,kBAAM;AAEtB,MAAIW,SAASH,YAAYI;AAEzB,MAAIX,mBAAmBC,sBAAsB;AACvCD,QAAAA,mBAAmB,CAACC,sBAAsB;AAC5CS,eAASH,YAAYK;AAAAA,IAAAA,WACZ,CAACZ,mBAAmBC,sBAAsB;AACnDS,eAASH,YAAYN;AAAAA,IAAAA,OAChB;AAELS,eAASH,YAAYM;AAAAA,IACtB;AAAA,EACF;AAED,8BACG,SAAD;AAAA,IAAA,GAAaT;AAAAA,IAAb,UAAA,CACGM,QACAR,eAAeA,YAAYY,sCAC1BC,UAAA;AAAA,MAAA,UAAA,CACGZ,sBACAD,YAAYY,aAFf;AAAA,IAAA,CAHJ,CAAA;AAAA,EAAA,CADF;AAWD;AAGD,SAAST,QACPW,YACuB;AACvB,SACE,OAAOA,WAAWJ,WAAW,YAC7B,CAAC,CAACI,WAAWJ,UACb,OAAOI,WAAWC,iBAAiB,YACnC,CAAC,CAACD,WAAWC;AAEhB;"}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
|
|
3
|
+
const Money = require("./Money.js");
|
|
4
|
+
const flattenConnection = require("./flatten-connection.js");
|
|
5
|
+
const jsxRuntime = require("react/jsx-runtime");
|
|
4
6
|
function ProductPrice(props) {
|
|
5
7
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
6
8
|
const {
|
|
@@ -15,7 +17,7 @@ function ProductPrice(props) {
|
|
|
15
17
|
}
|
|
16
18
|
let price;
|
|
17
19
|
let measurement;
|
|
18
|
-
const variant = variantId ? (_b = flattenConnection((_a = product == null ? void 0 : product.variants) != null ? _a : {}).find((variant2) => (variant2 == null ? void 0 : variant2.id) === variantId)) != null ? _b : null : null;
|
|
20
|
+
const variant = variantId ? (_b = flattenConnection.flattenConnection((_a = product == null ? void 0 : product.variants) != null ? _a : {}).find((variant2) => (variant2 == null ? void 0 : variant2.id) === variantId)) != null ? _b : null : null;
|
|
19
21
|
if (priceType === "compareAt") {
|
|
20
22
|
if (variantId && variant) {
|
|
21
23
|
if (((_c = variant.compareAtPriceV2) == null ? void 0 : _c.amount) === ((_d = variant.priceV2) == null ? void 0 : _d.amount)) {
|
|
@@ -44,18 +46,16 @@ function ProductPrice(props) {
|
|
|
44
46
|
return null;
|
|
45
47
|
}
|
|
46
48
|
if (measurement) {
|
|
47
|
-
return /* @__PURE__ */ jsx(Money, {
|
|
49
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Money.Money, {
|
|
48
50
|
...passthroughProps,
|
|
49
51
|
data: price,
|
|
50
52
|
measurement
|
|
51
53
|
});
|
|
52
54
|
}
|
|
53
|
-
return /* @__PURE__ */ jsx(Money, {
|
|
55
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Money.Money, {
|
|
54
56
|
...passthroughProps,
|
|
55
57
|
data: price
|
|
56
58
|
});
|
|
57
59
|
}
|
|
58
|
-
|
|
59
|
-
ProductPrice
|
|
60
|
-
};
|
|
60
|
+
exports.ProductPrice = ProductPrice;
|
|
61
61
|
//# sourceMappingURL=ProductPrice.js.map
|
|
@@ -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} from './Money.js';\nimport type {PartialDeep} from 'type-fest';\nimport {flattenConnection} from './flatten-connection.js';\n\ninterface ProductPriceProps {\n /** A [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<ComponentGeneric extends React.ElementType>(\n props: ProductPriceProps &\n Omit<MoneyProps<ComponentGeneric>, 'data' | 'measurement'>\n) {\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 if (priceType === 'compareAt') {\n if (variantId && variant) {\n if (variant.compareAtPriceV2?.amount === variant.priceV2?.amount) {\n return null;\n }\n price = variant.compareAtPriceV2;\n } else if (valueType === 'max') {\n price = product?.compareAtPriceRange?.maxVariantPrice;\n } else {\n price = product?.compareAtPriceRange?.minVariantPrice;\n }\n } else {\n if (variantId && variant) {\n price = variant.priceV2;\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"],"names":["ProductPrice","props","priceType","variantId","valueType","data","product","passthroughProps","Error","price","measurement","variant","flattenConnection","variants","find","id","compareAtPriceV2","amount","priceV2","compareAtPriceRange","maxVariantPrice","minVariantPrice","unitPrice","unitPriceMeasurement","priceRange"],"mappings":"
|
|
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} from './Money.js';\nimport type {PartialDeep} from 'type-fest';\nimport {flattenConnection} from './flatten-connection.js';\n\ninterface ProductPriceProps {\n /** A [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<ComponentGeneric extends React.ElementType>(\n props: ProductPriceProps &\n Omit<MoneyProps<ComponentGeneric>, 'data' | 'measurement'>\n) {\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 if (priceType === 'compareAt') {\n if (variantId && variant) {\n if (variant.compareAtPriceV2?.amount === variant.priceV2?.amount) {\n return null;\n }\n price = variant.compareAtPriceV2;\n } else if (valueType === 'max') {\n price = product?.compareAtPriceRange?.maxVariantPrice;\n } else {\n price = product?.compareAtPriceRange?.minVariantPrice;\n }\n } else {\n if (variantId && variant) {\n price = variant.priceV2;\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"],"names":["ProductPrice","props","priceType","variantId","valueType","data","product","passthroughProps","Error","price","measurement","variant","flattenConnection","variants","find","id","compareAtPriceV2","amount","priceV2","compareAtPriceRange","maxVariantPrice","minVariantPrice","unitPrice","unitPriceMeasurement","priceRange","Money"],"mappings":";;;;;AAwBO,SAASA,aACdC,OAEA;;AACM,QAAA;AAAA,IACJC,YAAY;AAAA,IACZC;AAAAA,IACAC,YAAY;AAAA,IACZC,MAAMC;AAAAA,OACHC;AAAAA,EACDN,IAAAA;AAEJ,MAAIK,WAAW,MAAM;AACb,UAAA,IAAIE,MAAO,uDAAX;AAAA,EACP;AAEGC,MAAAA;AACAC,MAAAA;AAEJ,QAAMC,UAAUR,aACZS,uBAAAA,mBAAkBN,wCAASO,aAATP,YAAqB,CAAA,CAAtB,EAA0BQ,KACxCH,CAAAA,cAAYA,qCAASI,QAAOZ,SAD/B,MAAAS,YAEK,OACL;AAEJ,MAAIV,cAAc,aAAa;AAC7B,QAAIC,aAAaQ,SAAS;AACxB,YAAIA,aAAQK,qBAARL,mBAA0BM,cAAWN,aAAQO,YAARP,mBAAiBM,SAAQ;AACzD,eAAA;AAAA,MACR;AACDR,cAAQE,QAAQK;AAAAA,IAAAA,WACPZ,cAAc,OAAO;AAC9BK,eAAQH,wCAASa,wBAATb,mBAA8Bc;AAAAA,IAAAA,OACjC;AACLX,eAAQH,wCAASa,wBAATb,mBAA8Be;AAAAA,IACvC;AAAA,EAAA,OACI;AACL,QAAIlB,aAAaQ,SAAS;AACxBF,cAAQE,QAAQO;AAChB,UAAId,cAAc,QAAQ;AACxBK,gBAAQE,QAAQW;AAChBZ,sBAAcC,QAAQY;AAAAA,MACvB;AAAA,IAAA,WACQnB,cAAc,OAAO;AAC9BK,eAAQH,aAAQkB,eAARlB,mBAAoBc;AAAAA,IAAAA,OACvB;AACLX,eAAQH,aAAQkB,eAARlB,mBAAoBe;AAAAA,IAC7B;AAAA,EACF;AAED,MAAI,CAACZ,OAAO;AACH,WAAA;AAAA,EACR;AAED,MAAIC,aAAa;AACf,0CACGe,MAAAA,OAAD;AAAA,MAAA,GAAWlB;AAAAA,MAAkB,MAAME;AAAAA,MAAO;AAAA,IAAA,CAD5C;AAAA,EAGD;AAED,wCAAQgB,MAAAA,OAAD;AAAA,IAAA,GAAWlB;AAAAA,IAAkB,MAAME;AAAAA,EAAAA,CAA1C;AACD;;"}
|
|
@@ -1,8 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
const flattenConnection = require("./flatten-connection.cjs");
|
|
5
|
-
const jsxRuntime = require("react/jsx-runtime");
|
|
1
|
+
import { Money } from "./Money.mjs";
|
|
2
|
+
import { flattenConnection } from "./flatten-connection.mjs";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
6
4
|
function ProductPrice(props) {
|
|
7
5
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
8
6
|
const {
|
|
@@ -17,7 +15,7 @@ function ProductPrice(props) {
|
|
|
17
15
|
}
|
|
18
16
|
let price;
|
|
19
17
|
let measurement;
|
|
20
|
-
const variant = variantId ? (_b = flattenConnection
|
|
18
|
+
const variant = variantId ? (_b = flattenConnection((_a = product == null ? void 0 : product.variants) != null ? _a : {}).find((variant2) => (variant2 == null ? void 0 : variant2.id) === variantId)) != null ? _b : null : null;
|
|
21
19
|
if (priceType === "compareAt") {
|
|
22
20
|
if (variantId && variant) {
|
|
23
21
|
if (((_c = variant.compareAtPriceV2) == null ? void 0 : _c.amount) === ((_d = variant.priceV2) == null ? void 0 : _d.amount)) {
|
|
@@ -46,16 +44,18 @@ function ProductPrice(props) {
|
|
|
46
44
|
return null;
|
|
47
45
|
}
|
|
48
46
|
if (measurement) {
|
|
49
|
-
return /* @__PURE__ */
|
|
47
|
+
return /* @__PURE__ */ jsx(Money, {
|
|
50
48
|
...passthroughProps,
|
|
51
49
|
data: price,
|
|
52
50
|
measurement
|
|
53
51
|
});
|
|
54
52
|
}
|
|
55
|
-
return /* @__PURE__ */
|
|
53
|
+
return /* @__PURE__ */ jsx(Money, {
|
|
56
54
|
...passthroughProps,
|
|
57
55
|
data: price
|
|
58
56
|
});
|
|
59
57
|
}
|
|
60
|
-
|
|
61
|
-
|
|
58
|
+
export {
|
|
59
|
+
ProductPrice
|
|
60
|
+
};
|
|
61
|
+
//# sourceMappingURL=ProductPrice.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProductPrice.
|
|
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} from './Money.js';\nimport type {PartialDeep} from 'type-fest';\nimport {flattenConnection} from './flatten-connection.js';\n\ninterface ProductPriceProps {\n /** A [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<ComponentGeneric extends React.ElementType>(\n props: ProductPriceProps &\n Omit<MoneyProps<ComponentGeneric>, 'data' | 'measurement'>\n) {\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 if (priceType === 'compareAt') {\n if (variantId && variant) {\n if (variant.compareAtPriceV2?.amount === variant.priceV2?.amount) {\n return null;\n }\n price = variant.compareAtPriceV2;\n } else if (valueType === 'max') {\n price = product?.compareAtPriceRange?.maxVariantPrice;\n } else {\n price = product?.compareAtPriceRange?.minVariantPrice;\n }\n } else {\n if (variantId && variant) {\n price = variant.priceV2;\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"],"names":["ProductPrice","props","priceType","variantId","valueType","data","product","passthroughProps","Error","price","measurement","variant","flattenConnection","variants","find","id","compareAtPriceV2","amount","priceV2","compareAtPriceRange","maxVariantPrice","minVariantPrice","unitPrice","unitPriceMeasurement","priceRange"],"mappings":";;;AAwBO,SAASA,aACdC,OAEA;;AACM,QAAA;AAAA,IACJC,YAAY;AAAA,IACZC;AAAAA,IACAC,YAAY;AAAA,IACZC,MAAMC;AAAAA,OACHC;AAAAA,EACDN,IAAAA;AAEJ,MAAIK,WAAW,MAAM;AACb,UAAA,IAAIE,MAAO,uDAAX;AAAA,EACP;AAEGC,MAAAA;AACAC,MAAAA;AAEJ,QAAMC,UAAUR,aACZS,wBAAkBN,wCAASO,aAATP,YAAqB,CAAA,CAAtB,EAA0BQ,KACxCH,CAAAA,cAAYA,qCAASI,QAAOZ,SAD/B,MAAAS,YAEK,OACL;AAEJ,MAAIV,cAAc,aAAa;AAC7B,QAAIC,aAAaQ,SAAS;AACxB,YAAIA,aAAQK,qBAARL,mBAA0BM,cAAWN,aAAQO,YAARP,mBAAiBM,SAAQ;AACzD,eAAA;AAAA,MACR;AACDR,cAAQE,QAAQK;AAAAA,IAAAA,WACPZ,cAAc,OAAO;AAC9BK,eAAQH,wCAASa,wBAATb,mBAA8Bc;AAAAA,IAAAA,OACjC;AACLX,eAAQH,wCAASa,wBAATb,mBAA8Be;AAAAA,IACvC;AAAA,EAAA,OACI;AACL,QAAIlB,aAAaQ,SAAS;AACxBF,cAAQE,QAAQO;AAChB,UAAId,cAAc,QAAQ;AACxBK,gBAAQE,QAAQW;AAChBZ,sBAAcC,QAAQY;AAAAA,MACvB;AAAA,IAAA,WACQnB,cAAc,OAAO;AAC9BK,eAAQH,aAAQkB,eAARlB,mBAAoBc;AAAAA,IAAAA,OACvB;AACLX,eAAQH,aAAQkB,eAARlB,mBAAoBe;AAAAA,IAC7B;AAAA,EACF;AAED,MAAI,CAACZ,OAAO;AACH,WAAA;AAAA,EACR;AAED,MAAIC,aAAa;AACf,+BACG,OAAD;AAAA,MAAA,GAAWH;AAAAA,MAAkB,MAAME;AAAAA,MAAO;AAAA,IAAA,CAD5C;AAAA,EAGD;AAED,6BAAQ,OAAD;AAAA,IAAA,GAAWF;AAAAA,IAAkB,MAAME;AAAAA,EAAAA,CAA1C;AACD;"}
|