@shopify/hydrogen-react 2022.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +218 -0
- package/dist/dev/ExternalVideo.cjs +39 -0
- package/dist/dev/ExternalVideo.cjs.map +1 -0
- package/dist/dev/ExternalVideo.js +39 -0
- package/dist/dev/ExternalVideo.js.map +1 -0
- package/dist/dev/Image.cjs +104 -0
- package/dist/dev/Image.cjs.map +1 -0
- package/dist/dev/Image.js +104 -0
- package/dist/dev/Image.js.map +1 -0
- package/dist/dev/MediaFile.cjs +57 -0
- package/dist/dev/MediaFile.cjs.map +1 -0
- package/dist/dev/MediaFile.js +57 -0
- package/dist/dev/MediaFile.js.map +1 -0
- package/dist/dev/Metafield.cjs +295 -0
- package/dist/dev/Metafield.cjs.map +1 -0
- package/dist/dev/Metafield.js +295 -0
- package/dist/dev/Metafield.js.map +1 -0
- package/dist/dev/ModelViewer.cjs +145 -0
- package/dist/dev/ModelViewer.cjs.map +1 -0
- package/dist/dev/ModelViewer.js +145 -0
- package/dist/dev/ModelViewer.js.map +1 -0
- package/dist/dev/Money.cjs +40 -0
- package/dist/dev/Money.cjs.map +1 -0
- package/dist/dev/Money.js +40 -0
- package/dist/dev/Money.js.map +1 -0
- package/dist/dev/ProductPrice.cjs +61 -0
- package/dist/dev/ProductPrice.cjs.map +1 -0
- package/dist/dev/ProductPrice.js +61 -0
- package/dist/dev/ProductPrice.js.map +1 -0
- package/dist/dev/ProductProvider.cjs +161 -0
- package/dist/dev/ProductProvider.cjs.map +1 -0
- package/dist/dev/ProductProvider.js +161 -0
- package/dist/dev/ProductProvider.js.map +1 -0
- package/dist/dev/ShopPayButton.cjs +64 -0
- package/dist/dev/ShopPayButton.cjs.map +1 -0
- package/dist/dev/ShopPayButton.js +64 -0
- package/dist/dev/ShopPayButton.js.map +1 -0
- package/dist/dev/ShopifyProvider.cjs +46 -0
- package/dist/dev/ShopifyProvider.cjs.map +1 -0
- package/dist/dev/ShopifyProvider.js +46 -0
- package/dist/dev/ShopifyProvider.js.map +1 -0
- package/dist/dev/Video.cjs +44 -0
- package/dist/dev/Video.cjs.map +1 -0
- package/dist/dev/Video.js +44 -0
- package/dist/dev/Video.js.map +1 -0
- package/dist/dev/flatten-connection.cjs +23 -0
- package/dist/dev/flatten-connection.cjs.map +1 -0
- package/dist/dev/flatten-connection.js +23 -0
- package/dist/dev/flatten-connection.js.map +1 -0
- package/dist/dev/image-size.cjs +80 -0
- package/dist/dev/image-size.cjs.map +1 -0
- package/dist/dev/image-size.js +80 -0
- package/dist/dev/image-size.js.map +1 -0
- package/dist/dev/index.cjs +35 -0
- package/dist/dev/index.cjs.map +1 -0
- package/dist/dev/index.js +35 -0
- package/dist/dev/index.js.map +1 -0
- package/dist/dev/load-script.cjs +52 -0
- package/dist/dev/load-script.cjs.map +1 -0
- package/dist/dev/load-script.js +52 -0
- package/dist/dev/load-script.js.map +1 -0
- package/dist/dev/storefront-api-constants.cjs +5 -0
- package/dist/dev/storefront-api-constants.cjs.map +1 -0
- package/dist/dev/storefront-api-constants.js +5 -0
- package/dist/dev/storefront-api-constants.js.map +1 -0
- package/dist/dev/storefront-client.cjs +72 -0
- package/dist/dev/storefront-client.cjs.map +1 -0
- package/dist/dev/storefront-client.js +72 -0
- package/dist/dev/storefront-client.js.map +1 -0
- package/dist/dev/useMoney.cjs +72 -0
- package/dist/dev/useMoney.cjs.map +1 -0
- package/dist/dev/useMoney.js +72 -0
- package/dist/dev/useMoney.js.map +1 -0
- package/dist/prod/ExternalVideo.cjs +39 -0
- package/dist/prod/ExternalVideo.cjs.map +1 -0
- package/dist/prod/ExternalVideo.js +39 -0
- package/dist/prod/ExternalVideo.js.map +1 -0
- package/dist/prod/Image.cjs +99 -0
- package/dist/prod/Image.cjs.map +1 -0
- package/dist/prod/Image.js +99 -0
- package/dist/prod/Image.js.map +1 -0
- package/dist/prod/MediaFile.cjs +59 -0
- package/dist/prod/MediaFile.cjs.map +1 -0
- package/dist/prod/MediaFile.js +59 -0
- package/dist/prod/MediaFile.js.map +1 -0
- package/dist/prod/Metafield.cjs +288 -0
- package/dist/prod/Metafield.cjs.map +1 -0
- package/dist/prod/Metafield.js +288 -0
- package/dist/prod/Metafield.js.map +1 -0
- package/dist/prod/ModelViewer.cjs +143 -0
- package/dist/prod/ModelViewer.cjs.map +1 -0
- package/dist/prod/ModelViewer.js +143 -0
- package/dist/prod/ModelViewer.js.map +1 -0
- package/dist/prod/Money.cjs +40 -0
- package/dist/prod/Money.cjs.map +1 -0
- package/dist/prod/Money.js +40 -0
- package/dist/prod/Money.js.map +1 -0
- package/dist/prod/ProductPrice.cjs +61 -0
- package/dist/prod/ProductPrice.cjs.map +1 -0
- package/dist/prod/ProductPrice.js +61 -0
- package/dist/prod/ProductPrice.js.map +1 -0
- package/dist/prod/ProductProvider.cjs +161 -0
- package/dist/prod/ProductProvider.cjs.map +1 -0
- package/dist/prod/ProductProvider.js +161 -0
- package/dist/prod/ProductProvider.js.map +1 -0
- package/dist/prod/ShopPayButton.cjs +64 -0
- package/dist/prod/ShopPayButton.cjs.map +1 -0
- package/dist/prod/ShopPayButton.js +64 -0
- package/dist/prod/ShopPayButton.js.map +1 -0
- package/dist/prod/ShopifyProvider.cjs +46 -0
- package/dist/prod/ShopifyProvider.cjs.map +1 -0
- package/dist/prod/ShopifyProvider.js +46 -0
- package/dist/prod/ShopifyProvider.js.map +1 -0
- package/dist/prod/Video.cjs +44 -0
- package/dist/prod/Video.cjs.map +1 -0
- package/dist/prod/Video.js +44 -0
- package/dist/prod/Video.js.map +1 -0
- package/dist/prod/flatten-connection.cjs +18 -0
- package/dist/prod/flatten-connection.cjs.map +1 -0
- package/dist/prod/flatten-connection.js +18 -0
- package/dist/prod/flatten-connection.js.map +1 -0
- package/dist/prod/image-size.cjs +80 -0
- package/dist/prod/image-size.cjs.map +1 -0
- package/dist/prod/image-size.js +80 -0
- package/dist/prod/image-size.js.map +1 -0
- package/dist/prod/index.cjs +35 -0
- package/dist/prod/index.cjs.map +1 -0
- package/dist/prod/index.js +35 -0
- package/dist/prod/index.js.map +1 -0
- package/dist/prod/load-script.cjs +52 -0
- package/dist/prod/load-script.cjs.map +1 -0
- package/dist/prod/load-script.js +52 -0
- package/dist/prod/load-script.js.map +1 -0
- package/dist/prod/storefront-api-constants.cjs +5 -0
- package/dist/prod/storefront-api-constants.cjs.map +1 -0
- package/dist/prod/storefront-api-constants.js +5 -0
- package/dist/prod/storefront-api-constants.js.map +1 -0
- package/dist/prod/storefront-client.cjs +57 -0
- package/dist/prod/storefront-client.cjs.map +1 -0
- package/dist/prod/storefront-client.js +57 -0
- package/dist/prod/storefront-client.js.map +1 -0
- package/dist/prod/useMoney.cjs +72 -0
- package/dist/prod/useMoney.cjs.map +1 -0
- package/dist/prod/useMoney.js +72 -0
- package/dist/prod/useMoney.js.map +1 -0
- package/dist/types/ExternalVideo.d.ts +67 -0
- package/dist/types/Image.d.ts +54 -0
- package/dist/types/MediaFile.d.ts +31 -0
- package/dist/types/Metafield.d.ts +58 -0
- package/dist/types/ModelViewer.d.ts +57 -0
- package/dist/types/Money.d.ts +29 -0
- package/dist/types/ProductPrice.d.ts +22 -0
- package/dist/types/ProductProvider.d.ts +74 -0
- package/dist/types/ShopPayButton.d.ts +42 -0
- package/dist/types/ShopifyProvider.d.ts +42 -0
- package/dist/types/Video.d.ts +20 -0
- package/dist/types/flatten-connection.d.ts +17 -0
- package/dist/types/image-size.d.ts +36 -0
- package/dist/types/index.d.cts +15 -0
- package/dist/types/index.d.ts +15 -0
- package/dist/types/load-script.d.ts +11 -0
- package/dist/types/storefront-api-constants.d.ts +1 -0
- package/dist/types/storefront-api-response.types.d.ts +68 -0
- package/dist/types/storefront-api-types.d.ts +6537 -0
- package/dist/types/storefront-client.d.ts +63 -0
- package/dist/types/useMoney.d.ts +55 -0
- package/dist/umd/hydrogen-react.dev.js +1472 -0
- package/dist/umd/hydrogen-react.dev.js.map +1 -0
- package/dist/umd/hydrogen-react.prod.js +3 -0
- package/dist/umd/hydrogen-react.prod.js.map +1 -0
- package/package.json +106 -0
- package/storefront.schema.json +1 -0
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
|
|
3
|
+
const Image = require("./Image.cjs");
|
|
4
|
+
const Video = require("./Video.cjs");
|
|
5
|
+
const ExternalVideo = require("./ExternalVideo.cjs");
|
|
6
|
+
const ModelViewer = require("./ModelViewer.cjs");
|
|
7
|
+
const jsxRuntime = require("react/jsx-runtime");
|
|
8
|
+
function MediaFile({
|
|
9
|
+
data,
|
|
10
|
+
mediaOptions,
|
|
11
|
+
...passthroughProps
|
|
12
|
+
}) {
|
|
13
|
+
switch (data.__typename) {
|
|
14
|
+
case "MediaImage": {
|
|
15
|
+
if (!data.image) {
|
|
16
|
+
const noDataImage = `<MediaFile/>: 'data.image' does not exist for __typename of 'MediaImage'; rendering 'null' by default.`;
|
|
17
|
+
{
|
|
18
|
+
console.warn(noDataImage);
|
|
19
|
+
return null;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Image.Image, {
|
|
23
|
+
...passthroughProps,
|
|
24
|
+
...mediaOptions == null ? void 0 : mediaOptions.image,
|
|
25
|
+
data: data.image
|
|
26
|
+
});
|
|
27
|
+
}
|
|
28
|
+
case "Video": {
|
|
29
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Video.Video, {
|
|
30
|
+
...passthroughProps,
|
|
31
|
+
...mediaOptions == null ? void 0 : mediaOptions.video,
|
|
32
|
+
data
|
|
33
|
+
});
|
|
34
|
+
}
|
|
35
|
+
case "ExternalVideo": {
|
|
36
|
+
return /* @__PURE__ */ jsxRuntime.jsx(ExternalVideo.ExternalVideo, {
|
|
37
|
+
...passthroughProps,
|
|
38
|
+
...mediaOptions == null ? void 0 : mediaOptions.externalVideo,
|
|
39
|
+
data
|
|
40
|
+
});
|
|
41
|
+
}
|
|
42
|
+
case "Model3d": {
|
|
43
|
+
return /* @__PURE__ */ jsxRuntime.jsx(ModelViewer.ModelViewer, {
|
|
44
|
+
...passthroughProps,
|
|
45
|
+
...mediaOptions == null ? void 0 : mediaOptions.modelViewer,
|
|
46
|
+
data
|
|
47
|
+
});
|
|
48
|
+
}
|
|
49
|
+
default: {
|
|
50
|
+
const typenameMissingMessage = `<MediaFile /> requires the '__typename' property to exist on the 'data' prop in order to correctly render the correct component for this media. Rendering 'null' by default`;
|
|
51
|
+
{
|
|
52
|
+
console.error(typenameMissingMessage);
|
|
53
|
+
return null;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
exports.MediaFile = MediaFile;
|
|
59
|
+
//# sourceMappingURL=MediaFile.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MediaFile.cjs","sources":["../../src/MediaFile.tsx"],"sourcesContent":["import React from 'react';\nimport {Image, type ShopifyImageProps} from './Image.js';\nimport {Video} from './Video.js';\nimport {ExternalVideo} from './ExternalVideo.js';\nimport {ModelViewer} from './ModelViewer.js';\nimport type {MediaEdge as MediaEdgeType} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\n\ninterface MediaFileProps {\n /** An object with fields that correspond to the Storefront API's [Media object](https://shopify.dev/api/storefront/reference/products/media). */\n data: PartialDeep<MediaEdgeType['node'], {recurseIntoArrays: true}>;\n /** The options for the `Image`, `Video`, or `ExternalVideo` components. */\n mediaOptions?: {\n /** Props that will only apply when an `<Image />` is rendered */\n image: Omit<ShopifyImageProps, 'data'>;\n /** Props that will only apply when a `<Video />` is rendered */\n video: Omit<React.ComponentProps<typeof Video>, 'data'>;\n /** Props that will only apply when an `<ExternalVideo />` is rendered */\n externalVideo: Omit<\n React.ComponentProps<typeof ExternalVideo>['options'],\n 'data'\n >;\n /** Props that will only apply when a `<ModelViewer />` is rendered */\n modelViewer: Omit<typeof ModelViewer, 'data'>;\n };\n}\n\n/**\n * The `MediaFile` component renders the media for the Storefront API's\n * [Media object](https://shopify.dev/api/storefront/reference/products/media). It renders an `Image`, a\n * `Video`, an `ExternalVideo`, or a `ModelViewer` depending on the `__typename` of the `data` prop.\n */\nexport function MediaFile({\n data,\n mediaOptions,\n ...passthroughProps\n}: MediaFileProps) {\n switch (data.__typename) {\n case 'MediaImage': {\n if (!data.image) {\n const noDataImage = `<MediaFile/>: 'data.image' does not exist for __typename of 'MediaImage'; rendering 'null' by default.`;\n if (__HYDROGEN_DEV__) {\n throw new Error(noDataImage);\n } else {\n console.warn(noDataImage);\n return null;\n }\n }\n\n return (\n <Image\n {...passthroughProps}\n {...mediaOptions?.image}\n data={data.image}\n />\n );\n }\n case 'Video': {\n return (\n <Video {...passthroughProps} {...mediaOptions?.video} data={data} />\n );\n }\n case 'ExternalVideo': {\n return (\n <ExternalVideo\n {...passthroughProps}\n {...mediaOptions?.externalVideo}\n data={data}\n />\n );\n }\n case 'Model3d': {\n return (\n <ModelViewer\n {...passthroughProps}\n {...mediaOptions?.modelViewer}\n data={data}\n />\n );\n }\n default: {\n const typenameMissingMessage = `<MediaFile /> requires the '__typename' property to exist on the 'data' prop in order to correctly render the correct component for this media. Rendering 'null' by default`;\n if (__HYDROGEN_DEV__) {\n throw new Error(typenameMissingMessage);\n } else {\n console.error(typenameMissingMessage);\n return null;\n }\n }\n }\n}\n"],"names":["MediaFile","data","mediaOptions","passthroughProps","__typename","image","noDataImage","console","warn","Image","Video","video","ExternalVideo","externalVideo","ModelViewer","modelViewer","typenameMissingMessage","error"],"mappings":";;;;;;;AAgCO,SAASA,UAAU;AAAA,EACxBC;AAAAA,EACAC;AAAAA,KACGC;AAHqB,GAIP;AACjB,UAAQF,KAAKG,YAAb;AAAA,IACE,KAAK,cAAc;AACb,UAAA,CAACH,KAAKI,OAAO;AACf,cAAMC,cAAe;AAGd;AACLC,kBAAQC,KAAKF,WAAb;AACO,iBAAA;AAAA,QACR;AAAA,MACF;AAED,4CACGG,MAAAA,OAAD;AAAA,QAAA,GACMN;AAAAA,QADN,GAEMD,6CAAcG;AAAAA,QAClB,MAAMJ,KAAKI;AAAAA,MAAAA,CAJf;AAAA,IAOD;AAAA,IACD,KAAK,SAAS;AACZ,4CACGK,MAAAA,OAAD;AAAA,QAAA,GAAWP;AAAAA,QAAX,GAAiCD,6CAAcS;AAAAA,QAAO;AAAA,MAAA,CADxD;AAAA,IAGD;AAAA,IACD,KAAK,iBAAiB;AACpB,4CACGC,cAAAA,eAAD;AAAA,QAAA,GACMT;AAAAA,QADN,GAEMD,6CAAcW;AAAAA,QAClB;AAAA,MAAA,CAJJ;AAAA,IAOD;AAAA,IACD,KAAK,WAAW;AACd,4CACGC,YAAAA,aAAD;AAAA,QAAA,GACMX;AAAAA,QADN,GAEMD,6CAAca;AAAAA,QAClB;AAAA,MAAA,CAJJ;AAAA,IAOD;AAAA,IACD,SAAS;AACP,YAAMC,yBAA0B;AAGzB;AACLT,gBAAQU,MAAMD,sBAAd;AACO,eAAA;AAAA,MACR;AAAA,IACF;AAAA,EAnDH;AAqDD;;"}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { Image } from "./Image.js";
|
|
2
|
+
import { Video } from "./Video.js";
|
|
3
|
+
import { ExternalVideo } from "./ExternalVideo.js";
|
|
4
|
+
import { ModelViewer } from "./ModelViewer.js";
|
|
5
|
+
import { jsx } from "react/jsx-runtime";
|
|
6
|
+
function MediaFile({
|
|
7
|
+
data,
|
|
8
|
+
mediaOptions,
|
|
9
|
+
...passthroughProps
|
|
10
|
+
}) {
|
|
11
|
+
switch (data.__typename) {
|
|
12
|
+
case "MediaImage": {
|
|
13
|
+
if (!data.image) {
|
|
14
|
+
const noDataImage = `<MediaFile/>: 'data.image' does not exist for __typename of 'MediaImage'; rendering 'null' by default.`;
|
|
15
|
+
{
|
|
16
|
+
console.warn(noDataImage);
|
|
17
|
+
return null;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
return /* @__PURE__ */ jsx(Image, {
|
|
21
|
+
...passthroughProps,
|
|
22
|
+
...mediaOptions == null ? void 0 : mediaOptions.image,
|
|
23
|
+
data: data.image
|
|
24
|
+
});
|
|
25
|
+
}
|
|
26
|
+
case "Video": {
|
|
27
|
+
return /* @__PURE__ */ jsx(Video, {
|
|
28
|
+
...passthroughProps,
|
|
29
|
+
...mediaOptions == null ? void 0 : mediaOptions.video,
|
|
30
|
+
data
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
case "ExternalVideo": {
|
|
34
|
+
return /* @__PURE__ */ jsx(ExternalVideo, {
|
|
35
|
+
...passthroughProps,
|
|
36
|
+
...mediaOptions == null ? void 0 : mediaOptions.externalVideo,
|
|
37
|
+
data
|
|
38
|
+
});
|
|
39
|
+
}
|
|
40
|
+
case "Model3d": {
|
|
41
|
+
return /* @__PURE__ */ jsx(ModelViewer, {
|
|
42
|
+
...passthroughProps,
|
|
43
|
+
...mediaOptions == null ? void 0 : mediaOptions.modelViewer,
|
|
44
|
+
data
|
|
45
|
+
});
|
|
46
|
+
}
|
|
47
|
+
default: {
|
|
48
|
+
const typenameMissingMessage = `<MediaFile /> requires the '__typename' property to exist on the 'data' prop in order to correctly render the correct component for this media. Rendering 'null' by default`;
|
|
49
|
+
{
|
|
50
|
+
console.error(typenameMissingMessage);
|
|
51
|
+
return null;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
export {
|
|
57
|
+
MediaFile
|
|
58
|
+
};
|
|
59
|
+
//# sourceMappingURL=MediaFile.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MediaFile.js","sources":["../../src/MediaFile.tsx"],"sourcesContent":["import React from 'react';\nimport {Image, type ShopifyImageProps} from './Image.js';\nimport {Video} from './Video.js';\nimport {ExternalVideo} from './ExternalVideo.js';\nimport {ModelViewer} from './ModelViewer.js';\nimport type {MediaEdge as MediaEdgeType} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\n\ninterface MediaFileProps {\n /** An object with fields that correspond to the Storefront API's [Media object](https://shopify.dev/api/storefront/reference/products/media). */\n data: PartialDeep<MediaEdgeType['node'], {recurseIntoArrays: true}>;\n /** The options for the `Image`, `Video`, or `ExternalVideo` components. */\n mediaOptions?: {\n /** Props that will only apply when an `<Image />` is rendered */\n image: Omit<ShopifyImageProps, 'data'>;\n /** Props that will only apply when a `<Video />` is rendered */\n video: Omit<React.ComponentProps<typeof Video>, 'data'>;\n /** Props that will only apply when an `<ExternalVideo />` is rendered */\n externalVideo: Omit<\n React.ComponentProps<typeof ExternalVideo>['options'],\n 'data'\n >;\n /** Props that will only apply when a `<ModelViewer />` is rendered */\n modelViewer: Omit<typeof ModelViewer, 'data'>;\n };\n}\n\n/**\n * The `MediaFile` component renders the media for the Storefront API's\n * [Media object](https://shopify.dev/api/storefront/reference/products/media). It renders an `Image`, a\n * `Video`, an `ExternalVideo`, or a `ModelViewer` depending on the `__typename` of the `data` prop.\n */\nexport function MediaFile({\n data,\n mediaOptions,\n ...passthroughProps\n}: MediaFileProps) {\n switch (data.__typename) {\n case 'MediaImage': {\n if (!data.image) {\n const noDataImage = `<MediaFile/>: 'data.image' does not exist for __typename of 'MediaImage'; rendering 'null' by default.`;\n if (__HYDROGEN_DEV__) {\n throw new Error(noDataImage);\n } else {\n console.warn(noDataImage);\n return null;\n }\n }\n\n return (\n <Image\n {...passthroughProps}\n {...mediaOptions?.image}\n data={data.image}\n />\n );\n }\n case 'Video': {\n return (\n <Video {...passthroughProps} {...mediaOptions?.video} data={data} />\n );\n }\n case 'ExternalVideo': {\n return (\n <ExternalVideo\n {...passthroughProps}\n {...mediaOptions?.externalVideo}\n data={data}\n />\n );\n }\n case 'Model3d': {\n return (\n <ModelViewer\n {...passthroughProps}\n {...mediaOptions?.modelViewer}\n data={data}\n />\n );\n }\n default: {\n const typenameMissingMessage = `<MediaFile /> requires the '__typename' property to exist on the 'data' prop in order to correctly render the correct component for this media. Rendering 'null' by default`;\n if (__HYDROGEN_DEV__) {\n throw new Error(typenameMissingMessage);\n } else {\n console.error(typenameMissingMessage);\n return null;\n }\n }\n }\n}\n"],"names":["MediaFile","data","mediaOptions","passthroughProps","__typename","image","noDataImage","console","warn","video","externalVideo","modelViewer","typenameMissingMessage","error"],"mappings":";;;;;AAgCO,SAASA,UAAU;AAAA,EACxBC;AAAAA,EACAC;AAAAA,KACGC;AAHqB,GAIP;AACjB,UAAQF,KAAKG,YAAb;AAAA,IACE,KAAK,cAAc;AACb,UAAA,CAACH,KAAKI,OAAO;AACf,cAAMC,cAAe;AAGd;AACLC,kBAAQC,KAAKF,WAAb;AACO,iBAAA;AAAA,QACR;AAAA,MACF;AAED,iCACG,OAAD;AAAA,QAAA,GACMH;AAAAA,QADN,GAEMD,6CAAcG;AAAAA,QAClB,MAAMJ,KAAKI;AAAAA,MAAAA,CAJf;AAAA,IAOD;AAAA,IACD,KAAK,SAAS;AACZ,iCACG,OAAD;AAAA,QAAA,GAAWF;AAAAA,QAAX,GAAiCD,6CAAcO;AAAAA,QAAO;AAAA,MAAA,CADxD;AAAA,IAGD;AAAA,IACD,KAAK,iBAAiB;AACpB,iCACG,eAAD;AAAA,QAAA,GACMN;AAAAA,QADN,GAEMD,6CAAcQ;AAAAA,QAClB;AAAA,MAAA,CAJJ;AAAA,IAOD;AAAA,IACD,KAAK,WAAW;AACd,iCACG,aAAD;AAAA,QAAA,GACMP;AAAAA,QADN,GAEMD,6CAAcS;AAAAA,QAClB;AAAA,MAAA,CAJJ;AAAA,IAOD;AAAA,IACD,SAAS;AACP,YAAMC,yBAA0B;AAGzB;AACLL,gBAAQM,MAAMD,sBAAd;AACO,eAAA;AAAA,MACR;AAAA,IACF;AAAA,EAnDH;AAqDD;"}
|
|
@@ -0,0 +1,288 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
|
|
3
|
+
const react = require("react");
|
|
4
|
+
const ShopifyProvider = require("./ShopifyProvider.cjs");
|
|
5
|
+
const Image = require("./Image.cjs");
|
|
6
|
+
const Video = require("./Video.cjs");
|
|
7
|
+
const flattenConnection = require("./flatten-connection.cjs");
|
|
8
|
+
const jsxRuntime = require("react/jsx-runtime");
|
|
9
|
+
function Metafield(props) {
|
|
10
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _i;
|
|
11
|
+
const {
|
|
12
|
+
data,
|
|
13
|
+
as,
|
|
14
|
+
...passthroughProps
|
|
15
|
+
} = props;
|
|
16
|
+
const {
|
|
17
|
+
locale
|
|
18
|
+
} = ShopifyProvider.useShop();
|
|
19
|
+
const parsedMetafield = react.useMemo(() => parseMetafield(data), [data]);
|
|
20
|
+
if (!parsedMetafield) {
|
|
21
|
+
const noDataPropWarning = `<Metafield/>: nothing was passed to the data prop 'data'. Rendering 'null'`;
|
|
22
|
+
{
|
|
23
|
+
console.warn(noDataPropWarning);
|
|
24
|
+
}
|
|
25
|
+
return null;
|
|
26
|
+
}
|
|
27
|
+
if (parsedMetafield.value === null || parsedMetafield.value === void 0) {
|
|
28
|
+
const noValueWarning = `<Metafield/>: No metafield value for metafield ${(_a = parsedMetafield.id) != null ? _a : parsedMetafield.key}. Rendering 'null'`;
|
|
29
|
+
{
|
|
30
|
+
console.warn(noValueWarning);
|
|
31
|
+
}
|
|
32
|
+
return null;
|
|
33
|
+
}
|
|
34
|
+
switch (parsedMetafield.type) {
|
|
35
|
+
case "date": {
|
|
36
|
+
const Wrapper2 = as != null ? as : "time";
|
|
37
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Wrapper2, {
|
|
38
|
+
...passthroughProps,
|
|
39
|
+
children: parsedMetafield.value.toLocaleDateString(locale)
|
|
40
|
+
});
|
|
41
|
+
}
|
|
42
|
+
case "date_time": {
|
|
43
|
+
const Wrapper2 = as != null ? as : "time";
|
|
44
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Wrapper2, {
|
|
45
|
+
...passthroughProps,
|
|
46
|
+
children: parsedMetafield.value.toLocaleString(locale)
|
|
47
|
+
});
|
|
48
|
+
}
|
|
49
|
+
case "weight":
|
|
50
|
+
case "dimension":
|
|
51
|
+
case "volume": {
|
|
52
|
+
const Wrapper2 = as != null ? as : "span";
|
|
53
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Wrapper2, {
|
|
54
|
+
...passthroughProps,
|
|
55
|
+
children: getMeasurementAsString(parsedMetafield.value, locale)
|
|
56
|
+
});
|
|
57
|
+
}
|
|
58
|
+
case "rating": {
|
|
59
|
+
const Wrapper2 = as != null ? as : "span";
|
|
60
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Wrapper2, {
|
|
61
|
+
...passthroughProps,
|
|
62
|
+
children: parsedMetafield.value.value
|
|
63
|
+
});
|
|
64
|
+
}
|
|
65
|
+
case "single_line_text_field": {
|
|
66
|
+
const Wrapper2 = as != null ? as : "span";
|
|
67
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Wrapper2, {
|
|
68
|
+
...passthroughProps,
|
|
69
|
+
dangerouslySetInnerHTML: {
|
|
70
|
+
__html: parsedMetafield.value
|
|
71
|
+
}
|
|
72
|
+
});
|
|
73
|
+
}
|
|
74
|
+
case "multi_line_text_field": {
|
|
75
|
+
const Wrapper2 = as != null ? as : "div";
|
|
76
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Wrapper2, {
|
|
77
|
+
...passthroughProps,
|
|
78
|
+
dangerouslySetInnerHTML: {
|
|
79
|
+
__html: parsedMetafield.value.split("\n").join("<br/>")
|
|
80
|
+
}
|
|
81
|
+
});
|
|
82
|
+
}
|
|
83
|
+
case "url": {
|
|
84
|
+
const protocolLessUrl = new URL(parsedMetafield.value);
|
|
85
|
+
return /* @__PURE__ */ jsxRuntime.jsx("a", {
|
|
86
|
+
href: protocolLessUrl.href.replace(protocolLessUrl.protocol, ""),
|
|
87
|
+
...passthroughProps,
|
|
88
|
+
children: parsedMetafield.value
|
|
89
|
+
});
|
|
90
|
+
}
|
|
91
|
+
case "json": {
|
|
92
|
+
const Wrapper2 = as != null ? as : "span";
|
|
93
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Wrapper2, {
|
|
94
|
+
...passthroughProps,
|
|
95
|
+
children: JSON.stringify(parsedMetafield.value)
|
|
96
|
+
});
|
|
97
|
+
}
|
|
98
|
+
case "product_reference":
|
|
99
|
+
case "variant_reference":
|
|
100
|
+
case "page_reference": {
|
|
101
|
+
const Wrapper2 = as != null ? as : "span";
|
|
102
|
+
const ref = parsedMetafield.reference;
|
|
103
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Wrapper2, {
|
|
104
|
+
...passthroughProps,
|
|
105
|
+
children: (_c = (_b = ref == null ? void 0 : ref.title) != null ? _b : ref == null ? void 0 : ref.id) != null ? _c : ""
|
|
106
|
+
});
|
|
107
|
+
}
|
|
108
|
+
case "list.single_line_text_field": {
|
|
109
|
+
const Wrapper2 = as != null ? as : "ul";
|
|
110
|
+
const refArray = parsedMetafield.references ? flattenConnection.flattenConnection(parsedMetafield.references) : [];
|
|
111
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Wrapper2, {
|
|
112
|
+
...passthroughProps,
|
|
113
|
+
children: refArray.map((ref, index) => /* @__PURE__ */ jsxRuntime.jsx("li", {
|
|
114
|
+
children: ref
|
|
115
|
+
}, `${ref != null ? ref : ""}-${index}`))
|
|
116
|
+
});
|
|
117
|
+
}
|
|
118
|
+
case "file_reference": {
|
|
119
|
+
if (((_d = parsedMetafield.reference) == null ? void 0 : _d.__typename) === "MediaImage") {
|
|
120
|
+
const ref = parsedMetafield.reference;
|
|
121
|
+
return ref.image ? /* @__PURE__ */ jsxRuntime.jsx(Image.Image, {
|
|
122
|
+
data: ref.image,
|
|
123
|
+
...passthroughProps
|
|
124
|
+
}) : null;
|
|
125
|
+
} else if (((_e = parsedMetafield.reference) == null ? void 0 : _e.__typename) === "GenericFile") {
|
|
126
|
+
const ref = parsedMetafield.reference;
|
|
127
|
+
return ref.previewImage ? /* @__PURE__ */ jsxRuntime.jsx("a", {
|
|
128
|
+
href: (_g = (_f = parsedMetafield.reference) == null ? void 0 : _f.url) != null ? _g : "",
|
|
129
|
+
...passthroughProps,
|
|
130
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(Image.Image, {
|
|
131
|
+
data: ref.previewImage
|
|
132
|
+
})
|
|
133
|
+
}) : null;
|
|
134
|
+
} else if (((_h = parsedMetafield.reference) == null ? void 0 : _h.__typename) === "Video") {
|
|
135
|
+
const ref = parsedMetafield.reference;
|
|
136
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Video.Video, {
|
|
137
|
+
...passthroughProps,
|
|
138
|
+
data: ref
|
|
139
|
+
});
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
const Wrapper = as != null ? as : "span";
|
|
144
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Wrapper, {
|
|
145
|
+
...passthroughProps,
|
|
146
|
+
children: (_i = parsedMetafield.value) == null ? void 0 : _i.toString()
|
|
147
|
+
});
|
|
148
|
+
}
|
|
149
|
+
function parseMetafield(metafield) {
|
|
150
|
+
if (!metafield) {
|
|
151
|
+
return null;
|
|
152
|
+
}
|
|
153
|
+
return {
|
|
154
|
+
...metafield,
|
|
155
|
+
value: parseMetafieldValue(metafield)
|
|
156
|
+
};
|
|
157
|
+
}
|
|
158
|
+
function parseMetafieldValue(metafield) {
|
|
159
|
+
if (!metafield) {
|
|
160
|
+
return null;
|
|
161
|
+
}
|
|
162
|
+
if (metafield.value === null || metafield.value === void 0) {
|
|
163
|
+
return metafield.value;
|
|
164
|
+
}
|
|
165
|
+
switch (metafield.type) {
|
|
166
|
+
case "boolean":
|
|
167
|
+
return metafield.value === "true";
|
|
168
|
+
case "number_integer":
|
|
169
|
+
return parseInt(metafield.value);
|
|
170
|
+
case "number_decimal":
|
|
171
|
+
return parseFloat(metafield.value);
|
|
172
|
+
case "date":
|
|
173
|
+
case "date_time":
|
|
174
|
+
return new Date(metafield.value);
|
|
175
|
+
case "json":
|
|
176
|
+
case "weight":
|
|
177
|
+
case "dimension":
|
|
178
|
+
case "volume":
|
|
179
|
+
case "rating":
|
|
180
|
+
return parseJSON(metafield.value);
|
|
181
|
+
case "color":
|
|
182
|
+
case "single_line_text_field":
|
|
183
|
+
case "multi_line_text_field":
|
|
184
|
+
case "product_reference":
|
|
185
|
+
case "page_reference":
|
|
186
|
+
case "variant_reference":
|
|
187
|
+
case "file_reference":
|
|
188
|
+
case "url":
|
|
189
|
+
default:
|
|
190
|
+
return metafield.value;
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
function parseJSON(json) {
|
|
194
|
+
if (String(json).includes("__proto__")) {
|
|
195
|
+
return JSON.parse(json, (k, v) => {
|
|
196
|
+
if (k !== "__proto__")
|
|
197
|
+
return v;
|
|
198
|
+
});
|
|
199
|
+
}
|
|
200
|
+
return JSON.parse(json);
|
|
201
|
+
}
|
|
202
|
+
const UNIT_MAPPING = {
|
|
203
|
+
mm: "millimeter",
|
|
204
|
+
cm: "centimeter",
|
|
205
|
+
m: "meter",
|
|
206
|
+
in: "inch",
|
|
207
|
+
ft: "foot",
|
|
208
|
+
yd: "yard",
|
|
209
|
+
ml: "milliliter",
|
|
210
|
+
l: "liter",
|
|
211
|
+
us_fl_oz: "fluid-ounce",
|
|
212
|
+
us_gal: "gallon",
|
|
213
|
+
kg: "kilogram",
|
|
214
|
+
g: "gram",
|
|
215
|
+
lb: "pound",
|
|
216
|
+
oz: "ounce"
|
|
217
|
+
};
|
|
218
|
+
function getMeasurementAsString(measurement, locale = "en-us", options = {}) {
|
|
219
|
+
let measure = {
|
|
220
|
+
value: measurement.value,
|
|
221
|
+
unit: UNIT_MAPPING[measurement.unit]
|
|
222
|
+
};
|
|
223
|
+
if (measure.unit == null) {
|
|
224
|
+
measure = convertToSupportedUnit(measurement.value, measurement.unit);
|
|
225
|
+
}
|
|
226
|
+
return new Intl.NumberFormat(locale, {
|
|
227
|
+
...options,
|
|
228
|
+
unit: measure.unit,
|
|
229
|
+
style: "unit"
|
|
230
|
+
}).format(measure.value);
|
|
231
|
+
}
|
|
232
|
+
function convertToSupportedUnit(value, unit) {
|
|
233
|
+
switch (unit) {
|
|
234
|
+
case "cl":
|
|
235
|
+
return {
|
|
236
|
+
value: value / 1e3,
|
|
237
|
+
unit: "liter"
|
|
238
|
+
};
|
|
239
|
+
case "m3":
|
|
240
|
+
return {
|
|
241
|
+
value: value * 1e3,
|
|
242
|
+
unit: "liter"
|
|
243
|
+
};
|
|
244
|
+
case "us_pt":
|
|
245
|
+
return {
|
|
246
|
+
value: value * 0.125,
|
|
247
|
+
unit: "gallon"
|
|
248
|
+
};
|
|
249
|
+
case "us_qt":
|
|
250
|
+
return {
|
|
251
|
+
value: value * 0.5,
|
|
252
|
+
unit: "gallon"
|
|
253
|
+
};
|
|
254
|
+
case "us_oz":
|
|
255
|
+
return {
|
|
256
|
+
value: value / 128,
|
|
257
|
+
unit: "gallon"
|
|
258
|
+
};
|
|
259
|
+
case "imp_pt":
|
|
260
|
+
return {
|
|
261
|
+
value: value / 6.661,
|
|
262
|
+
unit: "gallon"
|
|
263
|
+
};
|
|
264
|
+
case "imp_qt":
|
|
265
|
+
return {
|
|
266
|
+
value: value / 3.331,
|
|
267
|
+
unit: "gallon"
|
|
268
|
+
};
|
|
269
|
+
case "imp_gal":
|
|
270
|
+
return {
|
|
271
|
+
value: value / 1.201,
|
|
272
|
+
unit: "gallon"
|
|
273
|
+
};
|
|
274
|
+
case "imp_fl_oz":
|
|
275
|
+
return {
|
|
276
|
+
value: value * 0.96076,
|
|
277
|
+
unit: "fluid-ounce"
|
|
278
|
+
};
|
|
279
|
+
default:
|
|
280
|
+
throw new Error(`Unit not supported: ${unit}`);
|
|
281
|
+
}
|
|
282
|
+
}
|
|
283
|
+
exports.Metafield = Metafield;
|
|
284
|
+
exports.getMeasurementAsString = getMeasurementAsString;
|
|
285
|
+
exports.parseJSON = parseJSON;
|
|
286
|
+
exports.parseMetafield = parseMetafield;
|
|
287
|
+
exports.parseMetafieldValue = parseMetafieldValue;
|
|
288
|
+
//# sourceMappingURL=Metafield.cjs.map
|
|
@@ -0,0 +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 // @ts-expect-error references currently only exists on 'unstable' SFAPI, but as soon as it does exist we can remove this ts-expect-error because I believe 'list.single_line_text_field' will also only be availabe in the same setting and we also handle if it doesn't exist\n const refArray = parsedMetafield.references\n ? // @ts-expect-error references currently only exists on 'unstable' SFAPI, but as soon as it does exist we can remove this ts-expect-error\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,aAE5BC,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,EArHH;AAwHA,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;;;;;;"}
|