@shopify/hydrogen-react 0.0.0-next-90b5ccf → 0.0.0-next-25516a6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/browser-dev/MediaFile.mjs +1 -1
- package/dist/browser-dev/MediaFile.mjs.map +1 -1
- package/dist/browser-prod/MediaFile.mjs +2 -2
- package/dist/browser-prod/MediaFile.mjs.map +1 -1
- package/dist/node-dev/MediaFile.js +1 -1
- package/dist/node-dev/MediaFile.js.map +1 -1
- package/dist/node-dev/MediaFile.mjs +1 -1
- package/dist/node-dev/MediaFile.mjs.map +1 -1
- package/dist/node-prod/MediaFile.js +2 -2
- package/dist/node-prod/MediaFile.js.map +1 -1
- package/dist/node-prod/MediaFile.mjs +2 -2
- package/dist/node-prod/MediaFile.mjs.map +1 -1
- package/dist/types/MediaFile.d.ts +4 -4
- 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 +1 -1
|
@@ -44,7 +44,7 @@ function MediaFile({
|
|
|
44
44
|
});
|
|
45
45
|
}
|
|
46
46
|
default: {
|
|
47
|
-
const typenameMissingMessage = `<MediaFile /> requires the '__typename' property to exist on the 'data' prop in order to
|
|
47
|
+
const typenameMissingMessage = `<MediaFile /> requires the '__typename' property to exist on the 'data' prop in order to render the matching sub-component for this type of media.`;
|
|
48
48
|
{
|
|
49
49
|
throw new Error(typenameMissingMessage);
|
|
50
50
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MediaFile.mjs","sources":["../../src/MediaFile.tsx"],"sourcesContent":["import {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';\nimport type {ModelViewerElement} from '@google/model-viewer/lib/model-viewer.js';\n\ntype BaseProps = React.HTMLAttributes<\n HTMLImageElement | HTMLVideoElement | HTMLIFrameElement | ModelViewerElement\n>;\nexport interface MediaFileProps extends BaseProps {\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
|
|
1
|
+
{"version":3,"file":"MediaFile.mjs","sources":["../../src/MediaFile.tsx"],"sourcesContent":["import {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';\nimport type {ModelViewerElement} from '@google/model-viewer/lib/model-viewer.js';\n\ntype BaseProps = React.HTMLAttributes<\n HTMLImageElement | HTMLVideoElement | HTMLIFrameElement | ModelViewerElement\n>;\nexport interface MediaFileProps extends BaseProps {\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 // @ts-expect-error There are issues with the inferred HTML attribute types here for ModelViewer (and contentEditable), but I think that's a little bit beyond me at the moment\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 render the matching sub-component for this type of media.`;\n if (__HYDROGEN_DEV__) {\n throw new Error(typenameMissingMessage);\n } else {\n console.error(`${typenameMissingMessage} Rendering 'null' by default`);\n return null;\n }\n }\n }\n}\n"],"names":["MediaFile","data","mediaOptions","passthroughProps","__typename","image","noDataImage","Error","video","externalVideo","modelViewer","typenameMissingMessage"],"mappings":";;;;;AAmCO,SAASA,UAAU;AAAA,EACxBC;AAAAA,EACAC;AAAAA,KACGC;AACW,GAAG;AACjB,UAAQF,KAAKG,YAAU;AAAA,IACrB,KAAK,cAAc;AACb,UAAA,CAACH,KAAKI,OAAO;AACf,cAAMC,cAAe;AACC;AACd,gBAAA,IAAIC,MAAMD,WAAW;AAAA,QAI7B;AAAA,MACF;AAEA,iCACG,OAAK;AAAA,QAAA,GACAH;AAAAA,QAAgB,GAChBD,6CAAcG;AAAAA,QAClB,MAAMJ,KAAKI;AAAAA,MAAAA,CACX;AAAA,IAEN;AAAA,IACA,KAAK,SAAS;AACZ,iCACG,OAAK;AAAA,QAAA,GAAKF;AAAAA,QAAgB,GAAMD,6CAAcM;AAAAA,QAAO;AAAA,MAAA,CAAc;AAAA,IAExE;AAAA,IACA,KAAK,iBAAiB;AACpB,iCACG,eAAa;AAAA,QAAA,GACRL;AAAAA,QAAgB,GAChBD,6CAAcO;AAAAA,QAClB;AAAA,MAAA,CACA;AAAA,IAEN;AAAA,IACA,KAAK,WAAW;AACd,iCAEG,aAAW;AAAA,QAAA,GACNN;AAAAA,QAAgB,GAChBD,6CAAcQ;AAAAA,QAClB;AAAA,MAAA,CAAW;AAAA,IAGjB;AAAA,IACA,SAAS;AACP,YAAMC,yBAA0B;AACV;AACd,cAAA,IAAIJ,MAAMI,sBAAsB;AAAA,MAIxC;AAAA,IACF;AAAA,EAAC;AAEL;"}
|
|
@@ -45,9 +45,9 @@ function MediaFile({
|
|
|
45
45
|
});
|
|
46
46
|
}
|
|
47
47
|
default: {
|
|
48
|
-
const typenameMissingMessage = `<MediaFile /> requires the '__typename' property to exist on the 'data' prop in order to
|
|
48
|
+
const typenameMissingMessage = `<MediaFile /> requires the '__typename' property to exist on the 'data' prop in order to render the matching sub-component for this type of media.`;
|
|
49
49
|
{
|
|
50
|
-
console.error(typenameMissingMessage);
|
|
50
|
+
console.error(`${typenameMissingMessage} Rendering 'null' by default`);
|
|
51
51
|
return null;
|
|
52
52
|
}
|
|
53
53
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MediaFile.mjs","sources":["../../src/MediaFile.tsx"],"sourcesContent":["import {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';\nimport type {ModelViewerElement} from '@google/model-viewer/lib/model-viewer.js';\n\ntype BaseProps = React.HTMLAttributes<\n HTMLImageElement | HTMLVideoElement | HTMLIFrameElement | ModelViewerElement\n>;\nexport interface MediaFileProps extends BaseProps {\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
|
|
1
|
+
{"version":3,"file":"MediaFile.mjs","sources":["../../src/MediaFile.tsx"],"sourcesContent":["import {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';\nimport type {ModelViewerElement} from '@google/model-viewer/lib/model-viewer.js';\n\ntype BaseProps = React.HTMLAttributes<\n HTMLImageElement | HTMLVideoElement | HTMLIFrameElement | ModelViewerElement\n>;\nexport interface MediaFileProps extends BaseProps {\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 // @ts-expect-error There are issues with the inferred HTML attribute types here for ModelViewer (and contentEditable), but I think that's a little bit beyond me at the moment\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 render the matching sub-component for this type of media.`;\n if (__HYDROGEN_DEV__) {\n throw new Error(typenameMissingMessage);\n } else {\n console.error(`${typenameMissingMessage} Rendering 'null' by default`);\n return null;\n }\n }\n }\n}\n"],"names":["MediaFile","data","mediaOptions","passthroughProps","__typename","image","noDataImage","console","warn","video","externalVideo","modelViewer","typenameMissingMessage","error"],"mappings":";;;;;AAmCO,SAASA,UAAU;AAAA,EACxBC;AAAAA,EACAC;AAAAA,KACGC;AACW,GAAG;AACjB,UAAQF,KAAKG,YAAU;AAAA,IACrB,KAAK,cAAc;AACb,UAAA,CAACH,KAAKI,OAAO;AACf,cAAMC,cAAe;AAGd;AACLC,kBAAQC,KAAKF,WAAW;AACjB,iBAAA;AAAA,QACT;AAAA,MACF;AAEA,iCACG,OAAK;AAAA,QAAA,GACAH;AAAAA,QAAgB,GAChBD,6CAAcG;AAAAA,QAClB,MAAMJ,KAAKI;AAAAA,MAAAA,CACX;AAAA,IAEN;AAAA,IACA,KAAK,SAAS;AACZ,iCACG,OAAK;AAAA,QAAA,GAAKF;AAAAA,QAAgB,GAAMD,6CAAcO;AAAAA,QAAO;AAAA,MAAA,CAAc;AAAA,IAExE;AAAA,IACA,KAAK,iBAAiB;AACpB,iCACG,eAAa;AAAA,QAAA,GACRN;AAAAA,QAAgB,GAChBD,6CAAcQ;AAAAA,QAClB;AAAA,MAAA,CACA;AAAA,IAEN;AAAA,IACA,KAAK,WAAW;AACd,iCAEG,aAAW;AAAA,QAAA,GACNP;AAAAA,QAAgB,GAChBD,6CAAcS;AAAAA,QAClB;AAAA,MAAA,CAAW;AAAA,IAGjB;AAAA,IACA,SAAS;AACP,YAAMC,yBAA0B;AAGzB;AACGC,gBAAAA,MAAO,GAAED,qDAAqD;AAC/D,eAAA;AAAA,MACT;AAAA,IACF;AAAA,EAAC;AAEL;"}
|
|
@@ -46,7 +46,7 @@ function MediaFile({
|
|
|
46
46
|
});
|
|
47
47
|
}
|
|
48
48
|
default: {
|
|
49
|
-
const typenameMissingMessage = `<MediaFile /> requires the '__typename' property to exist on the 'data' prop in order to
|
|
49
|
+
const typenameMissingMessage = `<MediaFile /> requires the '__typename' property to exist on the 'data' prop in order to render the matching sub-component for this type of media.`;
|
|
50
50
|
{
|
|
51
51
|
throw new Error(typenameMissingMessage);
|
|
52
52
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MediaFile.js","sources":["../../src/MediaFile.tsx"],"sourcesContent":["import {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';\nimport type {ModelViewerElement} from '@google/model-viewer/lib/model-viewer.js';\n\ntype BaseProps = React.HTMLAttributes<\n HTMLImageElement | HTMLVideoElement | HTMLIFrameElement | ModelViewerElement\n>;\nexport interface MediaFileProps extends BaseProps {\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
|
|
1
|
+
{"version":3,"file":"MediaFile.js","sources":["../../src/MediaFile.tsx"],"sourcesContent":["import {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';\nimport type {ModelViewerElement} from '@google/model-viewer/lib/model-viewer.js';\n\ntype BaseProps = React.HTMLAttributes<\n HTMLImageElement | HTMLVideoElement | HTMLIFrameElement | ModelViewerElement\n>;\nexport interface MediaFileProps extends BaseProps {\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 // @ts-expect-error There are issues with the inferred HTML attribute types here for ModelViewer (and contentEditable), but I think that's a little bit beyond me at the moment\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 render the matching sub-component for this type of media.`;\n if (__HYDROGEN_DEV__) {\n throw new Error(typenameMissingMessage);\n } else {\n console.error(`${typenameMissingMessage} Rendering 'null' by default`);\n return null;\n }\n }\n }\n}\n"],"names":["MediaFile","data","mediaOptions","passthroughProps","__typename","image","noDataImage","Error","Image","Video","video","ExternalVideo","externalVideo","ModelViewer","modelViewer","typenameMissingMessage"],"mappings":";;;;;;;AAmCO,SAASA,UAAU;AAAA,EACxBC;AAAAA,EACAC;AAAAA,KACGC;AACW,GAAG;AACjB,UAAQF,KAAKG,YAAU;AAAA,IACrB,KAAK,cAAc;AACb,UAAA,CAACH,KAAKI,OAAO;AACf,cAAMC,cAAe;AACC;AACd,gBAAA,IAAIC,MAAMD,WAAW;AAAA,QAI7B;AAAA,MACF;AAEA,4CACGE,MAAAA,OAAK;AAAA,QAAA,GACAL;AAAAA,QAAgB,GAChBD,6CAAcG;AAAAA,QAClB,MAAMJ,KAAKI;AAAAA,MAAAA,CACX;AAAA,IAEN;AAAA,IACA,KAAK,SAAS;AACZ,4CACGI,MAAAA,OAAK;AAAA,QAAA,GAAKN;AAAAA,QAAgB,GAAMD,6CAAcQ;AAAAA,QAAO;AAAA,MAAA,CAAc;AAAA,IAExE;AAAA,IACA,KAAK,iBAAiB;AACpB,4CACGC,cAAAA,eAAa;AAAA,QAAA,GACRR;AAAAA,QAAgB,GAChBD,6CAAcU;AAAAA,QAClB;AAAA,MAAA,CACA;AAAA,IAEN;AAAA,IACA,KAAK,WAAW;AACd,4CAEGC,YAAAA,aAAW;AAAA,QAAA,GACNV;AAAAA,QAAgB,GAChBD,6CAAcY;AAAAA,QAClB;AAAA,MAAA,CAAW;AAAA,IAGjB;AAAA,IACA,SAAS;AACP,YAAMC,yBAA0B;AACV;AACd,cAAA,IAAIR,MAAMQ,sBAAsB;AAAA,MAIxC;AAAA,IACF;AAAA,EAAC;AAEL;;"}
|
|
@@ -44,7 +44,7 @@ function MediaFile({
|
|
|
44
44
|
});
|
|
45
45
|
}
|
|
46
46
|
default: {
|
|
47
|
-
const typenameMissingMessage = `<MediaFile /> requires the '__typename' property to exist on the 'data' prop in order to
|
|
47
|
+
const typenameMissingMessage = `<MediaFile /> requires the '__typename' property to exist on the 'data' prop in order to render the matching sub-component for this type of media.`;
|
|
48
48
|
{
|
|
49
49
|
throw new Error(typenameMissingMessage);
|
|
50
50
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MediaFile.mjs","sources":["../../src/MediaFile.tsx"],"sourcesContent":["import {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';\nimport type {ModelViewerElement} from '@google/model-viewer/lib/model-viewer.js';\n\ntype BaseProps = React.HTMLAttributes<\n HTMLImageElement | HTMLVideoElement | HTMLIFrameElement | ModelViewerElement\n>;\nexport interface MediaFileProps extends BaseProps {\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
|
|
1
|
+
{"version":3,"file":"MediaFile.mjs","sources":["../../src/MediaFile.tsx"],"sourcesContent":["import {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';\nimport type {ModelViewerElement} from '@google/model-viewer/lib/model-viewer.js';\n\ntype BaseProps = React.HTMLAttributes<\n HTMLImageElement | HTMLVideoElement | HTMLIFrameElement | ModelViewerElement\n>;\nexport interface MediaFileProps extends BaseProps {\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 // @ts-expect-error There are issues with the inferred HTML attribute types here for ModelViewer (and contentEditable), but I think that's a little bit beyond me at the moment\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 render the matching sub-component for this type of media.`;\n if (__HYDROGEN_DEV__) {\n throw new Error(typenameMissingMessage);\n } else {\n console.error(`${typenameMissingMessage} Rendering 'null' by default`);\n return null;\n }\n }\n }\n}\n"],"names":["MediaFile","data","mediaOptions","passthroughProps","__typename","image","noDataImage","Error","video","externalVideo","modelViewer","typenameMissingMessage"],"mappings":";;;;;AAmCO,SAASA,UAAU;AAAA,EACxBC;AAAAA,EACAC;AAAAA,KACGC;AACW,GAAG;AACjB,UAAQF,KAAKG,YAAU;AAAA,IACrB,KAAK,cAAc;AACb,UAAA,CAACH,KAAKI,OAAO;AACf,cAAMC,cAAe;AACC;AACd,gBAAA,IAAIC,MAAMD,WAAW;AAAA,QAI7B;AAAA,MACF;AAEA,iCACG,OAAK;AAAA,QAAA,GACAH;AAAAA,QAAgB,GAChBD,6CAAcG;AAAAA,QAClB,MAAMJ,KAAKI;AAAAA,MAAAA,CACX;AAAA,IAEN;AAAA,IACA,KAAK,SAAS;AACZ,iCACG,OAAK;AAAA,QAAA,GAAKF;AAAAA,QAAgB,GAAMD,6CAAcM;AAAAA,QAAO;AAAA,MAAA,CAAc;AAAA,IAExE;AAAA,IACA,KAAK,iBAAiB;AACpB,iCACG,eAAa;AAAA,QAAA,GACRL;AAAAA,QAAgB,GAChBD,6CAAcO;AAAAA,QAClB;AAAA,MAAA,CACA;AAAA,IAEN;AAAA,IACA,KAAK,WAAW;AACd,iCAEG,aAAW;AAAA,QAAA,GACNN;AAAAA,QAAgB,GAChBD,6CAAcQ;AAAAA,QAClB;AAAA,MAAA,CAAW;AAAA,IAGjB;AAAA,IACA,SAAS;AACP,YAAMC,yBAA0B;AACV;AACd,cAAA,IAAIJ,MAAMI,sBAAsB;AAAA,MAIxC;AAAA,IACF;AAAA,EAAC;AAEL;"}
|
|
@@ -47,9 +47,9 @@ function MediaFile({
|
|
|
47
47
|
});
|
|
48
48
|
}
|
|
49
49
|
default: {
|
|
50
|
-
const typenameMissingMessage = `<MediaFile /> requires the '__typename' property to exist on the 'data' prop in order to
|
|
50
|
+
const typenameMissingMessage = `<MediaFile /> requires the '__typename' property to exist on the 'data' prop in order to render the matching sub-component for this type of media.`;
|
|
51
51
|
{
|
|
52
|
-
console.error(typenameMissingMessage);
|
|
52
|
+
console.error(`${typenameMissingMessage} Rendering 'null' by default`);
|
|
53
53
|
return null;
|
|
54
54
|
}
|
|
55
55
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MediaFile.js","sources":["../../src/MediaFile.tsx"],"sourcesContent":["import {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';\nimport type {ModelViewerElement} from '@google/model-viewer/lib/model-viewer.js';\n\ntype BaseProps = React.HTMLAttributes<\n HTMLImageElement | HTMLVideoElement | HTMLIFrameElement | ModelViewerElement\n>;\nexport interface MediaFileProps extends BaseProps {\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
|
|
1
|
+
{"version":3,"file":"MediaFile.js","sources":["../../src/MediaFile.tsx"],"sourcesContent":["import {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';\nimport type {ModelViewerElement} from '@google/model-viewer/lib/model-viewer.js';\n\ntype BaseProps = React.HTMLAttributes<\n HTMLImageElement | HTMLVideoElement | HTMLIFrameElement | ModelViewerElement\n>;\nexport interface MediaFileProps extends BaseProps {\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 // @ts-expect-error There are issues with the inferred HTML attribute types here for ModelViewer (and contentEditable), but I think that's a little bit beyond me at the moment\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 render the matching sub-component for this type of media.`;\n if (__HYDROGEN_DEV__) {\n throw new Error(typenameMissingMessage);\n } else {\n console.error(`${typenameMissingMessage} Rendering 'null' by default`);\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":";;;;;;;AAmCO,SAASA,UAAU;AAAA,EACxBC;AAAAA,EACAC;AAAAA,KACGC;AACW,GAAG;AACjB,UAAQF,KAAKG,YAAU;AAAA,IACrB,KAAK,cAAc;AACb,UAAA,CAACH,KAAKI,OAAO;AACf,cAAMC,cAAe;AAGd;AACLC,kBAAQC,KAAKF,WAAW;AACjB,iBAAA;AAAA,QACT;AAAA,MACF;AAEA,4CACGG,MAAAA,OAAK;AAAA,QAAA,GACAN;AAAAA,QAAgB,GAChBD,6CAAcG;AAAAA,QAClB,MAAMJ,KAAKI;AAAAA,MAAAA,CACX;AAAA,IAEN;AAAA,IACA,KAAK,SAAS;AACZ,4CACGK,MAAAA,OAAK;AAAA,QAAA,GAAKP;AAAAA,QAAgB,GAAMD,6CAAcS;AAAAA,QAAO;AAAA,MAAA,CAAc;AAAA,IAExE;AAAA,IACA,KAAK,iBAAiB;AACpB,4CACGC,cAAAA,eAAa;AAAA,QAAA,GACRT;AAAAA,QAAgB,GAChBD,6CAAcW;AAAAA,QAClB;AAAA,MAAA,CACA;AAAA,IAEN;AAAA,IACA,KAAK,WAAW;AACd,4CAEGC,YAAAA,aAAW;AAAA,QAAA,GACNX;AAAAA,QAAgB,GAChBD,6CAAca;AAAAA,QAClB;AAAA,MAAA,CAAW;AAAA,IAGjB;AAAA,IACA,SAAS;AACP,YAAMC,yBAA0B;AAGzB;AACGC,gBAAAA,MAAO,GAAED,qDAAqD;AAC/D,eAAA;AAAA,MACT;AAAA,IACF;AAAA,EAAC;AAEL;;"}
|
|
@@ -45,9 +45,9 @@ function MediaFile({
|
|
|
45
45
|
});
|
|
46
46
|
}
|
|
47
47
|
default: {
|
|
48
|
-
const typenameMissingMessage = `<MediaFile /> requires the '__typename' property to exist on the 'data' prop in order to
|
|
48
|
+
const typenameMissingMessage = `<MediaFile /> requires the '__typename' property to exist on the 'data' prop in order to render the matching sub-component for this type of media.`;
|
|
49
49
|
{
|
|
50
|
-
console.error(typenameMissingMessage);
|
|
50
|
+
console.error(`${typenameMissingMessage} Rendering 'null' by default`);
|
|
51
51
|
return null;
|
|
52
52
|
}
|
|
53
53
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MediaFile.mjs","sources":["../../src/MediaFile.tsx"],"sourcesContent":["import {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';\nimport type {ModelViewerElement} from '@google/model-viewer/lib/model-viewer.js';\n\ntype BaseProps = React.HTMLAttributes<\n HTMLImageElement | HTMLVideoElement | HTMLIFrameElement | ModelViewerElement\n>;\nexport interface MediaFileProps extends BaseProps {\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
|
|
1
|
+
{"version":3,"file":"MediaFile.mjs","sources":["../../src/MediaFile.tsx"],"sourcesContent":["import {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';\nimport type {ModelViewerElement} from '@google/model-viewer/lib/model-viewer.js';\n\ntype BaseProps = React.HTMLAttributes<\n HTMLImageElement | HTMLVideoElement | HTMLIFrameElement | ModelViewerElement\n>;\nexport interface MediaFileProps extends BaseProps {\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 // @ts-expect-error There are issues with the inferred HTML attribute types here for ModelViewer (and contentEditable), but I think that's a little bit beyond me at the moment\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 render the matching sub-component for this type of media.`;\n if (__HYDROGEN_DEV__) {\n throw new Error(typenameMissingMessage);\n } else {\n console.error(`${typenameMissingMessage} Rendering 'null' by default`);\n return null;\n }\n }\n }\n}\n"],"names":["MediaFile","data","mediaOptions","passthroughProps","__typename","image","noDataImage","console","warn","video","externalVideo","modelViewer","typenameMissingMessage","error"],"mappings":";;;;;AAmCO,SAASA,UAAU;AAAA,EACxBC;AAAAA,EACAC;AAAAA,KACGC;AACW,GAAG;AACjB,UAAQF,KAAKG,YAAU;AAAA,IACrB,KAAK,cAAc;AACb,UAAA,CAACH,KAAKI,OAAO;AACf,cAAMC,cAAe;AAGd;AACLC,kBAAQC,KAAKF,WAAW;AACjB,iBAAA;AAAA,QACT;AAAA,MACF;AAEA,iCACG,OAAK;AAAA,QAAA,GACAH;AAAAA,QAAgB,GAChBD,6CAAcG;AAAAA,QAClB,MAAMJ,KAAKI;AAAAA,MAAAA,CACX;AAAA,IAEN;AAAA,IACA,KAAK,SAAS;AACZ,iCACG,OAAK;AAAA,QAAA,GAAKF;AAAAA,QAAgB,GAAMD,6CAAcO;AAAAA,QAAO;AAAA,MAAA,CAAc;AAAA,IAExE;AAAA,IACA,KAAK,iBAAiB;AACpB,iCACG,eAAa;AAAA,QAAA,GACRN;AAAAA,QAAgB,GAChBD,6CAAcQ;AAAAA,QAClB;AAAA,MAAA,CACA;AAAA,IAEN;AAAA,IACA,KAAK,WAAW;AACd,iCAEG,aAAW;AAAA,QAAA,GACNP;AAAAA,QAAgB,GAChBD,6CAAcS;AAAAA,QAClB;AAAA,MAAA,CAAW;AAAA,IAGjB;AAAA,IACA,SAAS;AACP,YAAMC,yBAA0B;AAGzB;AACGC,gBAAAA,MAAO,GAAED,qDAAqD;AAC/D,eAAA;AAAA,MACT;AAAA,IACF;AAAA,EAAC;AAEL;"}
|
|
@@ -14,13 +14,13 @@ export interface MediaFileProps extends BaseProps {
|
|
|
14
14
|
/** The options for the `Image`, `Video`, or `ExternalVideo` components. */
|
|
15
15
|
mediaOptions?: {
|
|
16
16
|
/** Props that will only apply when an `<Image />` is rendered */
|
|
17
|
-
image
|
|
17
|
+
image?: Omit<ShopifyImageProps, 'data'>;
|
|
18
18
|
/** Props that will only apply when a `<Video />` is rendered */
|
|
19
|
-
video
|
|
19
|
+
video?: Omit<React.ComponentProps<typeof Video>, 'data'>;
|
|
20
20
|
/** Props that will only apply when an `<ExternalVideo />` is rendered */
|
|
21
|
-
externalVideo
|
|
21
|
+
externalVideo?: Omit<React.ComponentProps<typeof ExternalVideo>['options'], 'data'>;
|
|
22
22
|
/** Props that will only apply when a `<ModelViewer />` is rendered */
|
|
23
|
-
modelViewer
|
|
23
|
+
modelViewer?: Omit<typeof ModelViewer, 'data'>;
|
|
24
24
|
};
|
|
25
25
|
}
|
|
26
26
|
/**
|
|
@@ -2744,7 +2744,7 @@ fragment ImageFragment on Image {
|
|
|
2744
2744
|
});
|
|
2745
2745
|
}
|
|
2746
2746
|
default: {
|
|
2747
|
-
const typenameMissingMessage = `<MediaFile /> requires the '__typename' property to exist on the 'data' prop in order to
|
|
2747
|
+
const typenameMissingMessage = `<MediaFile /> requires the '__typename' property to exist on the 'data' prop in order to render the matching sub-component for this type of media.`;
|
|
2748
2748
|
{
|
|
2749
2749
|
throw new Error(typenameMissingMessage);
|
|
2750
2750
|
}
|