@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.
Files changed (172) hide show
  1. package/README.md +218 -0
  2. package/dist/dev/ExternalVideo.cjs +39 -0
  3. package/dist/dev/ExternalVideo.cjs.map +1 -0
  4. package/dist/dev/ExternalVideo.js +39 -0
  5. package/dist/dev/ExternalVideo.js.map +1 -0
  6. package/dist/dev/Image.cjs +104 -0
  7. package/dist/dev/Image.cjs.map +1 -0
  8. package/dist/dev/Image.js +104 -0
  9. package/dist/dev/Image.js.map +1 -0
  10. package/dist/dev/MediaFile.cjs +57 -0
  11. package/dist/dev/MediaFile.cjs.map +1 -0
  12. package/dist/dev/MediaFile.js +57 -0
  13. package/dist/dev/MediaFile.js.map +1 -0
  14. package/dist/dev/Metafield.cjs +295 -0
  15. package/dist/dev/Metafield.cjs.map +1 -0
  16. package/dist/dev/Metafield.js +295 -0
  17. package/dist/dev/Metafield.js.map +1 -0
  18. package/dist/dev/ModelViewer.cjs +145 -0
  19. package/dist/dev/ModelViewer.cjs.map +1 -0
  20. package/dist/dev/ModelViewer.js +145 -0
  21. package/dist/dev/ModelViewer.js.map +1 -0
  22. package/dist/dev/Money.cjs +40 -0
  23. package/dist/dev/Money.cjs.map +1 -0
  24. package/dist/dev/Money.js +40 -0
  25. package/dist/dev/Money.js.map +1 -0
  26. package/dist/dev/ProductPrice.cjs +61 -0
  27. package/dist/dev/ProductPrice.cjs.map +1 -0
  28. package/dist/dev/ProductPrice.js +61 -0
  29. package/dist/dev/ProductPrice.js.map +1 -0
  30. package/dist/dev/ProductProvider.cjs +161 -0
  31. package/dist/dev/ProductProvider.cjs.map +1 -0
  32. package/dist/dev/ProductProvider.js +161 -0
  33. package/dist/dev/ProductProvider.js.map +1 -0
  34. package/dist/dev/ShopPayButton.cjs +64 -0
  35. package/dist/dev/ShopPayButton.cjs.map +1 -0
  36. package/dist/dev/ShopPayButton.js +64 -0
  37. package/dist/dev/ShopPayButton.js.map +1 -0
  38. package/dist/dev/ShopifyProvider.cjs +46 -0
  39. package/dist/dev/ShopifyProvider.cjs.map +1 -0
  40. package/dist/dev/ShopifyProvider.js +46 -0
  41. package/dist/dev/ShopifyProvider.js.map +1 -0
  42. package/dist/dev/Video.cjs +44 -0
  43. package/dist/dev/Video.cjs.map +1 -0
  44. package/dist/dev/Video.js +44 -0
  45. package/dist/dev/Video.js.map +1 -0
  46. package/dist/dev/flatten-connection.cjs +23 -0
  47. package/dist/dev/flatten-connection.cjs.map +1 -0
  48. package/dist/dev/flatten-connection.js +23 -0
  49. package/dist/dev/flatten-connection.js.map +1 -0
  50. package/dist/dev/image-size.cjs +80 -0
  51. package/dist/dev/image-size.cjs.map +1 -0
  52. package/dist/dev/image-size.js +80 -0
  53. package/dist/dev/image-size.js.map +1 -0
  54. package/dist/dev/index.cjs +35 -0
  55. package/dist/dev/index.cjs.map +1 -0
  56. package/dist/dev/index.js +35 -0
  57. package/dist/dev/index.js.map +1 -0
  58. package/dist/dev/load-script.cjs +52 -0
  59. package/dist/dev/load-script.cjs.map +1 -0
  60. package/dist/dev/load-script.js +52 -0
  61. package/dist/dev/load-script.js.map +1 -0
  62. package/dist/dev/storefront-api-constants.cjs +5 -0
  63. package/dist/dev/storefront-api-constants.cjs.map +1 -0
  64. package/dist/dev/storefront-api-constants.js +5 -0
  65. package/dist/dev/storefront-api-constants.js.map +1 -0
  66. package/dist/dev/storefront-client.cjs +72 -0
  67. package/dist/dev/storefront-client.cjs.map +1 -0
  68. package/dist/dev/storefront-client.js +72 -0
  69. package/dist/dev/storefront-client.js.map +1 -0
  70. package/dist/dev/useMoney.cjs +72 -0
  71. package/dist/dev/useMoney.cjs.map +1 -0
  72. package/dist/dev/useMoney.js +72 -0
  73. package/dist/dev/useMoney.js.map +1 -0
  74. package/dist/prod/ExternalVideo.cjs +39 -0
  75. package/dist/prod/ExternalVideo.cjs.map +1 -0
  76. package/dist/prod/ExternalVideo.js +39 -0
  77. package/dist/prod/ExternalVideo.js.map +1 -0
  78. package/dist/prod/Image.cjs +99 -0
  79. package/dist/prod/Image.cjs.map +1 -0
  80. package/dist/prod/Image.js +99 -0
  81. package/dist/prod/Image.js.map +1 -0
  82. package/dist/prod/MediaFile.cjs +59 -0
  83. package/dist/prod/MediaFile.cjs.map +1 -0
  84. package/dist/prod/MediaFile.js +59 -0
  85. package/dist/prod/MediaFile.js.map +1 -0
  86. package/dist/prod/Metafield.cjs +288 -0
  87. package/dist/prod/Metafield.cjs.map +1 -0
  88. package/dist/prod/Metafield.js +288 -0
  89. package/dist/prod/Metafield.js.map +1 -0
  90. package/dist/prod/ModelViewer.cjs +143 -0
  91. package/dist/prod/ModelViewer.cjs.map +1 -0
  92. package/dist/prod/ModelViewer.js +143 -0
  93. package/dist/prod/ModelViewer.js.map +1 -0
  94. package/dist/prod/Money.cjs +40 -0
  95. package/dist/prod/Money.cjs.map +1 -0
  96. package/dist/prod/Money.js +40 -0
  97. package/dist/prod/Money.js.map +1 -0
  98. package/dist/prod/ProductPrice.cjs +61 -0
  99. package/dist/prod/ProductPrice.cjs.map +1 -0
  100. package/dist/prod/ProductPrice.js +61 -0
  101. package/dist/prod/ProductPrice.js.map +1 -0
  102. package/dist/prod/ProductProvider.cjs +161 -0
  103. package/dist/prod/ProductProvider.cjs.map +1 -0
  104. package/dist/prod/ProductProvider.js +161 -0
  105. package/dist/prod/ProductProvider.js.map +1 -0
  106. package/dist/prod/ShopPayButton.cjs +64 -0
  107. package/dist/prod/ShopPayButton.cjs.map +1 -0
  108. package/dist/prod/ShopPayButton.js +64 -0
  109. package/dist/prod/ShopPayButton.js.map +1 -0
  110. package/dist/prod/ShopifyProvider.cjs +46 -0
  111. package/dist/prod/ShopifyProvider.cjs.map +1 -0
  112. package/dist/prod/ShopifyProvider.js +46 -0
  113. package/dist/prod/ShopifyProvider.js.map +1 -0
  114. package/dist/prod/Video.cjs +44 -0
  115. package/dist/prod/Video.cjs.map +1 -0
  116. package/dist/prod/Video.js +44 -0
  117. package/dist/prod/Video.js.map +1 -0
  118. package/dist/prod/flatten-connection.cjs +18 -0
  119. package/dist/prod/flatten-connection.cjs.map +1 -0
  120. package/dist/prod/flatten-connection.js +18 -0
  121. package/dist/prod/flatten-connection.js.map +1 -0
  122. package/dist/prod/image-size.cjs +80 -0
  123. package/dist/prod/image-size.cjs.map +1 -0
  124. package/dist/prod/image-size.js +80 -0
  125. package/dist/prod/image-size.js.map +1 -0
  126. package/dist/prod/index.cjs +35 -0
  127. package/dist/prod/index.cjs.map +1 -0
  128. package/dist/prod/index.js +35 -0
  129. package/dist/prod/index.js.map +1 -0
  130. package/dist/prod/load-script.cjs +52 -0
  131. package/dist/prod/load-script.cjs.map +1 -0
  132. package/dist/prod/load-script.js +52 -0
  133. package/dist/prod/load-script.js.map +1 -0
  134. package/dist/prod/storefront-api-constants.cjs +5 -0
  135. package/dist/prod/storefront-api-constants.cjs.map +1 -0
  136. package/dist/prod/storefront-api-constants.js +5 -0
  137. package/dist/prod/storefront-api-constants.js.map +1 -0
  138. package/dist/prod/storefront-client.cjs +57 -0
  139. package/dist/prod/storefront-client.cjs.map +1 -0
  140. package/dist/prod/storefront-client.js +57 -0
  141. package/dist/prod/storefront-client.js.map +1 -0
  142. package/dist/prod/useMoney.cjs +72 -0
  143. package/dist/prod/useMoney.cjs.map +1 -0
  144. package/dist/prod/useMoney.js +72 -0
  145. package/dist/prod/useMoney.js.map +1 -0
  146. package/dist/types/ExternalVideo.d.ts +67 -0
  147. package/dist/types/Image.d.ts +54 -0
  148. package/dist/types/MediaFile.d.ts +31 -0
  149. package/dist/types/Metafield.d.ts +58 -0
  150. package/dist/types/ModelViewer.d.ts +57 -0
  151. package/dist/types/Money.d.ts +29 -0
  152. package/dist/types/ProductPrice.d.ts +22 -0
  153. package/dist/types/ProductProvider.d.ts +74 -0
  154. package/dist/types/ShopPayButton.d.ts +42 -0
  155. package/dist/types/ShopifyProvider.d.ts +42 -0
  156. package/dist/types/Video.d.ts +20 -0
  157. package/dist/types/flatten-connection.d.ts +17 -0
  158. package/dist/types/image-size.d.ts +36 -0
  159. package/dist/types/index.d.cts +15 -0
  160. package/dist/types/index.d.ts +15 -0
  161. package/dist/types/load-script.d.ts +11 -0
  162. package/dist/types/storefront-api-constants.d.ts +1 -0
  163. package/dist/types/storefront-api-response.types.d.ts +68 -0
  164. package/dist/types/storefront-api-types.d.ts +6537 -0
  165. package/dist/types/storefront-client.d.ts +63 -0
  166. package/dist/types/useMoney.d.ts +55 -0
  167. package/dist/umd/hydrogen-react.dev.js +1472 -0
  168. package/dist/umd/hydrogen-react.dev.js.map +1 -0
  169. package/dist/umd/hydrogen-react.prod.js +3 -0
  170. package/dist/umd/hydrogen-react.prod.js.map +1 -0
  171. package/package.json +106 -0
  172. 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":";;;;;AA8DO,SAASA,YAAYC,OAAyB;;AACnD,QAAM,CAACC,aAAaC,cAAd,IAAgCC,MAAAA,SACpCC,MAD4C;AAGxCC,QAAAA,cAAcC,kBAAY,CAACC,SAAsB;AACrDL,mBAAeK,IAAD;AAAA,EACf,GAAE,CAF4B,CAAA;AAGzB,QAAA;AAAA,IAACC;AAAAA,IAAMC;AAAAA,IAAUC;AAAAA,OAAcC;AAAAA,EAAoBX,IAAAA;AAEnDY,QAAAA,0BAA0BC,yBAC9B,2EACA;AAAA,IACEC,QAAQ;AAAA,EAAA,CAHiC;AAO7CC,QAAAA,UAAU,MAAM;AACd,QAAI,CAACd,aAAa;AAChB;AAAA,IACD;AACD,QAAIU,iBAAiBK;AACPC,kBAAAA,iBAAiB,SAASN,iBAAiBK,OAAvD;AACF,QAAIL,iBAAiBO;AACPD,kBAAAA,iBAAiB,QAAQN,iBAAiBO,MAAtD;AACF,QAAIP,iBAAiBQ;AACPF,kBAAAA,iBAAiB,WAAWN,iBAAiBQ,SAAzD;AACF,QAAIR,iBAAiBS;AACPH,kBAAAA,iBACV,oBACAN,iBAAiBS,iBAFnB;AAIF,QAAIT,iBAAiBU;AACPJ,kBAAAA,iBAAiB,YAAYN,iBAAiBU,UAA1D;AACF,QAAIV,iBAAiBW;AACPL,kBAAAA,iBAAiB,aAAaN,iBAAiBW,UAA3D;AACF,QAAIX,iBAAiBY;AACPN,kBAAAA,iBACV,eACAN,iBAAiBY,YAFnB;AAIF,QAAIZ,iBAAiBa;AACPP,kBAAAA,iBACV,4BACAN,iBAAiBa,uBAFnB;AAIF,QAAIb,iBAAiBc;AACPR,kBAAAA,iBACV,iBACAN,iBAAiBc,cAFnB;AAIF,QAAId,iBAAiBe;AACPT,kBAAAA,iBACV,sBACAN,iBAAiBe,mBAFnB;AAIF,QAAIf,iBAAiBgB;AACPV,kBAAAA,iBAAiB,QAAQN,iBAAiBgB,MAAtD;AACF,QAAIhB,iBAAiBiB;AACPX,kBAAAA,iBAAiB,aAAaN,iBAAiBiB,OAA3D;AACF,QAAIjB,iBAAiBkB;AACPZ,kBAAAA,iBACV,qBACAN,iBAAiBkB,iBAFnB;AAKF,WAAO,MAAM;AACX,UAAI5B,eAAe,MAAM;AACvB;AAAA,MACD;AACD,UAAIU,iBAAiBK;AACPc,oBAAAA,oBAAoB,SAASnB,iBAAiBK,OAA1D;AACF,UAAIL,iBAAiBO;AACPY,oBAAAA,oBAAoB,QAAQnB,iBAAiBO,MAAzD;AACF,UAAIP,iBAAiBQ;AACPW,oBAAAA,oBAAoB,WAAWnB,iBAAiBQ,SAA5D;AACF,UAAIR,iBAAiBS;AACPU,oBAAAA,oBACV,oBACAnB,iBAAiBS,iBAFnB;AAIF,UAAIT,iBAAiBU;AACPS,oBAAAA,oBACV,YACAnB,iBAAiBU,UAFnB;AAIF,UAAIV,iBAAiBW;AACPQ,oBAAAA,oBACV,aACAnB,iBAAiBW,UAFnB;AAIF,UAAIX,iBAAiBY;AACPO,oBAAAA,oBACV,eACAnB,iBAAiBY,YAFnB;AAIF,UAAIZ,iBAAiBa;AACPM,oBAAAA,oBACV,4BACAnB,iBAAiBa,uBAFnB;AAIF,UAAIb,iBAAiBc;AACPK,oBAAAA,oBACV,iBACAnB,iBAAiBc,cAFnB;AAIF,UAAId,iBAAiBe;AACPI,oBAAAA,oBACV,sBACAnB,iBAAiBe,mBAFnB;AAIF,UAAIf,iBAAiBgB;AACPG,oBAAAA,oBAAoB,QAAQnB,iBAAiBgB,MAAzD;AACF,UAAIhB,iBAAiBiB;AACPE,oBAAAA,oBAAoB,aAAanB,iBAAiBiB,OAA9D;AACF,UAAIjB,iBAAiBkB;AACPC,oBAAAA,oBACV,qBACAnB,iBAAiBkB,iBAFnB;AAAA,IAAA;AAAA,EAKH,GAAA,CACD5B,aACAU,iBAAiBW,YACjBX,iBAAiBY,cACjBZ,iBAAiBc,gBACjBd,iBAAiBe,qBACjBf,iBAAiBK,SACjBL,iBAAiBO,QACjBP,iBAAiBS,mBACjBT,iBAAiBiB,SACjBjB,iBAAiBgB,QACjBhB,iBAAiBQ,WACjBR,iBAAiBU,YACjBV,iBAAiBa,yBACjBb,iBAAiBkB,iBAdhB,CAxGM;AAyHT,MAAIjB,4BAA4B,QAAQ;AAE/B,WAAA;AAAA,EACR;AAED,MAAI,GAACJ,gBAAKuB,YAALvB,mBAAe,OAAfA,mBAAmBwB,MAAK;AAC3B,UAAMC,kBAAmB;AAGlB;AACLC,cAAQC,MAAMF,eAAd;AACO,aAAA;AAAA,IACR;AAAA,EACF;AAQD,wCACE,gBAAA;AAAA,IAEE,KAAK5B;AAAAA,IAFP,GAGMM;AAAAA,IACJ;AAAA,IACA,KAAIA,sBAAiByB,OAAjBzB,YAAuBH,KAAK4B;AAAAA,IAChC,KAAK5B,KAAKuB,QAAQ,GAAGC;AAAAA,IACrB,MAAKxB,UAAK6B,QAAL7B,YAAY;AAAA,IACjB,oBAAiBG,sBAAiB2B,mBAAjB3B,YAAmC;AAAA,IACpD,SAASA,sBAAiB4B,YAAU/B,UAAKgC,iBAALhC,mBAAmBwB,SAA9CrB,YAAsD;AAAA,IAC/D,WAAUA,sBAAiB8B,aAAjB9B,YAA6B;AAAA,IACvC,SAASA,iBAAiB+B;AAAAA,IAC1B,QAAQ/B,iBAAiBgC;AAAAA,IACzB,IAAIhC,iBAAiBiC;AAAAA,IACrB,YAAUjC,iBAAiBkC;AAAAA,IAC3B,YAAUlC,iBAAiBmC;AAAAA,IAE3B,gBAAcnC,iBAAiBoC;AAAAA,IAC/B,WAASpC,iBAAiBqC;AAAAA,IAC1B,gBAAcrC,iBAAiBsC;AAAAA,IAC/B,gBAActC,iBAAiBuC;AAAAA,IAC/B,qBAAmBvC,iBAAiBwC;AAAAA,IACpC,eAAaxC,iBAAiByC;AAAAA,IAC9B,qBAAmBzC,iBAAiB0C;AAAAA,IAEpC,uBAAqB1C,iBAAiB2C;AAAAA,IACtC,sBAAoB3C,iBAAiB4C;AAAAA,IACrC,sBAAoB5C,iBAAiB6C;AAAAA,IACrC,4BAA0B7C,iBAAiB8C;AAAAA,IAC3C,gCAA8B9C,iBAAiB+C;AAAAA,IAC/C,gBAAc/C,iBAAiBgD;AAAAA,IAC/B,iBAAehD,iBAAiBiD;AAAAA,IAChC,iBAAejD,iBAAiBkD;AAAAA,IAChC,oBAAkBlD,iBAAiBmD;AAAAA,IACnC,oBAAkBnD,iBAAiBoD;AAAAA,IACnC,qBAAmBpD,iBAAiBqD;AAAAA,IACpC,qBAAmBrD,iBAAiBsD;AAAAA,IACpC,QAAQtD,iBAAiBuD;AAAAA,IACzB,wBAAqBvD,sBAAiBwD,uBAAjBxD,YAAuC;AAAA,IAC5D,gBAAcA,iBAAiByD;AAAAA,IAC/B,qBAAmBzD,iBAAiB0D;AAAAA,IACpC,UAAU1D,iBAAiB2D;AAAAA,IAC3B,qBAAkB3D,sBAAiB4D,oBAAjB5D,YAAoC;AAAA,IACtD,oBAAiBA,sBAAiB6D,mBAAjB7D,YAAmC;AAAA,IACpD,kBAAgBA,iBAAiB8D;AAAAA,IACjC,gCAA8B9D,iBAAiB+D;AAAAA,IAC/C,gBAAc/D,iBAAiBgE;AAAAA,IAC/B,aAAahE,iBAAiBiE;AAAAA,IAC9B,OAAOjE,iBAAiBkE;AAAAA,IAhD1B;AAAA,EAAA,CADF;AAsDD;;"}
@@ -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