@shopify/hydrogen-react 0.0.0-next-72f8a5c → 0.0.0-next-ea37299
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/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.cjs.map → Metafield.mjs.map} +1 -1
- 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/dev/{ProductProvider.cjs.map → 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 +5 -0
- package/dist/dev/_virtual/index.js.map +1 -0
- 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 +5 -0
- package/dist/dev/_virtual/use-sync-external-store-shim.development.js.map +1 -0
- 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 +5 -0
- package/dist/dev/_virtual/use-sync-external-store-shim.production.min.js.map +1 -0
- 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 +5 -0
- package/dist/dev/_virtual/with-selector.development.js.map +1 -0
- 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 +5 -0
- package/dist/dev/_virtual/with-selector.js.map +1 -0
- 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 +5 -0
- package/dist/dev/_virtual/with-selector.production.min.js.map +1 -0
- 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 -15
- 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 -11
- package/dist/dev/cart-queries.js.map +1 -1
- package/dist/{prod/cart-queries.cjs → dev/cart-queries.mjs} +12 -12
- 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/dev/{image-size.cjs.map → image-size.mjs.map} +1 -1
- package/dist/dev/index.js +37 -37
- 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 +158 -0
- package/dist/dev/node_modules/@xstate/fsm/es/index.js.map +1 -0
- package/dist/dev/node_modules/@xstate/fsm/es/index.mjs +159 -0
- package/dist/dev/node_modules/@xstate/fsm/es/index.mjs.map +1 -0
- package/dist/dev/node_modules/@xstate/react/es/fsm.js +94 -0
- package/dist/dev/node_modules/@xstate/react/es/fsm.js.map +1 -0
- package/dist/dev/node_modules/@xstate/react/es/fsm.mjs +94 -0
- package/dist/dev/node_modules/@xstate/react/es/fsm.mjs.map +1 -0
- package/dist/dev/node_modules/@xstate/react/es/useConstant.js +30 -0
- package/dist/dev/node_modules/@xstate/react/es/useConstant.js.map +1 -0
- 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 +5 -0
- package/dist/dev/node_modules/use-isomorphic-layout-effect/dist/use-isomorphic-layout-effect.browser.esm.js.map +1 -0
- 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.mjs.map +1 -0
- package/dist/dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.js +107 -0
- package/dist/dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.js.map +1 -0
- package/dist/dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.mjs +105 -0
- package/dist/dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.mjs.map +1 -0
- package/dist/dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.production.min.js +74 -0
- package/dist/dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.production.min.js.map +1 -0
- package/dist/dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.production.min.mjs +72 -0
- 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 +138 -0
- package/dist/dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js.map +1 -0
- package/dist/dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.mjs +136 -0
- package/dist/dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.mjs.map +1 -0
- package/dist/dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.min.js +60 -0
- package/dist/dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.min.js.map +1 -0
- package/dist/dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.min.mjs +58 -0
- 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 +21 -0
- package/dist/dev/node_modules/use-sync-external-store/shim/index.js.map +1 -0
- 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.mjs.map +1 -0
- package/dist/dev/node_modules/use-sync-external-store/shim/with-selector.js +12 -0
- package/dist/dev/node_modules/use-sync-external-store/shim/with-selector.js.map +1 -0
- 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.mjs.map +1 -0
- package/dist/dev/node_modules/worktop/cookie/index.js +27 -0
- package/dist/dev/node_modules/worktop/cookie/index.js.map +1 -0
- package/dist/dev/node_modules/worktop/cookie/index.mjs +27 -0
- package/dist/dev/node_modules/worktop/cookie/index.mjs.map +1 -0
- package/dist/dev/storefront-api-constants.js +3 -3
- 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/{prod/useCartAPIStateMachine.cjs → dev/useCartAPIStateMachine.mjs} +21 -21
- package/dist/{prod/useCartAPIStateMachine.cjs.map → dev/useCartAPIStateMachine.mjs.map} +1 -1
- package/dist/dev/useCartActions.js +26 -26
- package/dist/dev/useCartActions.js.map +1 -1
- package/dist/dev/{useCartActions.cjs → 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/{prod/useMoney.cjs.map → dev/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.cjs.map → Metafield.mjs.map} +1 -1
- 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/prod/{ProductProvider.cjs.map → 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 +5 -0
- package/dist/prod/_virtual/index.js.map +1 -0
- 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 +5 -0
- package/dist/prod/_virtual/use-sync-external-store-shim.development.js.map +1 -0
- 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 +5 -0
- package/dist/prod/_virtual/use-sync-external-store-shim.production.min.js.map +1 -0
- 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 +5 -0
- package/dist/prod/_virtual/with-selector.development.js.map +1 -0
- 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 +5 -0
- package/dist/prod/_virtual/with-selector.js.map +1 -0
- 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 +5 -0
- package/dist/prod/_virtual/with-selector.production.min.js.map +1 -0
- 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 -15
- 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 -11
- package/dist/prod/cart-queries.js.map +1 -1
- package/dist/{dev/cart-queries.cjs → prod/cart-queries.mjs} +12 -12
- 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/prod/{image-size.cjs.map → image-size.mjs.map} +1 -1
- package/dist/prod/index.js +37 -37
- 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 +158 -0
- package/dist/prod/node_modules/@xstate/fsm/es/index.js.map +1 -0
- package/dist/prod/node_modules/@xstate/fsm/es/index.mjs +159 -0
- package/dist/prod/node_modules/@xstate/fsm/es/index.mjs.map +1 -0
- package/dist/prod/node_modules/@xstate/react/es/fsm.js +94 -0
- package/dist/prod/node_modules/@xstate/react/es/fsm.js.map +1 -0
- package/dist/prod/node_modules/@xstate/react/es/fsm.mjs +94 -0
- package/dist/prod/node_modules/@xstate/react/es/fsm.mjs.map +1 -0
- package/dist/prod/node_modules/@xstate/react/es/useConstant.js +30 -0
- package/dist/prod/node_modules/@xstate/react/es/useConstant.js.map +1 -0
- 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 +5 -0
- package/dist/prod/node_modules/use-isomorphic-layout-effect/dist/use-isomorphic-layout-effect.browser.esm.js.map +1 -0
- 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.mjs.map +1 -0
- package/dist/prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.js +107 -0
- package/dist/prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.js.map +1 -0
- package/dist/prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.mjs +105 -0
- package/dist/prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.mjs.map +1 -0
- package/dist/prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.production.min.js +74 -0
- package/dist/prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.production.min.js.map +1 -0
- package/dist/prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.production.min.mjs +72 -0
- 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 +138 -0
- package/dist/prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js.map +1 -0
- package/dist/prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.mjs +136 -0
- package/dist/prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.mjs.map +1 -0
- package/dist/prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.min.js +60 -0
- package/dist/prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.min.js.map +1 -0
- package/dist/prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.min.mjs +58 -0
- 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 +21 -0
- package/dist/prod/node_modules/use-sync-external-store/shim/index.js.map +1 -0
- 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.mjs.map +1 -0
- package/dist/prod/node_modules/use-sync-external-store/shim/with-selector.js +12 -0
- package/dist/prod/node_modules/use-sync-external-store/shim/with-selector.js.map +1 -0
- 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.mjs.map +1 -0
- package/dist/prod/node_modules/worktop/cookie/index.js +27 -0
- package/dist/prod/node_modules/worktop/cookie/index.js.map +1 -0
- package/dist/prod/node_modules/worktop/cookie/index.mjs +27 -0
- package/dist/prod/node_modules/worktop/cookie/index.mjs.map +1 -0
- package/dist/prod/storefront-api-constants.js +3 -3
- 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/{dev/useCartAPIStateMachine.cjs → prod/useCartAPIStateMachine.mjs} +21 -21
- package/dist/{dev/useCartAPIStateMachine.cjs.map → prod/useCartAPIStateMachine.mjs.map} +1 -1
- package/dist/prod/useCartActions.js +26 -26
- package/dist/prod/useCartActions.js.map +1 -1
- package/dist/prod/{useCartActions.cjs → 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/{dev/useMoney.cjs.map → prod/useMoney.mjs.map} +1 -1
- package/dist/umd/hydrogen-react.dev.js +1 -1
- package/dist/umd/hydrogen-react.dev.js.map +1 -1
- package/dist/umd/hydrogen-react.prod.js +1 -1
- package/dist/umd/hydrogen-react.prod.js.map +1 -1
- package/package.json +14 -14
- package/dist/dev/ShopifyProvider.cjs +0 -46
- package/dist/dev/cart-constants.cjs +0 -17
- package/dist/dev/cart-hooks.cjs +0 -48
- package/dist/dev/index.cjs +0 -38
- package/dist/dev/index.cjs.map +0 -1
- 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/ShopifyProvider.cjs +0 -46
- package/dist/prod/cart-constants.cjs +0 -17
- package/dist/prod/cart-hooks.cjs +0 -48
- package/dist/prod/index.cjs +0 -38
- package/dist/prod/index.cjs.map +0 -1
- 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":"Metafield.js","sources":["../../src/Metafield.tsx"],"sourcesContent":["import {type ElementType, useMemo, type ComponentPropsWithoutRef} from 'react';\nimport {useShop} from './ShopifyProvider.js';\nimport {Image} from './Image.js';\nimport type {\n MediaImage,\n Page,\n ProductVariant,\n Product,\n GenericFile,\n Video as VideoType,\n Metafield as MetafieldType,\n} from './storefront-api-types.js';\nimport {Video} from './Video.js';\nimport {flattenConnection} from './flatten-connection.js';\nimport type {PartialDeep, JsonValue} from 'type-fest';\n\ninterface BaseProps<ComponentGeneric extends ElementType> {\n /** An object with fields that correspond to the Storefront API's [Metafield object](https://shopify.dev/api/storefront/reference/common-objects/metafield). */\n data: PartialDeep<MetafieldType, {recurseIntoArrays: true}> | null;\n /** An HTML tag or React component to be rendered as the base element wrapper. The default value varies depending on [metafield.type](https://shopify.dev/apps/metafields/types). */\n as?: ComponentGeneric;\n}\n\nexport type MetafieldProps<ComponentGeneric extends ElementType> =\n ComponentPropsWithoutRef<ComponentGeneric> & BaseProps<ComponentGeneric>;\n\n/**\n * The `Metafield` component renders the value of a Storefront\n * API's [Metafield object](https://shopify.dev/api/storefront/reference/common-objects/metafield).\n * Relies on the `locale` property of the `useShop()` hook, so it must be a desendent of `<ShopifyProvider/>`\n *\n * Renders a smart default of the Metafield's `value`. For more information, refer to the [Default output](#default-output) section.\n */\nexport function Metafield<ComponentGeneric extends ElementType>(\n props: MetafieldProps<ComponentGeneric>\n) {\n const {data, as, ...passthroughProps} = props;\n const {locale} = useShop();\n\n const parsedMetafield = useMemo(() => parseMetafield(data), [data]);\n\n if (!parsedMetafield) {\n const noDataPropWarning = `<Metafield/>: nothing was passed to the data prop 'data'. Rendering 'null'`;\n if (__HYDROGEN_DEV__) {\n throw new Error(noDataPropWarning);\n } else {\n console.warn(noDataPropWarning);\n }\n return null;\n }\n\n if (parsedMetafield.value === null || parsedMetafield.value === undefined) {\n const noValueWarning = `<Metafield/>: No metafield value for metafield ${\n parsedMetafield.id ?? parsedMetafield.key\n }. Rendering 'null'`;\n if (__HYDROGEN_DEV__) {\n throw new Error(noValueWarning);\n } else {\n console.warn(noValueWarning);\n }\n return null;\n }\n\n switch (parsedMetafield.type) {\n case 'date': {\n const Wrapper = as ?? 'time';\n return (\n <Wrapper {...passthroughProps}>\n {(parsedMetafield.value as Date).toLocaleDateString(locale)}\n </Wrapper>\n );\n }\n case 'date_time': {\n const Wrapper = as ?? 'time';\n return (\n <Wrapper {...passthroughProps}>\n {(parsedMetafield.value as Date).toLocaleString(locale)}\n </Wrapper>\n );\n }\n case 'weight':\n case 'dimension':\n case 'volume': {\n const Wrapper = as ?? 'span';\n return (\n <Wrapper {...passthroughProps}>\n {getMeasurementAsString(parsedMetafield.value as Measurement, locale)}\n </Wrapper>\n );\n }\n case 'rating': {\n const Wrapper = as ?? 'span';\n return (\n <Wrapper {...passthroughProps}>\n {(parsedMetafield.value as Rating).value}\n </Wrapper>\n );\n }\n case 'single_line_text_field': {\n const Wrapper = as ?? 'span';\n return (\n <Wrapper\n {...passthroughProps}\n dangerouslySetInnerHTML={{__html: parsedMetafield.value as string}}\n />\n );\n }\n case 'multi_line_text_field': {\n const Wrapper = as ?? 'div';\n return (\n <Wrapper\n {...passthroughProps}\n dangerouslySetInnerHTML={{\n __html: (parsedMetafield.value as string).split('\\n').join('<br/>'),\n }}\n />\n );\n }\n case 'url': {\n const protocolLessUrl = new URL(parsedMetafield.value as string);\n return (\n <a\n href={protocolLessUrl.href.replace(protocolLessUrl.protocol, '')}\n {...passthroughProps}\n >\n {parsedMetafield.value as string}\n </a>\n );\n }\n case 'json': {\n const Wrapper = as ?? 'span';\n return (\n <Wrapper {...passthroughProps}>\n {JSON.stringify(parsedMetafield.value)}\n </Wrapper>\n );\n }\n case 'product_reference':\n case 'variant_reference':\n case 'page_reference': {\n const Wrapper = as ?? 'span';\n const ref = parsedMetafield.reference as Page | ProductVariant | Product;\n return (\n <Wrapper {...passthroughProps}>{ref?.title ?? ref?.id ?? ''}</Wrapper>\n );\n }\n case 'list.single_line_text_field': {\n const Wrapper = as ?? 'ul';\n\n const refArray = parsedMetafield.references\n ? (flattenConnection(parsedMetafield.references) as string[])\n : [];\n return (\n <Wrapper {...passthroughProps}>\n {refArray.map((ref, index) => (\n // there's no unique way to identify these strings, so we do our best by combining the string with the index for the key\n // eslint-disable-next-line react/no-array-index-key\n <li key={`${ref ?? ''}-${index}`}>{ref}</li>\n ))}\n </Wrapper>\n );\n }\n case 'file_reference': {\n if (parsedMetafield.reference?.__typename === 'MediaImage') {\n const ref = parsedMetafield.reference as MediaImage;\n return ref.image ? (\n <Image data={ref.image} {...passthroughProps} />\n ) : null;\n } else if (parsedMetafield.reference?.__typename === 'GenericFile') {\n const ref = parsedMetafield.reference as GenericFile;\n return ref.previewImage ? (\n <a href={parsedMetafield.reference?.url ?? ''} {...passthroughProps}>\n <Image data={ref.previewImage} />\n </a>\n ) : null;\n } else if (parsedMetafield.reference?.__typename === 'Video') {\n const ref = parsedMetafield.reference as VideoType;\n return <Video {...passthroughProps} data={ref} />;\n }\n }\n }\n\n const Wrapper = as ?? 'span';\n return (\n <Wrapper {...passthroughProps}>{parsedMetafield.value?.toString()}</Wrapper>\n );\n}\n\n/**\n * The `parseMetafield` utility transforms a [Metafield](https://shopify.dev/api/storefront/reference/common-objects/Metafield)\n * into a new object whose `values` have been parsed according to the metafield `type`.\n * If the metafield is `null`, then it returns `null` back.\n */\nexport function parseMetafield(\n /** A [Metafield](https://shopify.dev/api/storefront/reference/common-objects/Metafield) or null */\n metafield: PartialDeep<MetafieldType, {recurseIntoArrays: true}> | null\n): PartialDeep<ParsedMetafield, {recurseIntoArrays: true}> | null {\n if (!metafield) {\n if (__HYDROGEN_DEV__) {\n console.warn(\n `'parseMetafield' was not passed any value for the 'metafield' argument`\n );\n }\n return null;\n }\n if (\n __HYDROGEN_DEV__ &&\n (metafield.value === null || metafield.value === undefined)\n ) {\n console.warn(\n `'parseMetafield()' was passed ${metafield.value} for 'metafield.value'`\n );\n }\n\n return {\n ...metafield,\n value: parseMetafieldValue(metafield),\n };\n}\n\n/**\n * The `parseMetafieldValue` function parses a [Metafield](https://shopify.dev/api/storefront/reference/common-objects/metafield)'s `value` from a string into a sensible type corresponding to the [Metafield](https://shopify.dev/api/storefront/reference/common-objects/metafield)'s `type`.\n */\nexport function parseMetafieldValue(\n metafield: PartialDeep<MetafieldType, {recurseIntoArrays: true}> | null\n): ParsedMetafield['value'] {\n if (!metafield) {\n return null;\n }\n\n if (metafield.value === null || metafield.value === undefined) {\n if (__HYDROGEN_DEV__) {\n console.warn(\n `'parseMetafieldValue()' was passed ${metafield.value} for 'metafield.value'`\n );\n }\n return metafield.value;\n }\n\n switch (metafield.type) {\n case 'boolean':\n return metafield.value === 'true';\n case 'number_integer':\n return parseInt(metafield.value);\n case 'number_decimal':\n return parseFloat(metafield.value);\n case 'date':\n case 'date_time':\n return new Date(metafield.value);\n case 'json':\n case 'weight':\n case 'dimension':\n case 'volume':\n case 'rating':\n return parseJSON(metafield.value);\n case 'color':\n case 'single_line_text_field':\n case 'multi_line_text_field':\n case 'product_reference':\n case 'page_reference':\n case 'variant_reference':\n case 'file_reference':\n case 'url':\n default:\n return metafield.value;\n }\n}\n\n/**\n * Parses a JSON string while preventing prototype injection attacks.\n */\nexport function parseJSON(json: string) {\n if (String(json).includes('__proto__')) {\n return JSON.parse(json, (k, v) => {\n if (k !== '__proto__') return v;\n });\n }\n\n return JSON.parse(json);\n}\n\nconst UNIT_MAPPING: Record<string, string> = {\n // Dimension\n mm: 'millimeter',\n cm: 'centimeter',\n m: 'meter',\n in: 'inch',\n ft: 'foot',\n yd: 'yard',\n // Volume\n ml: 'milliliter',\n l: 'liter',\n us_fl_oz: 'fluid-ounce',\n us_gal: 'gallon',\n // Weight\n kg: 'kilogram',\n g: 'gram',\n lb: 'pound',\n oz: 'ounce',\n};\n\nexport function getMeasurementAsString(\n measurement: Measurement,\n locale = 'en-us',\n options: Intl.NumberFormatOptions = {}\n) {\n let measure: {value: number; unit: string} = {\n value: measurement.value,\n unit: UNIT_MAPPING[measurement.unit],\n };\n\n if (measure.unit == null) {\n measure = convertToSupportedUnit(measurement.value, measurement.unit);\n }\n\n return new Intl.NumberFormat(locale, {\n ...options,\n unit: measure.unit,\n style: 'unit',\n }).format(measure.value);\n}\n\nfunction convertToSupportedUnit(value: number, unit: string) {\n switch (unit) {\n case 'cl':\n return {\n value: value / 1000,\n unit: 'liter',\n };\n case 'm3':\n return {\n value: value * 1000,\n unit: 'liter',\n };\n case 'us_pt':\n return {\n value: value * 0.125,\n unit: 'gallon',\n };\n case 'us_qt':\n return {\n value: value * 0.5,\n unit: 'gallon',\n };\n case 'us_oz':\n return {\n value: value / 128,\n unit: 'gallon',\n };\n case 'imp_pt':\n return {\n value: value / 6.661, // approximate conversion\n unit: 'gallon',\n };\n case 'imp_qt':\n return {\n value: value / 3.331, // approximate conversion\n unit: 'gallon',\n };\n case 'imp_gal':\n return {\n value: value / 1.201, // approximate conversion\n unit: 'gallon',\n };\n case 'imp_fl_oz':\n return {\n value: value * 0.96076, // approximate conversion\n unit: 'fluid-ounce',\n };\n default:\n throw new Error(`Unit not supported: ${unit}`);\n }\n}\n\ntype ParsedMetafield = Omit<\n PartialDeep<MetafieldType, {recurseIntoArrays: true}>,\n 'value'\n> & {\n value?: string | number | boolean | JsonValue | Date | Rating | Measurement;\n};\n\nexport interface Rating {\n value: number;\n scale_min: number;\n scale_max: number;\n}\n\ninterface Measurement {\n unit: string;\n value: number;\n}\n"],"names":["Metafield","props","data","as","passthroughProps","locale","useShop","parsedMetafield","useMemo","parseMetafield","noDataPropWarning","console","warn","value","undefined","noValueWarning","id","key","type","Wrapper","toLocaleDateString","toLocaleString","getMeasurementAsString","__html","split","join","protocolLessUrl","URL","href","replace","protocol","JSON","stringify","ref","reference","title","refArray","references","flattenConnection","map","index","__typename","image","_jsx","previewImage","url","toString","metafield","parseMetafieldValue","parseInt","parseFloat","Date","parseJSON","json","String","includes","parse","k","v","UNIT_MAPPING","mm","cm","m","in","ft","yd","ml","l","us_fl_oz","us_gal","kg","g","lb","oz","measurement","options","measure","unit","convertToSupportedUnit","Intl","NumberFormat","style","format","Error"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Metafield.js","sources":["../../src/Metafield.tsx"],"sourcesContent":["import {type ElementType, useMemo, type ComponentPropsWithoutRef} from 'react';\nimport {useShop} from './ShopifyProvider.js';\nimport {Image} from './Image.js';\nimport type {\n MediaImage,\n Page,\n ProductVariant,\n Product,\n GenericFile,\n Video as VideoType,\n Metafield as MetafieldType,\n} from './storefront-api-types.js';\nimport {Video} from './Video.js';\nimport {flattenConnection} from './flatten-connection.js';\nimport type {PartialDeep, JsonValue} from 'type-fest';\n\ninterface BaseProps<ComponentGeneric extends ElementType> {\n /** An object with fields that correspond to the Storefront API's [Metafield object](https://shopify.dev/api/storefront/reference/common-objects/metafield). */\n data: PartialDeep<MetafieldType, {recurseIntoArrays: true}> | null;\n /** An HTML tag or React component to be rendered as the base element wrapper. The default value varies depending on [metafield.type](https://shopify.dev/apps/metafields/types). */\n as?: ComponentGeneric;\n}\n\nexport type MetafieldProps<ComponentGeneric extends ElementType> =\n ComponentPropsWithoutRef<ComponentGeneric> & BaseProps<ComponentGeneric>;\n\n/**\n * The `Metafield` component renders the value of a Storefront\n * API's [Metafield object](https://shopify.dev/api/storefront/reference/common-objects/metafield).\n * Relies on the `locale` property of the `useShop()` hook, so it must be a desendent of `<ShopifyProvider/>`\n *\n * Renders a smart default of the Metafield's `value`. For more information, refer to the [Default output](#default-output) section.\n */\nexport function Metafield<ComponentGeneric extends ElementType>(\n props: MetafieldProps<ComponentGeneric>\n) {\n const {data, as, ...passthroughProps} = props;\n const {locale} = useShop();\n\n const parsedMetafield = useMemo(() => parseMetafield(data), [data]);\n\n if (!parsedMetafield) {\n const noDataPropWarning = `<Metafield/>: nothing was passed to the data prop 'data'. Rendering 'null'`;\n if (__HYDROGEN_DEV__) {\n throw new Error(noDataPropWarning);\n } else {\n console.warn(noDataPropWarning);\n }\n return null;\n }\n\n if (parsedMetafield.value === null || parsedMetafield.value === undefined) {\n const noValueWarning = `<Metafield/>: No metafield value for metafield ${\n parsedMetafield.id ?? parsedMetafield.key\n }. Rendering 'null'`;\n if (__HYDROGEN_DEV__) {\n throw new Error(noValueWarning);\n } else {\n console.warn(noValueWarning);\n }\n return null;\n }\n\n switch (parsedMetafield.type) {\n case 'date': {\n const Wrapper = as ?? 'time';\n return (\n <Wrapper {...passthroughProps}>\n {(parsedMetafield.value as Date).toLocaleDateString(locale)}\n </Wrapper>\n );\n }\n case 'date_time': {\n const Wrapper = as ?? 'time';\n return (\n <Wrapper {...passthroughProps}>\n {(parsedMetafield.value as Date).toLocaleString(locale)}\n </Wrapper>\n );\n }\n case 'weight':\n case 'dimension':\n case 'volume': {\n const Wrapper = as ?? 'span';\n return (\n <Wrapper {...passthroughProps}>\n {getMeasurementAsString(parsedMetafield.value as Measurement, locale)}\n </Wrapper>\n );\n }\n case 'rating': {\n const Wrapper = as ?? 'span';\n return (\n <Wrapper {...passthroughProps}>\n {(parsedMetafield.value as Rating).value}\n </Wrapper>\n );\n }\n case 'single_line_text_field': {\n const Wrapper = as ?? 'span';\n return (\n <Wrapper\n {...passthroughProps}\n dangerouslySetInnerHTML={{__html: parsedMetafield.value as string}}\n />\n );\n }\n case 'multi_line_text_field': {\n const Wrapper = as ?? 'div';\n return (\n <Wrapper\n {...passthroughProps}\n dangerouslySetInnerHTML={{\n __html: (parsedMetafield.value as string).split('\\n').join('<br/>'),\n }}\n />\n );\n }\n case 'url': {\n const protocolLessUrl = new URL(parsedMetafield.value as string);\n return (\n <a\n href={protocolLessUrl.href.replace(protocolLessUrl.protocol, '')}\n {...passthroughProps}\n >\n {parsedMetafield.value as string}\n </a>\n );\n }\n case 'json': {\n const Wrapper = as ?? 'span';\n return (\n <Wrapper {...passthroughProps}>\n {JSON.stringify(parsedMetafield.value)}\n </Wrapper>\n );\n }\n case 'product_reference':\n case 'variant_reference':\n case 'page_reference': {\n const Wrapper = as ?? 'span';\n const ref = parsedMetafield.reference as Page | ProductVariant | Product;\n return (\n <Wrapper {...passthroughProps}>{ref?.title ?? ref?.id ?? ''}</Wrapper>\n );\n }\n case 'list.single_line_text_field': {\n const Wrapper = as ?? 'ul';\n\n const refArray = parsedMetafield.references\n ? (flattenConnection(parsedMetafield.references) as string[])\n : [];\n return (\n <Wrapper {...passthroughProps}>\n {refArray.map((ref, index) => (\n // there's no unique way to identify these strings, so we do our best by combining the string with the index for the key\n // eslint-disable-next-line react/no-array-index-key\n <li key={`${ref ?? ''}-${index}`}>{ref}</li>\n ))}\n </Wrapper>\n );\n }\n case 'file_reference': {\n if (parsedMetafield.reference?.__typename === 'MediaImage') {\n const ref = parsedMetafield.reference as MediaImage;\n return ref.image ? (\n <Image data={ref.image} {...passthroughProps} />\n ) : null;\n } else if (parsedMetafield.reference?.__typename === 'GenericFile') {\n const ref = parsedMetafield.reference as GenericFile;\n return ref.previewImage ? (\n <a href={parsedMetafield.reference?.url ?? ''} {...passthroughProps}>\n <Image data={ref.previewImage} />\n </a>\n ) : null;\n } else if (parsedMetafield.reference?.__typename === 'Video') {\n const ref = parsedMetafield.reference as VideoType;\n return <Video {...passthroughProps} data={ref} />;\n }\n }\n }\n\n const Wrapper = as ?? 'span';\n return (\n <Wrapper {...passthroughProps}>{parsedMetafield.value?.toString()}</Wrapper>\n );\n}\n\n/**\n * The `parseMetafield` utility transforms a [Metafield](https://shopify.dev/api/storefront/reference/common-objects/Metafield)\n * into a new object whose `values` have been parsed according to the metafield `type`.\n * If the metafield is `null`, then it returns `null` back.\n */\nexport function parseMetafield(\n /** A [Metafield](https://shopify.dev/api/storefront/reference/common-objects/Metafield) or null */\n metafield: PartialDeep<MetafieldType, {recurseIntoArrays: true}> | null\n): PartialDeep<ParsedMetafield, {recurseIntoArrays: true}> | null {\n if (!metafield) {\n if (__HYDROGEN_DEV__) {\n console.warn(\n `'parseMetafield' was not passed any value for the 'metafield' argument`\n );\n }\n return null;\n }\n if (\n __HYDROGEN_DEV__ &&\n (metafield.value === null || metafield.value === undefined)\n ) {\n console.warn(\n `'parseMetafield()' was passed ${metafield.value} for 'metafield.value'`\n );\n }\n\n return {\n ...metafield,\n value: parseMetafieldValue(metafield),\n };\n}\n\n/**\n * The `parseMetafieldValue` function parses a [Metafield](https://shopify.dev/api/storefront/reference/common-objects/metafield)'s `value` from a string into a sensible type corresponding to the [Metafield](https://shopify.dev/api/storefront/reference/common-objects/metafield)'s `type`.\n */\nexport function parseMetafieldValue(\n metafield: PartialDeep<MetafieldType, {recurseIntoArrays: true}> | null\n): ParsedMetafield['value'] {\n if (!metafield) {\n return null;\n }\n\n if (metafield.value === null || metafield.value === undefined) {\n if (__HYDROGEN_DEV__) {\n console.warn(\n `'parseMetafieldValue()' was passed ${metafield.value} for 'metafield.value'`\n );\n }\n return metafield.value;\n }\n\n switch (metafield.type) {\n case 'boolean':\n return metafield.value === 'true';\n case 'number_integer':\n return parseInt(metafield.value);\n case 'number_decimal':\n return parseFloat(metafield.value);\n case 'date':\n case 'date_time':\n return new Date(metafield.value);\n case 'json':\n case 'weight':\n case 'dimension':\n case 'volume':\n case 'rating':\n return parseJSON(metafield.value);\n case 'color':\n case 'single_line_text_field':\n case 'multi_line_text_field':\n case 'product_reference':\n case 'page_reference':\n case 'variant_reference':\n case 'file_reference':\n case 'url':\n default:\n return metafield.value;\n }\n}\n\n/**\n * Parses a JSON string while preventing prototype injection attacks.\n */\nexport function parseJSON(json: string) {\n if (String(json).includes('__proto__')) {\n return JSON.parse(json, (k, v) => {\n if (k !== '__proto__') return v;\n });\n }\n\n return JSON.parse(json);\n}\n\nconst UNIT_MAPPING: Record<string, string> = {\n // Dimension\n mm: 'millimeter',\n cm: 'centimeter',\n m: 'meter',\n in: 'inch',\n ft: 'foot',\n yd: 'yard',\n // Volume\n ml: 'milliliter',\n l: 'liter',\n us_fl_oz: 'fluid-ounce',\n us_gal: 'gallon',\n // Weight\n kg: 'kilogram',\n g: 'gram',\n lb: 'pound',\n oz: 'ounce',\n};\n\nexport function getMeasurementAsString(\n measurement: Measurement,\n locale = 'en-us',\n options: Intl.NumberFormatOptions = {}\n) {\n let measure: {value: number; unit: string} = {\n value: measurement.value,\n unit: UNIT_MAPPING[measurement.unit],\n };\n\n if (measure.unit == null) {\n measure = convertToSupportedUnit(measurement.value, measurement.unit);\n }\n\n return new Intl.NumberFormat(locale, {\n ...options,\n unit: measure.unit,\n style: 'unit',\n }).format(measure.value);\n}\n\nfunction convertToSupportedUnit(value: number, unit: string) {\n switch (unit) {\n case 'cl':\n return {\n value: value / 1000,\n unit: 'liter',\n };\n case 'm3':\n return {\n value: value * 1000,\n unit: 'liter',\n };\n case 'us_pt':\n return {\n value: value * 0.125,\n unit: 'gallon',\n };\n case 'us_qt':\n return {\n value: value * 0.5,\n unit: 'gallon',\n };\n case 'us_oz':\n return {\n value: value / 128,\n unit: 'gallon',\n };\n case 'imp_pt':\n return {\n value: value / 6.661, // approximate conversion\n unit: 'gallon',\n };\n case 'imp_qt':\n return {\n value: value / 3.331, // approximate conversion\n unit: 'gallon',\n };\n case 'imp_gal':\n return {\n value: value / 1.201, // approximate conversion\n unit: 'gallon',\n };\n case 'imp_fl_oz':\n return {\n value: value * 0.96076, // approximate conversion\n unit: 'fluid-ounce',\n };\n default:\n throw new Error(`Unit not supported: ${unit}`);\n }\n}\n\ntype ParsedMetafield = Omit<\n PartialDeep<MetafieldType, {recurseIntoArrays: true}>,\n 'value'\n> & {\n value?: string | number | boolean | JsonValue | Date | Rating | Measurement;\n};\n\nexport interface Rating {\n value: number;\n scale_min: number;\n scale_max: number;\n}\n\ninterface Measurement {\n unit: string;\n value: number;\n}\n"],"names":["Metafield","props","data","as","passthroughProps","locale","useShop","parsedMetafield","useMemo","parseMetafield","noDataPropWarning","console","warn","value","undefined","noValueWarning","id","key","type","Wrapper","toLocaleDateString","toLocaleString","getMeasurementAsString","__html","split","join","protocolLessUrl","URL","href","replace","protocol","JSON","stringify","ref","reference","title","refArray","references","flattenConnection","map","index","__typename","image","_jsx","Image","previewImage","url","Video","toString","metafield","parseMetafieldValue","parseInt","parseFloat","Date","parseJSON","json","String","includes","parse","k","v","UNIT_MAPPING","mm","cm","m","in","ft","yd","ml","l","us_fl_oz","us_gal","kg","g","lb","oz","measurement","options","measure","unit","convertToSupportedUnit","Intl","NumberFormat","style","format","Error"],"mappings":"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"}
|
|
@@ -1,11 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
const flattenConnection = require("./flatten-connection.cjs");
|
|
8
|
-
const jsxRuntime = require("react/jsx-runtime");
|
|
1
|
+
import { useMemo } from "react";
|
|
2
|
+
import { useShop } from "./ShopifyProvider.mjs";
|
|
3
|
+
import { Image } from "./Image.mjs";
|
|
4
|
+
import { Video } from "./Video.mjs";
|
|
5
|
+
import { flattenConnection } from "./flatten-connection.mjs";
|
|
6
|
+
import { jsx } from "react/jsx-runtime";
|
|
9
7
|
function Metafield(props) {
|
|
10
8
|
var _a, _b, _c, _d, _e, _f, _g, _h, _i;
|
|
11
9
|
const {
|
|
@@ -15,8 +13,8 @@ function Metafield(props) {
|
|
|
15
13
|
} = props;
|
|
16
14
|
const {
|
|
17
15
|
locale
|
|
18
|
-
} =
|
|
19
|
-
const parsedMetafield =
|
|
16
|
+
} = useShop();
|
|
17
|
+
const parsedMetafield = useMemo(() => parseMetafield(data), [data]);
|
|
20
18
|
if (!parsedMetafield) {
|
|
21
19
|
const noDataPropWarning = `<Metafield/>: nothing was passed to the data prop 'data'. Rendering 'null'`;
|
|
22
20
|
{
|
|
@@ -34,14 +32,14 @@ function Metafield(props) {
|
|
|
34
32
|
switch (parsedMetafield.type) {
|
|
35
33
|
case "date": {
|
|
36
34
|
const Wrapper2 = as != null ? as : "time";
|
|
37
|
-
return /* @__PURE__ */
|
|
35
|
+
return /* @__PURE__ */ jsx(Wrapper2, {
|
|
38
36
|
...passthroughProps,
|
|
39
37
|
children: parsedMetafield.value.toLocaleDateString(locale)
|
|
40
38
|
});
|
|
41
39
|
}
|
|
42
40
|
case "date_time": {
|
|
43
41
|
const Wrapper2 = as != null ? as : "time";
|
|
44
|
-
return /* @__PURE__ */
|
|
42
|
+
return /* @__PURE__ */ jsx(Wrapper2, {
|
|
45
43
|
...passthroughProps,
|
|
46
44
|
children: parsedMetafield.value.toLocaleString(locale)
|
|
47
45
|
});
|
|
@@ -50,21 +48,21 @@ function Metafield(props) {
|
|
|
50
48
|
case "dimension":
|
|
51
49
|
case "volume": {
|
|
52
50
|
const Wrapper2 = as != null ? as : "span";
|
|
53
|
-
return /* @__PURE__ */
|
|
51
|
+
return /* @__PURE__ */ jsx(Wrapper2, {
|
|
54
52
|
...passthroughProps,
|
|
55
53
|
children: getMeasurementAsString(parsedMetafield.value, locale)
|
|
56
54
|
});
|
|
57
55
|
}
|
|
58
56
|
case "rating": {
|
|
59
57
|
const Wrapper2 = as != null ? as : "span";
|
|
60
|
-
return /* @__PURE__ */
|
|
58
|
+
return /* @__PURE__ */ jsx(Wrapper2, {
|
|
61
59
|
...passthroughProps,
|
|
62
60
|
children: parsedMetafield.value.value
|
|
63
61
|
});
|
|
64
62
|
}
|
|
65
63
|
case "single_line_text_field": {
|
|
66
64
|
const Wrapper2 = as != null ? as : "span";
|
|
67
|
-
return /* @__PURE__ */
|
|
65
|
+
return /* @__PURE__ */ jsx(Wrapper2, {
|
|
68
66
|
...passthroughProps,
|
|
69
67
|
dangerouslySetInnerHTML: {
|
|
70
68
|
__html: parsedMetafield.value
|
|
@@ -73,7 +71,7 @@ function Metafield(props) {
|
|
|
73
71
|
}
|
|
74
72
|
case "multi_line_text_field": {
|
|
75
73
|
const Wrapper2 = as != null ? as : "div";
|
|
76
|
-
return /* @__PURE__ */
|
|
74
|
+
return /* @__PURE__ */ jsx(Wrapper2, {
|
|
77
75
|
...passthroughProps,
|
|
78
76
|
dangerouslySetInnerHTML: {
|
|
79
77
|
__html: parsedMetafield.value.split("\n").join("<br/>")
|
|
@@ -82,7 +80,7 @@ function Metafield(props) {
|
|
|
82
80
|
}
|
|
83
81
|
case "url": {
|
|
84
82
|
const protocolLessUrl = new URL(parsedMetafield.value);
|
|
85
|
-
return /* @__PURE__ */
|
|
83
|
+
return /* @__PURE__ */ jsx("a", {
|
|
86
84
|
href: protocolLessUrl.href.replace(protocolLessUrl.protocol, ""),
|
|
87
85
|
...passthroughProps,
|
|
88
86
|
children: parsedMetafield.value
|
|
@@ -90,7 +88,7 @@ function Metafield(props) {
|
|
|
90
88
|
}
|
|
91
89
|
case "json": {
|
|
92
90
|
const Wrapper2 = as != null ? as : "span";
|
|
93
|
-
return /* @__PURE__ */
|
|
91
|
+
return /* @__PURE__ */ jsx(Wrapper2, {
|
|
94
92
|
...passthroughProps,
|
|
95
93
|
children: JSON.stringify(parsedMetafield.value)
|
|
96
94
|
});
|
|
@@ -100,17 +98,17 @@ function Metafield(props) {
|
|
|
100
98
|
case "page_reference": {
|
|
101
99
|
const Wrapper2 = as != null ? as : "span";
|
|
102
100
|
const ref = parsedMetafield.reference;
|
|
103
|
-
return /* @__PURE__ */
|
|
101
|
+
return /* @__PURE__ */ jsx(Wrapper2, {
|
|
104
102
|
...passthroughProps,
|
|
105
103
|
children: (_c = (_b = ref == null ? void 0 : ref.title) != null ? _b : ref == null ? void 0 : ref.id) != null ? _c : ""
|
|
106
104
|
});
|
|
107
105
|
}
|
|
108
106
|
case "list.single_line_text_field": {
|
|
109
107
|
const Wrapper2 = as != null ? as : "ul";
|
|
110
|
-
const refArray = parsedMetafield.references ? flattenConnection
|
|
111
|
-
return /* @__PURE__ */
|
|
108
|
+
const refArray = parsedMetafield.references ? flattenConnection(parsedMetafield.references) : [];
|
|
109
|
+
return /* @__PURE__ */ jsx(Wrapper2, {
|
|
112
110
|
...passthroughProps,
|
|
113
|
-
children: refArray.map((ref, index) => /* @__PURE__ */
|
|
111
|
+
children: refArray.map((ref, index) => /* @__PURE__ */ jsx("li", {
|
|
114
112
|
children: ref
|
|
115
113
|
}, `${ref != null ? ref : ""}-${index}`))
|
|
116
114
|
});
|
|
@@ -118,22 +116,22 @@ function Metafield(props) {
|
|
|
118
116
|
case "file_reference": {
|
|
119
117
|
if (((_d = parsedMetafield.reference) == null ? void 0 : _d.__typename) === "MediaImage") {
|
|
120
118
|
const ref = parsedMetafield.reference;
|
|
121
|
-
return ref.image ? /* @__PURE__ */
|
|
119
|
+
return ref.image ? /* @__PURE__ */ jsx(Image, {
|
|
122
120
|
data: ref.image,
|
|
123
121
|
...passthroughProps
|
|
124
122
|
}) : null;
|
|
125
123
|
} else if (((_e = parsedMetafield.reference) == null ? void 0 : _e.__typename) === "GenericFile") {
|
|
126
124
|
const ref = parsedMetafield.reference;
|
|
127
|
-
return ref.previewImage ? /* @__PURE__ */
|
|
125
|
+
return ref.previewImage ? /* @__PURE__ */ jsx("a", {
|
|
128
126
|
href: (_g = (_f = parsedMetafield.reference) == null ? void 0 : _f.url) != null ? _g : "",
|
|
129
127
|
...passthroughProps,
|
|
130
|
-
children: /* @__PURE__ */
|
|
128
|
+
children: /* @__PURE__ */ jsx(Image, {
|
|
131
129
|
data: ref.previewImage
|
|
132
130
|
})
|
|
133
131
|
}) : null;
|
|
134
132
|
} else if (((_h = parsedMetafield.reference) == null ? void 0 : _h.__typename) === "Video") {
|
|
135
133
|
const ref = parsedMetafield.reference;
|
|
136
|
-
return /* @__PURE__ */
|
|
134
|
+
return /* @__PURE__ */ jsx(Video, {
|
|
137
135
|
...passthroughProps,
|
|
138
136
|
data: ref
|
|
139
137
|
});
|
|
@@ -141,7 +139,7 @@ function Metafield(props) {
|
|
|
141
139
|
}
|
|
142
140
|
}
|
|
143
141
|
const Wrapper = as != null ? as : "span";
|
|
144
|
-
return /* @__PURE__ */
|
|
142
|
+
return /* @__PURE__ */ jsx(Wrapper, {
|
|
145
143
|
...passthroughProps,
|
|
146
144
|
children: (_i = parsedMetafield.value) == null ? void 0 : _i.toString()
|
|
147
145
|
});
|
|
@@ -280,9 +278,11 @@ function convertToSupportedUnit(value, unit) {
|
|
|
280
278
|
throw new Error(`Unit not supported: ${unit}`);
|
|
281
279
|
}
|
|
282
280
|
}
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
281
|
+
export {
|
|
282
|
+
Metafield,
|
|
283
|
+
getMeasurementAsString,
|
|
284
|
+
parseJSON,
|
|
285
|
+
parseMetafield,
|
|
286
|
+
parseMetafieldValue
|
|
287
|
+
};
|
|
288
|
+
//# sourceMappingURL=Metafield.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Metafield.cjs","sources":["../../src/Metafield.tsx"],"sourcesContent":["import {type ElementType, useMemo, type ComponentPropsWithoutRef} from 'react';\nimport {useShop} from './ShopifyProvider.js';\nimport {Image} from './Image.js';\nimport type {\n MediaImage,\n Page,\n ProductVariant,\n Product,\n GenericFile,\n Video as VideoType,\n Metafield as MetafieldType,\n} from './storefront-api-types.js';\nimport {Video} from './Video.js';\nimport {flattenConnection} from './flatten-connection.js';\nimport type {PartialDeep, JsonValue} from 'type-fest';\n\ninterface BaseProps<ComponentGeneric extends ElementType> {\n /** An object with fields that correspond to the Storefront API's [Metafield object](https://shopify.dev/api/storefront/reference/common-objects/metafield). */\n data: PartialDeep<MetafieldType, {recurseIntoArrays: true}> | null;\n /** An HTML tag or React component to be rendered as the base element wrapper. The default value varies depending on [metafield.type](https://shopify.dev/apps/metafields/types). */\n as?: ComponentGeneric;\n}\n\nexport type MetafieldProps<ComponentGeneric extends ElementType> =\n ComponentPropsWithoutRef<ComponentGeneric> & BaseProps<ComponentGeneric>;\n\n/**\n * The `Metafield` component renders the value of a Storefront\n * API's [Metafield object](https://shopify.dev/api/storefront/reference/common-objects/metafield).\n * Relies on the `locale` property of the `useShop()` hook, so it must be a desendent of `<ShopifyProvider/>`\n *\n * Renders a smart default of the Metafield's `value`. For more information, refer to the [Default output](#default-output) section.\n */\nexport function Metafield<ComponentGeneric extends ElementType>(\n props: MetafieldProps<ComponentGeneric>\n) {\n const {data, as, ...passthroughProps} = props;\n const {locale} = useShop();\n\n const parsedMetafield = useMemo(() => parseMetafield(data), [data]);\n\n if (!parsedMetafield) {\n const noDataPropWarning = `<Metafield/>: nothing was passed to the data prop 'data'. Rendering 'null'`;\n if (__HYDROGEN_DEV__) {\n throw new Error(noDataPropWarning);\n } else {\n console.warn(noDataPropWarning);\n }\n return null;\n }\n\n if (parsedMetafield.value === null || parsedMetafield.value === undefined) {\n const noValueWarning = `<Metafield/>: No metafield value for metafield ${\n parsedMetafield.id ?? parsedMetafield.key\n }. Rendering 'null'`;\n if (__HYDROGEN_DEV__) {\n throw new Error(noValueWarning);\n } else {\n console.warn(noValueWarning);\n }\n return null;\n }\n\n switch (parsedMetafield.type) {\n case 'date': {\n const Wrapper = as ?? 'time';\n return (\n <Wrapper {...passthroughProps}>\n {(parsedMetafield.value as Date).toLocaleDateString(locale)}\n </Wrapper>\n );\n }\n case 'date_time': {\n const Wrapper = as ?? 'time';\n return (\n <Wrapper {...passthroughProps}>\n {(parsedMetafield.value as Date).toLocaleString(locale)}\n </Wrapper>\n );\n }\n case 'weight':\n case 'dimension':\n case 'volume': {\n const Wrapper = as ?? 'span';\n return (\n <Wrapper {...passthroughProps}>\n {getMeasurementAsString(parsedMetafield.value as Measurement, locale)}\n </Wrapper>\n );\n }\n case 'rating': {\n const Wrapper = as ?? 'span';\n return (\n <Wrapper {...passthroughProps}>\n {(parsedMetafield.value as Rating).value}\n </Wrapper>\n );\n }\n case 'single_line_text_field': {\n const Wrapper = as ?? 'span';\n return (\n <Wrapper\n {...passthroughProps}\n dangerouslySetInnerHTML={{__html: parsedMetafield.value as string}}\n />\n );\n }\n case 'multi_line_text_field': {\n const Wrapper = as ?? 'div';\n return (\n <Wrapper\n {...passthroughProps}\n dangerouslySetInnerHTML={{\n __html: (parsedMetafield.value as string).split('\\n').join('<br/>'),\n }}\n />\n );\n }\n case 'url': {\n const protocolLessUrl = new URL(parsedMetafield.value as string);\n return (\n <a\n href={protocolLessUrl.href.replace(protocolLessUrl.protocol, '')}\n {...passthroughProps}\n >\n {parsedMetafield.value as string}\n </a>\n );\n }\n case 'json': {\n const Wrapper = as ?? 'span';\n return (\n <Wrapper {...passthroughProps}>\n {JSON.stringify(parsedMetafield.value)}\n </Wrapper>\n );\n }\n case 'product_reference':\n case 'variant_reference':\n case 'page_reference': {\n const Wrapper = as ?? 'span';\n const ref = parsedMetafield.reference as Page | ProductVariant | Product;\n return (\n <Wrapper {...passthroughProps}>{ref?.title ?? ref?.id ?? ''}</Wrapper>\n );\n }\n case 'list.single_line_text_field': {\n const Wrapper = as ?? 'ul';\n\n const refArray = parsedMetafield.references\n ? (flattenConnection(parsedMetafield.references) as string[])\n : [];\n return (\n <Wrapper {...passthroughProps}>\n {refArray.map((ref, index) => (\n // there's no unique way to identify these strings, so we do our best by combining the string with the index for the key\n // eslint-disable-next-line react/no-array-index-key\n <li key={`${ref ?? ''}-${index}`}>{ref}</li>\n ))}\n </Wrapper>\n );\n }\n case 'file_reference': {\n if (parsedMetafield.reference?.__typename === 'MediaImage') {\n const ref = parsedMetafield.reference as MediaImage;\n return ref.image ? (\n <Image data={ref.image} {...passthroughProps} />\n ) : null;\n } else if (parsedMetafield.reference?.__typename === 'GenericFile') {\n const ref = parsedMetafield.reference as GenericFile;\n return ref.previewImage ? (\n <a href={parsedMetafield.reference?.url ?? ''} {...passthroughProps}>\n <Image data={ref.previewImage} />\n </a>\n ) : null;\n } else if (parsedMetafield.reference?.__typename === 'Video') {\n const ref = parsedMetafield.reference as VideoType;\n return <Video {...passthroughProps} data={ref} />;\n }\n }\n }\n\n const Wrapper = as ?? 'span';\n return (\n <Wrapper {...passthroughProps}>{parsedMetafield.value?.toString()}</Wrapper>\n );\n}\n\n/**\n * The `parseMetafield` utility transforms a [Metafield](https://shopify.dev/api/storefront/reference/common-objects/Metafield)\n * into a new object whose `values` have been parsed according to the metafield `type`.\n * If the metafield is `null`, then it returns `null` back.\n */\nexport function parseMetafield(\n /** A [Metafield](https://shopify.dev/api/storefront/reference/common-objects/Metafield) or null */\n metafield: PartialDeep<MetafieldType, {recurseIntoArrays: true}> | null\n): PartialDeep<ParsedMetafield, {recurseIntoArrays: true}> | null {\n if (!metafield) {\n if (__HYDROGEN_DEV__) {\n console.warn(\n `'parseMetafield' was not passed any value for the 'metafield' argument`\n );\n }\n return null;\n }\n if (\n __HYDROGEN_DEV__ &&\n (metafield.value === null || metafield.value === undefined)\n ) {\n console.warn(\n `'parseMetafield()' was passed ${metafield.value} for 'metafield.value'`\n );\n }\n\n return {\n ...metafield,\n value: parseMetafieldValue(metafield),\n };\n}\n\n/**\n * The `parseMetafieldValue` function parses a [Metafield](https://shopify.dev/api/storefront/reference/common-objects/metafield)'s `value` from a string into a sensible type corresponding to the [Metafield](https://shopify.dev/api/storefront/reference/common-objects/metafield)'s `type`.\n */\nexport function parseMetafieldValue(\n metafield: PartialDeep<MetafieldType, {recurseIntoArrays: true}> | null\n): ParsedMetafield['value'] {\n if (!metafield) {\n return null;\n }\n\n if (metafield.value === null || metafield.value === undefined) {\n if (__HYDROGEN_DEV__) {\n console.warn(\n `'parseMetafieldValue()' was passed ${metafield.value} for 'metafield.value'`\n );\n }\n return metafield.value;\n }\n\n switch (metafield.type) {\n case 'boolean':\n return metafield.value === 'true';\n case 'number_integer':\n return parseInt(metafield.value);\n case 'number_decimal':\n return parseFloat(metafield.value);\n case 'date':\n case 'date_time':\n return new Date(metafield.value);\n case 'json':\n case 'weight':\n case 'dimension':\n case 'volume':\n case 'rating':\n return parseJSON(metafield.value);\n case 'color':\n case 'single_line_text_field':\n case 'multi_line_text_field':\n case 'product_reference':\n case 'page_reference':\n case 'variant_reference':\n case 'file_reference':\n case 'url':\n default:\n return metafield.value;\n }\n}\n\n/**\n * Parses a JSON string while preventing prototype injection attacks.\n */\nexport function parseJSON(json: string) {\n if (String(json).includes('__proto__')) {\n return JSON.parse(json, (k, v) => {\n if (k !== '__proto__') return v;\n });\n }\n\n return JSON.parse(json);\n}\n\nconst UNIT_MAPPING: Record<string, string> = {\n // Dimension\n mm: 'millimeter',\n cm: 'centimeter',\n m: 'meter',\n in: 'inch',\n ft: 'foot',\n yd: 'yard',\n // Volume\n ml: 'milliliter',\n l: 'liter',\n us_fl_oz: 'fluid-ounce',\n us_gal: 'gallon',\n // Weight\n kg: 'kilogram',\n g: 'gram',\n lb: 'pound',\n oz: 'ounce',\n};\n\nexport function getMeasurementAsString(\n measurement: Measurement,\n locale = 'en-us',\n options: Intl.NumberFormatOptions = {}\n) {\n let measure: {value: number; unit: string} = {\n value: measurement.value,\n unit: UNIT_MAPPING[measurement.unit],\n };\n\n if (measure.unit == null) {\n measure = convertToSupportedUnit(measurement.value, measurement.unit);\n }\n\n return new Intl.NumberFormat(locale, {\n ...options,\n unit: measure.unit,\n style: 'unit',\n }).format(measure.value);\n}\n\nfunction convertToSupportedUnit(value: number, unit: string) {\n switch (unit) {\n case 'cl':\n return {\n value: value / 1000,\n unit: 'liter',\n };\n case 'm3':\n return {\n value: value * 1000,\n unit: 'liter',\n };\n case 'us_pt':\n return {\n value: value * 0.125,\n unit: 'gallon',\n };\n case 'us_qt':\n return {\n value: value * 0.5,\n unit: 'gallon',\n };\n case 'us_oz':\n return {\n value: value / 128,\n unit: 'gallon',\n };\n case 'imp_pt':\n return {\n value: value / 6.661, // approximate conversion\n unit: 'gallon',\n };\n case 'imp_qt':\n return {\n value: value / 3.331, // approximate conversion\n unit: 'gallon',\n };\n case 'imp_gal':\n return {\n value: value / 1.201, // approximate conversion\n unit: 'gallon',\n };\n case 'imp_fl_oz':\n return {\n value: value * 0.96076, // approximate conversion\n unit: 'fluid-ounce',\n };\n default:\n throw new Error(`Unit not supported: ${unit}`);\n }\n}\n\ntype ParsedMetafield = Omit<\n PartialDeep<MetafieldType, {recurseIntoArrays: true}>,\n 'value'\n> & {\n value?: string | number | boolean | JsonValue | Date | Rating | Measurement;\n};\n\nexport interface Rating {\n value: number;\n scale_min: number;\n scale_max: number;\n}\n\ninterface Measurement {\n unit: string;\n value: number;\n}\n"],"names":["Metafield","props","data","as","passthroughProps","locale","useShop","parsedMetafield","useMemo","parseMetafield","noDataPropWarning","console","warn","value","undefined","noValueWarning","id","key","type","Wrapper","toLocaleDateString","toLocaleString","getMeasurementAsString","__html","split","join","protocolLessUrl","URL","href","replace","protocol","JSON","stringify","ref","reference","title","refArray","references","flattenConnection","map","index","__typename","image","_jsx","Image","previewImage","url","Video","toString","metafield","parseMetafieldValue","parseInt","parseFloat","Date","parseJSON","json","String","includes","parse","k","v","UNIT_MAPPING","mm","cm","m","in","ft","yd","ml","l","us_fl_oz","us_gal","kg","g","lb","oz","measurement","options","measure","unit","convertToSupportedUnit","Intl","NumberFormat","style","format","Error"],"mappings":";;;;;;;;AAiCO,SAASA,UACdC,OACA;;AACM,QAAA;AAAA,IAACC;AAAAA,IAAMC;AAAAA,OAAOC;AAAAA,EAAoBH,IAAAA;AAClC,QAAA;AAAA,IAACI;AAAAA,MAAUC,gBAAjB,QAAA;AAEMC,QAAAA,kBAAkBC,MAAAA,QAAQ,MAAMC,eAAeP,IAAD,GAAQ,CAACA,IAAD,CAA7B;AAE/B,MAAI,CAACK,iBAAiB;AACpB,UAAMG,oBAAqB;AAGpB;AACLC,cAAQC,KAAKF,iBAAb;AAAA,IACD;AACM,WAAA;AAAA,EACR;AAED,MAAIH,gBAAgBM,UAAU,QAAQN,gBAAgBM,UAAUC,QAAW;AACzE,UAAMC,iBAAkB,mDACtBR,qBAAgBS,OAAhBT,YAAsBA,gBAAgBU;AAIjC;AACLN,cAAQC,KAAKG,cAAb;AAAA,IACD;AACM,WAAA;AAAA,EACR;AAED,UAAQR,gBAAgBW,MAAxB;AAAA,IACE,KAAK,QAAQ;AACX,YAAMC,WAAUhB,kBAAM;AACtB,4CACGgB,UAAD;AAAA,QAAA,GAAaf;AAAAA,QAAb,UACIG,gBAAgBM,MAAeO,mBAAmBf,MAAnD;AAAA,MAAA,CAFL;AAAA,IAKD;AAAA,IACD,KAAK,aAAa;AAChB,YAAMc,WAAUhB,kBAAM;AACtB,4CACGgB,UAAD;AAAA,QAAA,GAAaf;AAAAA,QAAb,UACIG,gBAAgBM,MAAeQ,eAAehB,MAA/C;AAAA,MAAA,CAFL;AAAA,IAKD;AAAA,IACD,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK,UAAU;AACb,YAAMc,WAAUhB,kBAAM;AACtB,4CACGgB,UAAD;AAAA,QAAA,GAAaf;AAAAA,QAAb,UACGkB,uBAAuBf,gBAAgBM,OAAsBR,MAAvC;AAAA,MAAA,CAF3B;AAAA,IAKD;AAAA,IACD,KAAK,UAAU;AACb,YAAMc,WAAUhB,kBAAM;AACtB,4CACGgB,UAAD;AAAA,QAAA,GAAaf;AAAAA,QAAb,UACIG,gBAAgBM,MAAiBA;AAAAA,MAAAA,CAFvC;AAAA,IAKD;AAAA,IACD,KAAK,0BAA0B;AAC7B,YAAMM,WAAUhB,kBAAM;AACtB,4CACGgB,UAAD;AAAA,QAAA,GACMf;AAAAA,QACJ,yBAAyB;AAAA,UAACmB,QAAQhB,gBAAgBM;AAAAA,QAAzB;AAAA,MAAA,CAH7B;AAAA,IAMD;AAAA,IACD,KAAK,yBAAyB;AAC5B,YAAMM,WAAUhB,kBAAM;AACtB,4CACGgB,UAAD;AAAA,QAAA,GACMf;AAAAA,QACJ,yBAAyB;AAAA,UACvBmB,QAAShB,gBAAgBM,MAAiBW,MAAM,IAAxC,EAA8CC,KAAK,OAAnD;AAAA,QADe;AAAA,MAAA,CAH7B;AAAA,IAQD;AAAA,IACD,KAAK,OAAO;AACV,YAAMC,kBAAkB,IAAIC,IAAIpB,gBAAgBM,KAAhD;AACA,4CACE,KAAA;AAAA,QACE,MAAMa,gBAAgBE,KAAKC,QAAQH,gBAAgBI,UAAU,EAAvD;AAAA,QADR,GAEM1B;AAAAA,QAFN,UAIGG,gBAAgBM;AAAAA,MAAAA,CALrB;AAAA,IAQD;AAAA,IACD,KAAK,QAAQ;AACX,YAAMM,WAAUhB,kBAAM;AACtB,4CACGgB,UAAD;AAAA,QAAA,GAAaf;AAAAA,QAAb,UACG2B,KAAKC,UAAUzB,gBAAgBM,KAA/B;AAAA,MAAA,CAFL;AAAA,IAKD;AAAA,IACD,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK,kBAAkB;AACrB,YAAMM,WAAUhB,kBAAM;AACtB,YAAM8B,MAAM1B,gBAAgB2B;AAC5B,4CACGf,UAAD;AAAA,QAAA,GAAaf;AAAAA,QAAb,WAAgC6B,sCAAKE,UAALF,YAAcA,2BAAKjB,OAAnBiB,YAAyB;AAAA,MAAA,CAD3D;AAAA,IAGD;AAAA,IACD,KAAK,+BAA+B;AAClC,YAAMd,WAAUhB,kBAAM;AAEtB,YAAMiC,WAAW7B,gBAAgB8B,aAC5BC,oCAAkB/B,gBAAgB8B,UAAjB,IAClB;AACJ,4CACGlB,UAAD;AAAA,QAAA,GAAaf;AAAAA,QAAb,UACGgC,SAASG,IAAI,CAACN,KAAKO,yCAGlB,MAAA;AAAA,UAAA,UAAmCP;AAAAA,QAAAA,GAAzB,GAAEA,oBAAO,MAAMO,OAAzB,CAHD;AAAA,MAAA,CAFL;AAAA,IASD;AAAA,IACD,KAAK,kBAAkB;AACjBjC,YAAAA,qBAAgB2B,cAAhB3B,mBAA2BkC,gBAAe,cAAc;AAC1D,cAAMR,MAAM1B,gBAAgB2B;AACrBD,eAAAA,IAAIS,QACTC,2BAAA,IAACC,aAAD;AAAA,UAAO,MAAMX,IAAIS;AAAAA,UAAjB,GAA4BtC;AAAAA,QAA5B,CAAA,IACE;AAAA,MACKG,aAAAA,qBAAgB2B,cAAhB3B,mBAA2BkC,gBAAe,eAAe;AAClE,cAAMR,MAAM1B,gBAAgB2B;AACrBD,eAAAA,IAAIY,eACTF,2BAAA,IAAA,KAAA;AAAA,UAAG,OAAMpC,2BAAgB2B,cAAhB3B,mBAA2BuC,QAA3BvC,YAAkC;AAAA,UAA3C,GAAmDH;AAAAA,UAAnD,yCACGwC,aAAD;AAAA,YAAO,MAAMX,IAAIY;AAAAA,UAAAA,CAAjB;AAAA,QADF,CAAA,IAGE;AAAA,MACKtC,aAAAA,qBAAgB2B,cAAhB3B,mBAA2BkC,gBAAe,SAAS;AAC5D,cAAMR,MAAM1B,gBAAgB2B;AAC5B,8CAAQa,MAAAA,OAAD;AAAA,UAAA,GAAW3C;AAAAA,UAAkB,MAAM6B;AAAAA,QAAAA,CAA1C;AAAA,MACD;AAAA,IACF;AAAA,EApHH;AAuHA,QAAMd,UAAUhB,kBAAM;AACtB,wCACG,SAAD;AAAA,IAAA,GAAaC;AAAAA,IAAb,WAAgCG,qBAAgBM,UAAhBN,mBAAuByC;AAAAA,EAAvB,CADlC;AAGD;AAOM,SAASvC,eAEdwC,WACgE;AAChE,MAAI,CAACA,WAAW;AAMP,WAAA;AAAA,EACR;AAUM,SAAA;AAAA,IACL,GAAGA;AAAAA,IACHpC,OAAOqC,oBAAoBD,SAAD;AAAA,EAAA;AAE7B;AAKM,SAASC,oBACdD,WAC0B;AAC1B,MAAI,CAACA,WAAW;AACP,WAAA;AAAA,EACR;AAED,MAAIA,UAAUpC,UAAU,QAAQoC,UAAUpC,UAAUC,QAAW;AAM7D,WAAOmC,UAAUpC;AAAAA,EAClB;AAED,UAAQoC,UAAU/B,MAAlB;AAAA,IACE,KAAK;AACH,aAAO+B,UAAUpC,UAAU;AAAA,IAC7B,KAAK;AACIsC,aAAAA,SAASF,UAAUpC,KAAX;AAAA,IACjB,KAAK;AACIuC,aAAAA,WAAWH,UAAUpC,KAAX;AAAA,IACnB,KAAK;AAAA,IACL,KAAK;AACI,aAAA,IAAIwC,KAAKJ,UAAUpC,KAAnB;AAAA,IACT,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AACIyC,aAAAA,UAAUL,UAAUpC,KAAX;AAAA,IAClB,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL;AACE,aAAOoC,UAAUpC;AAAAA,EAzBrB;AA2BD;AAKM,SAASyC,UAAUC,MAAc;AACtC,MAAIC,OAAOD,IAAD,EAAOE,SAAS,WAAtB,GAAoC;AACtC,WAAO1B,KAAK2B,MAAMH,MAAM,CAACI,GAAGC,MAAM;AAChC,UAAID,MAAM;AAAoBC,eAAAA;AAAAA,IAAAA,CADzB;AAAA,EAGR;AAEM7B,SAAAA,KAAK2B,MAAMH,IAAX;AACR;AAED,MAAMM,eAAuC;AAAA,EAE3CC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,GAAG;AAAA,EACHC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EAEJC,IAAI;AAAA,EACJC,GAAG;AAAA,EACHC,UAAU;AAAA,EACVC,QAAQ;AAAA,EAERC,IAAI;AAAA,EACJC,GAAG;AAAA,EACHC,IAAI;AAAA,EACJC,IAAI;AAjBuC;AAoBtC,SAASrD,uBACdsD,aACAvE,SAAS,SACTwE,UAAoC,CAAA,GACpC;AACA,MAAIC,UAAyC;AAAA,IAC3CjE,OAAO+D,YAAY/D;AAAAA,IACnBkE,MAAMlB,aAAae,YAAYG;AAAAA,EAAAA;AAG7BD,MAAAA,QAAQC,QAAQ,MAAM;AACxBD,cAAUE,uBAAuBJ,YAAY/D,OAAO+D,YAAYG,IAAhC;AAAA,EACjC;AAEM,SAAA,IAAIE,KAAKC,aAAa7E,QAAQ;AAAA,IACnC,GAAGwE;AAAAA,IACHE,MAAMD,QAAQC;AAAAA,IACdI,OAAO;AAAA,EAHF,CAAA,EAIJC,OAAON,QAAQjE,KAJX;AAKR;AAED,SAASmE,uBAAuBnE,OAAekE,MAAc;AAC3D,UAAQA,MAAR;AAAA,IACE,KAAK;AACI,aAAA;AAAA,QACLlE,OAAOA,QAAQ;AAAA,QACfkE,MAAM;AAAA,MAAA;AAAA,IAEV,KAAK;AACI,aAAA;AAAA,QACLlE,OAAOA,QAAQ;AAAA,QACfkE,MAAM;AAAA,MAAA;AAAA,IAEV,KAAK;AACI,aAAA;AAAA,QACLlE,OAAOA,QAAQ;AAAA,QACfkE,MAAM;AAAA,MAAA;AAAA,IAEV,KAAK;AACI,aAAA;AAAA,QACLlE,OAAOA,QAAQ;AAAA,QACfkE,MAAM;AAAA,MAAA;AAAA,IAEV,KAAK;AACI,aAAA;AAAA,QACLlE,OAAOA,QAAQ;AAAA,QACfkE,MAAM;AAAA,MAAA;AAAA,IAEV,KAAK;AACI,aAAA;AAAA,QACLlE,OAAOA,QAAQ;AAAA,QACfkE,MAAM;AAAA,MAAA;AAAA,IAEV,KAAK;AACI,aAAA;AAAA,QACLlE,OAAOA,QAAQ;AAAA,QACfkE,MAAM;AAAA,MAAA;AAAA,IAEV,KAAK;AACI,aAAA;AAAA,QACLlE,OAAOA,QAAQ;AAAA,QACfkE,MAAM;AAAA,MAAA;AAAA,IAEV,KAAK;AACI,aAAA;AAAA,QACLlE,OAAOA,QAAQ;AAAA,QACfkE,MAAM;AAAA,MAAA;AAAA,IAEV;AACQ,YAAA,IAAIM,MAAO,uBAAsBN,MAAjC;AAAA,EA/CV;AAiDD;;;;;;"}
|
|
1
|
+
{"version":3,"file":"Metafield.mjs","sources":["../../src/Metafield.tsx"],"sourcesContent":["import {type ElementType, useMemo, type ComponentPropsWithoutRef} from 'react';\nimport {useShop} from './ShopifyProvider.js';\nimport {Image} from './Image.js';\nimport type {\n MediaImage,\n Page,\n ProductVariant,\n Product,\n GenericFile,\n Video as VideoType,\n Metafield as MetafieldType,\n} from './storefront-api-types.js';\nimport {Video} from './Video.js';\nimport {flattenConnection} from './flatten-connection.js';\nimport type {PartialDeep, JsonValue} from 'type-fest';\n\ninterface BaseProps<ComponentGeneric extends ElementType> {\n /** An object with fields that correspond to the Storefront API's [Metafield object](https://shopify.dev/api/storefront/reference/common-objects/metafield). */\n data: PartialDeep<MetafieldType, {recurseIntoArrays: true}> | null;\n /** An HTML tag or React component to be rendered as the base element wrapper. The default value varies depending on [metafield.type](https://shopify.dev/apps/metafields/types). */\n as?: ComponentGeneric;\n}\n\nexport type MetafieldProps<ComponentGeneric extends ElementType> =\n ComponentPropsWithoutRef<ComponentGeneric> & BaseProps<ComponentGeneric>;\n\n/**\n * The `Metafield` component renders the value of a Storefront\n * API's [Metafield object](https://shopify.dev/api/storefront/reference/common-objects/metafield).\n * Relies on the `locale` property of the `useShop()` hook, so it must be a desendent of `<ShopifyProvider/>`\n *\n * Renders a smart default of the Metafield's `value`. For more information, refer to the [Default output](#default-output) section.\n */\nexport function Metafield<ComponentGeneric extends ElementType>(\n props: MetafieldProps<ComponentGeneric>\n) {\n const {data, as, ...passthroughProps} = props;\n const {locale} = useShop();\n\n const parsedMetafield = useMemo(() => parseMetafield(data), [data]);\n\n if (!parsedMetafield) {\n const noDataPropWarning = `<Metafield/>: nothing was passed to the data prop 'data'. Rendering 'null'`;\n if (__HYDROGEN_DEV__) {\n throw new Error(noDataPropWarning);\n } else {\n console.warn(noDataPropWarning);\n }\n return null;\n }\n\n if (parsedMetafield.value === null || parsedMetafield.value === undefined) {\n const noValueWarning = `<Metafield/>: No metafield value for metafield ${\n parsedMetafield.id ?? parsedMetafield.key\n }. Rendering 'null'`;\n if (__HYDROGEN_DEV__) {\n throw new Error(noValueWarning);\n } else {\n console.warn(noValueWarning);\n }\n return null;\n }\n\n switch (parsedMetafield.type) {\n case 'date': {\n const Wrapper = as ?? 'time';\n return (\n <Wrapper {...passthroughProps}>\n {(parsedMetafield.value as Date).toLocaleDateString(locale)}\n </Wrapper>\n );\n }\n case 'date_time': {\n const Wrapper = as ?? 'time';\n return (\n <Wrapper {...passthroughProps}>\n {(parsedMetafield.value as Date).toLocaleString(locale)}\n </Wrapper>\n );\n }\n case 'weight':\n case 'dimension':\n case 'volume': {\n const Wrapper = as ?? 'span';\n return (\n <Wrapper {...passthroughProps}>\n {getMeasurementAsString(parsedMetafield.value as Measurement, locale)}\n </Wrapper>\n );\n }\n case 'rating': {\n const Wrapper = as ?? 'span';\n return (\n <Wrapper {...passthroughProps}>\n {(parsedMetafield.value as Rating).value}\n </Wrapper>\n );\n }\n case 'single_line_text_field': {\n const Wrapper = as ?? 'span';\n return (\n <Wrapper\n {...passthroughProps}\n dangerouslySetInnerHTML={{__html: parsedMetafield.value as string}}\n />\n );\n }\n case 'multi_line_text_field': {\n const Wrapper = as ?? 'div';\n return (\n <Wrapper\n {...passthroughProps}\n dangerouslySetInnerHTML={{\n __html: (parsedMetafield.value as string).split('\\n').join('<br/>'),\n }}\n />\n );\n }\n case 'url': {\n const protocolLessUrl = new URL(parsedMetafield.value as string);\n return (\n <a\n href={protocolLessUrl.href.replace(protocolLessUrl.protocol, '')}\n {...passthroughProps}\n >\n {parsedMetafield.value as string}\n </a>\n );\n }\n case 'json': {\n const Wrapper = as ?? 'span';\n return (\n <Wrapper {...passthroughProps}>\n {JSON.stringify(parsedMetafield.value)}\n </Wrapper>\n );\n }\n case 'product_reference':\n case 'variant_reference':\n case 'page_reference': {\n const Wrapper = as ?? 'span';\n const ref = parsedMetafield.reference as Page | ProductVariant | Product;\n return (\n <Wrapper {...passthroughProps}>{ref?.title ?? ref?.id ?? ''}</Wrapper>\n );\n }\n case 'list.single_line_text_field': {\n const Wrapper = as ?? 'ul';\n\n const refArray = parsedMetafield.references\n ? (flattenConnection(parsedMetafield.references) as string[])\n : [];\n return (\n <Wrapper {...passthroughProps}>\n {refArray.map((ref, index) => (\n // there's no unique way to identify these strings, so we do our best by combining the string with the index for the key\n // eslint-disable-next-line react/no-array-index-key\n <li key={`${ref ?? ''}-${index}`}>{ref}</li>\n ))}\n </Wrapper>\n );\n }\n case 'file_reference': {\n if (parsedMetafield.reference?.__typename === 'MediaImage') {\n const ref = parsedMetafield.reference as MediaImage;\n return ref.image ? (\n <Image data={ref.image} {...passthroughProps} />\n ) : null;\n } else if (parsedMetafield.reference?.__typename === 'GenericFile') {\n const ref = parsedMetafield.reference as GenericFile;\n return ref.previewImage ? (\n <a href={parsedMetafield.reference?.url ?? ''} {...passthroughProps}>\n <Image data={ref.previewImage} />\n </a>\n ) : null;\n } else if (parsedMetafield.reference?.__typename === 'Video') {\n const ref = parsedMetafield.reference as VideoType;\n return <Video {...passthroughProps} data={ref} />;\n }\n }\n }\n\n const Wrapper = as ?? 'span';\n return (\n <Wrapper {...passthroughProps}>{parsedMetafield.value?.toString()}</Wrapper>\n );\n}\n\n/**\n * The `parseMetafield` utility transforms a [Metafield](https://shopify.dev/api/storefront/reference/common-objects/Metafield)\n * into a new object whose `values` have been parsed according to the metafield `type`.\n * If the metafield is `null`, then it returns `null` back.\n */\nexport function parseMetafield(\n /** A [Metafield](https://shopify.dev/api/storefront/reference/common-objects/Metafield) or null */\n metafield: PartialDeep<MetafieldType, {recurseIntoArrays: true}> | null\n): PartialDeep<ParsedMetafield, {recurseIntoArrays: true}> | null {\n if (!metafield) {\n if (__HYDROGEN_DEV__) {\n console.warn(\n `'parseMetafield' was not passed any value for the 'metafield' argument`\n );\n }\n return null;\n }\n if (\n __HYDROGEN_DEV__ &&\n (metafield.value === null || metafield.value === undefined)\n ) {\n console.warn(\n `'parseMetafield()' was passed ${metafield.value} for 'metafield.value'`\n );\n }\n\n return {\n ...metafield,\n value: parseMetafieldValue(metafield),\n };\n}\n\n/**\n * The `parseMetafieldValue` function parses a [Metafield](https://shopify.dev/api/storefront/reference/common-objects/metafield)'s `value` from a string into a sensible type corresponding to the [Metafield](https://shopify.dev/api/storefront/reference/common-objects/metafield)'s `type`.\n */\nexport function parseMetafieldValue(\n metafield: PartialDeep<MetafieldType, {recurseIntoArrays: true}> | null\n): ParsedMetafield['value'] {\n if (!metafield) {\n return null;\n }\n\n if (metafield.value === null || metafield.value === undefined) {\n if (__HYDROGEN_DEV__) {\n console.warn(\n `'parseMetafieldValue()' was passed ${metafield.value} for 'metafield.value'`\n );\n }\n return metafield.value;\n }\n\n switch (metafield.type) {\n case 'boolean':\n return metafield.value === 'true';\n case 'number_integer':\n return parseInt(metafield.value);\n case 'number_decimal':\n return parseFloat(metafield.value);\n case 'date':\n case 'date_time':\n return new Date(metafield.value);\n case 'json':\n case 'weight':\n case 'dimension':\n case 'volume':\n case 'rating':\n return parseJSON(metafield.value);\n case 'color':\n case 'single_line_text_field':\n case 'multi_line_text_field':\n case 'product_reference':\n case 'page_reference':\n case 'variant_reference':\n case 'file_reference':\n case 'url':\n default:\n return metafield.value;\n }\n}\n\n/**\n * Parses a JSON string while preventing prototype injection attacks.\n */\nexport function parseJSON(json: string) {\n if (String(json).includes('__proto__')) {\n return JSON.parse(json, (k, v) => {\n if (k !== '__proto__') return v;\n });\n }\n\n return JSON.parse(json);\n}\n\nconst UNIT_MAPPING: Record<string, string> = {\n // Dimension\n mm: 'millimeter',\n cm: 'centimeter',\n m: 'meter',\n in: 'inch',\n ft: 'foot',\n yd: 'yard',\n // Volume\n ml: 'milliliter',\n l: 'liter',\n us_fl_oz: 'fluid-ounce',\n us_gal: 'gallon',\n // Weight\n kg: 'kilogram',\n g: 'gram',\n lb: 'pound',\n oz: 'ounce',\n};\n\nexport function getMeasurementAsString(\n measurement: Measurement,\n locale = 'en-us',\n options: Intl.NumberFormatOptions = {}\n) {\n let measure: {value: number; unit: string} = {\n value: measurement.value,\n unit: UNIT_MAPPING[measurement.unit],\n };\n\n if (measure.unit == null) {\n measure = convertToSupportedUnit(measurement.value, measurement.unit);\n }\n\n return new Intl.NumberFormat(locale, {\n ...options,\n unit: measure.unit,\n style: 'unit',\n }).format(measure.value);\n}\n\nfunction convertToSupportedUnit(value: number, unit: string) {\n switch (unit) {\n case 'cl':\n return {\n value: value / 1000,\n unit: 'liter',\n };\n case 'm3':\n return {\n value: value * 1000,\n unit: 'liter',\n };\n case 'us_pt':\n return {\n value: value * 0.125,\n unit: 'gallon',\n };\n case 'us_qt':\n return {\n value: value * 0.5,\n unit: 'gallon',\n };\n case 'us_oz':\n return {\n value: value / 128,\n unit: 'gallon',\n };\n case 'imp_pt':\n return {\n value: value / 6.661, // approximate conversion\n unit: 'gallon',\n };\n case 'imp_qt':\n return {\n value: value / 3.331, // approximate conversion\n unit: 'gallon',\n };\n case 'imp_gal':\n return {\n value: value / 1.201, // approximate conversion\n unit: 'gallon',\n };\n case 'imp_fl_oz':\n return {\n value: value * 0.96076, // approximate conversion\n unit: 'fluid-ounce',\n };\n default:\n throw new Error(`Unit not supported: ${unit}`);\n }\n}\n\ntype ParsedMetafield = Omit<\n PartialDeep<MetafieldType, {recurseIntoArrays: true}>,\n 'value'\n> & {\n value?: string | number | boolean | JsonValue | Date | Rating | Measurement;\n};\n\nexport interface Rating {\n value: number;\n scale_min: number;\n scale_max: number;\n}\n\ninterface Measurement {\n unit: string;\n value: number;\n}\n"],"names":["Metafield","props","data","as","passthroughProps","locale","useShop","parsedMetafield","useMemo","parseMetafield","noDataPropWarning","console","warn","value","undefined","noValueWarning","id","key","type","Wrapper","toLocaleDateString","toLocaleString","getMeasurementAsString","__html","split","join","protocolLessUrl","URL","href","replace","protocol","JSON","stringify","ref","reference","title","refArray","references","flattenConnection","map","index","__typename","image","_jsx","previewImage","url","toString","metafield","parseMetafieldValue","parseInt","parseFloat","Date","parseJSON","json","String","includes","parse","k","v","UNIT_MAPPING","mm","cm","m","in","ft","yd","ml","l","us_fl_oz","us_gal","kg","g","lb","oz","measurement","options","measure","unit","convertToSupportedUnit","Intl","NumberFormat","style","format","Error"],"mappings":"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"}
|
package/dist/prod/ModelViewer.js
CHANGED
|
@@ -1,10 +1,12 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
|
|
3
|
+
const require$$0 = require("react");
|
|
4
|
+
const loadScript = require("./load-script.js");
|
|
5
|
+
const jsxRuntime = require("react/jsx-runtime");
|
|
4
6
|
function ModelViewer(props) {
|
|
5
7
|
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
|
|
6
|
-
const [modelViewer, setModelViewer] = useState(void 0);
|
|
7
|
-
const callbackRef = useCallback((node) => {
|
|
8
|
+
const [modelViewer, setModelViewer] = require$$0.useState(void 0);
|
|
9
|
+
const callbackRef = require$$0.useCallback((node) => {
|
|
8
10
|
setModelViewer(node);
|
|
9
11
|
}, []);
|
|
10
12
|
const {
|
|
@@ -13,10 +15,10 @@ function ModelViewer(props) {
|
|
|
13
15
|
className,
|
|
14
16
|
...passthroughProps
|
|
15
17
|
} = props;
|
|
16
|
-
const modelViewerLoadedStatus = useLoadScript("https://unpkg.com/@google/model-viewer@v1.12.1/dist/model-viewer.min.js", {
|
|
18
|
+
const modelViewerLoadedStatus = loadScript.useLoadScript("https://unpkg.com/@google/model-viewer@v1.12.1/dist/model-viewer.min.js", {
|
|
17
19
|
module: true
|
|
18
20
|
});
|
|
19
|
-
useEffect(() => {
|
|
21
|
+
require$$0.useEffect(() => {
|
|
20
22
|
if (!modelViewer) {
|
|
21
23
|
return;
|
|
22
24
|
}
|
|
@@ -88,7 +90,7 @@ function ModelViewer(props) {
|
|
|
88
90
|
return null;
|
|
89
91
|
}
|
|
90
92
|
}
|
|
91
|
-
return /* @__PURE__ */ jsx("model-viewer", {
|
|
93
|
+
return /* @__PURE__ */ jsxRuntime.jsx("model-viewer", {
|
|
92
94
|
ref: callbackRef,
|
|
93
95
|
...passthroughProps,
|
|
94
96
|
className,
|
|
@@ -137,7 +139,5 @@ function ModelViewer(props) {
|
|
|
137
139
|
children
|
|
138
140
|
});
|
|
139
141
|
}
|
|
140
|
-
|
|
141
|
-
ModelViewer
|
|
142
|
-
};
|
|
142
|
+
exports.ModelViewer = ModelViewer;
|
|
143
143
|
//# sourceMappingURL=ModelViewer.js.map
|
|
@@ -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
|