@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,288 @@
|
|
|
1
|
+
import { useMemo } from "react";
|
|
2
|
+
import { useShop } from "./ShopifyProvider.js";
|
|
3
|
+
import { Image } from "./Image.js";
|
|
4
|
+
import { Video } from "./Video.js";
|
|
5
|
+
import { flattenConnection } from "./flatten-connection.js";
|
|
6
|
+
import { jsx } from "react/jsx-runtime";
|
|
7
|
+
function Metafield(props) {
|
|
8
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _i;
|
|
9
|
+
const {
|
|
10
|
+
data,
|
|
11
|
+
as,
|
|
12
|
+
...passthroughProps
|
|
13
|
+
} = props;
|
|
14
|
+
const {
|
|
15
|
+
locale
|
|
16
|
+
} = useShop();
|
|
17
|
+
const parsedMetafield = useMemo(() => parseMetafield(data), [data]);
|
|
18
|
+
if (!parsedMetafield) {
|
|
19
|
+
const noDataPropWarning = `<Metafield/>: nothing was passed to the data prop 'data'. Rendering 'null'`;
|
|
20
|
+
{
|
|
21
|
+
console.warn(noDataPropWarning);
|
|
22
|
+
}
|
|
23
|
+
return null;
|
|
24
|
+
}
|
|
25
|
+
if (parsedMetafield.value === null || parsedMetafield.value === void 0) {
|
|
26
|
+
const noValueWarning = `<Metafield/>: No metafield value for metafield ${(_a = parsedMetafield.id) != null ? _a : parsedMetafield.key}. Rendering 'null'`;
|
|
27
|
+
{
|
|
28
|
+
console.warn(noValueWarning);
|
|
29
|
+
}
|
|
30
|
+
return null;
|
|
31
|
+
}
|
|
32
|
+
switch (parsedMetafield.type) {
|
|
33
|
+
case "date": {
|
|
34
|
+
const Wrapper2 = as != null ? as : "time";
|
|
35
|
+
return /* @__PURE__ */ jsx(Wrapper2, {
|
|
36
|
+
...passthroughProps,
|
|
37
|
+
children: parsedMetafield.value.toLocaleDateString(locale)
|
|
38
|
+
});
|
|
39
|
+
}
|
|
40
|
+
case "date_time": {
|
|
41
|
+
const Wrapper2 = as != null ? as : "time";
|
|
42
|
+
return /* @__PURE__ */ jsx(Wrapper2, {
|
|
43
|
+
...passthroughProps,
|
|
44
|
+
children: parsedMetafield.value.toLocaleString(locale)
|
|
45
|
+
});
|
|
46
|
+
}
|
|
47
|
+
case "weight":
|
|
48
|
+
case "dimension":
|
|
49
|
+
case "volume": {
|
|
50
|
+
const Wrapper2 = as != null ? as : "span";
|
|
51
|
+
return /* @__PURE__ */ jsx(Wrapper2, {
|
|
52
|
+
...passthroughProps,
|
|
53
|
+
children: getMeasurementAsString(parsedMetafield.value, locale)
|
|
54
|
+
});
|
|
55
|
+
}
|
|
56
|
+
case "rating": {
|
|
57
|
+
const Wrapper2 = as != null ? as : "span";
|
|
58
|
+
return /* @__PURE__ */ jsx(Wrapper2, {
|
|
59
|
+
...passthroughProps,
|
|
60
|
+
children: parsedMetafield.value.value
|
|
61
|
+
});
|
|
62
|
+
}
|
|
63
|
+
case "single_line_text_field": {
|
|
64
|
+
const Wrapper2 = as != null ? as : "span";
|
|
65
|
+
return /* @__PURE__ */ jsx(Wrapper2, {
|
|
66
|
+
...passthroughProps,
|
|
67
|
+
dangerouslySetInnerHTML: {
|
|
68
|
+
__html: parsedMetafield.value
|
|
69
|
+
}
|
|
70
|
+
});
|
|
71
|
+
}
|
|
72
|
+
case "multi_line_text_field": {
|
|
73
|
+
const Wrapper2 = as != null ? as : "div";
|
|
74
|
+
return /* @__PURE__ */ jsx(Wrapper2, {
|
|
75
|
+
...passthroughProps,
|
|
76
|
+
dangerouslySetInnerHTML: {
|
|
77
|
+
__html: parsedMetafield.value.split("\n").join("<br/>")
|
|
78
|
+
}
|
|
79
|
+
});
|
|
80
|
+
}
|
|
81
|
+
case "url": {
|
|
82
|
+
const protocolLessUrl = new URL(parsedMetafield.value);
|
|
83
|
+
return /* @__PURE__ */ jsx("a", {
|
|
84
|
+
href: protocolLessUrl.href.replace(protocolLessUrl.protocol, ""),
|
|
85
|
+
...passthroughProps,
|
|
86
|
+
children: parsedMetafield.value
|
|
87
|
+
});
|
|
88
|
+
}
|
|
89
|
+
case "json": {
|
|
90
|
+
const Wrapper2 = as != null ? as : "span";
|
|
91
|
+
return /* @__PURE__ */ jsx(Wrapper2, {
|
|
92
|
+
...passthroughProps,
|
|
93
|
+
children: JSON.stringify(parsedMetafield.value)
|
|
94
|
+
});
|
|
95
|
+
}
|
|
96
|
+
case "product_reference":
|
|
97
|
+
case "variant_reference":
|
|
98
|
+
case "page_reference": {
|
|
99
|
+
const Wrapper2 = as != null ? as : "span";
|
|
100
|
+
const ref = parsedMetafield.reference;
|
|
101
|
+
return /* @__PURE__ */ jsx(Wrapper2, {
|
|
102
|
+
...passthroughProps,
|
|
103
|
+
children: (_c = (_b = ref == null ? void 0 : ref.title) != null ? _b : ref == null ? void 0 : ref.id) != null ? _c : ""
|
|
104
|
+
});
|
|
105
|
+
}
|
|
106
|
+
case "list.single_line_text_field": {
|
|
107
|
+
const Wrapper2 = as != null ? as : "ul";
|
|
108
|
+
const refArray = parsedMetafield.references ? flattenConnection(parsedMetafield.references) : [];
|
|
109
|
+
return /* @__PURE__ */ jsx(Wrapper2, {
|
|
110
|
+
...passthroughProps,
|
|
111
|
+
children: refArray.map((ref, index) => /* @__PURE__ */ jsx("li", {
|
|
112
|
+
children: ref
|
|
113
|
+
}, `${ref != null ? ref : ""}-${index}`))
|
|
114
|
+
});
|
|
115
|
+
}
|
|
116
|
+
case "file_reference": {
|
|
117
|
+
if (((_d = parsedMetafield.reference) == null ? void 0 : _d.__typename) === "MediaImage") {
|
|
118
|
+
const ref = parsedMetafield.reference;
|
|
119
|
+
return ref.image ? /* @__PURE__ */ jsx(Image, {
|
|
120
|
+
data: ref.image,
|
|
121
|
+
...passthroughProps
|
|
122
|
+
}) : null;
|
|
123
|
+
} else if (((_e = parsedMetafield.reference) == null ? void 0 : _e.__typename) === "GenericFile") {
|
|
124
|
+
const ref = parsedMetafield.reference;
|
|
125
|
+
return ref.previewImage ? /* @__PURE__ */ jsx("a", {
|
|
126
|
+
href: (_g = (_f = parsedMetafield.reference) == null ? void 0 : _f.url) != null ? _g : "",
|
|
127
|
+
...passthroughProps,
|
|
128
|
+
children: /* @__PURE__ */ jsx(Image, {
|
|
129
|
+
data: ref.previewImage
|
|
130
|
+
})
|
|
131
|
+
}) : null;
|
|
132
|
+
} else if (((_h = parsedMetafield.reference) == null ? void 0 : _h.__typename) === "Video") {
|
|
133
|
+
const ref = parsedMetafield.reference;
|
|
134
|
+
return /* @__PURE__ */ jsx(Video, {
|
|
135
|
+
...passthroughProps,
|
|
136
|
+
data: ref
|
|
137
|
+
});
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
const Wrapper = as != null ? as : "span";
|
|
142
|
+
return /* @__PURE__ */ jsx(Wrapper, {
|
|
143
|
+
...passthroughProps,
|
|
144
|
+
children: (_i = parsedMetafield.value) == null ? void 0 : _i.toString()
|
|
145
|
+
});
|
|
146
|
+
}
|
|
147
|
+
function parseMetafield(metafield) {
|
|
148
|
+
if (!metafield) {
|
|
149
|
+
return null;
|
|
150
|
+
}
|
|
151
|
+
return {
|
|
152
|
+
...metafield,
|
|
153
|
+
value: parseMetafieldValue(metafield)
|
|
154
|
+
};
|
|
155
|
+
}
|
|
156
|
+
function parseMetafieldValue(metafield) {
|
|
157
|
+
if (!metafield) {
|
|
158
|
+
return null;
|
|
159
|
+
}
|
|
160
|
+
if (metafield.value === null || metafield.value === void 0) {
|
|
161
|
+
return metafield.value;
|
|
162
|
+
}
|
|
163
|
+
switch (metafield.type) {
|
|
164
|
+
case "boolean":
|
|
165
|
+
return metafield.value === "true";
|
|
166
|
+
case "number_integer":
|
|
167
|
+
return parseInt(metafield.value);
|
|
168
|
+
case "number_decimal":
|
|
169
|
+
return parseFloat(metafield.value);
|
|
170
|
+
case "date":
|
|
171
|
+
case "date_time":
|
|
172
|
+
return new Date(metafield.value);
|
|
173
|
+
case "json":
|
|
174
|
+
case "weight":
|
|
175
|
+
case "dimension":
|
|
176
|
+
case "volume":
|
|
177
|
+
case "rating":
|
|
178
|
+
return parseJSON(metafield.value);
|
|
179
|
+
case "color":
|
|
180
|
+
case "single_line_text_field":
|
|
181
|
+
case "multi_line_text_field":
|
|
182
|
+
case "product_reference":
|
|
183
|
+
case "page_reference":
|
|
184
|
+
case "variant_reference":
|
|
185
|
+
case "file_reference":
|
|
186
|
+
case "url":
|
|
187
|
+
default:
|
|
188
|
+
return metafield.value;
|
|
189
|
+
}
|
|
190
|
+
}
|
|
191
|
+
function parseJSON(json) {
|
|
192
|
+
if (String(json).includes("__proto__")) {
|
|
193
|
+
return JSON.parse(json, (k, v) => {
|
|
194
|
+
if (k !== "__proto__")
|
|
195
|
+
return v;
|
|
196
|
+
});
|
|
197
|
+
}
|
|
198
|
+
return JSON.parse(json);
|
|
199
|
+
}
|
|
200
|
+
const UNIT_MAPPING = {
|
|
201
|
+
mm: "millimeter",
|
|
202
|
+
cm: "centimeter",
|
|
203
|
+
m: "meter",
|
|
204
|
+
in: "inch",
|
|
205
|
+
ft: "foot",
|
|
206
|
+
yd: "yard",
|
|
207
|
+
ml: "milliliter",
|
|
208
|
+
l: "liter",
|
|
209
|
+
us_fl_oz: "fluid-ounce",
|
|
210
|
+
us_gal: "gallon",
|
|
211
|
+
kg: "kilogram",
|
|
212
|
+
g: "gram",
|
|
213
|
+
lb: "pound",
|
|
214
|
+
oz: "ounce"
|
|
215
|
+
};
|
|
216
|
+
function getMeasurementAsString(measurement, locale = "en-us", options = {}) {
|
|
217
|
+
let measure = {
|
|
218
|
+
value: measurement.value,
|
|
219
|
+
unit: UNIT_MAPPING[measurement.unit]
|
|
220
|
+
};
|
|
221
|
+
if (measure.unit == null) {
|
|
222
|
+
measure = convertToSupportedUnit(measurement.value, measurement.unit);
|
|
223
|
+
}
|
|
224
|
+
return new Intl.NumberFormat(locale, {
|
|
225
|
+
...options,
|
|
226
|
+
unit: measure.unit,
|
|
227
|
+
style: "unit"
|
|
228
|
+
}).format(measure.value);
|
|
229
|
+
}
|
|
230
|
+
function convertToSupportedUnit(value, unit) {
|
|
231
|
+
switch (unit) {
|
|
232
|
+
case "cl":
|
|
233
|
+
return {
|
|
234
|
+
value: value / 1e3,
|
|
235
|
+
unit: "liter"
|
|
236
|
+
};
|
|
237
|
+
case "m3":
|
|
238
|
+
return {
|
|
239
|
+
value: value * 1e3,
|
|
240
|
+
unit: "liter"
|
|
241
|
+
};
|
|
242
|
+
case "us_pt":
|
|
243
|
+
return {
|
|
244
|
+
value: value * 0.125,
|
|
245
|
+
unit: "gallon"
|
|
246
|
+
};
|
|
247
|
+
case "us_qt":
|
|
248
|
+
return {
|
|
249
|
+
value: value * 0.5,
|
|
250
|
+
unit: "gallon"
|
|
251
|
+
};
|
|
252
|
+
case "us_oz":
|
|
253
|
+
return {
|
|
254
|
+
value: value / 128,
|
|
255
|
+
unit: "gallon"
|
|
256
|
+
};
|
|
257
|
+
case "imp_pt":
|
|
258
|
+
return {
|
|
259
|
+
value: value / 6.661,
|
|
260
|
+
unit: "gallon"
|
|
261
|
+
};
|
|
262
|
+
case "imp_qt":
|
|
263
|
+
return {
|
|
264
|
+
value: value / 3.331,
|
|
265
|
+
unit: "gallon"
|
|
266
|
+
};
|
|
267
|
+
case "imp_gal":
|
|
268
|
+
return {
|
|
269
|
+
value: value / 1.201,
|
|
270
|
+
unit: "gallon"
|
|
271
|
+
};
|
|
272
|
+
case "imp_fl_oz":
|
|
273
|
+
return {
|
|
274
|
+
value: value * 0.96076,
|
|
275
|
+
unit: "fluid-ounce"
|
|
276
|
+
};
|
|
277
|
+
default:
|
|
278
|
+
throw new Error(`Unit not supported: ${unit}`);
|
|
279
|
+
}
|
|
280
|
+
}
|
|
281
|
+
export {
|
|
282
|
+
Metafield,
|
|
283
|
+
getMeasurementAsString,
|
|
284
|
+
parseJSON,
|
|
285
|
+
parseMetafield,
|
|
286
|
+
parseMetafieldValue
|
|
287
|
+
};
|
|
288
|
+
//# sourceMappingURL=Metafield.js.map
|
|
@@ -0,0 +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 // @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","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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"}
|
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
|
|
3
|
+
const react = require("react");
|
|
4
|
+
const loadScript = require("./load-script.cjs");
|
|
5
|
+
const jsxRuntime = require("react/jsx-runtime");
|
|
6
|
+
function ModelViewer(props) {
|
|
7
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
|
|
8
|
+
const [modelViewer, setModelViewer] = react.useState(void 0);
|
|
9
|
+
const callbackRef = react.useCallback((node) => {
|
|
10
|
+
setModelViewer(node);
|
|
11
|
+
}, []);
|
|
12
|
+
const {
|
|
13
|
+
data,
|
|
14
|
+
children,
|
|
15
|
+
className,
|
|
16
|
+
...passthroughProps
|
|
17
|
+
} = props;
|
|
18
|
+
const modelViewerLoadedStatus = loadScript.useLoadScript("https://unpkg.com/@google/model-viewer@v1.12.1/dist/model-viewer.min.js", {
|
|
19
|
+
module: true
|
|
20
|
+
});
|
|
21
|
+
react.useEffect(() => {
|
|
22
|
+
if (!modelViewer) {
|
|
23
|
+
return;
|
|
24
|
+
}
|
|
25
|
+
if (passthroughProps.onError)
|
|
26
|
+
modelViewer.addEventListener("error", passthroughProps.onError);
|
|
27
|
+
if (passthroughProps.onLoad)
|
|
28
|
+
modelViewer.addEventListener("load", passthroughProps.onLoad);
|
|
29
|
+
if (passthroughProps.onPreload)
|
|
30
|
+
modelViewer.addEventListener("preload", passthroughProps.onPreload);
|
|
31
|
+
if (passthroughProps.onModelVisibility)
|
|
32
|
+
modelViewer.addEventListener("model-visibility", passthroughProps.onModelVisibility);
|
|
33
|
+
if (passthroughProps.onProgress)
|
|
34
|
+
modelViewer.addEventListener("progress", passthroughProps.onProgress);
|
|
35
|
+
if (passthroughProps.onArStatus)
|
|
36
|
+
modelViewer.addEventListener("ar-status", passthroughProps.onArStatus);
|
|
37
|
+
if (passthroughProps.onArTracking)
|
|
38
|
+
modelViewer.addEventListener("ar-tracking", passthroughProps.onArTracking);
|
|
39
|
+
if (passthroughProps.onQuickLookButtonTapped)
|
|
40
|
+
modelViewer.addEventListener("quick-look-button-tapped", passthroughProps.onQuickLookButtonTapped);
|
|
41
|
+
if (passthroughProps.onCameraChange)
|
|
42
|
+
modelViewer.addEventListener("camera-change", passthroughProps.onCameraChange);
|
|
43
|
+
if (passthroughProps.onEnvironmentChange)
|
|
44
|
+
modelViewer.addEventListener("environment-change", passthroughProps.onEnvironmentChange);
|
|
45
|
+
if (passthroughProps.onPlay)
|
|
46
|
+
modelViewer.addEventListener("play", passthroughProps.onPlay);
|
|
47
|
+
if (passthroughProps.onPause)
|
|
48
|
+
modelViewer.addEventListener("ar-status", passthroughProps.onPause);
|
|
49
|
+
if (passthroughProps.onSceneGraphReady)
|
|
50
|
+
modelViewer.addEventListener("scene-graph-ready", passthroughProps.onSceneGraphReady);
|
|
51
|
+
return () => {
|
|
52
|
+
if (modelViewer == null) {
|
|
53
|
+
return;
|
|
54
|
+
}
|
|
55
|
+
if (passthroughProps.onError)
|
|
56
|
+
modelViewer.removeEventListener("error", passthroughProps.onError);
|
|
57
|
+
if (passthroughProps.onLoad)
|
|
58
|
+
modelViewer.removeEventListener("load", passthroughProps.onLoad);
|
|
59
|
+
if (passthroughProps.onPreload)
|
|
60
|
+
modelViewer.removeEventListener("preload", passthroughProps.onPreload);
|
|
61
|
+
if (passthroughProps.onModelVisibility)
|
|
62
|
+
modelViewer.removeEventListener("model-visibility", passthroughProps.onModelVisibility);
|
|
63
|
+
if (passthroughProps.onProgress)
|
|
64
|
+
modelViewer.removeEventListener("progress", passthroughProps.onProgress);
|
|
65
|
+
if (passthroughProps.onArStatus)
|
|
66
|
+
modelViewer.removeEventListener("ar-status", passthroughProps.onArStatus);
|
|
67
|
+
if (passthroughProps.onArTracking)
|
|
68
|
+
modelViewer.removeEventListener("ar-tracking", passthroughProps.onArTracking);
|
|
69
|
+
if (passthroughProps.onQuickLookButtonTapped)
|
|
70
|
+
modelViewer.removeEventListener("quick-look-button-tapped", passthroughProps.onQuickLookButtonTapped);
|
|
71
|
+
if (passthroughProps.onCameraChange)
|
|
72
|
+
modelViewer.removeEventListener("camera-change", passthroughProps.onCameraChange);
|
|
73
|
+
if (passthroughProps.onEnvironmentChange)
|
|
74
|
+
modelViewer.removeEventListener("environment-change", passthroughProps.onEnvironmentChange);
|
|
75
|
+
if (passthroughProps.onPlay)
|
|
76
|
+
modelViewer.removeEventListener("play", passthroughProps.onPlay);
|
|
77
|
+
if (passthroughProps.onPause)
|
|
78
|
+
modelViewer.removeEventListener("ar-status", passthroughProps.onPause);
|
|
79
|
+
if (passthroughProps.onSceneGraphReady)
|
|
80
|
+
modelViewer.removeEventListener("scene-graph-ready", passthroughProps.onSceneGraphReady);
|
|
81
|
+
};
|
|
82
|
+
}, [modelViewer, passthroughProps.onArStatus, passthroughProps.onArTracking, passthroughProps.onCameraChange, passthroughProps.onEnvironmentChange, passthroughProps.onError, passthroughProps.onLoad, passthroughProps.onModelVisibility, passthroughProps.onPause, passthroughProps.onPlay, passthroughProps.onPreload, passthroughProps.onProgress, passthroughProps.onQuickLookButtonTapped, passthroughProps.onSceneGraphReady]);
|
|
83
|
+
if (modelViewerLoadedStatus !== "done") {
|
|
84
|
+
return null;
|
|
85
|
+
}
|
|
86
|
+
if (!((_b = (_a = data.sources) == null ? void 0 : _a[0]) == null ? void 0 : _b.url)) {
|
|
87
|
+
const sourcesUrlError = `<ModelViewer/> requires 'data.sources' prop to be an array, with an object that has a property 'url' on it. Rendering 'null'`;
|
|
88
|
+
{
|
|
89
|
+
console.error(sourcesUrlError);
|
|
90
|
+
return null;
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
return /* @__PURE__ */ jsxRuntime.jsx("model-viewer", {
|
|
94
|
+
ref: callbackRef,
|
|
95
|
+
...passthroughProps,
|
|
96
|
+
className,
|
|
97
|
+
id: (_c = passthroughProps.id) != null ? _c : data.id,
|
|
98
|
+
src: data.sources[0].url,
|
|
99
|
+
alt: (_d = data.alt) != null ? _d : null,
|
|
100
|
+
"camera-controls": (_e = passthroughProps.cameraControls) != null ? _e : true,
|
|
101
|
+
poster: (_g = passthroughProps.poster || ((_f = data.previewImage) == null ? void 0 : _f.url)) != null ? _g : null,
|
|
102
|
+
autoplay: (_h = passthroughProps.autoplay) != null ? _h : true,
|
|
103
|
+
loading: passthroughProps.loading,
|
|
104
|
+
reveal: passthroughProps.reveal,
|
|
105
|
+
ar: passthroughProps.ar,
|
|
106
|
+
"ar-modes": passthroughProps.arModes,
|
|
107
|
+
"ar-scale": passthroughProps.arScale,
|
|
108
|
+
"ar-placement": passthroughProps.arPlacement,
|
|
109
|
+
"ios-src": passthroughProps.iosSrc,
|
|
110
|
+
"touch-action": passthroughProps.touchAction,
|
|
111
|
+
"disable-zoom": passthroughProps.disableZoom,
|
|
112
|
+
"orbit-sensitivity": passthroughProps.orbitSensitivity,
|
|
113
|
+
"auto-rotate": passthroughProps.autoRotate,
|
|
114
|
+
"auto-rotate-delay": passthroughProps.autoRotateDelay,
|
|
115
|
+
"rotation-per-second": passthroughProps.rotationPerSecond,
|
|
116
|
+
"interaction-policy": passthroughProps.interactionPolicy,
|
|
117
|
+
"interaction-prompt": passthroughProps.interactionPrompt,
|
|
118
|
+
"interaction-prompt-style": passthroughProps.interactionPromptStyle,
|
|
119
|
+
"interaction-prompt-threshold": passthroughProps.interactionPromptThreshold,
|
|
120
|
+
"camera-orbit": passthroughProps.cameraOrbit,
|
|
121
|
+
"camera-target": passthroughProps.cameraTarget,
|
|
122
|
+
"field-of-view": passthroughProps.fieldOfView,
|
|
123
|
+
"max-camera-orbit": passthroughProps.maxCameraOrbit,
|
|
124
|
+
"min-camera-orbit": passthroughProps.minCameraOrbit,
|
|
125
|
+
"max-field-of-view": passthroughProps.maxFieldOfView,
|
|
126
|
+
"min-field-of-view": passthroughProps.minFieldOfView,
|
|
127
|
+
bounds: passthroughProps.bounds,
|
|
128
|
+
"interpolation-decay": (_i = passthroughProps.interpolationDecay) != null ? _i : 100,
|
|
129
|
+
"skybox-image": passthroughProps.skyboxImage,
|
|
130
|
+
"environment-image": passthroughProps.environmentImage,
|
|
131
|
+
exposure: passthroughProps.exposure,
|
|
132
|
+
"shadow-intensity": (_j = passthroughProps.shadowIntensity) != null ? _j : 0,
|
|
133
|
+
"shadow-softness": (_k = passthroughProps.shadowSoftness) != null ? _k : 0,
|
|
134
|
+
"animation-name": passthroughProps.animationName,
|
|
135
|
+
"animation-crossfade-duration": passthroughProps.animationCrossfadeDuration,
|
|
136
|
+
"variant-name": passthroughProps.variantName,
|
|
137
|
+
orientation: passthroughProps.orientation,
|
|
138
|
+
scale: passthroughProps.scale,
|
|
139
|
+
children
|
|
140
|
+
});
|
|
141
|
+
}
|
|
142
|
+
exports.ModelViewer = ModelViewer;
|
|
143
|
+
//# sourceMappingURL=ModelViewer.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ModelViewer.cjs","sources":["../../src/ModelViewer.tsx"],"sourcesContent":["import {useState, useEffect, useCallback} from 'react';\nimport {useLoadScript} from './load-script.js';\nimport type {Model3d} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\nimport type {ModelViewerElement} from '@google/model-viewer/lib/model-viewer.js';\n\ntype PropsWeControl = 'src';\n\ndeclare global {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n interface IntrinsicElements {\n 'model-viewer': PartialDeep<\n ModelViewerElement,\n {recurseIntoArrays: true}\n >;\n }\n }\n}\n\ntype ModelViewerProps = Omit<\n PartialDeep<JSX.IntrinsicElements['model-viewer'], {recurseIntoArrays: true}>,\n PropsWeControl\n> & {\n /** An object with fields that correspond to the Storefront API's [Model3D object](https://shopify.dev/api/storefront/latest/objects/model3d). */\n data: PartialDeep<Model3d, {recurseIntoArrays: true}>;\n /** The callback to invoke when the 'error' event is triggered. Refer to [error in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-error). */\n onError?: (event: Event) => void;\n /** The callback to invoke when the `load` event is triggered. Refer to [load in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-load). */\n onLoad?: (event: Event) => void;\n /** The callback to invoke when the 'preload' event is triggered. Refer to [preload in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-preload). */\n onPreload?: (event: Event) => void;\n /** The callback to invoke when the 'model-visibility' event is triggered. Refer to [model-visibility in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-modelVisibility). */\n onModelVisibility?: (event: Event) => void;\n /** The callback to invoke when the 'progress' event is triggered. Refer to [progress in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-progress). */\n onProgress?: (event: Event) => void;\n /** The callback to invoke when the 'ar-status' event is triggered. Refer to [ar-status in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-events-arStatus). */\n onArStatus?: (event: Event) => void;\n /** The callback to invoke when the 'ar-tracking' event is triggered. Refer to [ar-tracking in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-events-arTracking). */\n onArTracking?: (event: Event) => void;\n /** The callback to invoke when the 'quick-look-button-tapped' event is triggered. Refer to [quick-look-button-tapped in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-events-quickLookButtonTapped). */\n onQuickLookButtonTapped?: (event: Event) => void;\n /** The callback to invoke when the 'camera-change' event is triggered. Refer to [camera-change in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-stagingandcameras-events-cameraChange). */\n onCameraChange?: (event: Event) => void;\n /** The callback to invoke when the 'environment-change' event is triggered. Refer to [environment-change in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-lightingandenv-events-environmentChange). */\n onEnvironmentChange?: (event: Event) => void;\n /** The callback to invoke when the 'play' event is triggered. Refer to [play in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-animation-events-play). */\n onPlay?: (event: Event) => void;\n /** The callback to invoke when the 'pause' event is triggered. Refer to [pause in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-animation-events-pause). */\n onPause?: (event: Event) => void;\n /** The callback to invoke when the 'scene-graph-ready' event is triggered. Refer to [scene-graph-ready in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-scenegraph-events-sceneGraphReady). */\n onSceneGraphReady?: (event: Event) => void;\n};\n\n/**\n * The `ModelViewer` component renders a 3D model (with the `model-viewer` custom element) for\n * the Storefront API's [Model3d object](https://shopify.dev/api/storefront/reference/products/model3d).\n *\n * The `model-viewer` custom element is lazily downloaded through a dynamically-injected `<script type=\"module\">` tag when the `<ModelViewer />` component is rendered\n *\n * ModelViewer is using version `1.21.1` of the `@google/model-viewer` library.\n */\nexport function ModelViewer(props: ModelViewerProps) {\n const [modelViewer, setModelViewer] = useState<undefined | HTMLElement>(\n undefined\n );\n const callbackRef = useCallback((node: HTMLElement) => {\n setModelViewer(node);\n }, []);\n const {data, children, className, ...passthroughProps} = props;\n\n const modelViewerLoadedStatus = useLoadScript(\n 'https://unpkg.com/@google/model-viewer@v1.12.1/dist/model-viewer.min.js',\n {\n module: true,\n }\n );\n\n useEffect(() => {\n if (!modelViewer) {\n return;\n }\n if (passthroughProps.onError)\n modelViewer.addEventListener('error', passthroughProps.onError);\n if (passthroughProps.onLoad)\n modelViewer.addEventListener('load', passthroughProps.onLoad);\n if (passthroughProps.onPreload)\n modelViewer.addEventListener('preload', passthroughProps.onPreload);\n if (passthroughProps.onModelVisibility)\n modelViewer.addEventListener(\n 'model-visibility',\n passthroughProps.onModelVisibility\n );\n if (passthroughProps.onProgress)\n modelViewer.addEventListener('progress', passthroughProps.onProgress);\n if (passthroughProps.onArStatus)\n modelViewer.addEventListener('ar-status', passthroughProps.onArStatus);\n if (passthroughProps.onArTracking)\n modelViewer.addEventListener(\n 'ar-tracking',\n passthroughProps.onArTracking\n );\n if (passthroughProps.onQuickLookButtonTapped)\n modelViewer.addEventListener(\n 'quick-look-button-tapped',\n passthroughProps.onQuickLookButtonTapped\n );\n if (passthroughProps.onCameraChange)\n modelViewer.addEventListener(\n 'camera-change',\n passthroughProps.onCameraChange\n );\n if (passthroughProps.onEnvironmentChange)\n modelViewer.addEventListener(\n 'environment-change',\n passthroughProps.onEnvironmentChange\n );\n if (passthroughProps.onPlay)\n modelViewer.addEventListener('play', passthroughProps.onPlay);\n if (passthroughProps.onPause)\n modelViewer.addEventListener('ar-status', passthroughProps.onPause);\n if (passthroughProps.onSceneGraphReady)\n modelViewer.addEventListener(\n 'scene-graph-ready',\n passthroughProps.onSceneGraphReady\n );\n\n return () => {\n if (modelViewer == null) {\n return;\n }\n if (passthroughProps.onError)\n modelViewer.removeEventListener('error', passthroughProps.onError);\n if (passthroughProps.onLoad)\n modelViewer.removeEventListener('load', passthroughProps.onLoad);\n if (passthroughProps.onPreload)\n modelViewer.removeEventListener('preload', passthroughProps.onPreload);\n if (passthroughProps.onModelVisibility)\n modelViewer.removeEventListener(\n 'model-visibility',\n passthroughProps.onModelVisibility\n );\n if (passthroughProps.onProgress)\n modelViewer.removeEventListener(\n 'progress',\n passthroughProps.onProgress\n );\n if (passthroughProps.onArStatus)\n modelViewer.removeEventListener(\n 'ar-status',\n passthroughProps.onArStatus\n );\n if (passthroughProps.onArTracking)\n modelViewer.removeEventListener(\n 'ar-tracking',\n passthroughProps.onArTracking\n );\n if (passthroughProps.onQuickLookButtonTapped)\n modelViewer.removeEventListener(\n 'quick-look-button-tapped',\n passthroughProps.onQuickLookButtonTapped\n );\n if (passthroughProps.onCameraChange)\n modelViewer.removeEventListener(\n 'camera-change',\n passthroughProps.onCameraChange\n );\n if (passthroughProps.onEnvironmentChange)\n modelViewer.removeEventListener(\n 'environment-change',\n passthroughProps.onEnvironmentChange\n );\n if (passthroughProps.onPlay)\n modelViewer.removeEventListener('play', passthroughProps.onPlay);\n if (passthroughProps.onPause)\n modelViewer.removeEventListener('ar-status', passthroughProps.onPause);\n if (passthroughProps.onSceneGraphReady)\n modelViewer.removeEventListener(\n 'scene-graph-ready',\n passthroughProps.onSceneGraphReady\n );\n };\n }, [\n modelViewer,\n passthroughProps.onArStatus,\n passthroughProps.onArTracking,\n passthroughProps.onCameraChange,\n passthroughProps.onEnvironmentChange,\n passthroughProps.onError,\n passthroughProps.onLoad,\n passthroughProps.onModelVisibility,\n passthroughProps.onPause,\n passthroughProps.onPlay,\n passthroughProps.onPreload,\n passthroughProps.onProgress,\n passthroughProps.onQuickLookButtonTapped,\n passthroughProps.onSceneGraphReady,\n ]);\n\n if (modelViewerLoadedStatus !== 'done') {\n // TODO: What do we want to display while the model-viewer library loads?\n return null;\n }\n\n if (!data.sources?.[0]?.url) {\n const sourcesUrlError = `<ModelViewer/> requires 'data.sources' prop to be an array, with an object that has a property 'url' on it. Rendering 'null'`;\n if (__HYDROGEN_DEV__) {\n throw new Error(sourcesUrlError);\n } else {\n console.error(sourcesUrlError);\n return null;\n }\n }\n\n if (__HYDROGEN_DEV__ && !data.alt) {\n console.warn(\n `<ModelViewer/> requires the 'data.alt' prop for accessibility`\n );\n }\n\n return (\n <model-viewer\n // @ts-expect-error ref should exist\n ref={callbackRef}\n {...passthroughProps}\n className={className}\n id={passthroughProps.id ?? data.id}\n src={data.sources[0].url}\n alt={data.alt ?? null}\n camera-controls={passthroughProps.cameraControls ?? true}\n poster={(passthroughProps.poster || data.previewImage?.url) ?? null}\n autoplay={passthroughProps.autoplay ?? true}\n loading={passthroughProps.loading}\n reveal={passthroughProps.reveal}\n ar={passthroughProps.ar}\n ar-modes={passthroughProps.arModes}\n ar-scale={passthroughProps.arScale}\n // @ts-expect-error arPlacement should exist as a type, not sure why it doesn't. https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-attributes-arPlacement\n ar-placement={passthroughProps.arPlacement}\n ios-src={passthroughProps.iosSrc}\n touch-action={passthroughProps.touchAction}\n disable-zoom={passthroughProps.disableZoom}\n orbit-sensitivity={passthroughProps.orbitSensitivity}\n auto-rotate={passthroughProps.autoRotate}\n auto-rotate-delay={passthroughProps.autoRotateDelay}\n // @ts-expect-error rotationPerSecond should exist as a type, not sure why it doesn't. https://modelviewer.dev/docs/index.html#entrydocs-stagingandcameras-attributes-rotationPerSecond\n rotation-per-second={passthroughProps.rotationPerSecond}\n interaction-policy={passthroughProps.interactionPolicy}\n interaction-prompt={passthroughProps.interactionPrompt}\n interaction-prompt-style={passthroughProps.interactionPromptStyle}\n interaction-prompt-threshold={passthroughProps.interactionPromptThreshold}\n camera-orbit={passthroughProps.cameraOrbit}\n camera-target={passthroughProps.cameraTarget}\n field-of-view={passthroughProps.fieldOfView}\n max-camera-orbit={passthroughProps.maxCameraOrbit}\n min-camera-orbit={passthroughProps.minCameraOrbit}\n max-field-of-view={passthroughProps.maxFieldOfView}\n min-field-of-view={passthroughProps.minFieldOfView}\n bounds={passthroughProps.bounds}\n interpolation-decay={passthroughProps.interpolationDecay ?? 100}\n skybox-image={passthroughProps.skyboxImage}\n environment-image={passthroughProps.environmentImage}\n exposure={passthroughProps.exposure}\n shadow-intensity={passthroughProps.shadowIntensity ?? 0}\n shadow-softness={passthroughProps.shadowSoftness ?? 0}\n animation-name={passthroughProps.animationName}\n animation-crossfade-duration={passthroughProps.animationCrossfadeDuration}\n variant-name={passthroughProps.variantName}\n orientation={passthroughProps.orientation}\n scale={passthroughProps.scale}\n >\n {children}\n </model-viewer>\n );\n}\n"],"names":["ModelViewer","props","modelViewer","setModelViewer","useState","undefined","callbackRef","useCallback","node","data","children","className","passthroughProps","modelViewerLoadedStatus","useLoadScript","module","useEffect","onError","addEventListener","onLoad","onPreload","onModelVisibility","onProgress","onArStatus","onArTracking","onQuickLookButtonTapped","onCameraChange","onEnvironmentChange","onPlay","onPause","onSceneGraphReady","removeEventListener","sources","url","sourcesUrlError","console","error","id","alt","cameraControls","poster","previewImage","autoplay","loading","reveal","ar","arModes","arScale","arPlacement","iosSrc","touchAction","disableZoom","orbitSensitivity","autoRotate","autoRotateDelay","rotationPerSecond","interactionPolicy","interactionPrompt","interactionPromptStyle","interactionPromptThreshold","cameraOrbit","cameraTarget","fieldOfView","maxCameraOrbit","minCameraOrbit","maxFieldOfView","minFieldOfView","bounds","interpolationDecay","skyboxImage","environmentImage","exposure","shadowIntensity","shadowSoftness","animationName","animationCrossfadeDuration","variantName","orientation","scale"],"mappings":"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"}
|
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
import { useState, useCallback, useEffect } from "react";
|
|
2
|
+
import { useLoadScript } from "./load-script.js";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
function ModelViewer(props) {
|
|
5
|
+
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
|
+
setModelViewer(node);
|
|
9
|
+
}, []);
|
|
10
|
+
const {
|
|
11
|
+
data,
|
|
12
|
+
children,
|
|
13
|
+
className,
|
|
14
|
+
...passthroughProps
|
|
15
|
+
} = props;
|
|
16
|
+
const modelViewerLoadedStatus = useLoadScript("https://unpkg.com/@google/model-viewer@v1.12.1/dist/model-viewer.min.js", {
|
|
17
|
+
module: true
|
|
18
|
+
});
|
|
19
|
+
useEffect(() => {
|
|
20
|
+
if (!modelViewer) {
|
|
21
|
+
return;
|
|
22
|
+
}
|
|
23
|
+
if (passthroughProps.onError)
|
|
24
|
+
modelViewer.addEventListener("error", passthroughProps.onError);
|
|
25
|
+
if (passthroughProps.onLoad)
|
|
26
|
+
modelViewer.addEventListener("load", passthroughProps.onLoad);
|
|
27
|
+
if (passthroughProps.onPreload)
|
|
28
|
+
modelViewer.addEventListener("preload", passthroughProps.onPreload);
|
|
29
|
+
if (passthroughProps.onModelVisibility)
|
|
30
|
+
modelViewer.addEventListener("model-visibility", passthroughProps.onModelVisibility);
|
|
31
|
+
if (passthroughProps.onProgress)
|
|
32
|
+
modelViewer.addEventListener("progress", passthroughProps.onProgress);
|
|
33
|
+
if (passthroughProps.onArStatus)
|
|
34
|
+
modelViewer.addEventListener("ar-status", passthroughProps.onArStatus);
|
|
35
|
+
if (passthroughProps.onArTracking)
|
|
36
|
+
modelViewer.addEventListener("ar-tracking", passthroughProps.onArTracking);
|
|
37
|
+
if (passthroughProps.onQuickLookButtonTapped)
|
|
38
|
+
modelViewer.addEventListener("quick-look-button-tapped", passthroughProps.onQuickLookButtonTapped);
|
|
39
|
+
if (passthroughProps.onCameraChange)
|
|
40
|
+
modelViewer.addEventListener("camera-change", passthroughProps.onCameraChange);
|
|
41
|
+
if (passthroughProps.onEnvironmentChange)
|
|
42
|
+
modelViewer.addEventListener("environment-change", passthroughProps.onEnvironmentChange);
|
|
43
|
+
if (passthroughProps.onPlay)
|
|
44
|
+
modelViewer.addEventListener("play", passthroughProps.onPlay);
|
|
45
|
+
if (passthroughProps.onPause)
|
|
46
|
+
modelViewer.addEventListener("ar-status", passthroughProps.onPause);
|
|
47
|
+
if (passthroughProps.onSceneGraphReady)
|
|
48
|
+
modelViewer.addEventListener("scene-graph-ready", passthroughProps.onSceneGraphReady);
|
|
49
|
+
return () => {
|
|
50
|
+
if (modelViewer == null) {
|
|
51
|
+
return;
|
|
52
|
+
}
|
|
53
|
+
if (passthroughProps.onError)
|
|
54
|
+
modelViewer.removeEventListener("error", passthroughProps.onError);
|
|
55
|
+
if (passthroughProps.onLoad)
|
|
56
|
+
modelViewer.removeEventListener("load", passthroughProps.onLoad);
|
|
57
|
+
if (passthroughProps.onPreload)
|
|
58
|
+
modelViewer.removeEventListener("preload", passthroughProps.onPreload);
|
|
59
|
+
if (passthroughProps.onModelVisibility)
|
|
60
|
+
modelViewer.removeEventListener("model-visibility", passthroughProps.onModelVisibility);
|
|
61
|
+
if (passthroughProps.onProgress)
|
|
62
|
+
modelViewer.removeEventListener("progress", passthroughProps.onProgress);
|
|
63
|
+
if (passthroughProps.onArStatus)
|
|
64
|
+
modelViewer.removeEventListener("ar-status", passthroughProps.onArStatus);
|
|
65
|
+
if (passthroughProps.onArTracking)
|
|
66
|
+
modelViewer.removeEventListener("ar-tracking", passthroughProps.onArTracking);
|
|
67
|
+
if (passthroughProps.onQuickLookButtonTapped)
|
|
68
|
+
modelViewer.removeEventListener("quick-look-button-tapped", passthroughProps.onQuickLookButtonTapped);
|
|
69
|
+
if (passthroughProps.onCameraChange)
|
|
70
|
+
modelViewer.removeEventListener("camera-change", passthroughProps.onCameraChange);
|
|
71
|
+
if (passthroughProps.onEnvironmentChange)
|
|
72
|
+
modelViewer.removeEventListener("environment-change", passthroughProps.onEnvironmentChange);
|
|
73
|
+
if (passthroughProps.onPlay)
|
|
74
|
+
modelViewer.removeEventListener("play", passthroughProps.onPlay);
|
|
75
|
+
if (passthroughProps.onPause)
|
|
76
|
+
modelViewer.removeEventListener("ar-status", passthroughProps.onPause);
|
|
77
|
+
if (passthroughProps.onSceneGraphReady)
|
|
78
|
+
modelViewer.removeEventListener("scene-graph-ready", passthroughProps.onSceneGraphReady);
|
|
79
|
+
};
|
|
80
|
+
}, [modelViewer, passthroughProps.onArStatus, passthroughProps.onArTracking, passthroughProps.onCameraChange, passthroughProps.onEnvironmentChange, passthroughProps.onError, passthroughProps.onLoad, passthroughProps.onModelVisibility, passthroughProps.onPause, passthroughProps.onPlay, passthroughProps.onPreload, passthroughProps.onProgress, passthroughProps.onQuickLookButtonTapped, passthroughProps.onSceneGraphReady]);
|
|
81
|
+
if (modelViewerLoadedStatus !== "done") {
|
|
82
|
+
return null;
|
|
83
|
+
}
|
|
84
|
+
if (!((_b = (_a = data.sources) == null ? void 0 : _a[0]) == null ? void 0 : _b.url)) {
|
|
85
|
+
const sourcesUrlError = `<ModelViewer/> requires 'data.sources' prop to be an array, with an object that has a property 'url' on it. Rendering 'null'`;
|
|
86
|
+
{
|
|
87
|
+
console.error(sourcesUrlError);
|
|
88
|
+
return null;
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
return /* @__PURE__ */ jsx("model-viewer", {
|
|
92
|
+
ref: callbackRef,
|
|
93
|
+
...passthroughProps,
|
|
94
|
+
className,
|
|
95
|
+
id: (_c = passthroughProps.id) != null ? _c : data.id,
|
|
96
|
+
src: data.sources[0].url,
|
|
97
|
+
alt: (_d = data.alt) != null ? _d : null,
|
|
98
|
+
"camera-controls": (_e = passthroughProps.cameraControls) != null ? _e : true,
|
|
99
|
+
poster: (_g = passthroughProps.poster || ((_f = data.previewImage) == null ? void 0 : _f.url)) != null ? _g : null,
|
|
100
|
+
autoplay: (_h = passthroughProps.autoplay) != null ? _h : true,
|
|
101
|
+
loading: passthroughProps.loading,
|
|
102
|
+
reveal: passthroughProps.reveal,
|
|
103
|
+
ar: passthroughProps.ar,
|
|
104
|
+
"ar-modes": passthroughProps.arModes,
|
|
105
|
+
"ar-scale": passthroughProps.arScale,
|
|
106
|
+
"ar-placement": passthroughProps.arPlacement,
|
|
107
|
+
"ios-src": passthroughProps.iosSrc,
|
|
108
|
+
"touch-action": passthroughProps.touchAction,
|
|
109
|
+
"disable-zoom": passthroughProps.disableZoom,
|
|
110
|
+
"orbit-sensitivity": passthroughProps.orbitSensitivity,
|
|
111
|
+
"auto-rotate": passthroughProps.autoRotate,
|
|
112
|
+
"auto-rotate-delay": passthroughProps.autoRotateDelay,
|
|
113
|
+
"rotation-per-second": passthroughProps.rotationPerSecond,
|
|
114
|
+
"interaction-policy": passthroughProps.interactionPolicy,
|
|
115
|
+
"interaction-prompt": passthroughProps.interactionPrompt,
|
|
116
|
+
"interaction-prompt-style": passthroughProps.interactionPromptStyle,
|
|
117
|
+
"interaction-prompt-threshold": passthroughProps.interactionPromptThreshold,
|
|
118
|
+
"camera-orbit": passthroughProps.cameraOrbit,
|
|
119
|
+
"camera-target": passthroughProps.cameraTarget,
|
|
120
|
+
"field-of-view": passthroughProps.fieldOfView,
|
|
121
|
+
"max-camera-orbit": passthroughProps.maxCameraOrbit,
|
|
122
|
+
"min-camera-orbit": passthroughProps.minCameraOrbit,
|
|
123
|
+
"max-field-of-view": passthroughProps.maxFieldOfView,
|
|
124
|
+
"min-field-of-view": passthroughProps.minFieldOfView,
|
|
125
|
+
bounds: passthroughProps.bounds,
|
|
126
|
+
"interpolation-decay": (_i = passthroughProps.interpolationDecay) != null ? _i : 100,
|
|
127
|
+
"skybox-image": passthroughProps.skyboxImage,
|
|
128
|
+
"environment-image": passthroughProps.environmentImage,
|
|
129
|
+
exposure: passthroughProps.exposure,
|
|
130
|
+
"shadow-intensity": (_j = passthroughProps.shadowIntensity) != null ? _j : 0,
|
|
131
|
+
"shadow-softness": (_k = passthroughProps.shadowSoftness) != null ? _k : 0,
|
|
132
|
+
"animation-name": passthroughProps.animationName,
|
|
133
|
+
"animation-crossfade-duration": passthroughProps.animationCrossfadeDuration,
|
|
134
|
+
"variant-name": passthroughProps.variantName,
|
|
135
|
+
orientation: passthroughProps.orientation,
|
|
136
|
+
scale: passthroughProps.scale,
|
|
137
|
+
children
|
|
138
|
+
});
|
|
139
|
+
}
|
|
140
|
+
export {
|
|
141
|
+
ModelViewer
|
|
142
|
+
};
|
|
143
|
+
//# sourceMappingURL=ModelViewer.js.map
|